From 417eb006b0fb9c6cad555fe69239527bd786e066 Mon Sep 17 00:00:00 2001 From: garronej Date: Mon, 10 Apr 2023 12:03:41 +0200 Subject: [PATCH] Use scopped name for software catalog search --- src/ui/i18n.tsx | 6 +- src/ui/pages/softwareCatalog/Search.tsx | 364 ------------------ .../SoftwareCatalogControlled.tsx | 4 +- 3 files changed, 5 insertions(+), 369 deletions(-) delete mode 100644 src/ui/pages/softwareCatalog/Search.tsx diff --git a/src/ui/i18n.tsx b/src/ui/i18n.tsx index 5bd7b9e3..91039b67 100644 --- a/src/ui/i18n.tsx +++ b/src/ui/i18n.tsx @@ -24,7 +24,7 @@ const { | typeof import("ui/App").i18n | typeof import("ui/pages/softwareCatalog/SoftwareCatalogControlled").i18n | typeof import("ui/pages/softwareCatalog/SoftwareCatalogCard").i18n - | typeof import("ui/pages/softwareCatalog/Search").i18n + | typeof import("ui/pages/softwareCatalog/SoftwareCatalogSearch").i18n | typeof import("ui/pages/softwareDetails/SoftwareDetails").i18n | typeof import("ui/pages/softwareDetails/HeaderDetailCard").i18n | typeof import("ui/pages/softwareDetails/PreviewTab").i18n @@ -280,7 +280,7 @@ const { "This software is from French public service", "isPresentInSupportMarket": "This software is present in support market" }, - "Search": { + "SoftwareCatalogSearch": { "placeholder": "Search a software, a word, a reference...", "filtersButton": "Filters", "organizationLabel": "Organization", @@ -677,7 +677,7 @@ const { "no software found": "Aucun logiciel trouvé", "best_match": "Résultats les plus pertinents" }, - "Search": { + "SoftwareCatalogSearch": { "placeholder": "Rechercher un logiciel, un mot, une référence", "filtersButton": "Filtres", "organizationLabel": "Organization", diff --git a/src/ui/pages/softwareCatalog/Search.tsx b/src/ui/pages/softwareCatalog/Search.tsx deleted file mode 100644 index 00c0717f..00000000 --- a/src/ui/pages/softwareCatalog/Search.tsx +++ /dev/null @@ -1,364 +0,0 @@ -import { useState } from "react"; -import { makeStyles } from "@codegouvfr/react-dsfr/tss"; -import { SearchBar } from "@codegouvfr/react-dsfr/SearchBar"; -import { Button } from "@codegouvfr/react-dsfr/Button"; -import { fr } from "@codegouvfr/react-dsfr"; -import { declareComponentKeys } from "i18nifty"; -import { assert } from "tsafe/assert"; -import { Equals } from "tsafe"; -import { - useTranslation, - useLang, - softwareCategoriesFrBySoftwareCategoryEn -} from "ui/i18n"; -import { State as SoftwareCatalogState } from "core/usecases/softwareCatalog"; -import MenuItem from "@mui/material/MenuItem"; -import SelectMui from "@mui/material/Select"; -import { InputBase } from "@mui/material"; -import Tooltip from "@mui/material/Tooltip"; -import { SelectNext } from "ui/shared/SelectNext"; -import Checkbox from "@mui/material/Checkbox"; -import ListItemText from "@mui/material/ListItemText"; - -export type Props = { - className?: string; - - search: string; - onSearchChange: (search: string) => void; - - organizationOptions: { - organization: string; - softwareCount: number; - }[]; - organization: string | undefined; - onOrganizationChange: (organization: string | undefined) => void; - - categoryOptions: { - category: string; - softwareCount: number; - }[]; - category: string | undefined; - onCategoryChange: (category: string | undefined) => void; - - environmentOptions: { - environment: SoftwareCatalogState.Environment; - softwareCount: number; - }[]; - environment: SoftwareCatalogState.Environment | undefined; - onEnvironmentChange: ( - environmentsFilter: SoftwareCatalogState.Environment | undefined - ) => void; - - prerogativesOptions: { - prerogative: SoftwareCatalogState.Prerogative; - softwareCount: number; - }[]; - prerogatives: SoftwareCatalogState.Prerogative[]; - onPrerogativesChange: (prerogatives: SoftwareCatalogState.Prerogative[]) => void; -}; - -export function Search(props: Props) { - const { - className, - - search, - onSearchChange, - - organizationOptions, - organization, - onOrganizationChange, - - categoryOptions, - category, - onCategoryChange, - - environmentOptions, - environment, - onEnvironmentChange, - - prerogativesOptions, - prerogatives, - onPrerogativesChange, - - ...rest - } = props; - - /** Assert to make sure all props are deconstructed */ - assert>(); - - const [areFiltersOpen, setAreFiltersOpen] = useState(false); - - const { t } = useTranslation({ Search }); - const { t: tCommon } = useTranslation({ "App": undefined }); - - const { classes, cx } = useStyles(); - const { lang } = useLang(); - - return ( -
-
- onSearchChange(event.currentTarget.value) - }} - /> - -
-
-
- - {t("organizationLabel")}{" "} - - - - - } - nativeSelectProps={{ - "onChange": event => - onOrganizationChange(event.target.value || undefined), - "value": organization ?? "" - }} - disabled={organizationOptions.length === 0} - options={[ - { - "label": tCommon("allFeminine"), - "value": "" - }, - ...organizationOptions.map( - ({ organization, softwareCount }) => ({ - "value": organization, - "label": `${organization} (${softwareCount})` - }) - ) - ]} - /> - - - onCategoryChange(event.target.value || undefined), - "value": category ?? "" - }} - options={[ - { - "label": tCommon("allFeminine"), - "value": "" - }, - ...categoryOptions.map(({ category, softwareCount }) => ({ - "value": category, - "label": `${ - lang === "fr" - ? softwareCategoriesFrBySoftwareCategoryEn[ - category - ] ?? category - : category - } (${softwareCount})` - })) - ]} - /> - - - onEnvironmentChange(event.target.value || undefined), - "value": environment ?? "" - }} - options={[ - { - "label": tCommon("all"), - "value": "" as const - }, - ...environmentOptions.map( - ({ environment, softwareCount }) => ({ - "value": environment, - "label": `${t(environment)} (${softwareCount})` - }) - ) - ]} - /> - -
- - { - const prerogatives = event.target.value; - - assert(typeof prerogatives !== "string"); - - onPrerogativesChange(prerogatives); - }} - className={cx(fr.cx("fr-select"), classes.multiSelect)} - input={} - renderValue={prerogatives => - t("number of prerogatives selected", { - "count": prerogatives.length - }) - } - placeholder="Placeholder" - > - {prerogativesOptions.map(({ prerogative, softwareCount }) => ( - - - { - switch (prerogative) { - case "doRespectRgaa": - return `${t( - "doRespectRgaa" - )} (${softwareCount})`; - case "isFromFrenchPublicServices": - return `${t( - "isFromFrenchPublicServices" - )} (${softwareCount})`; - case "isInstallableOnUserTerminal": - return `${t( - "isInstallableOnUserTerminal" - )} (${softwareCount})`; - case "isTestable": - return `${t( - "isTestable" - )} (${softwareCount})`; - case "isPresentInSupportContract": - return `${t( - "isPresentInSupportContract" - )} (${softwareCount})`; - } - })()} - /> - - ))} - -
-
-
-
- ); -} - -const useStyles = makeStyles({ "name": { Search } })(theme => ({ - "root": { - "&:before": { - content: "none" - } - }, - "basicSearch": { - "display": "flex", - "paddingTop": fr.spacing("6v") - }, - "searchBar": { - "flex": 1 - }, - "filterButton": { - "backgroundColor": theme.decisions.background.actionLow.blueFrance.default, - "&&&:hover": { - "backgroundColor": theme.decisions.background.actionLow.blueFrance.hover - }, - "color": theme.decisions.text.actionHigh.blueFrance.default, - "marginLeft": fr.spacing("4v") - }, - "filters": { - "&&": { - "overflowX": "visible", - ...fr.spacing("padding", { - "rightLeft": "1v" - }), - "margin": 0 - } - }, - "filtersWrapper": { - "display": "grid", - "gridTemplateColumns": `repeat(4, minmax(20%, 1fr))`, - "columnGap": fr.spacing("4v"), - "marginTop": fr.spacing("3v"), - [fr.breakpoints.down("md")]: { - "gridTemplateColumns": `repeat(1, 1fr)` - } - }, - "filterSelectGroup": { - "&:not(:last-of-type)": { - "borderRight": `1px ${theme.decisions.border.default.grey.default} solid`, - "paddingRight": fr.spacing("4v") - }, - [fr.breakpoints.down("md")]: { - "&:not(:last-of-type)": { - "border": "none" - } - } - }, - "multiSelect": { - "marginTop": fr.spacing("2v"), - "paddingRight": 0, - "& > .MuiInputBase-input": { - "padding": 0 - }, - "& > .MuiSvgIcon-root": { - "display": "none" - } - } -})); - -export const { i18n } = declareComponentKeys< - | "filters" - | "placeholder" - | "filtersButton" - | "organizationLabel" - | "categoriesLabel" - | "environnement label" - | "prerogativesLabel" - | "isInstallableOnUserTerminal" - | "isPresentInSupportContract" - | "isFromFrenchPublicServices" - | "doRespectRgaa" - | "isTestable" - | "organization filter hint" - | "linux" - | "mac" - | "windows" - | "browser" - | "stack" - | { - K: "number of prerogatives selected"; - P: { count: number }; - } ->()({ Search }); diff --git a/src/ui/pages/softwareCatalog/SoftwareCatalogControlled.tsx b/src/ui/pages/softwareCatalog/SoftwareCatalogControlled.tsx index f98905d9..bc5e070b 100644 --- a/src/ui/pages/softwareCatalog/SoftwareCatalogControlled.tsx +++ b/src/ui/pages/softwareCatalog/SoftwareCatalogControlled.tsx @@ -6,7 +6,7 @@ import type { Equals } from "tsafe"; import type { Link } from "type-route"; import { fr } from "@codegouvfr/react-dsfr"; import { SoftwareCatalogCard } from "ui/pages/softwareCatalog/SoftwareCatalogCard"; -import { Search } from "ui/pages/softwareCatalog/Search"; +import { SoftwareCatalogSearch } from "ui/pages/softwareCatalog/SoftwareCatalogSearch"; import { declareComponentKeys } from "i18nifty"; import { useTranslation } from "ui/i18n"; import { routes } from "ui/routes"; @@ -93,7 +93,7 @@ export function SoftwareCatalogControlled(props: Props) { return (
-