Uses the new get out of date connectors endpoint

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

@@ -1,11 +1,12 @@
 import { useMemo } from "react";
-import { useMutation } from "react-query";
+import { useMutation, useQueryClient } from "react-query";
 
 import { useConfig } from "config";
 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 { connectorDefinitionKeys, useGetOutOfDateConnectorsCount } from "services/connector/ConnectorDefinitions";
 import {
   useDestinationDefinitionList,
   useUpdateDestinationDefinition,
@@ -16,30 +17,13 @@ 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 queryClient = useQueryClient();
   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) =>
@@ -49,8 +33,22 @@ const useConnector = (): ConnectorService => {
         })
       )
     );
+    await queryClient.refetchQueries(connectorDefinitionKeys.count);
   };
 
+  return { updateAllSourceVersions };
+};
+
+export const useUpdateDestinationDefinitions = () => {
+  const queryClient = useQueryClient();
+  const { destinationDefinitions } = useDestinationDefinitionList();
+  const { mutateAsync: updateDestinationDefinition } = useUpdateDestinationDefinition();
+
+  const newDestinationDefinitions = useMemo(
+    () => destinationDefinitions.filter(Connector.hasNewerVersion),
+    [destinationDefinitions]
+  );
+
   const updateAllDestinationVersions = async () => {
     await Promise.all(
       newDestinationDefinitions?.map((item) =>
@@ -60,20 +58,26 @@ const useConnector = (): ConnectorService => {
         })
       )
     );
+    await queryClient.refetchQueries(connectorDefinitionKeys.count);
   };
 
-  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 +155,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/services/connector/ConnectorDefinitions.ts

@@ -1,5 +1,9 @@
-import { DestinationDefinitionRead, SourceDefinitionRead } from "core/request/AirbyteClient";
+import { useConfig } from "config";
+import { DestinationDefinitionRead, SourceDefinitionRead, webBackendCheckUpdates } from "core/request/AirbyteClient";
+import { AirbyteRequestService } from "core/request/AirbyteRequestService";
 import { SCOPE_WORKSPACE } from "services/Scope";
+import { useDefaultRequestMiddlewares } from "services/useDefaultRequestMiddlewares";
+import { useInitService } from "services/useInitService";
 import { useCurrentWorkspaceId } from "services/workspaces/WorkspacesService";
 
 import { useGetDestinationDefinitionService } from "./DestinationDefinitionService";
@@ -14,6 +18,7 @@ interface ConnectorSpecifications {
 export const connectorDefinitionKeys = {
   all: [SCOPE_WORKSPACE, "connectorDefinition"] as const,
   lists: () => [...connectorDefinitionKeys.all, "list"] as const,
+  count: ["latestConnectorDefinitions"],
 };
 
 /**
@@ -36,3 +41,22 @@ export const useConnectorSpecifications = (): ConnectorSpecifications => {
     return { sourceDefinitions, destinationDefinitions };
   });
 };
+
+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]);
+}
+
+export const useGetOutOfDateConnectorsCount = () => {
+  const service = useConnectorService();
+  return useSuspenseQuery(connectorDefinitionKeys.count, () => service.checkUpdates());
+};

airbyte-webapp/src/views/layout/SideBar/NotificationIndicator.tsx

@@ -3,7 +3,7 @@ import styled from "styled-components";
 
 import Indicator from "components/Indicator";
 
-import useConnector from "hooks/services/useConnector";
+import { useGetConnectorsOutOfDate } from "hooks/services/useConnector";
 
 const Notification = styled(Indicator)`
   position: absolute;
@@ -12,7 +12,8 @@ const Notification = styled(Indicator)`
 `;
 
 export const NotificationIndicator: React.FC = () => {
-  const { hasNewVersions } = useConnector();
+  const { hasNewVersions, outOfDateConnectors } = useGetConnectorsOutOfDate();
+  console.log(outOfDateConnectors);
 
   return hasNewVersions ? <Notification /> : null;
 };