converge import flows

frontend/packages/dev-console/console-extensions.json

@@ -67,7 +67,7 @@
       "id": "import-from-git",
       "groupId": "git-repository",
       "href": "/import/ns/:namespace",
-      "label": "%devconsole~From Git%",
+      "label": "%devconsole~Import from Git%",
       "description": "%devconsole~Import code from your Git repository to be built and deployed%",
       "icon": { "$codeRef": "icons.gitIconSVG" },
       "accessReview": [
@@ -80,25 +80,6 @@
       ]
     }
   },
-  {
-    "type": "dev-console.add/action",
-    "properties": {
-      "id": "import-from-devfile",
-      "groupId": "git-repository",
-      "href": "/import/ns/:namespace?importType=devfile",
-      "label": "%devconsole~From Devfile%",
-      "description": "%devconsole~Import your Devfile from your Git repository to be built and deployed%",
-      "icon": { "$codeRef": "icons.devfileIconSVG" },
-      "accessReview": [
-        { "group": "build.openshift.io", "resource": "buildconfigs", "verb": "create" },
-        { "group": "image.openshift.io", "resource": "imagestreams", "verb": "create" },
-        { "group": "apps", "resource": "deployments", "verb": "create" },
-        { "group": "", "resource": "secrets", "verb": "create" },
-        { "group": "route.openshift.io", "resource": "routes", "verb": "create" },
-        { "group": "", "resource": "services", "verb": "create" }
-      ]
-    }
-  },
   {
     "type": "dev-console.add/action",
     "properties": {
@@ -119,25 +100,6 @@
       ]
     }
   },
-  {
-    "type": "dev-console.add/action",
-    "properties": {
-      "id": "import-from-dockerfile",
-      "groupId": "git-repository",
-      "href": "/import/ns/:namespace?importType=docker",
-      "label": "%devconsole~From Dockerfile%",
-      "description": "%devconsole~Import your Dockerfile from your Git repository to be built and deployed%",
-      "icon": { "$codeRef": "icons.dockerfileIconSVG" },
-      "accessReview": [
-        { "group": "build.openshift.io", "resource": "buildconfigs", "verb": "create" },
-        { "group": "image.openshift.io", "resource": "imagestreams", "verb": "create" },
-        { "group": "apps.openshift.io", "resource": "deploymentconfigs", "verb": "create" },
-        { "group": "", "resource": "secrets", "verb": "create" },
-        { "group": "route.openshift.io", "resource": "routes", "verb": "create" },
-        { "group": "", "resource": "services", "verb": "create" }
-      ]
-    }
-  },
   {
     "type": "dev-console.add/action",
     "properties": {

frontend/packages/dev-console/locales/en/devconsole.json

@@ -5,13 +5,9 @@
   "From Local Machine": "From Local Machine",
   "Samples": "Samples",
   "Create an Application from a code sample": "Create an Application from a code sample",
-  "From Git": "From Git",
+  "Import from Git": "Import from Git",
   "Import code from your Git repository to be built and deployed": "Import code from your Git repository to be built and deployed",
-  "From Devfile": "From Devfile",
-  "Import your Devfile from your Git repository to be built and deployed": "Import your Devfile from your Git repository to be built and deployed",
   "Deploy an existing Image from an Image registry or Image stream tag": "Deploy an existing Image from an Image registry or Image stream tag",
-  "From Dockerfile": "From Dockerfile",
-  "Import your Dockerfile from your Git repository to be built and deployed": "Import your Dockerfile from your Git repository to be built and deployed",
   "Import YAML": "Import YAML",
   "Create resources from their YAML or JSON definitions": "Create resources from their YAML or JSON definitions",
   "All services": "All services",
@@ -38,8 +34,11 @@
   "Project": "Project",
   "Builds": "Builds",
   "Create Service Binding": "Create Service Binding",
+  "From Git": "From Git",
   "Container Image": "Container Image",
   "From Catalog": "From Catalog",
+  "From Dockerfile": "From Dockerfile",
+  "From Devfile": "From Devfile",
   "Helm Charts": "Helm Charts",
   "Edit {{applicationName}}": "Edit {{applicationName}}",
   "Access permissions needed": "Access permissions needed",
@@ -99,7 +98,6 @@
   "Create Devfile Sample": "Create Devfile Sample",
   "Instantiate Template": "Instantiate Template",
   "Select Secret name": "Select Secret name",
-  "Import from Git": "Import from Git",
   "Import from Dockerfile": "Import from Dockerfile",
   "Deploy Image": "Deploy Image",
   "Save": "Save",
@@ -325,29 +323,25 @@
   "Unable to detect the Builder Image.": "Unable to detect the Builder Image.",
   "Select the most appropriate one from the list to continue.": "Select the most appropriate one from the list to continue.",
   "Builder Image version": "Builder Image version",
-  "Builder": "Builder",
   "Sample repository:": "Sample repository:",
   "Create": "Create",
   "The Devfile in your Git repository is invalid.": "The Devfile in your Git repository is invalid.",
   "Import is not possible.": "Import is not possible.",
   "Git repo URL": "Git repo URL",
+  "Devfile Path": "Devfile Path",
+  "Allows the builds to use a different path to locate your Devfile, relative to the Context Dir field": "Allows the builds to use a different path to locate your Devfile, relative to the Context Dir field",
   "Hide advanced Git options": "Hide advanced Git options",
   "Show advanced Git options": "Show advanced Git options",
   "Git reference": "Git reference",
   "Optional branch, tag, or commit.": "Optional branch, tag, or commit.",
   "Context dir": "Context dir",
   "Optional subdirectory for the Application source code, used as a context directory for build.": "Optional subdirectory for the Application source code, used as a context directory for build.",
-  "Dockerfile": "Dockerfile",
   "Dockerfile path": "Dockerfile path",
   "Allows the builds to use a different path to locate your Dockerfile, relative to the Context Dir field.": "Allows the builds to use a different path to locate your Dockerfile, relative to the Context Dir field.",
   "Validating": "Validating",
   "Validated": "Validated",
   "Rate limit exceeded": "Rate limit exceeded",
   "URL is valid but cannot be reached. If this is a private repository, enter a source Secret in advanced Git options": "URL is valid but cannot be reached. If this is a private repository, enter a source Secret in advanced Git options",
-  "No Devfile present, unable to continue.": "No Devfile present, unable to continue.",
-  "Repository URL to build and deploy your code from source.": "Repository URL to build and deploy your code from source.",
-  "Repository URL to build and deploy your code from a Dockerfile.": "Repository URL to build and deploy your code from a Dockerfile.",
-  "Repository URL to build and deploy your code from a Devfile.": "Repository URL to build and deploy your code from a Devfile.",
   "Git": "Git",
   "Git Repo URL": "Git Repo URL",
   "Git type": "Git type",
@@ -381,6 +375,18 @@
   "Import from Devfile": "Import from Devfile",
   "Create Source-to-Image Application": "Create Source-to-Image Application",
   "Create Sample Application": "Create Sample Application",
+  "Multiple import strategies detected": "Multiple import strategies detected",
+  "{{strategy}} detected.": "{{strategy}} detected.",
+  "The Devfile at {{filePath}} is recommended.": "The Devfile at {{filePath}} is recommended.",
+  "The Dockerfile at {{filePath}} is recommended.": "The Dockerfile at {{filePath}} is recommended.",
+  "A Builder Image is recommended.": "A Builder Image is recommended.",
+  "Import strategy changed to {{strategy}}": "Import strategy changed to {{strategy}}",
+  "Unable to detect build type": "Unable to detect build type",
+  "Error: {{loadError}}": "Error: {{loadError}}",
+  "Select a build type below.": "Select a build type below.",
+  "Edit Import Strategy": "Edit Import Strategy",
+  "Revert to recommended": "Revert to recommended",
+  "Import Strategy": "Import Strategy",
   "JAR": "JAR",
   "JAR file": "JAR file",
   "Drag a file here or browse to upload": "Drag a file here or browse to upload",

frontend/packages/dev-console/src/actions/add-resources.tsx

@@ -3,8 +3,6 @@ import {
   GitAltIcon,
   OsImageIcon,
   CatalogIcon,
-  CubeIcon,
-  LayerGroupIcon,
   DatabaseIcon,
   LaptopCodeIcon,
   BoltIcon,
@@ -24,7 +22,7 @@ export const fromGit: AddActionItem = {
   id: 'import-from-git',
   action: createKebabAction(
     // t('devconsole~From Git')
-    'devconsole~From Git',
+    'devconsole~Import from Git',
     <GitAltIcon />,
     ImportOptions.GIT,
     allImportResourceAccess,
@@ -52,28 +50,6 @@ export const fromCatalog: AddActionItem = {
   ),
 };
 
-export const fromDockerfile: AddActionItem = {
-  id: 'import-from-dockerfile',
-  action: createKebabAction(
-    // t('devconsole~From Dockerfile')
-    'devconsole~From Dockerfile',
-    <CubeIcon />,
-    ImportOptions.DOCKERFILE,
-    allImportResourceAccess,
-  ),
-};
-
-export const fromDevfile: AddActionItem = {
-  id: 'import-from-devfile',
-  action: createKebabAction(
-    // t('devconsole~From Devfile')
-    'devconsole~From Devfile',
-    <LayerGroupIcon />,
-    ImportOptions.DEVFILE,
-    allImportResourceAccess,
-  ),
-};
-
 export const fromDatabaseCatalog: AddActionItem = {
   id: 'dev-catalog-databases',
   action: createKebabAction(
@@ -133,8 +109,6 @@ export const addResourceMenu: KebabAction[] = [
   fromSamples,
   fromGit,
   containerImage,
-  fromDockerfile,
-  fromDevfile,
   fromCatalog,
   fromDatabaseCatalog,
   fromOperatorBacked,
@@ -144,21 +118,13 @@ export const addResourceMenu: KebabAction[] = [
   .filter(disabledFilter)
   .map(actionMapper);
 
-export const addGroupResourceMenu: KebabAction[] = [
-  fromGit,
-  containerImage,
-  fromDockerfile,
-  fromDevfile,
-  uploadJarFile,
-]
+export const addGroupResourceMenu: KebabAction[] = [fromGit, containerImage, uploadJarFile]
   .filter(disabledFilter)
   .map(actionMapper);
 
 export const addResourceMenuWithoutCatalog: KebabAction[] = [
   fromGit,
   containerImage,
-  fromDockerfile,
-  fromDevfile,
   fromOperatorBacked,
   uploadJarFile,
 ]

frontend/packages/dev-console/src/components/edit-application/EditApplicationForm.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import { FormikProps, FormikValues } from 'formik';
 import * as _ from 'lodash';
 import { useTranslation } from 'react-i18next';
-import { BuildStrategyType } from '@console/internal/components/build';
 import { PageHeading } from '@console/internal/components/utils';
 import PipelineSection from '@console/pipelines-plugin/src/components/import/pipeline/PipelineSection';
 import { FormFooter, FlexForm, FormBody } from '@console/shared';
@@ -44,22 +43,17 @@ const EditApplicationForm: React.FC<FormikProps<FormikValues> & EditApplicationF
       <PageHeading title={t(getFlowTypePageTitle(flowType))} />
       <FlexForm onSubmit={handleSubmit}>
         <FormBody flexLayout>
-          {flowType === ApplicationFlowType.Git && (
-            <GitSection buildStrategy={BuildStrategyType.Source} builderImages={builderImages} />
-          )}
+          {flowType === ApplicationFlowType.Git && <GitSection builderImages={builderImages} />}
           {flowType === ApplicationFlowType.Dockerfile && (
-            <GitSection buildStrategy={BuildStrategyType.Docker} builderImages={builderImages} />
+            <GitSection builderImages={builderImages} />
           )}
           {flowType === ApplicationFlowType.Git && (
             <BuilderSection
-              image={values.image}
               builderImages={builderImages}
               existingPipeline={appResources?.pipeline?.data}
             />
           )}
-          {flowType === ApplicationFlowType.Dockerfile && (
-            <DockerSection buildStrategy={values.build.strategy} />
-          )}
+          {flowType === ApplicationFlowType.Dockerfile && <DockerSection />}
           {flowType === ApplicationFlowType.JarUpload && <JarSection />}
           {flowType === ApplicationFlowType.Container && <ImageSearchSection />}
           {(flowType === ApplicationFlowType.Container ||

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

@@ -1,15 +1,16 @@
 import * as React from 'react';
+import { ValidatedOptions } from '@patternfly/react-core';
 import { FormikProps, FormikValues } from 'formik';
 import * as _ from 'lodash';
 import { useTranslation } from 'react-i18next';
+import { ImportStrategy } from '@console/git-service/src';
 import PipelineSection from '@console/pipelines-plugin/src/components/import/pipeline/PipelineSection';
 import { FormBody, FormFooter } from '@console/shared/src/components/form-utils';
 import AdvancedSection from './advanced/AdvancedSection';
 import AppSection from './app/AppSection';
-import BuilderSection from './builder/BuilderSection';
-import DockerSection from './git/DockerSection';
 import GitSection from './git/GitSection';
 import { GitImportFormProps } from './import-types';
+import ImportStrategySection from './ImportStrategySection';
 import ResourceSection from './section/ResourceSection';
 
 const GitImportForm: React.FC<FormikProps<FormikValues> & GitImportFormProps> = ({
@@ -27,16 +28,23 @@ const GitImportForm: React.FC<FormikProps<FormikValues> & GitImportFormProps> =
   return (
     <form onSubmit={handleSubmit} data-test-id="import-git-form">
       <FormBody>
-        <GitSection buildStrategy={values.build.strategy} builderImages={builderImages} />
-        <BuilderSection image={values.image} builderImages={builderImages} />
-        <DockerSection buildStrategy={values.build.strategy} />
-        <AppSection
-          project={values.project}
-          noProjectsAvailable={projects.loaded && _.isEmpty(projects.data)}
-        />
-        <ResourceSection />
-        <PipelineSection builderImages={builderImages} />
-        <AdvancedSection values={values} />
+        <GitSection builderImages={builderImages} />
+        {values.git.validated === ValidatedOptions.success && (
+          <>
+            <ImportStrategySection builderImages={builderImages} />
+            <AppSection
+              project={values.project}
+              noProjectsAvailable={projects.loaded && _.isEmpty(projects.data)}
+            />
+            {values.import.selectedStrategy.type !== ImportStrategy.DEVFILE && (
+              <>
+                <ResourceSection />
+                <PipelineSection builderImages={builderImages} />
+                <AdvancedSection values={values} />
+              </>
+            )}
+          </>
+        )}
       </FormBody>
       <FormFooter
         handleReset={handleReset}

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

@@ -1,8 +1,10 @@
 import * as React from 'react';
+import { ValidatedOptions } from '@patternfly/react-core';
 import { Formik, FormikProps } from 'formik';
 import * as _ from 'lodash';
 import { useTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
+import { ImportStrategy } from '@console/git-service/src';
 import { history, AsyncComponent } from '@console/internal/components/utils';
 import { getActiveApplication } from '@console/internal/reducers/ui';
 import { RootState } from '@console/internal/redux';
@@ -78,6 +80,8 @@ const ImportForm: React.FC<ImportFormProps & StateProps> = ({
       showGitType: false,
       secret: '',
       isUrlValidating: false,
+      validated: ValidatedOptions.default,
+      secretResource: {},
     },
     docker: {
       dockerfilePath: 'Dockerfile',
@@ -89,7 +93,20 @@ const ImportForm: React.FC<ImportFormProps & StateProps> = ({
         image: true,
         config: true,
       },
-      strategy: importData.buildStrategy || 'Source',
+      strategy: importData.buildStrategy || 'Devfile',
+    },
+    import: {
+      loaded: false,
+      loadError: null,
+      strategies: [],
+      selectedStrategy: {
+        name: 'Devfile',
+        type: ImportStrategy.DEVFILE,
+        priority: 2,
+        detectedFiles: [],
+      },
+      recommendedStrategy: null,
+      showEditImportStrategy: false,
     },
   };
 
@@ -98,7 +115,7 @@ const ImportForm: React.FC<ImportFormProps & StateProps> = ({
     imageStreams && imageStreams.loaded && normalizeBuilderImages(imageStreams.data);
 
   const handleSubmit = (values, actions) => {
-    const imageStream = builderImages && builderImages[values.image.selected].obj;
+    const imageStream = builderImages && builderImages[values.image.selected]?.obj;
     const createNewProject = projects.loaded && _.isEmpty(projects.data);
     const {
       project: { name: projectName },