+ )
+ }
+
return (
)
+
+ case "inputSelect":
+ return (
+
+ )
}
}
diff --git a/packages/app-elements/src/ui/resources/useResourceFilters/FieldOptionsSelect.tsx b/packages/app-elements/src/ui/resources/useResourceFilters/FieldOptionsSelect.tsx
new file mode 100644
index 000000000..426c8196b
--- /dev/null
+++ b/packages/app-elements/src/ui/resources/useResourceFilters/FieldOptionsSelect.tsx
@@ -0,0 +1,144 @@
+import type { QueryParamsList } from "@commercelayer/sdk"
+import castArray from "lodash-es/castArray"
+import uniqBy from "lodash-es/uniqBy"
+import type { JSX } from "react"
+import { useFormContext } from "react-hook-form"
+import { useCoreApi, useCoreSdkProvider } from "#providers/CoreSdkProvider"
+import { HookedInputSelect, type InputSelectValue } from "#ui/forms/InputSelect"
+import type { FilterItemOptions } from "./types"
+
+type SelectRender = Extract<
+ FilterItemOptions["render"],
+ { component: "inputSelect" }
+>
+
+/** Core caps `pageSize` at 25, so this is also the most we can load in one go. */
+const defaultLimit = 25
+
+/**
+ * Renders an `options` filter as a (multi) select dropdown, the style used by the
+ * dashboard metrics filters.
+ *
+ * Options come from the Core API. Anything already selected is fetched
+ * separately, so its label resolves even when it is not in the first page, and
+ * when `searchBy` is set typing searches server-side instead of filtering only
+ * what has been loaded.
+ */
+export function FieldOptionsSelect({
+ item,
+}: {
+ item: FilterItemOptions & { render: SelectRender }
+}): JSX.Element | null {
+ const { watch } = useFormContext()
+ const { sdkClient } = useCoreSdkProvider()
+
+ const {
+ resource,
+ fieldForLabel,
+ fieldForValue,
+ searchBy,
+ sortBy,
+ filters = {},
+ limit = defaultLimit,
+ placeholder,
+ isClearable,
+ isMulti = true,
+ hideWhenSingleItem,
+ } = item.render.props
+
+ const selectedValues = castArray(watch(item.sdk.predicate) ?? []).map(
+ (value) => String(value),
+ )
+
+ const listQuery: QueryParamsList = {
+ fields: {
+ [resource]: [fieldForValue, fieldForLabel],
+ },
+ pageSize: limit as QueryParamsList["pageSize"],
+ ...(sortBy != null
+ ? { sort: { [sortBy.attribute]: sortBy.direction } }
+ : {}),
+ filters,
+ }
+
+ const toOption = (item: Record): InputSelectValue => ({
+ value: String(item[fieldForValue]),
+ label: String(item[fieldForLabel] ?? item[fieldForValue]),
+ })
+
+ const { data: firstPage, isLoading } = useCoreApi(
+ resource,
+ "list",
+ [listQuery],
+ { revalidateOnFocus: false },
+ )
+
+ // Selected options may live on a later page, so they are fetched on their own
+ // to keep their labels resolvable. With nothing selected this is the very same
+ // query as above, which swr dedupes.
+ const { data: selectedResources } = useCoreApi(
+ resource,
+ "list",
+ [
+ selectedValues.length === 0
+ ? listQuery
+ : {
+ ...listQuery,
+ filters: {
+ ...filters,
+ [`${fieldForValue}_in`]: selectedValues.join(","),
+ },
+ },
+ ],
+ { revalidateOnFocus: false },
+ )
+
+ const initialValues = uniqBy(
+ [...(selectedResources ?? []), ...(firstPage ?? [])].map((resource) =>
+ toOption(resource as unknown as Record),
+ ),
+ "value",
+ )
+
+ // parity with `inputResourceGroup`: a filter over a single possible value is
+ // not worth showing, unless the user already picked something
+ if (
+ hideWhenSingleItem === true &&
+ firstPage?.meta?.recordCount === 1 &&
+ selectedValues.length === 0
+ ) {
+ return null
+ }
+
+ return (
+ {
+ // the sdk resource is only known at runtime, so the `list` shape
+ // cannot be inferred from the union of all listable resources
+ const results = await (
+ sdkClient[resource] as unknown as {
+ list: (
+ params: QueryParamsList,
+ ) => Promise>>
+ }
+ ).list({
+ ...listQuery,
+ filters: { ...filters, [searchBy]: hint },
+ })
+
+ return results.map(toOption)
+ }
+ }
+ />
+ )
+}
diff --git a/packages/app-elements/src/ui/resources/useResourceFilters/FiltersBar.tsx b/packages/app-elements/src/ui/resources/useResourceFilters/FiltersBar.tsx
new file mode 100644
index 000000000..93844b934
--- /dev/null
+++ b/packages/app-elements/src/ui/resources/useResourceFilters/FiltersBar.tsx
@@ -0,0 +1,293 @@
+import type { ListableResourceType } from "@commercelayer/sdk"
+import type { JSX, ReactNode } from "react"
+import { useCoreApi } from "#providers/CoreSdkProvider"
+import { t } from "#providers/I18NProvider"
+import { useTokenProvider } from "#providers/TokenProvider"
+import { Button } from "#ui/atoms/Button"
+import { ButtonFilter } from "#ui/atoms/ButtonFilter"
+import { Icon } from "#ui/atoms/Icon"
+import { SkeletonTemplate } from "#ui/atoms/SkeletonTemplate"
+import { Tooltip } from "#ui/atoms/Tooltip"
+import {
+ getClearedFormValues,
+ getPillFilters,
+ type PillFilter,
+} from "./activeFilters"
+import { makeFilterAdapters } from "./adapters"
+import { FiltersSearchBar } from "./FiltersSearchBar"
+import type { FiltersInstructions, FormFullValues } from "./types"
+
+export interface FiltersBarProps {
+ /**
+ * Url query string to be parsed.
+ * It must be "reactive", so most of the time it should come from the router.
+ */
+ queryString: string
+ /**
+ * Callback triggered when the user interacts with the search bar or removes a
+ * filter. The implementation should update the url query string.
+ */
+ onUpdate: (newQueryString: string) => void
+ /**
+ * Filters that are already implied by the current view, typically the ones
+ * defining the active tab.
+ *
+ * They are not rendered as pills, removing a pill reverts that single filter
+ * back to the value defined here, and "clear all" reverts to this set rather
+ * than to no filters at all.
+ */
+ defaultValues?: FormFullValues
+ /**
+ * Overrides the filters button behavior. When set, the built-in drawer is not
+ * opened and the app is responsible for rendering the filters form — for
+ * example by navigating to a dedicated filters page.
+ */
+ onFilterClick?: () => void
+ /**
+ * Placeholder text for the search bar
+ * @default 'Search...'
+ */
+ searchBarPlaceholder?: string
+ /**
+ * Milliseconds to wait before triggering the search bar callback
+ * @default 500
+ */
+ searchBarDebounceMs?: number
+ /**
+ * Hide the search bar, keeping the filters button and the pills.
+ * @default false
+ */
+ hideSearchBar?: boolean
+ /**
+ * Rendered to the right of the filters button, for page level actions such as
+ * an export button.
+ */
+ actions?: ReactNode
+}
+
+interface InternalProps {
+ instructions: FiltersInstructions
+ predicateWhitelist: string[]
+ /** Opens the drawer rendered by `FiltersDrawer`. */
+ openDrawer: () => void
+}
+
+/**
+ * Search bar with the filters button on the right and the applied filters
+ * rendered as removable pills below.
+ */
+export function FiltersBar({
+ queryString,
+ onUpdate,
+ defaultValues,
+ onFilterClick,
+ searchBarPlaceholder,
+ searchBarDebounceMs,
+ hideSearchBar = false,
+ actions,
+ instructions,
+ predicateWhitelist,
+ openDrawer,
+}: FiltersBarProps & InternalProps): JSX.Element {
+ const { user } = useTokenProvider()
+ const { adaptUrlQueryToFormValues, adaptFormValuesToUrlQuery } =
+ makeFilterAdapters({ instructions, predicateWhitelist })
+
+ /**
+ * Whether the drawer would have anything to show. A `searchBar` text filter is
+ * rendered by this bar and skipped by the form (`FieldTextSearch` returns
+ * `null` for it), and hidden instructions render nothing — so an instruction
+ * set made only of those would open an empty drawer. The button is dropped
+ * instead, which is what an app with search but no filters wants.
+ */
+ const hasFilterFields = instructions.some(
+ (item) =>
+ item.hidden !== true &&
+ !(item.type === "textSearch" && item.render.component === "searchBar"),
+ )
+
+ const pills = getPillFilters({
+ instructions,
+ queryString,
+ predicateWhitelist,
+ defaultValues,
+ timezone: user?.timezone,
+ locale: user?.locale,
+ })
+
+ const emit = (formValues: FormFullValues): void => {
+ onUpdate(adaptFormValuesToUrlQuery({ formValues }))
+ }
+
+ const removePill = (pill: PillFilter): void => {
+ const formValues = adaptUrlQueryToFormValues({ queryString })
+
+ if (pill.kind === "timeRange") {
+ emit({
+ ...formValues,
+ timePreset: defaultValues?.timePreset,
+ timeFrom: defaultValues?.timeFrom,
+ timeTo: defaultValues?.timeTo,
+ } as FormFullValues)
+ return
+ }
+
+ emit({
+ ...formValues,
+ // reverting to the view's own value, or emptying when it defines none
+ [pill.id]: defaultValues?.[pill.id] ?? [],
+ } as FormFullValues)
+ }
+
+ const clearAll = (): void => {
+ emit(
+ getClearedFormValues({
+ instructions,
+ queryString,
+ predicateWhitelist,
+ defaultValues,
+ }),
+ )
+ }
+
+ return (
+ <>
+