Merge pull request #13046 from lokanandaprabhu/feature/OCPBUGS-16693

OCPBUGS-16693, OCPBUGS-13387: Import page create button is disabled due to PAC validation
openshift · Aug 4, 2023 · bd06053 · bd06053
2 parents 60eca68 + dc780bd
commit bd06053
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 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
@@ -710,7 +710,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
@@ -64,14 +64,15 @@ const PipelineTemplate: React.FC<PipelineTemplateProps> = ({ builderImages, exis
 
   const {
     values: {
-      import: { recommendedStrategy },
+      import: { recommendedStrategy, selectedStrategy },
       git: { url, type, ref, dir, secretResource },
       pipeline,
       image,
       build,
       resources,
     },
     setFieldValue,
+    setFieldTouched,
   } = useFormikContext<FormikValues>();
 
   const isDockerStrategy = build.strategy === 'Docker';
@@ -93,14 +94,30 @@ const PipelineTemplate: React.FC<PipelineTemplateProps> = ({ 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<PipelineTemplateProps> = ({ 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<PipelineTemplateProps> = ({ builderImages, exis
       } else {
         setFieldValue('pipeline.template', null);
         setFieldValue('pipeline.templateSelected', '');
+        setFieldValue('pipeline.enabled', false);
         setNoTemplateForRuntime(true);
       }
     };
@@ -215,6 +236,15 @@ const PipelineTemplate: React.FC<PipelineTemplateProps> = ({ 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 ? (
     <>
       <CheckboxField
@@ -226,6 +256,7 @@ const PipelineTemplate: React.FC<PipelineTemplateProps> = ({ builderImages, exis
         <RadioGroupField
           className="odc-pipeline-section-pac__radio-intent"
           name={'pipeline.type'}
+          onChange={(val: string) => 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
@@ -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),
+    }),
   });
 };