feat(KFLUXUI-193): filter on Applications

src/components/Applications/ApplicationListView.tsx

@@ -5,16 +5,20 @@
   EmptyStateBody,
   PageSection,
   PageSectionVariants,
+  SearchInput,
   Spinner,
   Toolbar,
   ToolbarContent,
   ToolbarItem,
 } from '@patternfly/react-core';
+import { debounce } from 'lodash-es';
 import emptyStateImgUrl from '../../assets/Application.svg';
 import { useApplications } from '../../hooks/useApplications';
+import { useSearchParam } from '../../hooks/useSearchParam';
 import { ApplicationModel, ComponentModel } from '../../models';
 import { Table } from '../../shared';
 import AppEmptyState from '../../shared/components/empty-state/AppEmptyState';
+import FilteredEmptyState from '../../shared/components/empty-state/FilteredEmptyState';
 import { ApplicationKind } from '../../types';
 import { useApplicationBreadcrumbs } from '../../utils/breadcrumb-utils';
 import { useAccessReviewForModel } from '../../utils/rbac';
@@ -29,12 +33,29 @@
   const applicationBreadcrumbs = useApplicationBreadcrumbs();
   const [canCreateApplication] = useAccessReviewForModel(ApplicationModel, 'create');
   const [canCreateComponent] = useAccessReviewForModel(ComponentModel, 'create');
+  const [nameFilter, setNameFilter] = useSearchParam('name', '');
 
   const [applications, loaded] = useApplications(namespace, workspace);
   applications?.sort(
     (app1, app2) =>
       +new Date(app2.metadata?.creationTimestamp) - +new Date(app1.metadata?.creationTimestamp),
   );
+  const filteredApplications = React.useMemo(() => {
+    const lowerCaseNameFilter = nameFilter.toLowerCase();
+    return applications?.filter(
+      (app) =>
+        app.spec.displayName?.toLowerCase().includes(lowerCaseNameFilter) ??
+        app.metadata.name.includes(lowerCaseNameFilter),
+    );
+  }, [nameFilter, applications]);
+
+  const onClearFilters = () => {
+    setNameFilter('');
+  };
+
+  const onNameInput = debounce((n: string) => {
+    setNameFilter(n);
+  }, 600);
 
   if (!loaded) {
     return (
@@ -86,6 +107,17 @@
             <>
               <Toolbar usePageInsets>
                 <ToolbarContent>
+                  <ToolbarItem className="pf-v5-u-ml-0">
+                    <SearchInput
+                      name="nameInput"
+                      data-test="name-input-filter"
+                      type="search"
+                      aria-label="name filter"
+                      placeholder="Filter by name..."
+                      onChange={(_, n) => onNameInput(n)}
+                      value={nameFilter}
+                    />
+                  </ToolbarItem>
                   <ToolbarItem>
                     <ButtonWithAccessTooltip
                       variant="primary"
@@ -104,16 +136,20 @@
                   </ToolbarItem>
                 </ToolbarContent>
               </Toolbar>
-              <Table
-                data={applications}
-                aria-label="Application List"
-                Header={ApplicationListHeader}
-                Row={ApplicationListRow}
-                loaded
-                getRowProps={(obj: ApplicationKind) => ({
-                  id: obj.metadata?.name,
-                })}
-              />
+              {filteredApplications.length !== 0 ? (
+                <Table
+                  data={filteredApplications}
+                  aria-label="Application List"
+                  Header={ApplicationListHeader}
+                  Row={ApplicationListRow}
+                  loaded
+                  getRowProps={(obj: ApplicationKind) => ({
+                    id: obj.metadata?.name,
+                  })}
+                />
+              ) : (
+                <FilteredEmptyState onClearFilters={onClearFilters} />
+              )}
             </>
           )}
         </PageSection>

src/components/Applications/__tests__/ApplicationListView.spec.tsx

@@ -1,10 +1,14 @@
-import { screen } from '@testing-library/react';
+import React from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { Table as PfTable, TableHeader } from '@patternfly/react-table/deprecated';
+import { screen, fireEvent, waitFor } from '@testing-library/react';
 import { ApplicationKind } from '../../../types';
 import {
   createK8sWatchResourceMock,
   createUseWorkspaceInfoMock,
   renderWithQueryClient,
 } from '../../../utils/test-utils';
+import ApplicationListRow from '../ApplicationListRow';
 import ApplicationListView from '../ApplicationListView';
 
 jest.mock('react-i18next', () => ({
@@ -16,6 +20,7 @@ jest.mock('react-router-dom', () => {
   return {
     ...actual,
     useLocation: jest.fn(() => ({})),
+    useSearchParams: jest.fn(),
     Link: (props) => <a href={props.to}>{props.children}</a>,
     useNavigate: jest.fn(),
   };
@@ -25,6 +30,30 @@ jest.mock('../../../utils/rbac', () => ({
   useAccessReviewForModel: jest.fn(() => [true, true]),
 }));
 
+jest.mock('../../../shared/components/table', () => {
+  const actual = jest.requireActual('../../../shared/components/table');
+  return {
+    ...actual,
+    Table: (props) => {
+      const { data, filters, selected, match, kindObj } = props;
+      const cProps = { data, filters, selected, match, kindObj };
+      const columns = props.Header(cProps);
+      return (
+        <PfTable role="table" aria-label="table" cells={columns} variant="compact" borders={false}>
+          <TableHeader role="rowgroup" />
+          <tbody>
+            {props.data.map((d, i) => (
+              <tr key={i}>
+                <ApplicationListRow columns={null} obj={d} />
+              </tr>
+            ))}
+          </tbody>
+        </PfTable>
+      );
+    },
+  };
+});
+
 const applications: ApplicationKind[] = [
   {
     kind: 'Application',
@@ -88,12 +117,17 @@ const applications: ApplicationKind[] = [
   },
 ];
 
+const useSearchParamsMock = useSearchParams as jest.Mock;
 const watchResourceMock = createK8sWatchResourceMock();
 createUseWorkspaceInfoMock({ namespace: 'test-ns', workspace: 'test-ws' });
 
 const ApplicationList = ApplicationListView;
 
 describe('Application List', () => {
+  beforeEach(() => {
+    useSearchParamsMock.mockImplementation(() => React.useState(new URLSearchParams()));
+  });
+
   it('should render spinner if application data is not loaded', () => {
     watchResourceMock.mockReturnValue([[], false]);
     renderWithQueryClient(<ApplicationList />);
@@ -130,4 +164,116 @@ describe('Application List', () => {
     renderWithQueryClient(<ApplicationList />);
     expect(screen.queryByTestId('applications-breadcrumb-link')).not.toBeInTheDocument();
   });
+
+  it('should apply query params to the filter', async () => {
+    watchResourceMock.mockReturnValue([applications, true]);
+    useSearchParamsMock.mockImplementation(() =>
+      React.useState(new URLSearchParams('name=xyz-app')),
+    );
+    renderWithQueryClient(<ApplicationList />);
+    await waitFor(() => {
+      expect(screen.queryByText('mno-app')).not.toBeInTheDocument();
+      expect(screen.queryByText('mno-app1')).not.toBeInTheDocument();
+      expect(screen.queryByText('mno-app2')).not.toBeInTheDocument();
+      expect(screen.queryByText('xyz-app')).toBeInTheDocument();
+    });
+  });
+
+  it('should filter applications by name', async () => {
+    watchResourceMock.mockReturnValue([applications, true]);
+    const { rerender } = renderWithQueryClient(<ApplicationList />);
+    await waitFor(() => {
+      expect(screen.queryByText('mno-app')).toBeInTheDocument();
+      expect(screen.queryByText('mno-app1')).toBeInTheDocument();
+      expect(screen.queryByText('mno-app2')).toBeInTheDocument();
+      expect(screen.queryByText('xyz-app')).toBeInTheDocument();
+    });
+
+    const filter = screen.getByPlaceholderText('Filter by name...');
+    fireEvent.change(filter, { target: { value: 'xyz-app' } });
+    rerender(<ApplicationList />);
+    await waitFor(() => {
+      expect(screen.queryByText('mno-app')).not.toBeInTheDocument();
+      expect(screen.queryByText('mno-app1')).not.toBeInTheDocument();
+      expect(screen.queryByText('mno-app2')).not.toBeInTheDocument();
+      expect(screen.queryByText('xyz-app')).toBeInTheDocument();
+    });
+  });
+
+  it('should use fallback filter value of metadata.name', async () => {
+    const alteredApplications = applications.map((app) => ({
+      ...app,
+      spec: { displayName: undefined },
+    }));
+    watchResourceMock.mockReturnValue([alteredApplications, true]);
+    const { rerender } = renderWithQueryClient(<ApplicationList />);
+    await waitFor(() => {
+      expect(screen.queryByText('mno-app')).toBeInTheDocument();
+      expect(screen.queryByText('mno-app1')).toBeInTheDocument();
+      expect(screen.queryByText('mno-app2')).toBeInTheDocument();
+      expect(screen.queryByText('xyz-app')).toBeInTheDocument();
+    });
+
+    const filter = screen.getByPlaceholderText('Filter by name...');
+    fireEvent.change(filter, { target: { value: 'xyz-app' } });
+    rerender(<ApplicationList />);
+    await waitFor(() => {
+      expect(screen.queryByText('mno-app')).not.toBeInTheDocument();
+      expect(screen.queryByText('mno-app1')).not.toBeInTheDocument();
+      expect(screen.queryByText('mno-app2')).not.toBeInTheDocument();
+      expect(screen.queryByText('xyz-app')).toBeInTheDocument();
+    });
+  });
+
+  it('should filter case insensitive', async () => {
+    watchResourceMock.mockReturnValue([applications, true]);
+    const { rerender } = renderWithQueryClient(<ApplicationList />);
+    await waitFor(() => {
+      expect(screen.queryByText('mno-app')).toBeInTheDocument();
+      expect(screen.queryByText('mno-app1')).toBeInTheDocument();
+      expect(screen.queryByText('mno-app2')).toBeInTheDocument();
+      expect(screen.queryByText('xyz-app')).toBeInTheDocument();
+    });
+
+    const filter = screen.getByPlaceholderText('Filter by name...');
+    fireEvent.change(filter, { target: { value: 'XYZ' } });
+    rerender(<ApplicationList />);
+    await waitFor(() => {
+      expect(screen.queryByText('mno-app')).not.toBeInTheDocument();
+      expect(screen.queryByText('mno-app1')).not.toBeInTheDocument();
+      expect(screen.queryByText('mno-app2')).not.toBeInTheDocument();
+      expect(screen.queryByText('xyz-app')).toBeInTheDocument();
+    });
+  });
+
+  it('should clear the filter when clear button is clicked', async () => {
+    watchResourceMock.mockReturnValue([applications, true]);
+    const { rerender } = renderWithQueryClient(<ApplicationList />);
+    await waitFor(() => {
+      expect(screen.queryByText('mno-app')).toBeInTheDocument();
+      expect(screen.queryByText('mno-app1')).toBeInTheDocument();
+      expect(screen.queryByText('mno-app2')).toBeInTheDocument();
+      expect(screen.queryByText('xyz-app')).toBeInTheDocument();
+    });
+
+    const filter = screen.getByPlaceholderText('Filter by name...');
+    fireEvent.change(filter, { target: { value: 'invalid-app' } });
+    rerender(<ApplicationList />);
+    await waitFor(() => {
+      expect(screen.queryByText('mno-app')).not.toBeInTheDocument();
+      expect(screen.queryByText('mno-app2')).not.toBeInTheDocument();
+      expect(screen.queryByText('mno-app2')).not.toBeInTheDocument();
+      expect(screen.queryByText('xyz-app')).not.toBeInTheDocument();
+      expect(screen.queryByText('No results found')).toBeInTheDocument();
+    });
+
+    fireEvent.click(screen.getByRole('button', { name: 'Clear all filters' }));
+    rerender(<ApplicationList />);
+    await waitFor(() => {
+      expect(screen.queryByText('mno-app')).toBeInTheDocument();
+      expect(screen.queryByText('mno-app1')).toBeInTheDocument();
+      expect(screen.queryByText('mno-app2')).toBeInTheDocument();
+      expect(screen.queryByText('xyz-app')).toBeInTheDocument();
+    });
+  });
 });