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

Qa fixes

Author: danialraza03

src/routes/appRoutesConfig.tsx

@@ -157,6 +157,15 @@ const routes = [
     },
     exact: true,
   },
+  {
+    path: routePaths.stack.components(':id', ':string'),
+    Component: StackDetail,
+    visibility: {
+      authentication: RouteVisibilityAuthentication.authenticatedOnly,
+    },
+    exact: true,
+  },
+
   {
     path: routePaths.stack.runs(':string', ':id'),
     Component: StackDetail,

src/routes/routePaths.tsx

@@ -83,6 +83,8 @@ export const routePaths = {
       `/workspaces/${workspace}/stacks/${id}/configuration`,
     runs: (workspace: string, id: TId): string =>
       `/workspaces/${workspace}/stacks/${id}/runs`,
+    components: (id: TId, workspace: string): string =>
+      `/workspaces/${workspace}/stacks/${id}/components`,
   },
   runs: {
     base: (id: TId): string => `/stacks/${id}`,

src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedSidebar/Menu/index.tsx

@@ -16,7 +16,6 @@ import {
 // import { matchPath } from 'react-router-dom';
 
 export const Menu: React.FC = () => {
-  
   const stackComponentsTypes: any[] = useSelector(
     stackComponentSelectors.stackComponentTypes,
   );
@@ -39,9 +38,7 @@ export const Menu: React.FC = () => {
       />
       <MenuItem
         id="runs"
-        Icon={() => (
-          <icons.run color={iconColors.white} size={iconSizes.md} />
-        )}
+        Icon={() => <icons.run color={iconColors.white} size={iconSizes.md} />}
         to={routePaths.pipelines.allRuns(selectedWorkspace)}
         isActive={() => window.location.href?.includes('all-runs')}
         text={'Runs'}
@@ -67,7 +64,10 @@ export const Menu: React.FC = () => {
         innerItem={window.location.href?.includes('stacks')}
         // to={routePaths.stacks.base}
         text={translate('menu.stacks.text')}
-        isActive={() => window.location.href?.includes('stacks')}
+        isActive={() =>
+          window.location.href?.includes('stacks') &&
+          !window.location.href?.includes('components')
+        }
         to={routePaths.stacks.list(selectedWorkspace)}
       />
 
@@ -95,7 +95,6 @@ export const Menu: React.FC = () => {
   );
 };
 
-
 // {locationPath.includes('components') &&
 // stackComponentsTypes?.map((item: any) => (
 //   <MenuItem

src/ui/layouts/stacks/StackDetail/NestedRow.module.scss

@@ -0,0 +1,16 @@
+@import '../../../globalStyles';
+$nameColor: #22bbdd;
+
+.tile {
+  background: #f9f7ff;
+  border-radius: 3px;
+  padding: 5px 15px !important;
+  margin-right: 10px !important;
+}
+
+
+
+.tile,
+.name {
+  color: $nameColor;
+}

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

@@ -6,16 +6,18 @@ import React, { useState } from 'react';
 import { routePaths } from '../../../../routes/routePaths';
 import { translate } from './translate';
 import { Configuration } from './Configuration';
+import styles from './NestedRow.module.scss';
 import { Runs } from './Runs';
 import { BasePage } from '../BasePage';
 import { useService } from './useService';
-import { useLocationPath, useSelector } from '../../../hooks';
+import { useHistory, useLocationPath, useSelector } from '../../../hooks';
 import FilterComponent, {
   getInitialFilterStateForRuns,
 } from '../../../components/Filters';
 import { workspaceSelectors } from '../../../../redux/selectors';
 import { DEFAULT_WORKSPACE_NAME } from '../../../../constants';
 import { List } from '../Stacks/List';
+import { Box, FlexBox, Paragraph } from '../../../components';
 
 const FilterWrapperForRun = () => {
   const locationPath = useLocationPath();
@@ -42,8 +44,51 @@ const FilterWrapperForRun = () => {
     </FilterComponent>
   );
 };
-const getTabPages = (stackId: TId, selectedWorkspace: string): TabPage[] => {
+
+const getTabPages = (
+  stackId: TId,
+  selectedWorkspace: string,
+  tiles?: any,
+  history?: any,
+): TabPage[] => {
   return [
+    {
+      text: 'Components',
+      Component: () => (
+        <FlexBox.Row
+          marginVertical="sm"
+          marginHorizontal="md"
+          className={styles.nestedrow}
+          padding="md"
+          alignItems="center"
+        >
+          {tiles &&
+            tiles.map((tile: any, index: number) => (
+              <Box key={index} className={styles.tile} color="black">
+                <Paragraph
+                  size="small"
+                  style={{ cursor: 'pointer' }}
+                  onClick={() => {
+                    history.push(
+                      routePaths.stackComponents.configuration(
+                        tile.type,
+                        tile.id,
+                        selectedWorkspace,
+                      ),
+                    );
+                  }}
+                >
+                  <span>
+                    {tile.type} {'>'}{' '}
+                  </span>{' '}
+                  <span className={styles.name}>{tile.name}</span>
+                </Paragraph>
+              </Box>
+            ))}
+        </FlexBox.Row>
+      ),
+      path: routePaths.stack.components(stackId, selectedWorkspace),
+    },
     {
       text: translate('tabs.configuration.text'),
       Component: () => <Configuration stackId={stackId} />,
@@ -87,9 +132,23 @@ export interface StackDetailRouteParams {
 
 export const StackDetail: React.FC = () => {
   const { stack } = useService();
+  const history = useHistory();
+  const nestedRowtiles = [];
+  for (const [key] of Object.entries(stack.components)) {
+    nestedRowtiles.push({
+      type: key,
+      name: stack.components[key][0].name,
+      id: stack.components[key][0].id,
+    });
+  }
   const selectedWorkspace = useSelector(workspaceSelectors.selectedWorkspace);
 
-  const tabPages = getTabPages(stack.id, selectedWorkspace);
+  const tabPages = getTabPages(
+    stack.id,
+    selectedWorkspace,
+    nestedRowtiles,
+    history,
+  );
   const breadcrumbs = getBreadcrumbs(stack.id, selectedWorkspace);
 
   // const boxStyle = {