Skip to content

Commit d215be0

Browse files
HuulivoideHuulivoide
committed
I18Next: Switch to using the new Selector API
1 parent 881d299 commit d215be0

453 files changed

Lines changed: 2471 additions & 2147 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎README.md‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -164,7 +164,6 @@ Non-VSCode users can sort imports e.g. by running `yarn lint --fix` on command l
164164

165165
Plugins:
166166

167-
- i18n support: For ui translation string autocompletion and navigation
168167
- GraphQL: For GraphQL query autocompletion. Due to the size of our GraphQL schema extra configuration is needed:
169168
1. (Shift+Ctrl+A | Shift+⌘+A) And search for: Registry
170169
2. Open Registry

‎ui/src/@types/i18next.d.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,16 @@
11
import 'i18next';
22

3+
import common from '../locales/fi-FI/common.json';
4+
35
// Configuring types for i18next
46
// https://www.i18next.com/overview/typescript#custom-type-options
57

68
declare module 'i18next' {
79
interface CustomTypeOptions {
810
// Do not return null from t function
911
returnNull: false;
12+
defaultNS: 'common';
13+
enableSelector: true;
14+
resources: { common: typeof common };
1015
}
1116
}

‎ui/src/components/common/AsyncTaskList/TaskWithProgressBar.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -62,18 +62,16 @@ export const TaskWithProgressBar: FC<TaskWithProgressBarProps> = ({
6262
{body}
6363
</div>
6464
</div>
65-
6665
<CloseIconButton
6766
className="ml-2 font-bold text-brand [&>i]:text-2xl"
68-
title={t('abort')}
67+
title={t(($) => $.abort)}
6968
onClick={() =>
7069
onConfirmCancellation
7170
? setConfirmProps(onConfirmCancellation())
7271
: onCancel()
7372
}
7473
testId={testIds.abort}
7574
/>
76-
7775
{confirmProps && (
7876
<ConfirmationDialog
7977
isOpen

‎ui/src/components/common/ChangeHistory/ChangeHistoryTable.tsx‎

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -52,19 +52,19 @@ export const ChangeHistoryTable: FC<ChangeHistoryTableProps> = ({
5252
className={twJoin(dataColWidth, 'px-2 pb-5 pl-2 text-left xl:pr-5')}
5353
data-testid={testIds.name}
5454
>
55-
{t('changeHistory.tableHeaders.name')}
55+
{t(($) => $.changeHistory.tableHeaders.name)}
5656
</th>
5757
<th
5858
className={twJoin(dataColWidth, 'px-2 pb-5 text-left xl:px-5')}
5959
data-testid={testIds.oldValue}
6060
>
61-
{t('changeHistory.tableHeaders.oldValue')}
61+
{t(($) => $.changeHistory.tableHeaders.oldValue)}
6262
</th>
6363
<th
6464
className={twJoin(dataColWidth, 'px-2 pb-5 text-left xl:px-5')}
6565
data-testid={testIds.newValue}
6666
>
67-
{t('changeHistory.tableHeaders.newValue')}
67+
{t(($) => $.changeHistory.tableHeaders.newValue)}
6868
</th>
6969
{/* When on a large screen, display the validity details on separate
7070
* columns. But when we are running out of space, merge those fields
@@ -79,7 +79,7 @@ export const ChangeHistoryTable: FC<ChangeHistoryTableProps> = ({
7979
sortingInfo={sortingInfo}
8080
sortBy={SortChangeHistoryBy.ValidityStart}
8181
>
82-
{t('changeHistory.tableHeaders.validityStart')}
82+
{t(($) => $.changeHistory.tableHeaders.validityStart)}
8383
</SortByButton>
8484
</th>
8585
<th
@@ -91,7 +91,7 @@ export const ChangeHistoryTable: FC<ChangeHistoryTableProps> = ({
9191
sortingInfo={sortingInfo}
9292
sortBy={SortChangeHistoryBy.ValidityEnd}
9393
>
94-
{t('changeHistory.tableHeaders.validityEnd')}
94+
{t(($) => $.changeHistory.tableHeaders.validityEnd)}
9595
</SortByButton>
9696
</th>
9797
<th
@@ -103,14 +103,14 @@ export const ChangeHistoryTable: FC<ChangeHistoryTableProps> = ({
103103
sortingInfo={sortingInfo}
104104
sortBy={SortChangeHistoryBy.ValidityStart}
105105
>
106-
{t('changeHistory.tableHeaders.validityStart')}
106+
{t(($) => $.changeHistory.tableHeaders.validityStart)}
107107
</SortByButton>
108108
<SortByButton
109109
setSortingInfo={setSortingInfo}
110110
sortingInfo={sortingInfo}
111111
sortBy={SortChangeHistoryBy.ValidityEnd}
112112
>
113-
{t('changeHistory.tableHeaders.validityEnd')}
113+
{t(($) => $.changeHistory.tableHeaders.validityEnd)}
114114
</SortByButton>
115115
</th>
116116
{/* Just like the validity columns. */}
@@ -123,7 +123,7 @@ export const ChangeHistoryTable: FC<ChangeHistoryTableProps> = ({
123123
sortingInfo={sortingInfo}
124124
sortBy={SortChangeHistoryBy.ChangedBy}
125125
>
126-
{t('changeHistory.tableHeaders.changedBy')}
126+
{t(($) => $.changeHistory.tableHeaders.changedBy)}
127127
</SortByButton>
128128
</th>
129129
<th
@@ -135,7 +135,7 @@ export const ChangeHistoryTable: FC<ChangeHistoryTableProps> = ({
135135
sortingInfo={sortingInfo}
136136
sortBy={SortChangeHistoryBy.Changed}
137137
>
138-
{t('changeHistory.tableHeaders.changed')}
138+
{t(($) => $.changeHistory.tableHeaders.changed)}
139139
</SortByButton>
140140
</th>
141141
<th
@@ -147,19 +147,18 @@ export const ChangeHistoryTable: FC<ChangeHistoryTableProps> = ({
147147
sortingInfo={sortingInfo}
148148
sortBy={SortChangeHistoryBy.ChangedBy}
149149
>
150-
{t('changeHistory.tableHeaders.changedBy')}
150+
{t(($) => $.changeHistory.tableHeaders.changedBy)}
151151
</SortByButton>
152152
<SortByButton
153153
setSortingInfo={setSortingInfo}
154154
sortingInfo={sortingInfo}
155155
sortBy={SortChangeHistoryBy.Changed}
156156
>
157-
{t('changeHistory.tableHeaders.changed')}
157+
{t(($) => $.changeHistory.tableHeaders.changed)}
158158
</SortByButton>
159159
</th>
160160
</tr>
161161
</thead>
162-
163162
{children}
164163
</table>
165164
);

‎ui/src/components/common/ChangeHistory/DateRangeFilter.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@ export const DateRangeFilter: FC<DateRangeFilterProps> = ({
9696
return (
9797
<div className={className}>
9898
<label id={id} className="inline-block">
99-
{t('changeHistory.tableHeaders.changed')}
99+
{t(($) => $.changeHistory.tableHeaders.changed)}
100100
</label>
101101
<fieldset aria-labelledby={id} className="flex gap-4">
102102
<input

‎ui/src/components/common/ChangeHistory/FailedToLoadChangeHistory.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,13 +24,13 @@ export const FailedToLoadChangeHistory: FC<FailedToLoadChangeHistoryProps> = ({
2424
className="flex flex-col items-center justify-center"
2525
data-testid={testIds.failedToLoad}
2626
>
27-
<p>{t('changeHistory.failedToLoad')}</p>
27+
<p>{t(($) => $.changeHistory.failedToLoad)}</p>
2828
<SimpleButton
2929
className="mt-5"
3030
onClick={() => refetch()}
3131
testId={testIds.retryButton}
3232
>
33-
{t('changeHistory.tryAgainButton')}
33+
{t(($) => $.changeHistory.tryAgainButton)}
3434
</SimpleButton>
3535
</div>
3636
</td>

‎ui/src/components/common/ChangeHistory/LoadingChangeHistory.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export const LoadingChangeHistory: FC = () => {
1919
data-testid={testIds.loading}
2020
>
2121
<PulseLoader color={theme.colors.brand} size={25} />
22-
<span className="mt-4">{t('changeHistory.loading')}</span>
22+
<span className="mt-4">{t(($) => $.changeHistory.loading)}</span>
2323
</div>
2424
</td>
2525
</tr>

‎ui/src/components/common/ChangeHistory/latest/ErrorLoadingState.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,14 +18,14 @@ export const ErrorLoadingState: FC<ErrorLoadingStateProps> = ({
1818
className="mt-5 flex flex-col items-center justify-center"
1919
data-testid={`${testIdPrefix}::FailedToLoad`}
2020
>
21-
<p>{t('changeHistory.failedToLoad')}</p>
21+
<p>{t(($) => $.changeHistory.failedToLoad)}</p>
2222
{onRetry && (
2323
<SimpleButton
2424
className="mt-5"
2525
onClick={onRetry}
2626
testId={`${testIdPrefix}::RetryButton`}
2727
>
28-
{t('changeHistory.tryAgainButton')}
28+
{t(($) => $.changeHistory.tryAgainButton)}
2929
</SimpleButton>
3030
)}
3131
</div>

‎ui/src/components/common/ChangeHistory/latest/LoadingState.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export const LoadingState: FC<LoadingStateProps> = ({
1515
className="mt-5 flex justify-center"
1616
data-testid={`${testIdPrefix}::Loading`}
1717
>
18-
<p>{t('changeHistory.loading')}</p>
18+
<p>{t(($) => $.changeHistory.loading)}</p>
1919
</div>
2020
);
2121
};

‎ui/src/components/common/LineDetailsButton.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,9 @@ export const LineDetailsButton: FC<LineDetailsButtonProps> = ({
3636
};
3737
return (
3838
<IconButton
39-
tooltip={t('accessibility.lines.details', { label })}
39+
tooltip={t(($) => $.accessibility.lines.details, {
40+
label,
41+
})}
4042
className={twMerge(
4143
'h-10 w-10 rounded-full border border-grey bg-white text-tweaked-brand',
4244
'hover:border-tweaked-brand hover:outline-tweaked-brand',

0 commit comments

Comments
 (0)