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

talhainvenxion · web-flow · commit 9b281e7f463d · 2023-02-27T14:23:01.000+05:00
Qa fixes
diff --git a/src/api/stackComponents/getStackComponentListApi.ts b/src/api/stackComponents/getStackComponentListApi.ts
@@ -11,6 +11,7 @@ const getMyStackComponentsApi = ({
   size,
   type,
   filtersParam,
+  id,
   workspace,
 }: {
   workspace: string;
@@ -19,12 +20,13 @@ const getMyStackComponentsApi = ({
   logical_operator: string;
   type: string;
   filtersParam?: object;
+  id?: any;
   page: number;
   size: number;
 }): Promise<TStack> =>
   fetchApiWithAuthRequest({
     url: apiUrl(endpoints.StackComponents.my(type, workspace)),
-    params: { sort_by, logical_operator, page, size, ...filtersParam },
+    params: { sort_by, logical_operator, page, size, ...filtersParam, id },
     method: httpMethods.get,
     authenticationToken,
   });
diff --git a/src/redux/actions/stackComponents/getStackComponentListAction.ts b/src/redux/actions/stackComponents/getStackComponentListAction.ts
@@ -9,6 +9,7 @@ export const getStackComponentListAction = ({
   page,
   size,
   filtersParam,
+  id,
   onSuccess,
   onFailure,
 }: {
@@ -19,6 +20,7 @@ export const getStackComponentListAction = ({
   page: number;
   size: number;
   filtersParam?: object;
+  id?: any;
   onSuccess?: (res: any) => void;
   onFailure?: (res: any) => void;
 }): TRequestAction => ({
@@ -36,6 +38,7 @@ export const getStackComponentListAction = ({
       page,
       size,
       filtersParam,
+      id,
     },
     onSuccess,
     onFailure,
diff --git a/src/ui/layouts/stackComponents/Stacks/useService.ts b/src/ui/layouts/stackComponents/Stacks/useService.ts
@@ -74,6 +74,7 @@ export const callActionForStackComponentsForPagination = () => {
     size: number,
     filters?: any[],
     sortby?: string,
+    id?: any,
   ) {
     const logicalOperator = localStorage.getItem('logical_operator');
 
@@ -90,6 +91,7 @@ export const callActionForStackComponentsForPagination = () => {
         page: page,
         size: size,
         filtersParam,
+        id: id,
         onSuccess: () => setFetching(false),
         onFailure: () => setFetching(false),
       }),
diff --git a/src/ui/layouts/stacks/CreateStack/ListForAll/GetList/index.tsx b/src/ui/layouts/stacks/CreateStack/ListForAll/GetList/index.tsx
@@ -126,7 +126,7 @@ export const GetList: React.FC<Props> = ({
               <CustomStackBox
                 image={item?.logoUrl}
                 stackName={item.name}
-                stackDesc={item?.flavor.name}
+                stackDesc={item?.flavor}
                 value={checkboxValue?.length > 0 ? true : false}
                 onCheck={(e: any) => {
                   e.stopPropagation();
@@ -149,7 +149,32 @@ export const GetList: React.FC<Props> = ({
       {showPopup && (
         <SidePopup
           isCreate={false}
-          onSeeExisting={() => {}}
+          onSeeExisting={() => {
+            // debugger;
+            dispatch(
+              stackComponentsActions.getMy({
+                workspace: selectedWorkspace
+                  ? selectedWorkspace
+                  : locationPath.split('/')[2],
+                type: selectedStackBox.type,
+
+                page: 1,
+                size: 1,
+                id: selectedStackBox.id,
+                onSuccess: () => {
+                  setFetching(false);
+                  history.push(
+                    routePaths.stackComponents.configuration(
+                      selectedStackBox.type,
+                      selectedStackBox.id,
+                      selectedWorkspace,
+                    ),
+                  );
+                },
+                onFailure: () => setFetching(false),
+              }),
+            );
+          }}
           onClose={() => setShowPopup(false)}
         >
           <Box marginTop="md" paddingBottom={'xxxl'}>
diff --git a/src/ui/layouts/stacks/CreateStack/ListForAll/SidePopup/index.tsx b/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,7 +63,6 @@ export const SidePopup: React.FC<{
               )}
             </FlexBox.Row>
           </Box>
-          
         </OutsideClickHandler>
       </Box>
     </FlexBox>
diff --git a/src/ui/layouts/stacks/CreateStack/ListForAll/index.tsx b/src/ui/layouts/stacks/CreateStack/ListForAll/index.tsx
@@ -13,10 +13,13 @@ import { useDispatch, useSelector } from 'react-redux';
 import { GetList } from './GetList';
 import { GetFlavorsListForLogo } from '../../../stackComponents/Stacks/List/GetFlavorsListForLogo';
 import { SidePopup } from './SidePopup';
-import { showToasterAction } from '../../../../../redux/actions';
+import {
+  showToasterAction,
+  stackComponentsActions,
+} from '../../../../../redux/actions';
 import axios from 'axios';
 import { toasterTypes } from '../../../../../constants';
-import { useHistory } from '../../../../hooks';
+import { useHistory, useLocation } from '../../../../hooks';
 import { routePaths } from '../../../../../routes/routePaths';
 import { NonEditableConfig } from '../../../NonEditableConfig';
 // import { callActionForStacksForPagination } from '../../Stacks/useService';
@@ -27,6 +30,7 @@ export const ListForAll: React.FC<Props> = () => {
   const stackComponentsTypes: any[] = useSelector(
     stackComponentSelectors.stackComponentTypes,
   );
+  const locationPath = useLocation() as any;
   // const { dispatchStackData } = callActionForStacksForPagination();
   const history = useHistory();
   const dispatch = useDispatch();
@@ -231,7 +235,31 @@ export const ListForAll: React.FC<Props> = () => {
           registerStack={() => {
             onCreateStack();
           }}
-          onSeeExisting={() => {}}
+          onSeeExisting={() => {
+            dispatch(
+              stackComponentsActions.getMy({
+                workspace: selectedWorkspace
+                  ? selectedWorkspace
+                  : locationPath.split('/')[2],
+                type: selectedStackBox.type,
+
+                page: 1,
+                size: 1,
+                id: selectedStackBox.id,
+                onSuccess: () => {
+                  // setFetching(false);
+                  history.push(
+                    routePaths.stackComponents.configuration(
+                      selectedStackBox.type,
+                      selectedStackBox.id,
+                      selectedWorkspace,
+                    ),
+                  );
+                },
+                onFailure: () => {},
+              }),
+            );
+          }}
           onClose={() => {
             setShowPopup(false);
             setSelectedStackBox(null);
diff --git a/src/ui/layouts/stacks/StackDetail/Configuration/index.tsx b/src/ui/layouts/stacks/StackDetail/Configuration/index.tsx
@@ -1,26 +1,26 @@
 import React, { useState } from 'react';
 
-import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { okaidia } from 'react-syntax-highlighter/dist/esm/styles/prism';
+// import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+// import { okaidia } from 'react-syntax-highlighter/dist/esm/styles/prism';
 import {
   FlexBox,
   Box,
-  H4,
-  GhostButton,
-  icons,
+  // H4,
+  // GhostButton,
+  // icons,
   Row,
   FullWidthSpinner,
   // Container,
   EditField,
   Paragraph,
 } from '../../../../components';
-import { iconColors, iconSizes } from '../../../../../constants';
+// import { iconColors, iconSizes } from '../../../../../constants';
 
-import { useDispatch } from '../../../../hooks';
-import { showToasterAction } from '../../../../../redux/actions';
-import { toasterTypes } from '../../../../../constants';
+// import { useDispatch } from '../../../../hooks';
+// import { showToasterAction } from '../../../../../redux/actions';
+// import { toasterTypes } from '../../../../../constants';
 
-import { translate } from '../translate';
+// import { translate } from '../translate';
 
 import styles from './index.module.scss';
 import { useService } from './useService';
@@ -34,27 +34,27 @@ export const Configuration: React.FC<{
   tiles?: any;
   fetching?: boolean;
 }> = ({ stackId, tiles, fetching = false }) => {
-  const dispatch = useDispatch();
-  const { downloadYamlFile, stackConfig, stack } = useService({ stackId });
-  const [hover, setHover] = useState(false);
+  // const dispatch = useDispatch();
+  const { 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(
-      showToasterAction({
-        description: 'Config copied to clipboard',
-        type: toasterTypes.success,
-      }),
-    );
-  };
+  // const handleCopy = () => {
+  //   navigator.clipboard.writeText(stackConfig);
+  //   dispatch(
+  //     showToasterAction({
+  //       description: 'Config copied to clipboard',
+  //       type: toasterTypes.success,
+  //     }),
+  //   );
+  // };
   if (fetching) {
     return <FullWidthSpinner color="black" size="md" />;
   }
 
   return (
     <FlexBox.Column fullWidth>
-      <FlexBox
+      {/* <FlexBox
         marginBottom="md"
         alignItems="center"
         justifyContent="space-between"
@@ -82,8 +82,8 @@ export const Configuration: React.FC<{
             />
           </GhostButton>
         </Box>
-      </FlexBox>
-      <FlexBox.Row marginLeft="md">
+      </FlexBox> */}
+      <FlexBox.Row marginLeft="md" marginTop="lg">
         {/* <Container> */}
         <Box style={{ width: '30%' }}>
           <EditField
@@ -134,7 +134,7 @@ export const Configuration: React.FC<{
             ))}
         </Row>
       </Box>
-      <FlexBox className={styles.code}>
+      {/* <FlexBox className={styles.code}>
         <SyntaxHighlighter
           customStyle={{ width: '100%' }}
           wrapLines={true}
@@ -143,7 +143,7 @@ export const Configuration: React.FC<{
         >
           {stackConfig}
         </SyntaxHighlighter>
-      </FlexBox>
+      </FlexBox> */}
 
       {showPopup && (
         <SidePopup
