frontend: Remove table filter from the header and implement grid layout

Remove global filter state and filter input from the SectionFilterHeader New Table component now has filtering built-in so we don't need filter in the header Also remove uses of useFilterFunc in places where Table can already filter by the columns Replace SimpleTable with Table in Notifications page Implement grid layout in new Table that will work the same way SimpleTable works Signed-off-by: Oleksandr Dubenko <oldubenko@microsoft.com>
headlamp-k8s · May 10, 2024 · 985d0b2 · 985d0b2
1 parent a6d8f0d
commit 985d0b2
Show file tree

Hide file tree

Showing 78 changed files with 9,995 additions and 6,601 deletions.
diff --git a/e2e-tests/tests/headlampPage.ts b/e2e-tests/tests/headlampPage.ts
@@ -81,7 +81,8 @@ export class HeadlampPage {
     const headers = await this.page.$$eval(`${tableSelector} th`, ths =>
       ths.map(th => {
         if (th && th.textContent) {
-          return th.textContent.trim();
+          // Table header also contains a number, displayed during multi-sorting, so we remove it
+          return th.textContent.trim().replace('0', '');
         }
       })
     );

diff --git a/frontend/src/components/App/Home/__snapshots__/index.stories.storyshot b/frontend/src/components/App/Home/__snapshots__/index.stories.storyshot
diff --git a/frontend/src/components/App/Home/index.tsx b/frontend/src/components/App/Home/index.tsx
@@ -16,7 +16,7 @@ import { ApiError, deleteCluster } from '../../../lib/k8s/apiProxy';
 import { Cluster } from '../../../lib/k8s/cluster';
 import Event from '../../../lib/k8s/event';
 import { createRouteURL } from '../../../lib/router';
-import { useFilterFunc, useId } from '../../../lib/util';
+import { useId } from '../../../lib/util';
 import { setConfig } from '../../../redux/configSlice';
 import { Link, PageGrid, SectionBox, SectionFilterHeader } from '../../common';
 import { ConfirmDialog } from '../../common';
@@ -178,7 +178,6 @@ function HomeComponent(props: HomeComponentProps) {
   const { clusters } = props;
   const { t } = useTranslation(['translation', 'glossary']);
   const [versions, errors] = useClustersVersion(Object.values(clusters));
-  const filterFunc = useFilterFunc<Cluster>(['.name']);
   const maxWarnings = 50;
   const warningsMap = Event.useWarningList(Object.values(clusters).map(c => c.name));
 
@@ -211,7 +210,6 @@ function HomeComponent(props: HomeComponentProps) {
         }
       >
         <ResourceTable
-          filterFunction={filterFunc}
           defaultSortingColumn={{ id: 'name', desc: false }}
           columns={[
             {

diff --git a/frontend/src/components/App/Notifications/List.tsx b/frontend/src/components/App/Notifications/List.tsx
@@ -5,17 +5,21 @@ import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import { useTypedSelector } from '../../../redux/reducers/reducers';
-import { DateLabel, Link, SectionBox, SectionFilterHeader, SimpleTable } from '../../common';
+import { DateLabel, Link, SectionBox, SectionFilterHeader, Table } from '../../common';
 import Empty from '../../common/EmptyContent';
-import { Notification, setNotifications, updateNotifications } from './notificationsSlice';
+import {
+  Notification,
+  NotificationIface,
+  setNotifications,
+  updateNotifications,
+} from './notificationsSlice';
 
 export default function NotificationList() {
   const notifications = useTypedSelector(state => state.notifications.notifications);
   const clusters = useTypedSelector(state => state.config.clusters);
   const { t } = useTranslation(['glossary', 'translation']);
   const dispatch = useDispatch();
   const theme = useTheme();
-  const search = useTypedSelector(state => state.filter.search);
   const history = useHistory();
 
   const allNotificationsAreDeleted = useMemo(() => {
@@ -26,7 +30,7 @@ export default function NotificationList() {
     return !!notifications.find(notification => !notification.deleted && !notification.seen);
   }, [notifications]);
 
-  function notificationSeenUnseenHandler(event: any, notification?: Notification) {
+  function notificationSeenUnseenHandler(event: any, notification?: NotificationIface) {
     if (!notification) {
       return;
     }
@@ -51,7 +55,7 @@ export default function NotificationList() {
     dispatch(setNotifications(massagedNotifications));
   }
 
-  function notificationItemClickHandler(notification: Notification) {
+  function notificationItemClickHandler(notification: NotificationIface) {
     notification.url && history.push(notification.url);
     notification.seen = true;
     dispatch(updateNotifications(notification));
@@ -104,15 +108,13 @@ export default function NotificationList() {
             maxWidth: '100%',
           }}
         >
-          <SimpleTable
-            filterFunction={(notification: Notification) =>
-              (notification?.message?.toLowerCase() || '').includes(search.toLowerCase())
-            }
+          <Table
             columns={[
               {
-                label: t('translation|Message'),
+                header: t('translation|Message'),
                 gridTemplate: 'auto',
-                getter: (notification: Notification) => (
+                accessorKey: 'message',
+                Cell: ({ row: { original: notification } }) => (
                   <Box>
                     <Tooltip
                       title={notification.message || t('translation|No message')}
@@ -133,9 +135,10 @@ export default function NotificationList() {
                 ),
               },
               {
-                label: t('glossary|Cluster'),
+                header: t('glossary|Cluster'),
                 gridTemplate: 'min-content',
-                getter: (notification: Notification) => (
+                accessorKey: 'cluster',
+                Cell: ({ row: { original: notification } }) => (
                   <Box display={'flex'} alignItems="center">
                     {Object.entries(clusters || {}).length > 1 && notification.cluster && (
                       <Box
@@ -155,14 +158,18 @@ export default function NotificationList() {
                 ),
               },
               {
-                label: t('translation|Date'),
+                header: t('translation|Date'),
                 gridTemplate: 'min-content',
-                getter: (notification: Notification) => <DateLabel date={notification.date} />,
+                accessorKey: 'date',
+                Cell: ({ row: { original: notification } }) => (
+                  <DateLabel date={notification.date} />
+                ),
               },
               {
-                label: t('translation|Visible'),
+                header: t('translation|Visible'),
                 gridTemplate: 'min-content',
-                getter: (notification: Notification) =>
+                accessorKey: 'seen',
+                Cell: ({ row: { original: notification } }) =>
                   !notification.seen && (
                     <Tooltip title={t(`translation|Mark as read`)}>
                       <IconButton
@@ -182,7 +189,6 @@ export default function NotificationList() {
               },
             ]}
             data={notifications}
-            noTableHeader
           />
         </Box>
       )}