Merge pull request #94 from zenml-io/table-expand/collapse-flow

Table expand/collapse flow

Author: danialraza03

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

@@ -1,12 +1,11 @@
 import React, { useState } from 'react';
 
 import { routePaths } from '../../../../routes/routePaths';
-import { Box, Paragraph, icons } from '../../../components';
-import { iconColors, iconSizes } from '../../../../constants';
-import {
-  camelCaseToParagraph,
-  formatDateToDisplayOnTable,
-} from '../../../../utils';
+import { Box } from '../../../components';
+// import { iconColors, iconSizes } from '../../../../constants';
+import { camelCaseToParagraph } from '../../../../utils';
+// import styles from './index.module.scss';
+// import cn from 'classnames';
 import { translate } from './translate';
 import { Configuration } from './Configuration';
 import { Runs } from './Runs';
@@ -17,6 +16,7 @@ import FilterComponent, {
   getInitialFilterStateForRuns,
 } from '../../../components/Filters';
 import { projectSelectors } from '../../../../redux/selectors';
+import { List } from '../Stacks/List';
 
 const FilterWrapperForRun = () => {
   const locationPath = useLocationPath();
@@ -119,16 +119,22 @@ export const StackDetail: React.FC = () => {
     selectedProject,
   );
 
-  const boxStyle = {
-    backgroundColor: '#E9EAEC',
-    padding: '10px 0',
-    borderRadius: '8px',
-    marginTop: '20px',
-    display: 'flex',
-    justifyContent: 'space-around',
-  };
-  const headStyle = { color: '#828282' };
-  const paraStyle = { color: '#515151', marginTop: '10px' };
+  // const boxStyle = {
+  //   backgroundColor: '#E9EAEC',
+  //   padding: '10px 0',
+  //   borderRadius: '8px',
+  //   marginTop: '20px',
+  //   display: 'flex',
+  //   justifyContent: 'space-around',
+  // };
+  // const headStyle = { color: '#828282' };
+  // const paraStyle = { color: '#515151', marginTop: '10px' };
+  // const data = [
+  //   { name: 'Anom', age: 19, gender: 'Male' },
+  //   { name: 'Megha', age: 19, gender: 'Female' },
+  //   { name: 'Subham', age: 25, gender: 'Male' },
+  // ];
+  // const history = useHistory();
 
   return (
     <BasePage
@@ -140,7 +146,7 @@ export const StackDetail: React.FC = () => {
       )}
       breadcrumbs={breadcrumbs}
     >
-      <Box style={boxStyle}>
+      {/* <Box style={boxStyle}>
         <Box>
           <Paragraph style={headStyle}>ID</Paragraph>
           <Paragraph style={paraStyle}>{stackComponent.id}</Paragraph>
@@ -183,6 +189,36 @@ export const StackDetail: React.FC = () => {
             {formatDateToDisplayOnTable(stackComponent.created)}
           </Paragraph>
         </Box>
+      </Box> */}
+      <Box paddingTop={'xl'}>
+        <List
+          filter={[]}
+          pagination={false}
+          isExpended
+          id={stackComponent.id}
+        ></List>
+        {/* <>
+          <table className={cn(styles.table)}>
+            <tbody>
+              <tr className={cn(styles.tableHeader)}>
+                <th className={cn(styles.tableHeaderText)}>Id</th>
+                <th className={cn(styles.tableHeaderText)}>Name</th>
+                <th className={cn(styles.tableHeaderText)}>Flavor</th>
+                <th className={cn(styles.tableHeaderText)}>Shared</th>
+                <th className={cn(styles.tableHeaderText)}>Author</th>
+                <th className={cn(styles.tableHeaderText)}>Created</th>
+              </tr>
+              <tr className={cn(styles.tableRow)}>
+                <td>{stackComponent.id}</td>
+                <td>{stackComponent.name}</td>
+                <td>{stackComponent.flavor}</td>
+                <td>{stackComponent.isShared}</td>
+                <td>{stackComponent.user.name}</td>
+                <td> {formatDateToDisplayOnTable(stackComponent.created)}</td>
+              </tr>
+            </tbody>
+          </table>
+        </> */}
       </Box>
     </BasePage>
   );

src/ui/layouts/stackComponents/Stacks/List/index.tsx

@@ -17,15 +17,26 @@ import {
 
 interface Props {
   filter: any;
+  pagination?: boolean;
+  id?: string;
+  isExpended?: boolean;
 }
 
-export const List: React.FC<Props> = ({ filter }: Props) => {
+export const List: React.FC<Props> = ({
+  filter,
+  pagination,
+  isExpended,
+  id,
+}: // isExpended = false,
+Props) => {
   const locationPath = useLocationPath();
   const selectedProject = useSelector(projectSelectors.selectedProject);
   const stackComponentsPaginated = useSelector(
     stackComponentSelectors.mystackComponentsPaginated,
   );
 
+  // const [selectedComponentId, setSelectedComponentId] = useState('');
+
   const history = useHistory();
   const {
     openStackIds,
@@ -54,19 +65,25 @@ export const List: React.FC<Props> = ({ filter }: Props) => {
   const openDetailPage = (stackComponent: TStack) => {
     setSelectedRunIds([]);
 
-    history.push(
-      routePaths.stackComponents.configuration(
-        locationPath.split('/')[4],
-        stackComponent.id,
-        selectedProject,
-      ),
-    );
+    if (id) {
+      history.push(
+        routePaths.stackComponents.base(
+          locationPath.split('/')[4],
+          selectedProject,
+        ),
+      );
+    } else {
+      history.push(
+        routePaths.stackComponents.configuration(
+          locationPath.split('/')[4],
+          stackComponent.id,
+          selectedProject,
+        ),
+      );
+    }
   };
 
-  // const url_string = window.location.href;
-  // const url = new URL(url_string);
-  // const projectName = url.searchParams.get('project');
-  // const project = projectName ? projectName : DEFAULT_PROJECT_NAME;
+  const expendedRow = filteredStacks.filter((item) => item.id === id);
 
   return (
     <>
@@ -84,12 +101,13 @@ export const List: React.FC<Props> = ({ filter }: Props) => {
             ? activeSorting
             : 'created'
         }
+        pagination={pagination}
         paginated={stackComponentsPaginated}
-        loading={fetching}
+        loading={expendedRow.length > 0 ? false : fetching}
         showHeader={true}
         filters={filter}
         headerCols={headerCols}
-        tableRows={filteredStacks}
+        tableRows={expendedRow.length > 0 ? expendedRow : filteredStacks}
         emptyState={
           filter[0]?.value
             ? {
@@ -103,6 +121,7 @@ export const List: React.FC<Props> = ({ filter }: Props) => {
         }
         trOnClick={openDetailPage}
       />
+      {/* {isExpend ?  : <></>} */}
     </>
   );
 };