diff --git a/airbyte-webapp/package-lock.json b/airbyte-webapp/package-lock.json index e97d88cf22e4..3dedc45e7aec 100644 --- a/airbyte-webapp/package-lock.json +++ b/airbyte-webapp/package-lock.json @@ -14,7 +14,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", @@ -5494,21 +5493,6 @@ "@rest-hooks/normalizr": "^6.0.9" } }, - "node_modules/@rest-hooks/legacy": { - "version": "2.0.5", - "resolved": "https://registry.npmjs.org/@rest-hooks/legacy/-/legacy-2.0.5.tgz", - "integrity": "sha512-5hPqHkvQ5iC7QJSjUpufMNlg3fhMUJ2kVS24QczkJlj2usj0ffuHMN24TKqByLDlRdmaFAH0ebqnF0La170bSg==", - "peerDependencies": { - "@rest-hooks/core": "^1.0.7", - "@types/react": "^16.8.4 || ^17.0.0", - "react": "^16.8.4 || ^17.0.0" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - } - } - }, "node_modules/@rest-hooks/normalizr": { "version": "6.0.9", "resolved": "https://registry.npmjs.org/@rest-hooks/normalizr/-/normalizr-6.0.9.tgz", @@ -48662,12 +48646,6 @@ "@rest-hooks/normalizr": "^6.0.9" } }, - "@rest-hooks/legacy": { - "version": "2.0.5", - "resolved": "https://registry.npmjs.org/@rest-hooks/legacy/-/legacy-2.0.5.tgz", - "integrity": "sha512-5hPqHkvQ5iC7QJSjUpufMNlg3fhMUJ2kVS24QczkJlj2usj0ffuHMN24TKqByLDlRdmaFAH0ebqnF0La170bSg==", - "requires": {} - }, "@rest-hooks/normalizr": { "version": "6.0.9", "resolved": "https://registry.npmjs.org/@rest-hooks/normalizr/-/normalizr-6.0.9.tgz", diff --git a/airbyte-webapp/package.json b/airbyte-webapp/package.json index b8ecfd6c5d95..388d145e666c 100644 --- a/airbyte-webapp/package.json +++ b/airbyte-webapp/package.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", diff --git a/airbyte-webapp/src/core/domain/connector/DestinationDefinitionSpecificationService.ts b/airbyte-webapp/src/core/domain/connector/DestinationDefinitionSpecificationService.ts new file mode 100644 index 000000000000..9a1371bb1d84 --- /dev/null +++ b/airbyte-webapp/src/core/domain/connector/DestinationDefinitionSpecificationService.ts @@ -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 { + return this.fetch(`${this.url}/get`, { + destinationDefinitionId, + }); + } +} + +export { DestinationDefinitionSpecificationService }; diff --git a/airbyte-webapp/src/core/domain/connector/SourceDefinitionSpecificationService.ts b/airbyte-webapp/src/core/domain/connector/SourceDefinitionSpecificationService.ts new file mode 100644 index 000000000000..c05b803516e3 --- /dev/null +++ b/airbyte-webapp/src/core/domain/connector/SourceDefinitionSpecificationService.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 { + return this.fetch(`${this.url}/get`, { + sourceDefinitionId, + }); + } +} + +export { SourceDefinitionSpecificationService }; diff --git a/airbyte-webapp/src/core/resources/DestinationDefinitionSpecification.ts b/airbyte-webapp/src/core/resources/DestinationDefinitionSpecification.ts deleted file mode 100644 index 909aea5f67ec..000000000000 --- a/airbyte-webapp/src/core/resources/DestinationDefinitionSpecification.ts +++ /dev/null @@ -1,36 +0,0 @@ -import { ReadShape, Resource, SchemaDetail } from "rest-hooks"; - -import { ConnectionSpecification } from "core/domain/connection"; -import { DestinationSyncMode } from "core/domain/catalog"; -import { DestinationDefinitionSpecification } from "core/domain/connector/types"; - -import BaseResource from "./BaseResource"; - -export default class DestinationDefinitionSpecificationResource - extends BaseResource - implements DestinationDefinitionSpecification { - readonly destinationDefinitionId: string = ""; - readonly documentationUrl: string = ""; - readonly connectionSpecification: ConnectionSpecification = { - properties: {}, - required: [""], - }; - readonly supportedDestinationSyncModes: DestinationSyncMode[] = []; - readonly supportsDbt: boolean = false; - readonly supportsNormalization: boolean = false; - - pk(): string { - return this.destinationDefinitionId?.toString(); - } - - static urlRoot = "destination_definition_specifications"; - - static detailShape( - this: T - ): ReadShape> { - return { - ...super.detailShape(), - schema: this, - }; - } -} diff --git a/airbyte-webapp/src/core/resources/Schema.ts b/airbyte-webapp/src/core/resources/Schema.ts index e38ac21ed778..a500aa781e6b 100644 --- a/airbyte-webapp/src/core/resources/Schema.ts +++ b/airbyte-webapp/src/core/resources/Schema.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; diff --git a/airbyte-webapp/src/core/resources/SourceDefinitionSpecification.ts b/airbyte-webapp/src/core/resources/SourceDefinitionSpecification.ts deleted file mode 100644 index b781b9a4eb9f..000000000000 --- a/airbyte-webapp/src/core/resources/SourceDefinitionSpecification.ts +++ /dev/null @@ -1,30 +0,0 @@ -import { ReadShape, Resource, SchemaDetail } from "rest-hooks"; -import BaseResource from "./BaseResource"; -import { ConnectionSpecification } from "core/domain/connection"; -import { SourceDefinitionSpecification } from "core/domain/connector/types"; - -export default class SourceDefinitionSpecificationResource - extends BaseResource - implements SourceDefinitionSpecification { - readonly sourceDefinitionId: string = ""; - readonly documentationUrl: string = ""; - readonly connectionSpecification: ConnectionSpecification = { - properties: {}, - required: [], - }; - - pk(): string { - return this.sourceDefinitionId?.toString(); - } - - static urlRoot = "source_definition_specifications"; - - static detailShape( - this: T - ): ReadShape> { - return { - ...super.detailShape(), - schema: this, - }; - } -} diff --git a/airbyte-webapp/src/hooks/services/useDestinationHook.tsx b/airbyte-webapp/src/hooks/services/useDestinationHook.tsx index 83b848545140..b2abc0cf2865 100644 --- a/airbyte-webapp/src/hooks/services/useDestinationHook.tsx +++ b/airbyte-webapp/src/hooks/services/useDestinationHook.tsx @@ -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, diff --git a/airbyte-webapp/src/hooks/services/useSourceHook.tsx b/airbyte-webapp/src/hooks/services/useSourceHook.tsx index 563d63b921f1..1f6ad2da9f4b 100644 --- a/airbyte-webapp/src/hooks/services/useSourceHook.tsx +++ b/airbyte-webapp/src/hooks/services/useSourceHook.tsx @@ -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; diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/TransformationView.tsx b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/TransformationView.tsx index 0d677b6c2458..90574e4b5fdf 100644 --- a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/TransformationView.tsx +++ b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/TransformationView.tsx @@ -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 = ({ connection, }) => { - const definition = useDestinationDefinitionSpecificationLoadAsync( + const definition = useGetDestinationDefinitionSpecification( connection.destination.destinationDefinitionId ); const { updateConnection } = useConnection(); diff --git a/airbyte-webapp/src/pages/DestinationPage/pages/CreateDestinationPage/components/DestinationForm.tsx b/airbyte-webapp/src/pages/DestinationPage/pages/CreateDestinationPage/components/DestinationForm.tsx index b68f34e2610c..fc2e05096a6d 100644 --- a/airbyte-webapp/src/pages/DestinationPage/pages/CreateDestinationPage/components/DestinationForm.tsx +++ b/airbyte-webapp/src/pages/DestinationPage/pages/CreateDestinationPage/components/DestinationForm.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 = ({ 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 = ({ return ( = ({ null ); - const destinationSpecification = useDestinationDefinitionSpecificationLoadAsync( + const destinationSpecification = useGetDestinationDefinitionSpecification( currentDestination.destinationDefinitionId ); diff --git a/airbyte-webapp/src/pages/OnboardingPage/components/DestinationStep.tsx b/airbyte-webapp/src/pages/OnboardingPage/components/DestinationStep.tsx index 16d9c0b47110..203e40a2552d 100644 --- a/airbyte-webapp/src/pages/OnboardingPage/components/DestinationStep.tsx +++ b/airbyte-webapp/src/pages/OnboardingPage/components/DestinationStep.tsx @@ -3,7 +3,6 @@ import { FormattedMessage } from "react-intl"; import { LogsRequestError } from "core/request/LogsRequestError"; -import { useDestinationDefinitionSpecificationLoad } from "hooks/services/useDestinationHook"; import { createFormErrorMessage } from "utils/errorStatusMessage"; import { ConnectionConfiguration } from "core/domain/connection"; import { DestinationDefinition } from "core/domain/connector"; @@ -12,6 +11,7 @@ import { ConnectorCard } from "views/Connector/ConnectorCard"; import TitlesBlock from "./TitlesBlock"; import HighlightedText from "./HighlightedText"; import { useAnalyticsService } from "hooks/services/Analytics/useAnalyticsService"; +import { useGetDestinationDefinitionSpecificationAsync } from "services/connector/DestinationDefinitionSpecificationService"; type IProps = { availableServices: DestinationDefinition[]; @@ -33,11 +33,13 @@ const DestinationStep: React.FC = ({ error, afterSelectConnector, }) => { - const [destinationDefinitionId, setDestinationDefinitionId] = useState(""); + const [destinationDefinitionId, setDestinationDefinitionId] = useState< + string | null + >(null); const { - destinationDefinitionSpecification, + data: destinationDefinitionSpecification, isLoading, - } = useDestinationDefinitionSpecificationLoad(destinationDefinitionId); + } = useGetDestinationDefinitionSpecificationAsync(destinationDefinitionId); const analyticsService = useAnalyticsService(); diff --git a/airbyte-webapp/src/pages/OnboardingPage/components/SourceStep.tsx b/airbyte-webapp/src/pages/OnboardingPage/components/SourceStep.tsx index 7ef870ac0362..0cdda1802267 100644 --- a/airbyte-webapp/src/pages/OnboardingPage/components/SourceStep.tsx +++ b/airbyte-webapp/src/pages/OnboardingPage/components/SourceStep.tsx @@ -4,13 +4,12 @@ import { FormattedMessage } from "react-intl"; import { ConnectionConfiguration } from "core/domain/connection"; import { LogsRequestError } from "core/request/LogsRequestError"; import { ConnectorCard } from "views/Connector/ConnectorCard"; - -import { useSourceDefinitionSpecificationLoad } from "hooks/services/useSourceHook"; import { createFormErrorMessage } from "utils/errorStatusMessage"; import { useAnalyticsService } from "hooks/services/Analytics/useAnalyticsService"; import HighlightedText from "./HighlightedText"; import TitlesBlock from "./TitlesBlock"; import { SourceDefinition } from "core/domain/connector"; +import { useGetSourceDefinitionSpecificationAsync } from "services/connector/SourceDefinitionSpecificationService"; type IProps = { onSubmit: (values: { @@ -32,13 +31,15 @@ const SourceStep: React.FC = ({ error, afterSelectConnector, }) => { - const [sourceDefinitionId, setSourceDefinitionId] = useState(""); + const [sourceDefinitionId, setSourceDefinitionId] = useState( + null + ); const analyticsService = useAnalyticsService(); const { - sourceDefinitionSpecification, + data: sourceDefinitionSpecification, isLoading, - } = useSourceDefinitionSpecificationLoad(sourceDefinitionId); + } = useGetSourceDefinitionSpecificationAsync(sourceDefinitionId); const onServiceSelect = (sourceId: string) => { const sourceDefinition = availableServices.find( diff --git a/airbyte-webapp/src/pages/SourcesPage/pages/CreateSourcePage/components/SourceForm.tsx b/airbyte-webapp/src/pages/SourcesPage/pages/CreateSourcePage/components/SourceForm.tsx index b4f95392f25f..725e02178d05 100644 --- a/airbyte-webapp/src/pages/SourcesPage/pages/CreateSourcePage/components/SourceForm.tsx +++ b/airbyte-webapp/src/pages/SourcesPage/pages/CreateSourcePage/components/SourceForm.tsx @@ -2,13 +2,13 @@ import React, { useState } from "react"; import { FormattedMessage } from "react-intl"; import useRouter from "hooks/useRouter"; -import { useSourceDefinitionSpecificationLoad } from "hooks/services/useSourceHook"; 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 { SourceDefinition } from "core/domain/connector"; +import { useGetSourceDefinitionSpecificationAsync } from "services/connector/SourceDefinitionSpecificationService"; type IProps = { onSubmit: (values: { @@ -44,17 +44,17 @@ const SourceForm: React.FC = ({ const { location } = useRouter(); const analyticsService = useAnalyticsService(); - const [sourceDefinitionId, setSourceDefinitionId] = useState( + const [sourceDefinitionId, setSourceDefinitionId] = useState( hasSourceDefinitionId(location.state) ? location.state.sourceDefinitionId - : "" + : null ); const { - sourceDefinitionSpecification, - sourceDefinitionError, + data: sourceDefinitionSpecification, + error: sourceDefinitionError, isLoading, - } = useSourceDefinitionSpecificationLoad(sourceDefinitionId); + } = useGetSourceDefinitionSpecificationAsync(sourceDefinitionId); const onDropDownSelect = (sourceDefinitionId: string) => { setSourceDefinitionId(sourceDefinitionId); diff --git a/airbyte-webapp/src/pages/SourcesPage/pages/SourceItemPage/components/SourceSettings.tsx b/airbyte-webapp/src/pages/SourcesPage/pages/SourceItemPage/components/SourceSettings.tsx index ca61c0d7277f..13ca7d7f17ac 100644 --- a/airbyte-webapp/src/pages/SourcesPage/pages/SourceItemPage/components/SourceSettings.tsx +++ b/airbyte-webapp/src/pages/SourcesPage/pages/SourceItemPage/components/SourceSettings.tsx @@ -4,7 +4,6 @@ import { FormattedMessage } from "react-intl"; import { useResource } from "rest-hooks"; import useSource from "hooks/services/useSourceHook"; -import SourceDefinitionSpecificationResource from "core/resources/SourceDefinitionSpecification"; import DeleteBlock from "components/DeleteBlock"; import { Connection } from "core/resources/Connection"; import { createFormErrorMessage } from "utils/errorStatusMessage"; @@ -13,6 +12,7 @@ import SourceDefinitionResource from "core/resources/SourceDefinition"; import { LogsRequestError } from "core/request/LogsRequestError"; import { ConnectorCard } from "views/Connector/ConnectorCard"; import { Source } from "core/domain/connector"; +import { useGetSourceDefinitionSpecification } from "services/connector/SourceDefinitionSpecificationService"; const Content = styled.div` max-width: 813px; @@ -35,11 +35,8 @@ const SourceSettings: React.FC = ({ const { updateSource, deleteSource, checkSourceConnection } = useSource(); - const sourceDefinitionSpecification = useResource( - SourceDefinitionSpecificationResource.detailShape(), - { - sourceDefinitionId: currentSource.sourceDefinitionId, - } + const sourceDefinitionSpecification = useGetSourceDefinitionSpecification( + currentSource.sourceDefinitionId ); const sourceDefinition = useResource(SourceDefinitionResource.detailShape(), { sourceDefinitionId: currentSource.sourceDefinitionId, diff --git a/airbyte-webapp/src/services/connector/DestinationDefinitionSpecificationService.tsx b/airbyte-webapp/src/services/connector/DestinationDefinitionSpecificationService.tsx new file mode 100644 index 000000000000..25ed0e57231f --- /dev/null +++ b/airbyte-webapp/src/services/connector/DestinationDefinitionSpecificationService.tsx @@ -0,0 +1,59 @@ +import { + QueryObserverResult, + QueryObserverSuccessResult, + useQuery, +} from "react-query"; + +import { DestinationDefinitionSpecification } from "core/domain/connector"; +import { useConfig } from "config"; +import { useDefaultRequestMiddlewares } from "services/useDefaultRequestMiddlewares"; +import { useInitService } from "services/useInitService"; +import { DestinationDefinitionSpecificationService } from "core/domain/connector/DestinationDefinitionSpecificationService"; +import { isDefined } from "utils/common"; + +export const destinationDefinitionSpecificationKeys = { + all: ["destinationDefinitionSpecification"] as const, + detail: (id: string | number) => + [...destinationDefinitionSpecificationKeys.all, "details", id] as const, +}; + +function useGetService(): DestinationDefinitionSpecificationService { + const { apiUrl } = useConfig(); + + const requestAuthMiddleware = useDefaultRequestMiddlewares(); + + return useInitService( + () => + new DestinationDefinitionSpecificationService( + apiUrl, + requestAuthMiddleware + ), + [apiUrl, requestAuthMiddleware] + ); +} + +export const useGetDestinationDefinitionSpecification = ( + id: string +): DestinationDefinitionSpecification => { + const service = useGetService(); + + return (useQuery(destinationDefinitionSpecificationKeys.detail(id), () => + service.get(id) + ) as QueryObserverSuccessResult).data; +}; + +export const useGetDestinationDefinitionSpecificationAsync = ( + id: string | null +): QueryObserverResult => { + const service = useGetService(); + + const escapedId = id ?? ""; + return useQuery( + destinationDefinitionSpecificationKeys.detail(escapedId), + () => service.get(escapedId), + { + suspense: false, + enabled: isDefined(id), + } + ); +}; diff --git a/airbyte-webapp/src/services/connector/SourceDefinitionSpecificationService.tsx b/airbyte-webapp/src/services/connector/SourceDefinitionSpecificationService.tsx new file mode 100644 index 000000000000..f4033b0f6b21 --- /dev/null +++ b/airbyte-webapp/src/services/connector/SourceDefinitionSpecificationService.tsx @@ -0,0 +1,56 @@ +import { + QueryObserverResult, + QueryObserverSuccessResult, + useQuery, +} from "react-query"; + +import { SourceDefinitionSpecification } from "core/domain/connector"; +import { useConfig } from "config"; +import { useDefaultRequestMiddlewares } from "services/useDefaultRequestMiddlewares"; +import { useInitService } from "services/useInitService"; +import { SourceDefinitionSpecificationService } from "core/domain/connector/SourceDefinitionSpecificationService"; +import { isDefined } from "utils/common"; + +export const sourceDefinitionSpecificationKeys = { + all: ["sourceDefinitionSpecification"] as const, + detail: (id: string | number) => + [...sourceDefinitionSpecificationKeys.all, "details", id] as const, +}; + +function useGetService(): SourceDefinitionSpecificationService { + const { apiUrl } = useConfig(); + + const requestAuthMiddleware = useDefaultRequestMiddlewares(); + + return useInitService( + () => + new SourceDefinitionSpecificationService(apiUrl, requestAuthMiddleware), + [apiUrl, requestAuthMiddleware] + ); +} + +export const useGetSourceDefinitionSpecification = ( + id: string +): SourceDefinitionSpecification => { + const service = useGetService(); + + return (useQuery(sourceDefinitionSpecificationKeys.detail(id), () => + service.get(id) + ) as QueryObserverSuccessResult).data; +}; + +export const useGetSourceDefinitionSpecificationAsync = ( + id: string | null +): QueryObserverResult => { + const service = useGetService(); + + const escapedId = id ?? ""; + return useQuery( + sourceDefinitionSpecificationKeys.detail(escapedId), + () => service.get(escapedId), + { + suspense: false, + enabled: isDefined(id), + } + ); +}; diff --git a/airbyte-webapp/src/views/Connection/ConnectionForm/ConnectionForm.tsx b/airbyte-webapp/src/views/Connection/ConnectionForm/ConnectionForm.tsx index f4661b778174..44c65a6f67a3 100644 --- a/airbyte-webapp/src/views/Connection/ConnectionForm/ConnectionForm.tsx +++ b/airbyte-webapp/src/views/Connection/ConnectionForm/ConnectionForm.tsx @@ -16,7 +16,6 @@ import { Label, } from "components"; -import { useDestinationDefinitionSpecificationLoadAsync } from "hooks/services/useDestinationHook"; import useWorkspace from "hooks/services/useWorkspace"; import { createFormErrorMessage } from "utils/errorStatusMessage"; @@ -35,6 +34,7 @@ import { useInitialValues, } from "./formConfig"; import { OperationsSection } from "./components/OperationsSection"; +import { useGetDestinationDefinitionSpecification } from "services/connector/DestinationDefinitionSpecificationService"; const EditLaterMessage = styled(Label)` margin: -20px 0 29px; @@ -120,7 +120,7 @@ const ConnectionForm: React.FC = ({ additionalSchemaControl, connection, }) => { - const destDefinition = useDestinationDefinitionSpecificationLoadAsync( + const destDefinition = useGetDestinationDefinitionSpecification( connection.destination.destinationDefinitionId ); diff --git a/airbyte-webapp/src/views/Connector/ServiceForm/FormRoot.tsx b/airbyte-webapp/src/views/Connector/ServiceForm/FormRoot.tsx index 6847a19627ef..98877eab28ee 100644 --- a/airbyte-webapp/src/views/Connector/ServiceForm/FormRoot.tsx +++ b/airbyte-webapp/src/views/Connector/ServiceForm/FormRoot.tsx @@ -31,7 +31,7 @@ const FormRoot: React.FC<{ hasSuccess?: boolean; additionBottomControls?: React.ReactNode; errorMessage?: React.ReactNode; - fetchingConnectorError?: Error; + fetchingConnectorError?: Error | null; successMessage?: React.ReactNode; onRetest?: () => void; }> = ({ diff --git a/airbyte-webapp/src/views/Connector/ServiceForm/ServiceForm.tsx b/airbyte-webapp/src/views/Connector/ServiceForm/ServiceForm.tsx index fba933e4635e..1143d0fbe9ed 100644 --- a/airbyte-webapp/src/views/Connector/ServiceForm/ServiceForm.tsx +++ b/airbyte-webapp/src/views/Connector/ServiceForm/ServiceForm.tsx @@ -39,7 +39,7 @@ export type ServiceFormProps = { formValues?: Partial; hasSuccess?: boolean; additionBottomControls?: React.ReactNode; - fetchingConnectorError?: Error; + fetchingConnectorError?: Error | null; errorMessage?: React.ReactNode; successMessage?: React.ReactNode; }; diff --git a/airbyte-webapp/src/views/Connector/ServiceForm/components/CreateControls.tsx b/airbyte-webapp/src/views/Connector/ServiceForm/components/CreateControls.tsx index c6f53252743c..d35d8e23cdb2 100644 --- a/airbyte-webapp/src/views/Connector/ServiceForm/components/CreateControls.tsx +++ b/airbyte-webapp/src/views/Connector/ServiceForm/components/CreateControls.tsx @@ -14,7 +14,7 @@ type IProps = { hasSuccess?: boolean; isLoadSchema?: boolean; errorMessage?: React.ReactNode; - fetchingConnectorError?: Error; + fetchingConnectorError?: Error | null; additionBottomControls?: React.ReactNode; };