Do not update deprecated connectors (#4674)

* Do not update deprecated connectors

* Fix various connectorDefinition issues: disappearing button, wrong id used for destination update

airbyte-webapp/package.json

@@ -48,8 +48,10 @@
     "yup": "^0.32.9"
   },
   "devDependencies": {
+    "@rest-hooks/test": "^6.2.0",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
+    "@testing-library/react-hooks": "^7.0.1",
     "@testing-library/user-event": "^12.1.10",
     "@types/flat": "^5.0.1",
     "@types/jest": "^24.0.0",

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

@@ -1,6 +1,13 @@
-import React, { memo } from "react";
+import React, { memo, useMemo } from "react";
 import styled from "styled-components";
-import { ColumnInstance, useTable, Column, Cell } from "react-table";
+import {
+  Cell,
+  Column,
+  ColumnInstance,
+  SortingRule,
+  useSortBy,
+  useTable,
+} from "react-table";
 
 type IHeaderProps = {
   headerHighlighted?: boolean;
@@ -81,24 +88,41 @@ type IProps = {
   data: any[];
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   onClickRow?: (data: any) => void;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  sortBy?: Array<SortingRule<any>>;
 };
 
 const Table: React.FC<IProps> = ({
   columns,
   data,
   onClickRow,
   erroredRows,
+  sortBy,
 }) => {
+  const [plugins, config] = useMemo(() => {
+    const pl = [];
+    const plConfig: Record<string, unknown> = {};
+
+    if (sortBy) {
+      pl.push(useSortBy);
+      plConfig.initialState = { sortBy };
+    }
+    return [pl, plConfig];
+  }, [sortBy]);
   const {
     getTableProps,
     getTableBodyProps,
     headerGroups,
     rows,
     prepareRow,
-  } = useTable({
-    columns,
-    data,
-  });
+  } = useTable(
+    {
+      ...config,
+      columns,
+      data,
+    },
+    ...plugins
+  );
 
   return (
     <TableView {...getTableProps()}>

airbyte-webapp/src/components/hooks/services/useConnector.test.tsx

@@ -0,0 +1,92 @@
+import { makeCacheProvider, makeRenderRestHook } from "@rest-hooks/test";
+import { act } from "@testing-library/react-hooks";
+
+import { sourceDefinitionService } from "core/domain/connector/SourceDefinitionService";
+import { destinationDefinitionService } from "core/domain/connector/DestinationDefinitionService";
+
+import useConnector from "./useConnector";
+import SourceDefinitionResource from "core/resources/SourceDefinition";
+import DestinationDefinitionResource from "core/resources/DestinationDefinition";
+
+jest.mock("core/domain/connector/SourceDefinitionService");
+jest.mock("core/domain/connector/DestinationDefinitionService");
+
+const renderRestHook = makeRenderRestHook(makeCacheProvider);
+const results = [
+  {
+    request: SourceDefinitionResource.listShape(),
+    params: { workspaceId: "5ae6b09b-fdec-41af-aaf7-7d94cfc33ef6" },
+    result: {
+      sourceDefinitions: [
+        {
+          sourceDefinitionId: "sid1",
+          latestDockerImageTag: "0.0.2",
+          dockerImageTag: "0.0.1",
+        },
+        {
+          sourceDefinitionId: "sid2",
+          latestDockerImageTag: "",
+          dockerImageTag: "0.0.1",
+        },
+      ],
+    },
+  },
+  {
+    request: DestinationDefinitionResource.listShape(),
+    params: { workspaceId: "5ae6b09b-fdec-41af-aaf7-7d94cfc33ef6" },
+    result: {
+      destinationDefinitions: [
+        {
+          destinationDefinitionId: "did1",
+          latestDockerImageTag: "0.0.2",
+          dockerImageTag: "0.0.1",
+        },
+        {
+          destinationDefinitionId: "did2",
+          latestDockerImageTag: "",
+          dockerImageTag: "0.0.1",
+        },
+      ],
+    },
+  },
+];
+
+test("should not call sourceDefinition.updateVersion for deprecated call", async () => {
+  const { result, waitForNextUpdate } = renderRestHook(() => useConnector(), {
+    results,
+  });
+
+  (sourceDefinitionService.update as jest.Mock).mockResolvedValue([]);
+
+  act(() => {
+    result.current.updateAllSourceVersions();
+  });
+
+  await waitForNextUpdate();
+
+  expect(sourceDefinitionService.update).toHaveBeenCalledTimes(1);
+  expect(sourceDefinitionService.update).toHaveBeenCalledWith({
+    dockerImageTag: "0.0.2",
+    sourceDefinitionId: "sid1",
+  });
+});
+
+test("should not call destinationDefinition.updateVersion for deprecated call", async () => {
+  const { result, waitForNextUpdate } = renderRestHook(() => useConnector(), {
+    results,
+  });
+
+  (destinationDefinitionService.update as jest.Mock).mockResolvedValue([]);
+
+  act(() => {
+    result.current.updateAllDestinationVersions();
+  });
+
+  await waitForNextUpdate();
+
+  expect(destinationDefinitionService.update).toHaveBeenCalledTimes(1);
+  expect(destinationDefinitionService.update).toHaveBeenCalledWith({
+    dockerImageTag: "0.0.2",
+    destinationDefinitionId: "did1",
+  });
+});

airbyte-webapp/src/components/hooks/services/useConnector.tsx

@@ -2,8 +2,9 @@ import { useFetcher, useResource } from "rest-hooks";
 import config from "config";
 import { useMemo } from "react";
 
-import SourceDefinitionResource from "../../../core/resources/SourceDefinition";
-import DestinationDefinitionResource from "../../../core/resources/DestinationDefinition";
+import SourceDefinitionResource from "core/resources/SourceDefinition";
+import DestinationDefinitionResource from "core/resources/DestinationDefinition";
+import { Connector } from "core/domain/connector";
 
 type ConnectorService = {
   hasNewVersions: boolean;
@@ -37,52 +38,19 @@ const useConnector = (): ConnectorService => {
     DestinationDefinitionResource.updateShape()
   );
 
-  const hasNewSourceVersion = useMemo(
-    () =>
-      sourceDefinitions.some(
-        (source) => source.latestDockerImageTag !== source.dockerImageTag
-      ),
+  const newSourceDefinitions = useMemo(
+    () => sourceDefinitions.filter(Connector.hasNewerVersion),
     [sourceDefinitions]
   );
 
-  const hasNewDestinationVersion = useMemo(
-    () =>
-      destinationDefinitions.some(
-        (destination) =>
-          destination.latestDockerImageTag !== destination.dockerImageTag
-      ),
-    [destinationDefinitions]
-  );
-
-  const hasNewVersions = useMemo(
-    () => hasNewSourceVersion || hasNewDestinationVersion,
-    [hasNewSourceVersion, hasNewDestinationVersion]
-  );
-
-  const countNewSourceVersion = useMemo(
-    () =>
-      sourceDefinitions.filter(
-        (source) => source.latestDockerImageTag !== source.dockerImageTag
-      ).length,
-    [sourceDefinitions]
-  );
-
-  const countNewDestinationVersion = useMemo(
-    () =>
-      destinationDefinitions.filter(
-        (destination) =>
-          destination.latestDockerImageTag !== destination.dockerImageTag
-      ).length,
+  const newDestinationDefinitions = useMemo(
+    () => destinationDefinitions.filter(Connector.hasNewerVersion),
     [destinationDefinitions]
   );
 
   const updateAllSourceVersions = async () => {
-    const updateList = sourceDefinitions.filter(
-      (source) => source.latestDockerImageTag !== source.dockerImageTag
-    );
-
     await Promise.all(
-      updateList?.map((item) =>
+      newSourceDefinitions?.map((item) =>
         updateSourceDefinition(
           {},
           {
@@ -95,13 +63,8 @@ const useConnector = (): ConnectorService => {
   };
 
   const updateAllDestinationVersions = async () => {
-    const updateList = destinationDefinitions.filter(
-      (destination) =>
-        destination.latestDockerImageTag !== destination.dockerImageTag
-    );
-
     await Promise.all(
-      updateList?.map((item) =>
+      newDestinationDefinitions?.map((item) =>
         updateDestinationDefinition(
           {},
           {
@@ -113,14 +76,18 @@ const useConnector = (): ConnectorService => {
     );
   };
 
+  const hasNewSourceVersion = newSourceDefinitions.length > 0;
+  const hasNewDestinationVersion = newDestinationDefinitions.length > 0;
+  const hasNewVersions = hasNewSourceVersion || hasNewDestinationVersion;
+
   return {
     hasNewVersions,
     hasNewSourceVersion,
     hasNewDestinationVersion,
     updateAllSourceVersions,
     updateAllDestinationVersions,
-    countNewSourceVersion,
-    countNewDestinationVersion,
+    countNewSourceVersion: newSourceDefinitions.length,
+    countNewDestinationVersion: newDestinationDefinitions.length,
   };
 };
 

airbyte-webapp/src/components/index.tsx

@@ -4,6 +4,7 @@ export * from "./Spinner";
 export * from "./StatusIcon";
 export * from "./Label";
 export * from "./LabeledControl";
+export * from "./LabeledInput";
 export * from "./LabeledToggle";
 export * from "./Link";
 export * from "./TextWithHTML";

airbyte-webapp/src/core/domain/connector/DestinationDefinitionService.ts

@@ -0,0 +1,14 @@
+import { AirbyteRequestService } from "core/request/AirbyteRequestService";
+import { DestinationDefinition } from "core/resources/DestinationDefinition";
+
+class DestinationDefinitionService extends AirbyteRequestService {
+  get url() {
+    return "destination_definitions";
+  }
+
+  public update(body: DestinationDefinition): Promise<DestinationDefinition> {
+    return this.fetch(`${this.url}/update`, body) as any;
+  }
+}
+
+export const destinationDefinitionService = new DestinationDefinitionService();

airbyte-webapp/src/core/domain/connector/SourceDefinitionService.ts

@@ -0,0 +1,14 @@
+import { AirbyteRequestService } from "core/request/AirbyteRequestService";
+import { SourceDefinition } from "core/resources/SourceDefinition";
+
+class SourceDefinitionService extends AirbyteRequestService {
+  get url() {
+    return "source_definitions";
+  }
+
+  public update(body: SourceDefinition): Promise<SourceDefinition> {
+    return this.fetch(`${this.url}/update`, body) as any;
+  }
+}
+
+export const sourceDefinitionService = new SourceDefinitionService();