From ea2516cc0f382146f6e326d5137e80c4e54f11c8 Mon Sep 17 00:00:00 2001 From: Gage Krumbach Date: Mon, 7 Oct 2024 14:20:14 -0500 Subject: [PATCH] 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; resetData: () => void; submitAction: () => Promise; - checkForDuplicateName: DebouncedFunc<(value: string) => Promise>; + checkForDuplicateName: (value: string) => Promise; children?: React.ReactNode; }; @@ -74,14 +74,24 @@ const PipelineImportBase: React.FC = ({ [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 = ({ 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 = ({ navigate(pipelineVersionDetailsRoute(namespace, pipeline.pipeline_id, versionId)); } } - onClose(pipeline); }, [api, namespace, redirectAfterImport, navigate, onClose], ); @@ -67,24 +67,21 @@ const PipelineImportModal: React.FC = ({ ); }, [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 = ({ 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 || '';