Fix [Projects] Clicking on search text box in projects refreshes the …

…screen `1.7.x` (#2878)
mlrun · Nov 12, 2024 · 445ee7c · 445ee7c
1 parent 2fa3850
commit 445ee7c
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 11 deletions.
diff --git a/src/components/ProjectsPage/Projects.js b/src/components/ProjectsPage/Projects.js
@@ -61,6 +61,7 @@ const Projects = () => {
   const abortControllerRef = useRef(new AbortController())
   const terminatePollRef = useRef(null)
   const deletingProjectsRef = useRef({})
+  const projectsAreRefreshedOnSearchRef = useRef(false)
 
   const dispatch = useDispatch()
   const { isDemoMode } = useMode()
@@ -155,9 +156,14 @@ const Projects = () => {
     }
   }, [isNuclioModeDisabled, dispatch, fetchMinimalProjects])
 
-  const handleSearchOnFocus = useCallback(() => {
-    refreshProjects()
-  }, [refreshProjects])
+  const handleSearchOnChange = useCallback((name) => {
+    setFilterByName(name)
+
+    if (!projectsAreRefreshedOnSearchRef.current && name.length >= 1) {
+      refreshProjects()
+      projectsAreRefreshedOnSearchRef.current = true
+    }
+  }, [refreshProjects, setFilterByName])
 
   const handleSelectSortOption = option => {
     setSortProjectId(option)
@@ -436,7 +442,7 @@ const Projects = () => {
       filteredProjects={filteredProjects}
       filterMatches={filterMatches}
       handleCreateProject={handleCreateProject}
-      handleSearchOnFocus={handleSearchOnFocus}
+      handleSearchOnChange={handleSearchOnChange}
       handleSelectSortOption={handleSelectSortOption}
       isDescendingOrder={isDescendingOrder}
       projectsRequestErrorMessage={projectsRequestErrorMessage}
@@ -445,7 +451,6 @@ const Projects = () => {
       removeNewProjectError={removeNewProjectError}
       selectedProjectsState={selectedProjectsState}
       setCreateProject={setCreateProject}
-      setFilterByName={setFilterByName}
       setFilterMatches={setFilterMatches}
       setIsDescendingOrder={setIsDescendingOrder}
       setSelectedProjectsState={setSelectedProjectsState}

diff --git a/src/components/ProjectsPage/ProjectsView.js b/src/components/ProjectsPage/ProjectsView.js
@@ -52,7 +52,7 @@ const ProjectsView = ({
   filteredProjects,
   filterMatches,
   handleCreateProject,
-  handleSearchOnFocus,
+  handleSearchOnChange,
   handleSelectSortOption,
   isDescendingOrder,
   projectsRequestErrorMessage,
@@ -61,7 +61,6 @@ const ProjectsView = ({
   removeNewProjectError,
   selectedProjectsState,
   setCreateProject,
-  setFilterByName,
   setFilterMatches,
   setIsDescendingOrder,
   setSelectedProjectsState,
@@ -137,8 +136,7 @@ const ProjectsView = ({
                   className="projects-search"
                   disabled={projectStore.mlrunUnhealthy.retrying}
                   matches={filterMatches}
-                  onChange={setFilterByName}
-                  onFocus={handleSearchOnFocus}
+                  onChange={handleSearchOnChange}
                   placeholder="Search projects..."
                   setMatches={setFilterMatches}
                   value={filterByName}
@@ -213,14 +211,13 @@ ProjectsView.propTypes = {
   filteredProjects: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
   filterMatches: PropTypes.arrayOf(PropTypes.string).isRequired,
   handleCreateProject: PropTypes.func.isRequired,
-  handleSearchOnFocus: PropTypes.func.isRequired,
+  handleSearchOnChange: PropTypes.func.isRequired,
   handleSelectSortOption: PropTypes.func.isRequired,
   projectsRequestErrorMessage: PropTypes.string.isRequired,
   refreshProjects: PropTypes.func.isRequired,
   removeNewProjectError: PropTypes.func.isRequired,
   selectedProjectsState: PropTypes.string.isRequired,
   setCreateProject: PropTypes.func.isRequired,
-  setFilterByName: PropTypes.func.isRequired,
   setFilterMatches: PropTypes.func.isRequired,
   setIsDescendingOrder: PropTypes.func.isRequired,
   setSelectedProjectsState: PropTypes.func.isRequired,