Task/rhoaieng 12667 tech debt cleanup duplicate code in pipelines co

frontend/src/__tests__/cypress/cypress/pages/pipelines/pipelineVersionImportModal.ts

@@ -14,19 +14,19 @@ 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() {
     return this.findFooter().findByRole('button', { name: 'Upload', hidden: true });
   }
 
   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() {

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>
   );
 };
 

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;

frontend/src/concepts/pipelines/content/import/PipelineImportBase.tsx

@@ -0,0 +1,201 @@
+import * as React from 'react';
+import {
+  Alert,
+  Button,
+  Form,
+  FormGroup,
+  Modal,
+  Stack,
+  StackItem,
+  TextArea,
+  TextInput,
+} from '@patternfly/react-core';
+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 useDebounceCallback from '~/utilities/useDebounceCallback';
+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: (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 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);
+      debouncedCheckForDuplicateName(value);
+    },
+    [debouncedCheckForDuplicateName, 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;