Merge pull request #184 from zenml-io/stack_creation_story_ahsan

Stack creation story ahsan

Author: talhainvenxion

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

@@ -8,8 +8,8 @@ export const CustomStackBox: React.FC<{
   image: any;
   stackName: string;
   stackDesc: string;
-  value?: boolean;
-  onCheck: () => void;
+  value?: any;
+  onCheck: any;
 }> = ({ image, stackName, stackDesc, value, onCheck }) => {
 
   return (
@@ -18,20 +18,20 @@ export const CustomStackBox: React.FC<{
       paddingVertical="sm2"
       className={styles.stackBox}
     >
-    <input type='checkbox' className={styles.checkbox} onClick={onCheck} />
+    <input type='checkbox' className={styles.checkbox} checked={value} onClick={onCheck} />
       <Box className={styles.imageWrapper}>
         <Box className={styles.imageContainer}>
           <img src={image} alt="by Zenml" />
         </Box>
       </Box>
 
       <Box style={{ marginTop: '8px' }}>
-        <Paragraph className={styles.stackName}>{stackName}</Paragraph>
+        <Paragraph className={styles.stackName}>{stackName?.slice(0, 15)}</Paragraph>
       </Box>
 
       <Box marginTop="xs">
         <Paragraph className={styles.stackDesc}>
-          {titleCase(stackDesc)}
+          {titleCase(stackDesc?.slice(0, 15))}
         </Paragraph>
       </Box>
     </Box>

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

@@ -55,13 +55,13 @@ export const StackBox: React.FC<{
 
       <Box style={{ marginTop: '8px' }}>
         <Paragraph className={styles.stackName}>
-          {titleCase(stackName)}
+          {titleCase(stackName?.slice(0, 15))}
         </Paragraph>
       </Box>
 
       <Box marginTop="xs">
         <Paragraph className={styles.stackDesc}>
-          {titleCase(stackDesc)}
+          {titleCase(stackDesc?.slice(0, 15))}
         </Paragraph>
       </Box>
     </Box>

src/ui/layouts/stacks/CreateStack/ListForAll/GetList/index.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
 
 import { Box, FlexBox, H3, FullWidthSpinner } from '../../../../../components';
+import { SidePopup } from '../SidePopup';
 
 import { StackBox } from '../../../../common/StackBox';
 import { CustomStackBox } from '../../../../common/CustomStackBox';
@@ -31,6 +32,7 @@ export const GetList: React.FC<Props> = ({
   const locationPath = useLocation() as any;
   const [fetching, setFetching] = useState(false);
   const [list, setlist] = useState([]);
+  const [showPopup, setShowPopup] = useState<boolean>(false);
   const selectedWorkspace = useSelector(workspaceSelectors.selectedWorkspace);
 
   useEffect(() => {
@@ -105,15 +107,21 @@ export const GetList: React.FC<Props> = ({
             <StackBox stackName="Create" stackDesc="Create a stack" />
           </div>
         </Box>
-        {list?.map((item: any) => (
-          <Box marginLeft="md">
+        {list?.map((item: any) => {
+          
+          const checkboxValue = selectedStack.filter((s: any) => {
+            return s.id === item.id;
+          });
+              
+         return (
+           <Box marginLeft="md" style={{ cursor: 'pointer' }} onClick={() => setShowPopup(true)}>
             <CustomStackBox
               image={item?.logoUrl}
               stackName={item.name}
-              stackDesc={item?.flavor}
-              value={false}
-              onCheck={() => {
-                // var selectedList = selectedStack;
+              stackDesc={item?.flavor.name}
+              value={checkboxValue?.length > 0 ? true : false}
+              onCheck={(e: any) => {
+                e.stopPropagation()
                 var index = selectedStack.findIndex(function (s: any) {
                   return s.id === item.id;
                 });
@@ -126,8 +134,29 @@ export const GetList: React.FC<Props> = ({
               }}
             />
           </Box>
-        ))}
+         )
+        })}
       </FlexBox.Row>
+    
+    
+      {showPopup && (
+        <SidePopup
+          isCreate={false}
+          onSeeExisting={() => {}}
+          onClose={() => setShowPopup(false)}
+        >
+          <Box marginTop="md">
+            {/* <FormTextField
+              onChange={(e: any) => {}}
+              placeholder=""
+              label='Stack Name'
+              value={selectedStackBox.name}
+            /> */}
+          </Box>
+        </SidePopup>
+      )}
+    
+    
     </>
   );
 };

src/ui/layouts/stacks/CreateStack/ListForAll/SidePopup/index.tsx

@@ -43,7 +43,7 @@ export const SidePopup: React.FC<{
             {children}
           </Box>
 
-          <Box
+        <Box
             paddingVertical="lg"
             paddingHorizontal="md"
             className={styles.actionSection}
@@ -63,6 +63,7 @@ export const SidePopup: React.FC<{
               )}
             </FlexBox.Row>
           </Box>
+          
         </OutsideClickHandler>
       </Box>
     </FlexBox>

src/ui/layouts/stacks/CreateStack/ListForAll/index.tsx

@@ -216,6 +216,7 @@ export const ListForAll: React.FC<Props> = () => {
 
       {showPopup && (
         <SidePopup
+          isCreate={true}
           registerStack={() => {
             onCreateStack();
           }}
@@ -231,51 +232,6 @@ export const ListForAll: React.FC<Props> = () => {
         </SidePopup>
       )}
 
-      {/* <Box marginTop="lg" style={{ overflowX: 'auto' }}>
-        <FlexBox.Row alignItems="center">
-          <H3 style={{ fontWeight: 'bold' }}>Artifact Store</H3>
-          <span style={helperTextStyle}>&#40;5 Components&#41;</span>
-        </FlexBox.Row>
-        <FlexBox.Row>
-          <Box style={{ width: '171px' }}>
-            <StackBox stackName="Create" stackDesc="Create a stack" />
-          </Box>
-          {Array(5)
-            .fill(null)
-            ?.map(() => (
-              <Box marginLeft="md">
-                <CustomStackBox
-                  image={logo}
-                  stackName="Sample"
-                  stackDesc="example text"
-                />
-              </Box>
-            ))}
-        </FlexBox.Row>
-      </Box> */}
-
-      {/* <Box marginTop="lg" style={{ overflowX: 'auto' }}>
-        <FlexBox.Row alignItems="center">
-          <H3 style={{ fontWeight: 'bold' }}>Secret Manager</H3>
-          <span style={helperTextStyle}>&#40;7 Components&#41;</span>
-        </FlexBox.Row>
-        <FlexBox.Row>
-          <Box style={{ width: '171px' }}>
-            <StackBox stackName="Create" stackDesc="Create a stack" />
-          </Box>
-          {Array(7)
-            .fill(null)
-            ?.map(() => (
-              <Box marginLeft="md">
-                <CustomStackBox
-                  image={logo}
-                  stackName="Sample"
-                  stackDesc="example text"
-                />
-              </Box>
-            ))}
-        </FlexBox.Row>
-      </Box> */}
     </Box>
   );
 };