feat: Update pipelines table and filter (#319)

Author: callmevladik

src/constants/pipelineTypes.ts

@@ -4,5 +4,4 @@ export enum PIPELINE_TYPES {
   REVIEW = 'review',
   DEPLOY = 'deploy',
   CLEAN = 'clean',
-  AUTOTEST_RUNNER = 'autotestRunner',
 }

src/k8s/groups/Tekton/PipelineRun/hooks/useCreateAutotestRunnerPipelineRun.ts

@@ -1,6 +1,12 @@
 import { GIT_PROVIDERS } from '../../../../../../constants/gitProviders';
+import { PIPELINE_TYPES } from '../../../../../../constants/pipelineTypes';
 import { createRandomString } from '../../../../../../utils/createRandomString';
 import { PipelineRunKubeObjectConfig } from '../../config';
+import {
+  PIPELINE_RUN_LABEL_SELECTOR_CODEBASE,
+  PIPELINE_RUN_LABEL_SELECTOR_CODEBASE_BRANCH,
+  PIPELINE_RUN_LABEL_SELECTOR_PIPELINE_TYPE,
+} from '../../labels';
 import { PipelineRunKubeObjectInterface } from '../../types';
 import { generateBuildPipelineRef } from '../index';
 
@@ -55,9 +61,9 @@ export const createBuildPipelineRunInstance = ({
       namespace,
       name: `${trimmedPipelineRunNameStartValue}-build-${createRandomString(4)}`,
       labels: {
-        'app.edp.epam.com/codebasebranch': codebaseBranchMetadataName,
-        'app.edp.epam.com/codebase': codebaseName,
-        'app.edp.epam.com/pipelinetype': 'build',
+        [PIPELINE_RUN_LABEL_SELECTOR_CODEBASE_BRANCH]: codebaseBranchMetadataName,
+        [PIPELINE_RUN_LABEL_SELECTOR_CODEBASE]: codebaseName,
+        [PIPELINE_RUN_LABEL_SELECTOR_PIPELINE_TYPE]: PIPELINE_TYPES.BUILD,
       },
       annotations: {
         'argocd.argoproj.io/compare-options': 'IgnoreExtraneous',

src/k8s/groups/Tekton/PipelineRun/utils/createAutotestRunnerPipelineRunInstance/index.test.ts

@@ -1,49 +1,19 @@
 import { Grid, Typography } from '@mui/material';
 import React from 'react';
-import { useForm } from 'react-hook-form';
 import { PIPELINE_TYPES } from '../../../../../../../../constants/pipelineTypes';
-import { PIPELINE_RUN_LABEL_SELECTOR_PIPELINE_TYPE } from '../../../../../../../../k8s/groups/Tekton/PipelineRun/labels';
-import { PipelineRunKubeObjectInterface } from '../../../../../../../../k8s/groups/Tekton/PipelineRun/types';
-import { FormSelect } from '../../../../../../../../providers/Form/components/FormSelect';
+import { FilterContextProvider } from '../../../../../../../../providers/Filter';
 import { ResourceActionListContextProvider } from '../../../../../../../../providers/ResourceActionList';
-import { capitalizeFirstLetter } from '../../../../../../../../utils/format/capitalizeFirstLetter';
+import { getDefaultNamespace } from '../../../../../../../../utils/getDefaultNamespace';
 import { rem } from '../../../../../../../../utils/styling/rem';
 import { PipelineRunList } from '../../../../../../../../widgets/PipelineRunList';
+import {
+  FILTER_CONTROLS,
+  matchFunctions,
+} from '../../../../../../../../widgets/PipelineRunList/constants';
 import { usePermissionsContext } from '../../../../../../providers/Permissions/hooks';
 import { DetailsProps } from './types';
 
-const pipelineRunTypes = Object.entries(PIPELINE_TYPES).filter(
-  ([, value]) => value !== PIPELINE_TYPES.DEPLOY && value !== PIPELINE_TYPES.AUTOTEST_RUNNER
-);
-const pipelineRunTypeSelectOptions = pipelineRunTypes.map(([, value]) => ({
-  label: capitalizeFirstLetter(value),
-  value: value,
-}));
-
-const filterPipelineRunsByType = (
-  pipelineRunType: PIPELINE_TYPES,
-  pipelineRuns: PipelineRunKubeObjectInterface[]
-) =>
-  pipelineRunType === PIPELINE_TYPES.ALL
-    ? pipelineRuns
-    : pipelineRuns.filter(
-        ({ metadata: { labels } }) =>
-          labels[PIPELINE_RUN_LABEL_SELECTOR_PIPELINE_TYPE] === pipelineRunType
-      );
-
 export const Details = ({ pipelineRuns }: DetailsProps) => {
-  const [pipelineRunType, setPipelineRunType] = React.useState<PIPELINE_TYPES>(PIPELINE_TYPES.ALL);
-  const filteredPipelineRunsByType = React.useMemo(
-    () => filterPipelineRunsByType(pipelineRunType, pipelineRuns.all),
-    [pipelineRunType, pipelineRuns.all]
-  );
-
-  const {
-    register,
-    control,
-    formState: { errors },
-  } = useForm();
-
   const { pipelineRun: pipelineRunPermissions } = usePermissionsContext();
 
   return (
@@ -53,29 +23,25 @@ export const Details = ({ pipelineRuns }: DetailsProps) => {
           <Grid item>
             <Typography variant={'h6'}>Pipeline Runs</Typography>
           </Grid>
-          {!!pipelineRuns?.all?.length ? (
-            <Grid item style={{ minWidth: rem(300), marginLeft: 'auto' }}>
-              <FormSelect
-                {...register('type', {
-                  onChange: ({ target: { value } }) => setPipelineRunType(value),
-                })}
-                control={control}
-                errors={errors}
-                name={'type'}
-                label={'Type'}
-                options={pipelineRunTypeSelectOptions}
-                defaultValue={PIPELINE_TYPES.ALL}
-              />
-            </Grid>
-          ) : null}
           <Grid item xs={12}>
             <ResourceActionListContextProvider>
-              <PipelineRunList
-                pipelineRuns={filteredPipelineRunsByType}
-                isLoading={pipelineRuns.all === null}
-                filterFunction={null}
-                permissions={pipelineRunPermissions}
-              />
+              <FilterContextProvider
+                entityID={`PIPELINE_RUN_LIST_BRANCH_DETAILS::${getDefaultNamespace()}`}
+                matchFunctions={matchFunctions}
+                saveToLocalStorage
+              >
+                <PipelineRunList
+                  pipelineRuns={pipelineRuns.all}
+                  isLoading={pipelineRuns.all === null}
+                  permissions={pipelineRunPermissions}
+                  pipelineRunTypes={[
+                    PIPELINE_TYPES.ALL,
+                    PIPELINE_TYPES.REVIEW,
+                    PIPELINE_TYPES.BUILD,
+                  ]}
+                  filterControls={[FILTER_CONTROLS.PIPELINE_TYPE, FILTER_CONTROLS.STATUS]}
+                />
+              </FilterContextProvider>
             </ResourceActionListContextProvider>
           </Grid>
         </Grid>

src/k8s/groups/Tekton/PipelineRun/utils/createAutotestRunnerPipelineRunInstance/index.ts

@@ -44,7 +44,7 @@ export const DynamicDataContextProvider: React.FC = ({ children }) => {
     () => ({
       codemieQuickLink: {
         data: codemieQuickLink,
-        isLoading: codemieQuickLink === null,
+        isLoading: codemieQuickLink === null && !codemieQuickLinkError,
         error: codemieQuickLinkError,
       },
       codemie: {