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

Qa fixes

Author: talhainvenxion

src/ui/layouts/NonEditableRunConfig/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Box, EditField, Paragraph } from '../../components';
+import { Box, EditField, FlexBox, Paragraph } from '../../components';
 import styles from './index.module.scss';
 import { titleCase } from '../../../utils';
 import { ToggleField } from '../common/FormElement';
@@ -64,11 +64,11 @@ export const NonEditableRunConfig: React.FC<{ runConfiguration: any }> = ({
                 <span className={`${styles.slider} ${styles.round}`}></span>
               </label>
             </FlexBox.Row> */}
-            <ToggleField 
-              value={elementSchema} 
-              onHandleChange={() => {}} 
-              label={titleCase(elementName)} 
-              disabled={true}  
+            <ToggleField
+              value={elementSchema}
+              onHandleChange={() => {}}
+              label={titleCase(elementName)}
+              disabled={true}
             />
           </Box>
         </Box>
@@ -77,12 +77,12 @@ export const NonEditableRunConfig: React.FC<{ runConfiguration: any }> = ({
   };
 
   return (
-    <>
+    <FlexBox.Column marginLeft="md">
       {Object.keys(runConfiguration).map((key, ind) => (
         // <Col xs={6} key={ind}>
         <>{getFormElement(key, runConfiguration[key])}</>
         // </Col>
       ))}
-    </>
+    </FlexBox.Column>
   );
 };

src/ui/layouts/stackComponents/ConfigureComponent/CreateComponent/index.tsx

@@ -23,6 +23,7 @@ import axios from 'axios';
 import { routePaths } from '../../../../../routes/routePaths';
 import { SidePopup } from '../SidePopup';
 import { callActionForStackComponentsForPagination } from '../../Stacks/useService';
+// import { keys } from 'lodash';
 
 export const CreateComponent: React.FC<{ flavor: any }> = ({ flavor }) => {
   const {
@@ -86,7 +87,7 @@ export const CreateComponent: React.FC<{ flavor: any }> = ({ flavor }) => {
 
   const handleRemoveFields = (parentIndex: any, childIndex: any, name: any) => {
     const values = [...inputFields];
-    debugger;
+    // debugger;
     values[parentIndex][name].splice(childIndex, 1);
     setInputFields(values);
   };
@@ -322,15 +323,15 @@ export const CreateComponent: React.FC<{ flavor: any }> = ({ flavor }) => {
     const { id }: any = workspaces.find(
       (item) => item.name === selectedWorkspace,
     );
-
+    // debugger;
     const final: any = {};
     inputFields.forEach((ar: any) => {
       const keys = Object.keys(ar);
       keys.forEach((key) => {
         final[key] = {};
 
         ar[key].forEach((nestedArr: any) => {
-          if (nestedArr.key && nestedArr.value) {
+          if (nestedArr.key || nestedArr.value) {
             final[key] = {
               ...final[key],
               [nestedArr.key]: nestedArr.value,
@@ -343,7 +344,27 @@ export const CreateComponent: React.FC<{ flavor: any }> = ({ flavor }) => {
         });
       });
     });
-
+    for (const [key] of Object.entries(final)) {
+      // console.log(`${key}: ${value}`);
+      for (const [innerKey, innerValue] of Object.entries(final[key])) {
+        if (!innerKey && innerValue) {
+          return dispatch(
+            showToasterAction({
+              description: 'Key cannot be Empty.',
+              type: toasterTypes.failure,
+            }),
+          );
+        }
+        if (!innerValue && innerKey) {
+          return dispatch(
+            showToasterAction({
+              description: 'Value cannot be Empty.',
+              type: toasterTypes.failure,
+            }),
+          );
+        }
+      }
+    }
     const body = {
       user: user?.id,
       workspace: id,