fix: Add App search component (#639)

* feat: make sure cusror is focused on search box on trigerr, fix: button title, fix: improve search app matching

* feat: focus cusror on search box, clear search on exit

* fix: remove unnecessary setTimeout

Signed-off-by: rohan <[email protected]>

---------

Signed-off-by: rohan <[email protected]>
Co-authored-by: rohan <[email protected]>

Author: nimish-ks

frontend/app/[team]/access/members/_components/AddAppToMemberButton.tsx

@@ -6,8 +6,8 @@ import GetApps from '@/graphql/queries/getApps.gql'
 import { Menu, Transition } from '@headlessui/react'
 import { useQuery } from '@apollo/client'
 import Link from 'next/link'
-import { Fragment, useState } from 'react'
-import { FaPlus, FaChevronDown, FaSearch, FaTimesCircle, FaArrowRight } from 'react-icons/fa'
+import { Fragment, useRef, useState } from 'react'
+import { FaPlus, FaSearch, FaTimesCircle, FaArrowRight } from 'react-icons/fa'
 import Spinner from '@/components/common/Spinner'
 import clsx from 'clsx'
 import { EmptyState } from '@/components/common/EmptyState'
@@ -20,6 +20,7 @@ export const AddAppToMemberButton = (props: {
 }) => {
   const { member, organisationId, teamSlug } = props
   const [searchQuery, setSearchQuery] = useState('')
+  const searchInputRef = useRef<HTMLInputElement>(null)
 
   // Fetch all apps the active user has access to
   const { data: allAppsData, loading: loadingApps } = useQuery<Query>(GetApps, {
@@ -47,7 +48,7 @@ export const AddAppToMemberButton = (props: {
   return (
     <Menu as="div" className="relative inline-block text-left group">
       <Menu.Button as={Fragment}>
-        <Button variant="primary" disabled={loadingApps}>
+        <Button variant="primary" title="Add Member to App" disabled={loadingApps}>
           {loadingApps ? (
             <Spinner size="sm" />
           ) : (
@@ -65,6 +66,8 @@ export const AddAppToMemberButton = (props: {
         leave="transition duration-75 ease-out"
         leaveFrom="transform scale-100 opacity-100"
         leaveTo="transform scale-95 opacity-0"
+        afterEnter={() => searchInputRef.current?.focus()}
+        afterLeave={() => setSearchQuery('')}
       >
         <Menu.Items className="absolute z-10 right-0 origin-top-right mt-2 flex flex-col w-min divide-y divide-neutral-500/40 p-px rounded-md bg-neutral-200 dark:bg-neutral-800 shadow-lg ring-1 ring-inset ring-neutral-500/40 focus:outline-none">
           <div>
@@ -78,6 +81,8 @@ export const AddAppToMemberButton = (props: {
                 value={searchQuery}
                 onChange={(e) => setSearchQuery(e.target.value)}
                 onClick={(e) => e.stopPropagation()}
+                ref={searchInputRef}
+                autoFocus
               />
               <FaTimesCircle
                 className={clsx(

frontend/app/[team]/access/service-accounts/[account]/_components/AddAppsToServiceAccountsButton.tsx

@@ -1,4 +1,4 @@
-import { useContext, useState } from 'react'
+import { useContext, useState, useRef } from 'react'
 import { useQuery } from '@apollo/client'
 import { Menu, Transition } from '@headlessui/react'
 import { Fragment } from 'react'
@@ -27,6 +27,7 @@ export const AddAppButton = ({
   const { activeOrganisation: organisation } = useContext(organisationContext)
 
   const [searchQuery, setSearchQuery] = useState('')
+  const searchInputRef = useRef<HTMLInputElement>(null)
 
   const { data, loading } = useQuery<Query>(GetApps, {
     variables: { organisationId: organisation?.id },
@@ -46,14 +47,14 @@ export const AddAppButton = ({
   const filteredApps =
     searchQuery === ''
       ? apps
-      : apps.filter((app: AppType) => app?.name?.toLowerCase().includes(searchQuery))
+      : apps.filter((app: AppType) => app?.name?.toLowerCase().includes(searchQuery.toLowerCase()))
 
   return (
     <Menu as="div" className="relative group">
       {({ open }) => (
         <>
           <Menu.Button as={Fragment}>
-            <Button variant="primary" title="Create a new sync">
+            <Button variant="primary" title="Add App to Service Account">
               <FaPlus /> Add App
             </Button>
           </Menu.Button>
@@ -69,6 +70,8 @@ export const AddAppButton = ({
               'absolute z-10 mt-2',
               alignMenuRight ? 'origin-bottom-left left-0' : 'origin-bottom-right right-0'
             )}
+            afterEnter={() => searchInputRef.current?.focus()}
+            afterLeave={() => setSearchQuery('')}
           >
             <Menu.Items as={Fragment}>
               <div className="flex flex-col w-min divide-y divide-neutral-500/40 p-px rounded-md bg-neutral-200 dark:bg-neutral-800 shadow-lg ring-1 ring-inset ring-neutral-500/40 focus:outline-none">
@@ -82,6 +85,8 @@ export const AddAppButton = ({
                       className="custom bg-zinc-100 dark:bg-zinc-800"
                       value={searchQuery}
                       onChange={(e) => setSearchQuery(e.target.value)}
+                      ref={searchInputRef}
+                      autoFocus
                     />
                     <FaTimesCircle
                       className={clsx(