Merge pull request #183 from zenml-io/stack-config

added config popup while clicking on tile

Author: talhainvenxion

src/ui/layouts/stackComponents/Stacks/List/GetFlavorsListForLogo.ts

@@ -5,14 +5,15 @@ import { sessionSelectors } from '../../../../../redux/selectors';
 
 export const GetFlavorsListForLogo = () => {
   const authToken = useSelector(sessionSelectors.authenticationToken);
-
+  const [fetching, setFetching] = useState(false);
   const [flavourList, setFlavourList] = useState([]);
   useEffect(() => {
     fetchFlavourList();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const fetchFlavourList = async () => {
+    setFetching(true);
     const response = await axios.get(
       `${process.env.REACT_APP_BASE_API_URL}/flavors?size=1000`,
       {
@@ -22,10 +23,13 @@ export const GetFlavorsListForLogo = () => {
       },
     );
 
-    setFlavourList(response?.data?.items); //Setting the response into state
+    setFlavourList(response?.data?.items);
+    setFetching(false);
+    //Setting the response into state
   };
 
   return {
+    fetching,
     flavourList,
   };
 };

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

@@ -8,18 +8,19 @@ import {
   LinkBox,
   Paragraph,
   H3,
-  PrimaryButton, 
+  PrimaryButton,
 } from '../../../../../components';
 
 import styles from './index.module.scss';
 
 const Dimmer: React.FC = () => <Box className={styles.dimmer}></Box>;
 
 export const SidePopup: React.FC<{
+  isCreate?: boolean;
   onSeeExisting: () => void;
   onClose: () => void;
-  registerStack: any;
-}> = ({ children, onClose, registerStack, onSeeExisting }) => (
+  registerStack?: any;
+}> = ({ children, onClose, registerStack, onSeeExisting, isCreate = true }) => (
   <>
     <Dimmer />
     <FlexBox
@@ -36,9 +37,11 @@ export const SidePopup: React.FC<{
       <Box className={styles.sidePopup}>
         <OutsideClickHandler onOutsideClick={onClose}>
           <Box paddingVertical="lg" paddingHorizontal="xxxl">
-            <H3 style={{ color: '#443E99', fontWeight: 'bold' }} >Configurations</H3>
-              {children}
-            </Box>
+            <H3 style={{ color: '#443E99', fontWeight: 'bold' }}>
+              Configurations
+            </H3>
+            {children}
+          </Box>
 
           <Box
             paddingVertical="lg"
@@ -51,9 +54,13 @@ export const SidePopup: React.FC<{
                   <Paragraph>Edit Component</Paragraph>
                 </LinkBox>
               </Box>
-              <Box>
-                <PrimaryButton onClick={registerStack}>Register Stack</PrimaryButton>
-              </Box>
+              {isCreate && (
+                <Box>
+                  <PrimaryButton onClick={registerStack}>
+                    Register Stack
+                  </PrimaryButton>
+                </Box>
+              )}
             </FlexBox.Row>
           </Box>
         </OutsideClickHandler>

src/ui/layouts/stacks/StackDetail/Configuration/index.module.scss

@@ -4,3 +4,67 @@
   font-size: $fontSizeBody;
   max-height: 75vh;
 }
+.field {
+  background: rgba(168, 168, 168, 0.1);
+  border: 1px solid #C9CBD0;
+  border-radius: 4px;
+}
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 38px;
+  height: 20px;
+}
+
+.switch input { 
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 17px;
+  width: 17px;
+  left: 1px;
+  bottom: 2px;
+  background-color: white;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+input:checked + .slider {
+  background-color: $primaryColor;
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 1px $primaryColor;
+}
+
+input:checked + .slider:before {
+  -webkit-transform: translateX(19px);
+  -ms-transform: translateX(19px);
+  transform: translateX(19px);
+}
+
+/* Rounded sliders */
+.slider.round {
+  border-radius: 34px;
+}
+
+.slider.round:before {
+  border-radius: 50%;
+}

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

@@ -2,7 +2,18 @@ import React, { useState } from 'react';
 
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { okaidia } from 'react-syntax-highlighter/dist/esm/styles/prism';
-import { FlexBox, Box, H4, GhostButton, icons } from '../../../../components';
+import {
+  FlexBox,
+  Box,
+  H4,
+  GhostButton,
+  icons,
+  Row,
+  FullWidthSpinner,
+  // Container,
+  EditField,
+  Paragraph,
+} from '../../../../components';
 import { iconColors, iconSizes } from '../../../../../constants';
 
 import { useDispatch } from '../../../../hooks';
@@ -13,11 +24,21 @@ import { translate } from '../translate';
 
 import styles from './index.module.scss';
 import { useService } from './useService';
+import { StackBox } from '../../../common/StackBox';
+import { SidePopup } from '../../CreateStack/ListForAll/SidePopup';
+import { NonEditableConfig } from '../../../NonEditableConfig';
+// import { SidePopup } from '../../../common/SidePopup';
 
-export const Configuration: React.FC<{ stackId: TId }> = ({ stackId }) => {
+export const Configuration: React.FC<{
+  stackId: TId;
+  tiles?: any;
+  fetching?: boolean;
+}> = ({ stackId, tiles, fetching = false }) => {
   const dispatch = useDispatch();
-  const { downloadYamlFile, stackConfig } = useService({ stackId });
+  const { downloadYamlFile, stackConfig, stack } = useService({ stackId });
   const [hover, setHover] = useState(false);
+  const [showPopup, setShowPopup] = useState<boolean>(false);
+  const [selectedStackBox, setSelectedStackBox] = useState<any>();
   const handleCopy = () => {
     navigator.clipboard.writeText(stackConfig);
     dispatch(
@@ -27,6 +48,9 @@ export const Configuration: React.FC<{ stackId: TId }> = ({ stackId }) => {
       }),
     );
   };
+  if (fetching) {
+    return <FullWidthSpinner color="black" size="md" />;
+  }
 
   return (
     <FlexBox.Column fullWidth>
@@ -59,6 +83,57 @@ export const Configuration: React.FC<{ stackId: TId }> = ({ stackId }) => {
           </GhostButton>
         </Box>
       </FlexBox>
+      <FlexBox.Row marginLeft="md">
+        {/* <Container> */}
+        <Box style={{ width: '30%' }}>
+          <EditField
+            disabled
+            onChangeText={() => console.log('')}
+            label={'Stack Name'}
+            optional={false}
+            value={stack.name}
+            placeholder=""
+            hasError={false}
+            className={styles.field}
+          />
+        </Box>
+        <FlexBox
+          marginLeft="xxl2"
+          justifyContent="space-between"
+          style={{ width: '20%' }}
+        >
+          <Paragraph>Share Component with public</Paragraph>
+
+          <label className={styles.switch}>
+            <input type="checkbox" checked={stack.isShared} />
+            <span className={`${styles.slider} ${styles.round}`}></span>
+          </label>
+        </FlexBox>
+        {/* </Container> */}
+      </FlexBox.Row>
+      <Box margin="md">
+        <Row>
+          {tiles &&
+            tiles.map((tile: any, index: number) => (
+              <Box
+                key={index}
+                className={styles.tile}
+                marginTop="md"
+                marginLeft="md"
+                onClick={() => {
+                  setShowPopup(true);
+                  setSelectedStackBox(tile);
+                }}
+              >
+                <StackBox
+                  image={tile.logo}
+                  stackName={tile.name}
+                  stackDesc={tile.type}
+                />
+              </Box>
+            ))}
+        </Row>
+      </Box>
       <FlexBox className={styles.code}>
         <SyntaxHighlighter
           customStyle={{ width: '100%' }}
@@ -69,6 +144,24 @@ export const Configuration: React.FC<{ stackId: TId }> = ({ stackId }) => {
           {stackConfig}
         </SyntaxHighlighter>
       </FlexBox>
+
+      {showPopup && (
+        <SidePopup
+          // registerStack={() => {
+          //   onCreateStack();
+          // }}
+          isCreate={false}
+          onSeeExisting={() => {}}
+          onClose={() => {
+            setShowPopup(false);
+            setSelectedStackBox(null);
+          }}
+        >
+          <Box marginTop="md" paddingBottom={'xxxl'}>
+            <NonEditableConfig details={selectedStackBox}></NonEditableConfig>
+          </Box>
+        </SidePopup>
+      )}
     </FlexBox.Column>
   );
 };

src/ui/layouts/stacks/StackDetail/Configuration/useService.ts

@@ -6,6 +6,7 @@ import YAML from 'json2yaml';
 interface ServiceInterface {
   downloadYamlFile: () => void;
   stackConfig: string;
+  stack: any;
 }
 
 export const useService = ({ stackId }: { stackId: TId }): ServiceInterface => {
@@ -39,5 +40,5 @@ export const useService = ({ stackId }: { stackId: TId }): ServiceInterface => {
     element.click();
   };
 
-  return { downloadYamlFile, stackConfig };
+  return { downloadYamlFile, stackConfig, stack };
 };