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

Qa fixes

Author: talhainvenxion

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

@@ -27,6 +27,15 @@ import { useService } from './useService';
 import { StackBox } from '../../../common/StackBox';
 import { SidePopup } from '../../CreateStack/ListForAll/SidePopup';
 import { NonEditableConfig } from '../../../NonEditableConfig';
+import { useDispatch, useSelector } from '../../../../hooks';
+import {
+  sessionSelectors,
+  userSelectors,
+  workspaceSelectors,
+} from '../../../../../redux/selectors';
+import { showToasterAction, stacksActions } from '../../../../../redux/actions';
+import { toasterTypes } from '../../../../../constants';
+import axios from 'axios';
 // import { SidePopup } from '../../../common/SidePopup';
 
 export const Configuration: React.FC<{
@@ -36,6 +45,12 @@ export const Configuration: React.FC<{
 }> = ({ stackId, tiles, fetching = false }) => {
   // const dispatch = useDispatch();
   const { stack } = useService({ stackId });
+  const user = useSelector(userSelectors.myUser);
+  const authToken = useSelector(sessionSelectors.authenticationToken);
+  const selectedWorkspace = useSelector(workspaceSelectors.selectedWorkspace);
+  const workspaces = useSelector(workspaceSelectors.myWorkspaces);
+  const [loading, setLoading] = useState(false);
+  const dispatch = useDispatch();
   // const [hover, setHover] = useState(false);
   const [showPopup, setShowPopup] = useState<boolean>(false);
   const [selectedStackBox, setSelectedStackBox] = useState<any>();
@@ -51,6 +66,66 @@ export const Configuration: React.FC<{
   if (fetching) {
     return <FullWidthSpinner color="black" size="md" />;
   }
+  if (loading) {
+    return <FullWidthSpinner color="black" size="md" />;
+  }
+  const onCallApi = (name?: string, toggle?: boolean) => {
+    // ;
+    const { id }: any = workspaces.find(
+      (item) => item.name === selectedWorkspace,
+    );
+
+    const body = {
+      user: user?.id,
+      workspace: id,
+      is_shared: toggle,
+      name: name,
+    };
+    setLoading(true);
+    axios
+      .put(
+        `${process.env.REACT_APP_BASE_API_URL}/stacks/${stackId}`,
+        // @ts-ignore
+        body,
+        { headers: { Authorization: `Bearer ${authToken}` } },
+      )
+      .then((response: any) => {
+        // const id = response.data.id;
+
+        // setLoading(false);
+        dispatch(
+          showToasterAction({
+            description: 'Stack has been updated successfully.',
+            type: toasterTypes.success,
+          }),
+        );
+
+        dispatch(
+          stacksActions.stackForId({
+            stackId: stackId,
+            onSuccess: () => setLoading(false),
+            onFailure: () => setLoading(false),
+          }),
+        );
+      })
+      .catch((err) => {
+        setLoading(false);
+        // ;
+
+        dispatch(
+          showToasterAction({
+            description: err?.response?.data?.detail[0],
+            type: toasterTypes.failure,
+          }),
+        );
+      });
+  };
+
+  const onPressEnter = (event?: any, defaultValue?: any) => {
+    if (event.key === 'Enter') {
+      onCallApi(event.target.value);
+    }
+  };
 
   return (
     <FlexBox.Column fullWidth>
@@ -87,11 +162,13 @@ export const Configuration: React.FC<{
         {/* <Container> */}
         <Box style={{ width: '30%' }}>
           <EditField
-            disabled
-            onChangeText={() => console.log('')}
+            // disabled
+            onKeyDown={(e: any) => onPressEnter(e, stack.is_shared)}
+            onChangeText={(e: any) => onPressEnter(e, stack.is_shared)}
             label={'Stack Name'}
             optional={false}
-            value={stack.name}
+            defaultValue={stack.name}
+            // value={stack.name}
             placeholder=""
             hasError={false}
             className={styles.field}
@@ -105,7 +182,12 @@ export const Configuration: React.FC<{
           <Paragraph>Share Component with public</Paragraph>
 
           <label className={styles.switch}>
-            <input type="checkbox" checked={stack.isShared} />
+            <input
+              type="checkbox"
+              defaultChecked={stack.isShared}
+              // checked={stack.isShared}
+              onChange={() => onCallApi(stack.name, !stack.isShared)}
+            />
             <span className={`${styles.slider} ${styles.round}`}></span>
           </label>
         </FlexBox>