Merge pull request #7299 from andrewballantyne/devfile-rework

Devfile Add Flow

Author: openshift-merge-robot

frontend/packages/console-shared/src/utils/sample-utils.ts

@@ -72,6 +72,13 @@ const defaultSamples = ImmutableMap<GroupVersionKind, Sample[]>()
         id: 'docker-build',
         targetResource: getTargetResource(BuildConfigModel),
       },
+      {
+        title: 'Build from Devfile',
+        description:
+          'A Devfile build performs an image build using a devfile in the source repository or specified in build configuration.',
+        id: 'devfile-build',
+        targetResource: getTargetResource(BuildConfigModel),
+      },
       {
         title: 'Source-to-Image (S2I) build',
         description:

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

@@ -3,6 +3,7 @@
   "Container Image": "Container Image",
   "From Catalog": "From Catalog",
   "From Dockerfile": "From Dockerfile",
+  "From Devfile": "From Devfile",
   "Database": "Database",
   "Samples": "Samples",
   "Operator Backed": "Operator Backed",
@@ -273,6 +274,8 @@
   "Sample repository:": "Sample repository:",
   "Create": "Create",
   "Deploy Image": "Deploy Image",
+  "The Devfile in your Git repository is invalid.": "The Devfile in your Git repository is invalid.",
+  "Import is not possible.": "Import is not possible.",
   "Hide advanced Git options": "Hide advanced Git options",
   "Show advanced Git options": "Show advanced Git options",
   "Git reference": "Git reference",
@@ -285,6 +288,7 @@
   "Container port": "Container port",
   "Port number the Container exposes.": "Port number the Container exposes.",
   "Validating": "Validating",
+  "No Devfile present, unable to continue": "No Devfile present, unable to continue",
   "Validated": "Validated",
   "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",
   "Git": "Git",
@@ -317,9 +321,11 @@
   "Tag": "Tag",
   "No tag": "No tag",
   "Select tag": "Select tag",
+  "Cannot update Devfile resources": "Cannot update Devfile resources",
   "no application group": "no application group",
   "Import from Git": "Import from Git",
   "Import from Dockerfile": "Import from Dockerfile",
+  "Import from Devfile": "Import from Devfile",
   "Create Source-to-Image Application": "Create Source-to-Image Application",
   "Git repo URL": "Git repo URL",
   "Create Sample Application": "Create Sample Application",
@@ -443,6 +449,7 @@
   "Developer": "Developer",
   "Create an Application from a code sample": "Create an Application from a code sample",
   "Import code from your Git repository to be built and deployed": "Import code from your Git repository to be built and deployed",
+  "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",
   "Import your Dockerfile from your Git repository to be built and deployed": "Import your Dockerfile from your Git repository to be built and deployed",
   "YAML": "YAML",

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

@@ -4,6 +4,7 @@ import {
   OsImageIcon,
   CatalogIcon,
   CubeIcon,
+  LayerGroupIcon,
   DatabaseIcon,
   LaptopCodeIcon,
   BoltIcon,
@@ -47,6 +48,14 @@ export const fromDockerfile = createKebabAction(
   allImportResourceAccess,
 );
 
+export const fromDevfile = createKebabAction(
+  // t('devconsole~From Devfile')
+  'devconsole~From Devfile',
+  <LayerGroupIcon />,
+  ImportOptions.DEVFILE,
+  allImportResourceAccess,
+);
+
 export const fromDatabaseCatalog = createKebabAction(
   // t('devconsole~Database')
   'devconsole~Database',
@@ -81,17 +90,24 @@ export const addResourceMenu: KebabAction[] = [
   fromGit,
   containerImage,
   fromDockerfile,
+  fromDevfile,
   fromCatalog,
   fromDatabaseCatalog,
   fromOperatorBacked,
   fromHelmCharts,
 ];
 
-export const addGroupResourceMenu: KebabAction[] = [fromGit, containerImage, fromDockerfile];
+export const addGroupResourceMenu: KebabAction[] = [
+  fromGit,
+  containerImage,
+  fromDockerfile,
+  fromDevfile,
+];
 
 export const addResourceMenuWithoutCatalog: KebabAction[] = [
   fromGit,
   containerImage,
   fromDockerfile,
+  fromDevfile,
   fromOperatorBacked,
 ];

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

@@ -46,7 +46,15 @@ const EditApplication: React.FC<EditApplicationProps & StateProps> = ({
     if (values.build.strategy) {
       const imageStream =
         values.image.selected && builderImages ? builderImages[values.image.selected].obj : null;
-      return createOrUpdateGitResources(values, imageStream, false, false, 'update', appResources);
+      return createOrUpdateGitResources(
+        t,
+        values,
+        imageStream,
+        false,
+        false,
+        'update',
+        appResources,
+      );
     }
     return createOrUpdateDeployImageResources(values, false, 'update', appResources);
   };

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

@@ -162,11 +162,12 @@ const ImportForm: React.FC<ImportFormProps & StateProps> = ({
     } = values;
 
     const resourceActions = createOrUpdateResources(
+      t,
       values,
       imageStream,
       createNewProject,
       true,
-    ).then(() => createOrUpdateResources(values, imageStream));
+    ).then(() => createOrUpdateResources(t, values, imageStream));
 
     resourceActions
       .then((resources) => {

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

@@ -4,7 +4,8 @@ import Helmet from 'react-helmet';
 import { TFunction } from 'i18next';
 import { useTranslation } from 'react-i18next';
 import { PageHeading, Firehose, FirehoseResource } from '@console/internal/components/utils';
-import { ImageStreamModel } from '@console/internal/models';
+import DevPreviewBadge from '@console/shared/src/components/badges/DevPreviewBadge';
+import { ImageStreamModel, ProjectModel } from '@console/internal/models';
 import { QUERY_PROPERTIES } from '../../const';
 import NamespacedPage, { NamespacedPageVariants } from '../NamespacedPage';
 import QueryFocusApplication from '../QueryFocusApplication';
@@ -28,6 +29,15 @@ const ImportFlows = (t: TFunction): { [name: string]: ImportData } => ({
     loader: () =>
       import('./GitImportForm' /* webpackChunkName: "git-import-form" */).then((m) => m.default),
   },
+  devfile: {
+    type: ImportTypes.devfile,
+    title: t('devconsole~Import from Devfile'),
+    buildStrategy: 'Devfile',
+    loader: () =>
+      import('./devfile/DevfileImportForm' /* webpackChunkName: "devfile-import-form" */).then(
+        (m) => m.default,
+      ),
+  },
   s2i: {
     type: ImportTypes.s2i,
     title: t('devconsole~Create Source-to-Image Application'),
@@ -61,7 +71,7 @@ const ImportPage: React.FunctionComponent<ImportPageProps> = ({ match, location
         namespace: imageStreamNamespace,
       },
       {
-        kind: 'Project',
+        kind: ProjectModel.kind,
         prop: 'projects',
         isList: true,
       },
@@ -70,7 +80,16 @@ const ImportPage: React.FunctionComponent<ImportPageProps> = ({ match, location
     importData = ImportFlows(t).docker;
     resources = [
       {
-        kind: 'Project',
+        kind: ProjectModel.kind,
+        prop: 'projects',
+        isList: true,
+      },
+    ];
+  } else if (importType === ImportTypes.devfile) {
+    importData = ImportFlows(t).devfile;
+    resources = [
+      {
+        kind: ProjectModel.kind,
         prop: 'projects',
         isList: true,
       },
@@ -85,7 +104,7 @@ const ImportPage: React.FunctionComponent<ImportPageProps> = ({ match, location
         namespace: 'openshift',
       },
       {
-        kind: 'Project',
+        kind: ProjectModel.kind,
         prop: 'projects',
         isList: true,
       },
@@ -99,7 +118,10 @@ const ImportPage: React.FunctionComponent<ImportPageProps> = ({ match, location
           <Helmet>
             <title>{importData.title}</title>
           </Helmet>
-          <PageHeading title={importData.title} />
+          <PageHeading
+            title={importData.title}
+            badge={importType === ImportTypes.devfile ? <DevPreviewBadge /> : null}
+          />
           <div className="co-m-pane__body" style={{ paddingBottom: 0 }}>
             <Firehose resources={resources}>
               <ImportForm

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

@@ -163,11 +163,12 @@ const ImportSamplePage: React.FC<ImportSamplePageProps> = ({ match }) => {
 
   const handleSubmit = (values, actions) => {
     const resourceActions = createOrUpdateResources(
+      t,
       values,
       imageStream as K8sResourceKind,
       false,
       true,
-    ).then(() => createOrUpdateResources(values, imageStream as K8sResourceKind));
+    ).then(() => createOrUpdateResources(t, values, imageStream as K8sResourceKind));
 
     return resourceActions
       .then(() => {

frontend/packages/dev-console/src/components/import/__tests__/import-submit-utils.spec.ts

@@ -18,6 +18,8 @@ import { defaultData, nodeJsBuilderImage as buildImage } from './import-submit-u
 const { createOrUpdateDeployment, createOrUpdateResources } = submitUtils;
 
 describe('Import Submit Utils', () => {
+  const t = jest.fn();
+
   describe('createDeployment tests', () => {
     beforeAll(() => {
       jest
@@ -91,7 +93,7 @@ describe('Import Submit Utils', () => {
       const mockData = _.cloneDeep(defaultData);
       mockData.resources = Resources.Kubernetes;
 
-      const returnValue = await createOrUpdateResources(mockData, buildImage.obj, false);
+      const returnValue = await createOrUpdateResources(t, mockData, buildImage.obj, false);
       expect(returnValue).toHaveLength(7);
       const models = returnValue.map((data) => _.get(data, 'model.kind'));
       expect(models).toEqual([
@@ -110,7 +112,7 @@ describe('Import Submit Utils', () => {
       const mockData = _.cloneDeep(defaultData);
       mockData.resources = Resources.OpenShift;
 
-      const returnValue = await createOrUpdateResources(mockData, buildImage.obj, false);
+      const returnValue = await createOrUpdateResources(t, mockData, buildImage.obj, false);
       expect(returnValue).toHaveLength(7);
       const models = returnValue.map((data) => _.get(data, 'model.kind'));
       expect(models).toEqual([
@@ -137,7 +139,7 @@ describe('Import Submit Utils', () => {
           },
         }));
 
-      const returnValue = await createOrUpdateResources(mockData, buildImage.obj, false);
+      const returnValue = await createOrUpdateResources(t, mockData, buildImage.obj, false);
       // createImageStream is called as separate entity
       expect(imageStreamSpy).toHaveBeenCalled();
       expect(returnValue).toHaveLength(1);
@@ -183,7 +185,7 @@ describe('Import Submit Utils', () => {
         'createPipelineRunForImportFlow',
       );
 
-      await createOrUpdateResources(mockData, buildImage.obj, false, false, 'create');
+      await createOrUpdateResources(t, mockData, buildImage.obj, false, false, 'create');
       expect(createPipelineResourceSpy).toHaveBeenCalledWith(
         mockData.name,
         mockData.project.name,
@@ -205,6 +207,7 @@ describe('Import Submit Utils', () => {
       const createPipelineResourceSpy = jest.spyOn(pipelineUtils, 'createPipelineForImportFlow');
 
       const returnValue = await createOrUpdateResources(
+        t,
         mockData,
         buildImage.obj,
         false,
@@ -236,6 +239,7 @@ describe('Import Submit Utils', () => {
         .mockImplementation(() => Promise.reject(new Error('PipelineRun error')));
 
       const returnValue = await createOrUpdateResources(
+        t,
         mockData,
         buildImage.obj,
         false,
@@ -259,7 +263,7 @@ describe('Import Submit Utils', () => {
         .mockImplementation(() => Promise.reject(new Error('Deployment')));
 
       await expect(
-        createOrUpdateResources(mockData, buildImage.obj, false, false, 'create'),
+        createOrUpdateResources(t, mockData, buildImage.obj, false, false, 'create'),
       ).rejects.toEqual(new Error('Deployment'));
       done();
     });
@@ -268,6 +272,7 @@ describe('Import Submit Utils', () => {
       const mockData = _.cloneDeep(defaultData);
 
       const returnValue = await createOrUpdateResources(
+        t,
         mockData,
         buildImage.obj,
         false,

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

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import * as _ from 'lodash';
+import { useTranslation } from 'react-i18next';
+import { Alert, Form } from '@patternfly/react-core';
+import { FormikProps, FormikValues } from 'formik';
+import { FormFooter } from '@console/shared/src/components/form-utils';
+import { DevfileImportFormProps } from '../import-types';
+import GitSection from '../git/GitSection';
+import AppSection from '../app/AppSection';
+import { useDefileServer, useDevfileDirectoryWatcher } from './devfileHooks';
+
+const DevfileImportForm: React.FC<FormikProps<FormikValues> & DevfileImportFormProps> = ({
+  values,
+  errors,
+  handleSubmit,
+  handleReset,
+  status,
+  builderImages,
+  isSubmitting,
+  dirty,
+  projects,
+  setFieldValue,
+}) => {
+  const { t } = useTranslation();
+
+  const [, devfileParseError] = useDefileServer(values, setFieldValue);
+  useDevfileDirectoryWatcher(values, setFieldValue);
+
+  return (
+    <Form onSubmit={handleSubmit} data-test-id="import-devfile-form">
+      {devfileParseError && (
+        <Alert isInline variant="danger" title={t('devconsole~Import is not possible.')}>
+          {devfileParseError}
+        </Alert>
+      )}
+      <GitSection
+        buildStrategy="Devfile"
+        builderImages={builderImages}
+        defaultSample={{ url: 'https://github.com/maysunfaisal/node-bulletin-board' }}
+      />
+      <AppSection
+        project={values.project}
+        noProjectsAvailable={projects.loaded && _.isEmpty(projects.data)}
+      />
+      <FormFooter
+        handleReset={handleReset}
+        errorMessage={status && status.submitError}
+        isSubmitting={isSubmitting}
+        submitLabel={t('devconsole~Create')}
+        sticky
+        disableSubmit={!dirty || !_.isEmpty(errors)}
+        resetLabel={t('devconsole~Cancel')}
+      />
+    </Form>
+  );
+};
+
+export default DevfileImportForm;