Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add translations to DataTable and DataFilters #2107

Closed
wants to merge 1 commit into from
Closed

Add translations to DataTable and DataFilters #2107

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 27 additions & 11 deletions packages/odyssey-react-mui/src/labs/DataFilters.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@
import { RadioGroup } from "../RadioGroup";
import { Radio } from "../Radio";
import { MRT_ColumnDef, MRT_RowData } from "material-react-table";
import { Trans, useTranslation } from "react-i18next";

export type DataFilterValue = string | string[] | undefined;

Expand Down Expand Up @@ -126,6 +127,8 @@
additionalActions,
filters: filtersProp = [],
}: DataFiltersProps) => {
const { t } = useTranslation();

const [filters, setFilters] = useState<DataFilter[]>(filtersProp);

const initialInputValues = useMemo(() => {
Expand Down Expand Up @@ -253,7 +256,7 @@
aria-controls={isFiltersMenuOpen ? "filters-menu" : undefined}
aria-expanded={isFiltersMenuOpen ? "true" : undefined}
aria-haspopup="true"
ariaLabel="Filters"
ariaLabel={t("filters.filters.arialabel")}
endIcon={<FilterIcon />}
onClick={(event) => {
setFiltersMenuAnchorElement(event.currentTarget);
Expand Down Expand Up @@ -305,11 +308,24 @@
<Subordinate component="div">
{!latestFilterValue ||
(Array.isArray(latestFilterValue) &&
latestFilterValue.length === 0)
? `Any ${filter.label.toLowerCase()}`
: Array.isArray(latestFilterValue)
? `${latestFilterValue.length} selected`
: latestFilterValue}
latestFilterValue.length === 0) ? (
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure if this is a bug or not, so please tell me if I got this wrong.
latestFilterValue is set with the following code:

const latestFilterValue = filters.find(
              (f) => f.id === filter.id
            )?.value;

Unless I'm mistaken, the type for latestFilterValue is either a string(I'm assuming value is of type string) or undefined.
I'm suspecting in this code, latestFilterValue is being treated as an Array?
The string type has a length property on it's prototype, but it's when I see Array.isArray(latestFilterValue) above and below this point that I'm a bit confused?
Can you clarify this?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

latestFilterValue may be one of three things:

  1. undefined, for a filter that doesn't have a value set (which usually translates to something like "Any status" or "Any age"
  2. A string, for filters that accept a single value (such as a search query)
  3. An array, for filters that accept multiple values (such as checkboxes or multi-selects)

<Trans
i18nKey="filters.menuitem.any"
values={{
label: filter.label.toLowerCase(),
}}
/>
) : Array.isArray(latestFilterValue) ? (
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To my point earlier, can latestFilterValue be anything other than whatever the type of filter.value is or undefined?

<Trans
count={latestFilterValue.length}
i18nKey="filters.menuitem.selected"
values={{
selected: latestFilterValue.length,
}}
/>
) : (
latestFilterValue
)}
</Subordinate>
</Box>
<ChevronRightIcon />
Expand All @@ -320,7 +336,7 @@
</MuiMenu>
</>
),
[isFiltersMenuOpen, filtersMenuAnchorElement, filtersProp, filters]

Check warning on line 339 in packages/odyssey-react-mui/src/labs/DataFilters.tsx

View workflow job for this annotation

GitHub Actions / ci 

React Hook useMemo has a missing dependency: 't'. Either include it or remove the dependency array
);

return (
Expand Down Expand Up @@ -419,7 +435,7 @@
inputValues[filterPopoverCurrentFilter.id] && (
<MuiIconButton
size="small"
aria-label="Clear filter"
aria-label={t("filters.filter.clear")}
onClick={() => {
handleInputChange(
filterPopoverCurrentFilter.id,
Expand Down Expand Up @@ -489,7 +505,7 @@
}
>
<Radio
label="Any"
label={t("filters.filter.any")}
value={""}
isChecked={
!inputValues[filterPopoverCurrentFilter.id]
Expand Down Expand Up @@ -533,7 +549,7 @@
<Box sx={{ display: "flex", gap: 2, width: "100%" }}>
<SearchField
value={searchValue}
label="Search"
label={t("filters.search.label")}
onClear={() => {
setSearchValue("");
onChangeSearch("");
Expand All @@ -544,7 +560,7 @@
<Box>
<Button
variant="primary"
label="Search"
label={t("filters.search.label")}
onClick={() => onChangeSearch(searchValue)}
/>
</Box>
Expand All @@ -560,7 +576,7 @@
<Box>
<Button
variant="secondary"
label="Clear filters"
label={t("filters.clear.label")}
onClick={() => clearAllFilters()}
/>
</Box>
Expand Down
23 changes: 13 additions & 10 deletions packages/odyssey-react-mui/src/labs/DataTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,7 @@
import { Box } from "../Box";
import { MenuButton, MenuItem } from "..";
import { ArrowUnsortedIcon } from "../icons.generated";
import { useTranslation } from "react-i18next";

export const densityValues = ["comfortable", "spacious", "compact"] as const;

Expand Down Expand Up @@ -321,6 +322,8 @@
const [sorting, setSorting] = useState<MRT_SortingState>([]);
const [density, setDensity] = useState<MRT_DensityState>(initialDensity);

const { t } = useTranslation();

const initialColumnVisibility = useMemo(() => {
return columns.reduce((acc, column) => {
acc[column.accessorKey as string] = true;
Expand Down Expand Up @@ -580,6 +583,7 @@
layoutMode: "grid-no-grow",
displayColumnDefOptions: {
"mrt-row-actions": {
header: t("table.actions"),
muiTableBodyCellProps: {
align: "right",
sx: {
Expand Down Expand Up @@ -648,9 +652,8 @@
}),

muiRowDragHandleProps: ({ table, row }) => ({
title: "Drag row or press space/enter key to start and stop reordering",
"aria-label":
"Drag row to reorder. Or, press space or enter to start and stop reordering and esc to cancel.",
title: t("table.draghandle.tooltip"),
"aria-label": t("table.draghandle.arialabel"),
onKeyDown: (event) => handleDragHandleKeyDown({ table, row, event }),
onBlur: () => {
resetDraggingAndHoveredRow(table);
Expand Down Expand Up @@ -680,7 +683,7 @@
endIcon={<MoreIcon />}
size="small"
buttonVariant="floating"
ariaLabel="More actions"
ariaLabel={t("table.moreactions.arialabel")}
menuAlignment="right"
>
{rowActionMenuItems && (
Expand All @@ -693,7 +696,7 @@
isDisabled={currentIndex <= 0}
onClick={() => updateRowOrder({ rowId: row.id, newIndex: 0 })}
>
<ArrowTopIcon /> Bring to front
<ArrowTopIcon /> {t("table.reorder.tofront")}
</MenuItem>
<MenuItem
isDisabled={currentIndex <= 0}
Expand All @@ -704,7 +707,7 @@
})
}
>
<ArrowUpIcon /> Bring forward
<ArrowUpIcon /> {t("table.reorder.forward")}
</MenuItem>
<MenuItem
isDisabled={totalRows ? currentIndex >= totalRows - 1 : false}
Expand All @@ -715,7 +718,7 @@
})
}
>
<ArrowDownIcon /> Send backward
<ArrowDownIcon /> {t("table.reorder.backward")}
</MenuItem>
<>
{totalRows && (
Expand All @@ -728,7 +731,7 @@
})
}
>
<ArrowBottomIcon /> Send to back
<ArrowBottomIcon /> {t("table.reorder.toback")}
</MenuItem>
)}
</>
Expand All @@ -745,7 +748,7 @@
{hasChangeableDensity && (
<MenuButton
endIcon={<ListIcon />}
ariaLabel="Table density"
ariaLabel={t("table.density.arialabel")}
menuAlignment="right"
shouldCloseOnSelect={false}
>
Expand All @@ -766,7 +769,7 @@
{hasColumnVisibility && (
<MenuButton
endIcon={<ShowIcon />}
ariaLabel="Show/hide columns"
ariaLabel={t("table.columnvisibility.arialabel")}
menuAlignment="right"
shouldCloseOnSelect={false}
>
Expand All @@ -793,7 +796,7 @@
)}
</>
),
[

Check warning on line 799 in packages/odyssey-react-mui/src/labs/DataTable.tsx

View workflow job for this annotation

GitHub Actions / ci 

React Hook useMemo has a missing dependency: 't'. Either include it or remove the dependency array
columnVisibility,
columns,
density,
Expand Down
17 changes: 17 additions & 0 deletions packages/odyssey-react-mui/src/properties/odyssey-react-mui.properties
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,4 +14,21 @@ table.fetchedrows.text = Fetched {{totalRows}} row
table.fetchedrows.text_plural = Fetched {{totalRows}} total rows
table.rows.text = {{totalRows}} row
table.rows.text_plural = {{totalRows}} rows
table.actions = Actions
table.draghandle.tooltip = Drag row or press space/enter key to start and stop reordering
table.draghandle.arialabel = Drag row to reorder. Or, press space or enter to start and stop reordering and esc to cancel.
table.reorder.tofront = Bring to front
table.reorder.forward = Bring forward
table.reorder.backward = Send backward
table.reorder.toback = Send to back
table.density.arialabel = Table density
table.columnvisibility.arialabel = Show/hide columns
table.moreactions.arialabel = More actions
filters.filters.arialabel = Filters
filters.filter.any = Any
filters.filter.clear = Clear filter
filters.menuitem.selected = {{selected}} selected
filters.menuitem.any = Any {{label}}
filters.clear.label = Clear filters
filters.search.label = Search
toast.close.text = close
17 changes: 17 additions & 0 deletions packages/odyssey-react-mui/src/properties/translations/odyssey-react-mui_cs.properties
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,5 +14,22 @@ table.fetchedrows.text = Byl na\u010Dten {{totalRows}} \u0159\u00E1dek
table.fetchedrows.text_plural = Celkem na\u010Dteno \u0159\u00E1dk\u016F: {{totalRows}}
table.rows.text = {{totalRows}} \u0159\u00E1dek
table.rows.text_plural = Po\u010Det \u0159\u00E1dk\u016F: {{totalRows}}
table.actions = [[odyssey:odyssey-react-mui: table.actions]]
table.draghandle.tooltip = [[odyssey:odyssey-react-mui: table.draghandle.tooltip]]
table.draghandle.arialabel = [[odyssey:odyssey-react-mui: table.draghandle.arialabel]]
table.reorder.tofront = [[odyssey:odyssey-react-mui: table.reorder.tofront]]
table.reorder.forward = [[odyssey:odyssey-react-mui: table.reorder.forward]]
table.reorder.backward = [[odyssey:odyssey-react-mui: table.reorder.backward]]
table.reorder.toback = [[odyssey:odyssey-react-mui: table.reorder.toback]]
table.density.arialabel = [[odyssey:odyssey-react-mui: table.density.arialabel]]
table.columnvisibility.arialabel = [[odyssey:odyssey-react-mui: table.columnvisibility.arialabel]]
table.moreactions.arialabel = [[odyssey:odyssey-react-mui: table.moreactions.arialabel]]
filters.filters.arialabel = [[odyssey:odyssey-react-mui: filters.filters.arialabel]]
filters.filter.any = [[odyssey:odyssey-react-mui: filters.filter.any]]
filters.filter.clear = [[odyssey:odyssey-react-mui: filters.filter.clear]]
filters.menuitem.selected = [[odyssey:odyssey-react-mui: filters.menuitem.selected]]
filters.menuitem.any = [[odyssey:odyssey-react-mui: filters.menuitem.any]]
filters.clear.label = [[odyssey:odyssey-react-mui: filters.clear.label]]
filters.search.label = [[odyssey:odyssey-react-mui: filters.search.label]]
Comment on lines +17 to +33
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm assuming these values and the ones like it in other properties files will get replaced with translations eventually? Sorry for the question about this if it's common knowledge... I just haven't seen this before.

toast.close.text = zav\u0159\u00EDt

17 changes: 17 additions & 0 deletions packages/odyssey-react-mui/src/properties/translations/odyssey-react-mui_da.properties
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,5 +14,22 @@ table.fetchedrows.text = Hentet {{totalRows}} r\u00E6kke
table.fetchedrows.text_plural = Hentet {{totalRows}} total antal r\u00E6kker
table.rows.text = {{totalRows}} r\u00E6kke
table.rows.text_plural = {{totalRows}} r\u00E6kker
table.actions = [[odyssey:odyssey-react-mui: table.actions]]
table.draghandle.tooltip = [[odyssey:odyssey-react-mui: table.draghandle.tooltip]]
table.draghandle.arialabel = [[odyssey:odyssey-react-mui: table.draghandle.arialabel]]
table.reorder.tofront = [[odyssey:odyssey-react-mui: table.reorder.tofront]]
table.reorder.forward = [[odyssey:odyssey-react-mui: table.reorder.forward]]
table.reorder.backward = [[odyssey:odyssey-react-mui: table.reorder.backward]]
table.reorder.toback = [[odyssey:odyssey-react-mui: table.reorder.toback]]
table.density.arialabel = [[odyssey:odyssey-react-mui: table.density.arialabel]]
table.columnvisibility.arialabel = [[odyssey:odyssey-react-mui: table.columnvisibility.arialabel]]
table.moreactions.arialabel = [[odyssey:odyssey-react-mui: table.moreactions.arialabel]]
filters.filters.arialabel = [[odyssey:odyssey-react-mui: filters.filters.arialabel]]
filters.filter.any = [[odyssey:odyssey-react-mui: filters.filter.any]]
filters.filter.clear = [[odyssey:odyssey-react-mui: filters.filter.clear]]
filters.menuitem.selected = [[odyssey:odyssey-react-mui: filters.menuitem.selected]]
filters.menuitem.any = [[odyssey:odyssey-react-mui: filters.menuitem.any]]
filters.clear.label = [[odyssey:odyssey-react-mui: filters.clear.label]]
filters.search.label = [[odyssey:odyssey-react-mui: filters.search.label]]
toast.close.text = luk

17 changes: 17 additions & 0 deletions packages/odyssey-react-mui/src/properties/translations/odyssey-react-mui_de.properties
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,5 +14,22 @@ table.fetchedrows.text = {{totalRows}} Zeile abgerufen
table.fetchedrows.text_plural = {{totalRows}} Zeilen insgesamt abgerufen
table.rows.text = {{totalRows}} Zeile
table.rows.text_plural = {{totalRows}} Zeilen
table.actions = [[odyssey:odyssey-react-mui: table.actions]]
table.draghandle.tooltip = [[odyssey:odyssey-react-mui: table.draghandle.tooltip]]
table.draghandle.arialabel = [[odyssey:odyssey-react-mui: table.draghandle.arialabel]]
table.reorder.tofront = [[odyssey:odyssey-react-mui: table.reorder.tofront]]
table.reorder.forward = [[odyssey:odyssey-react-mui: table.reorder.forward]]
table.reorder.backward = [[odyssey:odyssey-react-mui: table.reorder.backward]]
table.reorder.toback = [[odyssey:odyssey-react-mui: table.reorder.toback]]
table.density.arialabel = [[odyssey:odyssey-react-mui: table.density.arialabel]]
table.columnvisibility.arialabel = [[odyssey:odyssey-react-mui: table.columnvisibility.arialabel]]
table.moreactions.arialabel = [[odyssey:odyssey-react-mui: table.moreactions.arialabel]]
filters.filters.arialabel = [[odyssey:odyssey-react-mui: filters.filters.arialabel]]
filters.filter.any = [[odyssey:odyssey-react-mui: filters.filter.any]]
filters.filter.clear = [[odyssey:odyssey-react-mui: filters.filter.clear]]
filters.menuitem.selected = [[odyssey:odyssey-react-mui: filters.menuitem.selected]]
filters.menuitem.any = [[odyssey:odyssey-react-mui: filters.menuitem.any]]
filters.clear.label = [[odyssey:odyssey-react-mui: filters.clear.label]]
filters.search.label = [[odyssey:odyssey-react-mui: filters.search.label]]
toast.close.text = schlie\u00DFen

17 changes: 17 additions & 0 deletions packages/odyssey-react-mui/src/properties/translations/odyssey-react-mui_el.properties
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,5 +14,22 @@ table.fetchedrows.text = \u0391\u03BD\u03B1\u03BA\u03C4\u03AE\u03B8\u03B7\u03BA\
table.fetchedrows.text_plural = \u0391\u03BD\u03B1\u03BA\u03C4\u03AE\u03B8\u03B7\u03BA\u03B1\u03BD \u03C3\u03C5\u03BD\u03BF\u03BB\u03B9\u03BA\u03AC {{totalRows}} \u03C3\u03B5\u03B9\u03C1\u03AD\u03C2
table.rows.text = {{totalRows}} \u03C3\u03B5\u03B9\u03C1\u03AC
table.rows.text_plural = {{totalRows}} \u03C3\u03B5\u03B9\u03C1\u03AD\u03C2
table.actions = [[odyssey:odyssey-react-mui: table.actions]]
table.draghandle.tooltip = [[odyssey:odyssey-react-mui: table.draghandle.tooltip]]
table.draghandle.arialabel = [[odyssey:odyssey-react-mui: table.draghandle.arialabel]]
table.reorder.tofront = [[odyssey:odyssey-react-mui: table.reorder.tofront]]
table.reorder.forward = [[odyssey:odyssey-react-mui: table.reorder.forward]]
table.reorder.backward = [[odyssey:odyssey-react-mui: table.reorder.backward]]
table.reorder.toback = [[odyssey:odyssey-react-mui: table.reorder.toback]]
table.density.arialabel = [[odyssey:odyssey-react-mui: table.density.arialabel]]
table.columnvisibility.arialabel = [[odyssey:odyssey-react-mui: table.columnvisibility.arialabel]]
table.moreactions.arialabel = [[odyssey:odyssey-react-mui: table.moreactions.arialabel]]
filters.filters.arialabel = [[odyssey:odyssey-react-mui: filters.filters.arialabel]]
filters.filter.any = [[odyssey:odyssey-react-mui: filters.filter.any]]
filters.filter.clear = [[odyssey:odyssey-react-mui: filters.filter.clear]]
filters.menuitem.selected = [[odyssey:odyssey-react-mui: filters.menuitem.selected]]
filters.menuitem.any = [[odyssey:odyssey-react-mui: filters.menuitem.any]]
filters.clear.label = [[odyssey:odyssey-react-mui: filters.clear.label]]
filters.search.label = [[odyssey:odyssey-react-mui: filters.search.label]]
toast.close.text = \u03BA\u03BB\u03B5\u03AF\u03C3\u03B9\u03BC\u03BF

17 changes: 17 additions & 0 deletions packages/odyssey-react-mui/src/properties/translations/odyssey-react-mui_es.properties
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,5 +14,22 @@ table.fetchedrows.text = Se ha recuperado {{totalRows}} fila
table.fetchedrows.text_plural = Se ha recuperado un total de {{totalRows}} filas
table.rows.text = {{totalRows}} fila
table.rows.text_plural = {{totalRows}} filas
table.actions = [[odyssey:odyssey-react-mui: table.actions]]
table.draghandle.tooltip = [[odyssey:odyssey-react-mui: table.draghandle.tooltip]]
table.draghandle.arialabel = [[odyssey:odyssey-react-mui: table.draghandle.arialabel]]
table.reorder.tofront = [[odyssey:odyssey-react-mui: table.reorder.tofront]]
table.reorder.forward = [[odyssey:odyssey-react-mui: table.reorder.forward]]
table.reorder.backward = [[odyssey:odyssey-react-mui: table.reorder.backward]]
table.reorder.toback = [[odyssey:odyssey-react-mui: table.reorder.toback]]
table.density.arialabel = [[odyssey:odyssey-react-mui: table.density.arialabel]]
table.columnvisibility.arialabel = [[odyssey:odyssey-react-mui: table.columnvisibility.arialabel]]
table.moreactions.arialabel = [[odyssey:odyssey-react-mui: table.moreactions.arialabel]]
filters.filters.arialabel = [[odyssey:odyssey-react-mui: filters.filters.arialabel]]
filters.filter.any = [[odyssey:odyssey-react-mui: filters.filter.any]]
filters.filter.clear = [[odyssey:odyssey-react-mui: filters.filter.clear]]
filters.menuitem.selected = [[odyssey:odyssey-react-mui: filters.menuitem.selected]]
filters.menuitem.any = [[odyssey:odyssey-react-mui: filters.menuitem.any]]
filters.clear.label = [[odyssey:odyssey-react-mui: filters.clear.label]]
filters.search.label = [[odyssey:odyssey-react-mui: filters.search.label]]
toast.close.text = cerrar

17 changes: 17 additions & 0 deletions packages/odyssey-react-mui/src/properties/translations/odyssey-react-mui_fi.properties
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,5 +14,22 @@ table.fetchedrows.text = Haettu {{totalRows}} rivi
table.fetchedrows.text_plural = Haettu yhteens\u00E4 {{totalRows}} rivi\u00E4
table.rows.text = {{totalRows}} rivi
table.rows.text_plural = {{totalRows}} rivi\u00E4
table.actions = [[odyssey:odyssey-react-mui: table.actions]]
table.draghandle.tooltip = [[odyssey:odyssey-react-mui: table.draghandle.tooltip]]
table.draghandle.arialabel = [[odyssey:odyssey-react-mui: table.draghandle.arialabel]]
table.reorder.tofront = [[odyssey:odyssey-react-mui: table.reorder.tofront]]
table.reorder.forward = [[odyssey:odyssey-react-mui: table.reorder.forward]]
table.reorder.backward = [[odyssey:odyssey-react-mui: table.reorder.backward]]
table.reorder.toback = [[odyssey:odyssey-react-mui: table.reorder.toback]]
table.density.arialabel = [[odyssey:odyssey-react-mui: table.density.arialabel]]
table.columnvisibility.arialabel = [[odyssey:odyssey-react-mui: table.columnvisibility.arialabel]]
table.moreactions.arialabel = [[odyssey:odyssey-react-mui: table.moreactions.arialabel]]
filters.filters.arialabel = [[odyssey:odyssey-react-mui: filters.filters.arialabel]]
filters.filter.any = [[odyssey:odyssey-react-mui: filters.filter.any]]
filters.filter.clear = [[odyssey:odyssey-react-mui: filters.filter.clear]]
filters.menuitem.selected = [[odyssey:odyssey-react-mui: filters.menuitem.selected]]
filters.menuitem.any = [[odyssey:odyssey-react-mui: filters.menuitem.any]]
filters.clear.label = [[odyssey:odyssey-react-mui: filters.clear.label]]
filters.search.label = [[odyssey:odyssey-react-mui: filters.search.label]]
toast.close.text = sulje

Loading
Loading