Update binding modelling in client state

src/api/hydration.ts

@@ -4,11 +4,11 @@ import {
     LiveSpecsExt_MaterializeCapture,
 } from 'hooks/useLiveSpecsExt';
 import {
+    TABLES,
     handleFailure,
     handleSuccess,
     supabaseClient,
     supabaseRetry,
-    TABLES,
 } from 'services/supabase';
 import { Entity } from 'types';
 
@@ -88,7 +88,7 @@ export const getLiveSpecsById_writesTo = async (
                     typeof liveSpecId === 'string' ? [liveSpecId] : liveSpecId
                 ),
         'getLiveSpecsById_writesTo'
-    ).then(handleSuccess<LiveSpecsExt_MaterializeCapture>, handleFailure);
+    ).then(handleSuccess<LiveSpecsExt_MaterializeCapture[]>, handleFailure);
 
     return data;
 };

src/components/capture/Create/index.tsx

@@ -17,13 +17,13 @@ import useDraftSpecs from 'hooks/useDraftSpecs';
 import usePageTitle from 'hooks/usePageTitle';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { CustomEvents } from 'services/types';
+import BindingHydrator from 'stores/Binding/Hydrator';
 import {
     useDetailsForm_connectorImage,
     useDetailsForm_entityNameChanged,
 } from 'stores/DetailsForm/hooks';
 import { DetailsFormHydrator } from 'stores/DetailsForm/Hydrator';
 import { EndpointConfigHydrator } from 'stores/EndpointConfig/Hydrator';
-import ResourceConfigHydrator from 'stores/ResourceConfig/Hydrator';
 import { MAX_DISCOVER_TIME } from 'utils/misc-utils';
 
 function CaptureCreate() {
@@ -85,14 +85,16 @@ function CaptureCreate() {
     return (
         <DetailsFormHydrator>
             <EndpointConfigHydrator>
-                <ResourceConfigHydrator>
+                <BindingHydrator>
                     <MutateDraftSpecProvider value={updateDraftSpecs}>
                         <EntityCreate
                             entityType={entityType}
                             draftSpecMetadata={draftSpecsMetadata}
                             toolbar={
                                 <EntityToolbar
-                                    waitTimes={{ generate: MAX_DISCOVER_TIME }}
+                                    waitTimes={{
+                                        generate: MAX_DISCOVER_TIME,
+                                    }}
                                     GenerateButton={
                                         <CaptureGenerateButton
                                             entityType={entityType}
@@ -128,7 +130,7 @@ function CaptureCreate() {
                             }
                         />
                     </MutateDraftSpecProvider>
-                </ResourceConfigHydrator>
+                </BindingHydrator>
             </EndpointConfigHydrator>
         </DetailsFormHydrator>
     );

src/components/capture/Edit.tsx

@@ -19,9 +19,9 @@ import useDraftSpecs from 'hooks/useDraftSpecs';
 import usePageTitle from 'hooks/usePageTitle';
 import { useCallback, useMemo } from 'react';
 import { CustomEvents } from 'services/types';
+import BindingHydrator from 'stores/Binding/Hydrator';
 import { DetailsFormHydrator } from 'stores/DetailsForm/Hydrator';
 import { EndpointConfigHydrator } from 'stores/EndpointConfig/Hydrator';
-import ResourceConfigHydrator from 'stores/ResourceConfig/Hydrator';
 import { MAX_DISCOVER_TIME } from 'utils/misc-utils';
 import useValidConnectorsExist from 'hooks/connectors/useHasConnectors';
 
@@ -67,7 +67,7 @@ function CaptureEdit() {
         <DraftInitializer>
             <DetailsFormHydrator>
                 <EndpointConfigHydrator>
-                    <ResourceConfigHydrator>
+                    <BindingHydrator>
                         <MutateDraftSpecProvider value={updateDraftSpecs}>
                             <EntityEdit
                                 title="routeTitle.captureEdit"
@@ -112,7 +112,7 @@ function CaptureEdit() {
                                 }
                             />
                         </MutateDraftSpecProvider>
-                    </ResourceConfigHydrator>
+                    </BindingHydrator>
                 </EndpointConfigHydrator>
             </DetailsFormHydrator>
         </DraftInitializer>

src/components/capture/GenerateButton.tsx

@@ -3,14 +3,14 @@ import { buttonSx } from 'components/shared/Entity/Header';
 import { useEntityWorkflow_Editing } from 'context/Workflow';
 import { Dispatch, SetStateAction, useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
+import { useBinding_rediscoveryRequired } from 'stores/Binding/hooks';
 import {
     useDetailsForm_connectorImage_connectorId,
     useDetailsForm_entityNameChanged,
     useDetailsForm_previousConnectorImage_connectorId,
 } from 'stores/DetailsForm/hooks';
 import { useFormStateStore_status } from 'stores/FormState/hooks';
 import { FormStatus } from 'stores/FormState/types';
-import { useResourceConfig_rediscoveryRequired } from 'stores/ResourceConfig/hooks';
 import { Entity } from 'types';
 import useDiscoverCapture from './useDiscoverCapture';
 
@@ -29,7 +29,7 @@ function CaptureGenerateButton({
     createWorkflowMetadata,
 }: Props) {
     const isEdit = useEntityWorkflow_Editing();
-    const rediscoveryRequired = useResourceConfig_rediscoveryRequired();
+    const rediscoveryRequired = useBinding_rediscoveryRequired();
 
     const { generateCatalog, isSaving, formActive } = useDiscoverCapture(
         entityType,

src/components/capture/useCaptureDraftUpdate.ts

@@ -12,14 +12,18 @@ import { useMutateDraftSpec } from 'components/shared/Entity/MutateDraftSpecCont
 import { useEntityWorkflow_Editing } from 'context/Workflow';
 import useEntityNameSuffix from 'hooks/useEntityNameSuffix';
 import { useCallback } from 'react';
+import {
+    useBinding_bindings,
+    useBinding_resourceConfigs,
+    useBinding_serverUpdateRequired,
+} from 'stores/Binding/hooks';
 import { useDetailsForm_connectorImage_imagePath } from 'stores/DetailsForm/hooks';
 import {
     useEndpointConfigStore_endpointConfig_data,
     useEndpointConfigStore_setEncryptedEndpointConfig,
     useEndpointConfigStore_setPreviousEndpointConfig,
 } from 'stores/EndpointConfig/hooks';
 
-import { useResourceConfig_resourceConfig } from 'stores/ResourceConfig/hooks';
 import { modifyExistingCaptureDraftSpec } from 'utils/workflow-utils';
 
 function useDiscoverDraftUpdate(options?: {
@@ -42,7 +46,10 @@ function useDiscoverDraftUpdate(options?: {
     const setPreviousEndpointConfig =
         useEndpointConfigStore_setPreviousEndpointConfig();
 
-    const resourceConfig = useResourceConfig_resourceConfig();
+    const bindings = useBinding_bindings();
+    const resourceConfig = useBinding_resourceConfigs();
+    const resourceConfigServerUpdateRequired =
+        useBinding_serverUpdateRequired();
 
     const processedEntityName = useEntityNameSuffix(
         !isEdit && options?.initiateDiscovery
@@ -92,7 +99,9 @@ function useDiscoverDraftUpdate(options?: {
                     imagePath,
                     encryptedEndpointConfigResponse,
                     resourceConfig,
-                    existingTaskData
+                    existingTaskData,
+                    resourceConfigServerUpdateRequired,
+                    bindings
                 );
 
                 if (draftSpecsResponse.error) {
@@ -123,6 +132,7 @@ function useDiscoverDraftUpdate(options?: {
             return true;
         },
         [
+            bindings,
             callFailed,
             draftId,
             endpointConfigData,
@@ -133,6 +143,7 @@ function useDiscoverDraftUpdate(options?: {
             postGenerateMutate,
             processedEntityName,
             resourceConfig,
+            resourceConfigServerUpdateRequired,
             setDraftId,
             setEncryptedEndpointConfig,
             setPreviousEndpointConfig,

src/components/capture/useDiscoverCapture.ts

@@ -7,20 +7,20 @@ import {
 import { useEntityWorkflow_Editing } from 'context/Workflow';
 import useEntityNameSuffix from 'hooks/useEntityNameSuffix';
 import { useCallback, useMemo } from 'react';
+import { useBinding_resourceConfigErrorsExist } from 'stores/Binding/hooks';
 import { useDetailsForm_errorsExist } from 'stores/DetailsForm/hooks';
 import {
-    useEndpointConfig_serverUpdateRequired,
     useEndpointConfigStore_encryptedEndpointConfig_data,
     useEndpointConfigStore_endpointConfig_data,
     useEndpointConfigStore_errorsExist,
+    useEndpointConfig_serverUpdateRequired,
 } from 'stores/EndpointConfig/hooks';
 import {
     useFormStateStore_isActive,
     useFormStateStore_setFormState,
     useFormStateStore_updateStatus,
 } from 'stores/FormState/hooks';
 import { FormStatus } from 'stores/FormState/types';
-import { useResourceConfig_resourceConfigErrorsExist } from 'stores/ResourceConfig/hooks';
 import { Entity } from 'types';
 import useDiscoverConfigEncrypt from './useCaptureConfigEncrypt';
 import useDiscoverDraftUpdate from './useCaptureDraftUpdate';
@@ -40,6 +40,9 @@ function useDiscoverCapture(
 
     const isEdit = useEntityWorkflow_Editing();
 
+    // Binding Store
+    const resourceConfigErrorsExist = useBinding_resourceConfigErrorsExist();
+
     // Draft Editor Store
     const persistedDraftId = useEditorStore_persistedDraftId();
     const isSaving = useEditorStore_isSaving();
@@ -61,10 +64,6 @@ function useDiscoverCapture(
     const endpointConfigErrorsExist = useEndpointConfigStore_errorsExist();
     const serverUpdateRequired = useEndpointConfig_serverUpdateRequired();
 
-    // Resource Config Store
-    const resourceConfigHasErrors =
-        useResourceConfig_resourceConfigErrorsExist();
-
     // If we are doing an initial discovery add the name name to the name
     // If not we are either refreshing collections during create OR during edit
     //  Refreshing during:
@@ -83,7 +82,7 @@ function useDiscoverCapture(
             if (
                 detailsFormsHasErrors ||
                 endpointConfigErrorsExist ||
-                resourceConfigHasErrors
+                resourceConfigErrorsExist
             ) {
                 setFormState({
                     status: FormStatus.FAILED,
@@ -147,7 +146,7 @@ function useDiscoverCapture(
             persistedDraftId,
             processedEntityName,
             resetEditorState,
-            resourceConfigHasErrors,
+            resourceConfigErrorsExist,
             serverEndpointConfigData,
             serverUpdateRequired,
             setCatalogName,

src/components/collection/Config.tsx

@@ -1,20 +1,20 @@
 import { Typography, useTheme } from '@mui/material';
 import MessageWithLink from 'components/content/MessageWithLink';
 import BindingsMultiEditor from 'components/editor/Bindings';
-import { useBindingsEditorStore_fullSourceErrorsExist } from 'components/editor/Bindings/Store/hooks';
 import AlertBox from 'components/shared/AlertBox';
 import WrapperWithHeader from 'components/shared/Entity/WrapperWithHeader';
 import ErrorBoundryWrapper from 'components/shared/ErrorBoundryWrapper';
 import { DraftSpecQuery } from 'hooks/useDraftSpecs';
 import { WarningCircle } from 'iconoir-react';
 import { ReactNode } from 'react';
 import { FormattedMessage } from 'react-intl';
-import { useFormStateStore_messagePrefix } from 'stores/FormState/hooks';
 import {
-    useResourceConfig_collectionErrorsExist,
-    useResourceConfig_hydrationErrorsExist,
-    useResourceConfig_resourceConfigErrorsExist,
-} from 'stores/ResourceConfig/hooks';
+    useBinding_bindingErrorsExist,
+    useBinding_fullSourceErrorsExist,
+    useBinding_hydrationErrorsExist,
+    useBinding_resourceConfigErrorsExist,
+} from 'stores/Binding/hooks';
+import { useFormStateStore_messagePrefix } from 'stores/FormState/hooks';
 
 interface Props {
     draftSpecs: DraftSpecQuery[];
@@ -31,26 +31,21 @@ function CollectionConfig({
 }: Props) {
     const theme = useTheme();
 
+    // Binding Store
+    const bindingHydrationErrorsExist = useBinding_hydrationErrorsExist();
+    const resourceConfigErrorsExist = useBinding_resourceConfigErrorsExist();
+    const bindingErrorsExist = useBinding_bindingErrorsExist();
+    const fullSourceErrorsExist = useBinding_fullSourceErrorsExist();
+
     // Form State Store
     const messagePrefix = useFormStateStore_messagePrefix();
 
-    // Resource Config Store
-    const resourceConfigHydrationErrorsExist =
-        useResourceConfig_hydrationErrorsExist();
-
-    const resourceConfigHasErrors =
-        useResourceConfig_resourceConfigErrorsExist();
-    const fullSourceErrorsExist =
-        useBindingsEditorStore_fullSourceErrorsExist();
-
-    const collectionsHasErrors = useResourceConfig_collectionErrorsExist();
-
     const hasErrors =
-        resourceConfigHydrationErrorsExist ||
-        resourceConfigHasErrors ||
+        bindingHydrationErrorsExist ||
+        resourceConfigErrorsExist ||
         fullSourceErrorsExist;
 
-    const hasWarnings = collectionsHasErrors;
+    const hasWarnings = bindingErrorsExist;
 
     return (
         <WrapperWithHeader
@@ -78,7 +73,7 @@ function CollectionConfig({
             }
         >
             <ErrorBoundryWrapper>
-                {resourceConfigHydrationErrorsExist ? (
+                {bindingHydrationErrorsExist ? (
                     <AlertBox
                         severity="error"
                         title={

src/components/collection/ResourceConfig.tsx

@@ -8,33 +8,42 @@ import { useEntityType } from 'context/EntityContext';
 import { useEntityWorkflow_Editing } from 'context/Workflow';
 import { FormattedMessage } from 'react-intl';
 import {
-    useResourceConfig_hydrated,
-    useResourceConfig_resourceConfigOfCollectionProperty,
-} from 'stores/ResourceConfig/hooks';
+    useBinding_currentBindingIndex,
+    useBinding_hydrated,
+    useBinding_resourceConfigOfMetaBindingProperty,
+} from 'stores/Binding/hooks';
 import { BindingsEditorConfigSkeleton } from './CollectionSkeletons';
 
 interface Props {
+    bindingUUID: string;
     collectionName: string;
     readOnly?: boolean;
 }
 
-function ResourceConfig({ collectionName, readOnly = false }: Props) {
+function ResourceConfig({
+    bindingUUID,
+    collectionName,
+    readOnly = false,
+}: Props) {
     const entityType = useEntityType();
     const isEdit = useEntityWorkflow_Editing();
 
-    const hydrated = useResourceConfig_hydrated();
+    const hydrated = useBinding_hydrated();
+    const stagedBindingIndex = useBinding_currentBindingIndex();
 
     const draftedBindingIndex =
-        useEditorStore_queryResponse_draftedBindingIndex(collectionName);
+        useEditorStore_queryResponse_draftedBindingIndex(
+            collectionName,
+            stagedBindingIndex
+        );
 
     // If the collection is disabled then it will not come back in the built spec
     //  binding list. This means the user could end up clicking "See Fields" button
     //  forever and never get fields listed.
-    const collectionDisabled =
-        useResourceConfig_resourceConfigOfCollectionProperty(
-            collectionName,
-            'disable'
-        );
+    const collectionDisabled = useBinding_resourceConfigOfMetaBindingProperty(
+        bindingUUID,
+        'disable'
+    );
 
     return (
         <>
@@ -45,6 +54,7 @@ function ResourceConfig({ collectionName, readOnly = false }: Props) {
             <Box sx={{ width: '100%' }}>
                 {hydrated ? (
                     <ResourceConfigForm
+                        bindingUUID={bindingUUID}
                         collectionName={collectionName}
                         readOnly={readOnly}
                     />
@@ -65,11 +75,17 @@ function ResourceConfig({ collectionName, readOnly = false }: Props) {
             ) : null}
 
             {entityType === 'materialization' && !collectionDisabled ? (
-                <FieldSelectionViewer collectionName={collectionName} />
+                <FieldSelectionViewer
+                    bindingUUID={bindingUUID}
+                    collectionName={collectionName}
+                />
             ) : null}
 
             {entityType === 'materialization' ? (
-                <TimeTravel collectionName={collectionName} />
+                <TimeTravel
+                    bindingUUID={bindingUUID}
+                    collectionName={collectionName}
+                />
             ) : null}
         </>
     );