Switch connectors over to using GQL

.eslintrc.cjs

@@ -11,6 +11,7 @@ module.exports = {
         '__mocks__',
         'playwright-tests/',
         'src/gql-types/',
+        'storybook-static/',
     ],
     plugins: ['formatjs', 'unused-imports', 'no-relative-import-paths'],
     parserOptions: {

src/api/gql/connectors.ts

@@ -0,0 +1,59 @@
+import type { ConnectorsGridQuery } from 'src/gql-types/graphql';
+
+import { graphql } from 'src/gql-types';
+
+export type ConnectorGridNode =
+    ConnectorsGridQuery['connectors']['edges'][number]['node'];
+
+// TODO (GQL:Connector) - fine for now but this ignores pagination and just
+//  fetches 500 all at once
+export const CONNECTORS_QUERY = graphql(`
+    query ConnectorsGrid($filter: ConnectorsFilter, $after: String) {
+        connectors(first: 500, after: $after, filter: $filter) {
+            edges {
+                cursor
+                node {
+                    id
+                    imageName
+                    logoUrl
+                    title
+                    recommended
+                    shortDescription
+                    connectorTag(orDefault: true) {
+                        id
+                        connectorId
+                        imageTag
+                        documentationUrl
+                        protocol
+                    }
+                }
+            }
+            pageInfo {
+                hasNextPage
+                endCursor
+            }
+        }
+    }
+`);
+
+export const CONNECTOR_BY_ID_QUERY = graphql(`
+    query SingleConnector($id: Id!, $imageTag: String) {
+        connector(id: $id) {
+            id
+            imageName
+            logoUrl
+            title
+            connectorTag(imageTag: $imageTag, orDefault: true) {
+                id
+                connectorId
+                imageTag
+                defaultCaptureInterval
+                disableBackfill
+                documentationUrl
+                endpointSpecSchema
+                resourceSpecSchema
+                protocol
+            }
+        }
+    }
+`);

src/api/hydration.ts

@@ -1,4 +1,3 @@
-import type { ConnectorTagResourceData } from 'src/api/types';
 import type {
     LiveSpecsExt_MaterializeOrTransform,
     LiveSpecsExtQuery,
@@ -13,24 +12,6 @@ import {
     TABLES,
 } from 'src/services/supabase';
 
-// TODO (optimization): Consider removing the tight coupling between this file and the stores.
-//  These APIs are truly general purpose. Perhaps break them out by supabase table.
-export const getSchema_Resource = async (connectorTagId: string | null) => {
-    const resourceSchema = await supabaseRetry(
-        () =>
-            supabaseClient
-                .from(TABLES.CONNECTOR_TAGS)
-                .select(
-                    `default_capture_interval,disable_backfill,resource_spec_schema`
-                )
-                .eq('id', connectorTagId)
-                .single(),
-        'getSchema_Resource'
-    ).then(handleSuccess<ConnectorTagResourceData>, handleFailure);
-
-    return resourceSchema;
-};
-
 const liveSpecColumns = `id,spec_type,spec,writes_to,reads_from,last_pub_id,updated_at`;
 
 export const getLiveSpecsByLiveSpecId = async (

src/api/liveSpecsExt.ts

@@ -422,6 +422,7 @@ export interface LiveSpecsExtQuery_ByLiveSpecId {
     last_pub_id: string;
     spec: any;
     connector_id: string;
+    connector_image_tag: string;
 }
 
 const getLiveSpecsByLiveSpecId = async (liveSpecId: string) => {
@@ -430,7 +431,7 @@ const getLiveSpecsByLiveSpecId = async (liveSpecId: string) => {
             supabaseClient
                 .from(TABLES.LIVE_SPECS_EXT)
                 .select(
-                    'built_spec,catalog_name,id,spec_type,last_pub_id,spec,connector_id'
+                    'built_spec,catalog_name,id,spec_type,last_pub_id,spec,connector_id,connector_image_tag'
                 )
                 .eq('id', liveSpecId),
         'getLiveSpecsByLiveSpecId'

src/api/types.ts

@@ -1,53 +1,6 @@
-import type { CONNECTOR_NAME } from 'src/api/shared';
-import type { Entity, EntityWithCreateWorkflow, Schema } from 'src/types';
+import type { Entity } from 'src/types';
 import type { AlertSubscription } from 'src/types/gql';
 
-export interface BaseConnectorTag {
-    id: string;
-    connector_id: string;
-    image_tag: string;
-}
-
-export interface ConnectorTag extends BaseConnectorTag {
-    documentation_url: string;
-    endpoint_spec_schema: Schema;
-    image_name: string;
-    protocol: EntityWithCreateWorkflow;
-    title: string;
-}
-
-// This interface is only used to type the data returned by getSchema_Resource.
-export interface ConnectorTagResourceData {
-    connector_id: string;
-    default_capture_interval: string | null;
-    disable_backfill: boolean;
-    resource_spec_schema: Schema;
-}
-
-export interface ConnectorWithTag {
-    connector_tags: ConnectorTag[];
-    id: string;
-    detail: string;
-    image_name: string;
-    image: string;
-    recommended: boolean;
-    title: string;
-}
-
-export interface ConnectorWithTagQuery extends ConnectorWithTag {
-    // FILTERING TYPES HACK
-    ['connector_tags.protocol']: undefined;
-    ['connector_tags.image_tag']: undefined;
-    [CONNECTOR_NAME]: undefined;
-}
-
-export interface ConnectorsQuery_DetailsForm {
-    id: string;
-    image_name: string;
-    image: string;
-    connector_tags: BaseConnectorTag[];
-}
-
 export interface DraftSpecData {
     spec: any;
     catalog_name?: string;

src/components/capture/Create/index.tsx

@@ -7,12 +7,10 @@ import {
     useEditorStore_id,
     useEditorStore_persistedDraftId,
     useEditorStore_queryResponse_mutate,
-    useEditorStore_setId,
 } from 'src/components/editor/Store/hooks';
 import EntityCreate from 'src/components/shared/Entity/Create';
 import EntityToolbar from 'src/components/shared/Entity/Header';
 import { MutateDraftSpecProvider } from 'src/components/shared/Entity/MutateDraftSpecContext';
-import useValidConnectorsExist from 'src/hooks/connectors/useHasConnectors';
 import useDraftSpecs from 'src/hooks/useDraftSpecs';
 import usePageTitle from 'src/hooks/usePageTitle';
 import { CustomEvents } from 'src/services/types';
@@ -28,19 +26,13 @@ function CaptureCreate() {
             'https://docs.estuary.dev/guides/create-dataflow/#create-a-capture',
     });
 
-    const hasConnectors = useValidConnectorsExist(entityType);
-
     // Details Form Store
-    const imageTag = useDetailsFormStore(
-        (state) => state.details.data.connectorImage
-    );
     const entityNameChanged = useDetailsFormStore(
         (state) => state.entityNameChanged
     );
 
     // Draft Editor Store
     const draftId = useEditorStore_id();
-    const setDraftId = useEditorStore_setId();
     const persistedDraftId = useEditorStore_persistedDraftId();
 
     // Endpoint Config Store
@@ -62,12 +54,6 @@ function CaptureCreate() {
         }
     }, [mutateDraftSpecs, mutate_advancedEditor]);
 
-    // Reset the catalog if the connector changes
-    useEffect(() => {
-        setDraftId(null);
-        setInitiateDiscovery(true);
-    }, [setDraftId, setInitiateDiscovery, imageTag]);
-
     // If the name changed we need to make sure we run discovery again
     useEffect(() => {
         if (entityNameChanged) {
@@ -91,13 +77,11 @@ function CaptureCreate() {
                                 logEvent: CustomEvents.CAPTURE_CREATE,
                             }}
                             secondaryButtonProps={{
-                                disabled: !hasConnectors,
                                 logEvent: CustomEvents.CAPTURE_TEST,
                             }}
                             GenerateButton={
                                 <CaptureGenerateButton
                                     entityType={entityType}
-                                    disabled={!hasConnectors}
                                     createWorkflowMetadata={{
                                         initiateDiscovery,
                                         setInitiateDiscovery,
@@ -107,10 +91,7 @@ function CaptureCreate() {
                         />
                     }
                     RediscoverButton={
-                        <RediscoverButton
-                            entityType={entityType}
-                            disabled={!hasConnectors}
-                        />
+                        <RediscoverButton entityType={entityType} />
                     }
                 />
             </MutateDraftSpecProvider>

src/components/capture/Edit.tsx

@@ -12,7 +12,6 @@ import EntityEdit from 'src/components/shared/Entity/Edit';
 import DraftInitializer from 'src/components/shared/Entity/Edit/DraftInitializer';
 import EntityToolbar from 'src/components/shared/Entity/Header';
 import { MutateDraftSpecProvider } from 'src/components/shared/Entity/MutateDraftSpecContext';
-import useValidConnectorsExist from 'src/hooks/connectors/useHasConnectors';
 import useGlobalSearchParams, {
     GlobalSearchParams,
 } from 'src/hooks/searchParams/useGlobalSearchParams';
@@ -30,9 +29,6 @@ function CaptureEdit() {
 
     const lastPubId = useGlobalSearchParams(GlobalSearchParams.LAST_PUB_ID);
 
-    // Supabase
-    const hasConnectors = useValidConnectorsExist(entityType);
-
     // Draft Editor Store
     const draftId = useEditorStore_id();
     const persistedDraftId = useEditorStore_persistedDraftId();
@@ -68,22 +64,17 @@ function CaptureEdit() {
                                     logEvent: CustomEvents.CAPTURE_EDIT,
                                 }}
                                 secondaryButtonProps={{
-                                    disabled: !hasConnectors,
                                     logEvent: CustomEvents.CAPTURE_TEST,
                                 }}
                                 GenerateButton={
                                     <CaptureGenerateButton
                                         entityType={entityType}
-                                        disabled={!hasConnectors}
                                     />
                                 }
                             />
                         }
                         RediscoverButton={
-                            <RediscoverButton
-                                entityType={entityType}
-                                disabled={!hasConnectors}
-                            />
+                            <RediscoverButton entityType={entityType} />
                         }
                     />
                 </MutateDraftSpecProvider>