Merge pull request #2854 from devtron-labs/feat/focus-search

Elessar1802 · web-flow · commit ebb2ee14dae6 · 2025-07-31T12:14:49.000+05:30
feat: hook / shortcut to focus search bar
diff --git a/src/components/ApplicationGroup/List/EnvironmentsList.tsx b/src/components/ApplicationGroup/List/EnvironmentsList.tsx
@@ -118,6 +118,7 @@ const EnvironmentsList = ({ isSuperAdmin }: AppGroupAdminType) => {
                 autoFocus: true,
             }}
             dataTestId="environment-search-box"
+            keyboardShortcut="/"
         />
     )
 
diff --git a/src/components/ClusterNodes/ClusterList/ClusterListView.tsx b/src/components/ClusterNodes/ClusterList/ClusterListView.tsx
@@ -108,6 +108,7 @@ const ClusterListView = (props: ClusterViewType) => {
                             autoFocus: true,
                             disabled: initialLoading,
                         }}
+                        keyboardShortcut="/"
                     />
                     {ClusterFilters && (
                         <ClusterFilters clusterFilter={clusterFilter} setClusterFilter={setClusterFilter} />
diff --git a/src/components/Jobs/JobList/JobListFilters.tsx b/src/components/Jobs/JobList/JobListFilters.tsx
@@ -72,6 +72,7 @@ const JobListFilters = ({
                     autoFocus: true,
                 }}
                 dataTestId="Search-by-job-name"
+                keyboardShortcut="/"
             />
             <div className="flexbox dc__gap-8 dc__align-items-center dc__zi-4">
                 <FilterSelectPicker
diff --git a/src/components/ResourceBrowser/ResourceBrowser.scss b/src/components/ResourceBrowser/ResourceBrowser.scss
@@ -76,18 +76,6 @@
                 }
             }
         }
-
-        .resource-filter-options-container {
-            &__search-box {
-                width: 250px;
-
-                .resource-search-shortcut-key {
-                    right: 8px;
-                    top: 50%;
-                    transform: translateY(-50%);
-                }
-            }
-        }
     }
 }
 
diff --git a/src/components/ResourceBrowser/ResourceList/NodeListSearchFilter.tsx b/src/components/ResourceBrowser/ResourceList/NodeListSearchFilter.tsx
@@ -14,17 +14,11 @@
  * limitations under the License.
  */
 
-import { KeyboardEvent, useEffect, useMemo, useRef } from 'react'
+import { useMemo } from 'react'
 import { useHistory, useLocation, useParams } from 'react-router-dom'
 import { parse as parseQueryString, ParsedQuery, stringify as stringifyQueryString } from 'query-string'
 
-import {
-    FilterChips,
-    GroupedFilterSelectPicker,
-    SearchBar,
-    useAsync,
-    useRegisterShortcut,
-} from '@devtron-labs/devtron-fe-common-lib'
+import { FilterChips, GroupedFilterSelectPicker, SearchBar, useAsync } from '@devtron-labs/devtron-fe-common-lib'
 
 import { getClusterCapacity } from '@Components/ClusterNodes/clusterNodes.service'
 
@@ -53,25 +47,6 @@ const NodeListSearchFilter = ({
     const { search } = useLocation()
     const { push } = useHistory()
 
-    // REFS
-    const searchInputRef = useRef<HTMLInputElement | null>(null)
-
-    const { registerShortcut, unregisterShortcut } = useRegisterShortcut()
-
-    useEffect(() => {
-        const handleSearchFocus = () => {
-            searchInputRef.current?.focus()
-        }
-
-        if (registerShortcut) {
-            registerShortcut({ keys: ['/'], callback: handleSearchFocus })
-        }
-
-        return () => {
-            unregisterShortcut(['/'])
-        }
-    }, [])
-
     // CONSTANTS
     const isNodeSearchFilterApplied =
         searchParams[NODE_SEARCH_KEYS.LABEL] ||
@@ -120,12 +95,6 @@ const NodeListSearchFilter = ({
         push(`?${finalQueryString}`)
     }
 
-    const handleSearchInputKeyUp = (e: KeyboardEvent<HTMLInputElement>) => {
-        if (e.key === 'Escape' || e.key === 'Esc') {
-            searchInputRef.current?.blur()
-        }
-    }
-
     const handleSearchFilterChange =
         (nodeSearchKey: NODE_SEARCH_KEYS | typeof NODE_K8S_VERSION_FILTER_KEY) =>
         (filtersToApply: NodeSearchListOptionType[]) => {
@@ -186,9 +155,7 @@ const NodeListSearchFilter = ({
                     handleSearchChange={handleSearch}
                     keyboardShortcut="/"
                     inputProps={{
-                        ref: searchInputRef,
                         placeholder: 'Search Nodes',
-                        onKeyUp: handleSearchInputKeyUp,
                     }}
                     containerClassName="w-250"
                 />
diff --git a/src/components/ResourceBrowser/ResourceList/ResourceFilterOptions.tsx b/src/components/ResourceBrowser/ResourceList/ResourceFilterOptions.tsx
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { ComponentProps, KeyboardEvent, useEffect, useMemo, useRef, useState } from 'react'
+import { ComponentProps, useEffect, useMemo, useRef, useState } from 'react'
 import { useParams } from 'react-router-dom'
 import { SelectInstance } from 'react-select'
 
@@ -44,7 +44,6 @@ import { FILE_NAMES } from '@Components/common/ExportToCsv/constants'
 import ExportToCsv from '@Components/common/ExportToCsv/ExportToCsv'
 
 import { convertToOptionsList, importComponentFromFELibrary } from '../../common'
-import { ShortcutKeyBadge } from '../../common/formFields/Widgets/Widgets'
 import { NAMESPACE_NOT_APPLICABLE_OPTION, NAMESPACE_NOT_APPLICABLE_TEXT } from '../Constants'
 import { namespaceListByClusterId } from '../ResourceBrowser.service'
 import { ResourceFilterOptionsProps } from '../Types'
@@ -79,15 +78,13 @@ const ResourceFilterOptions = ({
     const { registerShortcut, unregisterShortcut } = useRegisterShortcut()
     const { clusterId } = useParams<K8sResourceListURLParams>()
     const [showFilterModal, setShowFilterModal] = useState(false)
-    const [isInputFocused, setIsInputFocused] = useState(false)
     const searchInputRef = useRef<HTMLInputElement>(null)
     const namespaceFilterRef = useRef<SelectInstance<SelectPickerOptionType>>(null)
 
     const isEventListing = selectedResource?.gvk?.Kind === Nodes.Event
 
     const { gvkOptions, areGVKOptionsLoading, reloadGVKOptions, gvkOptionsError } = gvkFilterConfig || {}
 
-    const showShortcutKey = !isInputFocused && !searchText
     const isResourceRecommender = selectedResource?.gvk?.Kind === Nodes.ResourceRecommender
 
     const {
@@ -110,10 +107,6 @@ const ResourceFilterOptions = ({
         return NAMESPACE_NOT_APPLICABLE_OPTION
     }, [selectedNamespace, selectedResource?.namespaced, namespaceOptions])
 
-    const handleInputShortcut = () => {
-        searchInputRef.current?.focus()
-    }
-
     const handleShowFilterModal = () => {
         setShowFilterModal(true)
     }
@@ -129,23 +122,15 @@ const ResourceFilterOptions = ({
 
     useEffect(() => {
         if (registerShortcut) {
-            registerShortcut({ keys: ['/'], callback: handleInputShortcut })
             registerShortcut({ keys: ['F'], callback: handleShowFilterModal })
             registerShortcut({ keys: ['N'], callback: handleFocusNamespaceFilter })
         }
         return (): void => {
             unregisterShortcut(['F'])
-            unregisterShortcut(['/'])
             unregisterShortcut(['N'])
         }
     }, [])
 
-    const handleFilterKeyUp = (e: KeyboardEvent): void => {
-        if (e.key === 'Escape' || e.key === 'Esc') {
-            searchInputRef.current?.blur()
-        }
-    }
-
     const handleOnChangeSearchText: ComponentProps<typeof SearchBar>['handleSearchChange'] = (text) => {
         setSearchText(text)
         if (!text) {
@@ -164,10 +149,6 @@ const ResourceFilterOptions = ({
         )
     }
 
-    const handleInputBlur = () => setIsInputFocused(false)
-
-    const handleInputFocus = () => setIsInputFocused(true)
-
     const handleOnEventTypeChange: SegmentedControlProps['onChange'] = ({ value }) => {
         updateSearchParams({ eventType: value === 'normal' ? value : null })
     }
@@ -231,21 +212,12 @@ const ResourceFilterOptions = ({
                             inputProps={{
                                 placeholder: searchPlaceholder || `Search ${selectedResource?.gvk?.Kind || ''}`,
                                 disabled: isSearchInputDisabled,
-                                onBlur: handleInputBlur,
-                                onFocus: handleInputFocus,
                                 ref: searchInputRef,
-                                onKeyUp: handleFilterKeyUp,
                             }}
                             handleSearchChange={handleOnChangeSearchText}
                             initialSearchText={searchText}
+                            keyboardShortcut="/"
                         />
-                        {showShortcutKey && (
-                            <ShortcutKeyBadge
-                                shortcutKey="/"
-                                rootClassName="resource-search-shortcut-key"
-                                onClick={handleInputShortcut}
-                            />
-                        )}
                     </div>
                 </div>
 
@@ -312,6 +284,7 @@ const ResourceFilterOptions = ({
                             icon={<NamespaceIcon className="fcn-6" />}
                             disabledTippyContent={NAMESPACE_NOT_APPLICABLE_TEXT}
                             shouldMenuAlignRight
+                            keyboardShortcut="N"
                         />
                     </div>
 
diff --git a/src/components/app/list-new/AppListFilters.tsx b/src/components/app/list-new/AppListFilters.tsx
@@ -219,6 +219,7 @@ const AppListFilters = ({
                     }}
                     handleEnter={handleSearch}
                     size={ComponentSizeType.medium}
+                    keyboardShortcut="/"
                 />
                 {window._env_.FEATURE_GROUPED_APP_LIST_FILTERS_ENABLE && (
                     <div className="dc__position-rel">
diff --git a/src/components/charts/ChartHeaderFilters.tsx b/src/components/charts/ChartHeaderFilters.tsx
@@ -214,6 +214,7 @@ const ChartHeaderFilter = ({
                         autoFocus: true,
                     }}
                     dataTestId="chart-store-search-box"
+                    keyboardShortcut='/'
                 />
             </div>
             <div className="pl-12 pr-12 flexbox-col flex-grow-1 dc__overflow-auto">

Original file line number	Diff line number	Diff line change
`@@ -118,6 +118,7 @@ const EnvironmentsList = ({ isSuperAdmin }: AppGroupAdminType) => {`
`118`	`118`	`autoFocus: true,`
`119`	`119`	`}}`
`120`	`120`	`dataTestId="environment-search-box"`
	`121`	`+ keyboardShortcut="/"`
`121`	`122`	`/>`
`122`	`123`	`)`
`123`	`124`
Original file line number	Diff line number	Diff line change
`@@ -76,18 +76,6 @@`
`76`	`76`	`}`
`77`	`77`	`}`
`78`	`78`	`}`
`79`		`-`
`80`		`- .resource-filter-options-container {`
`81`		`- &__search-box {`
`82`		`- width: 250px;`
`83`		`-`
`84`		`- .resource-search-shortcut-key {`
`85`		`- right: 8px;`
`86`		`- top: 50%;`
`87`		`- transform: translateY(-50%);`
`88`		`- }`
`89`		`- }`
`90`		`- }`
`91`	`79`	`}`
`92`	`80`	`}`
`93`	`81`