From 1108c3aafc08d84cdd1ad95f23ccb46789dc38ab Mon Sep 17 00:00:00 2001
From: Gage Krumbach <gkrumbach@gmail.com>
Date: Thu, 3 Oct 2024 10:13:40 -0500
Subject: [PATCH 1/7] Remove duplication in pipeline import modal

---
 .../content/import/PipelineImportBase.tsx     | 191 +++++++++++++
 .../content/import/PipelineImportModal.tsx    | 250 ++++--------------
 .../import/PipelineVersionImportModal.tsx     | 236 ++++-------------
 .../content/import/useImportModalData.ts      |  21 +-
 4 files changed, 302 insertions(+), 396 deletions(-)
 create mode 100644 frontend/src/concepts/pipelines/content/import/PipelineImportBase.tsx

diff --git a/frontend/src/concepts/pipelines/content/import/PipelineImportBase.tsx b/frontend/src/concepts/pipelines/content/import/PipelineImportBase.tsx
new file mode 100644
index 0000000000..fcde8b3528
--- /dev/null
+++ b/frontend/src/concepts/pipelines/content/import/PipelineImportBase.tsx
@@ -0,0 +1,191 @@
+import * as React from 'react';
+import {
+  Alert,
+  Button,
+  Form,
+  FormGroup,
+  Modal,
+  Stack,
+  StackItem,
+  TextArea,
+  TextInput,
+} from '@patternfly/react-core';
+import { DebouncedFunc } from 'lodash-es';
+import { usePipelinesAPI } from '~/concepts/pipelines/context';
+import { PipelineKFv2, PipelineVersionKFv2 } from '~/concepts/pipelines/kfTypes';
+import { getDisplayNameFromK8sResource } from '~/concepts/k8s/utils';
+import { DuplicateNameHelperText } from '~/concepts/pipelines/content/DuplicateNameHelperText';
+import {
+  PIPELINE_IMPORT_ARGO_ERROR_TEXT,
+  PIPELINE_ARGO_ERROR,
+} from '~/concepts/pipelines/content/const';
+import { UpdateObjectAtPropAndValue } from '~/pages/projects/types';
+import { PipelineUploadOption, extractKindFromPipelineYAML } from './utils';
+import PipelineUploadRadio from './PipelineUploadRadio';
+import { PipelineImportData } from './useImportModalData';
+
+export type PipelineImportBaseProps = {
+  title: string;
+  submitButtonText: string;
+  onClose: (
+    result?: PipelineKFv2 | PipelineVersionKFv2,
+    currentPipeline?: PipelineKFv2 | null,
+  ) => void;
+  data: PipelineImportData;
+  setData: UpdateObjectAtPropAndValue<PipelineImportData>;
+  resetData: () => void;
+  submitAction: () => Promise<PipelineKFv2 | PipelineVersionKFv2>;
+  checkForDuplicateName: DebouncedFunc<(value: string) => Promise<boolean>>;
+  children?: React.ReactNode;
+};
+
+const PipelineImportBase: React.FC<PipelineImportBaseProps> = ({
+  title,
+  submitButtonText,
+  onClose,
+  data,
+  setData,
+  resetData,
+  submitAction,
+  checkForDuplicateName,
+  children,
+}) => {
+  const { project, apiAvailable } = usePipelinesAPI();
+  const [importing, setImporting] = React.useState(false);
+  const [error, setError] = React.useState<Error | undefined>();
+  const { name, description, fileContents, pipelineUrl, uploadOption } = data;
+  const [hasDuplicateName, setHasDuplicateName] = React.useState(false);
+  const isArgoWorkflow = extractKindFromPipelineYAML(fileContents) === 'Workflow';
+
+  const isImportButtonDisabled =
+    !apiAvailable ||
+    importing ||
+    !name ||
+    (uploadOption === PipelineUploadOption.URL_IMPORT ? !pipelineUrl : !fileContents);
+
+  const onBeforeClose = React.useCallback(
+    (result?: PipelineKFv2 | PipelineVersionKFv2) => {
+      onClose(result, data.pipeline);
+      setImporting(false);
+      setError(undefined);
+      resetData();
+      setHasDuplicateName(false);
+    },
+    [onClose, resetData, data.pipeline],
+  );
+
+  const handleNameChange = React.useCallback(
+    async (value: string) => {
+      setHasDuplicateName(false);
+      setData('name', value);
+      const isDuplicate = await checkForDuplicateName(value);
+      setHasDuplicateName(!!isDuplicate);
+    },
+    [checkForDuplicateName, setData],
+  );
+
+  const onSubmit = () => {
+    setImporting(true);
+    setError(undefined);
+
+    if (uploadOption === PipelineUploadOption.FILE_UPLOAD && isArgoWorkflow) {
+      setImporting(false);
+      setError(new Error(PIPELINE_IMPORT_ARGO_ERROR_TEXT));
+    } else {
+      submitAction()
+        .then((result) => {
+          onBeforeClose(result);
+        })
+        .catch((e) => {
+          setImporting(false);
+          setError(e);
+        });
+    }
+  };
+
+  return (
+    <Modal
+      title={title}
+      isOpen
+      onClose={() => onBeforeClose()}
+      actions={[
+        <Button
+          key="import-button"
+          data-testid="import-button"
+          variant="primary"
+          isDisabled={isImportButtonDisabled}
+          isLoading={importing}
+          onClick={onSubmit}
+        >
+          {submitButtonText}
+        </Button>,
+        <Button key="cancel-button" variant="secondary" onClick={() => onBeforeClose()}>
+          Cancel
+        </Button>,
+      ]}
+      variant="medium"
+      data-testid="import-pipeline-modal"
+    >
+      <Form>
+        <Stack hasGutter>
+          <StackItem>
+            <FormGroup label="Project" fieldId="project-name">
+              {getDisplayNameFromK8sResource(project)}
+            </FormGroup>
+          </StackItem>
+          {children}
+          <StackItem>
+            <FormGroup label="Pipeline name" isRequired fieldId="pipeline-name">
+              <TextInput
+                isRequired
+                type="text"
+                id="pipeline-name"
+                data-testid="pipeline-name"
+                name="pipeline-name"
+                value={name}
+                onChange={(_e, value) => handleNameChange(value)}
+              />
+              {hasDuplicateName && <DuplicateNameHelperText name={name} />}
+            </FormGroup>
+          </StackItem>
+          <StackItem>
+            <FormGroup label="Pipeline description" fieldId="pipeline-description">
+              <TextArea
+                type="text"
+                id="pipeline-description"
+                data-testid="pipeline-description"
+                name="pipeline-description"
+                value={description}
+                onChange={(_e, value) => setData('description', value)}
+              />
+            </FormGroup>
+          </StackItem>
+          <StackItem>
+            <PipelineUploadRadio
+              fileContents={fileContents}
+              setFileContents={(value) => setData('fileContents', value)}
+              pipelineUrl={pipelineUrl}
+              setPipelineUrl={(url) => setData('pipelineUrl', url)}
+              uploadOption={uploadOption}
+              setUploadOption={(option) => setData('uploadOption', option)}
+            />
+          </StackItem>
+          {error && (
+            <StackItem>
+              <Alert
+                data-testid="import-modal-error"
+                title={isArgoWorkflow ? PIPELINE_ARGO_ERROR : 'Error creating pipeline'}
+                isInline
+                variant="danger"
+              >
+                {error.message}
+              </Alert>
+            </StackItem>
+          )}
+        </Stack>
+      </Form>
+    </Modal>
+  );
+};
+
+export default PipelineImportBase;
diff --git a/frontend/src/concepts/pipelines/content/import/PipelineImportModal.tsx b/frontend/src/concepts/pipelines/content/import/PipelineImportModal.tsx
index 0e19c7c0bb..9dc5255e1e 100644
--- a/frontend/src/concepts/pipelines/content/import/PipelineImportModal.tsx
+++ b/frontend/src/concepts/pipelines/content/import/PipelineImportModal.tsx
@@ -1,32 +1,14 @@
+/* eslint-disable camelcase */
 import * as React from 'react';
 import { useNavigate } from 'react-router-dom';
-
-import {
-  Alert,
-  Button,
-  Form,
-  FormGroup,
-  Modal,
-  Stack,
-  StackItem,
-  TextArea,
-  TextInput,
-} from '@patternfly/react-core';
-
 import { usePipelinesAPI } from '~/concepts/pipelines/context';
-import { usePipelineImportModalData } from '~/concepts/pipelines/content/import/useImportModalData';
 import { PipelineKFv2 } from '~/concepts/pipelines/kfTypes';
-import { getDisplayNameFromK8sResource } from '~/concepts/k8s/utils';
-import { DuplicateNameHelperText } from '~/concepts/pipelines/content/DuplicateNameHelperText';
-import { getNameEqualsFilter } from '~/concepts/pipelines/utils';
-import useDebounceCallback from '~/utilities/useDebounceCallback';
 import { pipelineVersionDetailsRoute } from '~/routes';
-import {
-  PIPELINE_ARGO_ERROR,
-  PIPELINE_IMPORT_ARGO_ERROR_TEXT,
-} from '~/concepts/pipelines/content/const';
-import PipelineUploadRadio from './PipelineUploadRadio';
-import { PipelineUploadOption, extractKindFromPipelineYAML } from './utils';
+import useDebounceCallback from '~/utilities/useDebounceCallback';
+import { getNameEqualsFilter } from '~/concepts/pipelines/utils';
+import { usePipelineImportModalData } from './useImportModalData';
+import PipelineImportBase from './PipelineImportBase';
+import { PipelineUploadOption } from './utils';
 
 type PipelineImportModalProps = {
   onClose: (pipeline?: PipelineKFv2) => void;
@@ -38,50 +20,52 @@ const PipelineImportModal: React.FC<PipelineImportModalProps> = ({
   onClose,
 }) => {
   const navigate = useNavigate();
-  const { project, api, apiAvailable, namespace } = usePipelinesAPI();
-  const [importing, setImporting] = React.useState(false);
-  const [error, setError] = React.useState<Error | undefined>();
-  const [{ name, description, fileContents, pipelineUrl, uploadOption }, setData, resetData] =
-    usePipelineImportModalData();
-  const [hasDuplicateName, setHasDuplicateName] = React.useState(false);
-  const isArgoWorkflow = extractKindFromPipelineYAML(fileContents) === 'Workflow';
+  const { api, namespace } = usePipelinesAPI();
+  const [modalData, setData, resetData] = usePipelineImportModalData();
 
-  const isImportButtonDisabled =
-    !apiAvailable ||
-    importing ||
-    !name ||
-    (uploadOption === PipelineUploadOption.URL_IMPORT ? !pipelineUrl : !fileContents);
+  const handleClose = React.useCallback(
+    async (pipeline?: PipelineKFv2) => {
+      if (pipeline && redirectAfterImport) {
+        const { pipeline_versions: versions } = await api.listPipelineVersions(
+          {},
+          pipeline.pipeline_id,
+          {
+            pageSize: 1,
+          },
+        );
+        const versionId = versions?.[0].pipeline_version_id;
 
-  const onBeforeClose = React.useCallback(
-    (pipeline?: PipelineKFv2) => {
+        if (versionId) {
+          navigate(pipelineVersionDetailsRoute(namespace, pipeline.pipeline_id, versionId));
+        }
+      }
       onClose(pipeline);
-      setImporting(false);
-      setError(undefined);
-      resetData();
-      setHasDuplicateName(false);
     },
-    [onClose, resetData],
+    [api, namespace, redirectAfterImport, navigate, onClose],
   );
 
-  const onSubmitSuccess = React.useCallback(
-    async (pipeline: PipelineKFv2) => {
-      onBeforeClose(pipeline);
-
-      const { pipeline_versions: versions } = await api.listPipelineVersions(
-        {},
-        pipeline.pipeline_id,
-        {
-          pageSize: 1,
+  const submitAction = React.useCallback(() => {
+    const { name, description, fileContents, pipelineUrl, uploadOption } = modalData;
+    if (uploadOption === PipelineUploadOption.FILE_UPLOAD) {
+      return api.uploadPipeline({}, name, description, fileContents);
+    }
+    return api.createPipelineAndVersion(
+      {},
+      {
+        pipeline: {
+          display_name: name,
+          description,
         },
-      );
-      const versionId = versions?.[0].pipeline_version_id;
-
-      if (redirectAfterImport && versionId) {
-        navigate(pipelineVersionDetailsRoute(namespace, pipeline.pipeline_id, versionId));
-      }
-    },
-    [api, namespace, redirectAfterImport, navigate, onBeforeClose],
-  );
+        pipeline_version: {
+          display_name: name,
+          description,
+          package_url: {
+            pipeline_url: pipelineUrl,
+          },
+        },
+      },
+    );
+  }, [api, modalData]);
 
   const checkForDuplicateName = useDebounceCallback(
     React.useCallback(
@@ -93,149 +77,27 @@ const PipelineImportModal: React.FC<PipelineImportModalProps> = ({
           );
 
           if (duplicatePipelines?.length) {
-            setHasDuplicateName(true);
+            return true;
           }
         }
+        return false;
       },
       [api],
     ),
     500,
   );
 
-  const onSubmit = () => {
-    setImporting(true);
-    setError(undefined);
-
-    if (uploadOption === PipelineUploadOption.FILE_UPLOAD) {
-      if (isArgoWorkflow) {
-        setImporting(false);
-        setError(new Error(PIPELINE_IMPORT_ARGO_ERROR_TEXT));
-      } else {
-        api
-          .uploadPipeline({}, name, description, fileContents)
-          .then(onSubmitSuccess)
-          .catch((e) => {
-            setImporting(false);
-            setError(e);
-          });
-      }
-    } else {
-      api
-        .createPipelineAndVersion(
-          {},
-          {
-            pipeline: {
-              /* eslint-disable camelcase */
-              display_name: name,
-              description,
-            },
-            pipeline_version: {
-              display_name: name,
-              description,
-              package_url: {
-                pipeline_url: pipelineUrl,
-              },
-              /* eslint-enable camelcase */
-            },
-          },
-        )
-        .then(onSubmitSuccess)
-        .catch((e) => {
-          setImporting(false);
-          setError(e);
-        });
-    }
-  };
-
   return (
-    <Modal
+    <PipelineImportBase
       title="Import pipeline"
-      isOpen
-      onClose={() => onBeforeClose()}
-      actions={[
-        <Button
-          key="import-button"
-          data-testid="import-button"
-          variant="primary"
-          isDisabled={isImportButtonDisabled}
-          isLoading={importing}
-          onClick={onSubmit}
-        >
-          Import pipeline
-        </Button>,
-        <Button key="cancel-button" variant="secondary" onClick={() => onBeforeClose()}>
-          Cancel
-        </Button>,
-      ]}
-      variant="medium"
-      data-testid="import-pipeline-modal"
-    >
-      <Form>
-        <Stack hasGutter>
-          <StackItem>
-            <FormGroup label="Project" fieldId="project-name">
-              {getDisplayNameFromK8sResource(project)}
-            </FormGroup>
-          </StackItem>
-          <StackItem>
-            <FormGroup label="Pipeline name" isRequired fieldId="pipeline-name">
-              <TextInput
-                isRequired
-                type="text"
-                id="pipeline-name"
-                data-testid="pipeline-name"
-                name="pipeline-name"
-                value={name}
-                onChange={(_e, value) => {
-                  setHasDuplicateName(false);
-                  setData('name', value);
-                  checkForDuplicateName(value);
-                }}
-              />
-
-              {hasDuplicateName && <DuplicateNameHelperText name={name} />}
-            </FormGroup>
-          </StackItem>
-          <StackItem>
-            <FormGroup label="Pipeline description" fieldId="pipeline-description">
-              <TextArea
-                isRequired
-                type="text"
-                id="pipeline-description"
-                data-testid="pipeline-description"
-                name="pipeline-description"
-                value={description}
-                onChange={(_e, value) => setData('description', value)}
-              />
-            </FormGroup>
-          </StackItem>
-          <StackItem>
-            <PipelineUploadRadio
-              fileContents={fileContents}
-              setFileContents={(data) => setData('fileContents', data)}
-              pipelineUrl={pipelineUrl}
-              setPipelineUrl={(url) => setData('pipelineUrl', url)}
-              uploadOption={uploadOption}
-              setUploadOption={(option) => {
-                setData('uploadOption', option);
-              }}
-            />
-          </StackItem>
-          {error && (
-            <StackItem>
-              <Alert
-                data-testid="import-modal-error"
-                title={isArgoWorkflow ? PIPELINE_ARGO_ERROR : 'Error creating pipeline'}
-                isInline
-                variant="danger"
-              >
-                {error.message}
-              </Alert>
-            </StackItem>
-          )}
-        </Stack>
-      </Form>
-    </Modal>
+      submitButtonText="Import pipeline"
+      onClose={handleClose}
+      data={modalData}
+      setData={setData}
+      resetData={resetData}
+      submitAction={submitAction}
+      checkForDuplicateName={checkForDuplicateName}
+    />
   );
 };
 
diff --git a/frontend/src/concepts/pipelines/content/import/PipelineVersionImportModal.tsx b/frontend/src/concepts/pipelines/content/import/PipelineVersionImportModal.tsx
index 5614c3428a..a79544f956 100644
--- a/frontend/src/concepts/pipelines/content/import/PipelineVersionImportModal.tsx
+++ b/frontend/src/concepts/pipelines/content/import/PipelineVersionImportModal.tsx
@@ -1,33 +1,14 @@
+/* eslint-disable camelcase */
 import * as React from 'react';
-import {
-  Alert,
-  Button,
-  Form,
-  FormGroup,
-  Modal,
-  Stack,
-  StackItem,
-  TextArea,
-  TextInput,
-} from '@patternfly/react-core';
+import { FormGroup, StackItem } from '@patternfly/react-core';
 import { usePipelinesAPI } from '~/concepts/pipelines/context';
-import { usePipelineVersionImportModalData } from '~/concepts/pipelines/content/import/useImportModalData';
 import { PipelineKFv2, PipelineVersionKFv2 } from '~/concepts/pipelines/kfTypes';
 import PipelineSelector from '~/concepts/pipelines/content/pipelineSelector/PipelineSelector';
-import { getDisplayNameFromK8sResource } from '~/concepts/k8s/utils';
-import { DuplicateNameHelperText } from '~/concepts/pipelines/content/DuplicateNameHelperText';
-import { getNameEqualsFilter } from '~/concepts/pipelines/utils';
 import useDebounceCallback from '~/utilities/useDebounceCallback';
-import {
-  PIPELINE_ARGO_ERROR,
-  PIPELINE_IMPORT_ARGO_ERROR_TEXT,
-} from '~/concepts/pipelines/content/const';
-import {
-  PipelineUploadOption,
-  extractKindFromPipelineYAML,
-  generatePipelineVersionName,
-} from './utils';
-import PipelineUploadRadio from './PipelineUploadRadio';
+import { getNameEqualsFilter } from '~/concepts/pipelines/utils';
+import { generatePipelineVersionName, PipelineUploadOption } from './utils';
+import { usePipelineVersionImportModalData } from './useImportModalData';
+import PipelineImportBase from './PipelineImportBase';
 
 type PipelineVersionImportModalProps = {
   existingPipeline?: PipelineKFv2 | null;
@@ -38,193 +19,72 @@ const PipelineVersionImportModal: React.FC<PipelineVersionImportModalProps> = ({
   existingPipeline,
   onClose,
 }) => {
-  const { project, api, apiAvailable } = usePipelinesAPI();
-  const [importing, setImporting] = React.useState(false);
-  const [error, setError] = React.useState<Error | undefined>();
-  const [hasDuplicateName, setHasDuplicateName] = React.useState(false);
-  const [
-    { name, description, pipeline, fileContents, uploadOption, pipelineUrl },
-    setData,
-    resetData,
-  ] = usePipelineVersionImportModalData(existingPipeline);
-  const isArgoWorkflow = extractKindFromPipelineYAML(fileContents) === 'Workflow';
-
-  const pipelineId = pipeline?.pipeline_id || '';
-  const pipelineName = pipeline?.display_name || '';
-
-  const isImportButtonDisabled =
-    !apiAvailable ||
-    importing ||
-    !name ||
-    !pipeline ||
-    (uploadOption === PipelineUploadOption.URL_IMPORT ? !pipelineUrl : !fileContents);
-
-  const onBeforeClose = (
-    pipelineVersion?: PipelineVersionKFv2,
-    currentPipeline?: PipelineKFv2 | null,
-  ) => {
-    onClose(pipelineVersion, currentPipeline);
-    setImporting(false);
-    setError(undefined);
-    resetData();
-    setHasDuplicateName(false);
-  };
+  const { api } = usePipelinesAPI();
+  const [modalData, setData, resetData] = usePipelineVersionImportModalData(existingPipeline);
 
   const checkForDuplicateName = useDebounceCallback(
     React.useCallback(
       async (value: string) => {
-        if (pipeline?.pipeline_id && value) {
+        if (modalData.pipeline?.pipeline_id && value) {
           const { pipeline_versions: duplicateVersions } = await api.listPipelineVersions(
             {},
-            pipeline.pipeline_id,
+            modalData.pipeline.pipeline_id,
             getNameEqualsFilter(value),
           );
 
           if (duplicateVersions?.length) {
-            setHasDuplicateName(true);
+            return true;
           }
         }
+        return false;
       },
-      [api, pipeline?.pipeline_id],
+      [api, modalData.pipeline?.pipeline_id],
     ),
     500,
   );
 
-  const onSubmit = () => {
-    setImporting(true);
-    setError(undefined);
+  const submitAction = React.useCallback(() => {
+    const { name, description, fileContents, pipelineUrl, uploadOption, pipeline } = modalData;
+    const pipelineId = pipeline?.pipeline_id || '';
 
     if (uploadOption === PipelineUploadOption.FILE_UPLOAD) {
-      if (isArgoWorkflow) {
-        setImporting(false);
-        setError(new Error(PIPELINE_IMPORT_ARGO_ERROR_TEXT));
-      } else {
-        api
-          .uploadPipelineVersion({}, name, description, fileContents, pipelineId)
-          .then((pipelineVersion) => onBeforeClose(pipelineVersion, pipeline))
-          .catch((e) => {
-            setImporting(false);
-            setError(e);
-          });
-      }
-    } else {
-      api
-        .createPipelineVersion({}, pipelineId, {
-          /* eslint-disable camelcase */
-          pipeline_id: pipelineId,
-          display_name: name,
-          description,
-          package_url: {
-            pipeline_url: pipelineUrl,
-          },
-          /* eslint-enable camelcase */
-        })
-        .then((pipelineVersion) => onBeforeClose(pipelineVersion))
-        .catch((e) => {
-          setImporting(false);
-          setError(e);
-        });
+      return api.uploadPipelineVersion({}, name, description, fileContents, pipelineId);
     }
-  };
+    return api.createPipelineVersion({}, pipelineId, {
+      pipeline_id: pipelineId,
+      display_name: name,
+      description,
+      package_url: {
+        pipeline_url: pipelineUrl,
+      },
+    });
+  }, [api, modalData]);
 
   return (
-    <Modal
+    <PipelineImportBase
       title="Upload new version"
-      isOpen
-      onClose={() => onBeforeClose()}
-      actions={[
-        <Button
-          key="import-button"
-          variant="primary"
-          isDisabled={isImportButtonDisabled}
-          isLoading={importing}
-          onClick={onSubmit}
-          data-testid="upload-version-submit-button"
-        >
-          Upload
-        </Button>,
-        <Button key="cancel-button" variant="secondary" onClick={() => onBeforeClose()}>
-          Cancel
-        </Button>,
-      ]}
-      variant="medium"
-      data-testid="upload-version-modal"
+      submitButtonText="Upload"
+      onClose={(result, pipeline) => {
+        onClose(result && 'pipeline_version_id' in result ? result : undefined, pipeline);
+      }}
+      data={modalData}
+      setData={setData}
+      resetData={resetData}
+      submitAction={submitAction}
+      checkForDuplicateName={checkForDuplicateName}
     >
-      <Form>
-        <Stack hasGutter>
-          <StackItem>
-            <FormGroup label="Project">{getDisplayNameFromK8sResource(project)}</FormGroup>
-          </StackItem>
-          <StackItem>
-            <FormGroup label="Pipeline" isRequired fieldId="pipeline-selection">
-              <PipelineSelector
-                selection={pipelineName}
-                onSelect={(newPipeline) => {
-                  setData('pipeline', newPipeline);
-                  setData('name', generatePipelineVersionName(newPipeline));
-                }}
-              />
-            </FormGroup>
-          </StackItem>
-          <StackItem>
-            <FormGroup label="Pipeline version name" isRequired fieldId="pipeline-version-name">
-              <TextInput
-                isRequired
-                type="text"
-                data-testid="pipeline-version-name"
-                id="pipeline-version-name"
-                name="pipeline-version-name"
-                value={name}
-                onChange={(_e, value) => {
-                  setHasDuplicateName(false);
-                  setData('name', value);
-                  checkForDuplicateName(value);
-                }}
-              />
-
-              {hasDuplicateName && <DuplicateNameHelperText name={name} />}
-            </FormGroup>
-          </StackItem>
-          <StackItem>
-            <FormGroup label="Pipeline version description" fieldId="pipeline-version-description">
-              <TextArea
-                isRequired
-                type="text"
-                id="pipeline-version-description"
-                data-testid="pipeline-version-description"
-                name="pipeline-version-description"
-                value={description}
-                onChange={(_e, value) => setData('description', value)}
-              />
-            </FormGroup>
-          </StackItem>
-          <StackItem>
-            <PipelineUploadRadio
-              fileContents={fileContents}
-              setFileContents={(data) => setData('fileContents', data)}
-              pipelineUrl={pipelineUrl}
-              setPipelineUrl={(url) => setData('pipelineUrl', url)}
-              uploadOption={uploadOption}
-              setUploadOption={(option) => {
-                setData('uploadOption', option);
-              }}
-            />
-          </StackItem>
-          {error && (
-            <StackItem>
-              <Alert
-                data-testid="import-modal-error"
-                title={isArgoWorkflow ? PIPELINE_ARGO_ERROR : 'Error creating pipeline'}
-                isInline
-                variant="danger"
-              >
-                {error.message}
-              </Alert>
-            </StackItem>
-          )}
-        </Stack>
-      </Form>
-    </Modal>
+      <StackItem>
+        <FormGroup label="Pipeline" isRequired fieldId="pipeline-selection">
+          <PipelineSelector
+            selection={modalData.pipeline?.display_name || ''}
+            onSelect={(newPipeline) => {
+              setData('pipeline', newPipeline);
+              setData('name', generatePipelineVersionName(newPipeline));
+            }}
+          />
+        </FormGroup>
+      </StackItem>
+    </PipelineImportBase>
   );
 };
 
diff --git a/frontend/src/concepts/pipelines/content/import/useImportModalData.ts b/frontend/src/concepts/pipelines/content/import/useImportModalData.ts
index 682bd4f3ff..31b276bd74 100644
--- a/frontend/src/concepts/pipelines/content/import/useImportModalData.ts
+++ b/frontend/src/concepts/pipelines/content/import/useImportModalData.ts
@@ -6,36 +6,29 @@ import {
 import { PipelineKFv2 } from '~/concepts/pipelines/kfTypes';
 import useGenericObjectState, { GenericObjectState } from '~/utilities/useGenericObjectState';
 
-type PipelineModalData = {
+export type PipelineImportData = {
   name: string;
   description: string;
   uploadOption: PipelineUploadOption;
   fileContents: string;
   pipelineUrl: string;
+  pipeline: PipelineKFv2 | null;
 };
 
-export const usePipelineImportModalData = (): GenericObjectState<PipelineModalData> =>
-  useGenericObjectState<PipelineModalData>({
+export const usePipelineImportModalData = (): GenericObjectState<PipelineImportData> =>
+  useGenericObjectState<PipelineImportData>({
     name: '',
     description: '',
     uploadOption: PipelineUploadOption.FILE_UPLOAD,
     fileContents: '',
     pipelineUrl: '',
+    pipeline: null,
   });
 
-type PipelineVersionModalData = {
-  name: string;
-  description: string;
-  pipeline: PipelineKFv2 | null;
-  uploadOption: PipelineUploadOption;
-  fileContents: string;
-  pipelineUrl: string;
-};
-
 export const usePipelineVersionImportModalData = (
   existingPipeline?: PipelineKFv2 | null,
-): GenericObjectState<PipelineVersionModalData> => {
-  const createDataState = useGenericObjectState<PipelineVersionModalData>({
+): GenericObjectState<PipelineImportData> => {
+  const createDataState = useGenericObjectState<PipelineImportData>({
     name: React.useMemo(() => generatePipelineVersionName(existingPipeline), [existingPipeline]),
     description: '',
     pipeline: existingPipeline ?? null,

From d8d0146cc2b3c470d9b22c3fa8d027ef09645cd9 Mon Sep 17 00:00:00 2001
From: Gage Krumbach <gkrumbach@gmail.com>
Date: Thu, 3 Oct 2024 11:04:16 -0500
Subject: [PATCH 2/7] Remove duplicate code in pipeline run table toolbar

---
 .../compareRuns/CompareRunTableToolbar.tsx    |  83 ++------------
 .../pipelineRun/PipelineRunTableToolbar.tsx   |  82 ++------------
 .../PipelineRunTableToolbarBase.tsx           | 101 ++++++++++++++++++
 3 files changed, 113 insertions(+), 153 deletions(-)
 create mode 100644 frontend/src/concepts/pipelines/content/tables/pipelineRun/PipelineRunTableToolbarBase.tsx

diff --git a/frontend/src/concepts/pipelines/content/compareRuns/CompareRunTableToolbar.tsx b/frontend/src/concepts/pipelines/content/compareRuns/CompareRunTableToolbar.tsx
index 9d9ccb40ea..970fd0712d 100644
--- a/frontend/src/concepts/pipelines/content/compareRuns/CompareRunTableToolbar.tsx
+++ b/frontend/src/concepts/pipelines/content/compareRuns/CompareRunTableToolbar.tsx
@@ -1,35 +1,17 @@
 import * as React from 'react';
-import { Button, TextInput, ToolbarItem } from '@patternfly/react-core';
+import { Button, ToolbarItem } from '@patternfly/react-core';
 import { useNavigate, useParams } from 'react-router';
-import PipelineFilterBar from '~/concepts/pipelines/content/tables/PipelineFilterBar';
-import SimpleSelect from '~/components/SimpleSelect';
 import { FilterOptions } from '~/concepts/pipelines/content/tables/usePipelineFilter';
-import ExperimentSearchInput from '~/concepts/pipelines/content/tables/ExperimentSearchInput';
-import { RuntimeStateKF, runtimeStateLabels } from '~/concepts/pipelines/kfTypes';
-import DashboardDatePicker from '~/components/DashboardDatePicker';
-import PipelineVersionSelect from '~/concepts/pipelines/content/pipelineSelector/CustomPipelineVersionSelect';
-import { PipelineRunVersionsContext } from '~/pages/pipelines/global/runs/PipelineRunVersionsContext';
 import { experimentsBaseRoute, experimentsManageCompareRunsRoute } from '~/routes';
 import { useCompareRuns } from '~/concepts/pipelines/content/compareRuns/CompareRunsContext';
-
-export type FilterProps = Pick<
-  React.ComponentProps<typeof PipelineFilterBar>,
-  'filterData' | 'onFilterUpdate'
->;
+import PipelineRunTableToolbarBase, {
+  FilterProps,
+} from '~/concepts/pipelines/content/tables/pipelineRun/PipelineRunTableToolbarBase';
 
 const CompareRunTableToolbar: React.FC<FilterProps> = ({ ...toolbarProps }) => {
-  const { versions } = React.useContext(PipelineRunVersionsContext);
   const { runs } = useCompareRuns();
   const navigate = useNavigate();
   const { namespace, experimentId } = useParams();
-  /* eslint-disable @typescript-eslint/no-unused-vars */
-  const {
-    [RuntimeStateKF.RUNTIME_STATE_UNSPECIFIED]: unspecifiedState,
-    [RuntimeStateKF.PAUSED]: pausedState,
-    [RuntimeStateKF.CANCELED]: cancelledState,
-    ...statusRuntimeStates
-  } = runtimeStateLabels;
-  /* eslint-enable @typescript-eslint/no-unused-vars */
 
   const options = React.useMemo(
     () => ({
@@ -48,60 +30,7 @@ const CompareRunTableToolbar: React.FC<FilterProps> = ({ ...toolbarProps }) => {
   }
 
   return (
-    <PipelineFilterBar
-      {...toolbarProps}
-      filterOptions={options}
-      filterOptionRenders={{
-        [FilterOptions.NAME]: ({ onChange, ...props }) => (
-          <TextInput
-            {...props}
-            data-testid="search-for-run-name"
-            aria-label="Search for a run name"
-            placeholder="Search..."
-            onChange={(_event, value) => onChange(value)}
-          />
-        ),
-        [FilterOptions.EXPERIMENT]: ({ onChange, value, label }) => (
-          <ExperimentSearchInput
-            onChange={(data) => onChange(data?.value, data?.label)}
-            selected={value && label ? { value, label } : undefined}
-          />
-        ),
-        [FilterOptions.PIPELINE_VERSION]: ({ onChange, label }) => (
-          <PipelineVersionSelect
-            versions={versions}
-            selection={label}
-            onSelect={(version) => onChange(version.pipeline_version_id, version.display_name)}
-          />
-        ),
-        [FilterOptions.CREATED_AT]: ({ onChange, ...props }) => (
-          <DashboardDatePicker
-            {...props}
-            hideError
-            aria-label="Select a start date"
-            onChange={(_, value, date) => {
-              if (date || !value) {
-                onChange(value);
-              }
-            }}
-          />
-        ),
-        [FilterOptions.STATUS]: ({ value, onChange, ...props }) => (
-          <SimpleSelect
-            {...props}
-            value={value}
-            aria-label="Select a status"
-            options={Object.values(statusRuntimeStates).map((v) => ({
-              key: v,
-              label: v,
-            }))}
-            toggleLabel={value}
-            onChange={(selection) => onChange(selection)}
-            dataTestId="runtime-status-dropdown"
-          />
-        ),
-      }}
-    >
+    <PipelineRunTableToolbarBase {...toolbarProps} filterOptions={options}>
       <ToolbarItem>
         <Button
           variant="primary"
@@ -118,7 +47,7 @@ const CompareRunTableToolbar: React.FC<FilterProps> = ({ ...toolbarProps }) => {
           Manage runs
         </Button>
       </ToolbarItem>
-    </PipelineFilterBar>
+    </PipelineRunTableToolbarBase>
   );
 };
 
diff --git a/frontend/src/concepts/pipelines/content/tables/pipelineRun/PipelineRunTableToolbar.tsx b/frontend/src/concepts/pipelines/content/tables/pipelineRun/PipelineRunTableToolbar.tsx
index ac97c5f003..8643b956d7 100644
--- a/frontend/src/concepts/pipelines/content/tables/pipelineRun/PipelineRunTableToolbar.tsx
+++ b/frontend/src/concepts/pipelines/content/tables/pipelineRun/PipelineRunTableToolbar.tsx
@@ -1,23 +1,12 @@
 import * as React from 'react';
-import { TextInput, ToolbarItem } from '@patternfly/react-core';
+import { ToolbarItem } from '@patternfly/react-core';
 import { useParams } from 'react-router-dom';
-import PipelineFilterBar from '~/concepts/pipelines/content/tables/PipelineFilterBar';
-import SimpleSelect from '~/components/SimpleSelect';
 import { FilterOptions } from '~/concepts/pipelines/content/tables/usePipelineFilter';
-import ExperimentSearchInput from '~/concepts/pipelines/content/tables/ExperimentSearchInput';
-import { RuntimeStateKF, runtimeStateLabels } from '~/concepts/pipelines/kfTypes';
-import DashboardDatePicker from '~/components/DashboardDatePicker';
-import PipelineVersionSelect from '~/concepts/pipelines/content/pipelineSelector/CustomPipelineVersionSelect';
-import { PipelineRunVersionsContext } from '~/pages/pipelines/global/runs/PipelineRunVersionsContext';
-
-export type FilterProps = Pick<
-  React.ComponentProps<typeof PipelineFilterBar>,
-  'filterData' | 'onFilterUpdate'
->;
+import PipelineRunTableToolbarBase, { FilterProps } from './PipelineRunTableToolbarBase';
 
 interface PipelineRunTableToolbarProps extends FilterProps {
   actions?: React.ReactNode[];
-  filterOptions?: React.ComponentProps<typeof PipelineFilterBar>['filterOptions'];
+  filterOptions?: React.ComponentProps<typeof PipelineRunTableToolbarBase>['filterOptions'];
 }
 
 const PipelineRunTableToolbar: React.FC<PipelineRunTableToolbarProps> = ({
@@ -25,16 +14,7 @@ const PipelineRunTableToolbar: React.FC<PipelineRunTableToolbarProps> = ({
   filterOptions,
   ...toolbarProps
 }) => {
-  const { versions } = React.useContext(PipelineRunVersionsContext);
   const { experimentId, pipelineVersionId } = useParams();
-  /* eslint-disable @typescript-eslint/no-unused-vars */
-  const {
-    [RuntimeStateKF.RUNTIME_STATE_UNSPECIFIED]: unspecifiedState,
-    [RuntimeStateKF.PAUSED]: pausedState,
-    [RuntimeStateKF.CANCELED]: cancelledState,
-    ...statusRuntimeStates
-  } = runtimeStateLabels;
-  /* eslint-enable @typescript-eslint/no-unused-vars */
 
   const defaultFilterOptions = React.useMemo(
     () => ({
@@ -52,63 +32,13 @@ const PipelineRunTableToolbar: React.FC<PipelineRunTableToolbarProps> = ({
   );
 
   return (
-    <PipelineFilterBar
+    <PipelineRunTableToolbarBase
       {...toolbarProps}
       filterOptions={filterOptions || defaultFilterOptions}
-      filterOptionRenders={{
-        [FilterOptions.NAME]: ({ onChange, ...props }) => (
-          <TextInput
-            {...props}
-            data-testid="search-for-run-name"
-            aria-label="Search for a run name"
-            placeholder="Search..."
-            onChange={(_event, value) => onChange(value)}
-          />
-        ),
-        [FilterOptions.EXPERIMENT]: ({ onChange, value, label }) => (
-          <ExperimentSearchInput
-            onChange={(data) => onChange(data?.value, data?.label)}
-            selected={value && label ? { value, label } : undefined}
-          />
-        ),
-        [FilterOptions.PIPELINE_VERSION]: ({ onChange, label }) => (
-          <PipelineVersionSelect
-            versions={versions}
-            selection={label}
-            onSelect={(version) => onChange(version.pipeline_version_id, version.display_name)}
-          />
-        ),
-        [FilterOptions.CREATED_AT]: ({ onChange, ...props }) => (
-          <DashboardDatePicker
-            {...props}
-            hideError
-            aria-label="Select a start date"
-            onChange={(_, value, date) => {
-              if (date || !value) {
-                onChange(value);
-              }
-            }}
-          />
-        ),
-        [FilterOptions.STATUS]: ({ value, onChange, ...props }) => (
-          <SimpleSelect
-            {...props}
-            value={value ?? ''}
-            aria-label="Select a status"
-            options={Object.values(statusRuntimeStates).map((v) => ({
-              key: v,
-              label: v,
-            }))}
-            onChange={(v) => onChange(v)}
-            dataTestId="runtime-status-dropdown"
-          />
-        ),
-      }}
-    >
-      {actions?.map((action, index) => (
+      actions={actions?.map((action, index) => (
         <ToolbarItem key={index}>{action}</ToolbarItem>
       ))}
-    </PipelineFilterBar>
+    />
   );
 };
 
diff --git a/frontend/src/concepts/pipelines/content/tables/pipelineRun/PipelineRunTableToolbarBase.tsx b/frontend/src/concepts/pipelines/content/tables/pipelineRun/PipelineRunTableToolbarBase.tsx
new file mode 100644
index 0000000000..98ec2f55ba
--- /dev/null
+++ b/frontend/src/concepts/pipelines/content/tables/pipelineRun/PipelineRunTableToolbarBase.tsx
@@ -0,0 +1,101 @@
+import * as React from 'react';
+import { TextInput } from '@patternfly/react-core';
+import PipelineFilterBar from '~/concepts/pipelines/content/tables/PipelineFilterBar';
+import SimpleSelect from '~/components/SimpleSelect';
+import { FilterOptions } from '~/concepts/pipelines/content/tables/usePipelineFilter';
+import ExperimentSearchInput from '~/concepts/pipelines/content/tables/ExperimentSearchInput';
+import { RuntimeStateKF, runtimeStateLabels } from '~/concepts/pipelines/kfTypes';
+import DashboardDatePicker from '~/components/DashboardDatePicker';
+import PipelineVersionSelect from '~/concepts/pipelines/content/pipelineSelector/CustomPipelineVersionSelect';
+import { PipelineRunVersionsContext } from '~/pages/pipelines/global/runs/PipelineRunVersionsContext';
+
+export type FilterProps = Pick<
+  React.ComponentProps<typeof PipelineFilterBar>,
+  'filterData' | 'onFilterUpdate'
+>;
+
+interface PipelineRunTableToolbarBaseProps extends FilterProps {
+  actions?: React.ReactNode[];
+  filterOptions: React.ComponentProps<typeof PipelineFilterBar>['filterOptions'];
+  children?: React.ReactNode;
+}
+
+const PipelineRunTableToolbarBase: React.FC<PipelineRunTableToolbarBaseProps> = ({
+  actions,
+  filterOptions,
+  children,
+  ...toolbarProps
+}) => {
+  const { versions } = React.useContext(PipelineRunVersionsContext);
+  /* eslint-disable @typescript-eslint/no-unused-vars */
+  const {
+    [RuntimeStateKF.RUNTIME_STATE_UNSPECIFIED]: unspecifiedState,
+    [RuntimeStateKF.PAUSED]: pausedState,
+    [RuntimeStateKF.CANCELED]: cancelledState,
+    ...statusRuntimeStates
+  } = runtimeStateLabels;
+  /* eslint-enable @typescript-eslint/no-unused-vars */
+
+  return (
+    <PipelineFilterBar
+      {...toolbarProps}
+      filterOptions={filterOptions}
+      filterOptionRenders={{
+        [FilterOptions.NAME]: ({ onChange, ...props }) => (
+          <TextInput
+            {...props}
+            data-testid="search-for-run-name"
+            aria-label="Search for a run name"
+            placeholder="Search..."
+            onChange={(_event, value) => onChange(value)}
+          />
+        ),
+        [FilterOptions.EXPERIMENT]: ({ onChange, value, label }) => (
+          <ExperimentSearchInput
+            onChange={(data) => onChange(data?.value, data?.label)}
+            selected={value && label ? { value, label } : undefined}
+          />
+        ),
+        [FilterOptions.PIPELINE_VERSION]: ({ onChange, label }) => (
+          <PipelineVersionSelect
+            versions={versions}
+            selection={label}
+            onSelect={(version) => onChange(version.pipeline_version_id, version.display_name)}
+          />
+        ),
+        [FilterOptions.CREATED_AT]: ({ onChange, ...props }) => (
+          <DashboardDatePicker
+            {...props}
+            hideError
+            aria-label="Select a start date"
+            onChange={(_, value, date) => {
+              if (date || !value) {
+                onChange(value);
+              }
+            }}
+          />
+        ),
+        [FilterOptions.STATUS]: ({ value, onChange, ...props }) => (
+          <SimpleSelect
+            {...props}
+            value={value ?? ''}
+            aria-label="Select a status"
+            options={Object.values(statusRuntimeStates).map((v) => ({
+              key: v,
+              label: v,
+            }))}
+            onChange={(v) => onChange(v)}
+            dataTestId="runtime-status-dropdown"
+          />
+        ),
+      }}
+    >
+      {actions?.map((action, index) => (
+        <React.Fragment key={index}>{action}</React.Fragment>
+      ))}
+      {children}
+    </PipelineFilterBar>
+  );
+};
+
+export default PipelineRunTableToolbarBase;

From 933ea30da2765febac405769440ff878660a8b20 Mon Sep 17 00:00:00 2001
From: Gage Krumbach <gkrumbach@gmail.com>
Date: Thu, 3 Oct 2024 11:24:42 -0500
Subject: [PATCH 3/7] remove duplicate runs empty state

---
 .../tables/pipelineRun/EmptyRunsState.tsx     | 51 +++++++++++++++++++
 .../compareRuns/ManageRunsPage.tsx            | 41 +++------------
 .../pipelines/global/runs/ActiveRuns.tsx      | 40 +++------------
 3 files changed, 65 insertions(+), 67 deletions(-)
 create mode 100644 frontend/src/concepts/pipelines/content/tables/pipelineRun/EmptyRunsState.tsx

diff --git a/frontend/src/concepts/pipelines/content/tables/pipelineRun/EmptyRunsState.tsx b/frontend/src/concepts/pipelines/content/tables/pipelineRun/EmptyRunsState.tsx
new file mode 100644
index 0000000000..73dcf8c581
--- /dev/null
+++ b/frontend/src/concepts/pipelines/content/tables/pipelineRun/EmptyRunsState.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import {
+  EmptyState,
+  EmptyStateBody,
+  EmptyStateIcon,
+  EmptyStateHeader,
+  EmptyStateFooter,
+  EmptyStateActions,
+  Button,
+} from '@patternfly/react-core';
+import { PlusCircleIcon } from '@patternfly/react-icons';
+
+import { PipelineRunTabTitle } from '~/pages/pipelines/global/runs/types';
+
+interface EmptyRunsStateProps {
+  createRunRoute: string;
+  dataTestId: string;
+}
+
+export const EmptyRunsState: React.FC<EmptyRunsStateProps> = ({ createRunRoute, dataTestId }) => {
+  const navigate = useNavigate();
+
+  return (
+    <EmptyState data-testid={dataTestId}>
+      <EmptyStateHeader
+        titleText="No runs"
+        icon={<EmptyStateIcon icon={PlusCircleIcon} />}
+        headingLevel="h2"
+      />
+
+      <EmptyStateBody>
+        To get started, create a run. Alternatively, go to the{' '}
+        <b>{PipelineRunTabTitle.SCHEDULES}</b> tab and create a schedule to execute recurring runs.
+      </EmptyStateBody>
+
+      <EmptyStateFooter>
+        <EmptyStateActions>
+          <Button
+            data-testid="create-run-button"
+            variant="primary"
+            onClick={() => navigate(createRunRoute)}
+          >
+            Create run
+          </Button>
+        </EmptyStateActions>
+      </EmptyStateFooter>
+    </EmptyState>
+  );
+};
diff --git a/frontend/src/pages/pipelines/global/experiments/compareRuns/ManageRunsPage.tsx b/frontend/src/pages/pipelines/global/experiments/compareRuns/ManageRunsPage.tsx
index 2d7ca7a772..67000c917f 100644
--- a/frontend/src/pages/pipelines/global/experiments/compareRuns/ManageRunsPage.tsx
+++ b/frontend/src/pages/pipelines/global/experiments/compareRuns/ManageRunsPage.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Link, useNavigate, useSearchParams } from 'react-router-dom';
+import { Link, useSearchParams } from 'react-router-dom';
 
 import {
   Bullseye,
@@ -8,14 +8,11 @@ import {
   EmptyStateIcon,
   Spinner,
   EmptyStateHeader,
-  EmptyStateFooter,
-  EmptyStateActions,
-  Button,
   Breadcrumb,
   BreadcrumbItem,
   Truncate,
 } from '@patternfly/react-core';
-import { ExclamationCircleIcon, PlusCircleIcon } from '@patternfly/react-icons';
+import { ExclamationCircleIcon } from '@patternfly/react-icons';
 
 import { usePipelineActiveRunsTable } from '~/concepts/pipelines/content/tables/pipelineRun/usePipelineRunTable';
 import { CompareRunsSearchParam } from '~/concepts/pipelines/content/types';
@@ -31,10 +28,10 @@ import usePipelineFilter, {
   FilterOptions,
 } from '~/concepts/pipelines/content/tables/usePipelineFilter';
 import { ExperimentKFv2 } from '~/concepts/pipelines/kfTypes';
-import { PipelineRunTabTitle } from '~/pages/pipelines/global/runs';
 import PipelineRunVersionsContextProvider from '~/pages/pipelines/global/runs/PipelineRunVersionsContext';
 import { ExperimentContext } from '~/pages/pipelines/global/experiments/ExperimentContext';
 import { getDisplayNameFromK8sResource } from '~/concepts/k8s/utils';
+import { EmptyRunsState } from '~/concepts/pipelines/content/tables/pipelineRun/EmptyRunsState';
 import { ManageRunsTable } from './ManageRunsTable';
 
 interface ManageRunsPageInternalProps {
@@ -42,7 +39,6 @@ interface ManageRunsPageInternalProps {
 }
 
 export const ManageRunsPageInternal: React.FC<ManageRunsPageInternalProps> = ({ experiment }) => {
-  const navigate = useNavigate();
   const [searchParams] = useSearchParams();
   const { namespace, project } = usePipelinesAPI();
   const [[{ items: runs, totalSize }, loaded, error], { initialLoaded, ...tableProps }] =
@@ -80,33 +76,10 @@ export const ManageRunsPageInternal: React.FC<ManageRunsPageInternalProps> = ({
 
   if (loaded && totalSize === 0 && !tableProps.filter) {
     return (
-      <EmptyState data-testid="runs-empty-state">
-        <EmptyStateHeader
-          titleText="No runs"
-          icon={<EmptyStateIcon icon={PlusCircleIcon} />}
-          headingLevel="h2"
-        />
-
-        <EmptyStateBody>
-          To get started, create a run. Alternatively, go to the{' '}
-          <b>{PipelineRunTabTitle.SCHEDULES}</b> tab and create a schedule to execute recurring
-          runs.
-        </EmptyStateBody>
-
-        <EmptyStateFooter>
-          <EmptyStateActions>
-            <Button
-              data-testid="create-run-button"
-              variant="primary"
-              onClick={() =>
-                navigate(experimentsCreateRunRoute(namespace, experiment.experiment_id))
-              }
-            >
-              Create run
-            </Button>
-          </EmptyStateActions>
-        </EmptyStateFooter>
-      </EmptyState>
+      <EmptyRunsState
+        createRunRoute={experimentsCreateRunRoute(namespace, experiment.experiment_id)}
+        dataTestId="runs-empty-state"
+      />
     );
   }
 
diff --git a/frontend/src/pages/pipelines/global/runs/ActiveRuns.tsx b/frontend/src/pages/pipelines/global/runs/ActiveRuns.tsx
index 3dd0439b01..51d411e033 100644
--- a/frontend/src/pages/pipelines/global/runs/ActiveRuns.tsx
+++ b/frontend/src/pages/pipelines/global/runs/ActiveRuns.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
 
 import {
   Bullseye,
@@ -8,20 +8,17 @@ import {
   EmptyStateIcon,
   Spinner,
   EmptyStateHeader,
-  EmptyStateFooter,
-  EmptyStateActions,
-  Button,
 } from '@patternfly/react-core';
-import { CubesIcon, ExclamationCircleIcon, PlusCircleIcon } from '@patternfly/react-icons';
+import { CubesIcon, ExclamationCircleIcon } from '@patternfly/react-icons';
 
 import PipelineRunTable from '~/concepts/pipelines/content/tables/pipelineRun/PipelineRunTable';
 import { usePipelineActiveRunsTable } from '~/concepts/pipelines/content/tables/pipelineRun/usePipelineRunTable';
 import { createRunRoute } from '~/routes';
 import { useContextExperimentArchived } from '~/pages/pipelines/global/experiments/ExperimentContext';
+import { EmptyRunsState } from '~/concepts/pipelines/content/tables/pipelineRun/EmptyRunsState';
 import { PipelineRunTabTitle, PipelineRunType } from './types';
 
 export const ActiveRuns: React.FC = () => {
-  const navigate = useNavigate();
   const { namespace, experimentId, pipelineVersionId, pipelineId } = useParams();
   const [[{ items: runs, totalSize }, loaded, error], { initialLoaded, ...tableProps }] =
     usePipelineActiveRunsTable({ experimentId, pipelineVersionId });
@@ -70,33 +67,10 @@ export const ActiveRuns: React.FC = () => {
 
   if (loaded && totalSize === 0 && !tableProps.filter) {
     return (
-      <EmptyState data-testid="active-runs-empty-state">
-        <EmptyStateHeader
-          titleText="No runs"
-          icon={<EmptyStateIcon icon={PlusCircleIcon} />}
-          headingLevel="h2"
-        />
-
-        <EmptyStateBody>
-          To get started, create a run. Alternatively, go to the{' '}
-          <b>{PipelineRunTabTitle.SCHEDULES}</b> tab and create a schedule to execute recurring
-          runs.
-        </EmptyStateBody>
-
-        <EmptyStateFooter>
-          <EmptyStateActions>
-            <Button
-              data-testid="create-run-button"
-              variant="primary"
-              onClick={() =>
-                navigate(createRunRoute(namespace, experimentId, pipelineId, pipelineVersionId))
-              }
-            >
-              Create run
-            </Button>
-          </EmptyStateActions>
-        </EmptyStateFooter>
-      </EmptyState>
+      <EmptyRunsState
+        createRunRoute={createRunRoute(namespace, experimentId, pipelineId, pipelineVersionId)}
+        dataTestId="active-runs-empty-state"
+      />
     );
   }
 

From 0caa338c82858b39f242d6c722706111ac045364 Mon Sep 17 00:00:00 2001
From: Gage Krumbach <gkrumbach@gmail.com>
Date: Thu, 3 Oct 2024 15:45:48 -0500
Subject: [PATCH 4/7] remove large duplicates in breadcrumbs

---
 .../compareRuns/ManageRunsTable.tsx           |  5 +-
 .../PipelineVersionCreateRunPage.tsx          | 26 ++-----
 .../PipelineVersionDetailsBreadcrumb.tsx      | 32 +++++++++
 ...pelineVersionDuplicateRecurringRunPage.tsx | 38 ++---------
 .../PipelineVersionRecurringRunDetails.tsx    | 39 ++---------
 ...PipelineVersionRecurringRunsBreadcrumb.tsx | 31 +++++++++
 .../pipelines/PipelineVersionRunDetails.tsx   | 26 ++-----
 .../global/pipelines/PipelineVersionRuns.tsx  | 67 +++++++------------
 8 files changed, 105 insertions(+), 159 deletions(-)
 create mode 100644 frontend/src/pages/pipelines/global/pipelines/PipelineVersionDetailsBreadcrumb.tsx
 create mode 100644 frontend/src/pages/pipelines/global/pipelines/PipelineVersionRecurringRunsBreadcrumb.tsx

diff --git a/frontend/src/pages/pipelines/global/experiments/compareRuns/ManageRunsTable.tsx b/frontend/src/pages/pipelines/global/experiments/compareRuns/ManageRunsTable.tsx
index 333e0ff748..7d84a016cd 100644
--- a/frontend/src/pages/pipelines/global/experiments/compareRuns/ManageRunsTable.tsx
+++ b/frontend/src/pages/pipelines/global/experiments/compareRuns/ManageRunsTable.tsx
@@ -9,13 +9,12 @@ import DashboardEmptyTableView from '~/concepts/dashboard/DashboardEmptyTableVie
 import { pipelineRunColumns } from '~/concepts/pipelines/content/tables/columns';
 import PipelineRunTable from '~/concepts/pipelines/content/tables/pipelineRun/PipelineRunTable';
 import PipelineRunTableRow from '~/concepts/pipelines/content/tables/pipelineRun/PipelineRunTableRow';
-import PipelineRunTableToolbar, {
-  FilterProps,
-} from '~/concepts/pipelines/content/tables/pipelineRun/PipelineRunTableToolbar';
+import PipelineRunTableToolbar from '~/concepts/pipelines/content/tables/pipelineRun/PipelineRunTableToolbar';
 import { FilterOptions } from '~/concepts/pipelines/content/tables/usePipelineFilter';
 import { ExperimentKFv2, PipelineRunKFv2 } from '~/concepts/pipelines/kfTypes';
 import { experimentsCompareRunsRoute } from '~/routes';
 import { usePipelinesAPI } from '~/concepts/pipelines/context';
+import { FilterProps } from '~/concepts/pipelines/content/tables/pipelineRun/PipelineRunTableToolbarBase';
 
 type ManageRunsTableProps = Omit<React.ComponentProps<typeof PipelineRunTable>, 'runType'> & {
   filterProps: FilterProps;
diff --git a/frontend/src/pages/pipelines/global/pipelines/PipelineVersionCreateRunPage.tsx b/frontend/src/pages/pipelines/global/pipelines/PipelineVersionCreateRunPage.tsx
index 8f3ead99eb..cf3d074063 100644
--- a/frontend/src/pages/pipelines/global/pipelines/PipelineVersionCreateRunPage.tsx
+++ b/frontend/src/pages/pipelines/global/pipelines/PipelineVersionCreateRunPage.tsx
@@ -1,16 +1,13 @@
 import React from 'react';
-import { BreadcrumbItem, Truncate } from '@patternfly/react-core';
+import { BreadcrumbItem } from '@patternfly/react-core';
 import { Link } from 'react-router-dom';
 import CreateRunPage from '~/concepts/pipelines/content/createRun/CreateRunPage';
 import { RunTypeOption } from '~/concepts/pipelines/content/createRun/types';
 import { PathProps, PipelineCoreDetailsPageComponent } from '~/concepts/pipelines/content/types';
 import { usePipelinesAPI } from '~/concepts/pipelines/context';
-import {
-  pipelineVersionDetailsRoute,
-  pipelineVersionRecurringRunsRoute,
-  pipelineVersionRunsRoute,
-} from '~/routes';
+import { pipelineVersionRecurringRunsRoute, pipelineVersionRunsRoute } from '~/routes';
 import { PipelineVersionContext } from '~/pages/pipelines/global/pipelines/PipelineVersionContext';
+import PipelineVersionDetailsBreadcrumb from './PipelineVersionDetailsBreadcrumb';
 
 const PipelineVersionCreateRunPageInner: React.FC<PathProps & { runType: RunTypeOption }> = ({
   breadcrumbPath,
@@ -31,22 +28,7 @@ const PipelineVersionCreateRunPageInner: React.FC<PathProps & { runType: RunType
     <CreateRunPage
       breadcrumbPath={[
         ...breadcrumbPath,
-        <BreadcrumbItem isActive style={{ maxWidth: 300 }} key="pipeline-version-details">
-          {version ? (
-            <Link
-              to={pipelineVersionDetailsRoute(
-                namespace,
-                version.pipeline_id,
-                version.pipeline_version_id,
-              )}
-            >
-              {/* TODO: Remove the custom className after upgrading to PFv6 */}
-              <Truncate content={version.display_name} className="truncate-no-min-width" />
-            </Link>
-          ) : (
-            'Loading...'
-          )}
-        </BreadcrumbItem>,
+        <PipelineVersionDetailsBreadcrumb key="pipeline-version-details" />,
         <BreadcrumbItem isActive key="pipeline-version-runs">
           {version ? <Link to={redirectLink}>Runs</Link> : 'Loading...'}
         </BreadcrumbItem>,
diff --git a/frontend/src/pages/pipelines/global/pipelines/PipelineVersionDetailsBreadcrumb.tsx b/frontend/src/pages/pipelines/global/pipelines/PipelineVersionDetailsBreadcrumb.tsx
new file mode 100644
index 0000000000..ddf969ed12
--- /dev/null
+++ b/frontend/src/pages/pipelines/global/pipelines/PipelineVersionDetailsBreadcrumb.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { BreadcrumbItem, Truncate } from '@patternfly/react-core';
+import { Link } from 'react-router-dom';
+import { usePipelinesAPI } from '~/concepts/pipelines/context';
+import { pipelineVersionDetailsRoute } from '~/routes';
+import { PipelineVersionContext } from './PipelineVersionContext';
+
+const PipelineVersionDetailsBreadcrumb: React.FC = () => {
+  const { version } = React.useContext(PipelineVersionContext);
+  const { namespace } = usePipelinesAPI();
+
+  return (
+    <BreadcrumbItem isActive style={{ maxWidth: 300 }}>
+      {version ? (
+        <Link
+          to={pipelineVersionDetailsRoute(
+            namespace,
+            version.pipeline_id,
+            version.pipeline_version_id,
+          )}
+        >
+          {/* TODO: Remove the custom className after upgrading to PFv6 */}
+          <Truncate content={version.display_name} className="truncate-no-min-width" />
+        </Link>
+      ) : (
+        'Loading...'
+      )}
+    </BreadcrumbItem>
+  );
+};
+
+export default PipelineVersionDetailsBreadcrumb;
diff --git a/frontend/src/pages/pipelines/global/pipelines/PipelineVersionDuplicateRecurringRunPage.tsx b/frontend/src/pages/pipelines/global/pipelines/PipelineVersionDuplicateRecurringRunPage.tsx
index db332900b7..abfc5ae97b 100644
--- a/frontend/src/pages/pipelines/global/pipelines/PipelineVersionDuplicateRecurringRunPage.tsx
+++ b/frontend/src/pages/pipelines/global/pipelines/PipelineVersionDuplicateRecurringRunPage.tsx
@@ -1,15 +1,14 @@
 import React from 'react';
-import { BreadcrumbItem, Truncate } from '@patternfly/react-core';
-import { Link } from 'react-router-dom';
 import { PathProps } from '~/concepts/pipelines/content/types';
 import { usePipelinesAPI } from '~/concepts/pipelines/context';
 import {
-  pipelineVersionDetailsRoute,
   pipelineVersionRecurringRunDetailsRoute,
   pipelineVersionRecurringRunsRoute,
 } from '~/routes';
 import DuplicateRecurringRunPage from '~/concepts/pipelines/content/createRun/DuplicateRecurringRunPage';
 import { PipelineVersionContext } from '~/pages/pipelines/global/pipelines/PipelineVersionContext';
+import PipelineVersionDetailsBreadcrumb from './PipelineVersionDetailsBreadcrumb';
+import PipelineVersionRecurringRunsBreadcrumb from './PipelineVersionRecurringRunsBreadcrumb';
 
 const PipelineVersionDuplicateRecurringRunPage: React.FC<PathProps> = ({ breadcrumbPath }) => {
   const { pipeline, version } = React.useContext(PipelineVersionContext);
@@ -19,37 +18,8 @@ const PipelineVersionDuplicateRecurringRunPage: React.FC<PathProps> = ({ breadcr
     <DuplicateRecurringRunPage
       breadcrumbPath={[
         ...breadcrumbPath,
-        <BreadcrumbItem isActive style={{ maxWidth: 300 }} key="pipeline-version-details">
-          {version ? (
-            <Link
-              to={pipelineVersionDetailsRoute(
-                namespace,
-                version.pipeline_id,
-                version.pipeline_version_id,
-              )}
-            >
-              {/* TODO: Remove the custom className after upgrading to PFv6 */}
-              <Truncate content={version.display_name} className="truncate-no-min-width" />
-            </Link>
-          ) : (
-            'Loading...'
-          )}
-        </BreadcrumbItem>,
-        <BreadcrumbItem isActive key="pipeline-version-runs">
-          {version ? (
-            <Link
-              to={pipelineVersionRecurringRunsRoute(
-                namespace,
-                version.pipeline_id,
-                version.pipeline_version_id,
-              )}
-            >
-              Runs
-            </Link>
-          ) : (
-            'Loading...'
-          )}
-        </BreadcrumbItem>,
+        <PipelineVersionDetailsBreadcrumb key="pipeline-version-details" />,
+        <PipelineVersionRecurringRunsBreadcrumb key="pipeline-version-runs" />,
       ]}
       contextPath={pipelineVersionRecurringRunsRoute(
         namespace,
diff --git a/frontend/src/pages/pipelines/global/pipelines/PipelineVersionRecurringRunDetails.tsx b/frontend/src/pages/pipelines/global/pipelines/PipelineVersionRecurringRunDetails.tsx
index 23b8f461ad..06b4d8a173 100644
--- a/frontend/src/pages/pipelines/global/pipelines/PipelineVersionRecurringRunDetails.tsx
+++ b/frontend/src/pages/pipelines/global/pipelines/PipelineVersionRecurringRunDetails.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
-import { BreadcrumbItem, Truncate } from '@patternfly/react-core';
-import { Link } from 'react-router-dom';
 import { PipelineCoreDetailsPageComponent } from '~/concepts/pipelines/content/types';
-import { pipelineVersionDetailsRoute, pipelineVersionRecurringRunsRoute } from '~/routes';
+import { pipelineVersionRecurringRunsRoute } from '~/routes';
 import { usePipelinesAPI } from '~/concepts/pipelines/context';
 import { PipelineVersionContext } from '~/pages/pipelines/global/pipelines/PipelineVersionContext';
 import PipelineRecurringRunDetails from '~/concepts/pipelines/content/pipelinesDetails/pipelineRecurringRun/PipelineRecurringRunDetails';
+import PipelineVersionDetailsBreadcrumb from './PipelineVersionDetailsBreadcrumb';
+import PipelineVersionRecurringRunsBreadcrumb from './PipelineVersionRecurringRunsBreadcrumb';
 
 const PipelineVersionRecurringRunDetails: PipelineCoreDetailsPageComponent = ({
   breadcrumbPath,
@@ -16,37 +16,8 @@ const PipelineVersionRecurringRunDetails: PipelineCoreDetailsPageComponent = ({
     <PipelineRecurringRunDetails
       breadcrumbPath={[
         ...breadcrumbPath,
-        <BreadcrumbItem isActive style={{ maxWidth: 300 }} key="pipeline-version-details">
-          {version ? (
-            <Link
-              to={pipelineVersionDetailsRoute(
-                namespace,
-                version.pipeline_id,
-                version.pipeline_version_id,
-              )}
-            >
-              {/* TODO: Remove the custom className after upgrading to PFv6 */}
-              <Truncate content={version.display_name} className="truncate-no-min-width" />
-            </Link>
-          ) : (
-            'Loading...'
-          )}
-        </BreadcrumbItem>,
-        <BreadcrumbItem isActive key="pipeline-version-runs">
-          {version ? (
-            <Link
-              to={pipelineVersionRecurringRunsRoute(
-                namespace,
-                version.pipeline_id,
-                version.pipeline_version_id,
-              )}
-            >
-              Runs
-            </Link>
-          ) : (
-            'Loading...'
-          )}
-        </BreadcrumbItem>,
+        <PipelineVersionDetailsBreadcrumb key="pipeline-version-details" />,
+        <PipelineVersionRecurringRunsBreadcrumb key="pipeline-version-runs" />,
       ]}
       contextPath={pipelineVersionRecurringRunsRoute(
         namespace,
diff --git a/frontend/src/pages/pipelines/global/pipelines/PipelineVersionRecurringRunsBreadcrumb.tsx b/frontend/src/pages/pipelines/global/pipelines/PipelineVersionRecurringRunsBreadcrumb.tsx
new file mode 100644
index 0000000000..34c65921dc
--- /dev/null
+++ b/frontend/src/pages/pipelines/global/pipelines/PipelineVersionRecurringRunsBreadcrumb.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { BreadcrumbItem } from '@patternfly/react-core';
+import { Link } from 'react-router-dom';
+import { usePipelinesAPI } from '~/concepts/pipelines/context';
+import { pipelineVersionRecurringRunsRoute } from '~/routes';
+import { PipelineVersionContext } from './PipelineVersionContext';
+
+const PipelineVersionRecurringRunsBreadcrumb: React.FC = () => {
+  const { version } = React.useContext(PipelineVersionContext);
+  const { namespace } = usePipelinesAPI();
+
+  return (
+    <BreadcrumbItem isActive>
+      {version ? (
+        <Link
+          to={pipelineVersionRecurringRunsRoute(
+            namespace,
+            version.pipeline_id,
+            version.pipeline_version_id,
+          )}
+        >
+          Runs
+        </Link>
+      ) : (
+        'Loading...'
+      )}
+    </BreadcrumbItem>
+  );
+};
+
+export default PipelineVersionRecurringRunsBreadcrumb;
diff --git a/frontend/src/pages/pipelines/global/pipelines/PipelineVersionRunDetails.tsx b/frontend/src/pages/pipelines/global/pipelines/PipelineVersionRunDetails.tsx
index 1686f80e68..4ee702ef39 100644
--- a/frontend/src/pages/pipelines/global/pipelines/PipelineVersionRunDetails.tsx
+++ b/frontend/src/pages/pipelines/global/pipelines/PipelineVersionRunDetails.tsx
@@ -1,17 +1,14 @@
 import React from 'react';
-import { BreadcrumbItem, Truncate } from '@patternfly/react-core';
+import { BreadcrumbItem } from '@patternfly/react-core';
 import { Link, useParams } from 'react-router-dom';
 import PipelineRunDetails from '~/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunDetails';
 import { PipelineCoreDetailsPageComponent } from '~/concepts/pipelines/content/types';
-import {
-  pipelineVersionArchivedRunsRoute,
-  pipelineVersionDetailsRoute,
-  pipelineVersionRunsRoute,
-} from '~/routes';
+import { pipelineVersionArchivedRunsRoute, pipelineVersionRunsRoute } from '~/routes';
 import { usePipelinesAPI } from '~/concepts/pipelines/context';
 import { PipelineVersionContext } from '~/pages/pipelines/global/pipelines/PipelineVersionContext';
 import usePipelineRunById from '~/concepts/pipelines/apiHooks/usePipelineRunById';
 import { StorageStateKF } from '~/concepts/pipelines/kfTypes';
+import PipelineVersionDetailsBreadcrumb from './PipelineVersionDetailsBreadcrumb';
 
 const PipelineVersionRunDetails: PipelineCoreDetailsPageComponent = ({ breadcrumbPath }) => {
   const { runId } = useParams();
@@ -24,22 +21,7 @@ const PipelineVersionRunDetails: PipelineCoreDetailsPageComponent = ({ breadcrum
     <PipelineRunDetails
       breadcrumbPath={[
         ...breadcrumbPath,
-        <BreadcrumbItem isActive style={{ maxWidth: 300 }} key="pipeline-version-details">
-          {version ? (
-            <Link
-              to={pipelineVersionDetailsRoute(
-                namespace,
-                version.pipeline_id,
-                version.pipeline_version_id,
-              )}
-            >
-              {/* TODO: Remove the custom className after upgrading to PFv6 */}
-              <Truncate content={version.display_name} className="truncate-no-min-width" />
-            </Link>
-          ) : (
-            'Loading...'
-          )}
-        </BreadcrumbItem>,
+        <PipelineVersionDetailsBreadcrumb key="pipeline-version-details" />,
         <BreadcrumbItem isActive key="pipeline-version-runs">
           {version ? (
             <Link
diff --git a/frontend/src/pages/pipelines/global/pipelines/PipelineVersionRuns.tsx b/frontend/src/pages/pipelines/global/pipelines/PipelineVersionRuns.tsx
index 23aa768dc9..9d3a169e98 100644
--- a/frontend/src/pages/pipelines/global/pipelines/PipelineVersionRuns.tsx
+++ b/frontend/src/pages/pipelines/global/pipelines/PipelineVersionRuns.tsx
@@ -1,56 +1,35 @@
 import * as React from 'react';
-import { Breadcrumb, BreadcrumbItem, Truncate } from '@patternfly/react-core';
-import { Outlet, Link } from 'react-router-dom';
+import { Breadcrumb, BreadcrumbItem } from '@patternfly/react-core';
+import { Outlet } from 'react-router-dom';
 import {
   pipelineRunsPageDescription,
   pipelineRunsPageTitle,
 } from '~/pages/pipelines/global/runs/const';
 import PipelineCoreApplicationPage from '~/pages/pipelines/global/PipelineCoreApplicationPage';
-import { pipelinesBaseRoute, pipelineVersionDetailsRoute } from '~/routes';
+import { pipelinesBaseRoute } from '~/routes';
 import { ProjectObjectType } from '~/concepts/design/utils';
 import TitleWithIcon from '~/concepts/design/TitleWithIcon';
 import { PipelineCoreDetailsPageComponent } from '~/concepts/pipelines/content/types';
-import { PipelineVersionContext } from '~/pages/pipelines/global/pipelines/PipelineVersionContext';
-import { usePipelinesAPI } from '~/concepts/pipelines/context';
+import PipelineVersionDetailsBreadcrumb from './PipelineVersionDetailsBreadcrumb';
 
-const PipelineVersionRuns: PipelineCoreDetailsPageComponent = ({ breadcrumbPath }) => {
-  const { namespace } = usePipelinesAPI();
-  const { version } = React.useContext(PipelineVersionContext);
-
-  return (
-    <PipelineCoreApplicationPage
-      title={
-        <TitleWithIcon title={pipelineRunsPageTitle} objectType={ProjectObjectType.pipelineRun} />
-      }
-      description={pipelineRunsPageDescription}
-      getRedirectPath={pipelinesBaseRoute}
-      overrideChildPadding
-      breadcrumb={
-        <Breadcrumb>
-          {breadcrumbPath}
-          <BreadcrumbItem isActive style={{ maxWidth: 300 }}>
-            {version?.display_name ? (
-              <Link
-                to={pipelineVersionDetailsRoute(
-                  namespace,
-                  version.pipeline_id,
-                  version.pipeline_version_id,
-                )}
-              >
-                {/* TODO: Remove the custom className after upgrading to PFv6 */}
-                <Truncate content={version.display_name} className="truncate-no-min-width" />
-              </Link>
-            ) : (
-              'Loading...'
-            )}
-          </BreadcrumbItem>
-          <BreadcrumbItem isActive>Runs</BreadcrumbItem>
-        </Breadcrumb>
-      }
-    >
-      <Outlet />
-    </PipelineCoreApplicationPage>
-  );
-};
+const PipelineVersionRuns: PipelineCoreDetailsPageComponent = ({ breadcrumbPath }) => (
+  <PipelineCoreApplicationPage
+    title={
+      <TitleWithIcon title={pipelineRunsPageTitle} objectType={ProjectObjectType.pipelineRun} />
+    }
+    description={pipelineRunsPageDescription}
+    getRedirectPath={pipelinesBaseRoute}
+    overrideChildPadding
+    breadcrumb={
+      <Breadcrumb>
+        {breadcrumbPath}
+        <PipelineVersionDetailsBreadcrumb />
+        <BreadcrumbItem isActive>Runs</BreadcrumbItem>
+      </Breadcrumb>
+    }
+  >
+    <Outlet />
+  </PipelineCoreApplicationPage>
+);
 
 export default PipelineVersionRuns;

From b3d7f044175649676df7e71b32536ebc2c4d6506 Mon Sep 17 00:00:00 2001
From: Gage Krumbach <gkrumbach@gmail.com>
Date: Thu, 3 Oct 2024 16:20:10 -0500
Subject: [PATCH 5/7] experiment error state duplication

---
 .../experiments/ExperimentLoadingError.tsx    | 28 +++++++++++++++++++
 .../experiments/ActiveExperimentsList.tsx     | 16 ++---------
 .../experiments/ArchivedExperimentsList.tsx   | 16 ++---------
 3 files changed, 34 insertions(+), 26 deletions(-)
 create mode 100644 frontend/src/concepts/pipelines/content/experiments/ExperimentLoadingError.tsx

diff --git a/frontend/src/concepts/pipelines/content/experiments/ExperimentLoadingError.tsx b/frontend/src/concepts/pipelines/content/experiments/ExperimentLoadingError.tsx
new file mode 100644
index 0000000000..84c0c7bc90
--- /dev/null
+++ b/frontend/src/concepts/pipelines/content/experiments/ExperimentLoadingError.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import {
+  Bullseye,
+  EmptyState,
+  EmptyStateBody,
+  EmptyStateHeader,
+  EmptyStateIcon,
+} from '@patternfly/react-core';
+import { ExclamationCircleIcon } from '@patternfly/react-icons';
+
+interface ExperimentLoadingErrorProps {
+  error: Error;
+}
+
+const ExperimentLoadingError: React.FC<ExperimentLoadingErrorProps> = ({ error }) => (
+  <Bullseye>
+    <EmptyState>
+      <EmptyStateHeader
+        titleText="There was an issue loading experiments"
+        icon={<EmptyStateIcon icon={ExclamationCircleIcon} />}
+        headingLevel="h2"
+      />
+      <EmptyStateBody>{error.message}</EmptyStateBody>
+    </EmptyState>
+  </Bullseye>
+);
+
+export default ExperimentLoadingError;
diff --git a/frontend/src/pages/pipelines/global/experiments/ActiveExperimentsList.tsx b/frontend/src/pages/pipelines/global/experiments/ActiveExperimentsList.tsx
index 041d0f2a70..a85fefe928 100644
--- a/frontend/src/pages/pipelines/global/experiments/ActiveExperimentsList.tsx
+++ b/frontend/src/pages/pipelines/global/experiments/ActiveExperimentsList.tsx
@@ -8,29 +8,19 @@ import {
   EmptyStateIcon,
   Spinner,
 } from '@patternfly/react-core';
-import { ExclamationCircleIcon, PlusCircleIcon } from '@patternfly/react-icons';
+import { PlusCircleIcon } from '@patternfly/react-icons';
 import createUsePipelineTable from '~/concepts/pipelines/content/tables/usePipelineTable';
 import { useActiveExperiments } from '~/concepts/pipelines/apiHooks/useExperiments';
 import ActiveExperimentTable from '~/concepts/pipelines/content/tables/experiment/ActiveExperimentTable';
 import CreateExperimentButton from '~/concepts/pipelines/content/experiment/CreateExperimentButton';
+import ExperimentLoadingError from '~/concepts/pipelines/content/experiments/ExperimentLoadingError';
 
 const ActiveExperimentsList: React.FC = () => {
   const [[{ items: experiments, totalSize }, loaded, error], { initialLoaded, ...tableProps }] =
     createUsePipelineTable(useActiveExperiments)();
 
   if (error) {
-    return (
-      <Bullseye>
-        <EmptyState>
-          <EmptyStateHeader
-            titleText="There was an issue loading experiments"
-            icon={<EmptyStateIcon icon={ExclamationCircleIcon} />}
-            headingLevel="h2"
-          />
-          <EmptyStateBody>{error.message}</EmptyStateBody>
-        </EmptyState>
-      </Bullseye>
-    );
+    return <ExperimentLoadingError error={error} />;
   }
 
   if (!loaded && !initialLoaded) {
diff --git a/frontend/src/pages/pipelines/global/experiments/ArchivedExperimentsList.tsx b/frontend/src/pages/pipelines/global/experiments/ArchivedExperimentsList.tsx
index d80cbce505..6772ccdb80 100644
--- a/frontend/src/pages/pipelines/global/experiments/ArchivedExperimentsList.tsx
+++ b/frontend/src/pages/pipelines/global/experiments/ArchivedExperimentsList.tsx
@@ -7,29 +7,19 @@ import {
   EmptyStateIcon,
   Spinner,
 } from '@patternfly/react-core';
-import { CubesIcon, ExclamationCircleIcon } from '@patternfly/react-icons';
+import { CubesIcon } from '@patternfly/react-icons';
 import createUsePipelineTable from '~/concepts/pipelines/content/tables/usePipelineTable';
 import { useArchivedExperiments } from '~/concepts/pipelines/apiHooks/useExperiments';
 import ArchivedExperimentTable from '~/concepts/pipelines/content/tables/experiment/ArchivedExperimentTable';
 import { ExperimentListTabTitle } from '~/pages/pipelines/global/experiments/const';
+import ExperimentLoadingError from '~/concepts/pipelines/content/experiments/ExperimentLoadingError';
 
 const ArchivedExperimentsList: React.FC = () => {
   const [[{ items: experiments, totalSize }, loaded, error], { initialLoaded, ...tableProps }] =
     createUsePipelineTable(useArchivedExperiments)();
 
   if (error) {
-    return (
-      <Bullseye>
-        <EmptyState>
-          <EmptyStateHeader
-            titleText="There was an issue loading experiments"
-            icon={<EmptyStateIcon icon={ExclamationCircleIcon} />}
-            headingLevel="h2"
-          />
-          <EmptyStateBody>{error.message}</EmptyStateBody>
-        </EmptyState>
-      </Bullseye>
-    );
+    return <ExperimentLoadingError error={error} />;
   }
 
   if (!loaded && !initialLoaded) {

From 97281a5180df93484708c69fa2611e295f2d8dca Mon Sep 17 00:00:00 2001
From: Gage Krumbach <gkrumbach@gmail.com>
Date: Mon, 7 Oct 2024 14:20:14 -0500
Subject: [PATCH 6/7] update test IDS

---
 .../pipelines/pipelineVersionImportModal.ts   |  6 ++--
 .../content/import/PipelineImportBase.tsx     | 20 ++++++++---
 .../content/import/PipelineImportModal.tsx    | 33 +++++++++----------
 .../import/PipelineVersionImportModal.tsx     | 33 ++++++++-----------
 4 files changed, 47 insertions(+), 45 deletions(-)

diff --git a/frontend/src/__tests__/cypress/cypress/pages/pipelines/pipelineVersionImportModal.ts b/frontend/src/__tests__/cypress/cypress/pages/pipelines/pipelineVersionImportModal.ts
index cb021172b3..b4e45ac77d 100644
--- a/frontend/src/__tests__/cypress/cypress/pages/pipelines/pipelineVersionImportModal.ts
+++ b/frontend/src/__tests__/cypress/cypress/pages/pipelines/pipelineVersionImportModal.ts
@@ -14,7 +14,7 @@ class PipelineImportModal extends Modal {
   }
 
   find() {
-    return cy.findByTestId('upload-version-modal').parents('div[role="dialog"]');
+    return cy.findByTestId('import-pipeline-modal').parents('div[role="dialog"]');
   }
 
   findSubmitButton() {
@@ -22,11 +22,11 @@ class PipelineImportModal extends Modal {
   }
 
   findVersionNameInput() {
-    return this.find().findByTestId('pipeline-version-name');
+    return this.find().findByTestId('pipeline-name');
   }
 
   findVersionDescriptionInput() {
-    return this.find().findByTestId('pipeline-version-description');
+    return this.find().findByTestId('pipeline-description');
   }
 
   findUploadPipelineInput() {
diff --git a/frontend/src/concepts/pipelines/content/import/PipelineImportBase.tsx b/frontend/src/concepts/pipelines/content/import/PipelineImportBase.tsx
index fcde8b3528..4335b38ae7 100644
--- a/frontend/src/concepts/pipelines/content/import/PipelineImportBase.tsx
+++ b/frontend/src/concepts/pipelines/content/import/PipelineImportBase.tsx
@@ -10,7 +10,6 @@ import {
   TextArea,
   TextInput,
 } from '@patternfly/react-core';
-import { DebouncedFunc } from 'lodash-es';
 import { usePipelinesAPI } from '~/concepts/pipelines/context';
 import { PipelineKFv2, PipelineVersionKFv2 } from '~/concepts/pipelines/kfTypes';
 import { getDisplayNameFromK8sResource } from '~/concepts/k8s/utils';
@@ -20,6 +19,7 @@ import {
   PIPELINE_ARGO_ERROR,
 } from '~/concepts/pipelines/content/const';
 import { UpdateObjectAtPropAndValue } from '~/pages/projects/types';
+import useDebounceCallback from '~/utilities/useDebounceCallback';
 import { PipelineUploadOption, extractKindFromPipelineYAML } from './utils';
 import PipelineUploadRadio from './PipelineUploadRadio';
 import { PipelineImportData } from './useImportModalData';
@@ -35,7 +35,7 @@ export type PipelineImportBaseProps = {
   setData: UpdateObjectAtPropAndValue<PipelineImportData>;
   resetData: () => void;
   submitAction: () => Promise<PipelineKFv2 | PipelineVersionKFv2>;
-  checkForDuplicateName: DebouncedFunc<(value: string) => Promise<boolean>>;
+  checkForDuplicateName: (value: string) => Promise<boolean>;
   children?: React.ReactNode;
 };
 
@@ -74,14 +74,24 @@ const PipelineImportBase: React.FC<PipelineImportBaseProps> = ({
     [onClose, resetData, data.pipeline],
   );
 
+  const debouncedCheckForDuplicateName = useDebounceCallback(
+    React.useCallback(
+      async (value: string) => {
+        const isDuplicate = await checkForDuplicateName(value);
+        setHasDuplicateName(!!isDuplicate);
+      },
+      [checkForDuplicateName],
+    ),
+    500,
+  );
+
   const handleNameChange = React.useCallback(
     async (value: string) => {
       setHasDuplicateName(false);
       setData('name', value);
-      const isDuplicate = await checkForDuplicateName(value);
-      setHasDuplicateName(!!isDuplicate);
+      debouncedCheckForDuplicateName(value);
     },
-    [checkForDuplicateName, setData],
+    [debouncedCheckForDuplicateName, setData],
   );
 
   const onSubmit = () => {
diff --git a/frontend/src/concepts/pipelines/content/import/PipelineImportModal.tsx b/frontend/src/concepts/pipelines/content/import/PipelineImportModal.tsx
index 9dc5255e1e..c02114a693 100644
--- a/frontend/src/concepts/pipelines/content/import/PipelineImportModal.tsx
+++ b/frontend/src/concepts/pipelines/content/import/PipelineImportModal.tsx
@@ -4,7 +4,6 @@ import { useNavigate } from 'react-router-dom';
 import { usePipelinesAPI } from '~/concepts/pipelines/context';
 import { PipelineKFv2 } from '~/concepts/pipelines/kfTypes';
 import { pipelineVersionDetailsRoute } from '~/routes';
-import useDebounceCallback from '~/utilities/useDebounceCallback';
 import { getNameEqualsFilter } from '~/concepts/pipelines/utils';
 import { usePipelineImportModalData } from './useImportModalData';
 import PipelineImportBase from './PipelineImportBase';
@@ -25,6 +24,8 @@ const PipelineImportModal: React.FC<PipelineImportModalProps> = ({
 
   const handleClose = React.useCallback(
     async (pipeline?: PipelineKFv2) => {
+      onClose(pipeline);
+
       if (pipeline && redirectAfterImport) {
         const { pipeline_versions: versions } = await api.listPipelineVersions(
           {},
@@ -39,7 +40,6 @@ const PipelineImportModal: React.FC<PipelineImportModalProps> = ({
           navigate(pipelineVersionDetailsRoute(namespace, pipeline.pipeline_id, versionId));
         }
       }
-      onClose(pipeline);
     },
     [api, namespace, redirectAfterImport, navigate, onClose],
   );
@@ -67,24 +67,21 @@ const PipelineImportModal: React.FC<PipelineImportModalProps> = ({
     );
   }, [api, modalData]);
 
-  const checkForDuplicateName = useDebounceCallback(
-    React.useCallback(
-      async (value: string) => {
-        if (value) {
-          const { pipelines: duplicatePipelines } = await api.listPipelines(
-            {},
-            getNameEqualsFilter(value),
-          );
+  const checkForDuplicateName = React.useCallback(
+    async (value: string) => {
+      if (value) {
+        const { pipelines: duplicatePipelines } = await api.listPipelines(
+          {},
+          getNameEqualsFilter(value),
+        );
 
-          if (duplicatePipelines?.length) {
-            return true;
-          }
+        if (duplicatePipelines?.length) {
+          return true;
         }
-        return false;
-      },
-      [api],
-    ),
-    500,
+      }
+      return false;
+    },
+    [api],
   );
 
   return (
diff --git a/frontend/src/concepts/pipelines/content/import/PipelineVersionImportModal.tsx b/frontend/src/concepts/pipelines/content/import/PipelineVersionImportModal.tsx
index a79544f956..6ab2d3d214 100644
--- a/frontend/src/concepts/pipelines/content/import/PipelineVersionImportModal.tsx
+++ b/frontend/src/concepts/pipelines/content/import/PipelineVersionImportModal.tsx
@@ -4,7 +4,6 @@ import { FormGroup, StackItem } from '@patternfly/react-core';
 import { usePipelinesAPI } from '~/concepts/pipelines/context';
 import { PipelineKFv2, PipelineVersionKFv2 } from '~/concepts/pipelines/kfTypes';
 import PipelineSelector from '~/concepts/pipelines/content/pipelineSelector/PipelineSelector';
-import useDebounceCallback from '~/utilities/useDebounceCallback';
 import { getNameEqualsFilter } from '~/concepts/pipelines/utils';
 import { generatePipelineVersionName, PipelineUploadOption } from './utils';
 import { usePipelineVersionImportModalData } from './useImportModalData';
@@ -22,27 +21,23 @@ const PipelineVersionImportModal: React.FC<PipelineVersionImportModalProps> = ({
   const { api } = usePipelinesAPI();
   const [modalData, setData, resetData] = usePipelineVersionImportModalData(existingPipeline);
 
-  const checkForDuplicateName = useDebounceCallback(
-    React.useCallback(
-      async (value: string) => {
-        if (modalData.pipeline?.pipeline_id && value) {
-          const { pipeline_versions: duplicateVersions } = await api.listPipelineVersions(
-            {},
-            modalData.pipeline.pipeline_id,
-            getNameEqualsFilter(value),
-          );
+  const checkForDuplicateName = React.useCallback(
+    async (value: string) => {
+      if (modalData.pipeline?.pipeline_id && value) {
+        const { pipeline_versions: duplicateVersions } = await api.listPipelineVersions(
+          {},
+          modalData.pipeline.pipeline_id,
+          getNameEqualsFilter(value),
+        );
 
-          if (duplicateVersions?.length) {
-            return true;
-          }
+        if (duplicateVersions?.length) {
+          return true;
         }
-        return false;
-      },
-      [api, modalData.pipeline?.pipeline_id],
-    ),
-    500,
+      }
+      return false;
+    },
+    [api, modalData.pipeline?.pipeline_id],
   );
-
   const submitAction = React.useCallback(() => {
     const { name, description, fileContents, pipelineUrl, uploadOption, pipeline } = modalData;
     const pipelineId = pipeline?.pipeline_id || '';

From 09f885ba0b7a279c791a34c5ab7b70779603c039 Mon Sep 17 00:00:00 2001
From: Gage Krumbach <gkrumbach@gmail.com>
Date: Tue, 15 Oct 2024 11:48:17 -0500
Subject: [PATCH 7/7] fix breadcrumbs

---
 .../global/pipelines/PipelineVersionDetailsBreadcrumb.tsx       | 2 +-
 .../global/pipelines/PipelineVersionRecurringRunsBreadcrumb.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/pages/pipelines/global/pipelines/PipelineVersionDetailsBreadcrumb.tsx b/frontend/src/pages/pipelines/global/pipelines/PipelineVersionDetailsBreadcrumb.tsx
index ddf969ed12..5353e2684b 100644
--- a/frontend/src/pages/pipelines/global/pipelines/PipelineVersionDetailsBreadcrumb.tsx
+++ b/frontend/src/pages/pipelines/global/pipelines/PipelineVersionDetailsBreadcrumb.tsx
@@ -10,7 +10,7 @@ const PipelineVersionDetailsBreadcrumb: React.FC = () => {
   const { namespace } = usePipelinesAPI();
 
   return (
-    <BreadcrumbItem isActive style={{ maxWidth: 300 }}>
+    <BreadcrumbItem showDivider isActive style={{ maxWidth: 300 }}>
       {version ? (
         <Link
           to={pipelineVersionDetailsRoute(
diff --git a/frontend/src/pages/pipelines/global/pipelines/PipelineVersionRecurringRunsBreadcrumb.tsx b/frontend/src/pages/pipelines/global/pipelines/PipelineVersionRecurringRunsBreadcrumb.tsx
index 34c65921dc..d423faa6fe 100644
--- a/frontend/src/pages/pipelines/global/pipelines/PipelineVersionRecurringRunsBreadcrumb.tsx
+++ b/frontend/src/pages/pipelines/global/pipelines/PipelineVersionRecurringRunsBreadcrumb.tsx
@@ -10,7 +10,7 @@ const PipelineVersionRecurringRunsBreadcrumb: React.FC = () => {
   const { namespace } = usePipelinesAPI();
 
   return (
-    <BreadcrumbItem isActive>
+    <BreadcrumbItem showDivider isActive>
       {version ? (
         <Link
           to={pipelineVersionRecurringRunsRoute(