Merge pull request #723 from jembi/feature/CU-86c13vkmc-ui_updates

feat: use icons instead of emojis.
jembi · Dec 5, 2024 · 6b7f1e0 · 6b7f1e0
2 parents 9367c83 + c27af6d
commit 6b7f1e0
Show file tree

Hide file tree

Showing 5 changed files with 88 additions and 69 deletions.
diff --git a/packages/channels-app/src/screens/steps/routes/ChannelRoutes.tsx b/packages/channels-app/src/screens/steps/routes/ChannelRoutes.tsx
@@ -163,7 +163,7 @@ export function ChannelRoutes(props: {
                       <Tooltip title="This route is a Primary Route">
                         <Chip
                           label="primary"
-                          color="primary"
+                          color="info"
                           style={{marginLeft: '5px'}}
                         />
                       </Tooltip>

diff --git a/packages/portal-admin/src/components/ActiveStepOne.tsx b/packages/portal-admin/src/components/ActiveStepOne.tsx
@@ -77,47 +77,50 @@ const ActiveStepOne: React.FC<ActiveStepOneProps> = ({
 
   return (
     <>
-      {values.type === 'esmodule' && (
-        <TextField
-          margin="dense"
-          multiline
-          id="url"
-          label="Bundle URL"
-          type="url"
-          required
-          inputRef={appLinkFieldRef}
-          fullWidth
-          variant="outlined"
-          name="url"
-          value={values.url}
-          onChange={e => {
-            handleChange(e)
-            setAppLinkHelperMessage('')
-          }}
-          error={appLinkHelperMessage ? true : false}
-          helperText={appLinkHelperMessage}
-        />
-      )}
-      {(values.type === 'internal' || values.type === 'external') && (
-        <TextField
-          margin="dense"
-          multiline
-          id="page"
-          inputRef={appLinkFieldRef}
-          label="Link"
-          value={values.url}
-          fullWidth
-          required
-          variant="outlined"
-          name="url"
-          onChange={e => {
-            handleChange(e)
-            setAppLinkHelperMessage('')
-          }}
-          error={appLinkHelperMessage ? true : false}
-          helperText={appLinkHelperMessage}
-        />
-      )}
+      <FormControl>
+        {values.type === 'esmodule' && (
+          <TextField
+            margin="dense"
+            multiline
+            id="url"
+            label="Bundle URL"
+            type="url"
+            required
+            inputRef={appLinkFieldRef}
+            fullWidth
+            variant="outlined"
+            name="url"
+            value={values.url}
+            onChange={e => {
+              handleChange(e)
+              setAppLinkHelperMessage('')
+            }}
+            error={appLinkHelperMessage ? true : false}
+            helperText={appLinkHelperMessage}
+          />
+        )}
+        {(values.type === 'internal' || values.type === 'external') && (
+          <TextField
+            margin="dense"
+            type="url"
+            id="url"
+            multiline
+            inputRef={appLinkFieldRef}
+            label="Link"
+            value={values.url}
+            fullWidth
+            required
+            variant="outlined"
+            name="url"
+            onChange={e => {
+              handleChange(e)
+              setAppLinkHelperMessage('')
+            }}
+            error={appLinkHelperMessage ? true : false}
+            helperText={appLinkHelperMessage}
+          />
+        )}
+      </FormControl>
       <FormControl fullWidth required sx={{mt: 1}}>
         <InputLabel>{'Access Roles'}</InputLabel>
         <Select

diff --git a/packages/portal-admin/src/components/ActiveStepZero.tsx b/packages/portal-admin/src/components/ActiveStepZero.tsx
@@ -9,8 +9,13 @@ import {
   FormControlLabel,
   MenuItem,
   Radio,
-  Autocomplete
+  Autocomplete,
+  Typography,
+  Box
 } from '@mui/material'
+import HomeIcon from '@mui/icons-material/Home'
+import ExtensionIcon from '@mui/icons-material/Extension'
+import LinkIcon from '@mui/icons-material/Link'
 import {AppProps} from './FormInputProps'
 import {useEffect} from 'react'
 
@@ -52,16 +57,19 @@ const ActiveStepZero: React.FC<ActiveStepZeroProps> = ({
 }) => {
   const radioButtonOptions = [
     {
-      label: '🏠 Built-in',
-      value: 'internal'
+      label: 'Built-in',
+      value: 'internal',
+      icon: <HomeIcon htmlColor="brown" />
     },
     {
-      label: '🧩 Extension',
-      value: 'esmodule'
+      label: 'Extension',
+      value: 'esmodule',
+      icon: <ExtensionIcon htmlColor="lightgreen" />
     },
     {
-      label: '🔗 Shortcut',
-      value: 'external'
+      label: 'Shortcut',
+      value: 'external',
+      icon: <LinkIcon htmlColor="silver" />
     }
   ]
 
@@ -94,7 +102,12 @@ const ActiveStepZero: React.FC<ActiveStepZeroProps> = ({
         <FormControlLabel
           key={option.value}
           value={option.value}
-          label={option.label}
+          label={
+            <Box sx={{display: 'flex', alignItems: 'center'}}>
+              {option.icon}
+              <Typography sx={{px: '2px'}}>{option.label}</Typography>
+            </Box>
+          }
           control={<Radio />}
         />
       )
@@ -118,17 +131,19 @@ const ActiveStepZero: React.FC<ActiveStepZeroProps> = ({
         <FormLabel required component="legend">
           {'What is the type of your app?'}
         </FormLabel>
-        <RadioGroup
-          id={'type'}
-          name={'type'}
-          row
-          value={values.type}
-          onChange={e => {
-            handleChange(e)
-          }}
-        >
-          {generateRadioOptions(radioButtonOptions)}
-        </RadioGroup>
+        <Box sx={{display: 'flex', justifyContent: 'center'}}>
+          <RadioGroup
+            id={'type'}
+            name={'type'}
+            row
+            value={values.type}
+            onChange={e => {
+              handleChange(e)
+            }}
+          >
+            {generateRadioOptions(radioButtonOptions)}
+          </RadioGroup>
+        </Box>
       </FormControl>
       <FormControl fullWidth required sx={{mt: 1}}>
         <Autocomplete

diff --git a/packages/portal-admin/src/components/AppsDataGrid.tsx b/packages/portal-admin/src/components/AppsDataGrid.tsx
@@ -476,7 +476,7 @@ const AppsDataGrid = () => {
         await fetch(appLinkValue)
       } catch (error) {
         setAppLinkHelperMessage(
-          'Service Unreachable Please Check The URL Or Contact The Services Administrator'
+          'Service unreachable. Please check the URL or contact the services administrator'
         )
         return false
       }
@@ -615,7 +615,7 @@ const AppsDataGrid = () => {
       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">
+        <Stack direction="row" spacing={2} justifyContent="flex-end">
           <Button
             variant="contained"
             color="primary"

diff --git a/packages/users-app/src/screens/list.users.screen.tsx b/packages/users-app/src/screens/list.users.screen.tsx
@@ -78,11 +78,12 @@ function UsersList() {
     window.history.pushState({}, '', `/#!/users/edit-user/` + user._id)
   }
 
-  const onDeleteUser = (user: User) => {
-    const isRootRole =
-      user?.groups?.includes('admin') && user.email == '[email protected]'
+  const isRootRole = (user: User) =>
+    user?.groups?.includes('admin') && user.email == '[email protected]'
+
 
-    if (isRootRole) {
+  const onDeleteUser = (user: User) => {
+    if (isRootRole(user)) {
       return showAlert('Cannot delete the root user', 'Error', 'error')
     }
 
@@ -132,7 +133,7 @@ function UsersList() {
           <IconButton onClick={() => onEditUser(params.row)}>
             <CreateIcon />
           </IconButton>
-          <IconButton onClick={() => onDeleteUser(params.row)}>
+          <IconButton disabled={isRootRole(params.row)} onClick={() => onDeleteUser(params.row)}>
             <GridDeleteForeverIcon />
           </IconButton>
         </>
@@ -142,7 +143,7 @@ function UsersList() {
 
   return (
     <BasePageTemplate
-      title="Manager Users"
+      title="Manage Users"
       subtitle="View and manage OpenHIM users, add new users and assign them specific roles to ensure appropriate access and functionality."
       button={
         <Button