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 13, 2024 · e7cad4f · e7cad4f
1 parent ba49488
commit e7cad4f
Show file tree

Hide file tree

Showing 78 changed files with 10,008 additions and 6,603 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>
       )}