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

Qa fixes

Author: danialraza03

src/ui/components/Filters/index.tsx

@@ -736,6 +736,7 @@ const FilterComponent = ({
   function getSecondColumnOptions(options: any, type: any) {
     return options.filter((o: any) => o.type === type);
   }
+  const validFilters = filters?.filter((item: any) => item.filterValue);
 
   return (
     <FlexBox.Column fullWidth>
@@ -784,7 +785,7 @@ const FilterComponent = ({
                 {console.log(filters, 'filters1')}
               </Paragraph>
             ) : filters[0]?.filterValue && !applyFilter && !searchText ? (
-              filters.map((filter: any, index: number) => {
+              validFilters.map((filter: any, index: number) => {
                 return (
                   <FlexBox.Row key={index} className={styles.tile}>
                     <Box

src/ui/layouts/common/Table/index.tsx

@@ -162,10 +162,13 @@ export const Table: React.FC<TableProps> = ({
   //   itemsPerPage: itemPerPage,
   //   items: tableRows,
   // });
+  const validFilters = filters?.filter((item) => item.value);
+  console.log('checkFilter', validFilters, filters);
 
   const isValidFilterFroValue: any = filters?.map((f) => f.value).join('');
-  const isValidFilterForCategory: any =
-    isValidFilterFroValue && filters?.map((f) => f.type.value).join('');
+  const isValidFilterForCategory: any = filters
+    ?.map((f) => f.value && f.type.value)
+    .join('');
   const checkValidFilter = isValidFilterFroValue + isValidFilterForCategory;
 
   const { dispatchStackData } = callActionForStacksForPagination();
@@ -204,15 +207,15 @@ export const Table: React.FC<TableProps> = ({
             id,
             1,
             itemPerPage,
-            checkValidFilter.length ? (filters as any) : [],
+            checkValidFilter.length ? (validFilters as any) : [],
             activeSorting,
           );
           break;
         } else {
           dispatchStackData(
             1,
             itemPerPage,
-            checkValidFilter.length ? (filters as any) : [],
+            checkValidFilter.length ? (validFilters as any) : [],
             activeSorting,
           );
           break;
@@ -223,15 +226,15 @@ export const Table: React.FC<TableProps> = ({
             id,
             1,
             itemPerPage,
-            checkValidFilter.length ? (filters as any) : [],
+            checkValidFilter.length ? (validFilters as any) : [],
             activeSorting,
           );
           break;
         } else {
           dispatchStackComponentsData(
             1,
             itemPerPage,
-            checkValidFilter.length ? (filters as any) : [],
+            checkValidFilter.length ? (validFilters as any) : [],
             activeSorting,
           );
           break;
@@ -242,17 +245,17 @@ export const Table: React.FC<TableProps> = ({
             id,
             1,
             itemPerPage,
-            checkValidFilter.length ? (filters as any) : [],
+            checkValidFilter.length ? (validFilters as any) : [],
             activeSorting,
           );
           break;
         } else {
-          console.log(checkValidFilter, 'checkValidFilter');
+          // console.log(checkValidFilter, 'checkValidFilter');
           if (!renderAfterRow) break;
           dispatchPipelineData(
             1,
             itemPerPage,
-            checkValidFilter.length ? (filters as any) : [],
+            checkValidFilter.length ? (validFilters as any) : [],
             activeSorting,
           );
           break;
@@ -262,7 +265,7 @@ export const Table: React.FC<TableProps> = ({
         dispatchAllrunsData(
           1,
           itemPerPage,
-          checkValidFilter.length ? (filters as any) : [],
+          checkValidFilter.length ? (validFilters as any) : [],
           activeSorting,
         );
         break;
@@ -302,12 +305,12 @@ export const Table: React.FC<TableProps> = ({
   if (fetchingMembers) {
     return <FullWidthSpinner color="black" size="md" />;
   }
-  console.log(fetchingMembers, activeSorting, 'fetchingMembers');
+  // console.log(fetchingMembers, activeSorting, 'fetchingMembers');
   const onChangePagePerItem = (p: number, size: number) => {
     // onChange(p + 1, size);
     setItemPerPage(size);
   };
-  console.log('pages11', itemPerPage, ITEMS_PER_PAGE);
+  // console.log('pages11', itemPerPage, ITEMS_PER_PAGE);
   return (
     <FlexBox.Column className={styles.tableWrapper} fullWidth>
       <IfElse
@@ -392,7 +395,7 @@ export const Table: React.FC<TableProps> = ({
                     ref={childRef}
                     // getFetchedState={getFetchedState}
                     activeSorting={activeSorting}
-                    filters={filters}
+                    filters={validFilters}
                     itemPerPage={itemPerPage}
                     pageIndex={pageIndex}
                     setPageIndex={setPageIndex}
@@ -473,7 +476,7 @@ export const Table: React.FC<TableProps> = ({
                                                       childRef?.current?.callOnChange(
                                                         1,
                                                         parseInt(`${option}`),
-                                                        filters,
+                                                        validFilters,
                                                         activeSorting,
                                                       );
                                                       setShowItems(false);
@@ -509,7 +512,7 @@ export const Table: React.FC<TableProps> = ({
                 </FlexBox>
               )}
             </If>
-            {console.log(paginated, 'paginated')}
+            {/* {console.log(paginated, 'paginated')} */}
           </>
         )}
         renderWhenFalse={() => (

src/ui/layouts/pipelines/PipelineDetail/Runs/index.tsx

@@ -4,18 +4,20 @@ import { RunsTable } from '../../RunsTable';
 import { useService } from './useService';
 
 export const Runs: React.FC<{
+  isExpended?: any;
   fromAllruns?: boolean;
   pipelineId: TId;
   filter: any;
   runId?: any;
   pagination?: boolean;
-}> = ({ pipelineId, filter, pagination, runId, fromAllruns }) => {
+}> = ({ pipelineId, filter, pagination, runId, fromAllruns, isExpended }) => {
   const [sortBy, setSortBy] = useState('created');
   function getSorted(activeSorting: any, activeSortingDirection: any) {
     setSortBy(activeSortingDirection?.toLowerCase() + ':' + activeSorting);
     // console.log(activeSorting, activeSortingDirection, 'aaaaaaa');
   }
   const { fetching, runIds, runsPaginated } = useService({
+    isExpended,
     sortBy,
     pipelineId,
     filter,

src/ui/layouts/pipelines/PipelineDetail/Runs/useService.ts

@@ -21,7 +21,9 @@ export const useService = ({
   sortBy,
   filter,
   pipelineId,
+  isExpended,
 }: {
+  isExpended?: any;
   filter: {
     column: filterValue;
     type: filterValue;
@@ -38,7 +40,7 @@ export const useService = ({
   console.log(runsPaginated, 'runsPaginated');
   useEffect(() => {}, [runs]);
   useEffect(() => {
-    if (!isValidFilter) {
+    if (!isValidFilter && !isExpended) {
       const intervalId = setInterval(() => {
         //assign interval to a variable to clear it.
 

src/ui/layouts/pipelines/Pipelines/AllRuns/useService.ts

@@ -35,7 +35,9 @@ interface filterValue {
 export const useService = ({
   filter,
   sortBy,
+  isExpended,
 }: {
+  isExpended?: any;
   sortBy: string;
   filter: {
     column: filterValue;
@@ -48,9 +50,9 @@ export const useService = ({
   const runs = useSelector(runSelectors.myRuns);
   const selectedProject = useSelector(projectSelectors.selectedProject);
   const runsPaginated = useSelector(runSelectors.myRunsPaginated);
-  const isValidFilter = filter.map((f) => f.value).join('');
+  const isValidFilter = filter?.map((f) => f.value).join('');
   useEffect(() => {
-    if (!isValidFilter) {
+    if (!isValidFilter && !isExpended) {
       const intervalId = setInterval(() => {
         //assign interval to a variable to clear it.
         dispatch(

src/ui/layouts/pipelines/Pipelines/List/index.tsx

@@ -41,7 +41,7 @@ export const List: React.FC<Props> = ({
     activeSortingDirection,
     setActiveSortingDirection,
     setSelectedRunIds,
-  } = useService(filter);
+  } = useService({ filter, isExpended });
   const expendedRow = filteredPipelines.filter((item) => item.id === id);
 
   const headerCols = GetHeaderCols({

src/ui/layouts/pipelines/Pipelines/List/useService.ts

@@ -35,13 +35,17 @@ interface filterValue {
   type: string;
   value: string;
 }
-export const useService = (
+export const useService = ({
+  filter,
+  isExpended,
+}: {
+  isExpended?: any;
   filter: {
     column: filterValue;
     type: filterValue;
     value: string;
-  }[],
-): ServiceInterface => {
+  }[];
+}): ServiceInterface => {
   const [activeSorting, setActiveSorting] = React.useState<Sorting | null>(
     'created',
   );
@@ -61,14 +65,14 @@ export const useService = (
   const pipelinesPaginated = useSelector(
     pipelineSelectors.myPipelinesPaginated,
   );
-  const isValidFilter = filter.map((f) => f.value).join('');
+  const isValidFilter = filter?.map((f) => f.value).join('');
   const { dispatchPipelineData } = callActionForPipelinesForPagination();
   useEffect(() => {
     setFilteredPipelines(pipelines as any[]);
   }, [filter, pipelines]);
 
   useEffect(() => {
-    if (!isValidFilter) {
+    if (!isValidFilter && !isExpended) {
       const intervalId = setInterval(() => {
         const applySorting =
           activeSortingDirection?.toLowerCase() + ':' + activeSorting;

src/ui/layouts/pipelines/RunDetail/index.tsx

@@ -120,7 +120,7 @@ export const RunDetail: React.FC = () => {
         filter={[]}
         pagination={false}
         runId={runId}
-        // isExpended
+        isExpended
         pipelineId={pipelineId}
       ></Runs>
       {/* <Box style={boxStyle}>

src/ui/layouts/pipelines/RunDetail/useService.ts

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { RunDetailRouteParams } from '.';
-import { runPagesActions, runsActions } from '../../../../redux/actions';
-import { runPagesSelectors, runSelectors } from '../../../../redux/selectors';
+import { runsActions } from '../../../../redux/actions';
+import { runSelectors } from '../../../../redux/selectors';
 import { useDispatch, useParams, useSelector } from '../../../hooks';
 
 interface ServiceInterface {
@@ -15,7 +15,7 @@ export const useService = (): ServiceInterface => {
   const dispatch = useDispatch();
   const { id, pipelineId } = useParams<RunDetailRouteParams>();
   const [isMounted, setIsMounted] = useState(false);
-
+  const [fetching, setFetching] = useState(false);
   useEffect(() => {
     if (!isMounted) {
       setFetching(true);
@@ -42,10 +42,10 @@ export const useService = (): ServiceInterface => {
 
   const run = useSelector(runSelectors.runForId(id));
 
-  const setFetching = (fetching: boolean) => {
-    dispatch(runPagesActions.setFetching({ fetching }));
-  };
-  const fetching = useSelector(runPagesSelectors.fetching);
+  // const setFetching = (fetching: boolean) => {
+  //   dispatch(runPagesActions.setFetching({ fetching }));
+  // };
+  // const fetching = useSelector(runPagesSelectors.fetching);
 
   return { runId: id, pipelineId, run, fetching };
 };

src/ui/layouts/runs/RunDetail/index.tsx

@@ -98,6 +98,7 @@ export const RunDetail: React.FC = () => {
       breadcrumbs={breadcrumbs}
     >
       <Runs
+        isExpended
         filter={[]}
         pagination={false}
         runId={runId}