Fix [Feature Store] Setting filters does not close the details panel (#…

…3028)
mlrun · Jan 17, 2025 · a34d183 · a34d183
1 parent 6cfb8f2
commit a34d183
Show file tree

Hide file tree

Showing 18 changed files with 29 additions and 45 deletions.
diff --git a/src/components/ActionBar/ActionBar.js b/src/components/ActionBar/ActionBar.js
@@ -26,7 +26,7 @@ import { Form } from 'react-final-form'
 import { createForm } from 'final-form'
 import { isEmpty, isEqual, isNil, mapValues, pickBy } from 'lodash'
 import { useDispatch, useSelector } from 'react-redux'
-import { useNavigate, useParams } from 'react-router-dom'
+import { useNavigate } from 'react-router-dom'
 
 import DatePicker from '../../common/DatePicker/DatePicker'
 import FilterMenuModal from '../FilterMenuModal/FilterMenuModal'
@@ -45,10 +45,11 @@ import {
   TAG_FILTER_ALL_ITEMS
 } from '../../constants'
 import detailsActions from '../../actions/details'
+import { CUSTOM_RANGE_DATE_OPTION } from '../../utils/datePicker.util'
 import { FILTERS_CONFIG } from '../../types'
-import { setFilters, toggleAutoRefresh } from '../../reducers/filtersReducer'
+import { getCloseDetailsLink } from '../../utils/link-helper.util'
 import { setFieldState } from 'igz-controls/utils/form.util'
-import { CUSTOM_RANGE_DATE_OPTION } from '../../utils/datePicker.util'
+import { setFilters, toggleAutoRefresh } from '../../reducers/filtersReducer'
 
 import { ReactComponent as CollapseIcon } from 'igz-controls/images/collapse.svg'
 import { ReactComponent as ExpandIcon } from 'igz-controls/images/expand.svg'
@@ -62,13 +63,13 @@ const ActionBar = ({
   autoRefreshStopTrigger = false,
   cancelRequest = null,
   children,
+  closeParamName = '',
   filters,
   filtersConfig,
   handleAutoRefreshPrevValueChange,
   handleRefresh,
   hidden = false,
   internalAutoRefreshIsEnabled = false,
-  navigateLink,
   removeSelectedItem = null,
   setSearchParams,
   setSelectedRowData = null,
@@ -87,7 +88,6 @@ const ActionBar = ({
   const filtersStore = useSelector(store => store.filtersStore)
   const changes = useSelector(store => store.detailsStore.changes)
   const dispatch = useDispatch()
-  const params = useParams()
   const navigate = useNavigate()
 
   const actionBarClassNames = classnames('action-bar', hidden && 'action-bar_hidden')
@@ -202,8 +202,8 @@ const ActionBar = ({
       const newFilters = { ...filters, ...formValues }
 
       if (filtersHelperResult) {
-        if ((params.name && params.tag) || params.id) {
-          navigate(navigateLink)
+        if (closeParamName) {
+          navigate(getCloseDetailsLink(closeParamName, true))
         }
 
         if (
@@ -230,17 +230,14 @@ const ActionBar = ({
       filtersHelper,
       changes,
       dispatch,
-      params.name,
-      params.tag,
-      params.id,
       filtersStore.groupBy,
       saveFilters,
+      closeParamName,
       removeSelectedItem,
       setSelectedRowData,
       toggleAllRows,
       handleRefresh,
-      navigate,
-      navigateLink
+      navigate
     ]
   )
 
@@ -472,11 +469,11 @@ ActionBar.propTypes = {
   autoRefreshIsEnabled: PropTypes.bool,
   autoRefreshIsStopped: PropTypes.bool,
   cancelRequest: PropTypes.func,
+  closeParamName: PropTypes.string,
   filters: PropTypes.object.isRequired,
   filtersConfig: FILTERS_CONFIG.isRequired,
   handleRefresh: PropTypes.func.isRequired,
   hidden: PropTypes.bool,
-  navigateLink: PropTypes.string,
   removeSelectedItem: PropTypes.func,
   setSearchParams: PropTypes.func.isRequired,
   setSelectedRowData: PropTypes.func,

diff --git a/src/components/AddToFeatureVectorPage/AddToFeatureVectorView.js b/src/components/AddToFeatureVectorPage/AddToFeatureVectorView.js
@@ -68,7 +68,6 @@ const AddToFeatureVectorView = React.forwardRef(
               filters={filters}
               filtersConfig={filtersConfig}
               handleRefresh={handleRefresh}
-              page={FEATURE_STORE_PAGE}
               setSearchParams={setSearchParams}
               tab={ADD_TO_FEATURE_VECTOR_TAB}
               withoutExpandButton

diff --git a/src/components/Alerts/AlertsView.js b/src/components/Alerts/AlertsView.js
@@ -69,11 +69,11 @@ const AlertsView = ({
             <div className="content__action-bar-wrapper">
               <ActionBar
                 autoRefreshIsStopped={true}
+                closeParamName={ALERTS_PAGE_PATH}
                 filterMenuName={ALERTS_FILTERS}
-                filtersConfig={alertsFiltersConfig}
                 filters={filters}
+                filtersConfig={alertsFiltersConfig}
                 handleRefresh={handleRefreshAlerts}
-                page={ALERTS_PAGE}
                 setSearchParams={setSearchParams}
                 withRefreshButton
                 withoutExpandButton

diff --git a/src/components/Datasets/DatasetsView.js b/src/components/Datasets/DatasetsView.js
@@ -98,11 +98,10 @@ const DatasetsView = React.forwardRef(
                       onClick: handleRegisterDataset
                     }
                   ]}
+                  closeParamName={isAllVersions ? ALL_VERSIONS_PATH : DATASETS_TAB}
                   filters={filters}
                   filtersConfig={filtersConfig}
-                  navigateLink={`/projects/${projectName}/${DATASETS_TAB}${isAllVersions ? `/${datasetName}/${ALL_VERSIONS_PATH}` : ''}${window.location.search}`}
                   handleRefresh={handleRefreshDatasets}
-                  page={DATASETS_PAGE}
                   setSearchParams={setSearchDatasetsParams}
                   withRefreshButton
                   withoutExpandButton

diff --git a/src/components/Documents/DocumentsView.js b/src/components/Documents/DocumentsView.js
@@ -85,11 +85,10 @@ const DocumentsView = React.forwardRef(
                   />
                 )}
                 <ActionBar
+                  closeParamName={isAllVersions ? ALL_VERSIONS_PATH : DOCUMENTS_TAB}
                   filters={filters}
                   filtersConfig={filtersConfig}
-                  navigateLink={`/projects/${projectName}/${DOCUMENTS_TAB}${isAllVersions ? `/${documentName}/${ALL_VERSIONS_PATH}` : ''}${window.location.search}`}
                   handleRefresh={handleRefreshDocuments}
-                  page={DOCUMENTS_PAGE}
                   setSearchParams={setSearchDocumentsParams}
                   withRefreshButton
                   withoutExpandButton

diff --git a/src/components/FeatureStore/FeatureSets/FeatureSetsView.js b/src/components/FeatureStore/FeatureSets/FeatureSetsView.js
@@ -82,10 +82,10 @@ const FeatureSetsView = React.forwardRef(
                 onClick: () => setFeatureSetsPanelIsOpen(true)
               }
             ]}
+            closeParamName={FEATURE_SETS_TAB}
             filters={filters}
             filtersConfig={filtersConfig}
             handleRefresh={handleRefresh}
-            page={FEATURE_STORE_PAGE}
             setSearchParams={setSearchParams}
             tab={FEATURE_SETS_TAB}
             withoutExpandButton

diff --git a/src/components/FeatureStore/FeatureVectors/FeatureVectorsView.js b/src/components/FeatureStore/FeatureVectors/FeatureVectorsView.js
@@ -76,10 +76,10 @@ const FeatureVectorsView = React.forwardRef(
                 onClick: () => setCreateVectorPopUpIsOpen(true)
               }
             ]}
+            closeParamName={FEATURE_VECTORS_TAB}
             filters={filters}
             filtersConfig={filtersConfig}
             handleRefresh={handleRefresh}
-            page={FEATURE_STORE_PAGE}
             setSearchParams={setSearchParams}
             tab={FEATURE_VECTORS_TAB}
             withoutExpandButton

diff --git a/src/components/FeatureStore/Features/FeaturesView.js b/src/components/FeatureStore/Features/FeaturesView.js
@@ -75,7 +75,6 @@ const FeaturesView = React.forwardRef(
             filters={filters}
             filtersConfig={filtersConfig}
             handleRefresh={handleRefresh}
-            page={FEATURE_STORE_PAGE}
             setSearchParams={setSearchParams}
             tab={FEATURES_TAB}
             withoutExpandButton

diff --git a/src/components/Files/FilesView.js b/src/components/Files/FilesView.js
@@ -97,11 +97,10 @@ const FilesView = React.forwardRef(
                       onClick: handleRegisterArtifact
                     }
                   ]}
+                  closeParamName={isAllVersions ? ALL_VERSIONS_PATH : FILES_TAB}
                   filters={filters}
                   filtersConfig={filtersConfig}
-                  navigateLink={`/projects/${projectName}/files${isAllVersions ? `/${fileName}/${ALL_VERSIONS_PATH}` : ''}${window.location.search}`}
                   handleRefresh={handleRefreshFiles}
-                  page={FILES_PAGE}
                   setSearchParams={setSearchFilesParams}
                   withRefreshButton
                   withoutExpandButton

diff --git a/src/components/FunctionsPage/FunctionsView.js b/src/components/FunctionsPage/FunctionsView.js
@@ -91,13 +91,6 @@ const FunctionsView = ({
                 />
               )}
               <ActionBar
-                page={FUNCTIONS_PAGE}
-                filtersConfig={functionsFiltersConfig}
-                filters={filters}
-                handleRefresh={handleRefreshFunctions}
-                navigateLink={`/projects/${params.projectName}/functions${isAllVersions ? `/${params.funcName}/${ALL_VERSIONS_PATH}` : ''}${window.location.search}`}
-                setSearchParams={setSearchFunctionsParams}
-                withoutExpandButton
                 actionButtons={[
                   {
                     hidden: !isDemoMode,
@@ -108,6 +101,12 @@ const FunctionsView = ({
                     })
                   }
                 ]}
+                closeParamName={isAllVersions ? ALL_VERSIONS_PATH : FUNCTIONS_PAGE_PATH}
+                filters={filters}
+                filtersConfig={functionsFiltersConfig}
+                handleRefresh={handleRefreshFunctions}
+                setSearchParams={setSearchFunctionsParams}
+                withoutExpandButton
               >
                 <FunctionsFilters />
               </ActionBar>

diff --git a/src/components/Jobs/Jobs.js b/src/components/Jobs/Jobs.js
@@ -30,7 +30,6 @@ import { ConfirmDialog } from 'igz-controls/components'
 
 import {
   INACTIVE_JOBS_TAB,
-  JOBS_MONITORING_PAGE,
   JOBS_PAGE,
   JOBS_PAGE_PATH,
   MONITOR_JOBS_TAB,
@@ -238,13 +237,13 @@ const Jobs = () => {
                   jobWizardIsOpened || jobsStore.loading || Boolean(jobsStore.jobLoadingCounter)
                 }
                 autoRefreshStopTrigger={!isEmpty(selectedJob)}
+                closeParamName={selectedTab}
                 filters={filters}
                 filtersConfig={initialTabData[selectedTab].filtersConfig}
-                handleRefresh={tabData[selectedTab].handleRefresh}
                 handleAutoRefreshPrevValueChange={setAutoRefreshPrevValue}
+                handleRefresh={tabData[selectedTab].handleRefresh}
                 hidden={Boolean(params.workflowId)}
                 key={selectedTab}
-                page={JOBS_MONITORING_PAGE}
                 setSearchParams={setSearchParams}
                 tab={selectedTab}
                 withAutoRefresh={selectedTab === MONITOR_JOBS_TAB}

diff --git a/src/components/Jobs/MonitorJobs/MonitorJobs.js b/src/components/Jobs/MonitorJobs/MonitorJobs.js
@@ -113,7 +113,6 @@ const MonitorJobs = () => {
         autoRefreshPrevValue={autoRefreshPrevValue}
         jobRuns={jobRuns}
         jobs={jobs}
-        navigateLink={getBackLink()}
         paginatedJobs={paginatedJobs}
         ref={{ abortJobRef, fetchJobFunctionsPromiseRef }}
         refreshJobs={refreshJobs}

diff --git a/src/components/ModelsPage/ModelEndpoints/ModelEndpoints.js b/src/components/ModelsPage/ModelEndpoints/ModelEndpoints.js
@@ -257,8 +257,7 @@ const ModelEndpoints = () => {
               filters={filters}
               filtersConfig={filtersConfig}
               handleRefresh={handleRefresh}
-              navigateLink={`/projects/${params.projectName}/models/${MODEL_ENDPOINTS_TAB}${window.location.search}`}
-              page={MODELS_PAGE}
+              closeParamName={MODEL_ENDPOINTS_TAB}
               setSearchParams={setSearchParams}
               tab={MODEL_ENDPOINTS_TAB}
               withoutExpandButton

diff --git a/src/components/ModelsPage/Models/ModelsView.js b/src/components/ModelsPage/Models/ModelsView.js
@@ -95,11 +95,10 @@ const ModelsView = React.forwardRef(
                     hidden: !isDemoMode
                   }
                 ]}
+                closeParamName={isAllVersions ? ALL_VERSIONS_PATH : MODELS_TAB}
                 filters={filters}
                 filtersConfig={filtersConfig}
-                navigateLink={`/projects/${projectName}/models/models${isAllVersions ? `/${modelName}/${ALL_VERSIONS_PATH}` : ''}${window.location.search}`}
                 handleRefresh={handleRefreshModels}
-                page={MODELS_PAGE}
                 setSearchParams={setSearchModelsParams}
                 tab={MODELS_TAB}
                 withRefreshButton

diff --git a/src/components/ModelsPage/RealTimePipelines/RealTimePipelines.js b/src/components/ModelsPage/RealTimePipelines/RealTimePipelines.js
@@ -185,11 +185,10 @@ const RealTimePipelines = () => {
           <div className={filterMenuClassNames}>
             <ModelsPageTabs />
             <ActionBar
+              closeParamName={REAL_TIME_PIPELINES_TAB}
               filters={filters}
               filtersConfig={filtersConfig}
               handleRefresh={handleRefresh}
-              navigateLink={`/projects/${params.projectName}/models/${REAL_TIME_PIPELINES_TAB}${window.location.search}`}
-              page={MODELS_PAGE}
               setSearchParams={setSearchParams}
               tab={REAL_TIME_PIPELINES_TAB}
               withoutExpandButton

diff --git a/src/components/ProjectsJobsMonitoring/JobsMonitoring/JobsMonitoring.js b/src/components/ProjectsJobsMonitoring/JobsMonitoring/JobsMonitoring.js
@@ -104,7 +104,6 @@ const JobsMonitoring = () => {
         filtersConfig={jobsFiltersConfig}
         jobRuns={jobRuns}
         jobs={jobs}
-        navigateLink={getBackLink()}
         paginatedJobs={paginatedJobs}
         ref={{ abortJobRef, fetchJobFunctionsPromiseRef }}
         refreshJobs={() => refreshJobs(filters)}

diff --git a/src/components/ProjectsJobsMonitoring/ProjectsJobsMonitoring.js b/src/components/ProjectsJobsMonitoring/ProjectsJobsMonitoring.js
@@ -190,13 +190,13 @@ const ProjectsJobsMonitoring = () => {
                   jobWizardIsOpened || jobsStore.loading || Boolean(jobsStore.jobLoadingCounter)
                 }
                 autoRefreshStopTrigger={!isEmpty(selectedJob)}
+                closeParamName={selectedTab}
                 filters={filters}
                 filtersConfig={initialTabData[selectedTab].filtersConfig}
                 handleRefresh={tabData[selectedTab].handleRefresh}
                 handleAutoRefreshPrevValueChange={setAutoRefreshPrevValue}
                 hidden={Boolean(params.workflowId)}
                 key={selectedTab}
-                page={JOBS_MONITORING_PAGE}
                 setSearchParams={setSearchParams}
                 tab={selectedTab}
                 withAutoRefresh={selectedTab === JOBS_MONITORING_JOBS_TAB}

diff --git a/src/elements/JobsTable/JobsTable.js b/src/elements/JobsTable/JobsTable.js
@@ -399,7 +399,6 @@ JobsTable.propTypes = {
   filtersConfig: FILTERS_CONFIG.isRequired,
   jobRuns: PropTypes.array.isRequired,
   jobs: PropTypes.array.isRequired,
-  navigateLink: PropTypes.string.isRequired,
   paginatedJobs: PropTypes.array.isRequired,
   refreshJobs: PropTypes.func.isRequired,
   requestErrorMessage: PropTypes.string.isRequired,