Merge pull request #102 from zenml-io/dev

Dev

Author: danialraza03

src/ui/components/Filters/index.tsx

@@ -455,6 +455,7 @@ const FilterComponent = ({
     }
 
     setFilter([...filters]);
+    localStorage.setItem('logical_operator', JSON.stringify('and'));
   }
 
   function handleChangeForStatus(filter: any, value: string) {
@@ -467,6 +468,7 @@ const FilterComponent = ({
     filter.filterValue = value;
 
     setFilter([...filters]);
+    localStorage.setItem('logical_operator', JSON.stringify('and'));
   }
   function handleChangeForShared(filter: any, key: string, value: string) {
     //  handleValueFieldChange(filter, value)
@@ -482,6 +484,7 @@ const FilterComponent = ({
     }
 
     setFilter([...filters]);
+    localStorage.setItem('logical_operator', JSON.stringify('and'));
   }
   function handleChangeForSearchable(field: any, value: string) {
     // filter[key].selectedValue =
@@ -527,7 +530,7 @@ const FilterComponent = ({
 
     setFilter([...filters]);
 
-    console.log(filters, 'field');
+    localStorage.setItem('logical_operator', JSON.stringify('and'));
   }
 
   function addAnotherFilter() {
@@ -548,10 +551,19 @@ const FilterComponent = ({
       fontSize: '12px',
       display: 'flex',
       fontFamily: 'Rubik',
-      // color: 'red',
 
       // ...base,
     }),
+    singleValue: (provided: any) => ({
+      ...provided,
+      fontSize: '12px',
+      fontFamily: 'Rubik',
+    }),
+    option: (provided: any) => ({
+      ...provided,
+      fontSize: '12px',
+      fontFamily: 'Rubik',
+    }),
   };
 
   function checkForName(typeName: string, value: string) {
@@ -696,8 +708,10 @@ const FilterComponent = ({
           filterValue: value,
         },
       ]);
+      localStorage.setItem('logical_operator', JSON.stringify('or'));
     } else {
       setFilter([getInitials()]);
+      localStorage.setItem('logical_operator', JSON.stringify('and'));
     }
   }
 
@@ -738,7 +752,7 @@ const FilterComponent = ({
             <icons.funnelFill
               style={{ padding: '5px 0px 0px 7px' }}
               size={iconSizes.sm}
-              color={iconColors.primary}
+              color={searchText ? iconColors.grey : iconColors.primary}
             />
           </Box>
           <Box
@@ -755,7 +769,14 @@ const FilterComponent = ({
               filters.map((filter: any, index: number) => {
                 return (
                   <FlexBox.Row key={index} className={styles.tile}>
-                    <Box onClick={() => hanldeDelete(index)}>
+                    <Box
+                      onClick={() => {
+                        if (filters.length === 1) {
+                          setShowInbar(false);
+                        }
+                        hanldeDelete(index);
+                      }}
+                    >
                       {`${filter.column.selectedValue.label} ${
                         filter.column.selectedValue.label === 'Shared' ||
                         filter.column.selectedValue.label === 'Status'
@@ -1021,6 +1042,9 @@ const FilterComponent = ({
 
                 <Box
                   onClick={() => {
+                    if (filters.length === 1) {
+                      setShowInbar(false);
+                    }
                     hanldeDelete(index);
                   }}
                   className={styles.removeIcon}

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

@@ -69,13 +69,14 @@ export const callActionForPipelineRunsForPagination = () => {
     filters?: any[],
     sortby?: string,
   ) {
+    const logicalOperator = localStorage.getItem('logical_operator');
     let filtersParam = filterObjectForParam(filters);
     // console.log('aaaa', filters);
     setFetching(true);
     dispatch(
       pipelinesActions.allRunsByPipelineId({
         sort_by: sortby ? sortby : 'created',
-        logical_operator: Object.keys(filtersParam).length > 1 ? 'or' : 'and',
+        logical_operator: logicalOperator ? JSON.parse(logicalOperator) : 'and',
         pipelineId: id,
         page: page,
         size: size,

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

@@ -78,11 +78,11 @@ export const callActionForPipelinesForPagination = () => {
   ) {
     let filtersParam: any = filterObjectForParam(filters);
     setFetchingForPipeline(true);
-    // debugger;
+    const logicalOperator = localStorage.getItem('logical_operator');
     dispatch(
       pipelinesActions.getMy({
         sort_by: sortby ? sortby : 'created',
-        logical_operator: Object.keys(filtersParam).length > 1 ? 'or' : 'and',
+        logical_operator: logicalOperator ? JSON.parse(logicalOperator) : 'and',
         page: page,
         size: size,
         filtersParam,
@@ -114,14 +114,15 @@ export const callActionForAllrunsForPagination = () => {
     filters?: any[],
     sortby?: string,
   ) {
+    const logicalOperator = localStorage.getItem('logical_operator');
     let filtersParam = filterObjectForParam(filters);
 
     setFetchingForAllRuns(true);
     dispatch(
       runsActions.allRuns({
         project: selectedProject,
         sort_by: sortby ? sortby : 'created',
-        logical_operator: Object.keys(filtersParam).length > 1 ? 'or' : 'and',
+        logical_operator: logicalOperator ? JSON.parse(logicalOperator) : 'and',
         page: page,
         size: size,
         filtersParam,

src/ui/layouts/stackComponents/StackDetail/useService.ts

@@ -74,14 +74,15 @@ export const callActionForStackComponentRunsForPagination = () => {
     filters?: any[],
     sortby?: string,
   ) {
+    const logicalOperator = localStorage.getItem('logical_operator');
     let filtersParam = filterObjectForParam(filters);
     console.log(page, size, 'page,size');
     // debugger;
     setFetching(true);
     dispatch(
       stackComponentsActions.allRunsByStackComponentId({
         sort_by: sortby ? sortby : 'created',
-        logical_operator: Object.keys(filtersParam).length > 1 ? 'or' : 'and',
+        logical_operator: logicalOperator ? JSON.parse(logicalOperator) : 'and',
         stackComponentId: id,
         page: page,
         size: size,

src/ui/layouts/stackComponents/Stacks/useService.ts

@@ -63,14 +63,16 @@ export const callActionForStackComponentsForPagination = () => {
     filters?: any[],
     sortby?: string,
   ) {
+    const logicalOperator = localStorage.getItem('logical_operator');
+
     let filtersParam = filterObjectForParam(filters);
     setFetching(true);
     dispatch(
       stackComponentsActions.getMy({
         project: selectedProject ? selectedProject : locationPath.split('/')[2],
         type: locationPath.split('/')[4],
         sort_by: sortby ? sortby : 'created',
-        logical_operator: Object.keys(filtersParam).length > 1 ? 'or' : 'and',
+        logical_operator: logicalOperator ? JSON.parse(logicalOperator) : 'and',
         page: page,
         size: size,
         filtersParam,

src/ui/layouts/stacks/StackDetail/useService.ts

@@ -68,14 +68,15 @@ export const callActionForStackRunsForPagination = () => {
     filters?: any[],
     sortby?: string,
   ) {
+    const logicalOperator = localStorage.getItem('logical_operator');
     let filtersParam = filterObjectForParam(filters);
 
     console.log('aaaa', filters);
     setFetching(true);
     dispatch(
       stacksActions.allRunsByStackId({
         sort_by: sortby ? sortby : 'created',
-        logical_operator: Object.keys(filtersParam).length > 1 ? 'or' : 'and',
+        logical_operator: logicalOperator ? JSON.parse(logicalOperator) : 'and',
         stackId: id,
         page: page,
         size: size,

src/ui/layouts/stacks/Stacks/useService.ts

@@ -55,14 +55,15 @@ export const callActionForStacksForPagination = () => {
     filters?: any[],
     sortby?: string,
   ) {
+    const logicalOperator = localStorage.getItem('logical_operator');
     let filtersParam = filterObjectForParam(filters);
 
     setFetching(true);
     dispatch(
       stacksActions.getMy({
         project: selectedProject,
         sort_by: sortby ? sortby : 'created',
-        logical_operator: Object.keys(filtersParam).length > 1 ? 'or' : 'and',
+        logical_operator: logicalOperator ? JSON.parse(logicalOperator) : 'and',
         page: page,
         size: size,
         filtersParam,