Add destinationSyncModes to connection form (#2845)

* Add destinationSyncModes to connection form * Sync Settings field display full text
airbytehq · Apr 15, 2021 · 7611719 · 7611719
1 parent ab9e93f
commit 7611719
Show file tree

Hide file tree

Showing 23 changed files with 141 additions and 113 deletions.
diff --git a/airbyte-webapp/src/components/CreateConnectionContent/CreateConnectionContent.tsx b/airbyte-webapp/src/components/CreateConnectionContent/CreateConnectionContent.tsx
@@ -5,7 +5,7 @@ import styled from "styled-components";
 import LoadingSchema from "components/LoadingSchema";
 import ContentCard from "components/ContentCard";
 import { JobsLogItem } from "components/JobItem";
-import FrequencyForm from "views/Connector/FrequencyForm";
+import ConnectionForm from "views/Connection/ConnectionForm";
 import { createFormErrorMessage } from "utils/errorStatusMessage";
 
 import TryAfterErrorBlock from "./components/TryAfterErrorBlock";
@@ -19,6 +19,7 @@ import { SyncSchema } from "core/domain/catalog";
 
 import useConnection from "components/hooks/services/useConnectionHook";
 import { useDiscoverSchema } from "components/hooks/services/useSchemaHook";
+import { useDestinationDefinitionSpecificationLoad } from "../hooks/services/useDestinationHook";
 
 const SkipButton = styled.div`
   margin-top: 6px;
@@ -31,8 +32,8 @@ const SkipButton = styled.div`
 
 type IProps = {
   additionBottomControls?: React.ReactNode;
-  source?: Source;
-  destination?: Destination;
+  source: Source;
+  destination: Destination;
   afterSubmitConnection?: () => void;
 };
 
@@ -51,6 +52,33 @@ const CreateConnectionContent: React.FC<IProps> = ({
     onDiscoverSchema,
   } = useDiscoverSchema(source?.sourceId);
 
+  const {
+    destinationDefinitionSpecification,
+    isLoading: loadingDestination,
+  } = useDestinationDefinitionSpecificationLoad(
+    destination.destinationDefinitionId
+  );
+
+  if (isLoading || loadingDestination) {
+    return (
+      <ContentCard title={<FormattedMessage id="onboarding.setConnection" />}>
+        <LoadingSchema />
+      </ContentCard>
+    );
+  }
+
+  if (schemaErrorStatus) {
+    return (
+      <ContentCard title={<FormattedMessage id="onboarding.setConnection" />}>
+        <TryAfterErrorBlock
+          onClick={onDiscoverSchema}
+          additionControl={<SkipButton>{additionBottomControls}</SkipButton>}
+        />
+        <JobsLogItem jobInfo={schemaErrorStatus?.response} />
+      </ContentCard>
+    );
+  }
+
   const onSubmitConnectionStep = async (values: {
     frequency: string;
     prefix: string;
@@ -96,37 +124,18 @@ const CreateConnectionContent: React.FC<IProps> = ({
     });
   };
 
-  if (isLoading) {
-    return (
-      <ContentCard title={<FormattedMessage id="onboarding.setConnection" />}>
-        <LoadingSchema />
-      </ContentCard>
-    );
-  }
-
-  if (schemaErrorStatus) {
-    return (
-      <ContentCard title={<FormattedMessage id="onboarding.setConnection" />}>
-        <TryAfterErrorBlock
-          onClick={onDiscoverSchema}
-          additionControl={<SkipButton>{additionBottomControls}</SkipButton>}
-        />
-        <JobsLogItem jobInfo={schemaErrorStatus?.response} />
-      </ContentCard>
-    );
-  }
-
   return (
     <ContentCard title={<FormattedMessage id="onboarding.setConnection" />}>
       <Suspense fallback={<LoadingSchema />}>
-        <FrequencyForm
+        <ConnectionForm
           additionBottomControls={additionBottomControls}
           onDropDownSelect={onSelectFrequency}
           onSubmit={onSubmitConnectionStep}
           errorMessage={createFormErrorMessage({ status: errorStatusRequest })}
           schema={schema}
           source={source}
           destination={destination}
+          destinationDefinition={destinationDefinitionSpecification}
         />
       </Suspense>
     </ContentCard>

diff --git a/airbyte-webapp/src/components/ImageBlock/ImageBlock.tsx b/airbyte-webapp/src/components/ImageBlock/ImageBlock.tsx
@@ -39,7 +39,7 @@ const ImageBlock: React.FC<IProps> = ({ img, className, num, small }) => (
         small={small}
         src={img || "/default-logo-catalog.svg"}
         height={18}
-        alt={"logo"}
+        alt="logo"
       />
     )}
   </Content>

diff --git a/airbyte-webapp/src/components/TreeView/TreeView.tsx b/airbyte-webapp/src/components/TreeView/TreeView.tsx
@@ -1,11 +1,16 @@
 import React, { useCallback, useMemo } from "react";
 
 import { TreeViewSection } from "./components/TreeViewSection";
-import { SyncSchema, AirbyteStreamConfiguration } from "core/domain/catalog";
+import {
+  SyncSchema,
+  AirbyteStreamConfiguration,
+  DestinationSyncMode,
+} from "core/domain/catalog";
 
 type IProps = {
   filter?: string;
   schema: SyncSchema;
+  destinationSupportedSyncModes: DestinationSyncMode[];
   onChangeSchema: (schema: SyncSchema) => void;
 };
 
@@ -16,7 +21,12 @@ function compareByName<T extends { name: string }>(o1: T, o2: T): -1 | 0 | 1 {
   return o1.name > o2.name ? 1 : -1;
 }
 
-const TreeView: React.FC<IProps> = ({ schema, onChangeSchema, filter }) => {
+const TreeView: React.FC<IProps> = ({
+  schema,
+  destinationSupportedSyncModes,
+  onChangeSchema,
+  filter,
+}) => {
   const filteringSchema = useMemo(() => {
     return filter
       ? {
@@ -59,6 +69,7 @@ const TreeView: React.FC<IProps> = ({ schema, onChangeSchema, filter }) => {
         <TreeViewSection
           key={streamNode.stream.name}
           streamNode={streamNode}
+          destinationSupportedSyncModes={destinationSupportedSyncModes}
           updateItem={onUpdateItem}
         />
       ))}

diff --git a/airbyte-webapp/src/components/TreeView/components/SyncSettingsCell.tsx b/airbyte-webapp/src/components/TreeView/components/SyncSettingsCell.tsx
@@ -16,7 +16,7 @@ const StyledDropDown = styled(DropDown)`
 `;
 
 const SyncSettingsCell: React.FC<DropdownProps> = (props) => (
-  <Cell>
+  <Cell flex={1.5}>
     <DropDownContainer>
       <StyledDropDown {...props} fullText withBorder />
     </DropDownContainer>

diff --git a/airbyte-webapp/src/components/TreeView/components/TreeViewSection.tsx b/airbyte-webapp/src/components/TreeView/components/TreeViewSection.tsx
@@ -40,6 +40,7 @@ const supportedModes: [SyncMode, DestinationSyncMode][] = [
 type TreeViewRowProps = {
   isChild?: boolean;
   streamNode: SyncSchemaStream;
+  destinationSupportedSyncModes: DestinationSyncMode[];
   updateItem: (
     streamId: string,
     newConfiguration: Partial<AirbyteStreamConfiguration>
@@ -49,6 +50,7 @@ type TreeViewRowProps = {
 const TreeViewSection: React.FC<TreeViewRowProps> = ({
   streamNode,
   updateItem,
+  destinationSupportedSyncModes,
 }) => {
   const formatMessage = useIntl().formatMessage;
   const { stream, config } = streamNode;
@@ -85,7 +87,11 @@ const TreeViewSection: React.FC<TreeViewRowProps> = ({
   const fullData = useMemo(
     () =>
       supportedModes
-        .filter(([syncMode]) => stream.supportedSyncModes.includes(syncMode))
+        .filter(
+          ([syncMode, destinationSyncMode]) =>
+            stream.supportedSyncModes.includes(syncMode) &&
+            destinationSupportedSyncModes.includes(destinationSyncMode)
+        )
         .map(([syncMode, destinationSyncMode]) => ({
           value: `${syncMode}.${destinationSyncMode}`,
           text: formatMessage(
@@ -219,7 +225,7 @@ const TreeViewSection: React.FC<TreeViewRowProps> = ({
                     />
                   )}
               </Cell>
-              <Cell />
+              <Cell flex={1.5} />
             </TreeRowWrapper>
           )}
         </Rows>

diff --git a/airbyte-webapp/src/components/hooks/services/useDestinationHook.tsx b/airbyte-webapp/src/components/hooks/services/useDestinationHook.tsx
@@ -23,7 +23,7 @@ type ValuesProps = {
 type ConnectorProps = { name: string; destinationDefinitionId: string };
 
 export const useDestinationDefinitionSpecificationLoad = (
-  destinationDefinitionId: string
+  destinationDefinitionId: string | null
 ): {
   isLoading: boolean;
   destinationDefinitionSpecification: DestinationDefinitionSpecification;

diff --git a/airbyte-webapp/src/core/resources/Connection.ts b/airbyte-webapp/src/core/resources/Connection.ts
@@ -28,8 +28,8 @@ export interface Connection {
   status: string;
   schedule: ScheduleProperties | null;
   syncCatalog: SyncSchema;
-  source?: Source;
-  destination?: Destination;
+  source: Source;
+  destination: Destination;
   latestSyncJobCreatedAt?: number | null;
   isSyncing?: boolean;
   latestSyncJobStatus: string | null;
@@ -46,8 +46,8 @@ export default class ConnectionResource
   readonly status: string = "";
   readonly message: string = "";
   readonly schedule: ScheduleProperties | null = null;
-  readonly source: Source | undefined = undefined;
-  readonly destination: Destination | undefined = undefined;
+  readonly source: Source = {} as Source;
+  readonly destination: Destination = {} as Destination;
   readonly latestSyncJobCreatedAt: number | undefined | null = null;
   readonly latestSyncJobStatus: string | null = null;
   readonly syncCatalog: SyncSchema = { streams: [] };

diff --git a/airbyte-webapp/src/core/resources/DestinationDefinitionSpecification.ts b/airbyte-webapp/src/core/resources/DestinationDefinitionSpecification.ts
@@ -1,11 +1,13 @@
 import { ReadShape, Resource, SchemaDetail } from "rest-hooks";
 import BaseResource from "./BaseResource";
 import { ConnectionSpecification } from "core/domain/connection";
+import { DestinationSyncMode } from "../domain/catalog";
 
 export interface DestinationDefinitionSpecification {
   destinationDefinitionId: string;
   connectionSpecification: ConnectionSpecification;
   documentationUrl: string;
+  supportedDestinationSyncModes: DestinationSyncMode[];
 }
 
 export default class DestinationDefinitionSpecificationResource
@@ -17,6 +19,7 @@ export default class DestinationDefinitionSpecificationResource
     properties: {},
     required: [""],
   };
+  readonly supportedDestinationSyncModes: DestinationSyncMode[] = [];
 
   pk(): string {
     return this.destinationDefinitionId?.toString();

diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/SettingsView.tsx b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/SettingsView.tsx
@@ -10,14 +10,15 @@ import useConnection, {
   useConnectionLoad,
 } from "components/hooks/services/useConnectionHook";
 import DeleteBlock from "components/DeleteBlock";
-import FrequencyForm from "views/Connector/FrequencyForm";
+import ConnectionForm from "views/Connection/ConnectionForm";
 import { SyncSchema } from "core/domain/catalog";
 import { equal } from "utils/objects";
 import ResetDataModal from "components/ResetDataModal";
 import { ModalTypes } from "components/ResetDataModal/types";
 import Button from "components/Button";
 import LoadingSchema from "components/LoadingSchema";
 import EnabledControl from "./EnabledControl";
+import { useDestinationDefinitionSpecificationLoad } from "../../../../../components/hooks/services/useDestinationHook";
 
 type IProps = {
   onAfterSaveSchema: () => void;
@@ -97,6 +98,14 @@ const SettingsView: React.FC<IProps> = ({
     activeUpdatingSchemaMode
   );
 
+  // TODO: check if it makes more sense to move it to frequencyform
+  const {
+    destinationDefinitionSpecification,
+    isLoading: loadingDestination,
+  } = useDestinationDefinitionSpecificationLoad(
+    connection?.destination?.destinationDefinitionId ?? null
+  );
+
   const onDelete = useCallback(
     () => deleteConnection({ connectionId: connectionId }),
     [deleteConnection, connectionId]
@@ -198,14 +207,17 @@ const SettingsView: React.FC<IProps> = ({
           </Title>
         }
       >
-        {!isLoadingConnection && connection ? (
-          <FrequencyForm
+        {!isLoadingConnection && !loadingDestination && connection ? (
+          <ConnectionForm
             isEditMode
             schema={connection.syncCatalog}
+            prefixValue={connection.prefix}
+            source={connection.source}
+            destination={connection.destination}
+            destinationDefinition={destinationDefinitionSpecification}
             onSubmit={onSubmitForm}
             onReset={onReset}
             frequencyValue={schedule?.value}
-            prefixValue={connection.prefix}
             errorMessage={errorMessage}
             successMessage={
               saved && <FormattedMessage id="form.changesSaved" />
@@ -214,8 +226,6 @@ const SettingsView: React.FC<IProps> = ({
             editSchemeMode={activeUpdatingSchemaMode}
             isLoading={isLoading}
             additionalSchemaControl={UpdateSchemaButton()}
-            source={connection.source}
-            destination={connection.destination}
           />
         ) : (
           <LoadingSchema />

diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/CreationFormPage/CreationFormPage.tsx b/airbyte-webapp/src/pages/ConnectionPage/pages/CreationFormPage/CreationFormPage.tsx
@@ -153,8 +153,8 @@ const CreationFormPage: React.FC<IProps> = ({ type }) => {
 
     return (
       <CreateConnectionContent
-        source={source}
-        destination={destination}
+        source={source!}
+        destination={destination!}
         afterSubmitConnection={afterSubmitConnection}
       />
     );

diff --git a/airbyte-webapp/src/pages/OnboardingPage/OnboardingPage.tsx b/airbyte-webapp/src/pages/OnboardingPage/OnboardingPage.tsx
@@ -189,7 +189,7 @@ const OnboardingPage: React.FC = () => {
           dropDownData={sourcesDropDownData}
           hasSuccess={successRequest}
           error={errorStatusRequest}
-          source={sources.length && !successRequest ? sources[0] : undefined}
+          // source={sources.length && !successRequest ? sources[0] : undefined}
         />
       );
     }
@@ -203,18 +203,18 @@ const OnboardingPage: React.FC = () => {
           hasSuccess={successRequest}
           error={errorStatusRequest}
           currentSourceDefinitionId={sources[0].sourceDefinitionId}
-          destination={
-            destinations.length && !successRequest ? destinations[0] : undefined
-          }
+          // destination={
+          //   destinations.length && !successRequest ? destinations[0] : undefined
+          // }
         />
       );
     }
 
     return (
       <ConnectionStep
         errorStatus={errorStatusRequest?.status}
-        source={sources.length ? sources[0] : undefined}
-        destination={destinations.length ? destinations[0] : undefined}
+        source={sources[0]}
+        destination={destinations[0]}
       />
     );
   };

diff --git a/airbyte-webapp/src/pages/OnboardingPage/components/ConnectionStep.tsx b/airbyte-webapp/src/pages/OnboardingPage/components/ConnectionStep.tsx
@@ -9,8 +9,8 @@ import SkipOnboardingButton from "./SkipOnboardingButton";
 
 type IProps = {
   errorStatus?: number;
-  source?: Source;
-  destination?: Destination;
+  source: Source;
+  destination: Destination;
 };
 
 const ConnectionStep: React.FC<IProps> = ({ source, destination }) => {