🎉 Add namespace to schema UI (airbytehq#2894)

* Add namespace column * Fix PK column
LOVEGISER · Apr 17, 2021 · 737e70c · 737e70c
1 parent 451aa97
commit 737e70c
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 2 deletions.
diff --git a/airbyte-webapp/src/components/TreeView/components/TreeViewSection.tsx b/airbyte-webapp/src/components/TreeView/components/TreeViewSection.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useMemo } from "react";
 import { useSet } from "react-use";
-import { useIntl } from "react-intl";
+import { useIntl, FormattedMessage } from "react-intl";
 import styled from "styled-components";
 
 import {
@@ -30,6 +30,10 @@ const StyledRadioButton = styled(RadioButton)`
   vertical-align: middle;
 `;
 
+const EmptyField = styled.span`
+  color: ${({ theme }) => theme.greyColor40};
+`;
+
 const supportedModes: [SyncMode, DestinationSyncMode][] = [
   [SyncMode.FullRefresh, DestinationSyncMode.Overwrite],
   [SyncMode.FullRefresh, DestinationSyncMode.Append],
@@ -162,6 +166,13 @@ const TreeViewSection: React.FC<TreeViewRowProps> = ({
           isItemHasChildren={hasChildren}
           isItemOpen={isRowExpanded}
         />
+        <Cell>
+          {stream.namespace || (
+            <EmptyField>
+              <FormattedMessage id="form.noNamespace" />
+            </EmptyField>
+          )}
+        </Cell>
         <Cell />
         <OverflowCell title={config.aliasName}>{config.aliasName}</OverflowCell>
         <Cell>
@@ -171,7 +182,10 @@ const TreeViewSection: React.FC<TreeViewRowProps> = ({
               isItemOpen={isRowExpanded}
               tooltipItems={pkKeyItems}
             >
-              {pkKeyItems.join(",")}
+              <FormattedMessage
+                id="form.pkSelected"
+                values={{ count: pkKeyItems.length, items: pkKeyItems }}
+              />
             </ExpandFieldCell>
           )}
         </Cell>
@@ -201,6 +215,7 @@ const TreeViewSection: React.FC<TreeViewRowProps> = ({
                 isItemChecked={true}
                 depth={depth}
               />
+              <Cell />
               <OverflowCell>{field.type}</OverflowCell>
               <OverflowCell title={field.cleanedName}>
                 {field.cleanedName}

diff --git a/airbyte-webapp/src/core/domain/catalog/api.ts b/airbyte-webapp/src/core/domain/catalog/api.ts
@@ -26,6 +26,7 @@ export type SyncSchemaStream = {
 
 export type AirbyteStream = {
   name: string;
+  namespace?: string;
   jsonSchema: SchemaFields;
   supportedSyncModes: SyncMode[];
   sourceDefinedCursor: boolean | null;

diff --git a/airbyte-webapp/src/locales/en.json b/airbyte-webapp/src/locales/en.json
@@ -81,12 +81,15 @@
   "form.prefix.message": "Prefix to prefix all destination tables created as part of this connection. Useful for identifying tables on a per-connection basis and namespacing streams from different sources so they do not overwrite each other.",
   "form.prefix.placeholder": "prefix-",
   "form.nameSearch": "Search name",
+  "form.namespace": "Namespace",
+  "form.noNamespace": "No namespace",
   "form.sourceConnector": "Source connector",
   "form.destinationConnector": "Destination connector",
   "form.addItems": "Add",
   "form.items": "Items",
   "form.toSaveSchema": "To save the new schema, click on Save changes.",
   "form.noteStartSync": "Note that it will delete all the data in your destination and start syncing from scratch. ",
+  "form.pkSelected": "{count, plural, =0 { } one {{items}} other {# keys selected}}",
 
   "preferences.title": "Specify your preferences",
   "preferences.anonymizeUsage": "Anonymize usage data collection",

diff --git a/airbyte-webapp/src/views/Connection/ConnectionForm/components/SchemaView.tsx b/airbyte-webapp/src/views/Connection/ConnectionForm/components/SchemaView.tsx
@@ -93,6 +93,9 @@ const SchemaView: React.FC<SchemaViewProps> = ({
             hasSelectedItem={hasSelectedItem}
           />
         </Cell>
+        <LightCell>
+          <FormattedMessage id="form.namespace" />
+        </LightCell>
         <LightCell>
           <FormattedMessage id="form.dataType" />
         </LightCell>