From 03dc4a7a5f7205125b0bb89bb7d98a9185bd2897 Mon Sep 17 00:00:00 2001
From: Blake Pettersson <blake.pettersson@gmail.com>
Date: Thu, 27 Jul 2023 18:48:40 +0000
Subject: [PATCH] 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>
---
 .../application-parameters.tsx                | 40 ++++++++++---------
 ui/src/app/shared/models.ts                   |  1 +
 2 files changed, 22 insertions(+), 19 deletions(-)

diff --git a/ui/src/app/applications/components/application-parameters/application-parameters.tsx b/ui/src/app/applications/components/application-parameters/application-parameters.tsx
index f374678540189..27f292ff7d2e8 100644
--- a/ui/src/app/applications/components/application-parameters/application-parameters.tsx
+++ b/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>());
diff --git a/ui/src/app/shared/models.ts b/ui/src/app/shared/models.ts
index f7530028bfee6..7604e4c39bd1e 100644
--- a/ui/src/app/shared/models.ts
+++ b/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[];
 }