fix: set correct workload values on first load (#455)

* fix: set correct workload values on first load

* fix: review comments

(cherry picked from commit 901a979)

Author: CasLubbers

src/components/CodeEditor.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/restrict-plus-operands */
 /* eslint-disable no-nested-ternary */
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { Editor } from '@monaco-editor/react'
 import { isEmpty } from 'lodash'
 import { Box } from '@mui/material'
@@ -51,6 +51,7 @@ interface Props {
   setValid?: CallableFunction
   showComments?: boolean
   validationSchema?: any
+  setWorkloadValues?: CallableFunction
 }
 
 const toYaml = (obj) => YAML.stringify(obj, { blockQuote: 'literal' })
@@ -63,6 +64,7 @@ export default function CodeEditor({
   disabled,
   showComments = false,
   validationSchema,
+  setWorkloadValues,
   ...props
 }: Props): React.ReactElement {
   const [startCode] = useState(isEmpty(inCode) ? '' : toYaml(inCode).replace('|\n', '').replace(/\n$/, ''))
@@ -116,6 +118,11 @@ export default function CodeEditor({
     validateCode(newValue)
   }
 
+  useEffect(() => {
+    const obj = fromYaml(modifiedCode)
+    setWorkloadValues(obj)
+  }, [modifiedCode])
+
   return (
     <>
       <Editor

src/components/WorkloadValues.tsx

@@ -30,7 +30,14 @@ export default function ({
   return (
     <Box pt={2}>
       {show && workloadValues ? (
-        <CodeEditor code={yaml} onChange={(data) => setWorkloadValues(data)} showComments={showComments} />
+        <CodeEditor
+          code={yaml}
+          onChange={(data) => {
+            setWorkloadValues(data)
+          }}
+          setWorkloadValues={setWorkloadValues}
+          showComments={showComments}
+        />
       ) : (
         <CircularProgress sx={{ mb: '1rem' }} />
       )}