Show "source defined" as cursor for CDC streams, move strings to i18n (#16999)

* Update check on PathPopout to ensure source defined appears when the path provided is empty

* i18n source defined message

* Update source defined message format
Move destination namespace names to i18n

airbyte-webapp/src/core/domain/catalog/fieldUtil.ts

@@ -1,13 +1,12 @@
 import { JSONSchema7Definition } from "json-schema";
 
-import { NamespaceDefinitionType } from "../../request/AirbyteClient";
 import { SyncSchemaField } from "./models";
 
 type AirbyteJsonSchema = JSONSchema7Definition & {
   airbyte_type?: string;
 };
 
-const traverseSchemaToField = (
+export const traverseSchemaToField = (
   jsonSchema: AirbyteJsonSchema | undefined,
   key: string | undefined
 ): SyncSchemaField[] => {
@@ -46,24 +45,3 @@ const traverseJsonSchemaProperties = (
     },
   ];
 };
-
-interface NamespaceOptions {
-  namespaceDefinition:
-    | typeof NamespaceDefinitionType.source
-    | typeof NamespaceDefinitionType.destination
-    | typeof NamespaceDefinitionType.customformat;
-  namespaceFormat?: string;
-}
-
-function getDestinationNamespace(opt: NamespaceOptions) {
-  switch (opt.namespaceDefinition) {
-    case NamespaceDefinitionType.source:
-      return "<source schema>";
-    case NamespaceDefinitionType.destination:
-      return "<destination schema>";
-    case NamespaceDefinitionType.customformat:
-      return opt.namespaceFormat;
-  }
-}
-
-export { getDestinationNamespace, traverseSchemaToField };

airbyte-webapp/src/hooks/connection/useDestinationNamespace.ts

@@ -0,0 +1,24 @@
+import { useIntl } from "react-intl";
+
+import { NamespaceDefinitionType } from "core/request/AirbyteClient";
+
+interface NamespaceOptions {
+  namespaceDefinition:
+    | typeof NamespaceDefinitionType.source
+    | typeof NamespaceDefinitionType.destination
+    | typeof NamespaceDefinitionType.customformat;
+  namespaceFormat?: string;
+}
+
+export const useDestinationNamespace = (opt: NamespaceOptions): string | undefined => {
+  const { formatMessage } = useIntl();
+
+  switch (opt.namespaceDefinition) {
+    case NamespaceDefinitionType.source:
+      return formatMessage({ id: "connection.catalogTree.sourceSchema" });
+    case NamespaceDefinitionType.destination:
+      return formatMessage({ id: "connection.catalogTree.destinationSchema" });
+    case NamespaceDefinitionType.customformat:
+      return opt.namespaceFormat;
+  }
+};

airbyte-webapp/src/locales/en.json

@@ -346,6 +346,10 @@
   "connection.updateSchema.namespace": "Namespace",
   "connection.updateSchema.dataType": "Data type",
 
+  "connection.catalogTree.sourceDefined": "<source defined>",
+  "connection.catalogTree.sourceSchema": "<source schema>",
+  "connection.catalogTree.destinationSchema": "<destination schema>",
+
   "connection.newConnection": "+ New connection",
   "connection.newConnectionTitle": "New connection",
   "connection.noConnections": "Connection list is empty",

airbyte-webapp/src/views/Connection/CatalogTree/CatalogSection.tsx

@@ -4,8 +4,9 @@ import { useToggle } from "react-use";
 
 import { DropDownRow } from "components";
 
-import { getDestinationNamespace, SyncSchemaField, SyncSchemaFieldObject, SyncSchemaStream } from "core/domain/catalog";
+import { SyncSchemaField, SyncSchemaFieldObject, SyncSchemaStream } from "core/domain/catalog";
 import { traverseSchemaToField } from "core/domain/catalog/fieldUtil";
+import { useDestinationNamespace } from "hooks/connection/useDestinationNamespace";
 import { useConnectionFormService } from "hooks/services/Connection/ConnectionFormService";
 import { equal, naturalComparatorBy } from "utils/objects";
 import { ConnectionFormValues, SUPPORTED_MODES } from "views/Connection/ConnectionForm/formConfig";
@@ -106,7 +107,7 @@ const CatalogSectionInner: React.FC<CatalogSectionInnerProps> = ({
     [stream?.supportedSyncModes, supportedDestinationSyncModes]
   );
 
-  const destNamespace = getDestinationNamespace({
+  const destNamespace = useDestinationNamespace({
     namespaceDefinition,
     namespaceFormat,
   });

airbyte-webapp/src/views/Connection/CatalogTree/components/PathPopout.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { FormattedMessage } from "react-intl";
 
 import { Popout } from "components";
 import { Tooltip } from "components/base/Tooltip";
@@ -36,12 +37,8 @@ type PathPopoutProps = PathPopoutBaseProps & (PathMultiProps | PathProps);
 
 export const PathPopout: React.FC<PathPopoutProps> = (props) => {
   if (props.pathType === "sourceDefined") {
-    if (props.path) {
-      const text = props.path
-        ? props.isMulti
-          ? props.path.map(pathDisplayName).join(", ")
-          : pathDisplayName(props.path)
-        : "";
+    if (props.path && props.path.length > 0) {
+      const text = props.isMulti ? props.path.map(pathDisplayName).join(", ") : pathDisplayName(props.path);
 
       return (
         <Tooltip placement="bottom-start" control={<div className={styles.text}>{text}</div>}>
@@ -49,7 +46,8 @@ export const PathPopout: React.FC<PathPopoutProps> = (props) => {
         </Tooltip>
       );
     }
-    return <>{"<sourceDefined>"}</>;
+
+    return <FormattedMessage id="connection.catalogTree.sourceDefined" />;
   }
 
   const text = props.path