feat(helm): enhance helm chart install [r8s-341] (#766)

app/react/kubernetes/helm/components/HelmValuesInput.tsx

@@ -0,0 +1,80 @@
+import { FormControl } from '@@/form-components/FormControl';
+import { CodeEditor } from '@@/CodeEditor';
+import { ShortcutsTooltip } from '@@/CodeEditor/ShortcutsTooltip';
+
+type Props = {
+  values: string;
+  setValues: (values: string) => void;
+  valuesRef: string;
+  isValuesRefLoading: boolean;
+};
+
+export function HelmValuesInput({
+  values,
+  setValues,
+  valuesRef,
+  isValuesRefLoading,
+}: Props) {
+  return (
+    <div className="grid grid-cols-2 gap-4">
+      <FormControl
+        label="User-defined values"
+        inputId="user-values-editor"
+        size="vertical"
+        className="[&>label]:!mb-1 !mx-0"
+        tooltip={
+          <>
+            User-defined values will override the default chart values.
+            <br />
+            You can get more information about the Helm values file format in
+            the{' '}
+            <a
+              href="https://helm.sh/docs/chart_template_guide/values_files/"
+              target="_blank"
+              data-cy="helm-values-reference-link"
+              rel="noreferrer"
+            >
+              official documentation
+            </a>
+            .
+          </>
+        }
+      >
+        <CodeEditor
+          id="user-values-editor"
+          value={values}
+          onChange={setValues}
+          height="50vh"
+          type="yaml"
+          data-cy="helm-user-values-editor"
+          placeholder="Define or paste the content of your values yaml file here"
+          showToolbar={false}
+        />
+      </FormControl>
+      <FormControl
+        label={
+          <div className="flex justify-between w-full">
+            Values reference (read-only)
+            <ShortcutsTooltip />
+          </div>
+        }
+        inputId="values-reference"
+        size="vertical"
+        isLoading={isValuesRefLoading}
+        loadingText="Loading values..."
+        className="[&>label]:w-full [&>label]:!mb-1 !mx-0"
+      >
+        <CodeEditor
+          id="values-reference"
+          value={valuesRef}
+          height="50vh"
+          type="yaml"
+          readonly
+          data-cy="helm-values-reference"
+          placeholder="No values reference found"
+          showToolbar={false}
+        />
+      </FormControl>
+    </div>
+  );
+}