feat(KFLUXUI-125): allow sorting pipeline runs by status and type

src/components/Commits/CommitDetails/tabs/CommitsPipelineRunTab.tsx

@@ -1,13 +1,20 @@
 import * as React from 'react';
 import { useParams } from 'react-router-dom';
 import { Bullseye, Spinner, Stack, Title } from '@patternfly/react-core';
+import { PipelineRunLabel } from '../../../../consts/pipelinerun';
 import { usePipelineRunsForCommit } from '../../../../hooks/usePipelineRuns';
+import { usePipelineRunsFilter } from '../../../../hooks/usePipelineRunsFilter';
 import { usePLRVulnerabilities } from '../../../../hooks/useScanResults';
 import { HttpError } from '../../../../k8s/error';
 import { RouterParams } from '../../../../routes/utils';
 import { Table } from '../../../../shared';
 import ErrorEmptyState from '../../../../shared/components/empty-state/ErrorEmptyState';
+import FilteredEmptyState from '../../../../shared/components/empty-state/FilteredEmptyState';
 import { PipelineRunKind } from '../../../../types';
+import { statuses } from '../../../../utils/commits-utils';
+import { pipelineRunStatus } from '../../../../utils/pipeline-utils';
+import { pipelineRunTypes } from '../../../../utils/pipelinerun-utils';
+import { createFilterObj } from '../../../Filter/utils/pipelineruns-filter-utils';
 import PipelineRunEmptyState from '../../../PipelineRun/PipelineRunEmptyState';
 import { PipelineRunListHeaderWithVulnerabilities } from '../../../PipelineRun/PipelineRunListView/PipelineRunListHeader';
 import { PipelineRunListRowWithVulnerabilities } from '../../../PipelineRun/PipelineRunListView/PipelineRunListRow';
@@ -16,10 +23,33 @@ import { useWorkspaceInfo } from '../../../Workspace/useWorkspaceInfo';
 const CommitsPipelineRunTab: React.FC = () => {
   const { applicationName, commitName } = useParams<RouterParams>();
   const { namespace, workspace } = useWorkspaceInfo();
+  const {
+    filterPLRs,
+    filterState: { nameFilter },
+    filterToolbar,
+    onClearFilters,
+  } = usePipelineRunsFilter();
   const [pipelineRuns, loaded, error, getNextPage, { isFetchingNextPage, hasNextPage }] =
     usePipelineRunsForCommit(namespace, workspace, applicationName, commitName);
 
-  const vulnerabilities = usePLRVulnerabilities(pipelineRuns);
+  const statusFilterObj = React.useMemo(
+    () => createFilterObj(pipelineRuns, (plr) => pipelineRunStatus(plr), statuses),
+    [pipelineRuns],
+  );
+
+  const typeFilterObj = React.useMemo(
+    () =>
+      createFilterObj(
+        pipelineRuns,
+        (plr) => plr?.metadata.labels[PipelineRunLabel.PIPELINE_TYPE],
+        pipelineRunTypes,
+      ),
+    [pipelineRuns],
+  );
+
+  const filteredPLRs = React.useMemo(() => filterPLRs(pipelineRuns), [filterPLRs, pipelineRuns]);
+
+  const vulnerabilities = usePLRVulnerabilities(nameFilter ? filteredPLRs : pipelineRuns);
 
   if (error) {
     const httpError = HttpError.fromCode(error ? (error as { code: number }).code : 404);
@@ -36,6 +66,9 @@ const CommitsPipelineRunTab: React.FC = () => {
     return <PipelineRunEmptyState applicationName={applicationName} />;
   }
 
+  const EmptyMsg = () => <FilteredEmptyState onClearFilters={onClearFilters} />;
+  const NoDataEmptyMsg = () => <PipelineRunEmptyState applicationName={applicationName} />;
+
   return (
     <>
       <Title headingLevel="h4" className="pf-v5-c-title pf-v5-u-mt-lg pf-v5-u-mb-lg">
@@ -44,24 +77,28 @@ const CommitsPipelineRunTab: React.FC = () => {
       <div>
         <Table
           key={`${pipelineRuns.length}-${vulnerabilities.fetchedPipelineRuns.length}`}
-          data={pipelineRuns}
+          unfilteredData={pipelineRuns}
+          data={filteredPLRs}
           aria-label="Pipelinerun List"
           Header={PipelineRunListHeaderWithVulnerabilities}
+          Toolbar={filterToolbar(statusFilterObj, typeFilterObj)}
           loaded={isFetchingNextPage || loaded}
           customData={vulnerabilities}
+          EmptyMsg={EmptyMsg}
+          NoDataEmptyMsg={NoDataEmptyMsg}
           Row={PipelineRunListRowWithVulnerabilities}
           getRowProps={(obj: PipelineRunKind) => ({
             id: obj.metadata.name,
           })}
           isInfiniteLoading
           infiniteLoaderProps={{
             isRowLoaded: (args) => {
-              return !!pipelineRuns[args.index];
+              return !!filteredPLRs[args.index];
             },
             loadMoreRows: () => {
               hasNextPage && !isFetchingNextPage && getNextPage?.();
             },
-            rowCount: hasNextPage ? pipelineRuns.length + 1 : pipelineRuns.length,
+            rowCount: hasNextPage ? filteredPLRs.length + 1 : filteredPLRs.length,
           }}
         />
         {isFetchingNextPage ? (

src/components/Filter/PipelineRunsFilterToolbar.tsx

@@ -0,0 +1,145 @@
+import { useState } from 'react';
+import {
+  SearchInput,
+  Toolbar,
+  ToolbarContent,
+  ToolbarGroup,
+  ToolbarItem,
+} from '@patternfly/react-core';
+import {
+  Select,
+  SelectGroup,
+  SelectOption,
+  SelectVariant,
+} from '@patternfly/react-core/deprecated';
+import { FilterIcon } from '@patternfly/react-icons/dist/esm/icons/filter-icon';
+import { debounce } from 'lodash-es';
+
+type PipelineRunsFilterToolbarProps = {
+  nameFilter: string;
+  setNameFilter: (name: string) => void;
+  statusFilters: string[];
+  setStatusFilters: (filters: string[]) => void;
+  statusOptions: { [key: string]: number };
+  typeFilters: string[];
+  setTypeFilters: (filters: string[]) => void;
+  typeOptions: { [key: string]: number };
+  onLoadName: string;
+  setOnLoadName: (name: string) => void;
+  onClearFilters: () => void;
+};
+
+const PipelineRunsFilterToolbar: React.FC<PipelineRunsFilterToolbarProps> = ({
+  nameFilter,
+  setNameFilter,
+  statusFilters,
+  setStatusFilters,
+  statusOptions,
+  typeFilters,
+  setTypeFilters,
+  typeOptions,
+  onLoadName,
+  setOnLoadName,
+  onClearFilters,
+}: PipelineRunsFilterToolbarProps) => {
+  const [statusFilterExpanded, setStatusFilterExpanded] = useState(false);
+  const [typeFilterExpanded, setTypeFilterExpanded] = useState(false);
+
+  const onNameInput = debounce((n: string) => {
+    n.length === 0 && onLoadName.length && setOnLoadName('');
+
+    setNameFilter(n);
+  }, 600);
+
+  return (
+    <Toolbar data-test="pipelinerun-list-toolbar" clearAllFilters={onClearFilters}>
+      <ToolbarContent>
+        <ToolbarGroup align={{ default: 'alignLeft' }}>
+          <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>
+            <Select
+              placeholderText="Status"
+              toggleIcon={<FilterIcon />}
+              toggleAriaLabel="Status filter menu"
+              variant={SelectVariant.checkbox}
+              isOpen={statusFilterExpanded}
+              onToggle={(_, expanded) => setStatusFilterExpanded(expanded)}
+              onSelect={(event, selection) => {
+                const checked = (event.target as HTMLInputElement).checked;
+                setStatusFilters(
+                  checked
+                    ? [...statusFilters, String(selection)]
+                    : statusFilters.filter((value) => value !== selection),
+                );
+              }}
+              selections={statusFilters}
+              isGrouped
+            >
+              {[
+                <SelectGroup label="Status" key="status">
+                  {Object.keys(statusOptions).map((filter) => (
+                    <SelectOption
+                      key={filter}
+                      value={filter}
+                      isChecked={statusFilters.includes(filter)}
+                      itemCount={statusOptions[filter] ?? 0}
+                    >
+                      {filter}
+                    </SelectOption>
+                  ))}
+                </SelectGroup>,
+              ]}
+            </Select>
+          </ToolbarItem>
+          <ToolbarItem>
+            <Select
+              placeholderText="Type"
+              toggleIcon={<FilterIcon />}
+              toggleAriaLabel="Type filter menu"
+              variant={SelectVariant.checkbox}
+              isOpen={typeFilterExpanded}
+              onToggle={(_, expanded) => setTypeFilterExpanded(expanded)}
+              onSelect={(event, selection) => {
+                const checked = (event.target as HTMLInputElement).checked;
+                setTypeFilters(
+                  checked
+                    ? [...typeFilters, String(selection)]
+                    : typeFilters.filter((value) => value !== selection),
+                );
+              }}
+              selections={typeFilters}
+              isGrouped
+            >
+              {[
+                <SelectGroup label="Type" key="type">
+                  {Object.keys(typeOptions).map((filter) => (
+                    <SelectOption
+                      key={filter}
+                      value={filter}
+                      isChecked={typeFilters.includes(filter)}
+                      itemCount={typeOptions[filter] ?? 0}
+                    >
+                      {filter}
+                    </SelectOption>
+                  ))}
+                </SelectGroup>,
+              ]}
+            </Select>
+          </ToolbarItem>
+        </ToolbarGroup>
+      </ToolbarContent>
+    </Toolbar>
+  );
+};
+
+export default PipelineRunsFilterToolbar;

src/components/Filter/utils/pipelineruns-filter-utils.ts

@@ -0,0 +1,25 @@
+import { PipelineRunKind } from '../../../types';
+
+export const createFilterObj = (
+  items: PipelineRunKind[],
+  keyExtractor: (item: PipelineRunKind) => string | undefined,
+  validKeys: string[],
+  filterFn?: (item: PipelineRunKind) => boolean,
+): { [key: string]: number } => {
+  return items.reduce((acc, item) => {
+    if (filterFn && !filterFn(item)) {
+      return acc;
+    }
+
+    const key = keyExtractor(item);
+    if (validKeys.includes(key)) {
+      if (acc[key] !== undefined) {
+        acc[key] = acc[key] + 1;
+      } else {
+        acc[key] = 1;
+      }
+    }
+
+    return acc;
+  }, {});
+};