Merge pull request #718 from jembi/CU-86c0zz83z-align_menu_children_t…

…o_center

feat: align child menu items to center.

packages/base-components/BasePageTemplate.tsx

@@ -10,7 +10,7 @@ import {
 } from '@mui/material'
 
 interface BasePageTemplateProps {
-  children: React.ReactNode
+  children: React.ReactNode | React.ReactNode[]
   title: string
   subtitle: string | React.ReactNode
   button?: React.ReactNode

packages/channels-app/src/screens/manage.channels.screen.tsx

@@ -224,8 +224,13 @@ const ManageChannelsScreen: React.FC = () => {
       title="Manage Channels"
       subtitle={
         <>
-          Setup and control your channels. 
-          <a href="https://openhim.org/docs/configuration/channels">How do channels work?</a>
+          Setup and control your channels.{' '}
+          <a
+            href="https://openhim.org/docs/configuration/channels"
+            target="_blank"
+          >
+            How do channels work?
+          </a>
         </>
       }
       button={

packages/header-app/src/components/openhim.appbar.component.tsx

@@ -397,11 +397,11 @@ export default function OpenhimAppBar() {
                         }
                         anchorOrigin={{
                           vertical: 'top',
-                          horizontal: 'right'
+                          horizontal: 'center'
                         }}
                         transformOrigin={{
                           vertical: 'top',
-                          horizontal: 'right'
+                          horizontal: 'center'
                         }}
                         open={
                           page.name.toUpperCase() === 'MORE'
@@ -529,11 +529,11 @@ export default function OpenhimAppBar() {
                       anchorEl={getCorrectAnchorEl(page)[0]}
                       anchorOrigin={{
                         vertical: 'top',
-                        horizontal: 'right'
+                        horizontal: 'center'
                       }}
                       transformOrigin={{
                         vertical: 'top',
-                        horizontal: 'right'
+                        horizontal: 'center'
                       }}
                       open={Boolean(getCorrectAnchorEl(page)[0])}
                       onClose={() =>
@@ -580,11 +580,11 @@ export default function OpenhimAppBar() {
               anchorEl={anchorElUser}
               anchorOrigin={{
                 vertical: 'center',
-                horizontal: 'right'
+                horizontal: 'center'
               }}
               transformOrigin={{
                 vertical: 'center',
-                horizontal: 'right'
+                horizontal: 'center'
               }}
               open={Boolean(anchorElUser)}
               onClose={handleCloseUserMenu}

packages/portal-admin/src/components/ActiveStepZero.tsx

@@ -111,7 +111,7 @@ const ActiveStepZero: React.FC<ActiveStepZeroProps> = ({
       )
     })
   }
- 
+
   return (
     <>
       <FormControl fullWidth component="fieldset" required>
@@ -148,12 +148,13 @@ const ActiveStepZero: React.FC<ActiveStepZeroProps> = ({
           options={categoryOptions}
           value={values.category}
           onBlur={e => {
-            console.log(`appCategoryFieldRef.current.value: ${appCategoryFieldRef.current.value}`)
-
+            console.log(
+              `appCategoryFieldRef.current.value: ${appCategoryFieldRef.current.value}`
+            )
+
             handleChange(e)
             setAppCategoryHelperMessage('')
           }}
-
         />
         <FormHelperText error={appCategoryHelperMessage ? true : false}>
           {appCategoryHelperMessage}

packages/portal-admin/src/components/AppsDataGrid.tsx

@@ -24,7 +24,8 @@ import {
   StepLabel,
   DialogContent,
   DialogActions,
-  Divider
+  Divider,
+  Paper
 } from '@mui/material'
 import WarningIcon from '@mui/icons-material/Warning'
 import ImageNotSupportedIcon from '@mui/icons-material/ImageNotSupported'
@@ -54,6 +55,7 @@ import ActiveStepOne from './ActiveStepOne'
 import ActiveStepTwo from './ActiveStepTwo'
 import {AppProps} from './FormInputProps'
 import {countdown} from './utils'
+import {BasePageTemplate} from '../../../base-components'
 
 const StyledGridOverlay = styled('div')(() => ({
   display: 'flex',
@@ -227,7 +229,7 @@ const AppsDataGrid = () => {
   const CustomNoRowsOverlay = () => {
     return (
       <>
-        <StyledGridOverlay>
+        <StyledGridOverlay sx={{py: 1}}>
           <ErrorIcon fontSize="large" color="disabled" />
           <Box sx={{m: 1}}>No apps found</Box>
           <Button
@@ -609,34 +611,35 @@ const AppsDataGrid = () => {
   }
 
   return (
-    <>
-      <Box paddingX={0}>
-        <section id="apps-toolbar">
-          <Stack direction="row" spacing={2} p={2} justifyContent="flex-end">
-            <Button
-              variant="contained"
-              color="primary"
-              size="small"
-              onClick={loadContent}
-              startIcon={<RefreshIcon />}
-            >
-              Refresh
-            </Button>
-            <Button
-              aria-label="add app"
-              onClick={() => {
-                setOpenDialog(true)
-                setSelectedApp(formInitialState)
-              }}
-              size="small"
-              color="primary"
-              variant="contained"
-              startIcon={<AddIcon />}
-            >
-              ADD
-            </Button>
-          </Stack>
-        </section>
+    <BasePageTemplate
+      title="Manage Apps"
+      subtitle="Add and update all the Portal apps details and settings"
+      button={
+        <Stack direction="row" spacing={2} p={2} justifyContent="flex-end">
+          <Button
+            variant="contained"
+            color="primary"
+            onClick={loadContent}
+            startIcon={<RefreshIcon />}
+          >
+            Refresh
+          </Button>
+          <Button
+            aria-label="add app"
+            onClick={() => {
+              setOpenDialog(true)
+              setSelectedApp(formInitialState)
+            }}
+            color="primary"
+            variant="contained"
+            startIcon={<AddIcon />}
+          >
+            ADD
+          </Button>
+        </Stack>
+      }
+    >
+      <Paper sx={{paddingX: 0}}>
         <Box sx={{height: '100%', width: '100%'}}>
           <DataGrid
             columnVisibilityModel={{
@@ -663,7 +666,7 @@ const AppsDataGrid = () => {
             pageSizeOptions={[10]}
           />
         </Box>
-      </Box>
+      </Paper>
 
       <Dialog
         maxWidth={'lg'}
@@ -859,10 +862,7 @@ const AppsDataGrid = () => {
                     Confirm
                   </Button>
                 ) : (
-                  <Button
-                    onClick={handleNext}
-                    variant="outlined"
-                  >
+                  <Button onClick={handleNext} variant="outlined">
                     Continue
                   </Button>
                 )}
@@ -950,7 +950,7 @@ const AppsDataGrid = () => {
           </Button>
         </DialogActions>
       </Dialog>
-    </>
+    </BasePageTemplate>
   )
 }
 

packages/portal-admin/src/root.component.tsx

@@ -2,27 +2,15 @@ import {ThemeProvider} from '@mui/material/styles'
 import {Typography, Box, Paper} from '@mui/material'
 import {SnackbarProvider} from 'notistack'
 import theme from '@jembi/openhim-theme'
-
 import {FormStateProvider} from './hooks/useFormType'
-
 import AppsDataGrid from '../src/components/AppsDataGrid'
 
 export default function PortalAdminRoot(props: any) {
   return (
     <ThemeProvider theme={theme}>
       <FormStateProvider>
         <SnackbarProvider maxSnack={3} preventDuplicate>
-          <Box p={5}>
-            <Paper>
-              <Box p={2}>
-                <Typography variant="h4">Manage Apps</Typography>
-                <Typography variant="body2">
-                  Add and update all the Portal apps details and settings
-                </Typography>
-                <AppsDataGrid />
-              </Box>
-            </Paper>
-          </Box>
+          <AppsDataGrid />
         </SnackbarProvider>
       </FormStateProvider>
     </ThemeProvider>

packages/portal-app/src/components/PortalHome/PortalHome.tsx

@@ -7,6 +7,7 @@ import EmptyState from '../EmptyState/EmptyState'
 import AppsShelfSkeleton from '../AppsShelfSkeleton/AppsShelfSkeleton'
 import AppsShelf from '../AppsShelf/AppsShelf'
 import {fetchApps} from '@jembi/openhim-core-api'
+import {BasePageTemplate} from '../../../../base-components'
 
 const preloadedPortalApps = [
   {
@@ -130,20 +131,20 @@ function PortalHome() {
   }, [])
 
   return (
-    <Box mt={'5%'} ml={'10%'} mr={'10%'}>
-      <section id="PortalHeader">
-        <Grid sx={{ml: 0, mt: 0}}>
-          <Box width="100%" display="flex" justifyContent="space-between">
-            <Typography variant="h2" color={green[700]}>
-              Portal
-            </Typography>
-            <Button href="#!/portal-admin" startIcon={<Settings />}>
-              Manage
-            </Button>
-          </Box>
-        </Grid>
-        <Divider sx={{mb: 3, borderBlockColor: 'rgba(0, 0, 0, 0.50)'}} />
-      </section>
+    <BasePageTemplate
+      title="Portal"
+      subtitle="Setup and Manage your apps"
+      button={
+        <Button
+          variant="contained"
+          color="primary"
+          href="#!/portal-admin"
+          startIcon={<Settings />}
+        >
+          Manage
+        </Button>
+      }
+    >
       <section id="CategoriesSection">
         {isLoading ? (
           <AppsShelfSkeleton />
@@ -156,7 +157,7 @@ function PortalHome() {
           <AppsShelf appsGroupedByCat={appsGroupedByCat} />
         )}
       </section>
-    </Box>
+    </BasePageTemplate>
   )
 }