From dc780bd694a58e6ab4622defc23457e59ebc67e0 Mon Sep 17 00:00:00 2001 From: lprabhu <> Date: Tue, 25 Jul 2023 13:53:17 +0530 Subject: [PATCH] Handled Add pipeline Radio button validation issue --- .../components/import/import-submit-utils.ts | 2 +- .../import/pipeline/PipelineTemplate.tsx | 35 +++++++++++++++++-- .../repository/repository-form-utils.ts | 6 +++- 3 files changed, 39 insertions(+), 4 deletions(-) diff --git a/frontend/packages/dev-console/src/components/import/import-submit-utils.ts b/frontend/packages/dev-console/src/components/import/import-submit-utils.ts index af815a896f1..ac583fc32d3 100644 --- a/frontend/packages/dev-console/src/components/import/import-submit-utils.ts +++ b/frontend/packages/dev-console/src/components/import/import-submit-utils.ts @@ -711,7 +711,7 @@ export const createOrUpdateResources = async ( return createDevfileResources(formData, dryRun, appResources, generatedImageStreamName); } - if (pipeline.type === PipelineType.PAC) { + if (pipeline.type === PipelineType.PAC && formData?.pipeline?.enabled) { const pacRepository = formData?.pac?.repository; const labels = formData?.labels; const repo = await createRepositoryResources(pacRepository, namespace, labels, dryRun); diff --git a/frontend/packages/pipelines-plugin/src/components/import/pipeline/PipelineTemplate.tsx b/frontend/packages/pipelines-plugin/src/components/import/pipeline/PipelineTemplate.tsx index 248ad4eeb96..9fb9e5260d0 100644 --- a/frontend/packages/pipelines-plugin/src/components/import/pipeline/PipelineTemplate.tsx +++ b/frontend/packages/pipelines-plugin/src/components/import/pipeline/PipelineTemplate.tsx @@ -64,7 +64,7 @@ const PipelineTemplate: React.FC = ({ builderImages, exis const { values: { - import: { recommendedStrategy }, + import: { recommendedStrategy, selectedStrategy }, git: { url, type, ref, dir, secretResource }, pipeline, image, @@ -72,6 +72,7 @@ const PipelineTemplate: React.FC = ({ builderImages, exis resources, }, setFieldValue, + setFieldTouched, } = useFormikContext(); const isDockerStrategy = build.strategy === 'Docker'; @@ -93,14 +94,30 @@ const PipelineTemplate: React.FC = ({ builderImages, exis setFieldValue('pipeline.enabled', true); setFieldValue('pipeline.type', PipelineType.PAC); setFieldValue('pac.repository.gitUrl', url); + setFieldValue('pac.pipelineType', PipelineType.PAC); + setFieldValue('pac.pipelineEnabled', true); } else { setFieldValue('pipeline.enabled', false); setFieldValue('pipeline.type', PipelineType.PIPELINE); setFieldValue('pac.repository.gitUrl', ''); + setFieldValue('pac.pipelineType', PipelineType.PIPELINE); + setFieldValue('pac.pipelineEnabled', false); } setIsPipelineTypeChanged(true); }, [url, type, ref, dir, secretResource, isRepositoryEnabled, setFieldValue]); + React.useEffect(() => { + pipelineStorageRef.current = {}; + }, [selectedStrategy]); + + React.useEffect(() => { + setFieldValue('pac.pipelineEnabled', !!pipeline.enabled); + // Added setTimeout to re-validate yup validation after onchange event + setTimeout(() => { + setFieldTouched('pipeline.enabled', true); + }, 0); + }, [pipeline.enabled, setFieldValue, setFieldTouched]); + React.useEffect(() => { let ignore = false; @@ -118,7 +135,10 @@ const PipelineTemplate: React.FC = ({ builderImages, exis } const fetchPipelineTemplate = async () => { let fetchedPipelines: PipelineKind[] = null; - if (!pipelineStorageRef.current[image.selected]) { + if ( + !pipelineStorageRef.current[image.selected] || + !pipelineStorageRef.current[image.selected]?.length + ) { fetchedPipelines = (await k8sList(PipelineModel, { ns: CLUSTER_PIPELINE_NS, labelSelector, @@ -164,6 +184,7 @@ const PipelineTemplate: React.FC = ({ builderImages, exis } else { setFieldValue('pipeline.template', null); setFieldValue('pipeline.templateSelected', ''); + setFieldValue('pipeline.enabled', false); setNoTemplateForRuntime(true); } }; @@ -215,6 +236,15 @@ const PipelineTemplate: React.FC = ({ builderImages, exis ); } + const onChangePipelineType = (value: PipelineType) => { + setFieldValue('pac.pipelineType', value); + setFieldValue('pipeline.type', value); + // Added setTimeout to re-validate yup validation after onchange event + setTimeout(() => { + setFieldTouched('pipeline.type', true); + }, 0); + }; + return pipeline.template ? ( <> = ({ builderImages, exis onChangePipelineType(val as PipelineType)} options={[ { value: PipelineType.PAC, diff --git a/frontend/packages/pipelines-plugin/src/components/repository/repository-form-utils.ts b/frontend/packages/pipelines-plugin/src/components/repository/repository-form-utils.ts index b3e24ae0ad9..39d3aaacf24 100644 --- a/frontend/packages/pipelines-plugin/src/components/repository/repository-form-utils.ts +++ b/frontend/packages/pipelines-plugin/src/components/repository/repository-form-utils.ts @@ -17,6 +17,7 @@ import { ConfigMapModel, SecretModel } from '@console/internal/models'; import { ConfigMapKind, SecretKind, K8sResourceKind } from '@console/internal/module/k8s'; import { nameRegex } from '@console/shared/src'; import { RepositoryModel } from '../../models'; +import { PipelineType } from '../import/import-types'; import { PAC_TEMPLATE_DEFAULT } from '../pac/const'; import { PIPELINERUN_TEMPLATE_NAMESPACE } from '../pipelines/const'; import { RepositoryRuntimes, gitProviderTypesHosts } from './consts'; @@ -106,7 +107,10 @@ export const pipelinesAccessTokenValidationSchema = (t: TFunction) => export const importFlowRepositoryValidationSchema = (t: TFunction) => { return yup.object().shape({ - repository: pipelinesAccessTokenValidationSchema(t), + repository: yup.object().when(['pipelineType', 'pipelineEnabled'], { + is: (pipelineType, pipelineEnabled) => pipelineType === PipelineType.PAC && pipelineEnabled, + then: pipelinesAccessTokenValidationSchema(t), + }), }); };