Users assigning part of the Role management feature is implemented to the B2B sample application

b2b-sample/guardio-insurance-sample-application/components/common/accordianItemHeader.js

@@ -0,0 +1,54 @@
+/**
+ * Copyright (c) 2022, WSO2 LLC. (https://www.wso2.com). All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from "react";
+import { Avatar, Stack } from "rsuite";
+import { random_rgba } from "../../util/util/common/common";
+
+/**
+ * 
+ * @param prop - `title`, `description`, `imageUrl`
+ * 
+ * @returns header componet for items in an accordian
+ */
+export default function AccordianItemHeader(prop) {
+
+    const { title, description, imageUrl } = prop;
+
+    return (
+        <Stack>
+            <Stack spacing={ 20 }>
+                <Avatar
+                    size="md"
+                    circle
+                    src={ imageUrl }
+                    alt="IDP image"
+                    style={ imageUrl ? { background: "rgba(255,0,0,0)" } : { background: `${random_rgba()}` } }
+                >
+                    { title ? title.charAt(0) : "" }
+                </Avatar>
+                <Stack direction="column" justifyContent="flex-start" alignItems="stretch">
+                    <h5>{ title }</h5>
+                    <p>{ description ? description : "" }</p>
+                </Stack>
+            </Stack>
+
+        </Stack>
+    );
+}
+

b2b-sample/guardio-insurance-sample-application/components/common/emptySettings.js

@@ -0,0 +1,54 @@
+/**
+ * Copyright (c) 2022, WSO2 LLC. (https://www.wso2.com). All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from "react";
+import { Button, FlexboxGrid, Stack } from "rsuite";
+
+/**
+ * 
+ * @param prop - onAddIdentityProviderClick (function to open add idp modal)
+ * 
+ * @returns The componet to show when there is no idp's.
+ */
+export default function EmptySettings(prop) {
+
+    const { bodyString, buttonString, icon, onAddButtonClick } = prop;
+
+    return (
+        <FlexboxGrid
+            style={ { height: "60vh", marginTop: "24px", width: "100%" } }
+            justify="center"
+            align="middle">
+            <Stack alignItems="center" direction="column">
+                { icon }
+                <p style={ { fontSize: 14, marginTop: "20px" } }>
+                    { bodyString }
+                </p>
+                <Button
+                    appearance="primary"
+                    onClick={ onAddButtonClick }
+                    size="md"
+                    style={ { marginTop: "12px" } }>
+                    { buttonString }
+                </Button>
+            </Stack>
+        </FlexboxGrid>
+    );
+
+}
+

b2b-sample/guardio-insurance-sample-application/components/sections/settingsSection/idpSection/otherComponents/idpDetailsSections/raw.js → b2b-sample/guardio-insurance-sample-application/components/common/jsonDisplay.js

@@ -17,19 +17,18 @@
  */
 
 import React from "react";
-import styles from "../../../../../../styles/idp.module.css";
 
 /**
  * 
- * @param prop - idpDetails
+ * @param prop - `jsonObject` 
  * 
- * @returns The raw section of an idp
+ * @returns The beautified json object visualizer component
  */
-export default function Raw(prop) {
+export default function JsonDisplay(prop) {
+
+    const { jsonObject } = prop;
 
-    const { idpDetails } = prop;
-
     return (
-        <pre className={ styles.idp__item__json__pre }> { JSON.stringify(idpDetails, null, 2) }</pre>
+        <pre style={ { maxWidth: "50vw" } }> { JSON.stringify(jsonObject, null, 2) }</pre>
     );
 }

b2b-sample/guardio-insurance-sample-application/components/common/settingsTitle.js

@@ -23,16 +23,22 @@ import { Stack } from "rsuite";
  * 
  * @param prop - title, subtitle
  * 
- * @returns A component for the title in an interface of the admin settings section
+ * @returns A component for the title in an interface of the admin settings sections
  */
 export default function SettingsTitle(prop) {
-    
-    const { title, subtitle } = prop;
+
+    const { title, subtitle, children } = prop;
 
     return (
-        <Stack direction="column" alignItems="flex-start">
-            <h2>{ title }</h2>
-            <p>{ subtitle }</p>
+        <Stack
+            direction="row"
+            justifyContent="space-between">
+            <Stack direction="column" alignItems="flex-start">
+                <h2>{ title }</h2>
+                <p>{ subtitle }</p>
+            </Stack>
+            { children }
         </Stack>
+
     );
 }

b2b-sample/guardio-insurance-sample-application/components/sections/data/sideNav.json

@@ -0,0 +1,34 @@
+{
+    "items" : [
+        {
+            "title" : "Dashboard",
+            "eventKey" : "1",
+            "icon" : "DashboardIcon",
+            "type": "item"
+        },
+        {
+            "title" : "Settings",
+            "eventKey" : "2",
+            "icon" : "GearCircleIcon",
+            "type": "menu",
+            "hideBasedOnScope" : true,
+            "items" : [
+                {
+                    "title" : "Manage Users",
+                    "eventKey" : "2-1",
+                    "type": "item"
+                },
+                {
+                    "title" : "Role Management",
+                    "eventKey" : "2-2",
+                    "type": "item"
+                },
+                {
+                    "title" : "Identity Providers",
+                    "eventKey" : "2-3",
+                    "type": "item"
+                }
+            ]
+        }
+    ]
+}

b2b-sample/guardio-insurance-sample-application/components/sections/home.js

@@ -16,18 +16,16 @@
  * under the License.
  */
 
-import DashboardIcon from "@rsuite/icons/legacy/Dashboard";
-import GearCircleIcon from "@rsuite/icons/legacy/GearCircle";
 import React, { useState } from "react";
-import { Button, Nav, Sidenav } from "rsuite";
 import "rsuite/dist/rsuite.min.css";
-import DashboardSectionComponent from "./dashboardSection/dashboardSectionComponent";
-import IdpSectionComponent from "./settingsSection/idpSection/idpSectionComponent";
-import ManageUserSectionComponent from "./settingsSection/manageUserSection/manageUserSectionComponent";
+import SideNavSection from "./otherComponents/sideNavSection";
+import DashboardSectionComponent from "./sections/dashboardSection/dashboardSectionComponent";
+import IdpSectionComponent from "./sections/settingsSection/idpSection/idpSectionComponent";
+import ManageUserSectionComponent from "./sections/settingsSection/manageUserSection/manageUserSectionComponent";
+import RoleManagementSectionComponent from
+    "./sections/settingsSection/roleManagementSection/roleManagementSectionComponent";
 import Custom500 from "../../pages/500";
 import styles from "../../styles/Settings.module.css";
-import { hideBasedOnScopes } from "../../util/util/frontendUtil/frontendUtil";
-import LogoComponent from "../common/logo/logoComponent";
 import SignOutModal from "../common/signOutModal";
 
 /**
@@ -51,6 +49,9 @@ export default function Home(prop) {
             case "2-1":
 
                 return <ManageUserSectionComponent orgName={ name } orgId={ orgId } session={ session } />;
+            case "2-2":
+
+                return <RoleManagementSectionComponent orgName={ name } orgId={ orgId } session={ session } />;
             case "2-3":
 
                 return <IdpSectionComponent orgName={ name } orgId={ orgId } session={ session } />;
@@ -86,47 +87,3 @@ export default function Home(prop) {
         </div>
     );
 }
-
-function SideNavSection(prop) {
-
-    const { name, scope, activeKeySideNav, activeKeySideNavSelect, setSignOutModalOpen } = prop;
-
-    const signOutOnClick = () => setSignOutModalOpen(true);
-
-    return (
-        <Sidenav appearance="inverse" className={ styles.sideNav } defaultOpenKeys={ [ "3", "4" ] }>
-            <Sidenav.Header>
-                <div style={ { marginBottom: "25px", marginTop: "35px" } }>
-                    <LogoComponent imageSize="small" name={ name } white={ true }/>
-                </div>
-            </Sidenav.Header>
-            <Sidenav.Body>
-                <Nav activeKey={ activeKeySideNav }>
-                    <Nav.Item
-                        eventKey="1"
-                        icon={ <DashboardIcon /> }
-                        onSelect={ (eventKey) => activeKeySideNavSelect(eventKey) }>
-                        Dashboard
-                    </Nav.Item>
-                    <Nav.Menu
-                        eventKey="2"
-                        title="Settings"
-                        icon={ <GearCircleIcon /> }
-                        style={ hideBasedOnScopes(scope) }>
-                        <Nav.Item
-                            eventKey="2-1"
-                            onSelect={ (eventKey) => activeKeySideNavSelect(eventKey) }>
-                            Manage Users</Nav.Item>
-                        <Nav.Item
-                            eventKey="2-3"
-                            onSelect={ (eventKey) => activeKeySideNavSelect(eventKey) }>
-                            Identity Providers</Nav.Item>
-                    </Nav.Menu>
-                </Nav>
-            </Sidenav.Body>
-            <div className={ styles.nextButtonDiv }>
-                <Button size="lg" appearance="default" onClick={ signOutOnClick }>Sign Out</Button>
-            </div>
-        </Sidenav>
-    );
-}

b2b-sample/guardio-insurance-sample-application/components/sections/otherComponents/sideNavSection.js

@@ -0,0 +1,104 @@
+/**
+ * Copyright (c) 2022, WSO2 LLC. (https://www.wso2.com). All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import DashboardIcon from "@rsuite/icons/legacy/Dashboard";
+import GearCircleIcon from "@rsuite/icons/legacy/GearCircle";
+import React from "react";
+import { Button, Nav, Sidenav } from "rsuite";
+import "rsuite/dist/rsuite.min.css";
+import styles from "../../../styles/Settings.module.css";
+import { hideBasedOnScopes } from "../../../util/util/frontendUtil/frontendUtil";
+import LogoComponent from "../../common/logo/logoComponent";
+import sideNavConfig from "../data/sideNav.json";
+
+/**
+ * 
+ * @param prop - `name`, `scope`, `activeKeySideNav`, `activeKeySideNavSelect`, `setSignOutModalOpen`
+ * 
+ * @returns side navigation component
+ */
+export default function SideNavSection(prop) {
+
+    const { name, scope, activeKeySideNav, activeKeySideNavSelect, setSignOutModalOpen } = prop;
+
+    const signOutOnClick = () => setSignOutModalOpen(true);
+
+    const getIcon = (iconString) => {
+        switch (iconString) {
+            case "DashboardIcon":
+
+                return (<DashboardIcon />);
+            case "GearCircleIcon":
+
+                return (<GearCircleIcon />);
+            default:
+                break;
+        }
+    };
+
+    return (
+        <Sidenav appearance="inverse" className={ styles.sideNav } defaultOpenKeys={ [ "3", "4" ] }>
+            <Sidenav.Header>
+                <div style={ { marginBottom: "25px", marginTop: "35px" } }>
+                    <LogoComponent imageSize="small" name={ name } white={ true } />
+                </div>
+            </Sidenav.Header>
+            <Sidenav.Body>
+                <Nav activeKey={ activeKeySideNav }>
+                    {
+                        sideNavConfig.items.map((item) => {
+
+                            if (item.items) {
+                                return (
+                                    <Nav.Menu
+                                        eventKey={ item.eventKey }
+                                        title={ item.title }
+                                        icon={ getIcon(item.icon) }
+                                        style={ item.hideBasedOnScope ? hideBasedOnScopes(scope) : {} }>
+                                        {
+                                            item.items.map((item) =>
+                                                (<Nav.Item
+                                                    key={ item.eventKey }
+                                                    eventKey={ item.eventKey }
+                                                    onSelect={ (eventKey) => activeKeySideNavSelect(eventKey) }>
+                                                    { item.title }
+                                                </Nav.Item>)
+                                            )
+                                        }
+                                    </Nav.Menu>
+                                );
+                            } else {
+                                return (
+                                    <Nav.Item
+                                        eventKey={ item.eventKey }
+                                        icon={ getIcon(item.icon) }
+                                        onSelect={ (eventKey) => activeKeySideNavSelect(eventKey) }>
+                                        { item.title }
+                                    </Nav.Item>
+                                );
+                            }
+                        })
+                    }
+                </Nav>
+            </Sidenav.Body>
+            <div className={ styles.nextButtonDiv }>
+                <Button size="lg" appearance="default" onClick={ signOutOnClick }>Sign Out</Button>
+            </div>
+        </Sidenav>
+    );
+}