Fixed reverted PR: Choose optimal sync modes by default on UI (#12770)

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

This reverts commit 9789ffd.

* get optimal sync mode only in creation mode

* sort sync mode options by priority

* add tests for calculateInitialCatalog

* remove duplicated tests

* fixed one-line 'if'

* move calculationInitialCatalog function to file and export it as default

* - fix merge conflicts
- fix Type

* update tests

airbyte-webapp/package.json

@@ -9,6 +9,7 @@
     "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/pages/ConnectionPage/pages/ConnectionItemPage/components/TransformationView.tsx

@@ -50,15 +50,15 @@ const NoSupportedTransformationCard = styled(ContentCard)`
 `;
 
 const CustomTransformationsCard: React.FC<{
-  operations?: OperationRead[];
+  operations?: OperationCreate[];
   onSubmit: FormikOnSubmit<{ transformations?: OperationRead[] }>;
   mode: ConnectionFormMode;
 }> = ({ operations, onSubmit, mode }) => {
   const defaultTransformation = useDefaultTransformation();
 
   const initialValues = useMemo(
     () => ({
-      transformations: getInitialTransformations(operations),
+      transformations: getInitialTransformations(operations || []),
     }),
     [operations]
   );

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

@@ -26,6 +26,7 @@ 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

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