frontend Notifications/List.tsx: Fix and reformat styles

Signed-off-by: Vincent T <[email protected]>
headlamp-k8s · Jan 25, 2024 · 005f66e · 005f66e
1 parent c4b3fd2
commit 005f66e
Show file tree

Hide file tree

Showing 2 changed files with 151 additions and 84 deletions.
diff --git a/frontend/src/components/App/Notifications/List.tsx b/frontend/src/components/App/Notifications/List.tsx
@@ -1,6 +1,7 @@
 import { Icon } from '@iconify/react';
 import { Box, IconButton, Menu, MenuItem, Tooltip, Typography, useTheme } from '@mui/material';
-import { useMemo, useState } from 'react';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
 import { useHistory } from 'react-router-dom';
@@ -85,6 +86,54 @@ export default function NotificationList() {
     );
   }
 
+  // Placeholder for custom styles
+  // We can use this along with the cellProps property in the columns array to style individual cells
+  const isSmallScreen = useMediaQuery('(max-width:900px)');
+  const isMediumScreen = useMediaQuery('(max-width:1199px)');
+  const isLargeScreen = useMediaQuery('(min-width:1200px)');
+
+  const [currentMinWidth, setCurrentMinWidth] = useState('auto');
+
+  useEffect(() => {
+    console.log('smallScreen', isSmallScreen);
+    console.log('mediumScreen', isMediumScreen);
+    console.log('largeScreen', isLargeScreen);
+    setCurrentMinWidth(getMinWidth());
+    console.log('currentMinWidth', currentMinWidth);
+  }, [isSmallScreen, isMediumScreen, isLargeScreen]);
+
+  /** While these may seem oddly specific, they are just the right size to prevent link and calendar icon clipping */
+  const getMinWidth = () => {
+    if (isSmallScreen) {
+      return '30vw';
+    } else if (isMediumScreen) {
+      return '40vw';
+    } else if (isLargeScreen) {
+      return '50vw';
+    } else {
+      return 'auto';
+    }
+  };
+
+  const customStyles = {
+    notifMessage: {
+      minWidth: currentMinWidth,
+    },
+    notifLink: {
+      backgroundColor: 'cyan',
+      maxWidth: 'auto',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    notifTimestamp: {
+      maxWidth: 'auto',
+    },
+    notifVisible: {
+      maxWidth: 'auto',
+    },
+  };
+
   return (
     <SectionBox
       title={
@@ -97,82 +146,100 @@ export default function NotificationList() {
       backLink
     >
       {allNotificationsAreDeleted ? (
-        <Empty>{t("translation|You don't have any notifications right now")}</Empty>
+        <Empty> {t("translation|You don't have any notifications right now")}</Empty>
       ) : (
-        <SimpleTable
-          filterFunction={(notification: Notification) =>
-            (notification?.message?.toLowerCase() || '').includes(search.toLowerCase())
-          }
-          columns={[
-            {
-              label: t('translation|Message'),
-              getter: (notification: Notification) => (
-                <Box width={'30vw'}>
-                  <Tooltip
-                    title={notification.message || t('translation|No message')}
-                    disableHoverListener={!notification.message}
-                  >
-                    <Typography
-                      style={{
-                        fontWeight: notification.seen ? 'normal' : 'bold',
-                        cursor: 'pointer',
-                      }}
-                      noWrap
-                      onClick={() => notificationItemClickHandler(notification)}
-                    >
-                      {`${notification.message || t(`translation|No message`)}`}
-                    </Typography>
-                  </Tooltip>
-                </Box>
-              ),
-            },
-            {
-              label: t('glossary|Cluster'),
-              getter: (notification: Notification) => (
-                <Box display={'flex'} alignItems="center">
-                  {Object.entries(clusters || {}).length > 1 && notification.cluster && (
-                    <Box
-                      border={1}
-                      p={0.5}
-                      mr={1}
-                      textOverflow="ellipsis"
-                      overflow={'hidden'}
-                      whiteSpace="nowrap"
-                    >
-                      {notification.cluster}
-                    </Box>
-                  )}{' '}
-                </Box>
-              ),
-            },
-            {
-              label: t('translation|Date'),
-              getter: (notification: Notification) => <DateLabel date={notification.date} />,
-            },
-            {
-              label: t('translation|Visible'),
-              getter: (notification: Notification) =>
-                !notification.seen && (
-                  <Tooltip title={t(`translation|Mark as read`)}>
-                    <IconButton
-                      onClick={e => notificationSeenUnseenHandler(e, notification)}
-                      aria-label={t(`translation|Mark as read`)}
-                      size="medium"
+        <Box
+          style={{
+            maxWidth: '100%',
+          }}
+        >
+          <SimpleTable
+            filterFunction={(notification: Notification) =>
+              (notification?.message?.toLowerCase() || '').includes(search.toLowerCase())
+            }
+            columns={[
+              {
+                label: t('translation|Message'),
+                cellProps: {
+                  style: customStyles.notifMessage,
+                },
+                getter: (notification: Notification) => (
+                  <Box>
+                    <Tooltip
+                      title={notification.message || t('translation|No message')}
+                      disableHoverListener={!notification.message}
                     >
-                      <Icon
-                        icon="mdi:circle"
-                        color={theme.palette.error.main}
-                        height={12}
-                        width={12}
-                      />
-                    </IconButton>
-                  </Tooltip>
+                      <Typography
+                        style={{
+                          fontWeight: notification.seen ? 'normal' : 'bold',
+                          cursor: 'pointer',
+                        }}
+                        noWrap
+                        onClick={() => notificationItemClickHandler(notification)}
+                      >
+                        {`${notification.message || t(`translation|No message`)}`}
+                      </Typography>
+                    </Tooltip>
+                  </Box>
                 ),
-            },
-          ]}
-          data={notifications}
-          noTableHeader
-        />
+              },
+              {
+                label: t('glossary|Cluster'),
+                cellProps: {
+                  style: customStyles.notifLink,
+                },
+                getter: (notification: Notification) => (
+                  <Box display={'flex'} alignItems="center">
+                    {Object.entries(clusters || {}).length > 1 && notification.cluster && (
+                      <Box
+                        border={1}
+                        p={0.5}
+                        mr={1}
+                        textOverflow="ellipsis"
+                        overflow={'hidden'}
+                        whiteSpace="nowrap"
+                      >
+                        {notification.cluster}
+                      </Box>
+                    )}{' '}
+                  </Box>
+                ),
+              },
+              {
+                label: t('translation|Date'),
+                cellProps: {
+                  style: customStyles.notifTimestamp,
+                },
+                getter: (notification: Notification) => <DateLabel date={notification.date} />,
+              },
+              {
+                label: t('translation|Visible'),
+                cellProps: {
+                  style: customStyles.notifVisible,
+                },
+                getter: (notification: Notification) =>
+                  !notification.seen && (
+                    <Tooltip title={t(`translation|Mark as read`)}>
+                      <IconButton
+                        onClick={e => notificationSeenUnseenHandler(e, notification)}
+                        aria-label={t(`translation|Mark as read`)}
+                        size="medium"
+                      >
+                        <Icon
+                          icon="mdi:circle"
+                          color={theme.palette.error.main}
+                          height={12}
+                          width={12}
+                        />
+                      </IconButton>
+                    </Tooltip>
+                  ),
+              },
+            ]}
+            data={notifications}
+            noTableHeader
+          />
+        </Box>
       )}
     </SectionBox>
   );

diff --git a/frontend/src/stateless/index.ts b/frontend/src/stateless/index.ts
@@ -8,16 +8,16 @@ import store from '../redux/stores/store';
 
 let indexedDBtest: any;
 
-// Import 'fake-indexeddb' only in the testing environment
-if (process.env.NODE_ENV === 'test') {
-  import('fake-indexeddb')
-    .then(module => {
-      indexedDBtest = module.indexedDB;
-    })
-    .catch(error => {
-      console.error('Error importing fake-indexeddb:', error);
-    });
-}
+// // Import 'fake-indexeddb' only in the testing environment
+// if (process.env.NODE_ENV === 'test') {
+//   import('fake-indexeddb')
+//     .then(module => {
+//       indexedDBtest = module.indexedDB;
+//     })
+//     .catch(error => {
+//       console.error('Error importing fake-indexeddb:', error);
+//     });
+// }
 
 /**
  * ParsedConfig is the object that is fetched from the backend.