🪟 🐛 Show Datatypes Correctly (#15558)

* airbyte_type and format are now correctly passed along * refactor * Remove nullable as it is unused
airbytehq · Aug 23, 2022 · 64ece7e · 64ece7e
1 parent 9967af9
commit 64ece7e
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 61 deletions.
diff --git a/airbyte-webapp/src/core/domain/catalog/fieldUtil.ts b/airbyte-webapp/src/core/domain/catalog/fieldUtil.ts
@@ -4,16 +4,20 @@ import { NamespaceDefinitionType } from "../../request/AirbyteClient";
 import { SOURCE_NAMESPACE_TAG } from "../connector/source";
 import { SyncSchemaField } from "./models";
 
+type AirbyteJsonSchema = JSONSchema7Definition & {
+  airbyte_type?: string;
+};
+
 const traverseSchemaToField = (
-  jsonSchema: JSONSchema7Definition | undefined,
+  jsonSchema: AirbyteJsonSchema | undefined,
   key: string | undefined
 ): SyncSchemaField[] => {
   // For the top level we should not insert an extra object
   return traverseJsonSchemaProperties(jsonSchema, key)[0].fields ?? [];
 };
 
 const traverseJsonSchemaProperties = (
-  jsonSchema: JSONSchema7Definition | undefined,
+  jsonSchema: AirbyteJsonSchema | undefined,
   key: string | undefined = "",
   path: string[] = []
 ): SyncSchemaField[] => {
@@ -38,6 +42,8 @@ const traverseJsonSchemaProperties = (
         (Array.isArray(jsonSchema?.type)
           ? jsonSchema?.type.find((t) => t !== "null") ?? jsonSchema?.type[0]
           : jsonSchema?.type) ?? "null",
+      airbyte_type: jsonSchema?.airbyte_type,
+      format: jsonSchema?.format,
     },
   ];
 };

diff --git a/airbyte-webapp/src/core/domain/catalog/models.ts b/airbyte-webapp/src/core/domain/catalog/models.ts
@@ -3,7 +3,8 @@ export interface SyncSchemaField {
   type: string;
   key: string;
   path: string[];
-
+  airbyte_type?: string;
+  format?: string;
   fields?: SyncSchemaField[];
 }
 

diff --git a/airbyte-webapp/src/views/Connection/CatalogTree/FieldRow.tsx b/airbyte-webapp/src/views/Connection/CatalogTree/FieldRow.tsx
@@ -3,27 +3,23 @@ import styled from "styled-components";
 
 import { Cell, CheckBox, RadioButton } from "components";
 
+import { SyncSchemaField } from "core/domain/catalog";
+import { AirbyteStreamConfiguration } from "core/request/AirbyteClient";
+import { equal } from "utils/objects";
+
 import { useTranslateDataType } from "../../../utils/useTranslateDataType";
 import DataTypeCell from "./components/DataTypeCell";
+import { pathDisplayName } from "./components/PathPopout";
 import { NameContainer } from "./styles";
 
 interface FieldRowProps {
-  name: string;
-  path: string[];
-  type: string;
-  format?: string;
-  airbyte_type?: string;
-  nullable?: boolean;
-  destinationName: string;
-  isPrimaryKey: boolean;
   isPrimaryKeyEnabled: boolean;
-  isCursor: boolean;
   isCursorEnabled: boolean;
-  anyOf?: unknown[];
-  oneOf?: unknown[];
 
   onPrimaryKeyChange: (pk: string[]) => void;
   onCursorChange: (cs: string[]) => void;
+  field: SyncSchemaField;
+  config: AirbyteStreamConfiguration | undefined;
 }
 
 const FirstCell = styled(Cell)`
@@ -34,25 +30,32 @@ const LastCell = styled(Cell)`
   margin-right: -10px;
 `;
 
-const FieldRowInner: React.FC<FieldRowProps> = ({ onPrimaryKeyChange, onCursorChange, path, ...props }) => {
-  const dataType = useTranslateDataType(props);
+const FieldRowInner: React.FC<FieldRowProps> = ({
+  onPrimaryKeyChange,
+  onCursorChange,
+  field,
+  config,
+  isCursorEnabled,
+  isPrimaryKeyEnabled,
+}) => {
+  const dataType = useTranslateDataType(field);
+  const name = pathDisplayName(field.path);
+
+  const isCursor = equal(config?.cursorField, field.path);
+  const isPrimaryKey = !!config?.primaryKey?.some((p) => equal(p, field.path));
 
   return (
     <>
       <FirstCell ellipsis flex={1.5}>
-        <NameContainer title={props.name}>{props.name}</NameContainer>
+        <NameContainer title={name}>{name}</NameContainer>
       </FirstCell>
-      <DataTypeCell nullable={props.nullable}>{dataType}</DataTypeCell>
-      <Cell>
-        {props.isCursorEnabled && <RadioButton checked={props.isCursor} onChange={() => onCursorChange(path)} />}
-      </Cell>
+      <DataTypeCell>{dataType}</DataTypeCell>
+      <Cell>{isCursorEnabled && <RadioButton checked={isCursor} onChange={() => onCursorChange(field.path)} />}</Cell>
       <Cell>
-        {props.isPrimaryKeyEnabled && (
-          <CheckBox checked={props.isPrimaryKey} onChange={() => onPrimaryKeyChange(path)} />
-        )}
+        {isPrimaryKeyEnabled && <CheckBox checked={isPrimaryKey} onChange={() => onPrimaryKeyChange(field.path)} />}
       </Cell>
-      <LastCell ellipsis title={props.destinationName} flex={1.5}>
-        {props.destinationName}
+      <LastCell ellipsis title={field.cleanedName} flex={1.5}>
+        {field.cleanedName}
       </LastCell>
     </>
   );

diff --git a/airbyte-webapp/src/views/Connection/CatalogTree/StreamFieldTable.tsx b/airbyte-webapp/src/views/Connection/CatalogTree/StreamFieldTable.tsx
@@ -2,7 +2,6 @@ import React from "react";
 import styled from "styled-components";
 
 import { SyncSchemaField, SyncSchemaFieldObject } from "core/domain/catalog";
-import { equal } from "utils/objects";
 
 import { AirbyteStreamConfiguration } from "../../../core/request/AirbyteClient";
 import { pathDisplayName } from "./components/PathPopout";
@@ -26,12 +25,6 @@ interface StreamFieldTableProps {
 }
 
 export const StreamFieldTable: React.FC<StreamFieldTableProps> = (props) => {
-  const { config } = props;
-
-  const isCursor = (field: SyncSchemaField): boolean => equal(config?.cursorField, field.path);
-
-  const isPrimaryKey = (field: SyncSchemaField): boolean => !!config?.primaryKey?.some((p) => equal(p, field.path));
-
   return (
     <>
       <TreeRowWrapper noBorder>
@@ -41,12 +34,8 @@ export const StreamFieldTable: React.FC<StreamFieldTableProps> = (props) => {
         {props.syncSchemaFields.map((field) => (
           <TreeRowWrapper depth={1} key={pathDisplayName(field.path)}>
             <FieldRow
-              path={field.path}
-              name={pathDisplayName(field.path)}
-              type={field.type}
-              destinationName={field.cleanedName}
-              isCursor={isCursor(field)}
-              isPrimaryKey={isPrimaryKey(field)}
+              field={field}
+              config={props.config}
               isPrimaryKeyEnabled={props.shouldDefinePk && SyncSchemaFieldObject.isPrimitive(field)}
               isCursorEnabled={props.shouldDefineCursor && SyncSchemaFieldObject.isPrimitive(field)}
               onPrimaryKeyChange={props.onPkSelect}

diff --git a/airbyte-webapp/src/views/Connection/CatalogTree/components/DataTypeCell.tsx b/airbyte-webapp/src/views/Connection/CatalogTree/components/DataTypeCell.tsx
@@ -1,29 +1,9 @@
 import React from "react";
-import { FormattedMessage } from "react-intl";
-import styled from "styled-components";
 
 import { Cell } from "components/SimpleTableComponents";
 
-interface DataTypeCellProps {
-  nullable?: boolean;
-}
-
-const Description = styled.div`
-  color: ${({ theme }) => theme.greyColor40};
-  font-size: 11px;
-`;
-
-const DataTypeCell: React.FC<DataTypeCellProps> = ({ children, nullable }) => {
-  return (
-    <Cell>
-      {children}
-      {nullable && (
-        <Description>
-          <FormattedMessage id="form.nullable" />
-        </Description>
-      )}
-    </Cell>
-  );
+const DataTypeCell: React.FC = ({ children }) => {
+  return <Cell>{children}</Cell>;
 };
 
 export default DataTypeCell;