From 28dc8d4d17d428a598cf084e2914b291b85c0b04 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Frane=20Poli=C4=87?=
<16856471+fPolic@users.noreply.github.com>
Date: Wed, 11 Sep 2024 10:12:34 +0200
Subject: [PATCH] feat(dashboard) modal search autofocus (#9038)
**What**
- autofocus search input on route modal that have tables
---
CLOSES CC-132
---
.../data-table/data-table-query/data-table-query.tsx | 9 +++++++--
.../data-table/data-table-search/data-table-search.tsx | 3 +++
.../src/components/table/data-table/data-table.tsx | 2 +-
.../api-key-sales-channels-form.tsx | 2 +-
.../components/add-campaign-promotions-form.tsx | 2 +-
.../edit-category-products-form.tsx | 2 +-
.../add-products-to-collection-form.tsx | 2 +-
.../components/add-customers-form/add-customers-form.tsx | 2 +-
.../add-customers-form/add-customer-groups-form.tsx | 2 +-
.../edit-fulfillment-providers-form.tsx | 2 +-
.../edit-sales-channels-form.tsx | 2 +-
.../edit-sales-channels-form.tsx | 2 +-
.../components/add-countries-form/add-countries-form.tsx | 2 +-
.../components/create-region-form/create-region-form.tsx | 2 +-
.../components/add-products-to-sales-channel-form.tsx | 2 +-
.../add-currencies-form/add-currencies-form.tsx | 2 +-
.../components/invite-user-form/invite-user-form.tsx | 7 ++++---
17 files changed, 28 insertions(+), 19 deletions(-)
diff --git a/packages/admin/dashboard/src/components/table/data-table/data-table-query/data-table-query.tsx b/packages/admin/dashboard/src/components/table/data-table/data-table-query/data-table-query.tsx
index 6cf99ee531378..6a2794198cba7 100644
--- a/packages/admin/dashboard/src/components/table/data-table/data-table-query/data-table-query.tsx
+++ b/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 = ({
)}
- {search && }
+ {search && (
+
+ )}
{orderBy && }
diff --git a/packages/admin/dashboard/src/components/table/data-table/data-table-search/data-table-search.tsx b/packages/admin/dashboard/src/components/table/data-table/data-table-search/data-table-search.tsx
index 763aa1dadd238..264f1ec795e1f 100644
--- a/packages/admin/dashboard/src/components/table/data-table/data-table-search/data-table-search.tsx
+++ b/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}
diff --git a/packages/admin/dashboard/src/components/table/data-table/data-table.tsx b/packages/admin/dashboard/src/components/table/data-table/data-table.tsx
index 42ef4e93d8315..31ba698e52e76 100644
--- a/packages/admin/dashboard/src/components/table/data-table/data-table.tsx
+++ b/packages/admin/dashboard/src/components/table/data-table/data-table.tsx
@@ -41,7 +41,7 @@ export const DataTable = ({
diff --git a/packages/admin/dashboard/src/routes/collections/collection-add-products/components/add-products-to-collection-form/add-products-to-collection-form.tsx b/packages/admin/dashboard/src/routes/collections/collection-add-products/components/add-products-to-collection-form/add-products-to-collection-form.tsx
index abb0039b0f16f..dea688b9b735f 100644
--- a/packages/admin/dashboard/src/routes/collections/collection-add-products/components/add-products-to-collection-form/add-products-to-collection-form.tsx
+++ b/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"
/>
diff --git a/packages/admin/dashboard/src/routes/customer-groups/customer-group-add-customers/components/add-customers-form/add-customers-form.tsx b/packages/admin/dashboard/src/routes/customer-groups/customer-group-add-customers/components/add-customers-form/add-customers-form.tsx
index aa1580422a7a8..e6fd5ad82a184 100644
--- a/packages/admin/dashboard/src/routes/customer-groups/customer-group-add-customers/components/add-customers-form/add-customers-form.tsx
+++ b/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"),
diff --git a/packages/admin/dashboard/src/routes/customers/customers-add-customer-group/components/add-customers-form/add-customer-groups-form.tsx b/packages/admin/dashboard/src/routes/customers/customers-add-customer-group/components/add-customers-form/add-customer-groups-form.tsx
index 33cf90e38bece..cbc53a95f85de 100644
--- a/packages/admin/dashboard/src/routes/customers/customers-add-customer-group/components/add-customers-form/add-customer-groups-form.tsx
+++ b/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"),
diff --git a/packages/admin/dashboard/src/routes/locations/location-fulfillment-providers/components/edit-fulfillment-providers-form/edit-fulfillment-providers-form.tsx b/packages/admin/dashboard/src/routes/locations/location-fulfillment-providers/components/edit-fulfillment-providers-form/edit-fulfillment-providers-form.tsx
index 2afa67ebf1bfb..a81a0567e5d5a 100644
--- a/packages/admin/dashboard/src/routes/locations/location-fulfillment-providers/components/edit-fulfillment-providers-form/edit-fulfillment-providers-form.tsx
+++ b/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}
diff --git a/packages/admin/dashboard/src/routes/locations/location-sales-channels/components/edit-sales-channels-form/edit-sales-channels-form.tsx b/packages/admin/dashboard/src/routes/locations/location-sales-channels/components/edit-sales-channels-form/edit-sales-channels-form.tsx
index 2b0f60b84c242..7c9c00800cf34 100644
--- a/packages/admin/dashboard/src/routes/locations/location-sales-channels/components/edit-sales-channels-form/edit-sales-channels-form.tsx
+++ b/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}
diff --git a/packages/admin/dashboard/src/routes/products/product-sales-channels/components/edit-sales-channels-form/edit-sales-channels-form.tsx b/packages/admin/dashboard/src/routes/products/product-sales-channels/components/edit-sales-channels-form/edit-sales-channels-form.tsx
index c37388b74d9fc..8d344a7c9fc74 100644
--- a/packages/admin/dashboard/src/routes/products/product-sales-channels/components/edit-sales-channels-form/edit-sales-channels-form.tsx
+++ b/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}
diff --git a/packages/admin/dashboard/src/routes/regions/region-add-countries/components/add-countries-form/add-countries-form.tsx b/packages/admin/dashboard/src/routes/regions/region-add-countries/components/add-countries-form/add-countries-form.tsx
index 94bad4e138d15..01723c2a6416c 100644
--- a/packages/admin/dashboard/src/routes/regions/region-add-countries/components/add-countries-form/add-countries-form.tsx
+++ b/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"]}
diff --git a/packages/admin/dashboard/src/routes/regions/region-create/components/create-region-form/create-region-form.tsx b/packages/admin/dashboard/src/routes/regions/region-create/components/create-region-form/create-region-form.tsx
index 4a844486cce71..f62819758e7ca 100644
--- a/packages/admin/dashboard/src/routes/regions/region-create/components/create-region-form/create-region-form.tsx
+++ b/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}
diff --git a/packages/admin/dashboard/src/routes/sales-channels/sales-channel-add-products/components/add-products-to-sales-channel-form.tsx b/packages/admin/dashboard/src/routes/sales-channels/sales-channel-add-products/components/add-products-to-sales-channel-form.tsx
index 9089b05be093b..3ba6e53b36b69 100644
--- a/packages/admin/dashboard/src/routes/sales-channels/sales-channel-add-products/components/add-products-to-sales-channel-form.tsx
+++ b/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"),
}}
diff --git a/packages/admin/dashboard/src/routes/store/store-add-currencies/components/add-currencies-form/add-currencies-form.tsx b/packages/admin/dashboard/src/routes/store/store-add-currencies/components/add-currencies-form/add-currencies-form.tsx
index 5d46cee4156c7..daab01fb8a559 100644
--- a/packages/admin/dashboard/src/routes/store/store-add-currencies/components/add-currencies-form/add-currencies-form.tsx
+++ b/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}
diff --git a/packages/admin/dashboard/src/routes/users/user-invite/components/invite-user-form/invite-user-form.tsx b/packages/admin/dashboard/src/routes/users/user-invite/components/invite-user-form/invite-user-form.tsx
index 731482be9d529..f1d055a1cab2e 100644
--- a/packages/admin/dashboard/src/routes/users/user-invite/components/invite-user-form/invite-user-form.tsx
+++ b/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"]}