Merge pull request #5988 from TheRealJon/1856867-bz

[release-4.5] Bug 1856867: Do not prune empty values from sample on create operand page

frontend/packages/console-shared/src/components/dynamic-form/utils.ts

@@ -23,6 +23,45 @@ export const getSchemaErrors = (schema: JSONSchema6): SchemaError[] => {
   ];
 };
 
+// Returns true if a value is not nil and is empty
+const definedAndEmpty = (value) => !_.isNil(value) && _.isEmpty(value);
+
+// Helper function for prune
+// TODO (jon) Make this pure
+const pruneRecursive = (current: any, sample: any): any => {
+  const valueIsEmpty = (value, key) =>
+    _.isNil(value) ||
+    _.isNaN(value) ||
+    (_.isString(value) && _.isEmpty(value)) ||
+    (_.isObject(value) && _.isEmpty(pruneRecursive(value, sample?.[key])));
+
+  // Value should be pruned if it is empty and the correspondeing sample is not explicitly
+  // defined as an empty value.
+  const shouldPrune = (value, key) => valueIsEmpty(value, key) && !definedAndEmpty(sample?.[key]);
+
+  // Prune each property of current value that meets the pruning criteria
+  _.forOwn(current, (value, key) => {
+    if (shouldPrune(value, key)) {
+      delete current[key];
+    }
+  });
+
+  // remove any leftover undefined values from the delete operation on an array
+  if (_.isArray(current)) {
+    _.pull(current, undefined);
+  }
+
+  return current;
+};
+
+// Deeply remove all empty, NaN, null, or undefined values from an object or array. If a value meets
+// the above criteria, but the corresponding sample is explicitly defined as an empty vaolue, it
+// will not be pruned.
+// Based on https://stackoverflow.com/a/26202058/8895304
+export const prune = (obj: any, sample?: any): any => {
+  return pruneRecursive(_.cloneDeep(obj), sample);
+};
+
 type SchemaError = {
   title: string;
   message: string;

frontend/packages/console-shared/src/components/synced-editor/index.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import * as _ from 'lodash';
 import { K8sResourceKind } from '@console/internal/module/k8s';
 import { EditorType, EditorToggle } from './editor-toggle';
-import { prune } from '../../utils';
 import { safeJSToYAML, asyncYAMLToJS } from '../../utils/yaml';
 import { Alert, Button } from '@patternfly/react-core';
 
@@ -32,6 +31,7 @@ export const SyncedEditor: React.FC<SyncedEditorProps> = ({
   initialData = {},
   onChangeEditorType = _.noop,
   onChange = _.noop,
+  prune,
   YAMLEditor,
 }) => {
   const { formContext, yamlContext } = context;
@@ -71,7 +71,7 @@ export const SyncedEditor: React.FC<SyncedEditorProps> = ({
   };
 
   const handleToggleToYAML = () => {
-    setYAML(safeJSToYAML({ ...formData, spec: prune(formData.spec) }, yaml, YAML_TO_JS_OPTIONS));
+    setYAML(safeJSToYAML(prune?.(formData) ?? formData, yaml, YAML_TO_JS_OPTIONS));
     changeEditorType(EditorType.YAML);
   };
 
@@ -119,7 +119,12 @@ export const SyncedEditor: React.FC<SyncedEditorProps> = ({
         </Alert>
       )}
       {type === EditorType.Form ? (
-        <FormEditor formData={formData} onChange={handleFormDataChange} {...formContext} />
+        <FormEditor
+          formData={formData}
+          onChange={handleFormDataChange}
+          prune={prune}
+          {...formContext}
+        />
       ) : (
         <YAMLEditor initialYAML={yaml} onChange={handleYAMLChange} {...yamlContext} />
       )}
@@ -137,5 +142,6 @@ type SyncedEditorProps = {
   initialData?: K8sResourceKind;
   onChangeEditorType?: (newType: EditorType) => void;
   onChange?: (data: K8sResourceKind) => void;
+  prune?: (data: any) => any;
   YAMLEditor: React.FC<any>;
 };

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

@@ -1,4 +1,3 @@
-import * as _ from 'lodash';
 import { K8sResourceKind } from '@console/internal/module/k8s';
 import { FirehoseResult } from '@console/internal/components/utils/types';
 import { getUID } from '../selectors/common';
@@ -34,32 +33,3 @@ export const getRandomChars = (len = 6): string => {
     .replace(/[^a-z0-9]+/g, '')
     .substr(1, len);
 };
-
-// Recursively remove all empty, NaN, null, or undefined values from an object or array.
-// Based on https://stackoverflow.com/a/26202058/8895304
-const pruneRecursive = (current) => {
-  _.forOwn(current, (value, key) => {
-    if (
-      _.isNil(value) ||
-      _.isNaN(value) ||
-      (_.isString(value) && _.isEmpty(value)) ||
-      (_.isObject(value) && _.isEmpty(pruneRecursive(value)))
-    ) {
-      delete current[key];
-    }
-  });
-
-  // remove any leftover undefined values from the delete
-  // operation on an array
-  if (_.isArray(current)) {
-    _.pull(current, undefined);
-  }
-
-  return current;
-};
-
-// Deeply remove all empty, NaN, null, or undefined values from an object or array.
-// Based on https://stackoverflow.com/a/26202058/8895304
-export const prune = (obj) => {
-  return pruneRecursive(_.cloneDeep(obj));
-};

frontend/packages/operator-lifecycle-manager/src/components/operand/create-operand.tsx

@@ -1,3 +1,5 @@
+import * as _ from 'lodash';
+import * as React from 'react';
 import { JSONSchema6 } from 'json-schema';
 import {
   K8sKind,
@@ -21,8 +23,6 @@ import { RootState } from '@console/internal/redux';
 import { SyncedEditor } from '@console/shared/src/components/synced-editor';
 import { getActivePerspective } from '@console/internal/reducers/ui';
 import { EditorType } from '@console/shared/src/components/synced-editor/editor-toggle';
-import * as _ from 'lodash';
-import * as React from 'react';
 import { connect } from 'react-redux';
 import { Helmet } from 'react-helmet';
 import { match as RouterMatch } from 'react-router';
@@ -32,7 +32,7 @@ import { OperandForm } from './operand-form';
 import { OperandYAML } from './operand-yaml';
 import { exampleForModel, providedAPIForModel } from '..';
 import { FORM_HELP_TEXT, YAML_HELP_TEXT, DEFAULT_K8S_SCHEMA } from './const';
-import { getSchemaErrors } from '@console/shared/src/components/dynamic-form/utils';
+import { getSchemaErrors, prune } from '@console/shared/src/components/dynamic-form/utils';
 import { hasNoFields } from './utils';
 // eslint-disable-next-line @typescript-eslint/camelcase
 import { DEPRECATED_CreateOperandForm } from './DEPRECATED_operand-form';
@@ -87,6 +87,8 @@ export const CreateOperand: React.FC<CreateOperandProps> = ({
 
   const sample = React.useMemo<K8sResourceKind>(() => exampleForModel(csv, model), [csv, model]);
 
+  const pruneFunc = React.useCallback((data) => prune(data, sample), [sample]);
+
   const onChangeEditorType = React.useCallback((newMethod) => {
     setHelpText(newMethod === EditorType.Form ? FORM_HELP_TEXT : YAML_HELP_TEXT);
   }, []);
@@ -123,6 +125,7 @@ export const CreateOperand: React.FC<CreateOperandProps> = ({
             initialData={sample}
             initialType={initialEditorType}
             onChangeEditorType={onChangeEditorType}
+            prune={pruneFunc}
             YAMLEditor={OperandYAML}
           />
         </>

frontend/packages/operator-lifecycle-manager/src/components/operand/operand-form.tsx

@@ -7,7 +7,6 @@ import { ClusterServiceVersionKind, CRDDescription, APIServiceDefinition } from
 import { ClusterServiceVersionLogo } from '../index';
 import { DynamicForm } from '@console/shared/src/components/dynamic-form';
 import { getUISchema } from './utils';
-import { prune } from '@console/shared';
 
 export const OperandForm: React.FC<OperandFormProps> = ({
   csv,
@@ -17,20 +16,21 @@ export const OperandForm: React.FC<OperandFormProps> = ({
   next,
   onChange,
   providedAPI,
+  prune,
   schema,
 }) => {
   const [errors, setErrors] = React.useState<string[]>([]);
   // const [formData, setFormData] = React.useState(initialData);
 
-  const processFormData = ({ metadata, spec, ...rest }) => {
-    return {
+  const processFormData = ({ metadata, ...rest }) => {
+    const data = {
       metadata: {
         ...metadata,
         ...(match?.params?.ns && model.namespaced && { namespace: match.params.ns }),
       },
-      spec: prune(spec),
       ...rest,
     };
+    return prune?.(data) ?? data;
   };
 
   const handleSubmit = ({ formData: submitFormData }) => {
@@ -86,5 +86,6 @@ export type OperandFormProps = {
   csv: ClusterServiceVersionKind;
   model: K8sKind;
   providedAPI: ProvidedAPI;
+  prune?: (data: any) => any;
   schema: JSONSchema6;
 };