feat(dashboard) modal search autofocus (medusajs#9038)

**What** - autofocus search input on route modal that have tables --- CLOSES CC-132
kelvinkipruto · Sep 11, 2024 · 28dc8d4 · 28dc8d4
1 parent d398009
commit 28dc8d4
Show file tree

Hide file tree

Showing 17 changed files with 28 additions and 19 deletions.
diff --git a/...ges/admin/dashboard/src/components/table/data-table/data-table-query/data-table-query.tsx b/...ges/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>

diff --git a/...s/admin/dashboard/src/components/table/data-table/data-table-search/data-table-search.tsx b/...s/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
@@ -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}

diff --git a/...ent-sales-channels/components/api-key-sales-channels-form/api-key-sales-channels-form.tsx b/...ent-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"]}

diff --git a/.../src/routes/campaigns/add-campaign-promotions/components/add-campaign-promotions-form.tsx b/.../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"),
             }}

diff --git a/.../category-products/components/edit-category-products-form/edit-category-products-form.tsx b/.../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>

diff --git a/...d-products/components/add-products-to-collection-form/add-products-to-collection-form.tsx b/...d-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>

diff --git a/...-groups/customer-group-add-customers/components/add-customers-form/add-customers-form.tsx b/...-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/...s/customers-add-customer-group/components/add-customers-form/add-customer-groups-form.tsx b/...s/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/...-providers/components/edit-fulfillment-providers-form/edit-fulfillment-providers-form.tsx b/...-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/.../location-sales-channels/components/edit-sales-channels-form/edit-sales-channels-form.tsx b/.../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/...s/product-sales-channels/components/edit-sales-channels-form/edit-sales-channels-form.tsx b/...s/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/.../routes/regions/region-add-countries/components/add-countries-form/add-countries-form.tsx b/.../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/...ard/src/routes/regions/region-create/components/create-region-form/create-region-form.tsx b/...ard/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/...les-channels/sales-channel-add-products/components/add-products-to-sales-channel-form.tsx b/...les-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/.../routes/store/store-add-currencies/components/add-currencies-form/add-currencies-form.tsx b/.../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/...n/dashboard/src/routes/users/user-invite/components/invite-user-form/invite-user-form.tsx b/...n/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"]}