OKTA-671253: Allow language codes other than okta specified ones #2058

queeniechen-okta · 2023-12-04T21:00:42Z

OKTA-671253

Summary

Got rid of the hardcoded supportedLanguages list
Update types for the above change
Add ability to bring custom language translations for existing keys
Update ok-SK/ ok-PL file & added instructions on how to do so

Type behaviour

With additional types:

Normal:

Testing & Screenshots

I have confirmed this change with my designer and the Odyssey Design Team.

queeniechen-okta · 2023-12-04T21:07:01Z

packages/odyssey-react-mui/src/OdysseyProvider.tsx

    children: ReactNode;
  };

-const OdysseyProvider = ({
+const OdysseyProvider = <SupportedLanguages extends string>({


no, this does not force anyone to pass a generic EVERY time because we have a default value further down

queeniechen-okta · 2023-12-04T21:07:52Z

packages/odyssey-react-mui/README.md

+
+Right now we do not have the code to generate these files in Odyssey.
+
+If you are an Okta employee, the easiest way to generate these files is to replace the English properties file of another project and run the build commands to get the ok-PL and ok-SK versions. For ok-SK, you will also need to replace the prefix with `odyssey:odyssey-react-mui: `.


not optimal but we have a JIRA to address this here: https://oktainc.atlassian.net/browse/OKTA-622636

queeniechen-okta · 2023-12-04T21:09:04Z

packages/odyssey-react-mui/src/OdysseyTranslationProvider.test.tsx

@@ -26,6 +26,38 @@ describe("OdysseyTranslationProvider", () => {
    expect(screen.getByText("Optional"));
  });

+  it("defaults to 'en' for unsupported langauges", () => {
+    render(
+      <OdysseyTranslationProvider<"ar" | "yi"> languageCode="ar">


FYI, languageCode has type string by inference if you have <OdysseyTranslationProvider ...> WITHOUT specifying a specific list. (which is weird if you think about how it is typed down the road)

however, upon specifying a specific list, it will complain if your constant is not exactly a value in that list

queeniechen-okta · 2023-12-04T21:09:22Z

packages/odyssey-react-mui/src/i18n.ts

 export const defaultNS = "translations";
-export const resources = {
+export type OktaI18nResources = Record<string, typeof en>;
+export const resources: OktaI18nResources = {


this allows us to detect when ok-PL and ok-SK files are out of sync with the rest. : )

this allows us to detect when ok-PL and ok-SK files are out of sync with the rest. : )

Nice I am curious, what this experience looks like for a dev.

There will be a typescript error :)

queeniechen-okta · 2023-12-04T21:11:04Z

packages/odyssey-react-mui/src/i18n.ts

@@ -86,7 +82,6 @@ i18n.use(initReactI18next).init({
  defaultNS,
  ns: [defaultNS],
  fallbackLng: defaultLNG,
-  supportedLngs: supportedLanguages,


deleting this just means we will try and load any language. As shown in the test, i the language is not supported properly (i.e. doesnt have the proper resources) it defaults to english

queeniechen-okta · 2023-12-04T21:31:00Z

packages/odyssey-react-mui/src/OdysseyTranslationProvider.tsx

  translationOverrides: TranslationOverrides
 ) => {
-  const bundle = resources[languageCode];
+  const bundle = resources[languageCode] || {};
  const overrides = translationOverrides[languageCode];


wondering if I should make it error i the override isn't found? 🤔

checked & it looks like you can perform the spread operation without issues on an undefined value. Interesting

bryancunningham-okta · 2023-12-04T22:31:57Z

packages/odyssey-react-mui/src/OdysseyProvider.tsx

@@ -25,14 +25,17 @@ import {
  OdysseyTranslationProvider,
  OdysseyTranslationProviderProps,
 } from "./OdysseyTranslationProvider";
+import { OktaSupportedLanguages } from "./OdysseyTranslationProvider.types";


I would think we'd want to avoid including Okta in the import naming convention here(And in other locations in this PR). As Odyssey is open source and potentially used outside of the context of Okta.

nikhilvenkatraman-okta · 2023-12-04T23:03:17Z

packages/odyssey-react-mui/src/OdysseyTranslationProvider.tsx

-  [key in SupportedLanguages]?: Partial<(typeof resources)["en"]>;
-};
+export type TranslationOverrides = Record<
+  string,


Is this mainly to allow any keys that will be defined in a locale bundle that is not in the supported list ?

well, the key( typed string) part of this is.

the value type with partial is here so that you can choose to provide a subset of keys.

Otherwise if we use the typing from the i18n.ts file, we will need to provide ALL keys

benschell-okta

I know Kevin and Chris are both unavailable today. This looks great to me, so approving. If any issues are found or if Kevin or Chris end up having other opinions, we'll fix-forward.

KevinGhadyani-Okta

This is great PR! Thanks for contributing :).

We discussed any weird stuff on Zoom already.

queeniechen-okta requested review from KevinGhadyani-Okta, benschell-okta and chrispulsinelli-okta as code owners December 4, 2023 21:00

queeniechen-okta requested a review from a team December 4, 2023 21:00

queeniechen-okta force-pushed the OKTA-671253-fix-language-codes branch from 4139edc to 5d611d1 Compare December 4, 2023 21:06

queeniechen-okta commented Dec 4, 2023

View reviewed changes

queeniechen-okta force-pushed the OKTA-671253-fix-language-codes branch from 5d611d1 to 9eeaeb4 Compare December 4, 2023 21:11

queeniechen-okta commented Dec 4, 2023

View reviewed changes

queeniechen-okta force-pushed the OKTA-671253-fix-language-codes branch from 9eeaeb4 to 83c0ed9 Compare December 4, 2023 21:46

bryancunningham-okta reviewed Dec 4, 2023

View reviewed changes

nikhilvenkatraman-okta reviewed Dec 4, 2023

View reviewed changes

benschell-okta approved these changes Dec 7, 2023

View reviewed changes

nikhilvenkatraman-okta approved these changes Dec 7, 2023

View reviewed changes

KevinGhadyani-Okta approved these changes Dec 11, 2023

View reviewed changes

queeniechen-okta added 9 commits December 11, 2023 16:39

chore: messed up rebase

8a11c81

chore: refactor to using default types

330287c

chore: update pseudo-loc

d5ccb6c

chore: expand coverage of languages

5f98bf6

chore: final tweaks for language files, names, types, and README

9bb190d

chore: update names to not include okta

e9272ca

chore: add typeof to odyssey provider so typing turns out correctly

c6f73f8

chore: make translationOverrides type-able

083eb78

chore: update PR with feedback from Kevin

43ce779

queeniechen-okta force-pushed the OKTA-671253-fix-language-codes branch from c0cb98a to 43ce779 Compare December 11, 2023 21:39

queeniechen-okta merged commit f371f3c into main Dec 12, 2023
1 check passed

trevoring-okta mentioned this pull request Dec 18, 2023

Export translation keys as list from OdysseyTranslationProvider #2076

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

OKTA-671253: Allow language codes other than okta specified ones #2058

OKTA-671253: Allow language codes other than okta specified ones #2058

queeniechen-okta commented Dec 4, 2023 •

edited

Loading

queeniechen-okta Dec 4, 2023

queeniechen-okta Dec 4, 2023

queeniechen-okta Dec 4, 2023 •

edited

Loading

queeniechen-okta Dec 4, 2023

nikhilvenkatraman-okta Dec 4, 2023 •

edited

Loading

queeniechen-okta Dec 5, 2023

queeniechen-okta Dec 4, 2023 •

edited

Loading

queeniechen-okta Dec 4, 2023

queeniechen-okta Dec 5, 2023

bryancunningham-okta Dec 4, 2023

nikhilvenkatraman-okta Dec 4, 2023

queeniechen-okta Dec 5, 2023 •

edited

Loading

benschell-okta left a comment

KevinGhadyani-Okta left a comment


		Right now we do not have the code to generate these files in Odyssey.

		If you are an Okta employee, the easiest way to generate these files is to replace the English properties file of another project and run the build commands to get the ok-PL and ok-SK versions. For ok-SK, you will also need to replace the prefix with `odyssey:odyssey-react-mui: `.

OKTA-671253: Allow language codes other than okta specified ones #2058

OKTA-671253: Allow language codes other than okta specified ones #2058

Conversation

queeniechen-okta commented Dec 4, 2023 • edited Loading

Summary

Type behaviour

Testing & Screenshots

Choose a reason for hiding this comment

Choose a reason for hiding this comment

queeniechen-okta Dec 4, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nikhilvenkatraman-okta Dec 4, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

queeniechen-okta Dec 4, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

queeniechen-okta Dec 5, 2023 • edited Loading

Choose a reason for hiding this comment

benschell-okta left a comment

Choose a reason for hiding this comment

KevinGhadyani-Okta left a comment

Choose a reason for hiding this comment

queeniechen-okta commented Dec 4, 2023 •

edited

Loading

queeniechen-okta Dec 4, 2023 •

edited

Loading

nikhilvenkatraman-okta Dec 4, 2023 •

edited

Loading

queeniechen-okta Dec 4, 2023 •

edited

Loading

queeniechen-okta Dec 5, 2023 •

edited

Loading