Showcase: Convert internationalization routes to TS (#3105)

Author: dchyun

showcase/app/controllers/internationalization/translation.js

@@ -0,0 +1,102 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Controller from '@ember/controller';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { service } from '@ember/service';
+
+import type { IntlService } from 'ember-intl';
+import type HdsIntlService from '@hashicorp/design-system-components/services/hds-intl';
+import type { PageInternationalizationTranslationModel } from 'showcase/routes/page-internationalization/translation';
+
+type ServiceTranslation = {
+  key: string;
+  default: string;
+};
+
+type ServiceTranslationsMap = {
+  title: ServiceTranslation;
+  body: ServiceTranslation;
+  primaryAction: ServiceTranslation;
+  secondaryAction: ServiceTranslation;
+};
+
+type ServiceTranslationsOutput = {
+  title: string;
+  body: string;
+  primaryAction: string;
+  secondaryAction: string;
+};
+
+const SERVICE_TRANSLATIONS: ServiceTranslationsMap = {
+  title: {
+    key: 'showcase.pages.internationalization.translation.title',
+    default: 'Selected language (Fallback translation).',
+  },
+  body: {
+    key: 'showcase.pages.internationalization.translation.body',
+    default:
+      'The text is displayed in the selected language (Fallback translation).',
+  },
+  primaryAction: {
+    key: 'showcase.pages.internationalization.translation.actions.primary',
+    default: 'Primary action (Fallback translation)',
+  },
+  secondaryAction: {
+    key: 'showcase.pages.internationalization.translation.actions.secondary',
+    default: 'Secondary action (Fallback translation)',
+  },
+};
+
+export default class PageInternationalizationTranslationController extends Controller {
+  declare model: PageInternationalizationTranslationModel;
+
+  @service intl!: IntlService;
+  @service hdsIntl!: HdsIntlService;
+
+  @tracked lang: string | undefined = undefined;
+
+  get hdsIntlTranslations(): ServiceTranslationsOutput {
+    return Object.entries(SERVICE_TRANSLATIONS).reduce(
+      (acc, [key, translationKey]) => {
+        acc[key as keyof ServiceTranslationsMap] = this.hdsIntl.t(
+          translationKey.key,
+          {
+            default: translationKey.default,
+          },
+        );
+        return acc;
+      },
+      {} as Record<keyof ServiceTranslationsMap, string>,
+    );
+  }
+
+  get emberIntlTranslations(): ServiceTranslationsOutput {
+    return Object.entries(SERVICE_TRANSLATIONS).reduce(
+      (acc, [key, translationKey]) => {
+        acc[key as keyof ServiceTranslationsMap] = this.intl.t(
+          translationKey.key,
+        );
+        return acc;
+      },
+      {} as Record<keyof ServiceTranslationsMap, string>,
+    );
+  }
+
+  @action
+  setLang(event: Event) {
+    const { value } = event.target as HTMLInputElement;
+    this.lang = value;
+
+    try {
+      this.intl.setLocale(value);
+    } catch {
+      console.error(
+        `No locale found for the provided language code. Using fallback translation.`,
+      );
+    }
+  }
+}

showcase/app/controllers/page-internationalization/translation.ts

@@ -143,7 +143,11 @@ Router.map(function () {
   this.route('page-overrides', { path: 'overrides' }, function () {
     this.route('power-select');
   });
-  this.route('internationalization', function () {
-    this.route('translation');
-  });
+  this.route(
+    'page-internationalization',
+    { path: 'internationalization' },
+    function () {
+      this.route('translation');
+    },
+  );
 });

showcase/app/router.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Route from '@ember/routing/route';
+
+export default class PageInternationalizationRoute extends Route {}

showcase/app/routes/internationalization/translation.js

@@ -0,0 +1,44 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Route from '@ember/routing/route';
+import { service } from '@ember/service';
+
+import type { IntlService } from 'ember-intl';
+import type { ModelFrom } from 'showcase/utils/ModelFromRoute';
+import type PageInternationalizationTranslationController from 'showcase/controllers/page-internationalization/translation';
+
+export type PageInternationalizationTranslationModel =
+  ModelFrom<PageInternationalizationTranslationRoute>;
+
+export default class PageInternationalizationTranslationRoute extends Route {
+  @service intl!: IntlService;
+
+  _localeOnEntry: string | undefined = undefined;
+
+  // store the locale on entry so we can restore it on exit
+  beforeModel() {
+    this._localeOnEntry = this.intl.primaryLocale;
+  }
+
+  // set the locale in the controller so that it doesn't persist between visits
+  setupController(
+    controller: PageInternationalizationTranslationController,
+    model: PageInternationalizationTranslationModel,
+  ) {
+    super.setupController(controller, model);
+
+    controller.lang = this._localeOnEntry;
+  }
+
+  // reset the locale to the one we had on entry
+  deactivate() {
+    super.deactivate();
+
+    if (this._localeOnEntry) {
+      this.intl.setLocale(this._localeOnEntry);
+    }
+  }
+}

showcase/app/routes/page-internationalization.ts

@@ -32,7 +32,7 @@
     <Shw::Text::H2>Internationalization</Shw::Text::H2>
     <ol class="shw-text-body">
       <li>
-        <LinkTo @route="internationalization.translation">
+        <LinkTo @route="page-internationalization.translation">
           Translation
         </LinkTo>
       </li>

showcase/app/routes/page-internationalization/translation.ts

@@ -23,7 +23,7 @@
     <code>ember-intl</code>. The locale will be reset back to its initial value when leaving the page.
   </Shw::Text::Body>
 
-  <Hds::Form::Select::Field @value={{this.lang}} {{on "change" this.setLang}} as |F|>
+  <Hds::Form::Select::Field {{on "change" this.setLang}} as |F|>
     <F.Label>{{hds-t
         "showcase.pages.internationalization.translation.language"
         default="Language (Fallback translation)"