🪟 🔧 Don't request destination/source definition in `<ConnectionInfoCa…

…rd />` directly, use `useConnectionFormService()` instead (#21869)

* don't request destination definition in ConnectionInfoCard directly, use useConnectionFormService instead

* add source mock: SourceDefinition and SourceDefinitionSpecification

* update and fix tests

* fix pr comment: use reference the source and destination icons off of the top-level source and destination objects instead of the definitions

airbyte-webapp/src/components/connection/ConnectionInfoCard/ConnectionInfoCard.test.tsx

@@ -1,6 +1,6 @@
 import { render } from "@testing-library/react";
-import { mockDestinationDefinitionSpecification } from "test-utils/mock-data/mockDestinationDefinitionSpecification";
-import { mockSourceDefinition } from "test-utils/mock-data/mockSourceDefinition";
+import { mockDestinationDefinition } from "test-utils/mock-data/mockDestination";
+import { mockSourceDefinition } from "test-utils/mock-data/mockSource";
 import { mockConnection, TestWrapper } from "test-utils/testutils";
 
 import { ConnectionStatus, SchemaChange } from "core/request/AirbyteClient";
@@ -15,12 +15,11 @@ jest.doMock("hooks/services/ConnectionEdit/ConnectionEditService", () => ({
   useConnectionEditService: mockUseConnectionEditService,
 }));
 
-jest.doMock("services/connector/SourceDefinitionService", () => ({
-  useSourceDefinition: () => mockSourceDefinition,
-}));
-
-jest.doMock("services/connector/DestinationDefinitionService", () => ({
-  useDestinationDefinition: () => mockDestinationDefinitionSpecification,
+jest.doMock("hooks/services/ConnectionForm/ConnectionFormService.tsx", () => ({
+  useConnectionFormService: () => ({
+    sourceDefinition: mockSourceDefinition,
+    destDefinition: mockDestinationDefinition,
+  }),
 }));
 
 jest.doMock("components/connection/ConnectionForm/refreshSourceSchemaWithConfirmationOnDirty", () => ({

airbyte-webapp/src/components/connection/ConnectionInfoCard/ConnectionInfoCard.tsx

@@ -9,10 +9,9 @@ import { ConnectorCard } from "components";
 import { ConnectionStatus } from "core/request/AirbyteClient";
 import { useSchemaChanges } from "hooks/connection/useSchemaChanges";
 import { useConnectionEditService } from "hooks/services/ConnectionEdit/ConnectionEditService";
+import { useConnectionFormService } from "hooks/services/ConnectionForm/ConnectionFormService";
 import { FeatureItem, useFeature } from "hooks/services/Feature";
 import { RoutePaths } from "pages/routePaths";
-import { useDestinationDefinition } from "services/connector/DestinationDefinitionService";
-import { useSourceDefinition } from "services/connector/SourceDefinitionService";
 
 import styles from "./ConnectionInfoCard.module.scss";
 import { EnabledControl } from "./EnabledControl";
@@ -24,8 +23,7 @@ export const ConnectionInfoCard: React.FC = () => {
     schemaHasBeenRefreshed,
   } = useConnectionEditService();
   const { hasSchemaChanges, hasBreakingSchemaChange, hasNonBreakingSchemaChange } = useSchemaChanges(schemaChange);
-  const sourceDefinition = useSourceDefinition(source.sourceDefinitionId);
-  const destinationDefinition = useDestinationDefinition(destination.destinationDefinitionId);
+  const { sourceDefinition, destDefinition } = useConnectionFormService();
 
   const hasAllowSyncFeature = useFeature(FeatureItem.AllowSync);
 
@@ -52,7 +50,7 @@ export const ConnectionInfoCard: React.FC = () => {
         >
           <ConnectorCard
             connectionName={source.sourceName}
-            icon={sourceDefinition?.icon}
+            icon={source?.icon}
             connectorName={source.name}
             releaseStage={sourceDefinition?.releaseStage}
           />
@@ -65,9 +63,9 @@ export const ConnectionInfoCard: React.FC = () => {
         >
           <ConnectorCard
             connectionName={destination.destinationName}
-            icon={destinationDefinition?.icon}
+            icon={destination?.icon}
             connectorName={destination.name}
-            releaseStage={destinationDefinition?.releaseStage}
+            releaseStage={destDefinition?.releaseStage}
           />
         </Link>
       </div>

airbyte-webapp/src/components/connection/CreateConnectionForm/CreateConnectionForm.test.tsx

@@ -8,13 +8,22 @@ import {
   mockDestinationDefinition,
   mockDestinationDefinitionSpecification,
 } from "test-utils/mock-data/mockDestination";
+import { mockSourceDefinition, mockSourceDefinitionSpecification } from "test-utils/mock-data/mockSource";
 import { TestWrapper } from "test-utils/testutils";
 
 import { defaultOssFeatures, FeatureItem } from "hooks/services/Feature";
 import * as sourceHook from "hooks/services/useSourceHook";
 
 import { CreateConnectionForm } from "./CreateConnectionForm";
 
+jest.mock("services/connector/SourceDefinitionService", () => ({
+  useSourceDefinition: () => mockSourceDefinition,
+}));
+
+jest.mock("services/connector/SourceDefinitionSpecificationService", () => ({
+  useGetSourceDefinitionSpecification: () => mockSourceDefinitionSpecification,
+}));
+
 jest.mock("services/connector/DestinationDefinitionSpecificationService", () => ({
   useGetDestinationDefinitionSpecification: () => mockDestinationDefinitionSpecification,
 }));

airbyte-webapp/src/hooks/services/ConnectionEdit/ConnectionEditService.test.tsx

@@ -6,6 +6,7 @@ import {
   mockDestinationDefinition,
   mockDestinationDefinitionSpecification,
 } from "test-utils/mock-data/mockDestination";
+import { mockSourceDefinition, mockSourceDefinitionSpecification } from "test-utils/mock-data/mockSource";
 import { mockWorkspace } from "test-utils/mock-data/mockWorkspace";
 import { TestWrapper } from "test-utils/testutils";
 
@@ -14,6 +15,14 @@ import { WebBackendConnectionRead, WebBackendConnectionUpdate } from "core/reque
 import { ConnectionEditServiceProvider, useConnectionEditService } from "./ConnectionEditService";
 import { useConnectionFormService } from "../ConnectionForm/ConnectionFormService";
 
+jest.mock("services/connector/SourceDefinitionService", () => ({
+  useSourceDefinition: () => mockSourceDefinition,
+}));
+
+jest.mock("services/connector/SourceDefinitionSpecificationService", () => ({
+  useGetSourceDefinitionSpecification: () => mockSourceDefinitionSpecification,
+}));
+
 jest.mock("services/connector/DestinationDefinitionSpecificationService", () => ({
   useGetDestinationDefinitionSpecification: () => mockDestinationDefinitionSpecification,
 }));

airbyte-webapp/src/hooks/services/ConnectionForm/ConnectionFormService.test.tsx

@@ -5,6 +5,7 @@ import {
   mockDestinationDefinition,
   mockDestinationDefinitionSpecification,
 } from "test-utils/mock-data/mockDestination";
+import { mockSourceDefinition, mockSourceDefinitionSpecification } from "test-utils/mock-data/mockSource";
 import { mockWorkspace } from "test-utils/mock-data/mockWorkspace";
 import { TestWrapper } from "test-utils/testutils";
 
@@ -16,6 +17,14 @@ import {
   useConnectionFormService,
 } from "./ConnectionFormService";
 
+jest.mock("services/connector/SourceDefinitionService", () => ({
+  useSourceDefinition: () => mockSourceDefinition,
+}));
+
+jest.mock("services/connector/SourceDefinitionSpecificationService", () => ({
+  useGetSourceDefinitionSpecification: () => mockSourceDefinitionSpecification,
+}));
+
 jest.mock("services/connector/DestinationDefinitionSpecificationService", () => ({
   useGetDestinationDefinitionSpecification: () => mockDestinationDefinitionSpecification,
 }));

airbyte-webapp/src/hooks/services/ConnectionForm/ConnectionFormService.tsx

@@ -14,11 +14,15 @@ import {
   DestinationDefinitionRead,
   DestinationDefinitionSpecificationRead,
   OperationRead,
+  SourceDefinitionRead,
+  SourceDefinitionSpecificationRead,
   WebBackendConnectionRead,
 } from "core/request/AirbyteClient";
 import { useNewTableDesignExperiment } from "hooks/connection/useNewTableDesignExperiment";
 import { useDestinationDefinition } from "services/connector/DestinationDefinitionService";
 import { useGetDestinationDefinitionSpecification } from "services/connector/DestinationDefinitionSpecificationService";
+import { useSourceDefinition } from "services/connector/SourceDefinitionService";
+import { useGetSourceDefinitionSpecification } from "services/connector/SourceDefinitionSpecificationService";
 import { FormError, generateMessageFromError } from "utils/errorStatusMessage";
 
 import { useUniqueFormId } from "../FormChangeTracker";
@@ -61,6 +65,8 @@ export const tidyConnectionFormValues = (
 interface ConnectionFormHook {
   connection: ConnectionOrPartialConnection;
   mode: ConnectionFormMode;
+  sourceDefinition: SourceDefinitionRead;
+  sourceDefinitionSpecification: SourceDefinitionSpecificationRead;
   destDefinition: DestinationDefinitionRead;
   destDefinitionSpecification: DestinationDefinitionSpecificationRead;
   initialValues: FormikConnectionFormValues;
@@ -77,10 +83,16 @@ const useConnectionForm = ({
   schemaError,
   refreshSchema,
 }: ConnectionServiceProps): ConnectionFormHook => {
-  const destDefinition = useDestinationDefinition(connection.destination.destinationDefinitionId);
-  const destDefinitionSpecification = useGetDestinationDefinitionSpecification(
-    connection.destination.destinationDefinitionId
-  );
+  const {
+    source: { sourceDefinitionId },
+    destination: { destinationDefinitionId },
+  } = connection;
+
+  const sourceDefinition = useSourceDefinition(sourceDefinitionId);
+  const sourceDefinitionSpecification = useGetSourceDefinitionSpecification(sourceDefinitionId);
+  const destDefinition = useDestinationDefinition(destinationDefinitionId);
+  const destDefinitionSpecification = useGetDestinationDefinitionSpecification(destinationDefinitionId);
+
   const initialValues = useInitialValues(connection, destDefinition, destDefinitionSpecification, mode !== "create");
   const { formatMessage } = useIntl();
   const [submitError, setSubmitError] = useState<FormError | null>(null);
@@ -109,6 +121,8 @@ const useConnectionForm = ({
   return {
     connection,
     mode,
+    sourceDefinition,
+    sourceDefinitionSpecification,
     destDefinition,
     destDefinitionSpecification,
     initialValues,

airbyte-webapp/src/pages/connections/ConnectionReplicationPage/ConnectionReplicationPage.test.tsx

@@ -10,6 +10,7 @@ import {
   mockDestinationDefinition,
   mockDestinationDefinitionSpecification,
 } from "test-utils/mock-data/mockDestination";
+import { mockSourceDefinition, mockSourceDefinitionSpecification } from "test-utils/mock-data/mockSource";
 import { mockWorkspace } from "test-utils/mock-data/mockWorkspace";
 import { mockWorkspaceId } from "test-utils/mock-data/mockWorkspaceId";
 import { TestWrapper } from "test-utils/testutils";
@@ -21,6 +22,14 @@ import * as connectionHook from "hooks/services/useConnectionHook";
 
 import { ConnectionReplicationPage } from "./ConnectionReplicationPage";
 
+jest.mock("services/connector/SourceDefinitionService", () => ({
+  useSourceDefinition: () => mockSourceDefinition,
+}));
+
+jest.mock("services/connector/SourceDefinitionSpecificationService", () => ({
+  useGetSourceDefinitionSpecification: () => mockSourceDefinitionSpecification,
+}));
+
 jest.mock("services/connector/DestinationDefinitionSpecificationService", () => ({
   useGetDestinationDefinitionSpecification: () => mockDestinationDefinitionSpecification,
 }));