Merge branch 'dev' of https://github.com/zenml-io/zenml-dashboard into stack-creation-fixes

Author: AhsanKhan7

src/ui/components/icons/assets/Config.svg

@@ -47,6 +47,7 @@ import { ReactComponent as Search } from './assets/Search.svg';
 import { ReactComponent as Logs } from './assets/Logs.svg';
 import { ReactComponent as PlusCircle } from './assets/PlusCircle.svg';
 import { ReactComponent as MinusCircle } from './assets/MinusCircle.svg';
+import { ReactComponent as Config } from './assets/Config.svg';
 //icons for stackComponents
 // import { ReactComponent as PuzzlePiece } from './assets/PuzzlePiece.svg';
 import { ReactComponent as Folders } from './assets/Folders.svg';
@@ -176,7 +177,7 @@ const icons = {
   search: createIcon({ Component: Search }),
   run: createIcon({ Component: Run, useStroke: true }),
   logs: createIcon({ Component: Logs, useStroke: true }),
-
+  config: createIcon({ Component: Config, useStroke: true }),
   plusCircle: createIcon({ Component: PlusCircle, useStroke: true }),
   minusCircle: createIcon({ Component: MinusCircle, useStroke: true }),
   //icons for stackComponents

src/ui/components/icons/index.tsx

@@ -15,8 +15,14 @@
     background: rgba(168, 168, 168, 0.1);
     border: 1px solid #C9CBD0;
     border-radius: 4px;
+    position: relative;
 
   }
+  .copy{
+    right: 10px;
+    position: absolute;
+    cursor: pointer;
+  }
 
   .switch {
     position: relative;

src/ui/layouts/NonEditableRunConfig/index.module.scss

@@ -1,13 +1,17 @@
 import React from 'react';
-import { Box, EditField, Paragraph } from '../../components';
+import { Box, EditField, FlexBox, Paragraph, icons } from '../../components';
 import styles from './index.module.scss';
 import { titleCase } from '../../../utils';
 import { ToggleField } from '../common/FormElement';
 import JSONPretty from 'react-json-pretty';
+import { useDispatch } from '../../hooks';
+import { showToasterAction } from '../../../redux/actions';
+import { iconColors, iconSizes, toasterTypes } from '../../../constants';
 
 export const NonEditableRunConfig: React.FC<{ runConfiguration: any }> = ({
   runConfiguration,
 }) => {
+  const dispatch = useDispatch();
   const getFormElement: any = (elementName: any, elementSchema: any) => {
     if (typeof elementSchema === 'string') {
       return (
@@ -28,6 +32,16 @@ export const NonEditableRunConfig: React.FC<{ runConfiguration: any }> = ({
     }
 
     if (typeof elementSchema === 'object' && elementSchema !== null) {
+      const handleCopy = () => {
+        navigator.clipboard.writeText(JSON.stringify(elementSchema));
+
+        dispatch(
+          showToasterAction({
+            description: 'Config copied to clipboard',
+            type: toasterTypes.success,
+          }),
+        );
+      };
       return (
         <Box marginTop='lg' style={{ width: '40%' }}>
           <Paragraph size="body" style={{ color: 'black' }}>
@@ -38,6 +52,12 @@ export const NonEditableRunConfig: React.FC<{ runConfiguration: any }> = ({
             // marginVertical={'md'}
             className={styles.JSONPretty}
           >
+            <icons.copy
+              className={styles.copy}
+              onClick={handleCopy}
+              color={iconColors.black}
+              size={iconSizes.sm}
+            />
             <JSONPretty
               style={{ fontSize: '16px', fontFamily: 'Rubik' }}
               id="json-pretty"
@@ -64,11 +84,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 +97,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/NonEditableRunConfig/index.tsx

@@ -17,6 +17,14 @@
   position: absolute;
 }
 
+.viewConfig {
+  height: 18px;
+  width: 18px;
+  right:4px;
+  accent-color: $primaryColor;
+  position: absolute;
+}
+
 
 .imageWrapper {
   display: flex;

src/ui/layouts/common/CustomStackBox/index.module.scss

@@ -1,17 +1,19 @@
 import React from 'react';
-import { Box, Paragraph } from '../../../components';
+import { Box, Paragraph, icons } from '../../../components';
 
 import styles from './index.module.scss';
 import { titleCase } from '../../../../utils/camelCase';
 import ReactTooltip from 'react-tooltip';
+import { iconColors } from '../../../../constants';
 
 export const CustomStackBox: React.FC<{
   image: any;
   stackName: string;
   stackDesc: string;
   value?: any;
   onCheck: any;
-}> = ({ image, stackName, stackDesc, value, onCheck }) => {
+  onViewConfig: any;
+}> = ({ image, stackName, stackDesc, value, onCheck, onViewConfig }) => {
   return (
     <Box
       paddingHorizontal="sm2"
@@ -24,6 +26,15 @@ export const CustomStackBox: React.FC<{
         checked={value}
         onClick={onCheck}
       />
+
+      <icons.config
+        onClick={onViewConfig}
+        className={styles.viewConfig}
+        // size={iconSizes.sm}
+        // style={{ height: '18px', width: '18px' }}
+        color={iconColors.primary}
+      />
+
       <Box className={styles.imageWrapper}>
         <Box className={styles.imageContainer}>
           <img src={image} alt="by Zenml" />

src/ui/layouts/common/CustomStackBox/index.tsx

@@ -52,6 +52,7 @@
 
 .tableTd {
   vertical-align: middle;
+  white-space: nowrap
   // height: 53px !important;
 }
 

src/ui/layouts/common/Table/index.module.scss

@@ -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,

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

@@ -120,15 +120,36 @@ export const GetList: React.FC<Props> = ({
               marginLeft="md"
               style={{ cursor: 'pointer' }}
               onClick={() => {
-                setShowPopup(true);
+                // setShowPopup(true);
                 setSelectedStackBox(item);
+                var index = selectedStack.findIndex(function (s: any) {
+                  return s.id === item.id;
+                });
+                if (index !== -1) {
+                  selectedStack.splice(index, 1);
+                  setSelectedStack([...selectedStack]);
+                } else {
+                  if (selectedStack.map((t: any) => t.type === item.type)) {
+                    let filterSelectedStack = selectedStack.filter(
+                      (st: any) => st.type !== item.type,
+                    );
+                    setSelectedStack([...filterSelectedStack, item]);
+                  } else {
+                    setSelectedStack([...selectedStack, item]);
+                  }
+                }
               }}
             >
               {console.log(selectedStack, 'selectedStackselectedStack')}
               <CustomStackBox
                 image={item?.logoUrl}
                 stackName={item.name}
                 stackDesc={item?.flavor}
+                onViewConfig={(e: any) => {
+                  e.stopPropagation();
+                  setSelectedStackBox(item);
+                  setShowPopup(true);
+                }}
                 value={checkboxValue?.length > 0 ? true : false}
                 onCheck={(e: any) => {
                   e.stopPropagation();