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

Qa fixes

Author: talhainvenxion

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

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

@@ -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();