feat(fuselage-ui-kit): Add `i18n` parser to render surfaces and blocks (#29413)

Co-authored-by: Guilherme Gazzo <5263975+ggazzo@users.noreply.github.com>

.changeset/rude-insects-speak.md

+---
+'@rocket.chat/fuselage-ui-kit': minor
+'@rocket.chat/meteor': minor
+---
+
+Introducing i18n to UiKit text renderers

apps/meteor/ee/client/apps/i18n.js

@@ -6,13 +6,17 @@ import { Apps } from './orchestrator';
 const loadAppI18nResources = (appId, languages) => {
 	Object.entries(languages).forEach(([language, translations]) => {
 		try {
+			const regex = /([a-z]{2,3})-([a-z]{2,4})/;
+			const match = regex.exec(language);
+			const normalizedLanguage = match ? `${match[1]}-${match[2].toUpperCase()}` : language;
+
 			// Translations keys must be scoped under app id
 			const scopedTranslations = Object.entries(translations).reduce((translations, [key, value]) => {
 				translations[Utilities.getI18nKeyForApp(key, appId)] = value;
 				return translations;
 			}, {});
 
-			i18n.addResourceBundle(language, 'core', scopedTranslations);
+			i18n.addResourceBundle(normalizedLanguage, 'core', scopedTranslations);
 		} catch (error) {
 			Apps.handleError(error);
 		}

packages/fuselage-ui-kit/src/elements/MarkdownTextElement.tsx

+import { useTranslation } from '@rocket.chat/ui-contexts';
+import { parse } from '@rocket.chat/message-parser';
+import { Markup } from '@rocket.chat/gazzodown';
+import type { TextObject } from '@rocket.chat/ui-kit';
+
+import { useUiKitContext } from '../contexts/kitContext';
+
+const MarkdownTextElement = ({ textObject }: { textObject: TextObject }) => {
+  const t = useTranslation() as (
+    key: string,
+    args: { [key: string]: string | number }
+  ) => string;
+  const { appId } = useUiKitContext();
+
+  const { i18n } = textObject;
+
+  if (i18n) {
+    return (
+      <Markup
+        tokens={parse(t(`apps-${appId}-${i18n.key}`, { ...i18n.args }), {
+          emoticons: false,
+        })}
+      />
+    );
+  }
+
+  return <Markup tokens={parse(textObject.text, { emoticons: false })} />;
+};
+
+export default MarkdownTextElement;

packages/fuselage-ui-kit/src/elements/PlainTextElement.tsx

+import type { TextObject } from '@rocket.chat/ui-kit';
+import { Fragment } from 'react';
+import { useTranslation } from '@rocket.chat/ui-contexts';
+
+import { useUiKitContext } from '../contexts/kitContext';
+
+const PlainTextElement = ({ textObject }: { textObject: TextObject }) => {
+  const t = useTranslation() as (
+    key: string,
+    args: { [key: string]: string | number }
+  ) => string;
+  const { appId } = useUiKitContext();
+
+  const { i18n } = textObject;
+
+  if (i18n) {
+    return (
+      <Fragment>{t(`apps-${appId}-${i18n.key}`, { ...i18n.args })}</Fragment>
+    );
+  }
+
+  return <Fragment>{textObject.text}</Fragment>;
+};
+
+export default PlainTextElement;

packages/fuselage-ui-kit/src/surfaces/FuselageSurfaceRenderer.tsx

 import * as UiKit from '@rocket.chat/ui-kit';
-import { parse } from '@rocket.chat/message-parser';
 import type { ReactElement } from 'react';
-import { Fragment } from 'react';
-import { Markup } from '@rocket.chat/gazzodown';
 
 import ActionsBlock from '../blocks/ActionsBlock';
 import ContextBlock from '../blocks/ContextBlock';
@@ -19,6 +16,8 @@ import MultiStaticSelectElement from '../elements/MultiStaticSelectElement';
 import OverflowElement from '../elements/OverflowElement';
 import PlainTextInputElement from '../elements/PlainTextInputElement';
 import StaticSelectElement from '../elements/StaticSelectElement';
+import MarkdownTextElement from '../elements/MarkdownTextElement';
+import PlainTextElement from '../elements/PlainTextElement';
 
 export type FuselageSurfaceRendererProps = ConstructorParameters<
   typeof UiKit.SurfaceRenderer
@@ -40,7 +39,7 @@ export class FuselageSurfaceRenderer extends UiKit.SurfaceRenderer<ReactElement>
   }
 
   public plain_text(
-    { text = '' }: UiKit.PlainText,
+    textObject: UiKit.TextObject,
     context: UiKit.BlockContext,
     index: number
   ): ReactElement | null {
@@ -48,11 +47,11 @@ export class FuselageSurfaceRenderer extends UiKit.SurfaceRenderer<ReactElement>
       return null;
     }
 
-    return text ? <Fragment key={index}>{text}</Fragment> : null;
+    return <PlainTextElement key={index} textObject={textObject} />;
   }
 
   public mrkdwn(
-    { text = '' }: UiKit.Markdown,
+    textObject: UiKit.TextObject,
     context: UiKit.BlockContext,
     index: number
   ): ReactElement | null {
@@ -60,9 +59,7 @@ export class FuselageSurfaceRenderer extends UiKit.SurfaceRenderer<ReactElement>
       return null;
     }
 
-    return text ? (
-      <Markup key={index} tokens={parse(text, { emoticons: false })} />
-    ) : null;
+    return <MarkdownTextElement key={index} textObject={textObject} />;
   }
 
   public text(
@@ -70,11 +67,11 @@ export class FuselageSurfaceRenderer extends UiKit.SurfaceRenderer<ReactElement>
     context: UiKit.BlockContext,
     index: number
   ): ReactElement | null {
-    if (textObject.type !== 'mrkdwn') {
-      return this.plain_text(textObject, context, index);
+    if (textObject.type === 'mrkdwn') {
+      return this.mrkdwn(textObject, context, index);
     }
 
-    return this.mrkdwn(textObject, context, index);
+    return this.plain_text(textObject, context, index);
   }
 
   actions(

yarn.lock

@@ -11008,9 +11008,9 @@ __metadata:
   linkType: soft
 "@rocket.chat/ui-kit@npm:next":
-  version: 0.32.0-dev.264
-  resolution: "@rocket.chat/ui-kit@npm:0.32.0-dev.264"
-  checksum: f856ac22a422c862b84f5a550ca1358c313f0f42d74c1780eeb781394a9aca27a12572873c6d69edea92fdd092dcd4dd34dcfc8e45ecc91a34feec4220a80905
+  version: 0.32.0-dev.294
+  resolution: "@rocket.chat/ui-kit@npm:0.32.0-dev.294"
+  checksum: cf58890f3fbcfdff3df9436a33c4aa333de34369f89902107dee74c50c11b8af793c9c80a8df5046ffcabf0fd90111f31a6fc2030876e838e43ec4c6a5703fc4
   languageName: node
   linkType: hard