Merge pull request #724 from jembi/fix/CU-86c0h813z-channels_action_menu

Fix/cu 86c0h813z channels action menu
jembi · Dec 9, 2024 · aff48fe · aff48fe
2 parents 6b7f1e0 + bc8b677
commit aff48fe
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 29 deletions.
diff --git a/packages/channels-app/src/screens/manage.channels.screen.tsx b/packages/channels-app/src/screens/manage.channels.screen.tsx
@@ -1,5 +1,6 @@
 import AddIcon from '@mui/icons-material/Add'
 import CancelIcon from '@mui/icons-material/Cancel'
+import EnableIcon from '@mui/icons-material/PlayArrow'
 import EditIcon from '@mui/icons-material/Edit'
 import MoreVertIcon from '@mui/icons-material/MoreVert'
 import SearchIcon from '@mui/icons-material/Search'
@@ -173,29 +174,6 @@ const ManageChannelsScreen: React.FC = () => {
           >
             <MoreVertIcon />
           </IconButton>
-          <Menu
-            anchorEl={anchorEl}
-            open={Boolean(anchorEl)}
-            onClose={handleCloseContextMenu}
-            sx={{boxShadow: 'none'}}
-          >
-            <MenuItem onClick={handleEditChannel}>
-              <EditIcon className={classes.actionsIcon} />
-              Edit Channel
-            </MenuItem>
-            <MenuItem onClick={handleViewChannelMetrics}>
-              <ViewIcon className={classes.actionsIcon} />
-              View Metrics
-            </MenuItem>
-            <MenuItem divider onClick={handleViewChannelLogs}>
-              <SearchIcon className={classes.actionsIcon} />
-              View Logs
-            </MenuItem>
-            <MenuItem onClick={onActionDisableChannel}>
-              <CancelIcon className={classes.actionsIcon} />
-              Toggle Status
-            </MenuItem>
-          </Menu>
         </div>
       )
     }
@@ -277,6 +255,44 @@ const ManageChannelsScreen: React.FC = () => {
           }}
         />
       </Paper>
+
+      {anchorEl && selectedChannel && (
+        <Menu
+          anchorEl={anchorEl}
+          open={Boolean(anchorEl)}
+          onClose={handleCloseContextMenu}
+          sx={{boxShadow: 'none'}}
+        >
+          <MenuItem onClick={handleEditChannel}>
+            <EditIcon className={classes.actionsIcon} />
+            Edit Channel
+          </MenuItem>
+          <MenuItem onClick={handleViewChannelMetrics}>
+            <ViewIcon className={classes.actionsIcon} />
+            View Metrics
+          </MenuItem>
+          <MenuItem divider onClick={handleViewChannelLogs}>
+            <SearchIcon className={classes.actionsIcon} />
+            View Logs
+          </MenuItem>
+          <MenuItem onClick={onActionDisableChannel}>
+            {selectedChannel.status === 'enabled' && (
+              <>
+                <CancelIcon className={classes.actionsIcon} />
+                Disable Channel
+              </>
+            )}
+          </MenuItem>
+          <MenuItem onClick={onActionDisableChannel}>
+            {selectedChannel.status !== 'enabled' && (
+              <>
+                <EnableIcon className={classes.actionsIcon} />
+                Enable Channel
+              </>
+            )}
+          </MenuItem>
+        </Menu>
+      )}
     </BasePageTemplate>
   )
 }

diff --git a/packages/portal-admin/src/components/AppsDataGrid.tsx b/packages/portal-admin/src/components/AppsDataGrid.tsx
@@ -127,13 +127,14 @@ const AppsDataGrid = () => {
   var showInSideBar = false
 
   const columns: GridColDef[] = [
-    {field: '_id', headerName: 'ID'},
+    {field: '_id', headerName: 'ID', flex: 0.25},
     {
       field: 'icon',
       headerName: 'Icon',
       type: 'string',
       align: 'center',
       width: 35,
+      flex: 0.25,
       renderCell: params => (
         <Avatar
           variant="rounded"
@@ -155,38 +156,45 @@ const AppsDataGrid = () => {
     },
     {
       field: 'name',
+      flex: 1,
       headerName: 'Application Name'
     },
     {
       field: 'description',
-      headerName: 'Description'
+      headerName: 'Description',
+      flex: 1
     },
     {
       field: 'category',
       headerName: 'Category',
       type: 'singleSelect',
-      valueOptions: ['OpenHIM', 'Operations', 'Reports', 'Other']
+      valueOptions: ['OpenHIM', 'Operations', 'Reports', 'Other'],
+      flex: 0.5
     },
     {
       field: 'type',
       headerName: 'Type',
       type: 'singleSelect',
-      valueOptions: ['internal', 'external', 'esmodule']
+      valueOptions: ['internal', 'external', 'esmodule'],
+      flex: 0.5
     },
     {
       field: 'url',
-      headerName: 'URL'
+      headerName: 'URL',
+      flex: 1
     },
     {
       field: 'access_roles',
       headerName: 'Access Roles',
       type: 'singleSelect',
-      valueOptions: ['admin', 'user']
+      valueOptions: ['admin', 'user'],
+      flex: 0.5
     },
     {
       field: 'showInPortal',
       headerName: 'Show In Portal',
       type: 'boolean',
+      flex: 0.75,
       renderCell: params => (
         <Checkbox
           disabled
@@ -201,6 +209,7 @@ const AppsDataGrid = () => {
     {
       field: 'actions',
       headerName: 'Actions',
+      flex: 0.5,
       type: 'actions',
       getActions: (params: GridRowParams) => [
         <GridActionsCellItem
@@ -664,6 +673,21 @@ const AppsDataGrid = () => {
               }
             }}
             pageSizeOptions={[10]}
+            sx={{
+              border: 'none',
+              '& .MuiDataGrid-cell': {
+                borderBottom: 'none'
+              },
+              '& .MuiDataGrid-columnHeaders': {
+                borderBottom: 'none'
+              },
+              '& .MuiDataGrid-cell:focus': {
+                outline: 'none'
+              },
+              '& .MuiDataGrid-columnHeaderTitle': {
+                fontWeight: 'bold'
+              }
+            }}
           />
         </Box>
       </Paper>