From 4a73e22d2bfa8ed6901e2f200020024a9a1572a1 Mon Sep 17 00:00:00 2001
From: Wang Sijie <wangsijie@silverhand.io>
Date: Fri, 18 Mar 2022 11:20:23 +0800
Subject: [PATCH] feat(console): add component UnnamedTrans (#401)

---
 .../src/components/ItemPreview/index.tsx      |  2 +-
 .../src/components/UnnamedTrans/index.tsx     | 22 +++++++++++++++++++
 .../src/pages/ConnectorDetails/index.tsx      | 10 ++++-----
 .../Connectors/components/ConnectorName.tsx   |  8 ++-----
 4 files changed, 30 insertions(+), 12 deletions(-)
 create mode 100644 packages/console/src/components/UnnamedTrans/index.tsx

diff --git a/packages/console/src/components/ItemPreview/index.tsx b/packages/console/src/components/ItemPreview/index.tsx
index 74d41786c..b8210cced 100644
--- a/packages/console/src/components/ItemPreview/index.tsx
+++ b/packages/console/src/components/ItemPreview/index.tsx
@@ -4,7 +4,7 @@ import { Link, To } from 'react-router-dom';
 import * as styles from './index.module.scss';
 
 type Props = {
-  title: string;
+  title: ReactNode;
   subtitle?: string;
   icon?: ReactNode;
   to?: To;
diff --git a/packages/console/src/components/UnnamedTrans/index.tsx b/packages/console/src/components/UnnamedTrans/index.tsx
new file mode 100644
index 000000000..b0b8d3819
--- /dev/null
+++ b/packages/console/src/components/UnnamedTrans/index.tsx
@@ -0,0 +1,22 @@
+import { Languages } from '@logto/phrases';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+type Props = {
+  resource: Record<Languages, string>;
+};
+
+const UnnamedTrans = ({ resource }: Props) => {
+  const {
+    i18n: { languages },
+  } = useTranslation();
+  const matchedLanguage = languages.find((language) => resource[language]);
+
+  if (!matchedLanguage) {
+    return null;
+  }
+
+  return <span>{resource[matchedLanguage]}</span>;
+};
+
+export default UnnamedTrans;
diff --git a/packages/console/src/pages/ConnectorDetails/index.tsx b/packages/console/src/pages/ConnectorDetails/index.tsx
index 087b3052f..ff935a187 100644
--- a/packages/console/src/pages/ConnectorDetails/index.tsx
+++ b/packages/console/src/pages/ConnectorDetails/index.tsx
@@ -15,6 +15,7 @@ import ImagePlaceholder from '@/components/ImagePlaceholder';
 import Markdown from '@/components/Markdown';
 import Status from '@/components/Status';
 import TabNav, { TabNavLink } from '@/components/TabNav';
+import UnnamedTrans from '@/components/UnnamedTrans';
 import useApi, { RequestError } from '@/hooks/use-api';
 
 import SenderTester from './components/SenderTester';
@@ -26,10 +27,7 @@ const ConnectorDetails = () => {
   const [config, setConfig] = useState<string>();
   const [saveError, setSaveError] = useState<string>();
   const [isSubmitLoading, setIsSubmitLoading] = useState(false);
-  const {
-    t,
-    i18n: { language },
-  } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const { data, error } = useSWR<ConnectorDTO, RequestError>(
     connectorId && `/api/connectors/${connectorId}`
   );
@@ -85,7 +83,9 @@ const ConnectorDetails = () => {
           )}
           <div className={styles.metadata}>
             <div>
-              <div className={styles.name}>{data.metadata.name[language]}</div>
+              <div className={styles.name}>
+                <UnnamedTrans resource={data.metadata.name} />
+              </div>
               <div className={styles.id}>{data.id}</div>
             </div>
             <div>
diff --git a/packages/console/src/pages/Connectors/components/ConnectorName.tsx b/packages/console/src/pages/Connectors/components/ConnectorName.tsx
index 857c844c3..15fe62738 100644
--- a/packages/console/src/pages/Connectors/components/ConnectorName.tsx
+++ b/packages/console/src/pages/Connectors/components/ConnectorName.tsx
@@ -1,10 +1,10 @@
 import { ConnectorDTO } from '@logto/schemas';
 import React from 'react';
-import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 
 import ImagePlaceholder from '@/components/ImagePlaceholder';
 import ItemPreview from '@/components/ItemPreview';
+import UnnamedTrans from '@/components/UnnamedTrans';
 
 import * as styles from './ConnectorName.module.scss';
 
@@ -14,10 +14,6 @@ type Props = {
 };
 
 const ConnectorName = ({ connector, titlePlaceholder = '' }: Props) => {
-  const {
-    i18n: { language },
-  } = useTranslation();
-
   if (!connector) {
     return <ItemPreview title={titlePlaceholder} icon={<ImagePlaceholder />} />;
   }
@@ -25,7 +21,7 @@ const ConnectorName = ({ connector, titlePlaceholder = '' }: Props) => {
   return (
     <Link to={`/connectors/${connector.id}`} className={styles.link}>
       <ItemPreview
-        title={connector.metadata.name[language] ?? connector.metadata.name.en ?? '-'}
+        title={<UnnamedTrans resource={connector.metadata.name} />}
         subtitle={connector.id}
         icon={
           connector.metadata.logo.startsWith('http') ? (