Merge pull request #728 from jembi/CU-86c19v2x6_Navigation-Breadcrumbs-missing

feat: add breadcrumb navigation to BasePageTemplate and update relate…

Author: drizzentic

packages/base-components/BasePageTemplate.tsx

@@ -6,26 +6,58 @@ import {
   Button,
   Card,
   Divider,
-  alpha
+  alpha,
+  Link
 } from '@mui/material'
+import Breadcrumbs from '@mui/material/Breadcrumbs'
 
 interface BasePageTemplateProps {
   children: React.ReactNode | React.ReactNode[]
   title: string
   subtitle: string | React.ReactNode
   button?: React.ReactNode
+  breadcrumbs?: Breadcrumb[]
+}
+
+interface Breadcrumb {
+  label: string
+  href?: string
 }
 
 export function BasePageTemplate({
   children,
   title,
   subtitle,
-  button
+  button,
+  breadcrumbs
 }: BasePageTemplateProps) {
   return (
     <Box padding={1}>
       <Grid container padding={2} spacing={2}>
         <Grid item xs={12}>
+          <Breadcrumbs aria-label="breadcrumb" sx={{marginBottom: '24px'}}>
+            {breadcrumbs?.map(breadcrumb => {
+              if (breadcrumb.href) {
+                return (
+                  <Link
+                    underline="hover"
+                    sx={{
+                      color: '#049D84'
+                    }}
+                    key={breadcrumb.label}
+                    href={breadcrumb.href}
+                  >
+                    {breadcrumb.label}
+                  </Link>
+                )
+              }
+              return (
+                <Typography key={breadcrumb.label}>
+                  {breadcrumb.label}
+                </Typography>
+              )
+            })}
+          </Breadcrumbs>
           <Typography
             variant="h4"
             gutterBottom
@@ -40,6 +72,9 @@ export function BasePageTemplate({
               textAlign: 'left',
               display: 'inline-block',
               fontSmooth: 'never',
+              ...(breadcrumbs && {
+                marginBottom: '24px'
+              }),
               '-webkit-font-smoothing': 'antialiased',
               '-moz-osx-font-smoothing': 'grayscale'
             }}

packages/channels-app/src/screens/add.channel.screen.tsx

@@ -108,6 +108,7 @@ function AddChannelScreen() {
     <BasePageTemplate
       title="Add Channel"
       subtitle="Control client systems and their access roles. Add clients to enable their request routing and group them by roles for streamlined channel accesss managment."
+      breadcrumbs={[{label: 'Channels', href: '/#!/channels'}, {label: 'Add'}]}
     >
       <Grid
         container

packages/channels-app/src/screens/edit.channel.screen.tsx

@@ -65,6 +65,7 @@ function EditChannelScreen() {
     <BasePageTemplate
       title="Edit Channel"
       subtitle="Control client systems and their access roles. Add clients to enable their request routing and group them by roles for streamlined channel accesss managment."
+      breadcrumbs={[{label: 'Channels', href: '/#!/channels'}, {label: 'Edit'}]}
     >
       <Grid
         container

packages/client-roles-app/src/pages/client-role-form/client-role-form.tsx

@@ -165,6 +165,10 @@ export const ClientRoleForm = () => {
           ? pageHeadingTypography.editClientUserRole.caption
           : pageHeadingTypography.addClientUserRole.caption
       }
+      breadcrumbs={[
+        {label: 'Client Roles', href: '/#!/client-roles'},
+        {label: existingClientRole ? 'Edit' : 'Add'}
+      ]}
     >
       <Card variant="outlined" sx={{margin: 'auto', maxWidth: 610}}>
         <Box sx={{margin: 1}} role="form" aria-label="Client Role Form">
@@ -174,8 +178,8 @@ export const ClientRoleForm = () => {
               label="Role Name"
               variant="outlined"
               helperText="Choose a short but descriptive name"
-              aria-required="true"  
-              aria-describedby="role-name-helper-text" 
+              aria-required="true"
+              aria-describedby="role-name-helper-text"
               value={clientRole.roleName}
               onChange={e => {
                 setClientRole(prevClientRole => ({

packages/clients-app/src/pages/add-client/add-client.tsx

@@ -25,7 +25,7 @@ import CryptoJS from 'crypto-js'
 import './style.css'
 import {AxiosError} from 'axios'
 import {useSnackbar} from 'notistack'
-import { BasePageTemplate } from '../../../../base-components'
+import {BasePageTemplate} from '../../../../base-components'
 
 export const AddClient = () => {
   //TODO: Make sure that there is a safe guard when incrementing this value to prevent it from going over the number of steps
@@ -198,6 +198,7 @@ export const AddClient = () => {
       <BasePageTemplate
         title="Add Client"
         subtitle="Control client systems and their access roles. Add clients to enable their request routing and group them by roles for streamlined channel access management"
+        breadcrumbs={[{label: 'Clients', href: '/#!/clients'}, {label: 'Add'}]}
       >
         <Grid item xs={12}>
           <Card variant="outlined" sx={{margin: 'auto', maxWidth: 610}}>

packages/clients-app/src/pages/clients-list/clients-list.tsx

@@ -1,11 +1,6 @@
-import {
-  Button,
-  Typography
-} from '@mui/material'
+import {Button, Typography} from '@mui/material'
 import {Client} from '../../types'
-import {
-  GridColDef,
-} from '@mui/x-data-grid'
+import {GridColDef} from '@mui/x-data-grid'
 import {useEffect, useState} from 'react'
 import {fetchClients, deleteClient} from '@jembi/openhim-core-api'
 import CreateIcon from '@mui/icons-material/Create'

packages/clients-app/src/pages/edit-client/edit-client.tsx

@@ -202,6 +202,7 @@ const EditClient = () => {
       <BasePageTemplate
         title="Edit Client"
         subtitle="Control client systems and their access roles. Add clients to enable their request routing and group them by roles for streamlined channel access management"
+        breadcrumbs={[{label: 'Clients', href: '/#!/clients'}, {label: 'Edit'}]}
       >
         <Grid item xs={12}>
           <Card sx={{width: 550, margin: 'auto'}}>

packages/rbac-app/src/screens/create.role.component.tsx

@@ -106,6 +106,10 @@ function AddUserRole() {
     <BasePageTemplate
       title="Add User Role"
       subtitle="Easily assign and manage roles and permissions to users by selecting a role, viewing and editing its permissions, or creating a new role with customized permissions."
+      breadcrumbs={[
+        {label: 'User Roles', href: '/#!/user-roles'},
+        {label: 'Add'}
+      ]}
     >
       <Grid
         container

packages/rbac-app/src/screens/edit.role.component.tsx

@@ -107,6 +107,10 @@ function EditUserRole() {
     <BasePageTemplate
       title="Edit User Role"
       subtitle="Easily assign and manage roles and permissions to users by selecting a role, viewing and editing its permissions, or creating a new role with customized permissions."
+      breadcrumbs={[
+        {label: 'User Roles', href: '/#!/user-roles'},
+        {label: 'Edit'}
+      ]}
     >
       <Grid
         container

packages/users-app/src/screens/create.user.component.tsx

@@ -70,6 +70,7 @@ function AddUserRole() {
     <BasePageTemplate
       title="Add User"
       subtitle="Control client systems and their access roles. Add clients to enable their request routing and group them by roles for streamlined channel management."
+      breadcrumbs={[{label: 'Users', href: '/#!/users'}, {label: 'Add'}]}
     >
       <Grid
         container

packages/users-app/src/screens/edit.user.component.tsx

@@ -90,6 +90,7 @@ function AddUserRole() {
     <BasePageTemplate
       title="Edit User"
       subtitle="Control client systems and their access roles. Edit clients to enable their request routing and group them by roles for streamlined channel management."
+      breadcrumbs={[{label: 'Users', href: '/#!/users'}, {label: 'Edit'}]}
     >
       <Grid
         container