Add resource schema-related state to binding store

kiahna-tucker · kiahna-tucker · commit 491fea5ae275 · 2024-02-17T08:30:26.000-05:00
diff --git a/src/components/capture/Create/index.tsx b/src/components/capture/Create/index.tsx
@@ -87,8 +87,8 @@ function CaptureCreate() {
     return (
         <DetailsFormHydrator>
             <EndpointConfigHydrator>
-                <ResourceConfigHydrator>
-                    <BindingHydrator>
+                <BindingHydrator>
+                    <ResourceConfigHydrator>
                         <MutateDraftSpecProvider value={updateDraftSpecs}>
                             <EntityCreate
                                 entityType={entityType}
@@ -135,8 +135,8 @@ function CaptureCreate() {
                                 }
                             />
                         </MutateDraftSpecProvider>
-                    </BindingHydrator>
-                </ResourceConfigHydrator>
+                    </ResourceConfigHydrator>
+                </BindingHydrator>
             </EndpointConfigHydrator>
         </DetailsFormHydrator>
     );
diff --git a/src/components/capture/Edit.tsx b/src/components/capture/Edit.tsx
@@ -69,8 +69,8 @@ function CaptureEdit() {
         <DraftInitializer>
             <DetailsFormHydrator>
                 <EndpointConfigHydrator>
-                    <ResourceConfigHydrator>
-                        <BindingHydrator>
+                    <BindingHydrator>
+                        <ResourceConfigHydrator>
                             <MutateDraftSpecProvider value={updateDraftSpecs}>
                                 <EntityEdit
                                     title="routeTitle.captureEdit"
@@ -115,8 +115,8 @@ function CaptureEdit() {
                                     }
                                 />
                             </MutateDraftSpecProvider>
-                        </BindingHydrator>
-                    </ResourceConfigHydrator>
+                        </ResourceConfigHydrator>
+                    </BindingHydrator>
                 </EndpointConfigHydrator>
             </DetailsFormHydrator>
         </DraftInitializer>
diff --git a/src/components/collection/ResourceConfigForm.tsx b/src/components/collection/ResourceConfigForm.tsx
@@ -4,13 +4,13 @@ import { useEffect, useMemo, useRef } from 'react';
 import { custom_generateDefaultUISchema } from 'services/jsonforms';
 import { jsonFormsDefaults } from 'services/jsonforms/defaults';
 import { showValidation } from 'services/jsonforms/shared';
+import { useBinding_resourceSchema } from 'stores/Binding/hooks';
 import {
     useFormStateStore_displayValidation,
     useFormStateStore_isActive,
 } from 'stores/FormState/hooks';
 import {
     useResourceConfig_resourceConfigOfCollectionProperty,
-    useResourceConfig_resourceSchema,
     useResourceConfig_updateResourceConfig,
 } from 'stores/ResourceConfig/hooks';
 
@@ -29,7 +29,7 @@ function ResourceConfigForm({ collectionName, readOnly = false }: Props) {
     );
 
     const updateResourceConfig = useResourceConfig_updateResourceConfig();
-    const resourceSchema = useResourceConfig_resourceSchema();
+    const resourceSchema = useBinding_resourceSchema();
 
     // Form State Store
     const displayValidation = useFormStateStore_displayValidation();
diff --git a/src/components/editor/Bindings/UpdateResourceConfigButton.tsx b/src/components/editor/Bindings/UpdateResourceConfigButton.tsx
@@ -3,6 +3,7 @@ import { AddCollectionDialogCTAProps } from 'components/shared/Entity/types';
 import invariableStores from 'context/Zustand/invariableStores';
 
 import { FormattedMessage } from 'react-intl';
+import { useBinding_resourceSchema } from 'stores/Binding/hooks';
 import {
     useResourceConfig_discoveredCollections,
     useResourceConfig_setResourceConfig,
@@ -19,6 +20,8 @@ function UpdateResourceConfigButton({ toggle }: AddCollectionDialogCTAProps) {
         }
     );
 
+    const resourceSchema = useBinding_resourceSchema();
+
     const discoveredCollections = useResourceConfig_discoveredCollections();
     const setResourceConfig = useResourceConfig_setResourceConfig();
     const setRestrictedDiscoveredCollections =
@@ -33,6 +36,7 @@ function UpdateResourceConfigButton({ toggle }: AddCollectionDialogCTAProps) {
 
         setResourceConfig(
             value.map(({ name }) => name),
+            resourceSchema,
             undefined,
             false,
             true
diff --git a/src/components/editor/Bindings/index.tsx b/src/components/editor/Bindings/index.tsx
@@ -17,6 +17,7 @@ import { DraftSpecQuery } from 'hooks/useDraftSpecs';
 import { useServerUpdateRequiredMonitor } from 'hooks/useServerUpdateRequiredMonitor';
 import { ReactNode, useEffect, useMemo } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
+import { useBinding_setResourceSchema } from 'stores/Binding/hooks';
 import {
     useDetailsForm_connectorImage,
     useDetailsForm_details_entityName,
@@ -25,7 +26,6 @@ import { useFormStateStore_messagePrefix } from 'stores/FormState/hooks';
 import {
     useResourceConfig_discoveredCollections,
     useResourceConfig_resetResourceConfigAndCollections,
-    useResourceConfig_setResourceSchema,
 } from 'stores/ResourceConfig/hooks';
 import { EditorStoreNames } from 'stores/names';
 import { Schema } from 'types';
@@ -70,7 +70,7 @@ function BindingsMultiEditor({
     // Resource Config Store
     const discoveredCollections = useResourceConfig_discoveredCollections();
 
-    const setResourceSchema = useResourceConfig_setResourceSchema();
+    const setResourceSchema = useBinding_setResourceSchema();
 
     const resetResourceConfigAndCollections =
         useResourceConfig_resetResourceConfigAndCollections();
diff --git a/src/components/materialization/Create/index.tsx b/src/components/materialization/Create/index.tsx
@@ -70,8 +70,8 @@ function MaterializationCreate() {
     return (
         <DetailsFormHydrator>
             <EndpointConfigHydrator>
-                <ResourceConfigHydrator>
-                    <BindingHydrator>
+                <BindingHydrator>
+                    <ResourceConfigHydrator>
                         <MutateDraftSpecProvider value={updateDraftSpecs}>
                             <EntityCreate
                                 entityType={entityType}
@@ -104,8 +104,8 @@ function MaterializationCreate() {
                                 }
                             />
                         </MutateDraftSpecProvider>
-                    </BindingHydrator>
-                </ResourceConfigHydrator>
+                    </ResourceConfigHydrator>
+                </BindingHydrator>
             </EndpointConfigHydrator>
         </DetailsFormHydrator>
     );
diff --git a/src/components/materialization/Edit.tsx b/src/components/materialization/Edit.tsx
@@ -66,8 +66,8 @@ function MaterializationEdit() {
         <DraftInitializer>
             <DetailsFormHydrator>
                 <EndpointConfigHydrator>
-                    <ResourceConfigHydrator>
-                        <BindingHydrator>
+                    <BindingHydrator>
+                        <ResourceConfigHydrator>
                             <MutateDraftSpecProvider value={updateDraftSpecs}>
                                 <EntityEdit
                                     title="routeTitle.materializationEdit"
@@ -102,8 +102,8 @@ function MaterializationEdit() {
                                     }
                                 />
                             </MutateDraftSpecProvider>
-                        </BindingHydrator>
-                    </ResourceConfigHydrator>
+                        </ResourceConfigHydrator>
+                    </BindingHydrator>
                 </EndpointConfigHydrator>
             </DetailsFormHydrator>
         </DraftInitializer>
diff --git a/src/components/materialization/SourceCapture/AddSourceCaptureToSpecButton.tsx b/src/components/materialization/SourceCapture/AddSourceCaptureToSpecButton.tsx
@@ -5,6 +5,7 @@ import invariableStores from 'context/Zustand/invariableStores';
 import { FormattedMessage } from 'react-intl';
 import { useResourceConfig_setResourceConfig } from 'stores/ResourceConfig/hooks';
 
+import { useBinding_resourceSchema } from 'stores/Binding/hooks';
 import { useStore } from 'zustand';
 import useSourceCapture from '../useSourceCapture';
 
@@ -25,6 +26,7 @@ function AddSourceCaptureToSpecButton({ toggle }: AddCollectionDialogCTAProps) {
 
     const updateDraft = useSourceCapture();
 
+    const resourceSchema = useBinding_resourceSchema();
     const setResourceConfig = useResourceConfig_setResourceConfig();
 
     const close = async () => {
@@ -41,6 +43,7 @@ function AddSourceCaptureToSpecButton({ toggle }: AddCollectionDialogCTAProps) {
             if (selectedRow?.writes_to) {
                 setResourceConfig(
                     selectedRow.writes_to,
+                    resourceSchema,
                     undefined,
                     false,
                     true
diff --git a/src/hooks/useServerUpdateRequiredMonitor.ts b/src/hooks/useServerUpdateRequiredMonitor.ts
@@ -50,6 +50,15 @@ const useServerUpdateRequiredMonitor = (draftSpecs: DraftSpecQuery[]) => {
                     }
 
                     // Since we checked disabled up above we can not just check if the data changed
+                    console.log(
+                        collectionName,
+                        !isEqual(
+                            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+                            resourceConfig[collectionName]?.data,
+                            resource
+                        )
+                    );
+
                     return !isEqual(
                         // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
                         resourceConfig[collectionName]?.data,
diff --git a/src/stores/Binding/Store.ts b/src/stores/Binding/Store.ts
@@ -2,6 +2,7 @@ import { getDraftSpecsByDraftId } from 'api/draftSpecs';
 import {
     getLiveSpecsById_writesTo,
     getLiveSpecsByLiveSpecId,
+    getSchema_Resource,
 } from 'api/hydration';
 import { GlobalSearchParams } from 'hooks/searchParams/useGlobalSearchParams';
 import produce from 'immer';
@@ -11,6 +12,7 @@ import {
     getStoreWithHydrationSettings,
 } from 'stores/extensions/Hydration';
 import { BindingStoreNames } from 'stores/names';
+import { Schema } from 'types';
 import { hasLength } from 'utils/misc-utils';
 import { devtoolsOptions } from 'utils/store-utils';
 import { getCollectionName } from 'utils/workflow-utils';
@@ -34,41 +36,23 @@ const getInitialBindingData = (): Pick<BindingState, 'bindings'> => ({
     bindings: {},
 });
 
-const getInitialStateData = () => ({
+const getInitialStateData = (): Pick<BindingState, 'resourceSchema'> => ({
+    resourceSchema: {},
+});
+
+const getInitialStoreData = () => ({
     ...getInitialBindingData(),
+    ...getInitialStateData(),
     ...getInitialHydrationData(),
 });
 
 const getInitialState = (
     set: NamedSet<BindingState>,
     get: StoreApi<BindingState>['getState']
 ): BindingState => ({
-    ...getInitialStateData(),
+    ...getInitialStoreData(),
     ...getStoreWithHydrationSettings(STORE_KEY, set),
 
-    prefillBindingDependentState: (bindings, _referenceBindings) => {
-        set(
-            produce((state: BindingState) => {
-                bindings.forEach((binding) => {
-                    const collection = getCollectionName(binding);
-                    const UUID = crypto.randomUUID();
-
-                    const existingBindingIds: string[] = Object.hasOwn(
-                        state.bindings,
-                        collection
-                    )
-                        ? state.bindings[collection]
-                        : [];
-
-                    state.bindings[collection] =
-                        existingBindingIds.concat(UUID);
-                });
-            }),
-            false,
-            'Binding dependent state prefilled'
-        );
-    },
-
     addEmptyBindings: (data, rehydrating) => {
         set(
             produce((state: BindingState) => {
@@ -117,7 +101,7 @@ const getInitialState = (
 
     hydrateState: async (editWorkflow, entityType, rehydrating) => {
         const searchParams = new URLSearchParams(window.location.search);
-        // const connectorId = searchParams.get(GlobalSearchParams.CONNECTOR_ID);
+        const connectorId = searchParams.get(GlobalSearchParams.CONNECTOR_ID);
         const draftId = searchParams.get(GlobalSearchParams.DRAFT_ID);
         const liveSpecIds = searchParams.getAll(
             GlobalSearchParams.LIVE_SPEC_ID
@@ -134,19 +118,19 @@ const getInitialState = (
 
         // resetState(materializationRehydrating);
 
-        // if (connectorId) {
-        //     const { data, error } = await getSchema_Resource(connectorId);
+        if (connectorId) {
+            const { data, error } = await getSchema_Resource(connectorId);
 
-        //     if (error) {
-        //         setHydrationErrorsExist(true);
-        //     } else if (data && data.length > 0) {
-        //         const { setResourceSchema } = get();
+            if (error) {
+                setHydrationErrorsExist(true);
+            } else if (data && data.length > 0) {
+                const { setResourceSchema } = get();
 
-        //         setResourceSchema(
-        //             data[0].resource_spec_schema as unknown as Schema
-        //         );
-        //     }
-        // }
+                setResourceSchema(
+                    data[0].resource_spec_schema as unknown as Schema
+                );
+            }
+        }
 
         if (editWorkflow && liveSpecIds.length > 0) {
             const { data: liveSpecs, error: liveSpecError } =
@@ -203,12 +187,35 @@ const getInitialState = (
         return Promise.resolve(null);
     },
 
+    prefillBindingDependentState: (bindings, _referenceBindings) => {
+        set(
+            produce((state: BindingState) => {
+                bindings.forEach((binding) => {
+                    const collection = getCollectionName(binding);
+                    const UUID = crypto.randomUUID();
+
+                    const existingBindingIds: string[] = Object.hasOwn(
+                        state.bindings,
+                        collection
+                    )
+                        ? state.bindings[collection]
+                        : [];
+
+                    state.bindings[collection] =
+                        existingBindingIds.concat(UUID);
+                });
+            }),
+            false,
+            'Binding dependent state prefilled'
+        );
+    },
+
     resetState: (keepCollections) => {
         const currentState = get();
 
         const initState = keepCollections
             ? getInitialBindingData()
-            : getInitialStateData();
+            : getInitialStoreData();
 
         const newState = {
             ...currentState,
@@ -217,6 +224,16 @@ const getInitialState = (
 
         set(newState, false, 'Binding State Reset');
     },
+
+    setResourceSchema: (value) => {
+        set(
+            produce((state: BindingState) => {
+                state.resourceSchema = value;
+            }),
+            false,
+            'Resource Schema Set'
+        );
+    },
 });
 
 export const bindingStore = create<BindingState>()(
diff --git a/src/stores/Binding/hooks.ts b/src/stores/Binding/hooks.ts
@@ -50,3 +50,17 @@ export const useBinding_resetState = () => {
         (state) => state.resetState
     );
 };
+
+export const useBinding_resourceSchema = () => {
+    return useZustandStore<BindingState, BindingState['resourceSchema']>(
+        BindingStoreNames.GENERAL,
+        (state) => state.resourceSchema
+    );
+};
+
+export const useBinding_setResourceSchema = () => {
+    return useZustandStore<BindingState, BindingState['setResourceSchema']>(
+        BindingStoreNames.GENERAL,
+        (state) => state.setResourceSchema
+    );
+};
diff --git a/src/stores/Binding/types.ts b/src/stores/Binding/types.ts
@@ -18,6 +18,11 @@ export interface BindingState extends StoreWithHydration {
         rehydrating?: boolean
     ) => void;
 
+    // Resource Schema
+    resourceSchema: Schema;
+    setResourceSchema: (val: BindingState['resourceSchema']) => void;
+
+    // Misc.
     hydrateState: (
         editWorkflow: boolean,
         entityType: Entity,
diff --git a/src/stores/ResourceConfig/Hydrator.tsx b/src/stores/ResourceConfig/Hydrator.tsx
diff --git a/src/stores/ResourceConfig/Store.ts b/src/stores/ResourceConfig/Store.ts
diff --git a/src/stores/ResourceConfig/hooks.ts b/src/stores/ResourceConfig/hooks.ts
diff --git a/src/stores/ResourceConfig/types.ts b/src/stores/ResourceConfig/types.ts
