Switch connectors to gql

src/api/connectors.ts

@@ -79,24 +79,4 @@ const getConnectors_detailsFormTestPage = async (connectorId: string) => {
     return data;
 };
 
-const getSingleConnectorWithTag = async (connectorId: string) => {
-    const data = await supabaseRetry(
-        () =>
-            requiredConnectorColumnsExist<ConnectorWithTagQuery[]>(
-                supabaseClient
-                    .from(TABLES.CONNECTORS)
-                    .select(CONNECTOR_WITH_TAG_QUERY)
-                    .eq('id', connectorId),
-                'connector_tags'
-            ),
-        'getSingleConnectorWithTag'
-    ).then(handleSuccess<ConnectorWithTagQuery[]>, handleFailure);
-
-    return data;
-};
-
-export {
-    getConnectors,
-    getConnectors_detailsFormTestPage,
-    getSingleConnectorWithTag,
-};
+export { getConnectors, getConnectors_detailsFormTestPage };

src/api/discovers.ts

@@ -13,15 +13,15 @@ interface DiscoverRequest {
 export const discover = (
     entityName: string,
     config: any,
-    connectorID: string,
+    connectorTagID: string,
     draftID: string,
     updateOnly?: boolean,
     dataPlaneName?: string
 ) => {
     const data: DiscoverRequest = {
         capture_name: entityName,
         endpoint_config: config,
-        connector_tag_id: connectorID,
+        connector_tag_id: connectorTagID,
         draft_id: draftID,
         update_only: updateOnly ?? false,
     };

src/api/gql/connectors.ts

@@ -0,0 +1,42 @@
+import { useCallback } from 'react';
+
+import { useClient } from 'urql';
+
+import { graphql } from 'src/gql-types';
+
+const CONNECTOR_QUERY = graphql(`
+    query SingleConnectorQuery($imageName: String!) {
+        connector(imageName: $imageName) {
+            id
+            imageName
+            logoUrl
+            title
+            connectorTag(orDefault: true) {
+                id
+                disableBackfill
+                defaultCaptureInterval
+                documentationUrl
+                endpointSpecSchema
+                imageTag
+                resourceSpecSchema
+            }
+        }
+    }
+`);
+
+export function useGetSingleConnectorTag() {
+    const client = useClient();
+
+    return useCallback(
+        (imageName: string) => {
+            return client
+                .query(
+                    CONNECTOR_QUERY,
+                    { imageName },
+                    { requestPolicy: 'network-only' }
+                )
+                .toPromise();
+        },
+        [client]
+    );
+}

src/app/guards/ExpressWorkflowGuard/index.tsx

@@ -4,9 +4,7 @@ import { useEffect } from 'react';
 
 import { ConnectorGridSkeleton } from 'src/app/guards/ExpressWorkflowGuard/ConnectorGridSkeleton';
 import { FormSkeleton } from 'src/app/guards/ExpressWorkflowGuard/FormSkeleton';
-import useGlobalSearchParams, {
-    GlobalSearchParams,
-} from 'src/hooks/searchParams/useGlobalSearchParams';
+import useGlobalSearchParams from 'src/hooks/searchParams/useGlobalSearchParams';
 import useExpressWorkflowAuth from 'src/hooks/useExpressWorkflowAuth';
 import { logRocketConsole } from 'src/services/shared';
 import { useWorkflowStore } from 'src/stores/Workflow/Store';
@@ -15,7 +13,8 @@ export const ExpressWorkflowGuard = ({
     authenticating,
     children,
 }: ExpressWorkflowGuardProps) => {
-    const connectorId = useGlobalSearchParams(GlobalSearchParams.CONNECTOR_ID);
+    // TODO (gql:connector)
+    const connectorImage = useGlobalSearchParams('connector_image');
 
     const { getExpressWorkflowAuth } = useExpressWorkflowAuth();
 
@@ -61,7 +60,7 @@ export const ExpressWorkflowGuard = ({
     ]);
 
     if (authenticating && stateEmpty) {
-        return connectorId ? <FormSkeleton /> : <ConnectorGridSkeleton />;
+        return connectorImage ? <FormSkeleton /> : <ConnectorGridSkeleton />;
     }
 
     // eslint-disable-next-line react/jsx-no-useless-fragment

src/components/capture/ExpressCreate/HeaderText.tsx

@@ -8,6 +8,7 @@ import { useWorkflowStore_connectorMetadataProperty } from 'src/stores/Workflow/
 export const ExpressHeaderText = () => {
     const connectorId = useGlobalSearchParams(GlobalSearchParams.CONNECTOR_ID);
 
+    // todo (gql:connector) - need to update this
     const connectorTitle = useWorkflowStore_connectorMetadataProperty(
         connectorId,
         'title'

src/components/capture/GenerateButton.tsx

@@ -46,11 +46,11 @@ function CaptureGenerateButton({
     );
 
     // Details Form Store
-    const selectedConnectorId = useDetailsFormStore(
-        (state) => state.details.data.connectorImage.connectorId
+    const selectedConnectorImageName = useDetailsFormStore(
+        (state) => state.details.data.connectorImage.imageName
     );
-    const previousConnectorId = useDetailsFormStore(
-        (state) => state.previousDetails.data.connectorImage.connectorId
+    const previousConnectorImageName = useDetailsFormStore(
+        (state) => state.previousDetails.data.connectorImage.imageName
     );
     const entityNameChanged = useDetailsFormStore(
         (state) => state.entityNameChanged
@@ -64,7 +64,7 @@ function CaptureGenerateButton({
             if (
                 !entityNameChanged &&
                 formStatus === FormStatus.GENERATED &&
-                selectedConnectorId === previousConnectorId
+                selectedConnectorImageName === previousConnectorImageName
             ) {
                 createWorkflowMetadata.setInitiateDiscovery(false);
             }
@@ -73,8 +73,8 @@ function CaptureGenerateButton({
         entityNameChanged,
         createWorkflowMetadata,
         formStatus,
-        previousConnectorId,
-        selectedConnectorId,
+        previousConnectorImageName,
+        selectedConnectorImageName,
     ]);
 
     return (

src/components/capture/useCaptureConfigEncrypt.ts

@@ -3,7 +3,7 @@ import type { Schema } from 'src/types';
 import { useCallback } from 'react';
 
 import useEntityWorkflowHelpers from 'src/components/shared/Entity/hooks/useEntityWorkflowHelpers';
-import { useDetailsFormStore } from 'src/stores/DetailsForm/Store';
+import { useConnectorTag } from 'src/context/ConnectorTag';
 import {
     useEndpointConfig_serverUpdateRequired,
     useEndpointConfigStore_endpointSchema,
@@ -12,13 +12,7 @@ import { encryptEndpointConfig } from 'src/utils/sops-utils';
 
 function useDiscoverConfigEncrypt() {
     const { callFailed } = useEntityWorkflowHelpers();
-
-    const imageConnectorId = useDetailsFormStore(
-        (state) => state.details.data.connectorImage.connectorId
-    );
-    const imageConnectorTagId = useDetailsFormStore(
-        (state) => state.details.data.connectorImage.id
-    );
+    const connectorTag = useConnectorTag();
 
     const endpointSchema = useEndpointConfigStore_endpointSchema();
     const serverUpdateRequired = useEndpointConfig_serverUpdateRequired();
@@ -29,8 +23,8 @@ function useDiscoverConfigEncrypt() {
                 selectedEndpointConfig,
                 endpointSchema,
                 serverUpdateRequired,
-                imageConnectorId,
-                imageConnectorTagId,
+                connectorTag.connector.id,
+                connectorTag.id,
                 callFailed,
                 { overrideJsonFormDefaults: true }
             );
@@ -50,9 +44,9 @@ function useDiscoverConfigEncrypt() {
         },
         [
             callFailed,
+            connectorTag.connector.id,
+            connectorTag.id,
             endpointSchema,
-            imageConnectorId,
-            imageConnectorTagId,
             serverUpdateRequired,
         ]
     );

src/components/capture/useDiscoverStartDiscovery.ts

@@ -13,9 +13,9 @@ import {
     useEditorStore_setId,
 } from 'src/components/editor/Store/hooks';
 import useEntityWorkflowHelpers from 'src/components/shared/Entity/hooks/useEntityWorkflowHelpers';
+import { useConnectorTag } from 'src/context/ConnectorTag';
 import { logRocketEvent } from 'src/services/shared';
 import { CustomEvents } from 'src/services/types';
-import { useDetailsFormStore } from 'src/stores/DetailsForm/Store';
 import { useEndpointConfigStore_endpointConfig_data } from 'src/stores/EndpointConfig/hooks';
 import { useFormStateStore_setFormState } from 'src/stores/FormState/hooks';
 
@@ -32,13 +32,7 @@ function useDiscoverStartDiscovery(entityType: Entity) {
 
     const setFormState = useFormStateStore_setFormState();
 
-    const imageConnectorTagId = useDetailsFormStore(
-        (state) => state.details.data.connectorImage.id
-    );
-
-    const imageName = useDetailsFormStore(
-        (state) => state.details.data.connectorImage.imageName
-    );
+    const connectorTag = useConnectorTag();
 
     const endpointConfigData = useEndpointConfigStore_endpointConfig_data();
 
@@ -74,7 +68,7 @@ function useDiscoverStartDiscovery(entityType: Entity) {
 
             postHog.capture(CustomEvents.CAPTURE_DISCOVER, {
                 status: 'init',
-                imageName,
+                imageName: connectorTag.connector.imageName,
             });
 
             setCatalogName(processedEntityName);
@@ -84,7 +78,7 @@ function useDiscoverStartDiscovery(entityType: Entity) {
             const discoverResponse = await discover(
                 processedEntityName,
                 encryptedEndpointConfigResponse,
-                imageConnectorTagId,
+                connectorTag.id,
                 newDraftId,
                 updateOnly,
                 dataPlaneName
@@ -124,10 +118,10 @@ function useDiscoverStartDiscovery(entityType: Entity) {
         },
         [
             callFailed,
+            connectorTag?.connector?.imageName,
+            connectorTag?.id,
             createDiscoversSubscription,
             endpointConfigData,
-            imageConnectorTagId,
-            imageName,
             persistedDraftId,
             postHog,
             setCatalogName,