Bug 1808280: Add edit application feature for apps created using deploy image flow

frontend/packages/console-shared/src/components/formik-fields/RadioButtonField.tsx

@@ -40,6 +40,7 @@ const RadioButtonField: React.FC<RadioButtonProps> = ({
               label={option.label}
               isChecked={field.value === option.value}
               isValid={isValid}
+              isDisabled={option.isDisabled}
               aria-describedby={`${fieldId}-helper`}
               onChange={(val, event) => {
                 field.onChange(event);

frontend/packages/console-shared/src/components/formik-fields/field-types.ts

@@ -94,6 +94,7 @@ export interface RadioButtonProps extends FieldProps {
 export interface RadioOption {
   value: string;
   label: React.ReactNode;
+  isDisabled?: boolean;
   children?: React.ReactNode;
   activeChildren?: React.ReactElement;
 }

frontend/packages/dev-console/src/actions/modify-application.ts

@@ -1,6 +1,6 @@
 import { KebabOption } from '@console/internal/components/utils';
 import { K8sResourceKind, K8sKind } from '@console/internal/module/k8s';
-import { editApplicationModal, editApplication } from '../components/modals';
+import { editApplicationModal } from '../components/modals';
 
 export const ModifyApplication = (kind: K8sKind, obj: K8sResourceKind): KebabOption => {
   return {
@@ -24,8 +24,8 @@ export const ModifyApplication = (kind: K8sKind, obj: K8sResourceKind): KebabOpt
 
 export const EditApplication = (model: K8sKind, obj: K8sResourceKind): KebabOption => {
   return {
-    label: 'Edit Application',
-    callback: () => editApplication({ editAppResource: obj }),
+    label: 'Edit',
+    href: `/edit?name=${obj.metadata.name}&kind=${obj.kind}`,
     accessReview: {
       group: model.apiGroup,
       resource: model.plural,

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

@@ -1,93 +1,58 @@
 import * as React from 'react';
 import { Formik } from 'formik';
 import * as _ from 'lodash';
+import { connect } from 'react-redux';
+import { getActivePerspective } from '@console/internal/reducers/ui';
+import { RootState } from '@console/internal/redux';
+import { history } from '@console/internal/components/utils';
 import { NormalizedBuilderImages, normalizeBuilderImages } from '../../utils/imagestream-utils';
-import { createOrUpdateResources } from '../import/import-submit-utils';
-import { validationSchema } from '../import/import-validation-utils';
+import {
+  createOrUpdateResources as createOrUpdateGitResources,
+  handleRedirect,
+} from '../import/import-submit-utils';
+import { validationSchema as gitValidationSchema } from '../import/import-validation-utils';
+import { createOrUpdateDeployImageResources } from '../import/deployImage-submit-utils';
+import { deployValidationSchema } from '../import/deployImage-validation-utils';
 import EditApplicationForm from './EditApplicationForm';
 import { EditApplicationProps } from './edit-application-types';
-import * as EditApplicationUtils from './edit-application-utils';
+import { getPageHeading, getInitialValues } from './edit-application-utils';
 
-const EditApplication: React.FC<EditApplicationProps> = ({
+export interface StateProps {
+  perspective: string;
+}
+
+const EditApplication: React.FC<EditApplicationProps & StateProps> = ({
+  perspective,
   namespace,
   appName,
-  editAppResource,
   resources: appResources,
-  onCancel,
-  onSubmit,
 }) => {
-  const builderImages: NormalizedBuilderImages =
+  const imageStreamsData =
     appResources.imageStreams && appResources.imageStreams.loaded
-      ? normalizeBuilderImages(appResources.imageStreams.data)
-      : null;
-
-  const currentImage = _.split(
-    _.get(appResources, 'buildConfig.data.spec.strategy.sourceStrategy.from.name', ''),
-    ':',
-  );
+      ? appResources.imageStreams.data
+      : [];
+  const builderImages: NormalizedBuilderImages = !_.isEmpty(imageStreamsData)
+    ? normalizeBuilderImages(imageStreamsData)
+    : null;
 
-  const appGroupName = _.get(editAppResource, 'metadata.labels["app.kubernetes.io/part-of"]');
+  const initialValues = getInitialValues(appResources, appName, namespace);
+  const pageHeading = getPageHeading(_.get(initialValues, 'build.strategy', ''));
 
-  const initialValues = {
-    formType: 'edit',
-    name: appName,
-    application: {
-      name: appGroupName,
-      selectedKey: appGroupName,
-    },
-    project: {
-      name: namespace,
-    },
-    git: EditApplicationUtils.getGitData(_.get(appResources, 'buildConfig.data')),
-    docker: {
-      dockerfilePath: _.get(
-        appResources,
-        'buildConfig.data.spec.strategy.dockerStrategy.dockerfilePath',
-        'Dockerfile',
-      ),
-      containerPort: parseInt(
-        _.split(_.get(appResources, 'route.data.spec.port.targetPort'), '-')[0],
-        10,
-      ),
-    },
-    image: {
-      selected: currentImage[0] || '',
-      recommended: '',
-      tag: currentImage[1] || '',
-      tagObj: {},
-      ports: [],
-      isRecommending: false,
-      couldNotRecommend: false,
-    },
-    route: EditApplicationUtils.getRouteData(_.get(appResources, 'route.data'), editAppResource),
-    resources: EditApplicationUtils.getResourcesType(editAppResource),
-    serverless: EditApplicationUtils.getServerlessData(editAppResource),
-    pipeline: {
-      enabled: false,
-    },
-    build: EditApplicationUtils.getBuildData(_.get(appResources, 'buildConfig.data')),
-    deployment: EditApplicationUtils.getDeploymentData(editAppResource),
-    labels: EditApplicationUtils.getUserLabels(editAppResource),
-    limits: EditApplicationUtils.getLimitsData(editAppResource),
+  const updateResources = (values) => {
+    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 createOrUpdateDeployImageResources(values, false, 'update', appResources);
   };
 
   const handleSubmit = (values, actions) => {
-    const imageStream =
-      values.image.selected && builderImages ? builderImages[values.image.selected].obj : null;
-
-    createOrUpdateResources(
-      values,
-      imageStream,
-      false,
-      false,
-      'update',
-      appResources,
-      editAppResource,
-    )
+    updateResources(values)
       .then(() => {
         actions.setSubmitting(false);
         actions.setStatus({ error: '' });
-        onSubmit();
+        handleRedirect(namespace, perspective);
       })
       .catch((err) => {
         actions.setSubmitting(false);
@@ -96,18 +61,34 @@ const EditApplication: React.FC<EditApplicationProps> = ({
   };
 
   const renderForm = (props) => {
-    return <EditApplicationForm {...props} builderImages={builderImages} />;
+    return (
+      <EditApplicationForm
+        {...props}
+        enableReinitialize="true"
+        createFlowType={pageHeading}
+        builderImages={builderImages}
+      />
+    );
   };
 
   return (
     <Formik
       initialValues={initialValues}
       onSubmit={handleSubmit}
-      onReset={onCancel}
-      validationSchema={validationSchema}
+      onReset={history.goBack}
+      validationSchema={
+        _.get(initialValues, 'build.strategy') ? gitValidationSchema : deployValidationSchema
+      }
       render={renderForm}
     />
   );
 };
 
-export default EditApplication;
+const mapStateToProps = (state: RootState) => {
+  const perspective = getActivePerspective(state);
+  return {
+    perspective,
+  };
+};
+
+export default connect(mapStateToProps)(EditApplication);

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

@@ -1,50 +1,57 @@
 import * as React from 'react';
 import * as _ from 'lodash';
 import { FormikProps, FormikValues } from 'formik';
-import { ModalTitle, ModalBody, ModalSubmitFooter } from '@console/internal/components/factory';
-import { BuildStrategyType } from '@console/internal/components/build';
+import { Form } from '@patternfly/react-core';
+import { PageHeading } from '@console/internal/components/utils';
+import { FormFooter } from '@console/shared';
 import GitSection from '../import/git/GitSection';
 import BuilderSection from '../import/builder/BuilderSection';
 import DockerSection from '../import/git/DockerSection';
 import AdvancedSection from '../import/advanced/AdvancedSection';
 import AppSection from '../import/app/AppSection';
 import { NormalizedBuilderImages } from '../../utils/imagestream-utils';
+import ImageSearchSection from '../import/image-search/ImageSearchSection';
+import { CreateApplicationFlow } from './edit-application-utils';
 
 export interface EditApplicationFormProps {
+  createFlowType: string;
   builderImages?: NormalizedBuilderImages;
 }
 
 const EditApplicationForm: React.FC<FormikProps<FormikValues> & EditApplicationFormProps> = ({
   handleSubmit,
   handleReset,
   values,
+  createFlowType,
   builderImages,
   dirty,
   errors,
   status,
   isSubmitting,
 }) => (
-  <form className="modal-content" onSubmit={handleSubmit}>
-    <ModalTitle>Edit Application</ModalTitle>
-    <ModalBody>
-      {!_.isEmpty(values.build.strategy) && <GitSection />}
-      {values.build.strategy === BuildStrategyType.Source && (
+  <>
+    <PageHeading title={createFlowType} style={{ padding: '0px' }} />
+    <Form onSubmit={handleSubmit}>
+      {createFlowType !== CreateApplicationFlow.Container && <GitSection />}
+      {createFlowType === CreateApplicationFlow.Git && (
         <BuilderSection image={values.image} builderImages={builderImages} />
       )}
-      {values.build.strategy === BuildStrategyType.Docker && (
+      {createFlowType === CreateApplicationFlow.Dockerfile && (
         <DockerSection buildStrategy={values.build.strategy} />
       )}
+      {createFlowType === CreateApplicationFlow.Container && <ImageSearchSection />}
       <AppSection project={values.project} />
       <AdvancedSection values={values} />
-    </ModalBody>
-    <ModalSubmitFooter
-      submitText="Save"
-      submitDisabled={!dirty || !_.isEmpty(errors)}
-      cancel={handleReset}
-      inProgress={isSubmitting}
-      errorMessage={status && status.submitError}
-    />
-  </form>
+      <FormFooter
+        handleReset={handleReset}
+        errorMessage={status && status.submitError}
+        isSubmitting={isSubmitting}
+        submitLabel="Save"
+        disableSubmit={!dirty || !_.isEmpty(errors)}
+        resetLabel="Cancel"
+      />
+    </Form>
+  </>
 );
 
 export default EditApplicationForm;

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

@@ -0,0 +1,89 @@
+import * as React from 'react';
+import { Firehose, FirehoseResource, LoadingBox } from '@console/internal/components/utils';
+import { ImageStreamModel } from '@console/internal/models';
+import { RouteComponentProps } from 'react-router-dom';
+import { Helmet } from 'react-helmet';
+import { ServiceModel } from '@console/knative-plugin';
+import { referenceForModel } from '@console/internal/module/k8s';
+import NamespacedPage, { NamespacedPageVariants } from '../NamespacedPage';
+import EditApplication from './EditApplication';
+import { EditApplicationProps } from './edit-application-types';
+
+const EditApplicationComponentLoader: React.FunctionComponent<EditApplicationProps> = (
+  props: EditApplicationProps,
+) => {
+  const { loaded } = props;
+  return loaded ? <EditApplication {...props} /> : <LoadingBox />;
+};
+
+export type ImportPageProps = RouteComponentProps<{ ns?: string }>;
+
+const EditApplicationPage: React.FunctionComponent<ImportPageProps> = ({ match, location }) => {
+  const namespace = match.params.ns;
+  const queryParams = new URLSearchParams(location.search);
+  const editAppResourceKind = queryParams.get('kind');
+  const appName = queryParams.get('name');
+  const appResources: FirehoseResource[] = [
+    {
+      kind: 'Service',
+      prop: 'service',
+      name: appName,
+      namespace,
+      optional: true,
+    },
+    {
+      kind: 'BuildConfig',
+      prop: 'buildConfig',
+      name: appName,
+      namespace,
+      optional: true,
+    },
+    {
+      kind: 'Route',
+      prop: 'route',
+      name: appName,
+      namespace,
+      optional: true,
+    },
+    {
+      kind: 'ImageStream',
+      prop: 'imageStream',
+      name: appName,
+      namespace,
+      optional: true,
+    },
+    {
+      kind: ImageStreamModel.kind,
+      prop: 'imageStreams',
+      isList: true,
+      namespace: 'openshift',
+      optional: true,
+    },
+  ];
+  let kind = editAppResourceKind;
+  if (kind === ServiceModel.kind) {
+    kind = referenceForModel(ServiceModel);
+  }
+  appResources.push({
+    kind,
+    prop: 'editAppResource',
+    name: appName,
+    namespace,
+    optional: true,
+  });
+
+  return (
+    <NamespacedPage disabled variant={NamespacedPageVariants.light}>
+      <Helmet>
+        <title>Edit</title>
+      </Helmet>
+      <div className="co-m-pane__body">
+        <Firehose resources={appResources}>
+          <EditApplicationComponentLoader namespace={namespace} appName={appName} />
+        </Firehose>
+      </div>
+    </NamespacedPage>
+  );
+};
+
+export default EditApplicationPage;