Merge pull request #332 from zenml-io/QA-Fixes

Qa fixes

Author: talhainvenxion

src/ui/layouts/secrets/Selector/Selector.tsx

@@ -32,29 +32,34 @@ const Selector: React.FC<Props> = ({
   useEffect(() => {
     // ...values,
     // { key: '', value: '' },
-    if (routeState?.state?.routeFromComponent) {
-      const secretKeyValuefromRoute: any = {
-        key: routeState?.state?.secretKey,
-        value: routeState?.state?.inputData[routeState?.state?.secretKey],
-      };
-
-      setInputFields([...inputFields, secretKeyValuefromRoute]);
-    } else if (values?.length && !routeState?.state?.routeFromComponent) {
-      setInputFields([...values]);
-    } else {
-      setInputFields([{ key: '', value: '' }]);
-    }
-
-    if (routeState?.state?.routeFromEditComponent) {
-      const secretKeyValuefromRoute: any = {
-        key: routeState?.state?.secretKey,
-        value:
-          routeState?.state?.mappedConfiguration[routeState?.state?.secretKey],
-      };
-
-      setInputFields([...inputFields, secretKeyValuefromRoute]);
-    } else if (values?.length && !routeState?.state?.routeFromEditComponent) {
-      setInputFields([...values]);
+    if (
+      routeState?.state?.routeFromComponent ||
+      routeState?.state?.routeFromEditComponent
+    ) {
+      if (routeState?.state?.routeFromComponent) {
+        const secretKeyValuefromRoute: any = {
+          key: routeState?.state?.secretKey,
+          value: routeState?.state?.inputData[routeState?.state?.secretKey],
+        };
+
+        setInputFields([...inputFields, secretKeyValuefromRoute]);
+      } else if (values?.length && !routeState?.state?.routeFromComponent) {
+        setInputFields([...values]);
+      }
+
+      if (routeState?.state?.routeFromEditComponent) {
+        const secretKeyValuefromRoute: any = {
+          key: routeState?.state?.secretKey,
+          value:
+            routeState?.state?.mappedConfiguration[
+              routeState?.state?.secretKey
+            ],
+        };
+
+        setInputFields([...inputFields, secretKeyValuefromRoute]);
+      } else if (values?.length && !routeState?.state?.routeFromEditComponent) {
+        setInputFields([...values]);
+      }
     } else {
       setInputFields([{ key: '', value: '' }]);
     }

src/ui/layouts/stackComponents/StackDetail/Configuration/index.tsx

@@ -423,7 +423,6 @@ export const Configuration: React.FC<{ stackId: TId; loading?: boolean }> = ({
             </>
           ))}
           {inputFields.map((inputField: any, index: any) => (
-          
             <FlexBox.Row key={`${inputField}~${index}`}>
               <Box marginTop="lg">
                 <EditField
@@ -482,7 +481,30 @@ export const Configuration: React.FC<{ stackId: TId; loading?: boolean }> = ({
 
           <FlexBox.Row>
             <div className="form-row">
-              {mappedObject &&
+              {mappedObject && mappedObject[elementName].length < 1 ? (
+                <>
+                  {' '}
+                  <Fragment>
+                    <div className="form-group col-sm-8">
+                      <EditField
+                        disabled
+                        className={styles.field}
+                        label={'Value'}
+                        value={''}
+                        placeholder={''}
+                      />
+                    </div>
+                    <div
+                      className="col-sx-2 "
+                      style={{
+                        justifyContent: 'space-between',
+                        display: 'flex',
+                        marginTop: '10px',
+                      }}
+                    ></div>
+                  </Fragment>
+                </>
+              ) : (
                 mappedObject[elementName]?.map((item: any, index: any) => (
                   <Fragment>
                     <div className="form-group col-sm-8">
@@ -501,18 +523,10 @@ export const Configuration: React.FC<{ stackId: TId; loading?: boolean }> = ({
                         display: 'flex',
                         marginTop: '10px',
                       }}
-                    >
-                      <div
-                        style={{
-                          display: 'flex',
-                          flexDirection: 'row',
-                          justifyContent: 'space-between',
-                          alignItems: 'center',
-                        }}
-                      ></div>
-                    </div>
+                    ></div>
                   </Fragment>
-                ))}
+                ))
+              )}
               {/* {inputFields
               ?.filter((x: any) => x.hasOwnProperty(props.name))
               .map((inputField: any, index: any) => (

src/ui/layouts/stackComponents/UpdateComponent/UpdateConfig/index.tsx

@@ -151,16 +151,19 @@ export const UpdateConfig: React.FC<{
           function (r: any, name: any) {
             return (
               (r[name] =
-                flavor?.configSchema?.properties[name].type === 'string' &&
-                flavor?.configSchema?.properties[name].default === undefined
+                flavor?.configSchema?.properties[name]?.type === 'string' &&
+                flavor?.configSchema?.properties[name]?.default === undefined
                   ? ''
-                  : flavor?.configSchema?.properties[name].default),
+                  : flavor?.configSchema?.properties[name]?.type === 'array' &&
+                    !flavor?.configSchema?.properties[name]?.default?.length
+                  ? ['']
+                  : flavor?.configSchema?.properties[name]?.default),
               r
             );
           },
           {},
         );
-
+        console.log(result, 'asdasdasd23232');
         const mappedObject = {
           ...result,
           ...stackComponent?.configuration,
@@ -209,41 +212,45 @@ export const UpdateConfig: React.FC<{
     let tempFinal: any = {};
 
     Object.keys(inputFields).forEach((key) => {
-      const newObj: any = {};
-      inputFields[key].forEach((obj: any) => {
-        if (obj.key !== undefined && (obj.key !== '' || obj.value !== '')) {
-          if (newObj[obj.key] !== undefined) {
-            dispatch(
-              showToasterAction({
-                description: 'Key already exists.',
-                type: toasterTypes.failure,
-              }),
-            );
-          } else {
-            newObj[obj.key] = obj.value;
+      if (flavor?.configSchema?.properties[key].type !== 'array') {
+        const newObj: any = {};
+        inputFields[key].forEach((obj: any) => {
+          if (obj.key !== undefined && (obj.key !== '' || obj.value !== '')) {
+            if (newObj[obj.key] !== undefined) {
+              dispatch(
+                showToasterAction({
+                  description: 'Key already exists.',
+                  type: toasterTypes.failure,
+                }),
+              );
+            } else {
+              newObj[obj.key] = obj.value;
+            }
           }
-        }
-      });
-      tempFinal[key] = newObj;
+        });
+        tempFinal[key] = newObj;
+      }
     });
     const final: any = {};
 
     Object.keys(inputFields).forEach((key) => {
-      const newObj: any = {};
-      inputFields[key].forEach((obj: any) => {
-        if (obj.key !== undefined && (obj.key !== '' || obj.value !== '')) {
-          if (newObj[obj.key] !== undefined) {
-            dispatch(
-              showToasterAction({
-                description: 'Key already exists.',
-                type: toasterTypes.failure,
-              }),
-            );
+      if (flavor?.configSchema?.properties[key].type !== 'array') {
+        const newObj: any = {};
+        inputFields[key].forEach((obj: any) => {
+          if (obj.key !== undefined && (obj.key !== '' || obj.value !== '')) {
+            if (newObj[obj.key] !== undefined) {
+              dispatch(
+                showToasterAction({
+                  description: 'Key already exists.',
+                  type: toasterTypes.failure,
+                }),
+              );
+            }
+            newObj[obj.key] = obj.value;
           }
-          newObj[obj.key] = obj.value;
-        }
-      });
-      final[key] = newObj;
+        });
+        final[key] = newObj;
+      }
     });
 
     const body = {