Revert "Choose optimal sync modes by default on UI (#12411)"

airbyte-webapp/package.json

@@ -9,7 +9,6 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "test:coverage": "npm test -- --coverage --watchAll=false",
     "format": "prettier --write 'src/**/*.{ts,tsx}'",
     "storybook": "start-storybook -p 9009 -s public --quiet",
     "lint": "eslint --ext js,ts,tsx src",

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

@@ -29,7 +29,6 @@ import { flatten, getPathType } from "./utils";
 const Section = styled.div<{ error?: boolean; isSelected: boolean }>`
   border: 1px solid ${(props) => (props.error ? props.theme.dangerColor : "none")};
   background: ${({ theme, isSelected }) => (isSelected ? "rgba(97, 94, 255, 0.1);" : theme.greyColor0)};
-  padding: 2px;
 
   &:first-child {
     border-radius: 8px 8px 0 0;

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

@@ -38,7 +38,7 @@ export const StreamFieldTable: React.FC<StreamFieldTableProps> = (props) => {
       </TreeRowWrapper>
       <RowsContainer>
         {props.syncSchemaFields.map((field) => (
-          <TreeRowWrapper depth={1} key={pathDisplayName(field.path)}>
+          <TreeRowWrapper depth={1} key={field.key}>
             <FieldRow
               path={field.path}
               name={pathDisplayName(field.path)}

airbyte-webapp/src/views/Connection/ConnectionForm/formConfig.tsx

@@ -1,11 +1,18 @@
+import { setIn } from "formik";
 import { useMemo } from "react";
 import { useIntl } from "react-intl";
 import * as yup from "yup";
 
 import { DropDownRow } from "components";
 
 import FrequencyConfig from "config/FrequencyConfig.json";
-import { DestinationSyncMode, SyncMode, SyncSchema, SyncSchemaStream } from "core/domain/catalog";
+import {
+  AirbyteStreamConfiguration,
+  DestinationSyncMode,
+  SyncMode,
+  SyncSchema,
+  SyncSchemaStream,
+} from "core/domain/catalog";
 import { Connection, ScheduleProperties } from "core/domain/connection";
 import { ConnectionNamespaceDefinition, ConnectionSchedule } from "core/domain/connection";
 import {
@@ -21,8 +28,6 @@ import { SOURCE_NAMESPACE_TAG } from "core/domain/connector/source";
 import { ValuesProps } from "hooks/services/useConnectionHook";
 import { useCurrentWorkspace } from "services/workspaces/WorkspacesService";
 
-import { getOptimalSyncMode, verifyConfigCursorField, verifySupportedSyncModes } from "./formConfigHelpers";
-
 type FormikConnectionFormValues = {
   schedule?: ScheduleProperties | null;
   prefix: string;
@@ -192,17 +197,54 @@ function mapFormPropsToOperation(
   return newOperations;
 }
 
-const useInitialSchema = (schema: SyncSchema, supportedDestinationSyncModes: DestinationSyncMode[]): SyncSchema =>
+function getDefaultCursorField(streamNode: SyncSchemaStream): string[] {
+  if (streamNode.stream.defaultCursorField.length) {
+    return streamNode.stream.defaultCursorField;
+  }
+  return streamNode.config.cursorField;
+}
+
+const useInitialSchema = (schema: SyncSchema): SyncSchema =>
   useMemo<SyncSchema>(
     () => ({
       streams: schema.streams.map<SyncSchemaStream>((apiNode, id) => {
         const nodeWithId: SyncSchemaStream = { ...apiNode, id: id.toString() };
-        const nodeStream = verifyConfigCursorField(verifySupportedSyncModes(nodeWithId));
 
-        return getOptimalSyncMode(nodeStream, supportedDestinationSyncModes);
+        // If the value in supportedSyncModes is empty assume the only supported sync mode is FULL_REFRESH.
+        // Otherwise, it supports whatever sync modes are present.
+        const streamNode = nodeWithId.stream.supportedSyncModes?.length
+          ? nodeWithId
+          : setIn(nodeWithId, "stream.supportedSyncModes", [SyncMode.FullRefresh]);
+
+        // If syncMode isn't null - don't change item
+        if (streamNode.config.syncMode) {
+          return streamNode;
+        }
+
+        const updateStreamConfig = (config: Partial<AirbyteStreamConfiguration>): SyncSchemaStream => ({
+          ...streamNode,
+          config: { ...streamNode.config, ...config },
+        });
+
+        const supportedSyncModes = streamNode.stream.supportedSyncModes;
+
+        // Prefer INCREMENTAL sync mode over other sync modes
+        if (supportedSyncModes.includes(SyncMode.Incremental)) {
+          return updateStreamConfig({
+            cursorField: streamNode.config.cursorField.length
+              ? streamNode.config.cursorField
+              : getDefaultCursorField(streamNode),
+            syncMode: SyncMode.Incremental,
+          });
+        }
+
+        // If source don't support INCREMENTAL and FULL_REFRESH - set first value from supportedSyncModes list
+        return updateStreamConfig({
+          syncMode: streamNode.stream.supportedSyncModes[0],
+        });
       }),
     }),
-    [schema.streams, supportedDestinationSyncModes]
+    [schema.streams]
   );
 
 const getInitialTransformations = (operations: Operation[]): Transformation[] => operations.filter(isDbtTransformation);
@@ -224,7 +266,7 @@ const useInitialValues = (
   destDefinition: DestinationDefinitionSpecification,
   isEditMode?: boolean
 ): FormikConnectionFormValues => {
-  const initialSchema = useInitialSchema(connection.syncCatalog, destDefinition.supportedDestinationSyncModes);
+  const initialSchema = useInitialSchema(connection.syncCatalog);
 
   return useMemo(() => {
     const initialValues: FormikConnectionFormValues = {