Full entity refresh start (not live) (#1257)

* adding back in the data flow reset stuff
defaulting to true
making sure we only show the review when there are backfills

* Moving away from chip list to a drop down as that is more usable

* Fixing some typing on auto completes
Updating store with target value
Controlling continue button

* wiring up passing around settings
cleaning up logging
ordering props to make them a bit more readable

* Making shared function for disabling

* Creating a handler hook for processing update

* Handling "empty" value

* Moved the pop up to a stand alone dialog to keep things simpler. This
 new flow is complex enough trying to work it into existing code was just
 too much.
Saving off the live spec we check if it exists to show review
Starting to flesh out the data flow dialog
Renaming in case we move away from a "modal" approach

* moving buttons to the bottom

* Language tweaks
adding where logs will be

* Adding fitwidth to alerts so we don't have to keep wrapping it

* Using the fitWidth prop

* Disabling the editor when backfill data flow is enabled
Showing alert informing user why the editor is disabled

* Do not want the dialog closing when clicking outside of it accidentally

* Adding missing keywords

* typing
passing entire option to make life easier

* This should close when selected as you can only select one

* The default should be only on multiples and not the root setting

* Okay so this is A LOT. But overall all this is doing is taking the work
 that was previously committed and breaking it up a little. The idea here
 is similar to how tables store columns.

* Some renaming to remove `Step` from names

* Commenting out work so this stuff can be merged now

* Removing the onClick stuff from the chips

* Commenting out alert

* cleaning up logging

* don't need to save right now

* noting work

* Adding error handling

* notes on the data

* PR: cleaning up spread that is no longer needed

* pr: typos

* PR: typing

* PR: typing

* Removing needless type

src/app/guards/EntityExistenceGuard.tsx

@@ -12,6 +12,9 @@ function EntityExistenceGuard({ children }: BaseComponentProps) {
 
     const entityType = useEntityType();
 
+    // TODO (data flow reset)
+    // const setLiveSpec = useFormStateStore_setLiveSpec();
+
     const { liveSpecs, isValidating: checkingEntityExistence } =
         useLiveSpecsExtWithSpec(liveSpecId, entityType);
 
@@ -20,6 +23,9 @@ function EntityExistenceGuard({ children }: BaseComponentProps) {
     } else if (liveSpecs.length === 0) {
         return <EntityNotFound />;
     } else {
+        // TODO (data flow reset)
+        // setLiveSpec(liveSpecs[0].spec);
+
         // eslint-disable-next-line react/jsx-no-useless-fragment
         return <>{children}</>;
     }

src/components/editor/Bindings/Backfill/BackfillDataFlowOption.tsx

@@ -28,8 +28,9 @@ function BackfillDataFlowOption({ disabled }: BackfillDataflowOptionProps) {
     }
 
     return (
-        <Box sx={{ mt: 3, maxWidth: 'fit-content' }}>
+        <Box sx={{ mt: 3 }}>
             <AlertBox
+                fitWidth
                 severity="info"
                 short
                 title={intl.formatMessage({

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

@@ -30,7 +30,7 @@ function Backfill({ description, bindingIndex = -1 }: BackfillProps) {
     const intl = useIntl();
     const { updateBackfillCounter } = useUpdateBackfillCounter();
 
-    // TODO (reset dataflow)
+    // TODO (data flow reset)
     // const workflow = useEntityWorkflow();
 
     // Binding Store
@@ -199,11 +199,10 @@ function Backfill({ description, bindingIndex = -1 }: BackfillProps) {
                 ) : null}
             </Stack>
 
-            {/* // TODO (reset dataflow)
-            {bindingIndex === -1 && workflow === 'capture_edit' ? (
+            {/*TODO (data flow reset)*/}
+            {/*            {bindingIndex === -1 && workflow === 'capture_edit' ? (
                 <BackfillDataFlowOption />
-            ) : null}
-            */}
+            ) : null}*/}
         </Box>
     );
 }

src/components/shared/AlertBox.tsx

@@ -1,28 +1,14 @@
-import {
-    Alert,
-    AlertColor,
-    AlertTitle,
-    Typography,
-    useTheme,
-} from '@mui/material';
+import { Alert, AlertTitle, Typography, useTheme } from '@mui/material';
 import { alertBackground, alertTextPrimary } from 'context/Theme';
 import {
     CheckCircle,
     InfoCircle,
     WarningCircle,
     XmarkCircle,
 } from 'iconoir-react';
-import { forwardRef, ReactNode, useMemo } from 'react';
+import { forwardRef, useMemo } from 'react';
 import { FormattedMessage } from 'react-intl';
-import { BaseComponentProps } from 'types';
-
-interface Props extends BaseComponentProps {
-    severity: AlertColor;
-    short?: boolean;
-    hideIcon?: boolean;
-    title?: string | ReactNode;
-    onClose?: () => void;
-}
+import { AlertBoxProps } from './types';
 
 const SHARED_STYLING = {
     borderRadius: 2,
@@ -37,8 +23,8 @@ const HEADER_MESSAGE = {
     error: 'alert.error',
 };
 
-const AlertBox = forwardRef<any, Props>(function NavLinkRef(
-    { short, severity, hideIcon, title, children, onClose },
+const AlertBox = forwardRef<any, AlertBoxProps>(function NavLinkRef(
+    { short, severity, hideIcon, title, children, onClose, fitWidth },
     ref
 ) {
     const theme = useTheme();
@@ -92,6 +78,7 @@ const AlertBox = forwardRef<any, Props>(function NavLinkRef(
                 'color': alertTextPrimary[theme.palette.mode],
                 'borderColor': theme.palette[severity][theme.palette.mode],
                 'padding': 0,
+                'maxWidth': fitWidth ? 'fit-content' : undefined,
                 'pl': hideIcon ? 2 : undefined,
                 '& > .MuiAlert-message': {
                     p: 1,

src/components/shared/AutoComplete/DefaultProps.tsx

@@ -13,18 +13,16 @@ const PopperComponent = styled(Popper)({
     },
 }) as any;
 
-export const autoCompleteDefaults_Virtual_Multiple: AutocompleteProps<
+export const autoCompleteDefaults_Virtual: AutocompleteProps<
+    any,
     any,
-    true,
     false,
     false,
     'div'
 > = {
     ListboxComponent,
     PopperComponent,
-    blurOnSelect: false,
     disableCloseOnSelect: true,
-    multiple: true,
     options: [], // You MUST provide these yourself
     size: 'small',
     renderInput: () => null, // You MUST provide these yourself
@@ -33,3 +31,15 @@ export const autoCompleteDefaults_Virtual_Multiple: AutocompleteProps<
         return [props, option, state.selected] as React.ReactNode;
     },
 };
+
+export const autoCompleteDefaults_Virtual_Multiple: AutocompleteProps<
+    any,
+    true,
+    false,
+    false,
+    'div'
+> = {
+    ...autoCompleteDefaults_Virtual,
+    multiple: true,
+    blurOnSelect: false,
+};

src/components/shared/Entity/Actions/Save.tsx

@@ -4,7 +4,7 @@ import {
     useEditorStore_isSaving,
 } from 'components/editor/Store/hooks';
 import { buttonSx } from 'components/shared/Entity/Header';
-import { FormattedMessage } from 'react-intl';
+import { useIntl } from 'react-intl';
 
 import { useFormStateStore_isActive } from 'stores/FormState/hooks';
 import { EntityCreateSaveButtonProps } from './types';
@@ -18,44 +18,41 @@ function EntityCreateSave({
     logEvent,
     onFailure,
 }: EntityCreateSaveButtonProps) {
+    const intl = useIntl();
+
     const save = useSave(logEvent, onFailure, dryRun);
 
     const isSaving = useEditorStore_isSaving();
     const formActive = useFormStateStore_isActive();
     const draftId = useEditorStore_id();
 
-    // TODO (reset dataflow)
-    // const showDataFlowResetPrompt = useDataFlowResetPrompt();
-    // const [backfillDataflow] = useBindingStore((state) => [
-    //     state.backfillDataFlow,
-    // ]);
-
-    const labelId = buttonLabelId
-        ? buttonLabelId
-        : dryRun === true
-        ? `cta.testConfig${loading ? '.active' : ''}`
-        : `cta.saveEntity${loading ? '.active' : ''}`;
+    // TODO (data flow reset)
+    // const setShowPreSavePrompt = useFormStateStore_setShowPreSavePrompt();
+    // const backfillDataflow = useBindingStore((state) => state.backfillDataFlow);
+    // const needsBackfilled = useBinding_backfilledBindings_count();
 
     return (
         <Button
+            disabled={disabled || isSaving || formActive}
+            sx={buttonSx}
             onClick={async () => {
-                // TODO (reset dataflow)
-                // if (!dryRun && backfillDataflow) {
-                //     showDataFlowResetPrompt((data) => {
-                //         if (data) {
-                //             console.log('YES', { data });
-                //         } else {
-                //             console.log('NO', { data });
-                //         }
-                //     });
-                //     return;
+                // TODO (data flow reset)
+                // if (!dryRun && backfillDataflow && needsBackfilled) {
+                //     setShowPreSavePrompt(true);
+                // } else {
+                //     await save(draftId);
                 // }
+
                 await save(draftId);
             }}
-            disabled={disabled || isSaving || formActive}
-            sx={buttonSx}
         >
-            <FormattedMessage id={labelId} />
+            {intl.formatMessage({
+                id: buttonLabelId
+                    ? buttonLabelId
+                    : dryRun === true
+                    ? `cta.testConfig${loading ? '.active' : ''}`
+                    : `cta.saveEntity${loading ? '.active' : ''}`,
+            })}
         </Button>
     );
 }

src/components/shared/Entity/CatalogEditor.tsx

@@ -20,6 +20,11 @@ function CatalogEditor({ messageId }: Props) {
     const formStatus = useFormStateStore_status();
     const formActive = useFormStateStore_isActive();
 
+    // TODO (data flow reset)
+    // const intl = useIntl();
+    // const backfillDataflow = useBindingStore((state) => state.backfillDataFlow);
+    // const needsBackfilled = useBinding_backfilledBindings_count();
+
     if (draftId && formStatus !== FormStatus.INIT) {
         return (
             <WrapperWithHeader
@@ -36,6 +41,22 @@ function CatalogEditor({ messageId }: Props) {
                         <FormattedMessage id={messageId} />
                     </Typography>
 
+                    {/*TODO (data flow reset) - also make sure editor is disabled*/}
+                    {/*                    {backfillDataFlow && needsBackfilled ? (
+                        <AlertBox
+                            fitWidth
+                            short
+                            severity="warning"
+                            title={intl.formatMessage({
+                                id: 'dataflowReset.editor.warning.title',
+                            })}
+                        >
+                            {intl.formatMessage({
+                                id: 'dataflowReset.editor.warning.message',
+                            })}
+                        </AlertBox>
+                    ) : null}*/}
+
                     <Paper variant="outlined" sx={{ p: 1 }}>
                         <DraftSpecEditor
                             disabled={formActive}

src/components/shared/Entity/DetailsForm/Form.tsx

@@ -231,8 +231,8 @@ function DetailsFormForm({ connectorTags, entityType, readOnly }: Props) {
     return (
         <>
             {readOnly ? (
-                <Box sx={{ mb: 2, maxWidth: 'fit-content' }}>
-                    <AlertBox short severity="info">
+                <Box sx={{ mb: 2 }}>
+                    <AlertBox fitWidth short severity="info">
                         {intl.formatMessage({
                             id: 'entityEdit.alert.detailsFormDisabled',
                         })}

src/components/shared/Entity/Edit/index.tsx

@@ -212,6 +212,9 @@ function EntityEdit({
                     <CatalogEditor
                         messageId={`${messagePrefix}.finalReview.instructions`}
                     />
+
+                    {/*TODO (data flow reset)*/}
+                    {/*<PreSavePrompt />*/}
                 </DraftSpecEditorHydrator>
             )}
         </>

src/components/shared/Entity/hooks/useDataFlowResetHandler.tsx

@@ -0,0 +1,40 @@
+import { createPublication } from 'api/publications';
+import { useEditorStore_id } from 'components/editor/Store/hooks';
+import { useCallback } from 'react';
+import { useBindingStore } from 'stores/Binding/Store';
+import { generateDisabledSpec } from 'utils/entity-utils';
+
+function useDataFlowResetHandler() {
+    const [backfillDataFlowTarget] = useBindingStore((state) => [
+        state.backfillDataFlowTarget,
+    ]);
+
+    const draftId = useEditorStore_id();
+
+    return useCallback(async () => {
+        console.log('Starting');
+
+        // Capture - Disable
+        generateDisabledSpec({}, false, false);
+
+        // Capture - Publish
+        const publishResponse = await createPublication(draftId, false);
+        if (publishResponse.error) {
+            console.log('publishResponse.error', publishResponse.error);
+            // return failed(publishResponse);
+        }
+
+        // waitForPublishToFinish(publishResponse.data[0].id, false);
+
+        // Runtime must stop 100% and is done writing documents (wait for publication to succeed and then wait… or keep looking for shards)
+        //      (IMPORTANT) - save current time
+        // Bindings - update backfill property
+        // Capture - enable
+        // Materialization - update notBefore property
+        // Capture & Materialization - Publish
+
+        console.log('backfillDataFlowTarget', backfillDataFlowTarget);
+    }, [backfillDataFlowTarget, draftId]);
+}
+
+export default useDataFlowResetHandler;