Expose onIncompatibleSchemaChange properties in materialization workflows

src/components/editor/Bindings/OnIncompatibleSchemaChange/Form.tsx

@@ -11,7 +11,6 @@ import { useIntl } from 'react-intl';
 import {
     useBinding_currentBindingUUID,
     useBinding_currentCollection,
-    useBinding_resourceConfigOfMetaBindingProperty,
 } from 'stores/Binding/hooks';
 import { useBindingStore } from 'stores/Binding/Store';
 import { useFormStateStore_setFormState } from 'stores/FormState/hooks';
@@ -26,12 +25,6 @@ function Form({ bindingIndex = -1 }: OnIncompatibleSchemaChangeProps) {
     const currentCollection = useBinding_currentCollection();
     const currentBindingUUID = useBinding_currentBindingUUID();
 
-    const incompatibleSchemaChange =
-        useBinding_resourceConfigOfMetaBindingProperty(
-            currentBindingUUID,
-            'onIncompatibleSchemaChange'
-        );
-
     const setIncompatibleSchemaChange = useBindingStore(
         (state) => state.setBindingOnIncompatibleSchemaChange
     );
@@ -58,12 +51,15 @@ function Form({ bindingIndex = -1 }: OnIncompatibleSchemaChangeProps) {
         async (value?: AutoCompleteOption | null) => {
             setFormState({ status: FormStatus.UPDATING, error: null });
 
-            if (currentBindingUUID) {
-                setIncompatibleSchemaChange(value?.val);
-            }
-
             updateOnIncompatibleSchemaChange(value?.val, bindingMetadata)
                 .then(() => {
+                    if (currentBindingUUID) {
+                        setIncompatibleSchemaChange(
+                            value?.val,
+                            currentBindingUUID
+                        );
+                    }
+
                     setFormState({ status: FormStatus.UPDATED });
                 })
                 .catch((err) => {
@@ -77,12 +73,17 @@ function Form({ bindingIndex = -1 }: OnIncompatibleSchemaChangeProps) {
                         { ...snackbarSettings, variant: 'error' }
                     );
 
+                    setIncompatibleSchemaChange(
+                        currentSetting,
+                        currentBindingUUID
+                    );
                     setFormState({ status: FormStatus.FAILED });
                 });
         },
         [
             bindingMetadata,
             currentBindingUUID,
+            currentSetting,
             enqueueSnackbar,
             intl,
             setFormState,
@@ -93,13 +94,7 @@ function Form({ bindingIndex = -1 }: OnIncompatibleSchemaChangeProps) {
 
     return (
         <IncompatibleSchemaChangeForm
-            currentSetting={
-                currentSetting
-                    ? currentSetting
-                    : typeof incompatibleSchemaChange === 'string'
-                    ? incompatibleSchemaChange
-                    : ''
-            }
+            currentSetting={currentSetting ? currentSetting : ''}
             updateDraftedSetting={updateServer}
         />
     );

src/components/incompatibleSchemaChange/Form.tsx

@@ -11,6 +11,7 @@ import useSupportedOptions from 'hooks/OnIncompatibleSchemaChange/useSupportedOp
 import { useEffect, useMemo, useState } from 'react';
 import { useIntl } from 'react-intl';
 import { useFormStateStore_isActive } from 'stores/FormState/hooks';
+import { autoCompleteDefaultProps } from './shared';
 import { BaseFormProps } from './types';
 
 export default function IncompatibleSchemaChangeForm({
@@ -27,7 +28,7 @@ export default function IncompatibleSchemaChangeForm({
     const options = useSupportedOptions();
 
     const selection = useMemo(() => {
-        if (!currentSetting) {
+        if (!currentSetting || typeof currentSetting !== 'string') {
             return null;
         }
 
@@ -68,7 +69,10 @@ export default function IncompatibleSchemaChangeForm({
                                 id: 'incompatibleSchemaChange.error.message',
                             },
                             {
-                                currentSetting,
+                                currentSetting:
+                                    typeof currentSetting === 'string'
+                                        ? currentSetting
+                                        : JSON.stringify(currentSetting),
                             }
                         )}
                     </Typography>
@@ -87,9 +91,8 @@ export default function IncompatibleSchemaChangeForm({
                 </AlertBox>
             ) : null}
 
-            {/* The presence of ListboxComponent in autoCompleteDefaultProps prevents
-                the options from rendering. */}
             <Autocomplete
+                {...autoCompleteDefaultProps}
                 disabled={formActive}
                 getOptionLabel={(option) => option.label}
                 inputValue={inputValue}
@@ -108,8 +111,12 @@ export default function IncompatibleSchemaChangeForm({
                     );
                 }}
                 onChange={(_state, newVal) => updateDraftedSetting(newVal)}
-                onInputChange={(_event, newInputValue) => {
-                    setInputValue(newInputValue);
+                onInputChange={(event, newInputValue) => {
+                    // Set the input value component state only when an option is clicked
+                    // to avoid clashing with the effect which also updates this state.
+                    if (Boolean(event)) {
+                        setInputValue(newInputValue);
+                    }
                 }}
                 options={options}
                 renderInput={(params) => {
@@ -124,7 +131,15 @@ export default function IncompatibleSchemaChangeForm({
                                           {
                                               id: 'incompatibleSchemaChange.error.message',
                                           },
-                                          { currentSetting }
+                                          {
+                                              currentSetting:
+                                                  typeof currentSetting ===
+                                                  'string'
+                                                      ? currentSetting
+                                                      : JSON.stringify(
+                                                            currentSetting
+                                                        ),
+                                          }
                                       )
                                     : undefined
                             }

src/components/incompatibleSchemaChange/types.ts

@@ -1,7 +1,7 @@
 import { choices } from './shared';
 
 export interface BaseFormProps {
-    currentSetting: string;
+    currentSetting: any;
     updateDraftedSetting: Function;
 }
 

src/components/materialization/OnIncompatibleSchemaChange/Form.tsx

@@ -26,10 +26,10 @@ export default function Form() {
         async (option?: AutoCompleteOption | null) => {
             setFormState({ status: FormStatus.UPDATING, error: null });
 
-            setIncompatibleSchemaChange(option?.val);
-
             updateOnIncompatibleSchemaChange(option?.val)
                 .then(() => {
+                    setIncompatibleSchemaChange(option?.val);
+
                     setFormState({ status: FormStatus.UPDATED });
                 })
                 .catch(() => {
@@ -40,10 +40,12 @@ export default function Form() {
                         { ...snackbarSettings, variant: 'error' }
                     );
 
+                    setIncompatibleSchemaChange(currentSetting);
                     setFormState({ status: FormStatus.FAILED });
                 });
         },
         [
+            currentSetting,
             enqueueSnackbar,
             intl,
             setFormState,

src/components/shared/Entity/Backfill.tsx

@@ -4,6 +4,7 @@ import { useEntityType } from 'context/EntityContext';
 import { useEntityWorkflow_Editing } from 'context/Workflow';
 import { useIntl } from 'react-intl';
 import OnIncompatibleSchemaChange from '../../materialization/OnIncompatibleSchemaChange';
+import ErrorBoundryWrapper from '../ErrorBoundryWrapper';
 
 export default function Backfill() {
     const intl = useIntl();
@@ -22,7 +23,9 @@ export default function Backfill() {
             ) : null}
 
             {entityType === 'materialization' ? (
-                <OnIncompatibleSchemaChange />
+                <ErrorBoundryWrapper>
+                    <OnIncompatibleSchemaChange />
+                </ErrorBoundryWrapper>
             ) : null}
         </SectionWrapper>
     ) : null;

src/hooks/OnIncompatibleSchemaChange/useBindingIncompatibleSchemaSetting.ts

@@ -6,20 +6,16 @@ import {
 } from 'components/editor/Store/hooks';
 import { AutoCompleteOption } from 'components/incompatibleSchemaChange/types';
 import { useEntityType } from 'context/EntityContext';
+import { cloneDeep } from 'lodash';
 import { useCallback } from 'react';
 import { useIntl } from 'react-intl';
+import { logRocketEvent } from 'services/shared';
 import { BASE_ERROR } from 'services/supabase';
+import { CustomEvents } from 'services/types';
 import { BindingMetadata, Schema } from 'types';
+import { addOrRemoveOnIncompatibleSchemaChange } from 'utils/entity-utils';
 import { hasLength } from 'utils/misc-utils';
 
-const updateSchema = (binding: any, newVal: any) => {
-    if (newVal) {
-        binding.onIncompatibleSchemaChange = newVal;
-    } else {
-        delete binding.onIncompatibleSchemaChange;
-    }
-};
-
 function useBindingIncompatibleSchemaSetting() {
     const intl = useIntl();
     const entityType = useEntityType();
@@ -31,25 +27,31 @@ function useBindingIncompatibleSchemaSetting() {
 
     const updateOnIncompatibleSchemaChange = useCallback(
         async (
-            newVal: AutoCompleteOption['val'] | undefined,
+            value: AutoCompleteOption['val'] | undefined,
             bindingMetadata: BindingMetadata[]
         ) => {
-            const bindingMetadataExists = hasLength(bindingMetadata);
+            if (!mutateDraftSpecs || !draftId || draftSpecs.length === 0) {
+                logRocketEvent(
+                    `${CustomEvents.INCOMPATIBLE_SCHEMA_CHANGE}:Missing Draft Resources`,
+                    {
+                        draftIdMissing: !draftId,
+                        draftSpecMissing: draftSpecs.length === 0,
+                        mutateMissing: !mutateDraftSpecs,
+                    }
+                );
+
+                return Promise.resolve();
+            }
 
-            if (!bindingMetadataExists) {
+            if (!hasLength(bindingMetadata)) {
                 return Promise.resolve();
             }
 
             const invalidBindingIndex = bindingMetadata.findIndex(
                 ({ bindingIndex }) => bindingIndex === -1
             );
 
-            if (
-                !draftId ||
-                !mutateDraftSpecs ||
-                draftSpecs.length === 0 ||
-                invalidBindingIndex > -1
-            ) {
+            if (invalidBindingIndex > -1) {
                 return Promise.reject({
                     ...BASE_ERROR,
                     message: intl.formatMessage(
@@ -64,11 +66,14 @@ function useBindingIncompatibleSchemaSetting() {
                 });
             }
 
-            const spec: Schema = draftSpecs[0].spec;
+            const spec: Schema = cloneDeep(draftSpecs[0].spec);
 
             bindingMetadata.forEach(({ bindingIndex }) => {
                 if (bindingIndex > -1) {
-                    updateSchema(spec.bindings[bindingIndex], newVal);
+                    addOrRemoveOnIncompatibleSchemaChange(
+                        spec.bindings[bindingIndex],
+                        value
+                    );
                 }
             });
 

src/hooks/OnIncompatibleSchemaChange/useSpecificationIncompatibleSchemaSetting.ts

@@ -5,19 +5,14 @@ import {
     useEditorStore_queryResponse_mutate,
 } from 'components/editor/Store/hooks';
 import { AutoCompleteOption } from 'components/incompatibleSchemaChange/types';
+import { cloneDeep } from 'lodash';
 import { useCallback, useMemo } from 'react';
 import { logRocketEvent } from 'services/shared';
 import { CustomEvents } from 'services/types';
-import { useBindingStore } from 'stores/Binding/Store';
 import { Schema } from 'types';
 import { addOrRemoveOnIncompatibleSchemaChange } from 'utils/entity-utils';
 
 export default function useSpecificationIncompatibleSchemaSetting() {
-    // Binding Store
-    const onIncompatibleSchemaChange = useBindingStore(
-        (state) => state.onIncompatibleSchemaChange
-    );
-
     // Draft Editor Store
     const draftId = useEditorStore_persistedDraftId();
     const draftSpecs = useEditorStore_queryResponse_draftSpecs();
@@ -44,7 +39,7 @@ export default function useSpecificationIncompatibleSchemaSetting() {
                 return Promise.resolve();
             }
 
-            const spec: Schema = draftSpec.spec;
+            const spec: Schema = cloneDeep(draftSpec.spec);
 
             addOrRemoveOnIncompatibleSchemaChange(spec, value);
 
@@ -66,8 +61,6 @@ export default function useSpecificationIncompatibleSchemaSetting() {
     return {
         currentSetting: draftSpec?.spec?.onIncompatibleSchemaChange
             ? draftSpec.spec.onIncompatibleSchemaChange
-            : typeof onIncompatibleSchemaChange === 'string'
-            ? onIncompatibleSchemaChange
             : '',
         updateOnIncompatibleSchemaChange,
     };

src/stores/Binding/Store.ts

@@ -870,11 +870,9 @@ const getInitialState = (
         );
     },
 
-    setBindingOnIncompatibleSchemaChange: (value) => {
+    setBindingOnIncompatibleSchemaChange: (value, bindingUUID) => {
         set(
             produce((state: BindingState) => {
-                const bindingUUID = state.currentBinding?.uuid;
-
                 if (bindingUUID) {
                     state.resourceConfigs[
                         bindingUUID

src/stores/Binding/types.ts

@@ -124,7 +124,10 @@ export interface BindingState
     setSpecOnIncompatibleSchemaChange: (
         value: BindingState['onIncompatibleSchemaChange']
     ) => void;
-    setBindingOnIncompatibleSchemaChange: (value: string | undefined) => void;
+    setBindingOnIncompatibleSchemaChange: (
+        value: string | undefined,
+        bindingUUID: string | null
+    ) => void;
 
     // Resource Config
     resourceConfigs: ResourceConfigDictionary;

src/utils/entity-utils.ts

@@ -1,5 +1,5 @@
 import produce from 'immer';
-import { SourceCaptureDef } from 'types';
+import { Schema, SourceCaptureDef } from 'types';
 import { hasLength, specContainsDerivation } from 'utils/misc-utils';
 
 export const updateShardDisabled = (draftSpec: any, enabling: boolean) => {
@@ -65,14 +65,14 @@ export const addOrRemoveSourceCapture = (
 };
 
 export const addOrRemoveOnIncompatibleSchemaChange = (
-    draftSpec: any,
+    schema: Schema,
     value: string | undefined
 ) => {
     if (hasLength(value)) {
-        draftSpec.onIncompatibleSchemaChange = value;
+        schema.onIncompatibleSchemaChange = value;
     } else {
-        delete draftSpec.onIncompatibleSchemaChange;
+        delete schema.onIncompatibleSchemaChange;
     }
 
-    return draftSpec;
+    return schema;
 };