✨ feat(i18n): transfrom select options

dashpresshq · Apr 27, 2024 · aab7a31 · aab7a31
1 parent 0a92d80
commit aab7a31
Show file tree

Hide file tree

Showing 16 changed files with 122 additions and 84 deletions.
diff --git a/src/frontend/components/IconInputField/index.tsx b/src/frontend/components/IconInputField/index.tsx
@@ -16,7 +16,7 @@ export function IconInputField({ value }: { value: string }) {
             required
             selectData={SystemIconsList.map((icon) => ({
               value: icon,
-              label: userFriendlyCase(icon),
+              label: msg`${userFriendlyCase(icon)}`,
             }))}
             meta={meta}
             input={input}

diff --git a/src/frontend/design-system/components/Form/FormSelect/Async/index.tsx b/src/frontend/design-system/components/Form/FormSelect/Async/index.tsx
@@ -3,7 +3,7 @@ import debounce from "lodash/debounce";
 import AsyncSelect from "react-select/async";
 import styled from "styled-components";
 import { useAsync, useSessionStorage } from "react-use";
-import { ISelectData } from "shared/types/options";
+import { ILabelValue, ISelectData } from "shared/types/options";
 import { useApi } from "frontend/lib/data/useApi";
 import { ApiRequest } from "frontend/lib/data/makeRequest";
 import { useLingui } from "@lingui/react";
@@ -139,7 +139,7 @@ export function AsyncFormMultiSelect({
   values = [],
   onChange,
 }: IFormMultiSelect) {
-  const [cosmeticValues, setCosmeticValues] = useSessionStorage<ISelectData[]>(
+  const [cosmeticValues, setCosmeticValues] = useSessionStorage<ILabelValue[]>(
     "cosmetic-multi-select-values",
     values.map((value) => ({ value, label: value }))
   );
@@ -153,9 +153,9 @@ export function AsyncFormMultiSelect({
       isMulti
       value={cosmeticValues}
       onChange={(newValues: unknown) => {
-        setCosmeticValues(newValues as ISelectData[]);
+        setCosmeticValues(newValues as ILabelValue[]);
         onChange(
-          (newValues as ISelectData[]).map(({ value }) => value as string)
+          (newValues as ILabelValue[]).map(({ value }) => value as string)
         );
       }}
       loadOptions={(inputValue) =>

diff --git a/src/frontend/design-system/components/Form/FormSelect/Simple.tsx b/src/frontend/design-system/components/Form/FormSelect/Simple.tsx
@@ -2,6 +2,7 @@ import styled, { css } from "styled-components";
 
 import { USE_ROOT_COLOR } from "frontend/design-system/theme/root";
 import { ISelectData } from "shared/types/options";
+import { useLingui } from "@lingui/react";
 import { Input } from "../Styles";
 
 interface ISimpleSelect {
@@ -41,6 +42,8 @@ export function SimpleSelect({
   width,
   ariaLabel,
 }: ISimpleSelect) {
+  const { _ } = useLingui();
+
   return (
     <SimpleSelectStyled
       as="select"
@@ -55,7 +58,7 @@ export function SimpleSelect({
     >
       {options.map(({ value: value$1, label }) => (
         <option key={`${value$1}`} value={`${value$1}`}>
-          {label}
+          {_(label)}
         </option>
       ))}
     </SimpleSelectStyled>

diff --git a/src/frontend/design-system/components/Form/FormSelect/index.tsx b/src/frontend/design-system/components/Form/FormSelect/index.tsx
@@ -1,6 +1,6 @@
 import Select from "react-select";
 import styled from "styled-components";
-import { ISelectData } from "shared/types/options";
+import { ILabelValue, ISelectData } from "shared/types/options";
 import { useLingui } from "@lingui/react";
 import {
   generateClassNames,
@@ -31,6 +31,8 @@ export function FormMultiSelect({
   onChange,
   ariaLabel,
 }: IFormMultiSelect) {
+  const { _ } = useLingui();
+
   return (
     <SelectStyled
       classNamePrefix={SharedSelectProps.classNamePrefix}
@@ -44,7 +46,10 @@ export function FormMultiSelect({
         onChange(newValues.map(({ value }: ISelectData) => value));
       }}
       aria-label={ariaLabel}
-      options={selectData}
+      options={selectData.map(({ value, label }) => ({
+        value,
+        label: _(label),
+      }))}
     />
   );
 }
@@ -68,8 +73,8 @@ export const FormSelect = (props: IFormSelect) => {
       value: nullable ? null : "",
       label: defaultLabel || `--- Select ${_(formLabel)} ---`,
     },
-    ...selectData,
-  ] as ISelectData[];
+    ...selectData.map(({ value, label }) => ({ value, label: _(label) })),
+  ];
   return wrapLabelAndError(
     <div data-testid={`react-select__${input.name}`}>
       <SelectStyled
@@ -117,18 +122,17 @@ export function FormNoValueSelect({
   defaultLabel,
   onChange,
 }: IFormNoValueSelect) {
+  const { _ } = useLingui();
   return (
     <SelectStyled
       classNamePrefix={SharedSelectProps.classNamePrefix}
       value={{ value: "", label: defaultLabel || "" }}
-      onChange={({ value, label }: any) => {
+      onChange={({ value, label }: ILabelValue) => {
         onChange(value, label);
       }}
-      options={
-        selectData.filter(
-          ({ value }) => !disabledOptions.includes(value as string)
-        ) as { value: string; label: string }[]
-      }
+      options={selectData
+        .filter(({ value }) => !disabledOptions.includes(value as string))
+        .map(({ value, label }) => ({ value, label: _(label) }))}
     />
   );
 }
diff --git a/src/frontend/design-system/components/Form/FormSelectButton/index.tsx b/src/frontend/design-system/components/Form/FormSelectButton/index.tsx
@@ -1,6 +1,7 @@
 import styled from "styled-components";
 import { sluggify } from "shared/lib/strings";
 import { ISelectData } from "shared/types/options";
+import { useLingui } from "@lingui/react";
 import { OutlineButton } from "../../Button/Button";
 import { IBaseFormSelect } from "../FormSelect/types";
 import { generateFormArias, wrapLabelAndError } from "../_wrapForm";
@@ -44,6 +45,7 @@ function BaseFormSelectButton({
   sm,
   disabled,
 }: IProps) {
+  const { _ } = useLingui();
   return (
     <Root>
       {options.map(({ value, label }, index) => {
@@ -71,7 +73,7 @@ function BaseFormSelectButton({
               readOnly
               checked={isChecked}
             />
-            {label}
+            {_(label)}
           </OutlineButton>
         );
       })}

diff --git a/src/frontend/design-system/components/Form/Stories.tsx b/src/frontend/design-system/components/Form/Stories.tsx
@@ -168,10 +168,10 @@ function DemoForm() {
             {(formProps) => (
               <FormSelectButton
                 selectData={[
-                  { label: "Wood", value: "wood" },
-                  { label: "Bronze", value: "bronze" },
-                  { label: "Silver", value: "silver" },
-                  { label: "Gold", value: "gold" },
+                  { label: fakeMessageDescriptor("Wood"), value: "wood" },
+                  { label: fakeMessageDescriptor("Bronze"), value: "bronze" },
+                  { label: fakeMessageDescriptor("Silver"), value: "silver" },
+                  { label: fakeMessageDescriptor("Gold"), value: "gold" },
                 ]}
                 label={fakeMessageDescriptor("Example Select Button")}
                 {...formProps}
@@ -183,8 +183,8 @@ function DemoForm() {
             {(formProps) => (
               <FormSelect
                 selectData={[
-                  { label: "Foo", value: "foo" },
-                  { label: "Bar", value: "bar" },
+                  { label: fakeMessageDescriptor("Foo"), value: "foo" },
+                  { label: fakeMessageDescriptor("Bar"), value: "bar" },
                 ]}
                 label={fakeMessageDescriptor("Example Select Input")}
                 {...formProps}
@@ -200,8 +200,8 @@ function DemoForm() {
             {(formProps) => (
               <FormSelect
                 selectData={[
-                  { label: "Foo", value: "foo" },
-                  { label: "Bar", value: "bar" },
+                  { label: fakeMessageDescriptor("Foo"), value: "foo" },
+                  { label: fakeMessageDescriptor("Bar"), value: "bar" },
                 ]}
                 label={fakeMessageDescriptor("Disabled Select Input")}
                 {...formProps}
@@ -225,11 +225,11 @@ function DemoForm() {
             {(formProps) => (
               <FormMultiSelect
                 selectData={[
-                  { label: "Foo", value: "foo" },
-                  { label: "Bar", value: "bar" },
-                  { label: "Baz", value: "baz" },
-                  { label: "Noop", value: "noop" },
-                  { label: "Dupe", value: "dupe" },
+                  { label: fakeMessageDescriptor("Foo"), value: "foo" },
+                  { label: fakeMessageDescriptor("Bar"), value: "bar" },
+                  { label: fakeMessageDescriptor("Baz"), value: "baz" },
+                  { label: fakeMessageDescriptor("Noop"), value: "noop" },
+                  { label: fakeMessageDescriptor("Dupe"), value: "dupe" },
                 ]}
                 values={formProps.input.value || ["foo", "bar"]}
                 onChange={formProps.input.onChange}

diff --git a/src/frontend/design-system/components/Table/_Pagination.tsx b/src/frontend/design-system/components/Table/_Pagination.tsx
@@ -4,8 +4,9 @@ import styled from "styled-components";
 import { USE_ROOT_COLOR } from "frontend/design-system/theme/root";
 import { Stack } from "frontend/design-system/primitives/Stack";
 import { Typo } from "frontend/design-system/primitives/Typo";
-import { Trans } from "@lingui/macro";
+import { Trans, msg } from "@lingui/macro";
 import { ChevronLeft, ChevronRight } from "react-feather";
+import { i18nNoop } from "shared/lib/noop";
 import { SimpleSelect } from "../Form/FormSelect/Simple";
 import { TABLE_PAGE_SIZES } from "./constants";
 
@@ -91,7 +92,7 @@ export function TablePagination({
               width={55}
               options={TABLE_PAGE_SIZES.map((option) => ({
                 value: `${option}`,
-                label: `${option}`,
+                label: msg`${i18nNoop(option)}`,
               }))}
               onChange={(value) => setPageSize(Number(value))}
               value={pageSize}

diff --git a/src/frontend/design-system/components/Table/data/index.tsx b/src/frontend/design-system/components/Table/data/index.tsx
@@ -67,8 +67,16 @@ export const TABLE_COLUMNS: ITableColumn[] = [
     filter: {
       _type: "boolean",
       bag: [
-        { color: "#00ff00", label: "Yes", value: "true" },
-        { color: "#ff0000", label: "No", value: "false" },
+        {
+          color: "#00ff00",
+          label: fakeMessageDescriptor("Yes"),
+          value: "true",
+        },
+        {
+          color: "#ff0000",
+          label: fakeMessageDescriptor("No"),
+          value: "false",
+        },
       ],
     },
   },
@@ -79,10 +87,26 @@ export const TABLE_COLUMNS: ITableColumn[] = [
     filter: {
       _type: "status",
       bag: [
-        { color: "#00ff00", label: "Admin", value: "admin" },
-        { color: "#fff000", label: "Editor", value: "editor" },
-        { color: "#fff000", label: "User", value: "user" },
-        { color: "#ff00f0", label: "Developer", value: "developer" },
+        {
+          color: "#00ff00",
+          label: fakeMessageDescriptor("Admin"),
+          value: "admin",
+        },
+        {
+          color: "#fff000",
+          label: fakeMessageDescriptor("Editor"),
+          value: "editor",
+        },
+        {
+          color: "#fff000",
+          label: fakeMessageDescriptor("User"),
+          value: "user",
+        },
+        {
+          color: "#ff00f0",
+          label: fakeMessageDescriptor("Developer"),
+          value: "developer",
+        },
       ],
     },
   },

diff --git a/src/frontend/design-system/components/Table/filters/Boolean.tsx b/src/frontend/design-system/components/Table/filters/Boolean.tsx
@@ -1,5 +1,6 @@
 import { FilterOperators, IColumnFilterBag } from "shared/types/data";
 import { ISelectData } from "shared/types/options";
+import { msg } from "@lingui/macro";
 import { SimpleSelect } from "../../Form/FormSelect/Simple";
 import { IFilterProps } from "./types";
 
@@ -9,7 +10,7 @@ export function FilterTableByBooleans({
 }: IFilterProps<IColumnFilterBag<boolean>, ISelectData[]>) {
   return (
     <SimpleSelect
-      options={[{ label: "-- Select State --", value: "" }, ...bag]}
+      options={[{ label: msg`-- Select State --`, value: "" }, ...bag]}
       onChange={(value: string) => {
         setFilter({
           operator: FilterOperators.EQUAL_TO,

diff --git a/src/frontend/design-system/components/Table/filters/_FilterOperator.tsx b/src/frontend/design-system/components/Table/filters/_FilterOperator.tsx
@@ -2,20 +2,7 @@ import { useEffect } from "react";
 import { FilterOperators, IColumnFilterBag } from "shared/types/data";
 import { Spacer } from "frontend/design-system/primitives/Spacer";
 import { SimpleSelect } from "../../Form/FormSelect/Simple";
-
-const FILTER_OPERATOR_LABELS: Record<FilterOperators, string> = {
-  [FilterOperators.EQUAL_TO]: "Equal To",
-  [FilterOperators.GREATER_THAN]: "Greater Than",
-  [FilterOperators.LESS_THAN]: "Less Than",
-  [FilterOperators.NOT_IN]: "Not In",
-  [FilterOperators.IN]: "In",
-  [FilterOperators.DATE]: "Date",
-  [FilterOperators.BETWEEN]: "Between",
-  [FilterOperators.CONTAINS]: "Contains",
-  [FilterOperators.NOT_EQUAL]: "Not Equal To",
-  [FilterOperators.IS_NULL]: "Is Null",
-  [FilterOperators.IS_NOT_NULL]: "Is Not Null",
-};
+import { FILTER_OPERATOR_CONFIG } from "./constants";
 
 interface IProps<T> {
   operators: FilterOperators[];
@@ -42,7 +29,7 @@ export function RenderFilterOperator<T>({
         options={[
           ...operators.map((operator) => ({
             value: operator,
-            label: FILTER_OPERATOR_LABELS[operator],
+            label: FILTER_OPERATOR_CONFIG[operator].label,
           })),
         ]}
         ariaLabel="Select Filter Operator"

diff --git a/src/frontend/design-system/components/Table/filters/__tests__/index.spec.tsx b/src/frontend/design-system/components/Table/filters/__tests__/index.spec.tsx
@@ -8,6 +8,7 @@ import {
 } from "shared/types/data";
 import { ApplicationRoot } from "frontend/components/ApplicationRoot";
 import { USE_ROUTER_PARAMS } from "__tests__/_/constants";
+import { fakeMessageDescriptor } from "translations/fake";
 import { TableFilter } from "..";
 
 const setFilterValueJestFn = jest.fn();
@@ -303,11 +304,11 @@ describe("Table Filters", () => {
       _type: "boolean",
       bag: [
         {
-          label: "True Option",
+          label: fakeMessageDescriptor("True Option"),
           value: true,
         },
         {
-          label: "False Option",
+          label: fakeMessageDescriptor("False Option"),
           value: false,
         },
       ],
@@ -415,15 +416,15 @@ describe("Table Filters", () => {
       _type: "status",
       bag: [
         {
-          label: "Option 1 Label",
+          label: fakeMessageDescriptor("Option 1 Label"),
           value: "option-1",
         },
         {
-          label: "Option 2 Label",
+          label: fakeMessageDescriptor("Option 2 Label"),
           value: "option-2",
         },
         {
-          label: "Option 3 Label",
+          label: fakeMessageDescriptor("Option 3 Label"),
           value: "option-3",
         },
       ],