Merge pull request #4598 from openshift-cherrypick-robot/cherry-pick-…

…4517-to-release-4.4 [release-4.4] Bug 1808392: Edit Environment variables in edit flows
openshift · Mar 4, 2020 · 150e674 · 150e674
2 parents 19bf24f + 67dd6d3
commit 150e674
Show file tree

Hide file tree

Showing 8 changed files with 100 additions and 18 deletions.
diff --git a/frontend/packages/console-shared/src/components/formik-fields/EnvironmentField.tsx b/frontend/packages/console-shared/src/components/formik-fields/EnvironmentField.tsx
@@ -1,27 +1,76 @@
 import * as React from 'react';
+import * as _ from 'lodash';
 import { useFormikContext, FormikValues } from 'formik';
-import { EnvironmentPage } from '@console/internal/components/environment';
+import { NameValueEditor } from '@console/internal/components/utils/name-value-editor';
 import { FormGroup } from '@patternfly/react-core';
-import { EnvironmentFieldProps, NameValuePair, NameValueFromPair } from './field-types';
+import { SecretModel, ConfigMapModel } from '@console/internal/models';
+import { k8sGet } from '@console/internal/module/k8s';
+import { errorModal } from '@console/internal/components/modals';
+import { EnvironmentFieldProps } from './field-types';
 import { getFieldId } from './field-utils';
 
 const EnvironmentField: React.FC<EnvironmentFieldProps> = ({
   label,
   helpText,
   required,
+  envs,
   ...props
 }) => {
+  const {
+    obj: {
+      metadata: { namespace },
+    },
+  } = props;
   const { setFieldValue } = useFormikContext<FormikValues>();
   const fieldId = getFieldId(props.name, 'env-input');
+  const environmentVariables = !_.isEmpty(envs) ? envs.map((env) => _.values(env)) : [['', '']];
+  const [nameValue, setNameValue] = React.useState(environmentVariables);
+  const [configMaps, setConfigMaps] = React.useState({});
+  const [secrets, setSecrets] = React.useState({});
+  const handleNameValuePairs = React.useCallback(
+    ({ nameValuePairs }) => {
+      const updatedNameValuePairs = _.compact(
+        nameValuePairs.map(([name, value]) => {
+          if (_.isObject(value)) {
+            return { name, valueFrom: value };
+          }
+          if (value.length) {
+            return { name, value };
+          }
+          return null;
+        }),
+      );
+      setNameValue(nameValuePairs);
+      setFieldValue(props.name, updatedNameValuePairs);
+    },
+    [props.name, setFieldValue],
+  );
+  React.useEffect(() => {
+    Promise.all([k8sGet(ConfigMapModel, null, namespace), k8sGet(SecretModel, null, namespace)])
+      .then(([nsConfigMaps, nsSecrets]) => {
+        setConfigMaps(nsConfigMaps);
+        setSecrets(nsSecrets);
+      })
+      .catch((err) => {
+        if (err?.response?.status !== 403) {
+          errorModal({ error: err?.message });
+        }
+      });
+  }, [namespace]);
+
   return (
     <FormGroup fieldId={fieldId} label={label} helperText={helpText} isRequired={required}>
-      <EnvironmentPage
-        obj={props.obj}
-        envPath={props.envPath}
+      <NameValueEditor
+        nameValuePairs={nameValue}
+        valueString="Value"
+        nameString="Name"
+        addString="Add Value"
         readOnly={false}
-        onChange={(obj: (NameValuePair | NameValueFromPair)[]) => setFieldValue(props.name, obj)}
+        allowSorting={false}
+        updateParentData={handleNameValuePairs}
+        configMaps={configMaps}
+        secrets={secrets}
         addConfigMapSecret
-        useLoadingInline
       />
     </FormGroup>
   );

diff --git a/frontend/packages/console-shared/src/components/formik-fields/field-types.ts b/frontend/packages/console-shared/src/components/formik-fields/field-types.ts
@@ -1,4 +1,5 @@
 import { TextInputTypes, ValidatedOptions } from '@patternfly/react-core';
+import { K8sResourceKind } from '@console/internal/module/k8s';
 
 export interface FieldProps {
   name: string;
@@ -47,8 +48,9 @@ export interface DropdownFieldProps extends FieldProps {
 }
 
 export interface EnvironmentFieldProps extends FieldProps {
-  obj?: object;
+  obj?: K8sResourceKind;
   envPath: string[];
+  envs?: (NameValuePair | NameValueFromPair)[];
 }
 
 export interface ResourceLimitFieldProps extends FieldProps {

diff --git a/frontend/packages/dev-console/src/components/edit-application/EditApplication.tsx b/frontend/packages/dev-console/src/components/edit-application/EditApplication.tsx
@@ -64,6 +64,7 @@ const EditApplication: React.FC<EditApplicationProps & StateProps> = ({
     return (
       <EditApplicationForm
         {...props}
+        appResources={appResources}
         enableReinitialize="true"
         createFlowType={pageHeading}
         builderImages={builderImages}

diff --git a/frontend/packages/dev-console/src/components/edit-application/EditApplicationForm.tsx b/frontend/packages/dev-console/src/components/edit-application/EditApplicationForm.tsx
@@ -12,10 +12,12 @@ 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';
+import { AppResources } from './edit-application-types';
 
 export interface EditApplicationFormProps {
   createFlowType: string;
   builderImages?: NormalizedBuilderImages;
+  appResources: AppResources;
 }
 
 const EditApplicationForm: React.FC<FormikProps<FormikValues> & EditApplicationFormProps> = ({
@@ -28,6 +30,7 @@ const EditApplicationForm: React.FC<FormikProps<FormikValues> & EditApplicationF
   errors,
   status,
   isSubmitting,
+  appResources,
 }) => (
   <>
     <PageHeading title={createFlowType} style={{ padding: '0px' }} />
@@ -41,7 +44,7 @@ const EditApplicationForm: React.FC<FormikProps<FormikValues> & EditApplicationF
       )}
       {createFlowType === CreateApplicationFlow.Container && <ImageSearchSection />}
       <AppSection project={values.project} />
-      <AdvancedSection values={values} />
+      <AdvancedSection values={values} appResources={appResources} />
       <FormFooter
         handleReset={handleReset}
         errorMessage={status && status.submitError}

diff --git a/frontend/packages/dev-console/src/components/import/advanced/AdvancedSection.tsx b/frontend/packages/dev-console/src/components/import/advanced/AdvancedSection.tsx
@@ -13,12 +13,14 @@ import ServerlessScalingSection from './ServerlessScalingSection';
 import BuildConfigSection from './BuildConfigSection';
 import DeploymentConfigSection from './DeploymentConfigSection';
 import ResourceLimitSection from './ResourceLimitSection';
+import { AppResources } from '../../edit-application/edit-application-types';
 
 export interface AdvancedSectionProps {
   values: FormikValues;
+  appResources?: AppResources;
 }
 
-const AdvancedSection: React.FC<AdvancedSectionProps> = ({ values }) => {
+const AdvancedSection: React.FC<AdvancedSectionProps> = ({ values, appResources }) => {
   const [visibleItems, setVisibleItems] = React.useState([]);
   const handleVisibleItemChange = (item: string) => {
     setVisibleItems([...visibleItems, item]);
@@ -42,13 +44,19 @@ const AdvancedSection: React.FC<AdvancedSectionProps> = ({ values }) => {
         {/* Hide Build for Deploy Image */}
         {values.isi ? null : (
           <ProgressiveListItem name="Build Configuration">
-            <BuildConfigSection namespace={values.project.name} />
+            <BuildConfigSection
+              namespace={values.project.name}
+              resource={appResources?.buildConfig?.data}
+            />
           </ProgressiveListItem>
         )}
         {/* Hide Deployment for Serverless */}
         {values.resources !== Resources.KnativeService && (
           <ProgressiveListItem name="Deployment">
-            <DeploymentConfigSection namespace={values.project.name} />
+            <DeploymentConfigSection
+              namespace={values.project.name}
+              resource={appResources?.editAppResource?.data}
+            />
           </ProgressiveListItem>
         )}
         <ProgressiveListItem name="Scaling">

diff --git a/frontend/packages/dev-console/src/components/import/advanced/BuildConfigSection.tsx b/frontend/packages/dev-console/src/components/import/advanced/BuildConfigSection.tsx
@@ -1,19 +1,24 @@
 import * as React from 'react';
+import * as _ from 'lodash';
 import { CheckboxField, EnvironmentField } from '@console/shared';
+import { K8sResourceKind } from '@console/internal/module/k8s';
+import { getStrategyType } from '@console/internal/components/build';
 import FormSection from '../section/FormSection';
 
 export interface BuildConfigSectionProps {
   namespace: string;
+  resource?: K8sResourceKind;
 }
 
-const BuildConfigSection: React.FC<BuildConfigSectionProps> = ({ namespace }) => {
-  const buildConfigObj = {
+const BuildConfigSection: React.FC<BuildConfigSectionProps> = ({ namespace, resource }) => {
+  const buildConfigObj = resource || {
     kind: 'BuildConfig',
     metadata: {
       namespace,
     },
   };
-
+  const strategyType = getStrategyType(resource?.spec?.strategy?.type);
+  const envs = _.get(buildConfigObj, `spec.strategy.${strategyType}.env`, []);
   return (
     <FormSection title="Build Configuration" fullWidth>
       <CheckboxField name="build.triggers.webhook" label="Configure a webhook build trigger" />
@@ -29,6 +34,7 @@ const BuildConfigSection: React.FC<BuildConfigSectionProps> = ({ namespace }) =>
         name="build.env"
         label="Environment Variables (Build and Runtime)"
         obj={buildConfigObj}
+        envs={envs}
         envPath={['spec', 'strategy']}
       />
     </FormSection>

diff --git a/frontend/packages/dev-console/src/components/import/advanced/DeploymentConfigSection.tsx b/frontend/packages/dev-console/src/components/import/advanced/DeploymentConfigSection.tsx
@@ -1,19 +1,25 @@
 import * as React from 'react';
+import * as _ from 'lodash';
 import { CheckboxField, EnvironmentField } from '@console/shared';
+import { K8sResourceKind } from '@console/internal/module/k8s';
 import FormSection from '../section/FormSection';
 
 export interface DeploymentConfigSectionProps {
   namespace: string;
+  resource?: K8sResourceKind;
 }
 
-const DeploymentConfigSection: React.FC<DeploymentConfigSectionProps> = ({ namespace }) => {
-  const deploymentConfigObj = {
+const DeploymentConfigSection: React.FC<DeploymentConfigSectionProps> = ({
+  namespace,
+  resource,
+}) => {
+  const deploymentConfigObj = resource || {
     kind: 'DeploymentConfig',
     metadata: {
       namespace,
     },
   };
-
+  const envs = _.get(deploymentConfigObj, 'spec.template.spec.containers[0].env', []);
   return (
     <FormSection title="Deployment" fullWidth>
       <CheckboxField
@@ -27,6 +33,7 @@ const DeploymentConfigSection: React.FC<DeploymentConfigSectionProps> = ({ names
       <EnvironmentField
         name="deployment.env"
         label="Environment Variables (Runtime only)"
+        envs={envs}
         obj={deploymentConfigObj}
         envPath={['spec', 'template', 'spec', 'containers']}
       />

diff --git a/frontend/packages/dev-console/src/utils/resource-label-utils.ts b/frontend/packages/dev-console/src/utils/resource-label-utils.ts
@@ -50,5 +50,11 @@ export const mergeData = (originalResource: K8sResourceKind, newResource: K8sRes
   if (mergedData.spec?.template?.metadata?.labels) {
     mergedData.spec.template.metadata.labels = newResource.spec?.template?.metadata?.labels;
   }
+  if (mergedData.spec?.template?.spec?.containers) {
+    mergedData.spec.template.spec.containers = newResource.spec.template.spec.containers;
+  }
+  if (mergedData?.spec?.strategy) {
+    mergedData.spec.strategy = newResource.spec.strategy;
+  }
   return mergedData;
 };