fix(ui): display valuesobject if set (#14257)

* fix: display valuesobject if set

With #11538 we now have the ability to set helm values as an object
instead of a string, but we also need to be able to correctly display
it in the UI if it is set.

Signed-off-by: Blake Pettersson <blake.pettersson@gmail.com>

* fix: set valuesobject on save

If `valuesObject` is present, set it to the value of
`input.spec.source.helm.values` on save, as an unmarshaled json string.

Signed-off-by: Blake Pettersson <blake.pettersson@gmail.com>

* fix: set `helm.values` to empty string on save

If `valuesObject` exists, set `input.spec.source.helm.values` to an
empty string once `valuesObject` has been unmarshalled from the
values input. This is to prevent unnecessary duplication of the values.

Signed-off-by: Blake Pettersson <blake.pettersson@gmail.com>

* chore: eslint

Signed-off-by: Blake Pettersson <blake.pettersson@gmail.com>

* chore: eslint

Signed-off-by: Blake Pettersson <blake.pettersson@gmail.com>

* fix: deep clone app

This is so that we can conditionally set `source.helm.values` without
inadvertently affecting other parts of the app. Only when the edit
button is pressed do we toggle `source.helm.values`.

Signed-off-by: Blake Pettersson <blake.pettersson@gmail.com>

* chore: eslint

Signed-off-by: Blake Pettersson <blake.pettersson@gmail.com>

---------

Signed-off-by: Blake Pettersson <blake.pettersson@gmail.com>

ui/src/app/applications/components/application-parameters/application-parameters.tsx

@@ -26,8 +26,6 @@ import {concatMaps} from '../../../shared/utils';
 import {getAppDefaultSource} from '../utils';
 import * as jsYaml from 'js-yaml';
 
-let isValuesRaw = false;
-
 const TextWithMetadataField = ReactFormField((props: {metadata: {value: string}; fieldApi: FieldApi; className: string}) => {
     const {
         fieldApi: {getValue, setValue}
@@ -128,17 +126,13 @@ export const ApplicationParameters = (props: {
     save?: (application: models.Application, query: {validate?: boolean}) => Promise<any>;
     noReadonlyMode?: boolean;
 }) => {
-    const app = props.application;
+    const app = cloneDeep(props.application);
     const source = getAppDefaultSource(app);
     const [removedOverrides, setRemovedOverrides] = React.useState(new Array<boolean>());
 
     let attributes: EditablePanelItem[] = [];
-    let appValues: string;
-    if (source && source.helm && source.helm.values) {
-        isValuesRaw = typeof source.helm.values !== 'string'; // nolint
-        appValues = isValuesRaw ? jsYaml.safeDump(source.helm.values) : source.helm.values;
-        source.helm.values = appValues;
-    }
+    const isValuesObject = source?.helm?.valuesObject;
+    const helmValues = isValuesObject ? jsYaml.safeDump(source.helm.valuesObject) : source?.helm?.values;
     const [appParamsDeletedState, setAppParamsDeletedState] = React.useState([]);
 
     if (props.details.type === 'Kustomize' && props.details.kustomize) {
@@ -225,16 +219,23 @@ export const ApplicationParameters = (props: {
             title: 'VALUES',
             view: source.helm && (
                 <Expandable>
-                    <pre>{appValues}</pre>
+                    <pre>{helmValues}</pre>
                 </Expandable>
             ),
-            edit: (formApi: FormApi) => (
-                <div>
-                    <pre>
-                        <FormField formApi={formApi} field='spec.source.helm.values' component={TextArea} />
-                    </pre>
-                </div>
-            )
+            edit: (formApi: FormApi) => {
+                // In case source.helm.valuesObject is set, set source.helm.values to its value
+                if (source.helm) {
+                    source.helm.values = helmValues;
+                }
+
+                return (
+                    <div>
+                        <pre>
+                            <FormField formApi={formApi} field='spec.source.helm.values' component={TextArea} />
+                        </pre>
+                    </div>
+                );
+            }
         });
         const paramsByName = new Map<string, models.HelmParameter>();
         (props.details.helm.parameters || []).forEach(param => paramsByName.set(param.name, param));
@@ -527,8 +528,9 @@ export const ApplicationParameters = (props: {
                         params = params.filter(param => !appParamsDeletedState.includes(param.name));
                         input.spec.source.plugin.parameters = params;
                     }
-                    if (input.spec.source.helm && input.spec.source.helm.values && isValuesRaw) {
-                        input.spec.source.helm.values = jsYaml.safeLoad(input.spec.source.helm.values); // Load values as json
+                    if (input.spec.source.helm && input.spec.source.helm.valuesObject) {
+                        input.spec.source.helm.valuesObject = jsYaml.safeLoad(input.spec.source.helm.values); // Deserialize json
+                        input.spec.source.helm.values = '';
                     }
                     await props.save(input, {});
                     setRemovedOverrides(new Array<boolean>());

ui/src/app/shared/models.ts

@@ -202,6 +202,7 @@ export interface ApplicationSource {
 export interface ApplicationSourceHelm {
     valueFiles: string[];
     values?: string;
+    valuesObject?: any;
     parameters: HelmParameter[];
     fileParameters: HelmFileParameter[];
 }