Dataset undo/redo refactoring

src/ui/units/datasets/components/DatasetPanel/DatasetPanel.tsx

@@ -32,7 +32,7 @@ function TabSwitch(props: TabSwitchProps) {
     return (
         <RadioButton
             qa={DatasetPanelQA.TabRadio}
-            defaultValue={tab}
+            value={tab}
             onChange={(e) => switchTab(e.target.value)}
         >
             {tabs.map(({value, label, disabled}) => (

src/ui/units/datasets/components/DatasetRouter/DatasetRouter.tsx

@@ -10,7 +10,6 @@ import {Route, Switch, withRouter} from 'react-router-dom';
 import type {Dispatch} from 'redux';
 import {bindActionCreators} from 'redux';
 import {setCurrentPageEntry} from 'store/actions/asideHeader';
-import {selectAsideHeaderData} from 'store/selectors/asideHeader';
 import {registry} from 'ui/registry';
 import {resetDatasetState} from 'units/datasets/store/actions/creators';
 
@@ -19,6 +18,8 @@ import withInaccessibleOnMobile from '../../../../hoc/withInaccessibleOnMobile';
 import DatasetPage from '../../containers/DatasetPage/DatasetPage';
 import {datasetKeySelector} from '../../store/selectors/dataset';
 
+import {UnloadConfirmation} from './UnloadConfirmation';
+
 import './DatasetRouter.scss';
 
 const b = block('dataset-router');
@@ -33,14 +34,7 @@ type Props = StateProps &
         sdk: SDK;
     };
 
-const DatasetRouter = ({
-    sdk,
-    datasetKey,
-    setCurrentPageEntry,
-    asideHeaderData,
-    resetDatasetState,
-    match,
-}: Props) => {
+const DatasetRouter = ({sdk, datasetKey, setCurrentPageEntry, resetDatasetState, match}: Props) => {
     const isAsideHeaderEnabled = getIsAsideHeaderEnabled();
     const {extractEntryId} = registry.common.functions.getAll();
     const possibleEntryId = extractEntryId(window.location.pathname);
@@ -49,7 +43,7 @@ const DatasetRouter = ({
         return () => {
             resetDatasetState();
         };
-    }, []);
+    }, [resetDatasetState]);
 
     const prevMatch = usePrevious(match) || match;
 
@@ -60,7 +54,7 @@ const DatasetRouter = ({
         if (prevEntryId !== currentEntryId) {
             resetDatasetState();
         }
-    }, [prevMatch.url, match.url]);
+    }, [prevMatch.url, match.url, extractEntryId, resetDatasetState]);
 
     React.useEffect(() => {
         if (!isAsideHeaderEnabled || !possibleEntryId || !datasetKey) {
@@ -71,37 +65,43 @@ const DatasetRouter = ({
             entryId: possibleEntryId,
             key: datasetKey,
         });
-    }, [isAsideHeaderEnabled, possibleEntryId, datasetKey]);
+    }, [isAsideHeaderEnabled, possibleEntryId, datasetKey, setCurrentPageEntry]);
 
     return (
         <div className={b()}>
             <Switch>
                 <Route
                     path={['/datasets/new', '/workbooks/:workbookId/datasets/new']}
-                    render={(props) => (
-                        <DatasetPage
-                            {...props}
-                            sdk={sdk}
-                            asideHeaderData={asideHeaderData}
-                            isCreationProcess={true}
-                        />
-                    )}
+                    render={(props: RouteComponentProps<{workbookId?: string}>) => {
+                        const {workbookId} = props.match.params;
+                        return <DatasetPage {...props} sdk={sdk} datasetId={workbookId} />;
+                    }}
                 />
                 <Route
                     path={['/datasets/:datasetId', '/workbooks/:workbookId/datasets/:datasetId']}
-                    render={(props) => (
-                        <DatasetPage {...props} asideHeaderData={asideHeaderData} sdk={sdk} />
-                    )}
+                    render={(
+                        props: RouteComponentProps<{datasetId?: string; workbookId?: string}>,
+                    ) => {
+                        const {datasetId, workbookId} = props.match.params;
+                        return (
+                            <DatasetPage
+                                {...props}
+                                sdk={sdk}
+                                datasetId={datasetId}
+                                workbookId={workbookId}
+                            />
+                        );
+                    }}
                 />
             </Switch>
+            <UnloadConfirmation />
         </div>
     );
 };
 
 const mapStateToProps = (state: DatalensGlobalState) => {
     return {
         datasetKey: datasetKeySelector(state),
-        asideHeaderData: selectAsideHeaderData(state),
     };
 };
 

src/ui/units/datasets/components/DatasetRouter/UnloadConfirmation.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+
+import type History from 'history';
+import {i18n} from 'i18n';
+import {useSelector} from 'react-redux';
+import {Prompt, useLocation} from 'react-router-dom';
+import {selectIsRenameWithoutReload} from 'ui/store/selectors/entryContent';
+import {
+    isDatasetChangedDatasetSelector,
+    isDatasetRevisionMismatchSelector,
+    isSavingDatasetDisabledSelector,
+} from 'ui/units/datasets/store/selectors';
+
+export const UnloadConfirmation = () => {
+    const currentLocation = useLocation();
+    const isRenameWithoutReload = useSelector(selectIsRenameWithoutReload);
+    const isSavingDatasetDisabled = useSelector(isSavingDatasetDisabledSelector);
+    const isDatasetRevisionMismatch = useSelector(isDatasetRevisionMismatchSelector);
+    const isDatasetChangedDataset = useSelector(isDatasetChangedDatasetSelector);
+    const [isAlreadyConfirmed, setIsAlreadyConfirmed] = React.useState(false);
+    const isConfirmationAvailable =
+        !isAlreadyConfirmed &&
+        (!isSavingDatasetDisabled || isDatasetChangedDataset) &&
+        !isRenameWithoutReload &&
+        !isDatasetRevisionMismatch;
+
+    const message = React.useCallback(
+        (location: History.Location<unknown>) => {
+            setIsAlreadyConfirmed(true);
+            setTimeout(() => setIsAlreadyConfirmed(false), 0);
+            if (location.pathname !== currentLocation.pathname) {
+                return i18n('component.navigation-prompt', 'label_prompt-message');
+            }
+
+            return true;
+        },
+        [currentLocation.pathname],
+    );
+
+    React.useEffect(() => {
+        const beforeUnloadHandler = (event: BeforeUnloadEvent) => {
+            if (isConfirmationAvailable) {
+                // eslint-disable-next-line no-param-reassign
+                event.returnValue = true;
+            }
+        };
+
+        window.addEventListener('beforeunload', beforeUnloadHandler);
+
+        return () => {
+            window.removeEventListener('beforeunload', beforeUnloadHandler);
+        };
+    }, [isConfirmationAvailable]);
+
+    return <Prompt when={isConfirmationAvailable} message={message} />;
+};

src/ui/units/datasets/constants/index.ts

@@ -253,7 +253,7 @@ export const SUBSELECT_SOURCE_TYPES = [
     'YQ_SUBSELECT',
 ];
 
-export const DATASETS_EDIT_HISTORY_UNIT_ID = 'datsets';
+export const DATASETS_EDIT_HISTORY_UNIT_ID = 'datasets';
 
 /** This timeout uses for batching operations to decrease validation invocations count */
 export const DATASET_VALIDATION_TIMEOUT = 2000;