Merge branch 'dev' into project-to-workspace

Author: AhsanKhan7

src/ui/components/Filters/index.tsx

@@ -9,7 +9,7 @@ import {
   Paragraph,
 } from '../../components';
 import { iconColors, iconSizes } from '../../../constants';
-import { formatDateToDisplay } from '../../../utils';
+import { formatDateToDisplayWithoutTime } from '../../../utils';
 import DatePicker from 'react-datepicker';
 
 import 'bootstrap/dist/css/bootstrap.min.css';
@@ -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
@@ -812,7 +813,7 @@ const FilterComponent = ({
                               filter.column.selectedValue.label,
                               filter.filterValue,
                             )
-                          : formatDateToDisplay(filter.filterValue)
+                          : formatDateToDisplayWithoutTime(filter.filterValue)
                       }`}
                     </Box>
 

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

@@ -284,13 +284,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 fullWidth>
       <IfElse
@@ -585,7 +584,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 selectedWorkspace = useSelector(workspaceSelectors.selectedWorkspace);
   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

@@ -124,7 +124,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}