Add filtering for workspaces

cypress/e2e/filter-workspaces.cy.ts

@@ -0,0 +1,80 @@
+describe('Filter workspaces', () => {
+  const mockWorkspaces = {
+    meta: {
+      count: 3,
+      limit: 100,
+      offset: 0,
+    },
+    data: [
+      {
+        name: 'Root Workspace',
+        id: '01938960-94c7-79e3-aecb-549ad25003b8',
+        parent_id: null,
+        description: null,
+        created: '2024-12-02T21:57:08.423927Z',
+        modified: '2024-12-02T21:57:08.504809Z',
+        type: 'root',
+      },
+      {
+        name: 'AAA',
+        id: '01939c7c-e19a-7f60-a38a-1937cbd55f0c',
+        parent_id: '01938960-94c7-79e3-aecb-549ad25003b8',
+        description: null,
+        created: '2024-12-06T15:00:50.202053Z',
+        modified: '2024-12-06T15:00:50.213196Z',
+        type: 'standard',
+      },
+      {
+        name: 'xyc',
+        id: '0193d8ee-06d5-76a3-af0b-2b002431016d',
+        parent_id: '01939c7c-e19a-7f60-a38a-1937cbd55f0c',
+        description: null,
+        created: '2024-12-18T08:41:38.261872Z',
+        modified: '2024-12-18T08:41:38.271103Z',
+        type: 'standard',
+      },
+    ],
+  };
+
+  beforeEach(() => {
+    cy.login();
+
+    // mock the workspaces
+    cy.intercept('GET', '**/api/rbac/v2/workspaces/?limit=100', {
+      statusCode: 200,
+      body: mockWorkspaces,
+    }).as('getWorkspaces');
+
+    cy.visit('/iam/access-management/workspaces');
+    cy.wait('@getWorkspaces', { timeout: 30000 });
+
+    // check if Workspaces heading exists on the page
+    cy.contains('Workspaces').should('exist');
+
+    // expand tree
+    cy.get('[aria-label="Expand row 0"]').click();
+    cy.get('[aria-label="Expand row 1"]').click();
+
+    // check if 'xyc' workspace is visible
+    cy.get('[data-ouia-component-id="workspaces-list-tr-2"]').should('exist');
+  });
+
+  afterEach(() => {
+    // clear filter and return tree to original state
+    cy.get('[data-ouia-component-id="DataViewToolbar-clear-all-filters"]').first().click();
+    cy.get('[data-ouia-component-id="workspaces-list-tr-2"]').should('exist');
+  });
+
+  it('should filter workspaces', () => {
+    // filter to hide entire tree and check if 'xyc' workspace is hidden
+    cy.get('[data-ouia-component-id="workspace-name-filter"]').type('asdf');
+    cy.get('[data-ouia-component-id="workspaces-list-tr-2"]').should('not.exist');
+  });
+
+  it('should not show children of filtered workspaces', () => {
+    // filter to show 'AAA' workspace and check if 'xyc' is hidden
+    cy.get('[data-ouia-component-id="workspace-name-filter"]').type('AAA');
+    cy.get('[data-ouia-component-id="workspaces-list-tr-1"]').should('exist');
+    cy.get('[data-ouia-component-id="workspaces-list-tr-2"]').should('not.exist');
+  });
+});

src/smart-components/workspaces/WorkspaceListTable.tsx

@@ -1,17 +1,30 @@
 import React, { Suspense, useEffect, useMemo } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { Outlet } from 'react-router-dom';
+import { Outlet, useSearchParams } from 'react-router-dom';
 import { useIntl } from 'react-intl';
 import { fetchWorkspaces } from '../../redux/actions/workspaces-actions';
 import { BulkSelect, BulkSelectValue, ErrorState, ResponsiveAction, ResponsiveActions, SkeletonTableBody } from '@patternfly/react-component-groups';
-import { DataView, DataViewTable, DataViewTh, DataViewToolbar, DataViewTrTree, useDataViewSelection } from '@patternfly/react-data-view';
+import {
+  DataView,
+  DataViewTable,
+  DataViewTextFilter,
+  DataViewTh,
+  DataViewToolbar,
+  DataViewTrTree,
+  useDataViewFilters,
+  useDataViewSelection,
+} from '@patternfly/react-data-view';
 import { Workspace } from '../../redux/reducers/workspaces-reducer';
 import { RBACStore } from '../../redux/store';
 import AppLink from '../../presentational-components/shared/AppLink';
 import pathnames from '../../utilities/pathnames';
 import messages from '../../Messages';
 import useAppNavigate from '../../hooks/useAppNavigate';
 
+interface WorkspaceFilters {
+  name: string;
+}
+
 const mapWorkspacesToHierarchy = (workspaceData: Workspace[]): Workspace | undefined => {
   const idMap = new Map();
   let root = undefined;
@@ -46,16 +59,49 @@ const buildRows = (workspaces: Workspace[]): DataViewTrTree[] =>
       : {}),
   }));
 
+const search = (workspaceTree: Workspace[], filter: string): Workspace[] => {
+  const matches: Workspace[] = [];
+  if (!Array.isArray(workspaceTree)) {
+    return matches;
+  }
+
+  workspaceTree.forEach((obj) => {
+    if (obj.name.toLocaleLowerCase().includes(filter.toLocaleLowerCase())) {
+      if (obj.type !== 'root') {
+        matches.push(Object.assign({}, obj, { children: [] }));
+      } else {
+        matches.push(obj);
+      }
+    } else {
+      let childResults: Workspace[] = [];
+      if (obj.children) {
+        childResults = search(obj.children, filter);
+      }
+      if (childResults.length) {
+        matches.push(Object.assign({}, obj, { children: childResults }));
+      }
+    }
+  });
+  return matches;
+};
+
 const WorkspaceListTable = () => {
   const intl = useIntl();
   const dispatch = useDispatch();
   const navigate = useAppNavigate();
   const selection = useDataViewSelection({ matchOption: (a, b) => a.id === b.id });
 
   const { isLoading, workspaces, error } = useSelector((state: RBACStore) => state.workspacesReducer);
+  const [searchParams, setSearchParams] = useSearchParams();
+  const { filters, onSetFilters, clearAllFilters } = useDataViewFilters<WorkspaceFilters>({
+    initialFilters: { name: '' },
+    searchParams,
+    setSearchParams,
+  });
 
   const workspacesTree = useMemo(() => mapWorkspacesToHierarchy(workspaces), [workspaces]);
-  const rows = useMemo(() => (workspacesTree ? buildRows([workspacesTree]) : []), [workspacesTree]);
+  const filteredTree = useMemo(() => (workspacesTree ? search([workspacesTree], filters.name) : []), [workspacesTree, filters]);
+  const rows = useMemo(() => (filteredTree ? buildRows(filteredTree) : []), [filteredTree]);
   const columns: DataViewTh[] = [intl.formatMessage(messages.name), intl.formatMessage(messages.description)];
 
   useEffect(() => {
@@ -83,6 +129,19 @@ const WorkspaceListTable = () => {
               onSelect={handleBulkSelect}
             />
           }
+          clearAllFilters={clearAllFilters}
+          filters={
+            <DataViewTextFilter
+              filterId="name"
+              title="Name"
+              placeholder="Filter by name"
+              ouiaId={`workspace-name-filter`}
+              onChange={(_e, value) => {
+                onSetFilters({ name: value });
+              }}
+              value={filters['name']}
+            />
+          }
           actions={
             <ResponsiveActions>
               <ResponsiveAction ouiaId="create-workspace-button" isPinned onClick={() => navigate({ pathname: pathnames['create-workspace'].link })}>