From af34524cea17f20b985453e95043457588d0173e Mon Sep 17 00:00:00 2001 From: Kagiso Marvin Molekwa Date: Wed, 9 Oct 2024 08:59:40 +0200 Subject: [PATCH 1/9] chore: add channel updates. --- package.json | 1 + .../channels-app/src/screens/add.channel.screen.tsx | 5 +---- .../channels-app/src/screens/edit.channel.screen.tsx | 5 +---- .../src/screens/manage.channels.screen.tsx | 5 +---- packages/channels-app/src/screens/steps/BasicInfo.tsx | 10 +++++++--- .../src/screens/steps/RequestMatching.tsx | 11 +++++++---- .../src/screens/steps/routes/ChannelRoute.tsx | 10 +++++++--- 7 files changed, 25 insertions(+), 22 deletions(-) diff --git a/package.json b/package.json index d04c9510..dafd3f67 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "scripts": { "start": "npx lerna run start", "build": "npx lerna run build", + "dev": "npx lerna run start --concurrency=$(ls ./packages | wc -l)", "test": "npx lerna run test", "build:prod": "npx lerna run build -- --prod" }, diff --git a/packages/channels-app/src/screens/add.channel.screen.tsx b/packages/channels-app/src/screens/add.channel.screen.tsx index a8b81007..6992fc0d 100644 --- a/packages/channels-app/src/screens/add.channel.screen.tsx +++ b/packages/channels-app/src/screens/add.channel.screen.tsx @@ -104,10 +104,7 @@ function AddChannelScreen() { } return ( - +
Add Channel diff --git a/packages/channels-app/src/screens/edit.channel.screen.tsx b/packages/channels-app/src/screens/edit.channel.screen.tsx index 1dfff68c..824dc8da 100644 --- a/packages/channels-app/src/screens/edit.channel.screen.tsx +++ b/packages/channels-app/src/screens/edit.channel.screen.tsx @@ -61,10 +61,7 @@ function EditChannelScreen() { } return ( - +
Edit Channel diff --git a/packages/channels-app/src/screens/manage.channels.screen.tsx b/packages/channels-app/src/screens/manage.channels.screen.tsx index 4a5dd418..7523f4a5 100644 --- a/packages/channels-app/src/screens/manage.channels.screen.tsx +++ b/packages/channels-app/src/screens/manage.channels.screen.tsx @@ -208,10 +208,7 @@ const ManageChannelsScreen: React.FC = () => { } return ( - + Manage Channels diff --git a/packages/channels-app/src/screens/steps/BasicInfo.tsx b/packages/channels-app/src/screens/steps/BasicInfo.tsx index 89c0b265..8f3e46e9 100644 --- a/packages/channels-app/src/screens/steps/BasicInfo.tsx +++ b/packages/channels-app/src/screens/steps/BasicInfo.tsx @@ -34,6 +34,7 @@ export function BasicInfo(props: { 'PATCH', 'OPTIONS' ] + const [formTouched, setFormTouched] = React.useState(false) const channelTypes: Array = ['http', 'tcp', 'tls', 'polling'] const [expandOptionalSettings, setExpandOptionalSettings] = React.useState(false) @@ -86,10 +87,13 @@ export function BasicInfo(props: { fullWidth margin="normal" value={channel.name} - onChange={e => setChannel({...channel, name: e.target.value})} - error={channel.name.trim() === ''} + onChange={e => { + setFormTouched(true) + setChannel({...channel, name: e.target.value}) + }} + error={channel.name.trim() === '' && formTouched} helperText={ - channel.name.trim() === '' + channel.name.trim() === '' && formTouched ? 'Channel Name cannot be empty' : undefined } diff --git a/packages/channels-app/src/screens/steps/RequestMatching.tsx b/packages/channels-app/src/screens/steps/RequestMatching.tsx index 8e55da12..1fa6d6f7 100644 --- a/packages/channels-app/src/screens/steps/RequestMatching.tsx +++ b/packages/channels-app/src/screens/steps/RequestMatching.tsx @@ -29,7 +29,7 @@ export function RequestMatching(props: { channel: Channel onChange: (event: {channel: Channel; isValid: boolean}) => unknown }) { - const navigate = useNavigate() + const [formTouched, setFormTouched] = React.useState(false) const [channel, setChannel] = React.useState(props.channel) const [expandOptionalSettings, setExpandOptionalSettings] = React.useState(false) @@ -77,10 +77,13 @@ export function RequestMatching(props: { .replace(/\$$/, '') : channel.urlPattern } - onChange={e => setChannel({...channel, urlPattern: e.target.value})} - error={channel.urlPattern.trim() === ''} + onChange={e => { + setFormTouched(true) + setChannel({...channel, urlPattern: e.target.value}) + }} + error={channel.urlPattern.trim() === '' && formTouched} helperText={ - channel.urlPattern.trim() === '' + formTouched && channel.urlPattern.trim() === '' ? 'URL patterns cannot be empty' : undefined } diff --git a/packages/channels-app/src/screens/steps/routes/ChannelRoute.tsx b/packages/channels-app/src/screens/steps/routes/ChannelRoute.tsx index 2843d5d1..2b2985dc 100644 --- a/packages/channels-app/src/screens/steps/routes/ChannelRoute.tsx +++ b/packages/channels-app/src/screens/steps/routes/ChannelRoute.tsx @@ -25,6 +25,7 @@ export function ChannelRoute(props: { onCancel?: () => unknown }) { const isEditMode = !!props.route + const [isFormTouched, setFormIsTouched] = React.useState(false) const isCreateMode = !isEditMode const [route, setRoute] = React.useState( structuredClone(props.route ?? defaultRoute) @@ -44,10 +45,13 @@ export function ChannelRoute(props: { fullWidth margin="normal" value={route.name} - onChange={e => setRoute({...route, name: e.target.value})} - error={route.name.trim() === ''} + onChange={e => { + setFormIsTouched(true) + setRoute({...route, name: e.target.value}) + }} + error={route.name.trim() === '' && isFormTouched} helperText={ - route.name.trim() === '' + route.name.trim() === '' && isFormTouched ? 'Route Name cannot be empty' : undefined } From a668352e9ab89f7e9152d14f849cbcc469911395 Mon Sep 17 00:00:00 2001 From: Kagiso Marvin Molekwa Date: Sun, 13 Oct 2024 17:49:28 +0200 Subject: [PATCH 2/9] fix: ui updates. --- .../src/components/helpers/custom.toolbar.tsx | 12 ++++- .../src/screens/add.channel.screen.tsx | 2 +- .../src/screens/edit.channel.screen.tsx | 2 +- .../src/screens/manage.channels.screen.tsx | 38 +++++++++++---- .../components/openhim.appbar.component.tsx | 48 ++++++++++--------- .../rbac-app/src/screens/list.role.screen.tsx | 2 +- 6 files changed, 66 insertions(+), 38 deletions(-) diff --git a/packages/channels-app/src/components/helpers/custom.toolbar.tsx b/packages/channels-app/src/components/helpers/custom.toolbar.tsx index b844e30c..5499bae4 100644 --- a/packages/channels-app/src/components/helpers/custom.toolbar.tsx +++ b/packages/channels-app/src/components/helpers/custom.toolbar.tsx @@ -5,6 +5,8 @@ import { GridToolbarFilterButton, GridToolbarQuickFilter } from '@mui/x-data-grid' +import { TextField } from '@mui/material' +import React from 'react' export function CustomToolbar() { return ( @@ -20,7 +22,13 @@ export function CustomToolbar() { - + ) -} +} \ No newline at end of file diff --git a/packages/channels-app/src/screens/add.channel.screen.tsx b/packages/channels-app/src/screens/add.channel.screen.tsx index 6992fc0d..c20f785a 100644 --- a/packages/channels-app/src/screens/add.channel.screen.tsx +++ b/packages/channels-app/src/screens/add.channel.screen.tsx @@ -105,7 +105,7 @@ function AddChannelScreen() { return ( -
+
Add Channel diff --git a/packages/channels-app/src/screens/edit.channel.screen.tsx b/packages/channels-app/src/screens/edit.channel.screen.tsx index 824dc8da..f20cdd8c 100644 --- a/packages/channels-app/src/screens/edit.channel.screen.tsx +++ b/packages/channels-app/src/screens/edit.channel.screen.tsx @@ -62,7 +62,7 @@ function EditChannelScreen() { return ( -
+
Edit Channel diff --git a/packages/channels-app/src/screens/manage.channels.screen.tsx b/packages/channels-app/src/screens/manage.channels.screen.tsx index 7523f4a5..ea5eac05 100644 --- a/packages/channels-app/src/screens/manage.channels.screen.tsx +++ b/packages/channels-app/src/screens/manage.channels.screen.tsx @@ -27,7 +27,7 @@ import {useAlert} from '../contexts/alert.context' import {useBasicBackdrop} from '../contexts/backdrop.context' import {useConfirmation} from '../contexts/confirmation.context' import {getChannels, modifyChannel} from '../services/api' -import {Channel} from '../types' +import {Channel, ChannelStatus} from '../types' const useStyles = makeStyles(_theme => ({ actionsIcon: { @@ -140,18 +140,25 @@ const ManageChannelsScreen: React.FC = () => { field: 'status', headerName: 'Status', flex: 0.5, - renderCell: params => ( - - ) + renderCell: params => { + const status = params.value as ChannelStatus + + return ( + + {status[0].toUpperCase() + status.slice(1)} + + ) + } }, {field: 'priority', headerName: 'Priority', flex: 0.5}, {field: 'allow', headerName: 'Access', flex: 1}, { field: 'actions', headerName: 'Actions', + align: 'right', + headerAlign: 'right', flex: 0.5, sortable: false, renderCell: params => ( @@ -234,11 +241,13 @@ const ManageChannelsScreen: React.FC = () => { - + { slots={{toolbar: CustomToolbar}} slotProps={{ toolbar: { - showQuickFilter: true + showQuickFilter: true, } }} pagination + sx={{ + border: 'none', + '& .MuiDataGrid-cell': { + borderBottom: 'none' + }, + '& .MuiDataGrid-columnHeaders': { + borderBottom: 'none' + } + }} /> ) } -export default ManageChannelsScreen +export default ManageChannelsScreen \ No newline at end of file diff --git a/packages/header-app/src/components/openhim.appbar.component.tsx b/packages/header-app/src/components/openhim.appbar.component.tsx index f1577efd..a89c0d8f 100644 --- a/packages/header-app/src/components/openhim.appbar.component.tsx +++ b/packages/header-app/src/components/openhim.appbar.component.tsx @@ -87,22 +87,15 @@ export default function OpenhimAppBar() { name: 'MORE', children: [ {name: 'About', link: '#!/about'}, - {name: 'Portal', link: '#!/portal'}, - { - name: 'Manage Apps', - link: '#!/portal-admin', - permissions: ['app-manage-all'] - }, { name: 'Audit Log', link: '#!/audits', permissions: ['audit-trail-manage'] }, - {name: 'Tasks', link: '#!/tasks'}, { - name: 'Visualizer', - link: '#!/visualizer', - permissions: ['visualizer-manage'] + name: 'Certificates', + link: '#!/certificates', + permissions: ['certificates-manage'] }, { name: 'Contact Lists', @@ -110,24 +103,31 @@ export default function OpenhimAppBar() { permissions: ['contact-list-manage'] }, { - name: 'Mediators', - link: '#!/mediators', - permissions: ['mediator-manage-all'] + name: 'Import/Export', + link: '#!/export-import', + permissions: ['import-export'] }, { - name: 'Certificates', - link: '#!/certificates', - permissions: ['certificates-manage'] + name: 'Manage Apps', + link: '#!/portal-admin', + permissions: ['app-manage-all'] }, { - name: 'Import/Export', - link: '#!/export-import', - permissions: ['import-export'] + name: 'Mediators', + link: '#!/mediators', + permissions: ['mediator-manage-all'] }, + {name: 'Portal', link: '#!/portal'}, { name: 'Server Logs', link: '#!/logs', permissions: ['logs-view'] + }, + {name: 'Tasks', link: '#!/tasks'}, + { + name: 'Visualizer', + link: '#!/visualizer', + permissions: ['visualizer-manage'] } ] }, @@ -202,10 +202,12 @@ export default function OpenhimAppBar() { index === pages.length - 1 ? { ...page, - children: apps.map(app => ({ - name: app.name, - link: `#!/` + app.url.split('/').pop().split('.')[0] - })) + children: apps + .sort((a, b) => a.name.localeCompare(b.name)) + .map(app => ({ + name: app.name, + link: `#!/` + app.url.split('/').pop().split('.')[0] + })) } : page ) diff --git a/packages/rbac-app/src/screens/list.role.screen.tsx b/packages/rbac-app/src/screens/list.role.screen.tsx index 2fbe0ccd..e01a75e1 100644 --- a/packages/rbac-app/src/screens/list.role.screen.tsx +++ b/packages/rbac-app/src/screens/list.role.screen.tsx @@ -209,7 +209,7 @@ function UserRoleList() { sx={{backgroundColor: '#F1F1F1'}} > - User Roles List + Manage User Roles From 2a69f88911dc78356a179a37d0b7b9c7b28bf9b8 Mon Sep 17 00:00:00 2001 From: Kagiso Marvin Molekwa Date: Tue, 15 Oct 2024 08:43:47 +0200 Subject: [PATCH 3/9] chore: put back column selector. --- packages/channels-app/src/screens/manage.channels.screen.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/channels-app/src/screens/manage.channels.screen.tsx b/packages/channels-app/src/screens/manage.channels.screen.tsx index ea5eac05..bb9e5873 100644 --- a/packages/channels-app/src/screens/manage.channels.screen.tsx +++ b/packages/channels-app/src/screens/manage.channels.screen.tsx @@ -244,7 +244,6 @@ const ManageChannelsScreen: React.FC = () => { Date: Tue, 15 Oct 2024 09:47:47 +0200 Subject: [PATCH 4/9] chore: styling updates. feat: set navbar to fixed. --- .../src/components/openhim.appbar.component.tsx | 9 ++++++--- packages/root-config/src/microfrontend-layout.html | 2 +- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/packages/header-app/src/components/openhim.appbar.component.tsx b/packages/header-app/src/components/openhim.appbar.component.tsx index a89c0d8f..05a40598 100644 --- a/packages/header-app/src/components/openhim.appbar.component.tsx +++ b/packages/header-app/src/components/openhim.appbar.component.tsx @@ -26,6 +26,7 @@ const DIVIDER_MENU_ITEM: Readonly = Object.freeze({ export default function OpenhimAppBar() { const [pages, setPages] = useState([ + {name: 'HOME', link: '#!/portal'}, {name: 'DASHBOARD', link: '#!/dashboard'}, { name: 'TRANSACTIONS', @@ -302,7 +303,7 @@ export default function OpenhimAppBar() { fontSize: '14px', backgroundColor: '#ffffff', color: '#000000', - position: 'relative', + position: 'fixed', zIndex: 1 }} > @@ -327,7 +328,7 @@ export default function OpenhimAppBar() { variant="body1" noWrap component={isAdmin && isLoggedIn ? 'a' : undefined} - href={isAdmin && isLoggedIn ? '#!/dashboard' : undefined} + href={isAdmin && isLoggedIn ? '#!/portal' : undefined} style={{paddingRight: '30px'}} > @@ -425,7 +426,9 @@ export default function OpenhimAppBar() { )} - + + + {isLoggedIn && isAdmin && ( diff --git a/packages/root-config/src/microfrontend-layout.html b/packages/root-config/src/microfrontend-layout.html index f34e1ff0..317fbab4 100644 --- a/packages/root-config/src/microfrontend-layout.html +++ b/packages/root-config/src/microfrontend-layout.html @@ -2,7 +2,7 @@
-
+
From 89c0816bae8e323706c2257e538d3e085396ec9c Mon Sep 17 00:00:00 2001 From: Kagiso Marvin Molekwa Date: Tue, 15 Oct 2024 09:50:44 +0200 Subject: [PATCH 5/9] feat: add shadow to navbar. --- .../header-app/src/components/openhim.appbar.component.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/header-app/src/components/openhim.appbar.component.tsx b/packages/header-app/src/components/openhim.appbar.component.tsx index 05a40598..33985384 100644 --- a/packages/header-app/src/components/openhim.appbar.component.tsx +++ b/packages/header-app/src/components/openhim.appbar.component.tsx @@ -297,10 +297,10 @@ export default function OpenhimAppBar() { return ( Date: Tue, 15 Oct 2024 10:17:42 +0200 Subject: [PATCH 6/9] feat: position dropdown menu to lower. --- .../src/components/openhim.appbar.component.tsx | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/packages/header-app/src/components/openhim.appbar.component.tsx b/packages/header-app/src/components/openhim.appbar.component.tsx index 33985384..5ba24014 100644 --- a/packages/header-app/src/components/openhim.appbar.component.tsx +++ b/packages/header-app/src/components/openhim.appbar.component.tsx @@ -313,7 +313,6 @@ export default function OpenhimAppBar() { {pages .filter(page => canViewPageBasedOnPermissions(page)) @@ -394,7 +393,7 @@ export default function OpenhimAppBar() { onClose={() => handleCloseMoreMenu(getCorrectAnchorEl(page)[1]) } - style={{marginTop: 4}} + style={{marginTop: 40}} > {page.children .filter(child => canViewPageBasedOnPermissions(child)) @@ -499,6 +498,7 @@ export default function OpenhimAppBar() { handleCloseMoreMenu(getCorrectAnchorEl(page)[1]) } - style={{marginTop: 4}} > {page.children .filter(child => canViewPageBasedOnPermissions(child)) @@ -549,15 +548,13 @@ export default function OpenhimAppBar() { Date: Tue, 15 Oct 2024 10:42:45 +0200 Subject: [PATCH 7/9] feat: use outlined search. --- .../src/components/helpers/custom.toolbar.tsx | 13 ++----------- .../src/screens/manage.channels.screen.tsx | 17 +++++++++-------- 2 files changed, 11 insertions(+), 19 deletions(-) diff --git a/packages/channels-app/src/components/helpers/custom.toolbar.tsx b/packages/channels-app/src/components/helpers/custom.toolbar.tsx index 5499bae4..03f8b294 100644 --- a/packages/channels-app/src/components/helpers/custom.toolbar.tsx +++ b/packages/channels-app/src/components/helpers/custom.toolbar.tsx @@ -1,12 +1,9 @@ -import {makeStyles} from '@mui/styles' import { GridToolbarColumnsButton, GridToolbarDensitySelector, GridToolbarFilterButton, GridToolbarQuickFilter } from '@mui/x-data-grid' -import { TextField } from '@mui/material' -import React from 'react' export function CustomToolbar() { return ( @@ -22,13 +19,7 @@ export function CustomToolbar() {
- +
) -} \ No newline at end of file +} diff --git a/packages/channels-app/src/screens/manage.channels.screen.tsx b/packages/channels-app/src/screens/manage.channels.screen.tsx index bb9e5873..fbf614f2 100644 --- a/packages/channels-app/src/screens/manage.channels.screen.tsx +++ b/packages/channels-app/src/screens/manage.channels.screen.tsx @@ -144,7 +144,9 @@ const ManageChannelsScreen: React.FC = () => { const status = params.value as ChannelStatus return ( - {status[0].toUpperCase() + status.slice(1)} @@ -241,7 +243,11 @@ const ManageChannelsScreen: React.FC = () => { - + { columns={columns} disableColumnMenu slots={{toolbar: CustomToolbar}} - slotProps={{ - toolbar: { - showQuickFilter: true, - } - }} pagination sx={{ border: 'none', @@ -273,4 +274,4 @@ const ManageChannelsScreen: React.FC = () => { ) } -export default ManageChannelsScreen \ No newline at end of file +export default ManageChannelsScreen From 90e9da9561f60e427a22c208f2b4e98f8fce6078 Mon Sep 17 00:00:00 2001 From: Kagiso Marvin Molekwa Date: Tue, 15 Oct 2024 10:48:13 +0200 Subject: [PATCH 8/9] feat: add button to extreme right. --- .../src/screens/manage.channels.screen.tsx | 20 ++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/packages/channels-app/src/screens/manage.channels.screen.tsx b/packages/channels-app/src/screens/manage.channels.screen.tsx index fbf614f2..13e8a2b5 100644 --- a/packages/channels-app/src/screens/manage.channels.screen.tsx +++ b/packages/channels-app/src/screens/manage.channels.screen.tsx @@ -229,15 +229,17 @@ const ManageChannelsScreen: React.FC = () => { How do channels work? - - + + + + From 221842ea4b6a348b95bc319b68be37647a532cb8 Mon Sep 17 00:00:00 2001 From: Kagiso Marvin Molekwa Date: Tue, 15 Oct 2024 14:41:37 +0200 Subject: [PATCH 9/9] chore: padding. --- packages/channels-app/src/screens/manage.channels.screen.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/channels-app/src/screens/manage.channels.screen.tsx b/packages/channels-app/src/screens/manage.channels.screen.tsx index 13e8a2b5..32494cb4 100644 --- a/packages/channels-app/src/screens/manage.channels.screen.tsx +++ b/packages/channels-app/src/screens/manage.channels.screen.tsx @@ -247,7 +247,7 @@ const ManageChannelsScreen: React.FC = () => {