Remove rest-hooks for specifications load (#10764)

Author: jamakase

airbyte-webapp/package-lock.json

@@ -21,7 +21,6 @@
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "@fortawesome/react-fontawesome": "^0.1.17",
     "@fullstory/browser": "^1.5.0",
-    "@rest-hooks/legacy": "^2.0.5",
     "@sentry/react": "^6.17.9",
     "@sentry/tracing": "^6.17.9",
     "dayjs": "^1.10.7",

airbyte-webapp/package.json

@@ -0,0 +1,18 @@
+import { AirbyteRequestService } from "core/request/AirbyteRequestService";
+import { DestinationDefinitionSpecification } from "./types";
+
+class DestinationDefinitionSpecificationService extends AirbyteRequestService {
+  get url(): string {
+    return "destination_definition_specifications";
+  }
+
+  public get(
+    destinationDefinitionId: string
+  ): Promise<DestinationDefinitionSpecification> {
+    return this.fetch<DestinationDefinitionSpecification>(`${this.url}/get`, {
+      destinationDefinitionId,
+    });
+  }
+}
+
+export { DestinationDefinitionSpecificationService };

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

@@ -0,0 +1,18 @@
+import { AirbyteRequestService } from "core/request/AirbyteRequestService";
+import { SourceDefinitionSpecification } from "./types";
+
+class SourceDefinitionSpecificationService extends AirbyteRequestService {
+  get url(): string {
+    return "source_definition_specifications";
+  }
+
+  public get(
+    sourceDefinitionId: string
+  ): Promise<SourceDefinitionSpecification> {
+    return this.fetch<SourceDefinitionSpecification>(`${this.url}/get`, {
+      sourceDefinitionId,
+    });
+  }
+}
+
+export { SourceDefinitionSpecificationService };

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

@@ -3,7 +3,7 @@ import { ReadShape, Resource, SchemaDetail } from "rest-hooks";
 import BaseResource from "./BaseResource";
 import { SourceDiscoverSchemaRead, SyncSchema } from "core/domain/catalog";
 import { toInnerModel } from "core/domain/catalog/fieldUtil";
-import { JobInfo } from "core/domain/job/Job";
+import { JobInfo } from "core/domain/job";
 
 export interface Schema extends SourceDiscoverSchemaRead {
   id: string;

airbyte-webapp/src/core/resources/DestinationDefinitionSpecification.ts

@@ -1,20 +1,15 @@
 import { useCallback } from "react";
 import { useFetcher, useResource } from "rest-hooks";
-import { useStatefulResource } from "@rest-hooks/legacy";
 
 import DestinationResource from "core/resources/Destination";
 import ConnectionResource, { Connection } from "core/resources/Connection";
 import { RoutePaths } from "pages/routes";
 import useRouter from "../useRouter";
-import DestinationDefinitionSpecificationResource from "core/resources/DestinationDefinitionSpecification";
 import SchedulerResource, { Scheduler } from "core/resources/Scheduler";
 import { ConnectionConfiguration } from "core/domain/connection";
 import useWorkspace from "./useWorkspace";
 import { useAnalyticsService } from "hooks/services/Analytics/useAnalyticsService";
-import {
-  Destination,
-  DestinationDefinitionSpecification,
-} from "core/domain/connector";
+import { Destination } from "core/domain/connector";
 
 type ValuesProps = {
   name: string;
@@ -24,46 +19,6 @@ type ValuesProps = {
 
 type ConnectorProps = { name: string; destinationDefinitionId: string };
 
-export const useDestinationDefinitionSpecificationLoad = (
-  destinationDefinitionId: string | null
-): {
-  isLoading: boolean;
-  destinationDefinitionSpecification?: DestinationDefinitionSpecification;
-  sourceDefinitionError?: Error;
-} => {
-  const {
-    loading: isLoading,
-    error,
-    data: destinationDefinitionSpecification,
-  } = useStatefulResource(
-    DestinationDefinitionSpecificationResource.detailShape(),
-    destinationDefinitionId
-      ? {
-          destinationDefinitionId,
-        }
-      : null
-  );
-
-  return {
-    destinationDefinitionSpecification,
-    sourceDefinitionError: error,
-    isLoading,
-  };
-};
-
-export const useDestinationDefinitionSpecificationLoadAsync = (
-  destinationDefinitionId: string
-): DestinationDefinitionSpecification => {
-  const definition = useResource(
-    DestinationDefinitionSpecificationResource.detailShape(),
-    {
-      destinationDefinitionId,
-    }
-  );
-
-  return definition;
-};
-
 type DestinationService = {
   checkDestinationConnection: ({
     destinationId,

airbyte-webapp/src/core/resources/Schema.ts

@@ -1,18 +1,16 @@
 import { useCallback } from "react";
 import { useFetcher, useResource } from "rest-hooks";
-import { useStatefulResource } from "@rest-hooks/legacy";
 
 import SourceResource from "core/resources/Source";
 import { RoutePaths } from "pages/routes";
 import ConnectionResource, { Connection } from "core/resources/Connection";
-import SourceDefinitionSpecificationResource from "core/resources/SourceDefinitionSpecification";
 import SchedulerResource, { Scheduler } from "core/resources/Scheduler";
 import { ConnectionConfiguration } from "core/domain/connection";
 import useWorkspace from "./useWorkspace";
 
 import useRouter from "hooks/useRouter";
 import { useAnalyticsService } from "hooks/services/Analytics/useAnalyticsService";
-import { Source, SourceDefinitionSpecification } from "core/domain/connector";
+import { Source } from "core/domain/connector";
 
 type ValuesProps = {
   name: string;
@@ -23,29 +21,6 @@ type ValuesProps = {
 
 type ConnectorProps = { name: string; sourceDefinitionId: string };
 
-export const useSourceDefinitionSpecificationLoad = (
-  sourceDefinitionId: string
-): {
-  isLoading: boolean;
-  sourceDefinitionError?: Error;
-  sourceDefinitionSpecification?: SourceDefinitionSpecification;
-} => {
-  const {
-    loading: isLoading,
-    error: sourceDefinitionError,
-    data: sourceDefinitionSpecification,
-  } = useStatefulResource(
-    SourceDefinitionSpecificationResource.detailShape(),
-    sourceDefinitionId
-      ? {
-          sourceDefinitionId,
-        }
-      : null
-  );
-
-  return { sourceDefinitionSpecification, sourceDefinitionError, isLoading };
-};
-
 type SourceService = {
   recreateSource: (recreateSourcePayload: {
     values: ValuesProps;

airbyte-webapp/src/core/resources/SourceDefinitionSpecification.ts

@@ -21,9 +21,9 @@ import {
 } from "core/domain/connection";
 import useConnection from "hooks/services/useConnectionHook";
 import { useCurrentWorkspace } from "hooks/services/useWorkspace";
-import { useDestinationDefinitionSpecificationLoadAsync } from "hooks/services/useDestinationHook";
 import { ContentCard, H4 } from "components";
 import { FeatureItem, useFeatureService } from "hooks/services/Feature";
+import { useGetDestinationDefinitionSpecification } from "services/connector/DestinationDefinitionSpecificationService";
 
 type TransformationViewProps = {
   connection: Connection;
@@ -107,7 +107,7 @@ const NormalizationCard: React.FC<{
 const TransformationView: React.FC<TransformationViewProps> = ({
   connection,
 }) => {
-  const definition = useDestinationDefinitionSpecificationLoadAsync(
+  const definition = useGetDestinationDefinitionSpecification(
     connection.destination.destinationDefinitionId
   );
   const { updateConnection } = useConnection();

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

@@ -1,13 +1,14 @@
 import React, { useState } from "react";
 import { FormattedMessage } from "react-intl";
+
 import useRouter from "hooks/useRouter";
-import { useDestinationDefinitionSpecificationLoad } from "hooks/services/useDestinationHook";
 import { createFormErrorMessage } from "utils/errorStatusMessage";
 import { ConnectionConfiguration } from "core/domain/connection";
 import { useAnalyticsService } from "hooks/services/Analytics/useAnalyticsService";
 import { LogsRequestError } from "core/request/LogsRequestError";
 import { ConnectorCard } from "views/Connector/ConnectorCard";
 import { DestinationDefinition } from "core/domain/connector";
+import { useGetDestinationDefinitionSpecificationAsync } from "services/connector/DestinationDefinitionSpecificationService";
 
 type IProps = {
   onSubmit: (values: {
@@ -46,13 +47,13 @@ const DestinationForm: React.FC<IProps> = ({
   const [destinationDefinitionId, setDestinationDefinitionId] = useState(
     hasDestinationDefinitionId(location.state)
       ? location.state.destinationDefinitionId
-      : ""
+      : null
   );
   const {
-    destinationDefinitionSpecification,
+    data: destinationDefinitionSpecification,
     isLoading,
-    sourceDefinitionError,
-  } = useDestinationDefinitionSpecificationLoad(destinationDefinitionId);
+    error: destinationDefinitionError,
+  } = useGetDestinationDefinitionSpecificationAsync(destinationDefinitionId);
 
   const onDropDownSelect = (destinationDefinitionId: string) => {
     setDestinationDefinitionId(destinationDefinitionId);
@@ -87,7 +88,7 @@ const DestinationForm: React.FC<IProps> = ({
   return (
     <ConnectorCard
       onServiceSelect={onDropDownSelect}
-      fetchingConnectorError={sourceDefinitionError}
+      fetchingConnectorError={destinationDefinitionError}
       onSubmit={onSubmitForm}
       formType="destination"
       availableServices={destinationDefinitions}

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

@@ -4,9 +4,7 @@ import styled from "styled-components";
 import { useResource } from "rest-hooks";
 
 import DeleteBlock from "components/DeleteBlock";
-import useDestination, {
-  useDestinationDefinitionSpecificationLoadAsync,
-} from "hooks/services/useDestinationHook";
+import useDestination from "hooks/services/useDestinationHook";
 import { Connection } from "core/resources/Connection";
 import { ConnectionConfiguration } from "core/domain/connection";
 import DestinationDefinitionResource from "core/resources/DestinationDefinition";
@@ -15,6 +13,7 @@ import { createFormErrorMessage } from "utils/errorStatusMessage";
 import { LogsRequestError } from "core/request/LogsRequestError";
 import { ConnectorCard } from "views/Connector/ConnectorCard";
 import { Connector, Destination } from "core/domain/connector";
+import { useGetDestinationDefinitionSpecification } from "services/connector/DestinationDefinitionSpecificationService";
 
 const Content = styled.div`
   width: 100%;
@@ -36,7 +35,7 @@ const DestinationsSettings: React.FC<IProps> = ({
     null
   );
 
-  const destinationSpecification = useDestinationDefinitionSpecificationLoadAsync(
+  const destinationSpecification = useGetDestinationDefinitionSpecification(
     currentDestination.destinationDefinitionId
   );