diff --git a/client/src/app/pages/issues/helpers.ts b/client/src/app/pages/issues/helpers.ts index a78958e5e8..9beb0aad7b 100644 --- a/client/src/app/pages/issues/helpers.ts +++ b/client/src/app/pages/issues/helpers.ts @@ -22,6 +22,9 @@ import { useFetchBusinessServices } from "@app/queries/businessservices"; import { useFetchTagsWithTagItems } from "@app/queries/tags"; import { useTranslation } from "react-i18next"; import { useFetchArchetypes } from "@app/queries/archetypes"; +import { useFetchApplications } from "@app/queries/applications"; +import { localeNumericCompare } from "@app/utils/utils"; +import i18n from "@app/i18n"; // Certain filters are shared between the Issues page and the Affected Applications Page. // We carry these filter values between the two pages when determining the URLs to navigate between them. @@ -41,18 +44,27 @@ export const useSharedAffectedApplicationFilterCategories = < const { businessServices } = useFetchBusinessServices(); const { tagCategories, tags, tagItems } = useFetchTagsWithTagItems(); const { archetypes } = useFetchArchetypes(); + const { data: applications } = useFetchApplications(); return [ { key: "application.name", title: t("terms.applicationName"), filterGroup: IssueFilterGroups.ApplicationInventory, - type: FilterType.search, + type: FilterType.multiselect, placeholderText: t("actions.filterBy", { what: t("terms.applicationName").toLowerCase(), }) + "...", - getServerFilterValue: (value) => (value ? [`*${value[0]}*`] : []), + selectOptions: applications + .map(({ name }) => name) + .sort((a, b) => localeNumericCompare(a, b, i18n.language)) + .map((name) => ({ + key: name, + value: name, + })), + getServerFilterValue: (selectedOptions) => + selectedOptions?.filter(Boolean) ?? [], }, { key: "application.id", diff --git a/client/src/app/utils/utils.ts b/client/src/app/utils/utils.ts index 607dc0d1c3..0e57049095 100644 --- a/client/src/app/utils/utils.ts +++ b/client/src/app/utils/utils.ts @@ -192,3 +192,14 @@ export const collapseSpacesAndCompare = ( export const capitalizeFirstLetter = (str: string) => str.charAt(0).toUpperCase() + str.slice(1); + +/** + * Uses native string localCompare method with numeric option enabled. + * + * @param locale to be used by string compareFn + */ +export const localeNumericCompare = ( + a: string, + b: string, + locale: string +): number => a.localeCompare(b, locale, { numeric: true });