diff --git a/src/components/ProjectsPage/Projects.js b/src/components/ProjectsPage/Projects.js index a22cfcb2b..6176bd3df 100644 --- 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 index 57bfad3ad..0cee1bf9c 100644 --- 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,