feat(dashboard) modal search autofocus (#9038)

**What**
- autofocus search input on route modal that have tables

---

CLOSES CC-132

packages/admin/dashboard/src/components/table/data-table/data-table-query/data-table-query.tsx

@@ -4,7 +4,7 @@ import { DataTableOrderBy } from "../data-table-order-by"
 import { DataTableSearch } from "../data-table-search"
 
 export interface DataTableQueryProps {
-  search?: boolean
+  search?: boolean | "autofocus"
   orderBy?: (string | number)[]
   filters?: Filter[]
   prefix?: string
@@ -25,7 +25,12 @@ export const DataTableQuery = ({
           )}
         </div>
         <div className="flex shrink-0 items-center gap-x-2">
-          {search && <DataTableSearch prefix={prefix} />}
+          {search && (
+            <DataTableSearch
+              prefix={prefix}
+              autofocus={search === "autofocus"}
+            />
+          )}
           {orderBy && <DataTableOrderBy keys={orderBy} prefix={prefix} />}
         </div>
       </div>

packages/admin/dashboard/src/components/table/data-table/data-table-search/data-table-search.tsx

@@ -8,11 +8,13 @@ import { useSelectedParams } from "../hooks"
 type DataTableSearchProps = {
   placeholder?: string
   prefix?: string
+  autofocus?: boolean
 }
 
 export const DataTableSearch = ({
   placeholder,
   prefix,
+  autofocus,
 }: DataTableSearchProps) => {
   const { t } = useTranslation()
   const placeholderText = placeholder || t("general.search")
@@ -50,6 +52,7 @@ export const DataTableSearch = ({
       name="q"
       type="search"
       size="small"
+      autoFocus={autofocus}
       defaultValue={query?.[0] || undefined}
       onChange={debouncedOnChange}
       placeholder={placeholderText}

packages/admin/dashboard/src/components/table/data-table/data-table.tsx

@@ -41,7 +41,7 @@ export const DataTable = <TData,>({
       <TableSkeleton
         layout={layout}
         rowCount={pageSize}
-        search={search}
+        search={!!search}
         filters={!!filters?.length}
         orderBy={!!orderBy?.length}
         pagination={!!pagination}

packages/admin/dashboard/src/routes/api-key-management/api-key-management-sales-channels/components/api-key-sales-channels-form/api-key-sales-channels-form.tsx

@@ -142,7 +142,7 @@ export const ApiKeySalesChannelsForm = ({
             count={count}
             pageSize={PAGE_SIZE}
             pagination
-            search
+            search="autofocus"
             isLoading={isLoading}
             queryObject={raw}
             orderBy={["name", "created_at", "updated_at"]}

packages/admin/dashboard/src/routes/campaigns/add-campaign-promotions/components/add-campaign-promotions-form.tsx

@@ -142,7 +142,7 @@ export const AddCampaignPromotionsForm = ({
             queryObject={raw}
             layout="fill"
             pagination
-            search
+            search="autofocus"
             noRecords={{
               message: t("campaigns.promotions.add.list.noRecordsMessage"),
             }}

packages/admin/dashboard/src/routes/categories/category-products/components/edit-category-products-form/edit-category-products-form.tsx

@@ -171,7 +171,7 @@ export const EditCategoryProductsForm = ({
             isLoading={isPending}
             layout="fill"
             pagination
-            search
+            search="autofocus"
           />
         </RouteFocusModal.Body>
       </form>

packages/admin/dashboard/src/routes/collections/collection-add-products/components/add-products-to-collection-form/add-products-to-collection-form.tsx

@@ -179,7 +179,7 @@ export const AddProductsToCollectionForm = ({
             isLoading={isLoading}
             layout="fill"
             pagination
-            search
+            search="autofocus"
           />
         </RouteFocusModal.Body>
       </form>

packages/admin/dashboard/src/routes/customer-groups/customer-group-add-customers/components/add-customers-form/add-customers-form.tsx

@@ -168,7 +168,7 @@ export const AddCustomersForm = ({
             ]}
             isLoading={isLoading}
             layout="fill"
-            search
+            search="autofocus"
             queryObject={raw}
             noRecords={{
               message: t("customerGroups.customers.add.list.noRecordsMessage"),

packages/admin/dashboard/src/routes/customers/customers-add-customer-group/components/add-customers-form/add-customer-groups-form.tsx

@@ -180,7 +180,7 @@ export const AddCustomerGroupsForm = ({
             orderBy={["name", "created_at", "updated_at"]}
             isLoading={isLoading}
             layout="fill"
-            search
+            search="autofocus"
             queryObject={raw}
             noRecords={{
               message: t("customers.groups.add.list.noRecordsMessage"),

packages/admin/dashboard/src/routes/locations/location-fulfillment-providers/components/edit-fulfillment-providers-form/edit-fulfillment-providers-form.tsx

@@ -130,7 +130,7 @@ export const LocationEditFulfillmentProvidersForm = ({
             isLoading={isLoading}
             count={count}
             filters={filters}
-            search
+            search="autofocus"
             pagination
             orderBy={["id", "created_at", "updated_at"]}
             queryObject={raw}

packages/admin/dashboard/src/routes/locations/location-sales-channels/components/edit-sales-channels-form/edit-sales-channels-form.tsx

@@ -144,7 +144,7 @@ export const LocationEditSalesChannelsForm = ({
             isLoading={isLoading}
             count={count}
             filters={filters}
-            search
+            search="autofocus"
             pagination
             orderBy={["name", "created_at", "updated_at"]}
             queryObject={raw}

packages/admin/dashboard/src/routes/products/product-sales-channels/components/edit-sales-channels-form/edit-sales-channels-form.tsx

@@ -140,7 +140,7 @@ export const EditSalesChannelsForm = ({
             isLoading={isLoading}
             count={count}
             filters={filters}
-            search
+            search="autofocus"
             pagination
             orderBy={["name", "created_at", "updated_at"]}
             queryObject={raw}

packages/admin/dashboard/src/routes/regions/region-add-countries/components/add-countries-form/add-countries-form.tsx

@@ -146,7 +146,7 @@ export const AddCountriesForm = ({ region }: AddCountriesFormProps) => {
             columns={columns}
             pageSize={PAGE_SIZE}
             count={count}
-            search
+            search="autofocus"
             pagination
             layout="fill"
             orderBy={["name", "code"]}

packages/admin/dashboard/src/routes/regions/region-create/components/create-region-form/create-region-form.tsx

@@ -419,7 +419,7 @@ export const CreateRegionForm = ({
                   pageSize={PAGE_SIZE}
                   orderBy={["name", "code"]}
                   pagination
-                  search
+                  search="autofocus"
                   layout="fill"
                   queryObject={raw}
                   prefix={PREFIX}

packages/admin/dashboard/src/routes/sales-channels/sales-channel-add-products/components/add-products-to-sales-channel-form.tsx

@@ -152,7 +152,7 @@ export const AddProductsToSalesChannelForm = ({
             queryObject={raw}
             layout="fill"
             pagination
-            search
+            search="autofocus"
             noRecords={{
               message: t("salesChannels.products.add.list.noRecordsMessage"),
             }}

packages/admin/dashboard/src/routes/store/store-add-currencies/components/add-currencies-form/add-currencies-form.tsx

@@ -199,7 +199,7 @@ export const AddCurrenciesForm = ({
             columns={columns}
             layout="fill"
             pagination
-            search
+            search="autofocus"
             prefix={PREFIX}
             orderBy={["code", "name"]}
             isLoading={isLoading}

packages/admin/dashboard/src/routes/users/user-invite/components/invite-user-form/invite-user-form.tsx

@@ -39,8 +39,9 @@ const InviteUserSchema = zod.object({
 
 const PAGE_SIZE = 10
 const PREFIX = "usr_invite"
-const INVITE_URL = `${window.location.origin}${__BASE__ === "/" ? "" : __BASE__}/invite?token=`
-
+const INVITE_URL = `${window.location.origin}${
+  __BASE__ === "/" ? "" : __BASE__
+}/invite?token=`
 
 export const InviteUserForm = () => {
   const { t } = useTranslation()
@@ -163,7 +164,7 @@ export const InviteUserForm = () => {
                     pageSize={PAGE_SIZE}
                     prefix={PREFIX}
                     pagination
-                    search
+                    search="autofocus"
                     isLoading={isLoading}
                     queryObject={raw}
                     orderBy={["email", "created_at", "updated_at"]}