Use the new get out of date connectors endpoint (#20155)

* Add /v1/web_backend/check_updates

* Add constant for fallback cases

* Uses the new get out of date connectors endpoint

* Move connector service to its own file. Invalidate count on version change.

* Better upgrade all functionality

* Cleanup

Co-authored-by: Jimmy Ma <jimmy@airbyte.io>

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

@@ -6,6 +6,7 @@ import { ConnectionConfiguration } from "core/domain/connection";
 import { Connector } from "core/domain/connector";
 import { DestinationService } from "core/domain/connector/DestinationService";
 import { SourceService } from "core/domain/connector/SourceService";
+import { useGetOutOfDateConnectorsCount } from "services/connector/ConnectorDefinitions";
 import {
   useDestinationDefinitionList,
   useUpdateDestinationDefinition,
@@ -16,30 +17,12 @@ import { useInitService } from "services/useInitService";
 
 import { CheckConnectionRead } from "../../core/request/AirbyteClient";
 
-interface ConnectorService {
-  hasNewVersions: boolean;
-  hasNewSourceVersion: boolean;
-  hasNewDestinationVersion: boolean;
-  countNewSourceVersion: number;
-  countNewDestinationVersion: number;
-  updateAllSourceVersions: () => Promise<void>;
-  updateAllDestinationVersions: () => Promise<void>;
-}
-
-const useConnector = (): ConnectorService => {
+export const useUpdateSourceDefinitions = () => {
   const { sourceDefinitions } = useSourceDefinitionList();
-  const { destinationDefinitions } = useDestinationDefinitionList();
-
   const { mutateAsync: updateSourceDefinition } = useUpdateSourceDefinition();
-  const { mutateAsync: updateDestinationDefinition } = useUpdateDestinationDefinition();
 
   const newSourceDefinitions = useMemo(() => sourceDefinitions.filter(Connector.hasNewerVersion), [sourceDefinitions]);
 
-  const newDestinationDefinitions = useMemo(
-    () => destinationDefinitions.filter(Connector.hasNewerVersion),
-    [destinationDefinitions]
-  );
-
   const updateAllSourceVersions = async () => {
     await Promise.all(
       newSourceDefinitions?.map((item) =>
@@ -51,6 +34,18 @@ const useConnector = (): ConnectorService => {
     );
   };
 
+  return { updateAllSourceVersions };
+};
+
+export const useUpdateDestinationDefinitions = () => {
+  const { destinationDefinitions } = useDestinationDefinitionList();
+  const { mutateAsync: updateDestinationDefinition } = useUpdateDestinationDefinition();
+
+  const newDestinationDefinitions = useMemo(
+    () => destinationDefinitions.filter(Connector.hasNewerVersion),
+    [destinationDefinitions]
+  );
+
   const updateAllDestinationVersions = async () => {
     await Promise.all(
       newDestinationDefinitions?.map((item) =>
@@ -62,18 +57,23 @@ const useConnector = (): ConnectorService => {
     );
   };
 
-  const hasNewSourceVersion = newSourceDefinitions.length > 0;
-  const hasNewDestinationVersion = newDestinationDefinitions.length > 0;
+  return { updateAllDestinationVersions };
+};
+
+export const useGetConnectorsOutOfDate = () => {
+  const outOfDateConnectors = useGetOutOfDateConnectorsCount();
+
+  const hasNewSourceVersion = outOfDateConnectors.sourceDefinitions > 0;
+  const hasNewDestinationVersion = outOfDateConnectors.destinationDefinitions > 0;
   const hasNewVersions = hasNewSourceVersion || hasNewDestinationVersion;
 
   return {
     hasNewVersions,
     hasNewSourceVersion,
     hasNewDestinationVersion,
-    updateAllSourceVersions,
-    updateAllDestinationVersions,
-    countNewSourceVersion: newSourceDefinitions.length,
-    countNewDestinationVersion: newDestinationDefinitions.length,
+    countNewSourceVersion: outOfDateConnectors.sourceDefinitions,
+    countNewDestinationVersion: outOfDateConnectors.destinationDefinitions,
+    outOfDateConnectors,
   };
 };
 
@@ -151,5 +151,3 @@ export const useCheckConnector = (formType: "source" | "destination") => {
     });
   });
 };
-
-export default useConnector;

airbyte-webapp/src/pages/SettingsPage/SettingsPage.tsx

@@ -8,7 +8,7 @@ import LoadingPage from "components/LoadingPage";
 import { PageHeader } from "components/ui/PageHeader";
 import { SideMenu, CategoryItem, SideMenuItem } from "components/ui/SideMenu";
 
-import useConnector from "hooks/services/useConnector";
+import { useGetConnectorsOutOfDate } from "hooks/services/useConnector";
 
 import AccountPage from "./pages/AccountPage";
 import ConfigurationsPage from "./pages/ConfigurationsPage";
@@ -38,7 +38,7 @@ export const SettingsRoute = {
 const SettingsPage: React.FC<SettingsPageProps> = ({ pageConfig }) => {
   const push = useNavigate();
   const { pathname } = useLocation();
-  const { countNewSourceVersion, countNewDestinationVersion } = useConnector();
+  const { countNewSourceVersion, countNewDestinationVersion } = useGetConnectorsOutOfDate();
 
   const menuItems: CategoryItem[] = pageConfig?.menuConfig || [
     {

airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/DestinationsPage.tsx

@@ -4,7 +4,7 @@ import { useAsyncFn } from "react-use";
 
 import { DestinationDefinitionRead } from "core/request/AirbyteClient";
 import { useTrackPage, PageTrackingCodes } from "hooks/services/Analytics";
-import useConnector from "hooks/services/useConnector";
+import { useGetConnectorsOutOfDate, useUpdateDestinationDefinitions } from "hooks/services/useConnector";
 import {
   useDestinationDefinitionList,
   useUpdateDestinationDefinition,
@@ -25,7 +25,7 @@ const DestinationsPage: React.FC = () => {
 
   const { mutateAsync: updateDestinationDefinition } = useUpdateDestinationDefinition();
 
-  const { hasNewDestinationVersion } = useConnector();
+  const { hasNewDestinationVersion } = useGetConnectorsOutOfDate();
 
   const onUpdateVersion = useCallback(
     async ({ id, version }: { id: string; version: string }) => {
@@ -61,7 +61,7 @@ const DestinationsPage: React.FC = () => {
     return Array.from(destinationDefinitionMap.values());
   }, [destinations, destinationDefinitions]);
 
-  const { updateAllDestinationVersions } = useConnector();
+  const { updateAllDestinationVersions } = useUpdateDestinationDefinitions();
 
   const [{ loading, error }, onUpdate] = useAsyncFn(async () => {
     setIsUpdateSuccess(false);

airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/SourcesPage.tsx

@@ -4,7 +4,7 @@ import { useAsyncFn } from "react-use";
 
 import { SourceDefinitionRead } from "core/request/AirbyteClient";
 import { useTrackPage, PageTrackingCodes } from "hooks/services/Analytics";
-import useConnector from "hooks/services/useConnector";
+import { useGetConnectorsOutOfDate, useUpdateSourceDefinitions } from "hooks/services/useConnector";
 import { useSourceList } from "hooks/services/useSourceHook";
 import { useSourceDefinitionList, useUpdateSourceDefinition } from "services/connector/SourceDefinitionService";
 
@@ -13,7 +13,7 @@ import ConnectorsView from "./components/ConnectorsView";
 const SourcesPage: React.FC = () => {
   useTrackPage(PageTrackingCodes.SETTINGS_SOURCE);
 
-  const [isUpdateSuccess, setIsUpdateSucces] = useState(false);
+  const [isUpdateSuccess, setIsUpdateSuccess] = useState(false);
   const [feedbackList, setFeedbackList] = useState<Record<string, string>>({});
 
   const { formatMessage } = useIntl();
@@ -22,7 +22,8 @@ const SourcesPage: React.FC = () => {
 
   const { mutateAsync: updateSourceDefinition } = useUpdateSourceDefinition();
 
-  const { hasNewSourceVersion, updateAllSourceVersions } = useConnector();
+  const { hasNewSourceVersion } = useGetConnectorsOutOfDate();
+  const { updateAllSourceVersions } = useUpdateSourceDefinitions();
 
   const onUpdateVersion = useCallback(
     async ({ id, version }: { id: string; version: string }) => {
@@ -59,11 +60,11 @@ const SourcesPage: React.FC = () => {
   }, [sources, sourceDefinitions]);
 
   const [{ loading, error }, onUpdate] = useAsyncFn(async () => {
-    setIsUpdateSucces(false);
+    setIsUpdateSuccess(false);
     await updateAllSourceVersions();
-    setIsUpdateSucces(true);
+    setIsUpdateSuccess(true);
     setTimeout(() => {
-      setIsUpdateSucces(false);
+      setIsUpdateSuccess(false);
     }, 2000);
   }, [updateAllSourceVersions]);
 

airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ConnectorsView.tsx

@@ -112,13 +112,14 @@ const ConnectorsView: React.FC<ConnectorsViewProps> = ({
                     onChange={onUpdateVersion}
                     feedback={feedbackList[Connector.id(row.original)]}
                     currentVersion={row.original.dockerImageTag}
+                    updating={loading}
                   />
                 ) : null,
             },
           ]
         : []),
     ],
-    [feedbackList, onUpdateVersion, allowUpdateConnectors, allowUploadCustomImage]
+    [allowUpdateConnectors, allowUploadCustomImage, onUpdateVersion, feedbackList, loading]
   );
 
   const renderHeaderControls = (section: "used" | "available") =>

airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/VersionCell.tsx

@@ -10,12 +10,13 @@ import { DEV_IMAGE_TAG } from "core/domain/connector/constants";
 
 import { FormContent } from "./PageComponents";
 
-interface IProps {
+interface VersionCellProps {
   version: string;
   currentVersion: string;
   id: string;
   onChange: ({ version, id }: { version: string; id: string }) => void;
   feedback?: "success" | string;
+  updating: boolean;
 }
 
 const VersionInput = styled(Input)`
@@ -64,7 +65,7 @@ const ErrorMessage = styled(SuccessMessage)`
   line-height: 14px;
 `;
 
-const VersionCell: React.FC<IProps> = ({ id, version, onChange, feedback, currentVersion }) => {
+const VersionCell: React.FC<VersionCellProps> = ({ id, version, onChange, feedback, currentVersion, updating }) => {
   const { formatMessage } = useIntl();
 
   const renderFeedback = (dirty: boolean, feedback?: string) => {
@@ -109,7 +110,7 @@ const VersionCell: React.FC<IProps> = ({ id, version, onChange, feedback, curren
             </Field>
             <Button
               size="xs"
-              isLoading={isSubmitting}
+              isLoading={isSubmitting || updating}
               type="submit"
               disabled={(isSubmitting || !dirty) && !isConnectorUpdatable}
             >

airbyte-webapp/src/services/connector/ConnectorDefinitions.ts

@@ -2,6 +2,7 @@ import { DestinationDefinitionRead, SourceDefinitionRead } from "core/request/Ai
 import { SCOPE_WORKSPACE } from "services/Scope";
 import { useCurrentWorkspaceId } from "services/workspaces/WorkspacesService";
 
+import { useConnectorService } from "./ConnectorService";
 import { useGetDestinationDefinitionService } from "./DestinationDefinitionService";
 import { useGetSourceDefinitionService } from "./SourceDefinitionService";
 import { useSuspenseQuery } from "./useSuspenseQuery";
@@ -14,6 +15,7 @@ interface ConnectorSpecifications {
 export const connectorDefinitionKeys = {
   all: [SCOPE_WORKSPACE, "connectorDefinition"] as const,
   lists: () => [...connectorDefinitionKeys.all, "list"] as const,
+  count: () => [...connectorDefinitionKeys.all, "count"] as const,
 };
 
 /**
@@ -36,3 +38,8 @@ export const useConnectorSpecifications = (): ConnectorSpecifications => {
     return { sourceDefinitions, destinationDefinitions };
   });
 };
+
+export const useGetOutOfDateConnectorsCount = () => {
+  const service = useConnectorService();
+  return useSuspenseQuery(connectorDefinitionKeys.count(), () => service.checkUpdates());
+};

airbyte-webapp/src/services/connector/ConnectorService.ts

@@ -0,0 +1,19 @@
+import { useConfig } from "config";
+import { webBackendCheckUpdates } from "core/request/AirbyteClient";
+import { AirbyteRequestService } from "core/request/AirbyteRequestService";
+import { useDefaultRequestMiddlewares } from "services/useDefaultRequestMiddlewares";
+import { useInitService } from "services/useInitService";
+
+class ConnectorService extends AirbyteRequestService {
+  checkUpdates() {
+    return webBackendCheckUpdates(this.requestOptions);
+  }
+}
+
+export function useConnectorService() {
+  const { apiUrl } = useConfig();
+
+  const requestAuthMiddleware = useDefaultRequestMiddlewares();
+
+  return useInitService(() => new ConnectorService(apiUrl, requestAuthMiddleware), [apiUrl, requestAuthMiddleware]);
+}

airbyte-webapp/src/services/connector/DestinationDefinitionService.ts

@@ -9,6 +9,7 @@ import { isDefined } from "utils/common";
 
 import { DestinationDefinitionCreate, DestinationDefinitionRead } from "../../core/request/AirbyteClient";
 import { SCOPE_WORKSPACE } from "../Scope";
+import { connectorDefinitionKeys } from "./ConnectorDefinitions";
 import { useSuspenseQuery } from "./useSuspenseQuery";
 
 export const destinationDefinitionKeys = {
@@ -117,6 +118,8 @@ const useUpdateDestinationDefinition = () => {
             ) ?? [],
         })
       );
+
+      queryClient.invalidateQueries(connectorDefinitionKeys.count());
     },
   });
 };

airbyte-webapp/src/services/connector/SourceDefinitionService.ts

@@ -9,6 +9,7 @@ import { isDefined } from "utils/common";
 
 import { SourceDefinitionCreate, SourceDefinitionRead } from "../../core/request/AirbyteClient";
 import { SCOPE_WORKSPACE } from "../Scope";
+import { connectorDefinitionKeys } from "./ConnectorDefinitions";
 import { useSuspenseQuery } from "./useSuspenseQuery";
 
 export const sourceDefinitionKeys = {
@@ -114,6 +115,8 @@ const useUpdateSourceDefinition = () => {
             [],
         })
       );
+
+      queryClient.invalidateQueries(connectorDefinitionKeys.count());
     },
   });
 };