Fix [Jobs and workflows] filter by time does not correctly mark selected option

src/common/DatePicker/DatePicker.js

@@ -370,7 +370,7 @@ const DatePicker = ({
 
   const onSelectOption = option => {
     if (option.handler) {
-      onChange(option.handler(), option.isPredefined)
+      onChange(option.handler(), option.isPredefined, option.id)
     } else {
       setIsDatePickerOpened(true)
     }

src/components/FilterMenu/FilterMenu.js

@@ -256,7 +256,7 @@ const FilterMenu = ({
   }, [dispatch, entities, labels, name])
 
   const handleChangeDates = useCallback(
-    (dates, isPredefined) => {
+    (dates, isPredefined, optionId) => {
       const generatedDates = [...dates]
 
       if (generatedDates.length === 1) {
@@ -267,7 +267,8 @@ const FilterMenu = ({
         setFilters({
           dates: {
             value: generatedDates,
-            isPredefined
+            isPredefined,
+            initialSelectedOptionId: optionId
           }
         })
       )
@@ -357,37 +358,37 @@ const FilterMenu = ({
         case LABELS_FILTER:
           return (
             <Input
-              density='dense'
+              density="dense"
               label={filter.label}
               onChange={setLabels}
               onBlur={onBlur}
               onKeyDown={onKeyDown}
-              placeholder='key1,key2=value,...'
-              type='text'
+              placeholder="key1,key2=value,..."
+              type="text"
               value={labels}
             />
           )
         case NAME_FILTER:
           return (
             <Input
-              density='dense'
+              density="dense"
               label={filter.label}
               onChange={setName}
               onBlur={onBlur}
               onKeyDown={onKeyDown}
-              type='text'
+              type="text"
               value={name}
             />
           )
         case ENTITIES_FILTER:
           return (
             <Input
-              density='dense'
+              density="dense"
               label={filter.label}
               onChange={setEntities}
               onBlur={onBlur}
               onKeyDown={onKeyDown}
-              type='text'
+              type="text"
               value={entities}
             />
           )
@@ -413,7 +414,7 @@ const FilterMenu = ({
         case SHOW_UNTAGGED_FILTER:
           return (
             <CheckBox
-              className='filters-checkbox'
+              className="filters-checkbox"
               item={{ label: filter.label, id: SHOW_UNTAGGED_ITEMS }}
               onChange={handleShowUntagged}
               selectedId={filtersStore.showUntagged}
@@ -422,8 +423,8 @@ const FilterMenu = ({
         case PROJECT_FILTER:
           return (
             <Select
-              density='dense'
-              className=''
+              density="dense"
+              className=""
               label={filter.label}
               onClick={project => handleSelectOption(project, filter)}
               options={filtersStore.projectOptions}
@@ -433,8 +434,8 @@ const FilterMenu = ({
         default:
           return (
             <Select
-              density='dense'
-              className=''
+              density="dense"
+              className=""
               label={`${filter.type.replace(/([A-Z])/g, ' $1')}:`}
               key={filter.type}
               onClick={item => handleSelectOption(item, filter)}
@@ -468,32 +469,32 @@ const FilterMenu = ({
   return (
     !hidden && (
       <>
-        <div className='filters'>
+        <div className="filters">
           {filters.map(filter => {
             if (filter.hidden) return null
 
             return (
-              <div className='filter-column' key={filter.type}>
+              <div className="filter-column" key={filter.type}>
                 {getFilterTemplate(filter)}
               </div>
             )
           })}
         </div>
         {actionButton &&
-          !actionButton.hidden &&
-          (actionButton.getCustomTemplate ? (
-            actionButton.getCustomTemplate(actionButton)
-          ) : (
-            <Button
-              variant={actionButton.variant}
-              label={actionButton.label}
-              tooltip={actionButton.tooltip}
-              disabled={actionButton.disabled}
-              onClick={actionButton.onClick}
-            />
-          ))}
-
-        <div className='actions'>
+        !actionButton.hidden &&
+        (actionButton.getCustomTemplate ? (
+          actionButton.getCustomTemplate(actionButton)
+        ) : (
+          <Button
+            variant={actionButton.variant}
+            label={actionButton.label}
+            tooltip={actionButton.tooltip}
+            disabled={actionButton.disabled}
+            onClick={actionButton.onClick}
+          />
+        ))}
+
+        <div className="actions">
           {enableAutoRefresh && (
             <CheckBox
               key={AUTO_REFRESH_ID}
@@ -503,15 +504,15 @@ const FilterMenu = ({
             />
           )}
           <RoundedIcon
-            tooltipText='Refresh'
+            tooltipText="Refresh"
             onClick={() => applyChanges(filtersStore, true)}
-            id='refresh'
+            id="refresh"
           >
             <RefreshIcon />
           </RoundedIcon>
           {!withoutExpandButton && filtersStore.groupBy !== GROUP_BY_NONE && (
             <RoundedIcon
-              id='toggle-collapse'
+              id="toggle-collapse"
               tooltipText={expand ? 'Collapse' : 'Expand all'}
               onClick={() => handleExpandAll()}
             >

src/components/Jobs/MonitorJobs/MonitorJobs.js

@@ -184,7 +184,8 @@ const MonitorJobs = ({ fetchAllJobRuns, fetchJobs }) => {
           labels: filtersStore.labels,
           dates: {
             value: dateFilter,
-            isPredefined: false
+            isPredefined: false,
+            initialSelectedOptionId: filtersStore.dates.initialSelectedOptionId
           }
         }
       }

src/elements/JobsTable/JobsTable.js

@@ -57,6 +57,7 @@ import { useYaml } from '../../hooks/yaml.hook'
 import { isRowRendered, useVirtualization } from '../../hooks/useVirtualization.hook'
 import { enrichRunWithFunctionFields, handleAbortJob, handleDeleteJob } from '../../utils/jobs.util'
 import { generatePageData } from './jobsTable.util'
+import { setFilters } from '../../reducers/filtersReducer'
 
 import cssVariables from './jobsTable.scss'
 
@@ -255,7 +256,7 @@ const JobsTable = React.forwardRef(
             <div>
               Are you sure you want to abort the job "{job.name}"? <br />
               {isJobKindLocal(job) &&
-                'This is a local run. You can abort the run, though the actual process will continue.'}
+              'This is a local run. You can abort the run, though the actual process will continue.'}
             </div>
           ),
           btnConfirmLabel: 'Abort',
@@ -508,7 +509,10 @@ const JobsTable = React.forwardRef(
             actionsMenu={actionsMenu}
             detailsMenu={pageData.details.menu}
             getCloseDetailsLink={() => getCloseDetailsLink(location, params.jobName)}
-            handleCancel={() => setSelectedJob({})}
+            handleCancel={() => {
+              setSelectedJob({})
+              dispatch(setFilters({ saveFilters: true }))
+            }}
             handleRefresh={fetchRun}
             isDetailsScreen
             pageData={pageData}

src/reducers/filtersReducer.js

@@ -141,10 +141,8 @@ const filtersSlice = createSlice({
   name: 'filtersStore',
   initialState,
   reducers: {
-    removeFilters(state) {
-      for (let filterProp in state) {
-        state[filterProp] = initialState[filterProp]
-      }
+    removeFilters() {
+      return initialState
     },
     resetModalFilter(state, action) {
       delete state[FILTER_MENU_MODAL][action.payload]