fix(edge/updates): allow group search [EE-6179] (#10408)

app/react/components/datatables/Datatable.tsx

@@ -273,7 +273,9 @@ export function defaultGlobalFilterFn<D, TFilter extends { search: string }>(
   }
 
   if (Array.isArray(value)) {
-    return value.some((item) => item.toLowerCase().includes(filterValueLower));
+    return value.some((item) =>
+      item.toString().toLowerCase().includes(filterValueLower)
+    );
   }
 
   return false;

app/react/portainer/environments/update-schedules/ListView/ListView.tsx

@@ -1,7 +1,10 @@
 import { Clock, Trash2 } from 'lucide-react';
+import { useMemo } from 'react';
+import _ from 'lodash';
 
 import { notifySuccess } from '@/portainer/services/notifications';
 import { withLimitToBE } from '@/react/hooks/useLimitToBE';
+import { useEdgeGroups } from '@/react/edge/edge-groups/queries/useEdgeGroups';
 
 import { confirmDelete } from '@@/modals/confirm';
 import { Datatable } from '@@/datatables';
@@ -17,6 +20,7 @@ import { BetaAlert } from '../common/BetaAlert';
 
 import { columns } from './columns';
 import { createStore } from './datatable-store';
+import { DecoratedItem } from './types';
 
 const storageKey = 'update-schedules-list';
 const settingsStore = createStore(storageKey);
@@ -27,8 +31,24 @@ export function ListView() {
   const tableState = useTableState(settingsStore, storageKey);
 
   const listQuery = useList(true);
+  const groupsQuery = useEdgeGroups({
+    select: (groups) => Object.fromEntries(groups.map((g) => [g.Id, g.Name])),
+  });
 
-  if (!listQuery.data) {
+  const items: Array<DecoratedItem> = useMemo(() => {
+    if (!listQuery.data || !groupsQuery.data) {
+      return [];
+    }
+
+    return listQuery.data.map((item) => ({
+      ...item,
+      edgeGroupNames: _.compact(
+        item.edgeGroupIds.map((id) => groupsQuery.data[id])
+      ),
+    }));
+  }, [listQuery.data, groupsQuery.data]);
+
+  if (!listQuery.data || !groupsQuery.data) {
     return null;
   }
 
@@ -46,7 +66,7 @@ export function ListView() {
       />
 
       <Datatable
-        dataset={listQuery.data}
+        dataset={items}
         columns={columns}
         settingsManager={tableState}
         title="Update & rollback"

app/react/portainer/environments/update-schedules/ListView/columns/groups.tsx

@@ -1,27 +1,18 @@
-import _ from 'lodash';
 import { CellContext } from '@tanstack/react-table';
 
-import { EdgeGroup } from '@/react/edge/edge-groups/types';
+import { DecoratedItem } from '../types';
-import { useEdgeGroups } from '@/react/edge/edge-groups/queries/useEdgeGroups';
-
-import { EdgeUpdateListItemResponse } from '../../queries/list';
 
 import { columnHelper } from './helper';
 
-export const groups = columnHelper.accessor('edgeGroupIds', {
+export const groups = columnHelper.accessor('edgeGroupNames', {
-  header: 'Groups',
+  header: 'Edge Groups',
   cell: GroupsCell,
 });
 
 export function GroupsCell({
   getValue,
-}: CellContext<EdgeUpdateListItemResponse, Array<EdgeGroup['Id']>>) {
+}: CellContext<DecoratedItem, Array<string>>) {
-  const groupsIds = getValue();
+  const groups = getValue();
-  const groupsQuery = useEdgeGroups();
 
-  const groups = _.compact(
+  return groups.join(', ');
-    groupsIds.map((id) => groupsQuery.data?.find((g) => g.Id === id))
-  );
-
-  return groups.map((g) => g.Name).join(', ');
 }

app/react/portainer/environments/update-schedules/ListView/columns/helper.ts

@@ -1,5 +1,5 @@
 import { createColumnHelper } from '@tanstack/react-table';
 
-import { EdgeUpdateListItemResponse } from '../../queries/list';
+import { DecoratedItem } from '../types';
 
-export const columnHelper = createColumnHelper<EdgeUpdateListItemResponse>();
+export const columnHelper = createColumnHelper<DecoratedItem>();

app/react/portainer/environments/update-schedules/ListView/columns/index.ts

@@ -1,6 +1,6 @@
 import { buildNameColumn } from '@@/datatables/buildNameColumn';
 
-import { EdgeUpdateListItemResponse } from '../../queries/list';
+import { DecoratedItem } from '../types';
 
 import { created } from './created';
 import { groups } from './groups';
@@ -9,7 +9,7 @@ import { scheduledTime } from './scheduled-time';
 import { scheduleType } from './type';
 
 export const columns = [
-  buildNameColumn<EdgeUpdateListItemResponse>('name', '.item'),
+  buildNameColumn<DecoratedItem>('name', '.item'),
   scheduledTime,
   groups,
   scheduleType,

app/react/portainer/environments/update-schedules/ListView/columns/schedule-status.tsx

@@ -1,7 +1,7 @@
 import { CellContext } from '@tanstack/react-table';
 
-import { EdgeUpdateListItemResponse } from '../../queries/list';
 import { StatusType } from '../../types';
+import { DecoratedItem } from '../types';
 
 import { columnHelper } from './helper';
 
@@ -15,10 +15,7 @@ function StatusCell({
   row: {
     original: { statusMessage },
   },
-}: CellContext<
+}: CellContext<DecoratedItem, DecoratedItem['status']>) {
-  EdgeUpdateListItemResponse,
-  EdgeUpdateListItemResponse['status']
->) {
   const status = getValue();
 
   switch (status) {

app/react/portainer/environments/update-schedules/ListView/types.ts

@@ -0,0 +1,5 @@
+import { EdgeUpdateListItemResponse } from '../queries/list';
+
+export type DecoratedItem = EdgeUpdateListItemResponse & {
+  edgeGroupNames: string[];
+};