Remove table name from column names (#2914)

airbyte-webapp/src/components/MainView/MainView.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import styled from "styled-components";
-import SideBar from "components/SideBar";
+import SideBar from "views/layout/SideBar";
 
 const MainContainer = styled.div`
   width: 100%;

airbyte-webapp/src/components/TreeView/components/TreeViewSection.tsx

@@ -122,33 +122,30 @@ const TreeViewSection: React.FC<TreeViewRowProps> = ({
             }
           ),
         })),
-    [stream.supportedSyncModes, formatMessage]
+    [stream.supportedSyncModes, destinationSupportedSyncModes, formatMessage]
   );
 
   const pkPaths = useMemo(
-    () =>
-      new Set(
-        config.primaryKey.map((pkPath) => `${stream.name}.${pkPath.join(".")}`)
-      ),
-    [config, stream]
+    () => new Set(config.primaryKey.map((pkPath) => pkPath.join("."))),
+    [config]
   );
 
   const onPkSelect = (field: SyncSchemaField) => {
-    const pkPath = field.name.replace(`${stream.name}.`, "").split(".");
+    const pkPath = field.name.split(".");
+
+    let newPrimaryKey: string[][];
 
     if (pkPaths.has(field.name)) {
-      updateStreamWithConfig({
-        primaryKey: config.primaryKey.filter((key) => !equal(key, pkPath)),
-      });
+      newPrimaryKey = config.primaryKey.filter((key) => !equal(key, pkPath));
     } else {
-      updateStreamWithConfig({ primaryKey: [...config.primaryKey, pkPath] });
+      newPrimaryKey = [...config.primaryKey, pkPath];
     }
-  };
 
-  const selectedCursorPath = `${stream.name}.${config.cursorField.join(".")}`;
+    updateStreamWithConfig({ primaryKey: newPrimaryKey });
+  };
 
   const onCursorSelect = (field: SyncSchemaField) => {
-    const cursorPath = field.name.replace(`${stream.name}.`, "").split(".");
+    const cursorPath = field.name.split(".");
 
     updateStreamWithConfig({ cursorField: cursorPath });
   };
@@ -161,6 +158,7 @@ const TreeViewSection: React.FC<TreeViewRowProps> = ({
   const showCursor = !stream.sourceDefinedCursor;
 
   const pkKeyItems = config.primaryKey.map((k) => k.join("."));
+  const selectedCursorPath = config.cursorField.join(".");
 
   return (
     <>

airbyte-webapp/src/core/domain/catalog/fieldUtil.ts

@@ -32,7 +32,8 @@ export const traverseSchemaToField = (
 const traverseJsonSchemaProperties = (
   jsonSchema: JSONSchema7Definition,
   key: string,
-  path: string = key
+  path: string = key,
+  depth = 0
 ): SyncSchemaField[] => {
   if (typeof jsonSchema === "boolean") {
     return [];
@@ -42,15 +43,20 @@ const traverseJsonSchemaProperties = (
   if (jsonSchema.properties) {
     fields = Object.entries(jsonSchema.properties)
       .flatMap(([k, schema]) =>
-        traverseJsonSchemaProperties(schema, k, `${path}.${k}`)
+        traverseJsonSchemaProperties(
+          schema,
+          k,
+          depth === 0 ? k : `${path}.${k}`,
+          depth + 1
+        )
       )
       .flat(2);
   }
 
   return [
     {
       cleanedName: key,
-      name: path || key,
+      name: path,
       key,
       fields,
       type:

airbyte-webapp/src/pages/ConnectionPage/pages/CreationFormPage/CreationFormPage.tsx

@@ -33,6 +33,11 @@ export enum EntityStepsTypes {
 }
 
 const CreationFormPage: React.FC<IProps> = ({ type }) => {
+  const [currentStep, setCurrentStep] = useState(StepsTypes.CREATE_ENTITY);
+  const [currentEntityStep, setCurrentEntityStep] = useState(
+    EntityStepsTypes.SOURCE
+  );
+
   const { location, push } = useRouter();
   const source = useResource(
     SourceResource.detailShape(),
@@ -51,52 +56,6 @@ const CreationFormPage: React.FC<IProps> = ({ type }) => {
       : null
   );
 
-  const steps =
-    type === "connection"
-      ? [
-          {
-            id: StepsTypes.CREATE_ENTITY,
-            name: <FormattedMessage id={"onboarding.createSource"} />,
-          },
-          {
-            id: StepsTypes.CREATE_CONNECTOR,
-            name: <FormattedMessage id={"onboarding.createDestination"} />,
-          },
-          {
-            id: StepsTypes.CREATE_CONNECTION,
-            name: <FormattedMessage id={"onboarding.setUpConnection"} />,
-          },
-        ]
-      : [
-          {
-            id: StepsTypes.CREATE_ENTITY,
-            name:
-              type === "destination" ? (
-                <FormattedMessage id={"onboarding.createDestination"} />
-              ) : (
-                <FormattedMessage id={"onboarding.createSource"} />
-              ),
-          },
-          {
-            id: StepsTypes.CREATE_CONNECTION,
-            name: <FormattedMessage id={"onboarding.setUpConnection"} />,
-          },
-        ];
-  const [currentStep, setCurrentStep] = useState(StepsTypes.CREATE_ENTITY);
-  const [currentEntityStep, setCurrentEntityStep] = useState(
-    EntityStepsTypes.SOURCE
-  );
-
-  const afterSubmitConnection = () => {
-    if (type === "destination") {
-      push(`${Routes.Source}/${source?.sourceId}`);
-    } else if (type === "source") {
-      push(`${Routes.Destination}/${destination?.destinationId}`);
-    } else {
-      push(`${Routes.Connections}`);
-    }
-  };
-
   const renderStep = () => {
     if (
       currentStep === StepsTypes.CREATE_ENTITY ||
@@ -151,6 +110,16 @@ const CreationFormPage: React.FC<IProps> = ({ type }) => {
       }
     }
 
+    const afterSubmitConnection = () => {
+      if (type === "destination") {
+        push(`${Routes.Source}/${source?.sourceId}`);
+      } else if (type === "source") {
+        push(`${Routes.Destination}/${destination?.destinationId}`);
+      } else {
+        push(`${Routes.Connections}`);
+      }
+    };
+
     return (
       <CreateConnectionContent
         source={source!}
@@ -160,6 +129,38 @@ const CreationFormPage: React.FC<IProps> = ({ type }) => {
     );
   };
 
+  const steps =
+    type === "connection"
+      ? [
+          {
+            id: StepsTypes.CREATE_ENTITY,
+            name: <FormattedMessage id={"onboarding.createSource"} />,
+          },
+          {
+            id: StepsTypes.CREATE_CONNECTOR,
+            name: <FormattedMessage id={"onboarding.createDestination"} />,
+          },
+          {
+            id: StepsTypes.CREATE_CONNECTION,
+            name: <FormattedMessage id={"onboarding.setUpConnection"} />,
+          },
+        ]
+      : [
+          {
+            id: StepsTypes.CREATE_ENTITY,
+            name:
+              type === "destination" ? (
+                <FormattedMessage id={"onboarding.createDestination"} />
+              ) : (
+                <FormattedMessage id={"onboarding.createSource"} />
+              ),
+          },
+          {
+            id: StepsTypes.CREATE_CONNECTION,
+            name: <FormattedMessage id={"onboarding.setUpConnection"} />,
+          },
+        ];
+
   return (
     <MainPageWithScroll
       title={

airbyte-webapp/src/components/SideBar/SideBar.tsx → airbyte-webapp/src/views/layout/SideBar/SideBar.tsx

@@ -11,15 +11,16 @@ import { faSlack } from "@fortawesome/free-brands-svg-icons";
 import { FormattedMessage } from "react-intl";
 import { NavLink } from "react-router-dom";
 
-import Link from "../Link";
+import { Routes } from "pages/routes";
+import config from "config";
+
+import useNotification from "components/hooks/services/useNotification";
+import Link from "components/Link";
+import Version from "components/Version";
+import Indicator from "components/Indicator";
 import Source from "./components/Source";
 import Connections from "./components/Connections";
-import Version from "../Version";
 import Destination from "./components/Destination";
-import { Routes } from "pages/routes";
-import config from "config";
-import Indicator from "../Indicator";
-import useNotification from "../hooks/services/useNotification";
 
 const Bar = styled.nav`
   width: 100px;