query designer - undo

packages/web/src/designer/Designer.js

@@ -128,10 +128,13 @@ export default function Designer({ value, onChange, conid, database }) {
 
   const bringToFront = React.useCallback(
     (table) => {
-      onChange((current) => ({
+      onChange(
-        ...current,
+        (current) => ({
-        tables: [...(current.tables || []).filter((x) => x.designerId != table.designerId), table],
+          ...current,
-      }));
+          tables: [...(current.tables || []).filter((x) => x.designerId != table.designerId), table],
+        }),
+        true
+      );
     },
     [onChange]
   );
@@ -260,14 +263,17 @@ export default function Designer({ value, onChange, conid, database }) {
 
   const handleSelectColumn = React.useCallback(
     (column) => {
-      onChange((current) => ({
+      onChange(
-        ...current,
+        (current) => ({
-        columns: (current.columns || []).find(
+          ...current,
-          (x) => x.designerId == column.designerId && x.columnName == column.columnName
+          columns: (current.columns || []).find(
-        )
+            (x) => x.designerId == column.designerId && x.columnName == column.columnName
-          ? current.columns
+          )
-          : [...cleanupDesignColumns(current.columns), _.pick(column, ['designerId', 'columnName'])],
+            ? current.columns
-      }));
+            : [...cleanupDesignColumns(current.columns), _.pick(column, ['designerId', 'columnName'])],
+        }),
+        true
+      );
     },
     [onChange]
   );
@@ -275,19 +281,20 @@ export default function Designer({ value, onChange, conid, database }) {
   const handleChangeColumn = React.useCallback(
     (column, changeFunc) => {
       onChange((current) => {
-        const existing = (current.columns || []).find(
+        const currentColumns = (current || {}).columns || [];
+        const existing = currentColumns.find(
           (x) => x.designerId == column.designerId && x.columnName == column.columnName
         );
         if (existing) {
           return {
             ...current,
-            columns: current.columns.map((x) => (x == existing ? changeFunc(existing) : x)),
+            columns: currentColumns.map((x) => (x == existing ? changeFunc(existing) : x)),
           };
         } else {
           return {
             ...current,
             columns: [
-              ...cleanupDesignColumns(current.columns),
+              ...cleanupDesignColumns(currentColumns),
               changeFunc(_.pick(column, ['designerId', 'columnName'])),
             ],
           };

packages/web/src/designer/QueryDesignColumns.js

@@ -6,7 +6,7 @@ import InlineButton from '../widgets/InlineButton';
 import { findDesignerFilterType } from './designerTools';
 
 function getTableDisplayName(column, tables) {
-  const table = tables.find((x) => x.designerId == column.designerId);
+  const table = (tables || []).find((x) => x.designerId == column.designerId);
   if (table) return table.alias || table.pureName;
   return '';
 }

packages/web/src/designer/QueryDesignToolbar.js

@@ -2,7 +2,7 @@ import React from 'react';
 import useHasPermission from '../utility/useHasPermission';
 import ToolbarButton from '../widgets/ToolbarButton';
 
-export default function QueryDesignToolbar({ execute, isDatabaseDefined, busy, save }) {
+export default function QueryDesignToolbar({ execute, isDatabaseDefined, busy, save, modelState, dispatchModel }) {
   const hasPermission = useHasPermission();
   return (
     <>
@@ -14,6 +14,12 @@ export default function QueryDesignToolbar({ execute, isDatabaseDefined, busy, s
           Save
         </ToolbarButton>
       )}
+      <ToolbarButton disabled={!modelState.canUndo} onClick={() => dispatchModel({ type: 'undo' })} icon="icon undo">
+        Undo
+      </ToolbarButton>
+      <ToolbarButton disabled={!modelState.canRedo} onClick={() => dispatchModel({ type: 'redo' })} icon="icon redo">
+        Redo
+      </ToolbarButton>
     </>
   );
 }

packages/web/src/tabs/QueryDesignTab.js

@@ -24,6 +24,7 @@ import QueryDesigner from '../designer/QueryDesigner';
 import QueryDesignColumns from '../designer/QueryDesignColumns';
 import { findEngineDriver } from 'dbgate-tools';
 import { generateDesignedQuery } from '../designer/designerTools';
+import useUndoReducer from '../utility/useUndoReducer';
 
 export default function QueryDesignTab({ tabid, conid, database, tabVisible, toolbarPortalRef, ...other }) {
   const [sessionId, setSessionId] = React.useState(null);
@@ -36,11 +37,26 @@ export default function QueryDesignTab({ tabid, conid, database, tabVisible, too
   const connection = useConnectionInfo({ conid });
   const engine = findEngineDriver(connection, extensions);
   const [sqlPreview, setSqlPreview] = React.useState('');
-  const { editorData, setEditorData, isLoading } = useEditorData({
+  const { initialData, setEditorData, isLoading } = useEditorData({
     tabid,
   });
+  const [modelState, dispatchModel] = useUndoReducer(
+    {
+      tables: [],
+      references: [],
+      columns: [],
+    },
+    { mergeNearActions: true }
+  );
 
-  const editorRef = React.useRef(null);
+  React.useEffect(() => {
+    // @ts-ignore
+    if (initialData) dispatchModel({ type: 'reset', value: initialData });
+  }, [initialData]);
+
+  React.useEffect(() => {
+    setEditorData(modelState.value);
+  }, [modelState]);
 
   const handleSessionDone = React.useCallback(() => {
     setBusy(false);
@@ -53,8 +69,19 @@ export default function QueryDesignTab({ tabid, conid, database, tabVisible, too
   };
 
   React.useEffect(() => {
-    generatePreview(editorData, engine);
+    generatePreview(modelState.value, engine);
-  }, [editorData, engine]);
+  }, [modelState.value, engine]);
+
+  const handleChange = React.useCallback(
+    (value, skipUndoChain) =>
+      // @ts-ignore
+      dispatchModel({
+        type: 'compute',
+        useMerge: skipUndoChain,
+        compute: (v) => (_.isFunction(value) ? value(v) : value),
+      }),
+    [dispatchModel]
+  );
 
   React.useEffect(() => {
     if (sessionId && socket) {
@@ -136,15 +163,15 @@ export default function QueryDesignTab({ tabid, conid, database, tabVisible, too
     <>
       <VerticalSplitter initialValue="70%">
         <QueryDesigner
-          value={editorData || {}}
+          value={modelState.value || {}}
           conid={conid}
           database={database}
           engine={connection && connection.engine}
-          onChange={setEditorData}
+          onChange={handleChange}
         ></QueryDesigner>
         <ResultTabs sessionId={sessionId} executeNumber={executeNumber}>
           <TabPage label="Columns" key="columns">
-            <QueryDesignColumns value={editorData || {}} onChange={setEditorData} />
+            <QueryDesignColumns value={modelState.value || {}} onChange={handleChange} />
           </TabPage>
           <TabPage label="SQL" key="sql">
             <SqlEditor value={sqlPreview} engine={engine} readOnly />
@@ -164,6 +191,8 @@ export default function QueryDesignTab({ tabid, conid, database, tabVisible, too
         tabVisible &&
         ReactDOM.createPortal(
           <QueryDesignToolbar
+            modelState={modelState}
+            dispatchModel={dispatchModel}
             isDatabaseDefined={conid && database}
             execute={handleExecute}
             busy={busy}
@@ -178,7 +207,7 @@ export default function QueryDesignTab({ tabid, conid, database, tabVisible, too
       <SaveTabModal
         modalState={saveFileModalState}
         tabVisible={tabVisible}
-        data={editorData}
+        data={modelState.value}
         format="json"
         folder="query"
         tabid={tabid}

packages/web/src/utility/useUndoReducer.js

@@ -1,24 +1,31 @@
 import _ from 'lodash';
 import React from 'react';
 
-function reducer(state, action) {
+const reducer = (options) => (state, action) => {
+  const { mergeNearActions } = options || {};
+
+  const useMerge =
+    action.useMerge || (mergeNearActions && state.lastActionTm && new Date().getTime() - state.lastActionTm < 100);
+
   switch (action.type) {
     case 'set':
       return {
-        history: [...state.history.slice(0, state.current + 1), action.value],
+        history: [...state.history.slice(0, useMerge ? state.current : state.current + 1), action.value],
-        current: state.current + 1,
+        current: useMerge ? state.current : state.current + 1,
         value: action.value,
         canUndo: true,
         canRedo: false,
+        lastActionTm: new Date().getTime(),
       };
     case 'compute': {
       const newValue = action.compute(state.history[state.current]);
       return {
-        history: [...state.history.slice(0, state.current + 1), newValue],
+        history: [...state.history.slice(0, useMerge ? state.current : state.current + 1), newValue],
-        current: state.current + 1,
+        current: useMerge ? state.current : state.current + 1,
         value: newValue,
         canUndo: true,
         canRedo: false,
+        lastActionTm: new Date().getTime(),
       };
     }
     case 'undo':
@@ -29,6 +36,7 @@ function reducer(state, action) {
           value: state.history[state.current - 1],
           canUndo: state.current > 1,
           canRedo: true,
+          lastActionTm: null,
         };
       return state;
     case 'redo':
@@ -39,6 +47,7 @@ function reducer(state, action) {
           value: state.history[state.current + 1],
           canUndo: true,
           canRedo: state.current < state.history.length - 2,
+          lastActionTm: null,
         };
       return state;
     case 'reset':
@@ -46,12 +55,13 @@ function reducer(state, action) {
         history: [action.value],
         current: 0,
         value: action.value,
+        lastActionTm: null,
       };
   }
-}
+};
 
-export default function useUndoReducer(initialValue) {
+export default function useUndoReducer(initialValue, options) {
-  return React.useReducer(reducer, {
+  return React.useReducer(reducer(options), {
     history: [initialValue],
     current: 0,
     value: initialValue,

packages/web/src/widgets/Toolbar.js

@@ -109,7 +109,6 @@ export default function ToolBar({ toolbarPortalRef }) {
     } else if (openTabdata) {
       try {
         const json = JSON.parse(decodeURIComponent(openTabdata));
-        console.log('TABDATA', json);
         openFavorite(json);
         window.history.replaceState(null, null, ' ');
       } catch (err) {