feat(console): add component UnnamedTrans (#401)

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;

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;

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>

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') ? (