Enabling entity level setting for sourceCapture optional settings

src/components/collection/Selector/Add/index.tsx

@@ -2,23 +2,18 @@ import { Button, Tooltip } from '@mui/material';
 import AddDialog from 'components/shared/Entity/AddDialog';
 import { useEntityType } from 'context/EntityContext';
 import invariableStores from 'context/Zustand/invariableStores';
-import { ReactNode, useState } from 'react';
+import { useState } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
 import { useStore } from 'zustand';
-
-interface Props {
-    selectedCollections: string[];
-    AddSelectedButton: ReactNode;
-    disabled?: boolean;
-}
+import { BindingsEditorAddProps } from '../types';
 
 const DIALOG_ID = 'add-collection-search-dialog';
 
 function BindingsEditorAdd({
     AddSelectedButton,
     disabled,
     selectedCollections,
-}: Props) {
+}: BindingsEditorAddProps) {
     const intl = useIntl();
     const entityType = useEntityType();
 
@@ -80,7 +75,7 @@ function BindingsEditorAdd({
                 entity="collection"
                 id={DIALOG_ID}
                 open={open}
-                primaryCTA={AddSelectedButton}
+                PrimaryCTA={AddSelectedButton}
                 selectedCollections={selectedCollections}
                 toggle={toggleDialog}
                 title={itemType}

src/components/collection/Selector/index.tsx

@@ -1,24 +1,16 @@
 import { Box, Stack, Typography, useTheme } from '@mui/material';
 import { defaultOutline } from 'context/Theme';
-import { ReactNode } from 'react';
 import { useIntl } from 'react-intl';
 import BindingsEditorAdd from './Add';
-
-interface Props {
-    selectedCollections: string[];
-    AddSelectedButton: ReactNode;
-    itemType?: string;
-    readOnly?: boolean;
-    RediscoverButton?: ReactNode;
-}
+import { CollectionSelectorProps } from './types';
 
 function CollectionSelector({
     readOnly = false,
     itemType,
     RediscoverButton,
     AddSelectedButton,
     selectedCollections,
-}: Props) {
+}: CollectionSelectorProps) {
     const intl = useIntl();
     const theme = useTheme();
 

src/components/collection/Selector/types.ts

@@ -0,0 +1,16 @@
+import { AddDialogProps } from 'components/shared/Entity/AddDialog/types';
+import { ReactNode } from 'react';
+
+export interface CollectionSelectorProps {
+    selectedCollections: string[];
+    AddSelectedButton: AddDialogProps['PrimaryCTA'];
+    itemType?: string;
+    readOnly?: boolean;
+    RediscoverButton?: ReactNode;
+}
+
+export interface BindingsEditorAddProps {
+    selectedCollections: string[];
+    AddSelectedButton: AddDialogProps['PrimaryCTA'];
+    disabled?: boolean;
+}

src/components/editor/Bindings/DeltaUpdates/index.tsx

@@ -0,0 +1,41 @@
+import { FormControl, FormControlLabel, Stack, Switch } from '@mui/material';
+import { useIntl } from 'react-intl';
+import { useFormStateStore_isActive } from 'stores/FormState/hooks';
+import { useSourceCaptureStore } from 'stores/SourceCapture/Store';
+
+// https://docs.estuary.dev/concepts/materialization/#delta-updates
+function DeltaUpdates() {
+    const intl = useIntl();
+
+    const formActive = useFormStateStore_isActive();
+
+    const [deltaUpdates, setDeltaUpdates] = useSourceCaptureStore((state) => [
+        state.deltaUpdates,
+        state.setDeltaUpdates,
+    ]);
+
+    return (
+        <Stack spacing={2} sx={{ maxWidth: 'fit-content' }}>
+            <FormControl>
+                <FormControlLabel
+                    control={
+                        <Switch
+                            size="small"
+                            value={Boolean(deltaUpdates)}
+                            checked={deltaUpdates}
+                            disabled={formActive}
+                            onChange={(event, checked) => {
+                                setDeltaUpdates(checked);
+                            }}
+                        />
+                    }
+                    label={intl.formatMessage({
+                        id: 'workflows.sourceCapture.optionalSettings.deltaUpdates.control',
+                    })}
+                />
+            </FormControl>
+        </Stack>
+    );
+}
+
+export default DeltaUpdates;

src/components/editor/Bindings/SchemaMode/SelectorOption.tsx

@@ -0,0 +1,23 @@
+import { Stack, Typography } from '@mui/material';
+import { SelectorOptionProps } from './types';
+
+function SelectorOption({ option }: SelectorOptionProps) {
+    const { description, label } = option;
+
+    return (
+        <Stack component="span" spacing={1}>
+            <Typography component="span">{label}</Typography>
+            <Typography
+                component="span"
+                variant="caption"
+                sx={{
+                    pl: 1.5,
+                }}
+            >
+                {description}
+            </Typography>
+        </Stack>
+    );
+}
+
+export default SelectorOption;

src/components/editor/Bindings/SchemaMode/index.tsx

@@ -0,0 +1,40 @@
+import { FormControl, FormControlLabel, Switch } from '@mui/material';
+import { useIntl } from 'react-intl';
+import { useFormStateStore_isActive } from 'stores/FormState/hooks';
+import { useSourceCaptureStore } from 'stores/SourceCapture/Store';
+
+function SchemaMode() {
+    const intl = useIntl();
+
+    const formActive = useFormStateStore_isActive();
+
+    const [targetSchema, setTargetSchema] = useSourceCaptureStore((state) => [
+        state.targetSchema,
+        state.setTargetSchema,
+    ]);
+
+    return (
+        <FormControl>
+            <FormControlLabel
+                control={
+                    <Switch
+                        size="small"
+                        value={targetSchema}
+                        checked={targetSchema === 'fromSourceName'}
+                        disabled={formActive}
+                        onChange={(event, checked) => {
+                            setTargetSchema(
+                                checked ? 'fromSourceName' : 'leaveEmpty'
+                            );
+                        }}
+                    />
+                }
+                label={intl.formatMessage({
+                    id: 'workflows.sourceCapture.optionalSettings.targetSchema.control',
+                })}
+            />
+        </FormControl>
+    );
+}
+
+export default SchemaMode;

src/components/editor/Bindings/SchemaMode/shared.ts

@@ -0,0 +1,7 @@
+import { getTypedAutoCompleteDefaults } from 'components/shared/AutoComplete/DefaultProps';
+import { AutoCompleteOption } from './types';
+
+export const choices = ['leaveEmpty', 'fromSourceName'] as const;
+
+export const autoCompleteDefaultProps =
+    getTypedAutoCompleteDefaults<AutoCompleteOption>();

src/components/editor/Bindings/SchemaMode/types.ts

@@ -0,0 +1,11 @@
+import { choices } from './shared';
+
+export interface AutoCompleteOption {
+    description: string;
+    label: string;
+    val: (typeof choices)[number];
+}
+
+export interface SelectorOptionProps {
+    option: AutoCompleteOption;
+}

src/components/materialization/SourceCapture/AddSourceCaptureToSpecButton.tsx

@@ -1,11 +1,10 @@
 import { Button } from '@mui/material';
 import { AddCollectionDialogCTAProps } from 'components/shared/Entity/types';
 import invariableStores from 'context/Zustand/invariableStores';
-
 import { FormattedMessage } from 'react-intl';
-
 import { useBinding_prefillResourceConfigs } from 'stores/Binding/hooks';
 import { useSourceCaptureStore } from 'stores/SourceCapture/Store';
+import { SourceCaptureDef } from 'types';
 import { useStore } from 'zustand';
 import useSourceCapture from '../useSourceCapture';
 
@@ -17,33 +16,57 @@ function AddSourceCaptureToSpecButton({ toggle }: AddCollectionDialogCTAProps) {
         }
     );
 
-    const [sourceCapture, setSourceCapture] = useSourceCaptureStore((state) => [
-        state.sourceCapture,
-        state.setSourceCapture,
-    ]);
-
-    const updateDraft = useSourceCapture();
+    const { existingSourceCapture, updateDraft } = useSourceCapture();
+    const [sourceCapture, setSourceCapture, deltaUpdates, targetSchema] =
+        useSourceCaptureStore((state) => [
+            state.sourceCapture,
+            state.setSourceCapture,
+            state.deltaUpdates,
+            state.targetSchema,
+        ]);
 
     // Binding Store
     const prefillResourceConfigs = useBinding_prefillResourceConfigs();
 
     const close = async () => {
         const selectedRow = Array.from(selected).map(([_key, row]) => row)[0];
-        const updatedSourceCapture = selectedRow
+        const updatedSourceCaptureName = selectedRow
             ? selectedRow.catalog_name
             : null;
 
-        // Only fire updates if a change happened. Since single select table can allow the user
-        //   to deselect a row and then select it again
-        if (updatedSourceCapture && sourceCapture !== updatedSourceCapture) {
-            setSourceCapture(updatedSourceCapture);
+        // We need to know if the name or settings changed so that we can control
+        //  what name is used in the call to update the source capture setting
+        const nameUpdated = Boolean(
+            updatedSourceCaptureName &&
+                sourceCapture !== updatedSourceCaptureName
+        );
+        const settingsUpdated =
+            deltaUpdates !== existingSourceCapture?.deltaUpdates ||
+            targetSchema !== existingSourceCapture?.targetSchema;
 
-            if (selectedRow?.writes_to) {
-                prefillResourceConfigs(selectedRow.writes_to, true);
+        // Only update draft is something in the settings changed
+        if (nameUpdated || settingsUpdated) {
+            const updatedSourceCapture: SourceCaptureDef = {
+                capture: nameUpdated ? updatedSourceCaptureName : sourceCapture,
+                deltaUpdates,
+                targetSchema,
+            };
+
+            // Check the name since the optional settings may
+            //  have changed but not the name. Also, we have
+            //  already saved the new optional settings in the
+            //  store so we do not need to update that here
+            if (nameUpdated) {
+                setSourceCapture(updatedSourceCapture.capture);
+
+                if (selectedRow?.writes_to) {
+                    prefillResourceConfigs(selectedRow.writes_to, true);
+                }
             }
 
             await updateDraft(updatedSourceCapture);
         }
+
         toggle(false);
     };
 

src/components/materialization/SourceCapture/CancelSourceCaptureButton.tsx

@@ -0,0 +1,52 @@
+import { Button } from '@mui/material';
+import { AddCollectionDialogCTAProps } from 'components/shared/Entity/types';
+import { useRef } from 'react';
+
+import { FormattedMessage } from 'react-intl';
+import { useMount } from 'react-use';
+import { useSourceCaptureStore_setSourceCaptureDefinition } from 'stores/SourceCapture/hooks';
+import { useSourceCaptureStore } from 'stores/SourceCapture/Store';
+
+import { SourceCaptureDef } from 'types';
+
+function CancelSourceCaptureButton({ toggle }: AddCollectionDialogCTAProps) {
+    // This is here so that we can switch settings back to how they originally were.
+    //  Since the Source Capture modal has a 'cancel' button we need to allow the user
+    //  to change the optional settings and then click cancel and not change anything
+    //  on their draft.
+    const settingsCacheHack = useRef<SourceCaptureDef | null>(null);
+
+    const [sourceCapture, deltaUpdates, targetSchema] = useSourceCaptureStore(
+        (state) => [state.sourceCapture, state.deltaUpdates, state.targetSchema]
+    );
+    const setSourceCaptureDefinition =
+        useSourceCaptureStore_setSourceCaptureDefinition();
+
+    const close = async () => {
+        if (settingsCacheHack.current) {
+            if (settingsCacheHack.current.capture.length > 0) {
+                setSourceCaptureDefinition(settingsCacheHack.current);
+            } else {
+                setSourceCaptureDefinition(null);
+            }
+        }
+
+        toggle(false);
+    };
+
+    useMount(() => {
+        settingsCacheHack.current = {
+            capture: sourceCapture ?? '',
+            deltaUpdates,
+            targetSchema,
+        };
+    });
+
+    return (
+        <Button variant="outlined" onClick={close}>
+            <FormattedMessage id="cta.cancel" />
+        </Button>
+    );
+}
+
+export default CancelSourceCaptureButton;