Fix devfile catalog flow

frontend/packages/dev-console/src/components/import/GitImportForm.tsx

@@ -8,6 +8,7 @@ import PipelineSection from '@console/pipelines-plugin/src/components/import/pip
 import { FormBody, FormFooter } from '@console/shared/src/components/form-utils';
 import AdvancedSection from './advanced/AdvancedSection';
 import AppSection from './app/AppSection';
+import DevfileStrategySection from './devfile/DevfileStrategySection';
 import GitSection from './git/GitSection';
 import { GitImportFormProps, GitTypes } from './import-types';
 import ImportStrategySection from './ImportStrategySection';
@@ -28,9 +29,14 @@ const GitImportForm: React.FC<FormikProps<FormikValues> & GitImportFormProps> =
  const searchParams = new URLSearchParams(window.location.search);
  const gitRepoUrl = searchParams.get('gitRepo');
  const formType = searchParams.get('formType');
+ const importType = searchParams.get('importType');
  const {
  git: { validated, gitType },
  } = values;
+ const showFullForm =
+ importType === 'devfile' ||
+ (validated !== ValidatedOptions.default && gitType !== GitTypes.invalid);
+
  return (
  <form onSubmit={handleSubmit} data-test-id="import-git-form">
  <FormBody>
@@ -42,10 +48,15 @@ const GitImportForm: React.FC<FormikProps<FormikValues> & GitImportFormProps> =
  }
  }
  formType={formType}
+ importType={importType}
  />
- {validated !== ValidatedOptions.default && gitType !== GitTypes.invalid && (
+ {showFullForm && (
  <>
- <ImportStrategySection builderImages={builderImages} />
+ {importType === 'devfile' ? (
+ <DevfileStrategySection />
+ ) : (
+ <ImportStrategySection builderImages={builderImages} />
+ )}
  <AppSection
  project={values.project}
  noProjectsAvailable={projects.loaded && _.isEmpty(projects.data)}

frontend/packages/dev-console/src/components/import/SourceToImageForm.tsx

@@ -23,11 +23,13 @@ const SourceToImageForm: React.FC<FormikProps<FormikValues> & SourceToImageFormP
  projects,
 }) => {
  const { t } = useTranslation();
+ const searchParams = new URLSearchParams(window.location.search);
+ const imageStreamName = searchParams.get('imagestream');
  return (
  <form onSubmit={handleSubmit}>
  <FormBody>
  <BuilderSection builderImages={builderImages} />
- <GitSection showSample builderImages={builderImages} />
+ <GitSection showSample builderImages={builderImages} imageStreamName={imageStreamName} />
  <AppSection
  project={values.project}
  noProjectsAvailable={projects.loaded && _.isEmpty(projects.data)}

frontend/packages/dev-console/src/components/import/builder/BuilderSection.tsx

@@ -41,17 +41,13 @@ const BuilderSection: React.FC<ImageSectionProps> = ({ builderImages, existingPi
  );
 
  React.useEffect(() => {
- if (builderImages && recommendedStrategy?.type !== ImportStrategy.S2I) {
- strategies.filter((s) => {
- if (s.type === ImportStrategy.S2I) {
- setFieldValue('image.isRecommending', true);
- setFieldValue('import.selectedStrategy.detectedCustomData', s.detectedCustomData);
- handleBuilderImageSelection(s.detectedCustomData);
- return true;
- }
- return false;
- });
-
+ if (builderImages && recommendedStrategy && recommendedStrategy.type !== ImportStrategy.S2I) {
+ const s2iStrategy = strategies.find((s) => s.type === ImportStrategy.S2I);
+ if (s2iStrategy) {
+ setFieldValue('image.isRecommending', true);
+ setFieldValue('import.selectedStrategy.detectedCustomData', s2iStrategy.detectedCustomData);
+ handleBuilderImageSelection(s2iStrategy.detectedCustomData);
+ }
  image.selected
  ? setFieldValue('import.strategyChanged', true)
  : setFieldValue('import.strategyChanged', false);

frontend/packages/dev-console/src/components/import/devfile/DevfileStrategySection.tsx

@@ -11,7 +11,7 @@ import DevfileInfo from './DevfileInfo';
 
 const DevfileStrategySection: React.FC = () => {
  const { t } = useTranslation();
- const { values, setFieldValue } = useFormikContext<FormikValues>();
+ const { values, setFieldValue, setFieldTouched } = useFormikContext<FormikValues>();
  const {
  import: { showEditImportStrategy, strategies, recommendedStrategy },
  git: { url, type, ref, dir, secretResource },
@@ -22,20 +22,19 @@ const DevfileStrategySection: React.FC = () => {
  const selectedSample = useSelectedDevfileSample();
  const [validated, setValidated] = React.useState<ValidatedOptions>(ValidatedOptions.default);
  const searchParams = new URLSearchParams(window.location.search);
- const gitRepoUrl = searchParams.get('gitRepo');
- const formType = searchParams.get('formType');
+ const importType = searchParams.get('importType');
 
  const devfileInfo = React.useMemo(() => {
  let info;
- if (devfile.devfileContent) {
+ if (selectedSample) info = selectedSample;
+ else if (devfile.devfileContent) {
  const devfileJSON = safeYAMLToJS(devfile.devfileContent);
  info = {
  displayName: devfileJSON.metadata?.name || 'Devfile',
  tags: devfileJSON.metadata?.version ? [devfileJSON.metadata.version] : [],
  iconClass: devfileJSON.metadata?.name ? `icon-${devfileJSON.metadata?.name}` : '',
  };
  }
- if (selectedSample) info = selectedSample;
  return info;
  }, [selectedSample, devfile]);
 
@@ -51,7 +50,7 @@ const DevfileStrategySection: React.FC = () => {
  setFieldValue('devfile.devfileHasError', false);
  setValidated(ValidatedOptions.success);
  }
- }, [devfile, dir, ref, secretResource, setFieldValue, type, url]);
+ }, [devfile.devfilePath, dir, ref, secretResource, setFieldValue, type, url]);
 
  const helpText = React.useMemo(() => {
  if (validated === ValidatedOptions.success) {
@@ -66,32 +65,39 @@ const DevfileStrategySection: React.FC = () => {
  }, [t, validated]);
 
  React.useEffect(() => {
- if (recommendedStrategy?.type !== ImportStrategy.DEVFILE) {
- strategies.filter((s) => {
- if (s.type === ImportStrategy.DEVFILE) {
- setFieldValue('import.selectedStrategy.detectedFiles', s.detectedFiles);
- setFieldValue('devfile.devfilePath', s.detectedFiles[0]);
- setFieldValue('docker.dockerfilePath', 'Dockerfile');
- handleDevfileChange();
- validated === ValidatedOptions.success
- ? setFieldValue('import.strategyChanged', true)
- : setFieldValue('import.strategyChanged', false);
- return true;
- }
- return false;
- });
+ if (
+ importType !== 'devfile' &&
+ recommendedStrategy &&
+ recommendedStrategy.type !== ImportStrategy.DEVFILE
+ ) {
+ const devfileStrategy = strategies.find((s) => s.type === ImportStrategy.DEVFILE);
+ if (devfileStrategy) {
+ setFieldValue('import.selectedStrategy.detectedFiles', devfileStrategy.detectedFiles);
+ setFieldValue('devfile.devfilePath', devfileStrategy.detectedFiles?.[0]);
+ setFieldValue('docker.dockerfilePath', 'Dockerfile');
+ handleDevfileChange();
+ validated === ValidatedOptions.success
+ ? setFieldValue('import.strategyChanged', true)
+ : setFieldValue('import.strategyChanged', false);
+ }
+ setFieldTouched('devfile.devfilePath', true);
  }
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [recommendedStrategy, setFieldValue, strategies]);
 
+ React.useEffect(() => {
+ importType === 'devfile' && devfile.devfilePath && handleDevfileChange();
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [devfile.devfilePath, importType]);
+
  return (
  <>
  {devfileParseError && (
  <Alert isInline variant="danger" title={t('devconsole~Import is not possible.')}>
  {devfileParseError}
  </Alert>
  )}
- {showEditImportStrategy && (
+ {showEditImportStrategy && importType !== 'devfile' && (
  <FormSection>
  <InputField
  type={TextInputTypes.text}
@@ -107,7 +113,6 @@ const DevfileStrategySection: React.FC = () => {
  ? setFieldValue('import.strategyChanged', true)
  : setFieldValue('import.strategyChanged', false);
  }}
- isDisabled={formType === 'sample' && !!gitRepoUrl}
  required
  />
  </FormSection>

frontend/packages/dev-console/src/components/import/devfile/devfileHooks.ts

@@ -1,12 +1,11 @@
 import * as React from 'react';
 import { FormikValues, useFormikContext } from 'formik';
 import { useTranslation } from 'react-i18next';
-import { getGitService, GitProvider } from '@console/git-service';
 import { coFetchJSON } from '@console/internal/co-fetch';
 import { getLimitsDataFromResource } from '@console/shared/src';
 import { SAMPLE_APPLICATION_GROUP } from '../../../const';
 import { DevfileSuggestedResources } from '../import-types';
-import { createComponentName, detectGitType } from '../import-validation-utils';
+import { createComponentName } from '../import-validation-utils';
 import { DevfileSample } from './devfile-types';
 
 export const suffixSlash = (val: string) => (val.endsWith('/') ? val : `${val}/`);
@@ -102,33 +101,34 @@ export const useDevfileSource = () => {
  const devfileSourceUrl = searchParams.get('gitRepo');
  const devfileName = searchParams.get('devfileName');
  const formType = searchParams.get('formType');
- const { setFieldValue, setFieldTouched } = useFormikContext<FormikValues>();
+ const { values, setFieldValue, setFieldTouched } = useFormikContext<FormikValues>();
+ const {
+ import: { recommendedStrategy },
+ devfile,
+ } = values;
 
  React.useEffect(() => {
- if (devfileSourceUrl) {
- const gitType = detectGitType(devfileSourceUrl);
- // TODO: ODC-6250 - GitTypes is not compatibily to git service type GitProvider
- const gitService = getGitService(devfileSourceUrl, (gitType as any) as GitProvider);
+ if (devfileSourceUrl && !devfile.devfileContent) {
  setFieldValue('devfile.devfileSourceUrl', devfileSourceUrl);
- gitService
- .getDevfileContent()
- .then((contents) => setFieldValue('devfile.devfileContent', contents))
- .catch(() => {
- setFieldValue('devfile.devfileContent', null);
- setFieldValue('devfile.devfileHasError', true);
- });
-
- setFieldValue('git.url', devfileSourceUrl);
- setFieldTouched('git.url');
-
+ setFieldValue('devfile.devfilePath', recommendedStrategy?.detectedFiles?.[0]);
+ setFieldValue('docker.dockerfilePath', 'Dockerfile');
  if (formType === 'sample') {
  setFieldValue('name', createComponentName(devfileName));
  setFieldValue('application.initial', SAMPLE_APPLICATION_GROUP);
  setFieldValue('application.name', SAMPLE_APPLICATION_GROUP);
  setFieldValue('application.selectedKey', SAMPLE_APPLICATION_GROUP);
  }
  }
- }, [devfileSourceUrl, devfileName, formType, setFieldValue, setFieldTouched]);
+ }, [
+ devfileSourceUrl,
+ devfileName,
+ formType,
+ setFieldValue,
+ setFieldTouched,
+ recommendedStrategy,
+ devfile.devfileContents,
+ devfile.devfileContent,
+ ]);
 };
 
 export const useSelectedDevfileSample = () => {

frontend/packages/dev-console/src/components/import/git/DockerSection.tsx

@@ -9,7 +9,7 @@ import FormSection from '../section/FormSection';
 
 const DockerSection: React.FC = () => {
  const { t } = useTranslation();
- const { values, setFieldValue } = useFormikContext<FormikValues>();
+ const { values, setFieldValue, setFieldTouched } = useFormikContext<FormikValues>();
  const {
  import: { showEditImportStrategy, strategies, recommendedStrategy },
  git: { url, type, ref, dir, secretResource },
@@ -51,19 +51,17 @@ const DockerSection: React.FC = () => {
  }, [t, validated]);
 
  React.useEffect(() => {
- if (recommendedStrategy?.type !== ImportStrategy.DOCKERFILE) {
- strategies.filter((s) => {
- if (s.type === ImportStrategy.DOCKERFILE) {
- setFieldValue('import.selectedStrategy.detectedFiles', s.detectedFiles);
- setFieldValue('docker.dockerfilePath', s.detectedFiles[0]);
- handleDockerfileChange();
- validated === ValidatedOptions.success
- ? setFieldValue('import.strategyChanged', true)
- : setFieldValue('import.strategyChanged', false);
- return true;
- }
- return false;
- });
+ if (recommendedStrategy && recommendedStrategy.type !== ImportStrategy.DOCKERFILE) {
+ const dockerfileStrategy = strategies.find((s) => s.type === ImportStrategy.DOCKERFILE);
+ if (dockerfileStrategy) {
+ setFieldValue('import.selectedStrategy.detectedFiles', dockerfileStrategy.detectedFiles);
+ setFieldValue('docker.dockerfilePath', dockerfileStrategy.detectedFiles?.[0]);
+ handleDockerfileChange();
+ validated === ValidatedOptions.success
+ ? setFieldValue('import.strategyChanged', true)
+ : setFieldValue('import.strategyChanged', false);
+ }
+ setFieldTouched('docker.dockerfilePath', true);
  }
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [recommendedStrategy, setFieldValue, strategies]);