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

danialraza03 · web-flow · commit 4d9f83893d1d · 2023-01-25T13:01:08.000+05:00
Qa fixes
diff --git a/src/ui/layouts/settings/Organization/useHeaderCols.tsx b/src/ui/layouts/settings/Organization/useHeaderCols.tsx
@@ -18,9 +18,9 @@ import { UpdateMember } from './UpdateMember';
 import { TokenPopup } from './tokenPopup';
 import ReactTooltip from 'react-tooltip';
 import { Sorting, SortingDirection } from './ForSorting/types';
-import { SortingHeader } from './ForSorting/SortingHeader';
+// import { SortingHeader } from './ForSorting/SortingHeader';
 import { useService } from './ForSorting/useServiceForSorting';
-import _ from 'lodash';
+// import _ from 'lodash';
 
 export const useInviteHeaderCols = (): HeaderCol[] => {
   return [
@@ -98,25 +98,26 @@ export const useMemberHeaderCols = ({
     activeSortingDirection,
     filteredMembers,
   });
+  console.log(sortMethod);
 
   return [
     {
       render: () => (
-        <SortingHeader
-          sorting="name"
-          sortMethod={sortMethod('name', {
-            asc: (filteredMembers: TMember[]) =>
-              _.orderBy(filteredMembers, ['name'], ['asc']),
-            desc: (filteredMembers: TMember[]) =>
-              _.orderBy(filteredMembers, ['name'], ['desc']),
-          })}
-          activeSorting={activeSorting}
-          activeSortingDirection={activeSortingDirection}
-        >
-          <Paragraph size="small" style={headColStyle}>
-            {translate('table.member.text')}
-          </Paragraph>
-        </SortingHeader>
+        // <SortingHeader
+        //   sorting="name"
+        //   sortMethod={sortMethod('name', {
+        //     asc: (filteredMembers: TMember[]) =>
+        //       _.orderBy(filteredMembers, ['name'], ['asc']),
+        //     desc: (filteredMembers: TMember[]) =>
+        //       _.orderBy(filteredMembers, ['name'], ['desc']),
+        //   })}
+        //   activeSorting={activeSorting}
+        //   activeSortingDirection={activeSortingDirection}
+        // >
+        <Paragraph size="small" style={headColStyle}>
+          {translate('table.member.text')}
+        </Paragraph>
+        // </SortingHeader>
       ),
       width: '12%',
       renderRow: (member: TMember) => {
@@ -175,52 +176,56 @@ export const useMemberHeaderCols = ({
       ),
     },
     {
-      render: () => (<Paragraph size="small" style={headColStyle}>Roles</Paragraph>),
+      render: () => (
+        <Paragraph size="small" style={headColStyle}>
+          Roles
+        </Paragraph>
+      ),
       width: '15%',
       renderRow: (member: TMember) => {
         const role = member?.roles?.map((e) => {
-          return e.name
-        })
-        
+          return e.name;
+        });
+
         return (
-          <FlexBox alignItems="center">  
-              <Paragraph size="small">
-                <Paragraph>{role?.toString()}</Paragraph>  
-              </Paragraph>
+          <FlexBox alignItems="center">
+            <Paragraph size="small">
+              <Paragraph>{role?.toString()}</Paragraph>
+            </Paragraph>
           </FlexBox>
-        )
-      }
+        );
+      },
     },
     {
       render: () => (
-        <SortingHeader
-          sorting="created"
-          sortMethod={sortMethod('created', {
-            asc: (filteredMembers: any[]) =>
-              _.orderBy(
-                filteredMembers,
-                (member: any) => new Date(member?.created).getTime(),
-                ['asc'],
-              ),
-            desc: (filteredMembers: any[]) =>
-              _.orderBy(
-                filteredMembers,
-                (member: any) => new Date(member?.created).getTime(),
-                ['desc'],
-              ),
-          })}
-          activeSorting={activeSorting}
-          activeSortingDirection={activeSortingDirection}
-        >
-          <Paragraph size="small" style={headColStyle}>
-            {translate('table.createdAt.text')}
-          </Paragraph>
-        </SortingHeader>
+        // <SortingHeader
+        //   sorting="created"
+        //   sortMethod={sortMethod('created', {
+        //     asc: (filteredMembers: any[]) =>
+        //       _.orderBy(
+        //         filteredMembers,
+        //         (member: any) => new Date(member?.created).getTime(),
+        //         ['asc'],
+        //       ),
+        //     desc: (filteredMembers: any[]) =>
+        //       _.orderBy(
+        //         filteredMembers,
+        //         (member: any) => new Date(member?.created).getTime(),
+        //         ['desc'],
+        //       ),
+        //   })}
+        //   activeSorting={activeSorting}
+        //   activeSortingDirection={activeSortingDirection}
+        // >
+        <Paragraph size="small" style={headColStyle}>
+          {translate('table.createdAt.text')}
+        </Paragraph>
+        // </SortingHeader>
       ),
       width: '13%',
-      renderRow: (member: TMember) => ( 
+      renderRow: (member: TMember) => (
         <FlexBox alignItems="center">
-          <div data-tip data-for={formatDateToDisplayOnTable(member?.created)}>         
+          <div data-tip data-for={formatDateToDisplayOnTable(member?.created)}>
             <FlexBox alignItems="center">
               <Box paddingRight="sm">
                 <icons.calendar color={iconColors.grey} size={iconSizes.sm} />
@@ -235,36 +240,38 @@ export const useMemberHeaderCols = ({
             place="top"
             effect="solid"
           >
-            <Paragraph color="white">{formatDateToDisplayOnTable(member?.created)}</Paragraph>
+            <Paragraph color="white">
+              {formatDateToDisplayOnTable(member?.created)}
+            </Paragraph>
           </ReactTooltip>
         </FlexBox>
-      )
+      ),
     },
     {
       render: () => <Paragraph size="small"></Paragraph>,
-      width: decoded.permissions.includes('write') ? '5%' :'0%',
+      width: decoded.permissions.includes('write') ? '5%' : '0%',
       renderRow: (member: any) => (
         <FlexBox alignItems="center">
           {decoded.permissions.includes('write') && (
-          <>
-          <FlexBox >
-            <div data-tip data-for={member?.id}>
-              <UpdateMember member={member} />
-            </div>
-          </FlexBox>
+            <>
+              <FlexBox>
+                <div data-tip data-for={member?.id}>
+                  <UpdateMember member={member} />
+                </div>
+              </FlexBox>
 
-          <FlexBox>
-            <div data-tip data-for={member?.id}>
-              <DeleteMember member={member} />
-            </div>
-            {/* <ReactTooltip id={member.id} place="top" effect="solid">
+              <FlexBox>
+                <div data-tip data-for={member?.id}>
+                  <DeleteMember member={member} />
+                </div>
+                {/* <ReactTooltip id={member.id} place="top" effect="solid">
               <Paragraph color="white">Delete Member</Paragraph>
             </ReactTooltip> */}
-          </FlexBox>
-          </> 
+              </FlexBox>
+            </>
           )}
         </FlexBox>
-        )      
-    }
+      ),
+    },
   ];
 };
diff --git a/src/ui/layouts/stackComponents/Component.tsx b/src/ui/layouts/stackComponents/Component.tsx
@@ -401,6 +401,46 @@ const Component = () => {
                 </Box>
               </FlexBox>
             )}
+            {console.log(item, 'item')}
+            {item !== 'data_validator' &&
+              item !== 'step_operator' &&
+              item !== 'orchestrator' &&
+              item !== 'secrets_manager' &&
+              item !== 'model_deployer' &&
+              item !== 'model_deployer' &&
+              item !== 'feature_store' &&
+              item !== 'experiment_tracker' &&
+              item !== 'container_registry' &&
+              item !== 'annotator' &&
+              item !== 'alerter' &&
+              item !== 'artifact_store' && (
+                <FlexBox
+                  onClick={() => selectSection(item)}
+                  style={{
+                    ...sectionStyle,
+                    background: formatSectionColor(item),
+                  }}
+                  marginTop="sm"
+                >
+                  <Box>
+                    <icons.stackComponent
+                      color={
+                        selectedComp === item
+                          ? iconColors.white
+                          : iconColors.primary
+                      }
+                      size={iconSizes.md}
+                    />
+                  </Box>
+                  <Box>
+                    <Paragraph
+                      style={{ color: formatTextColor(item), ...textStyle }}
+                    >
+                      {formatText(item)}
+                    </Paragraph>
+                  </Box>
+                </FlexBox>
+              )}
           </Box>
         ))}
       </Box>
diff --git a/src/ui/layouts/stackComponents/Stacks/List/ForSorting/SortingHeader.tsx b/src/ui/layouts/stackComponents/Stacks/List/ForSorting/SortingHeader.tsx
@@ -6,18 +6,22 @@ import { Sorting, SortingDirection } from './types';
 import styles from './index.module.scss';
 
 export const SortingHeader: React.FC<{
+  onlyOneRow?: boolean;
   sortMethod: void;
   activeSorting: Sorting | null;
   activeSortingDirection: SortingDirection | null;
   sorting: Sorting;
 }> = ({
+  onlyOneRow,
   children,
   sortMethod,
   activeSorting,
   activeSortingDirection,
   sorting,
 }) => {
-  return (
+  return onlyOneRow ? (
+    <>{children}</>
+  ) : (
     <LinkBox className={styles.sortingBox} onClick={sortMethod}>
       <FlexBox alignItems="center">
         {children}
diff --git a/src/ui/layouts/stackComponents/Stacks/List/getHeaderCols.tsx b/src/ui/layouts/stackComponents/Stacks/List/getHeaderCols.tsx
@@ -7,19 +7,15 @@ import {
   formatDateToSort,
   formatDateToDisplayOnTable,
 } from '../../../../../utils';
-import {
-  Box,
-  FlexBox,
-  icons,
-  Paragraph,
-} from '../../../../components';
+import { Box, FlexBox, icons, Paragraph } from '../../../../components';
 import { HeaderCol } from '../../../common/Table';
 import { SortingHeader } from './ForSorting/SortingHeader';
 import { Sorting, SortingDirection } from './ForSorting/types';
 
 import { useService } from './ForSorting/useServiceForSorting';
 
 export const GetHeaderCols = ({
+  expendedRow,
   openStackIds,
   setOpenStackIds,
   filteredStacks,
@@ -29,6 +25,7 @@ export const GetHeaderCols = ({
   setActiveSortingDirection,
   setActiveSorting,
 }: {
+  expendedRow?: any;
   openStackIds: TId[];
   setOpenStackIds: (ids: TId[]) => void;
   filteredStacks: TStack[];
@@ -46,6 +43,8 @@ export const GetHeaderCols = ({
     activeSortingDirection,
     filteredStacks,
   });
+
+  console.log(expendedRow, 'expendedRow');
   return [
     {
       width: '2%',
@@ -55,6 +54,7 @@ export const GetHeaderCols = ({
     {
       render: () => (
         <SortingHeader
+          onlyOneRow={filteredStacks.length === 1 || expendedRow?.length === 1}
           sorting="id"
           sortMethod={sortMethod('id', {
             asc: (filteredStacks: TStack[]) =>
@@ -87,6 +87,7 @@ export const GetHeaderCols = ({
     {
       render: () => (
         <SortingHeader
+          onlyOneRow={filteredStacks.length === 1 || expendedRow?.length === 1}
           sorting="name"
           sortMethod={sortMethod('name', {
             asc: (filteredStacks: TStack[]) =>
@@ -119,6 +120,7 @@ export const GetHeaderCols = ({
     {
       render: () => (
         <SortingHeader
+          onlyOneRow={filteredStacks.length === 1 || expendedRow?.length === 1}
           sorting="flavor"
           sortMethod={sortMethod('flavor', {
             asc: (filteredStacks: TStack[]) =>
@@ -151,6 +153,7 @@ export const GetHeaderCols = ({
     {
       render: () => (
         <SortingHeader
+          onlyOneRow={filteredStacks.length === 1 || expendedRow?.length === 1}
           sorting="is_shared"
           sortMethod={sortMethod('is_shared', {
             asc: (filteredStacks: TStack[]) =>
@@ -209,6 +212,7 @@ export const GetHeaderCols = ({
     {
       render: () => (
         <SortingHeader
+          onlyOneRow={filteredStacks.length === 1 || expendedRow?.length === 1}
           sorting="user_id"
           sortMethod={sortMethod('user_id', {
             asc: (filteredStacks: TStack[]) =>
@@ -226,7 +230,6 @@ export const GetHeaderCols = ({
       ),
       width: '15%',
       renderRow: (stackComponent: TStack) => {
-        
         return (
           <FlexBox alignItems="center">
             <div
@@ -267,6 +270,7 @@ export const GetHeaderCols = ({
     {
       render: () => (
         <SortingHeader
+          onlyOneRow={filteredStacks.length === 1 || expendedRow?.length === 1}
           sorting="created"
           sortMethod={sortMethod('created', {
             asc: (filteredStacks: TStack[]) =>
diff --git a/src/ui/layouts/stackComponents/Stacks/List/index.tsx b/src/ui/layouts/stackComponents/Stacks/List/index.tsx
@@ -51,7 +51,9 @@ Props) => {
     setSelectedRunIds,
   } = useService(filter);
 
+  const expendedRow = filteredStacks.filter((item) => item.id === id);
   const headerCols = GetHeaderCols({
+    expendedRow,
     openStackIds,
     setOpenStackIds,
     filteredStacks,
@@ -83,8 +85,6 @@ Props) => {
     }
   };
 
-  const expendedRow = filteredStacks.filter((item) => item.id === id);
-
   return (
     <>
       <CollapseTable
