#485 Put tooltips on undo/redo buttons that show the action being undone/redone

Author: Adriána Kohanová

js/components/preview/viewerControls/index.js

@@ -11,7 +11,14 @@ import { SettingControls } from './settingsControls';
 import DisplayControls from './displayControls/';
 import { MouseControls } from './mouseControls';
 import { ActionCreators as UndoActionCreators } from 'redux-undo';
-import { undoAction, redoAction, getCanRedo, getCanUndo } from '../../../../js/reducers/tracking/dispatchActions';
+import {
+  undoAction,
+  redoAction,
+  getCanRedo,
+  getCanUndo,
+  getUndoActionText,
+  getRedoActionText
+} from '../../../../js/reducers/tracking/dispatchActions';
 import { NglContext } from '../../nglView/nglProvider';
 
 const drawers = {
@@ -33,6 +40,8 @@ export const ViewerControls = memo(({}) => {
   const classes = useStyles();
   const dispatch = useDispatch();
   const { nglViewList } = useContext(NglContext);
+  const [undoTooltip, setUndoTooltip] = useState('Undo');
+  const [redoTooltip, setRedoTooltip] = useState('Redo');
   const [canUndo, setCanUndo] = useState(true);
   const [canRedo, setCanRedo] = useState(false);
 
@@ -51,13 +60,19 @@ export const ViewerControls = memo(({}) => {
     setCanRedo(dispatch(getCanRedo()));
     setCanUndo(dispatch(getCanUndo()));
     dispatch(undoAction(nglViewList));
+
+    setUndoTooltip(dispatch(getUndoActionText()));
+    setRedoTooltip(dispatch(getRedoActionText()));
   };
 
   const doRedo = () => {
     dispatch(UndoActionCreators.redo());
     setCanRedo(dispatch(getCanRedo()));
     setCanUndo(dispatch(getCanUndo()));
     dispatch(redoAction(nglViewList));
+
+    setUndoTooltip(dispatch(getUndoActionText()));
+    setRedoTooltip(dispatch(getRedoActionText()));
   };
 
   const handleUserKeyPress = useCallback(e => {
@@ -82,7 +97,7 @@ export const ViewerControls = memo(({}) => {
       <Grid container justify="center">
         <Grid item>
           <ButtonGroup variant="contained" color="primary">
-            <Tooltip title="Undo">
+            <Tooltip title={undoTooltip}>
               <Button
                 size="small"
                 color="primary"
@@ -120,7 +135,7 @@ export const ViewerControls = memo(({}) => {
                 <Mouse />
               </Button>
             </Tooltip>
-            <Tooltip title="Redo">
+            <Tooltip title={redoTooltip}>
               <Button
                 size="small"
                 color="primary"

js/reducers/tracking/dispatchActions.js

@@ -834,7 +834,6 @@ const restoreAllSelectionActions = (moleculesAction, stage, isSelection) => (dis
 };
 
 const restoreAllSelectionByTypeActions = (moleculesAction, stage, isSelection) => (dispatch, getState) => {
-
   let actions =
     isSelection === true
       ? moleculesAction.filter(
@@ -1092,36 +1091,70 @@ const getCompound = (action, state) => {
 };
 
 export const undoAction = (stages = []) => (dispatch, getState) => {
-  const state = getState();
-  let action = null;
-
   dispatch(setIsUndoRedoAction(true));
+  let action = dispatch(getUndoAction());
+  if (action) {
+    Promise.resolve(dispatch(handleUndoAction(action, stages))).then(() => {
+      dispatch(setIsUndoRedoAction(false));
+    });
+  }
+};
 
+const getUndoAction = () => (dispatch, getState) => {
+  const state = getState();
   const actionUndoList = state.undoableTrackingReducers.future;
+
+  let action = { text: '' };
   let actions = actionUndoList && actionUndoList[0];
   if (actions) {
     let actionsLenght = actions.undo_redo_actions_list.length;
     actionsLenght = actionsLenght > 0 ? actionsLenght - 1 : actionsLenght;
     action = actions.undo_redo_actions_list[actionsLenght];
-
-    Promise.resolve(dispatch(handleUndoAction(action, stages))).then(() => {
-      dispatch(setIsUndoRedoAction(false));
-    });
   }
+
+  return action;
 };
 
-export const redoAction = (stages = []) => (dispatch, getState) => {
+const getRedoAction = () => (dispatch, getState) => {
   const state = getState();
-  let action = null;
-
-  dispatch(setIsUndoRedoAction(true));
-
   const actions = state.undoableTrackingReducers.present;
+
+  let action = { text: '' };
   if (actions) {
     let actionsLenght = actions.undo_redo_actions_list.length;
     actionsLenght = actionsLenght > 0 ? actionsLenght - 1 : actionsLenght;
     action = actions.undo_redo_actions_list[actionsLenght];
+  }
 
+  return action;
+};
+
+const getNextUndoAction = () => (dispatch, getState) => {
+  const state = getState();
+  const actionUndoList = state.undoableTrackingReducers.present;
+
+  let action = { text: '' };
+  let actions = actionUndoList && actionUndoList.undo_redo_actions_list;
+  if (actions) {
+    let actionsLenght = actions.length;
+    actionsLenght = actionsLenght > 0 ? actionsLenght - 1 : actionsLenght;
+    action = actions[actionsLenght];
+  }
+
+  return action;
+};
+
+const getNextRedoAction = () => (dispatch, getState) => {
+  const state = getState();
+  let action = { text: '' };
+
+  return action;
+};
+
+export const redoAction = (stages = []) => (dispatch, getState) => {
+  dispatch(setIsUndoRedoAction(true));
+  let action = dispatch(getRedoAction());
+  if (action) {
     Promise.resolve(dispatch(dispatch(handleRedoAction(action, stages)))).then(() => {
       dispatch(setIsUndoRedoAction(false));
     });
@@ -1709,6 +1742,16 @@ export const getCanRedo = () => (dispatch, getState) => {
   return state.undoableTrackingReducers.future.length > 0;
 };
 
+export const getUndoActionText = () => (dispatch, getState) => {
+  let action = dispatch(getNextUndoAction());
+  return action?.text ?? '';
+};
+
+export const getRedoActionText = () => (dispatch, getState) => {
+  let action = dispatch(getNextRedoAction());
+  return action?.text ?? '';
+};
+
 export const appendAndSendTrackingActions = trackAction => (dispatch, getState) => {
   const state = getState();
   const isUndoRedoAction = state.trackingReducers.isUndoRedoAction;