Get source and destination from cache (#3807)

airbytehq · Jun 2, 2021 · 854dce6 · 854dce6
1 parent 368a7ce
commit 854dce6
Showing 1 changed file with 24 additions and 19 deletions.
diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionItemPage.tsx b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionItemPage.tsx
@@ -18,6 +18,8 @@ import Link from "components/Link";
 import { Routes } from "../../../routes";
 import DestinationDefinitionResource from "core/resources/DestinationDefinition";
 import SourceDefinitionResource from "core/resources/SourceDefinition";
+import SourceResource from "core/resources/Source";
+import DestinationResource from "core/resources/Destination";
 
 type ConnectionItemPageProps = {
   currentStep: "status" | "settings";
@@ -37,21 +39,28 @@ const ConnectionItemPage: React.FC<ConnectionItemPageProps> = ({
       JSON.stringify(item.config) === JSON.stringify(connection.schedule)
   );
 
+  const source = useResource(SourceResource.detailShape(), {
+    sourceId: connection.sourceId,
+  });
+
+  const destination = useResource(DestinationResource.detailShape(), {
+    destinationId: connection.destinationId,
+  });
+
   const sourceDefinition = useResource(
     SourceDefinitionResource.detailShape(),
-    connection.source
+    source
       ? {
-          sourceDefinitionId: connection.source.sourceDefinitionId,
+          sourceDefinitionId: source.sourceDefinitionId,
         }
       : null
   );
 
   const destinationDefinition = useResource(
     DestinationDefinitionResource.detailShape(),
-    connection.destination
+    destination
       ? {
-          destinationDefinitionId:
-            connection.destination.destinationDefinitionId,
+          destinationDefinitionId: destination.destinationDefinitionId,
         }
       : null
   );
@@ -81,11 +90,10 @@ const ConnectionItemPage: React.FC<ConnectionItemPageProps> = ({
     AnalyticsService.track("Source - Action", {
       user_id: config.ui.workspaceId,
       action: "Edit schema",
-      connector_source: connection.source?.sourceName,
-      connector_source_id: connection.source?.sourceDefinitionId,
-      connector_destination: connection.destination?.destinationName,
-      connector_destination_definition_id:
-        connection.destination?.destinationDefinitionId,
+      connector_source: source.sourceName,
+      connector_source_id: source.sourceDefinitionId,
+      connector_destination: destination.destinationName,
+      connector_destination_definition_id: destination.destinationDefinitionId,
       frequency: frequency?.text,
     });
   };
@@ -114,17 +122,14 @@ const ConnectionItemPage: React.FC<ConnectionItemPageProps> = ({
   };
 
   const linkToSource = () => (
-    <Link clear to={`${Routes.Source}/${connection.source?.sourceId}`}>
-      {connection.source?.name}
+    <Link clear to={`${Routes.Source}/${source.sourceId}`}>
+      {source.name}
     </Link>
   );
 
   const linkToDestination = () => (
-    <Link
-      clear
-      to={`${Routes.Destination}/${connection.destination?.destinationId}`}
-    >
-      {connection.destination?.name}
+    <Link clear to={`${Routes.Destination}/${destination.destinationId}`}>
+      {destination.name}
     </Link>
   );
 
@@ -137,8 +142,8 @@ const ConnectionItemPage: React.FC<ConnectionItemPageProps> = ({
             {
               id: "connection.fromTo",
               values: {
-                source: connection.source?.name,
-                destination: connection.destination?.name,
+                source: source.name,
+                destination: destination.name,
               },
             },
           ]}