Merge pull request #337 from zenml-io/edit-stack-details

Edit stack details

Author: talhainvenxion

src/routes/appRoutesConfig.tsx

@@ -17,6 +17,7 @@ import secrets from '../ui/layouts/secrets/Secrets';
 import stackComponents from '../ui/layouts/stackComponents/Stacks';
 import registerComponents from '../ui/layouts/stackComponents/RegisterComponents';
 import CreateStack from '../ui/layouts/stacks/CreateStack';
+import UpdateStack from '../ui/layouts/stacks/UpdateStack';
 import RegisterSecrets from '../ui/layouts/secrets/RegisterSecret';
 import PipelineDetail from '../ui/layouts/pipelines/PipelineDetail/index';
 import StackDetail from '../ui/layouts/stacks/StackDetail/index';
@@ -206,6 +207,15 @@ const routes = [
     },
     exact: true,
   },
+
+  {
+    path: routePaths.stacks.UpdateStack(':string', ':id'),
+    Component: UpdateStack,
+    visibility: {
+      authentication: RouteVisibilityAuthentication.authenticatedOnly,
+    },
+    exact: true,
+  },
   {
     path: routePaths.secrets.registerSecrets(':string'),
     Component: RegisterSecrets,

src/routes/routePaths.tsx

@@ -78,6 +78,8 @@ export const routePaths = {
     allRuns: '/stacks/all-runs',
     createStack: (workspace: string): string =>
       `/workspaces/${workspace}/create-stack/all-component`,
+    UpdateStack: (workspace: string, id: TId): string =>
+      `/workspaces/${workspace}/stack/${id}/update-stack`,
   },
   secrets: {
     base: '/secrets',

src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedHeader.module.scss

@@ -26,7 +26,7 @@ $width: 15rem;
   border-radius: 4px;
   box-shadow: $boxShadow;
   min-width: $width;
-  z-index: 9;
+  z-index: 100;
   top: 5rem;
   right: 0;
   text-align: end;
@@ -41,9 +41,9 @@ $width: 15rem;
 .popupItem:hover {
   background-color: $activeBgColor;
 }
-.your{
+.your {
   font-family: 'Rubik';
   font-size: 14px;
   font-weight: 300;
   line-height: 16.59px;
-}
+}

src/ui/layouts/stacks/BasePage.tsx

@@ -1,15 +1,15 @@
 import React from 'react';
-import { Redirect, useHistory } from 'react-router-dom';
+import { Redirect } from 'react-router-dom';
 import { AppRoute } from '../../../routes';
-import { Box, FlexBox, IfElse, PrimaryButton } from '../../components';
+import { Box, FlexBox, IfElse } from '../../components';
 import { AuthenticatedLayout } from '../common/layouts/AuthenticatedLayout';
 import { SidebarContainer } from '../common/layouts/SidebarContainer';
 import { Tabs } from '../common/Tabs';
 import Header from './Header';
 import Stacks from './Stacks';
-import { routePaths } from '../../../routes/routePaths';
-import { useSelector } from '../../hooks';
-import { workspaceSelectors } from '../../../redux/selectors';
+// import { routePaths } from '../../../routes/routePaths';
+// import { useSelector } from '../../hooks';
+// import { workspaceSelectors } from '../../../redux/selectors';
 
 export const BasePage: React.FC<{
   tabPages: TabPage[];
@@ -21,8 +21,8 @@ export const BasePage: React.FC<{
   renderHeaderRight?: () => JSX.Element;
   headerWithButtons?: boolean;
 }> = ({
-  fromRegisterComponent = false,
-  fromConfigureComponent = false,
+  // fromRegisterComponent = false,
+  // fromConfigureComponent = false,
   tabPages,
   title,
   breadcrumbs,
@@ -31,8 +31,8 @@ export const BasePage: React.FC<{
   headerWithButtons,
   children,
 }) => {
-  const history = useHistory();
-  const selectedWorkspace = useSelector(workspaceSelectors.selectedWorkspace);
+  // const history = useHistory();
+  // const selectedWorkspace = useSelector(workspaceSelectors.selectedWorkspace);
 
   return (
     <AuthenticatedLayout breadcrumb={[...breadcrumbs]}>
@@ -79,7 +79,7 @@ export const BasePage: React.FC<{
         </Box>
       </SidebarContainer>
 
-      {!fromRegisterComponent && !fromConfigureComponent && (
+      {/* {!fromRegisterComponent && !fromConfigureComponent && (
         <FlexBox
           style={{
             position: 'fixed',
@@ -98,7 +98,7 @@ export const BasePage: React.FC<{
             </PrimaryButton>
           </Box>
         </FlexBox>
-      )}
+      )} */}
     </AuthenticatedLayout>
   );
 };

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

@@ -6,7 +6,7 @@
 }
 .field {
   background: rgba(168, 168, 168, 0.1);
-  border: 1px solid #C9CBD0;
+  border: 1px solid #c9cbd0;
   border-radius: 4px;
 }
 .switch {
@@ -16,7 +16,7 @@
   height: 20px;
 }
 
-.switch input { 
+.switch input {
   opacity: 0;
   width: 0;
   height: 0;
@@ -30,20 +30,20 @@
   right: 0;
   bottom: 0;
   background-color: #ccc;
-  -webkit-transition: .4s;
-  transition: .4s;
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
 }
 
 .slider:before {
   position: absolute;
-  content: "";
+  content: '';
   height: 17px;
   width: 17px;
   left: 1px;
   bottom: 2px;
   background-color: white;
-  -webkit-transition: .4s;
-  transition: .4s;
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
 }
 
 input:checked + .slider {
@@ -67,4 +67,18 @@ input:checked + .slider:before {
 
 .slider.round:before {
   border-radius: 50%;
-}
+}
+
+.updateButton {
+  background: #ffffff;
+  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.05);
+  border-radius: 4px;
+  color: #443e99;
+}
+
+.updateButton:hover {
+  background: #443e99;
+  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.05);
+  border-radius: 4px;
+  color: #fff;
+}

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

@@ -12,6 +12,7 @@ import {
   FullWidthSpinner,
   // Container,
   EditField,
+  PrimaryButton,
   // Paragraph,
 } from '../../../../components';
 // import { iconColors, iconSizes } from '../../../../../constants';
@@ -172,7 +173,7 @@ export const Configuration: React.FC<{
           </GhostButton>
         </Box>
       </FlexBox> */}
-      <FlexBox.Row flexDirection='column' marginLeft="md" marginTop="lg">
+      <FlexBox.Row flexDirection="column" marginLeft="md" marginTop="lg">
         {/* <Container> */}
         <Box style={{ width: '30%' }}>
           <EditField
@@ -188,7 +189,7 @@ export const Configuration: React.FC<{
             className={styles.field}
           />
         </Box>
-        <Box marginTop='lg' >
+        <Box marginTop="lg">
           <ToggleField
             name="Share Component with public"
             value={stack.isShared}
@@ -292,6 +293,27 @@ export const Configuration: React.FC<{
           </Box>
         </SidePopup>
       )}
+      <FlexBox
+        style={{
+          position: 'fixed',
+          right: '0',
+          bottom: '0',
+          marginRight: '45px',
+        }}
+      >
+        <Box marginBottom="lg">
+          <PrimaryButton
+            onClick={() =>
+              history.push(
+                routePaths.stacks.UpdateStack(selectedWorkspace, stack.id),
+              )
+            }
+            className={styles.updateButton}
+          >
+            Update Stack
+          </PrimaryButton>
+        </Box>
+      </FlexBox>
     </FlexBox.Column>
   );
 };

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

@@ -32,7 +32,8 @@ import { GetHeaderCols } from './getHeaderCols';
 
 const FilterWrapperForRun = () => {
   const locationPath = useLocationPath();
-
+  // const selectedWorkspace = useSelector(workspaceSelectors.selectedWorkspace);
+  // const history = useHistory();
   // TODO: Dev please note: getInitialFilterState is for stack inital filter value for any other component you need to modify it
   const [filters, setFilter] = useState([getInitialFilterStateForRuns()]);
   function getFilter(values: any) {
@@ -46,14 +47,35 @@ const FilterWrapperForRun = () => {
     return filterValuesMap;
   }
   return (
-    <Box marginTop='lg' style={{ width: '100%' }}>
+    <Box marginTop="lg" style={{ width: '100%' }}>
       <FilterComponent
         getInitials={getInitialFilterStateForRuns}
         filters={filters}
         setFilter={setFilter}
       >
-        <Runs filter={getFilter(filters)} stackId={locationPath.split('/')[4]} />
+        <Runs
+          filter={getFilter(filters)}
+          stackId={locationPath.split('/')[4]}
+        />
       </FilterComponent>
+      {/* <FlexBox
+        style={{
+          position: 'fixed',
+          right: '0',
+          bottom: '0',
+          marginRight: '45px',
+        }}
+      >
+        <Box marginBottom="lg">
+          <PrimaryButton
+            onClick={() =>
+              history.push(routePaths.stacks.createStack(selectedWorkspace))
+            }
+          >
+            Register New Stack
+          </PrimaryButton>
+        </Box>
+      </FlexBox> */}
     </Box>
   );
 };

src/ui/layouts/stacks/Stacks/index.tsx

@@ -9,13 +9,15 @@ import { useService } from './useService';
 import FilterComponent, {
   getInitialFilterState,
 } from '../../../components/Filters';
-import { Box } from '../../../components';
+import { Box, FlexBox, PrimaryButton } from '../../../components';
 import { workspaceSelectors } from '../../../../redux/selectors';
-import { useLocationPath, useSelector } from '../../../hooks';
+import { useHistory, useLocationPath, useSelector } from '../../../hooks';
 // import { useSelector } from '../../../hooks';
 // import { workspaceSelectors } from '../../../../redux/selectors';
 
 const FilterWrapper = () => {
+  const selectedWorkspace = useSelector(workspaceSelectors.selectedWorkspace);
+  const history = useHistory();
   // TODO: Dev please note: getInitialFilterState is for stack inital filter value for any other component you need to modify it
   const [filters, setFilter] = useState([getInitialFilterState()]);
   function getFilter(values: any) {
@@ -37,6 +39,24 @@ const FilterWrapper = () => {
       >
         <List filter={getFilter(filters)} />
       </FilterComponent>
+      <FlexBox
+        style={{
+          position: 'fixed',
+          right: '0',
+          bottom: '0',
+          marginRight: '45px',
+        }}
+      >
+        <Box marginBottom="lg">
+          <PrimaryButton
+            onClick={() =>
+              history.push(routePaths.stacks.createStack(selectedWorkspace))
+            }
+          >
+            Register New Stack
+          </PrimaryButton>
+        </Box>
+      </FlexBox>
     </Box>
   );
 };