From 98edccb970f188f430934d5eaf6bf30e00cb2acd Mon Sep 17 00:00:00 2001
From: Hetu Nandu <hetu@appsmith.com>
Date: Mon, 11 Mar 2024 10:02:19 +0530
Subject: [PATCH] chore: Add back Preview Mode shortcut (#31602)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds back the preview mode shortcut now with a modifier key to be `⌥ +
P` on mac or `Alt + P` on windows

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **New Features**
- Enhanced the Preview Mode with additional hotkeys (`alt + p`) for
toggling, improving user experience in navigating the editor.
- Improved tooltip messages for better clarity on shortcuts available to
the user.

- **Tests**
- Updated regression tests to cover new Preview Mode functionality and
ensure its reliability.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../ClientSide/OtherUIFeatures/PreviewMode_spec.js   |  2 +-
 .../src/pages/Editor/GlobalHotKeys/GlobalHotKeys.tsx | 12 ++++++++++++
 app/client/src/pages/Editor/ToggleModeButton.tsx     |  5 ++++-
 3 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/app/client/cypress/e2e/Regression/ClientSide/OtherUIFeatures/PreviewMode_spec.js b/app/client/cypress/e2e/Regression/ClientSide/OtherUIFeatures/PreviewMode_spec.js
index fc82ad75e1..4d6b64fe5b 100644
--- a/app/client/cypress/e2e/Regression/ClientSide/OtherUIFeatures/PreviewMode_spec.js
+++ b/app/client/cypress/e2e/Regression/ClientSide/OtherUIFeatures/PreviewMode_spec.js
@@ -4,7 +4,7 @@ const commonlocators = require("../../../../locators/commonlocators.json");
 const publishPage = require("../../../../locators/publishWidgetspage.json");
 import * as _ from "../../../../support/Objects/ObjectsCore";
 
-describe("Preview mode functionality", function () {
+describe("Preview mode functionality", { tags: ["@tag.IDE"] }, function () {
   before(() => {
     _.agHelper.AddDsl("previewMode");
   });
diff --git a/app/client/src/pages/Editor/GlobalHotKeys/GlobalHotKeys.tsx b/app/client/src/pages/Editor/GlobalHotKeys/GlobalHotKeys.tsx
index 59561c5e3b..cf0b91bf18 100644
--- a/app/client/src/pages/Editor/GlobalHotKeys/GlobalHotKeys.tsx
+++ b/app/client/src/pages/Editor/GlobalHotKeys/GlobalHotKeys.tsx
@@ -47,6 +47,7 @@ import { showDebuggerFlag } from "selectors/debuggerSelectors";
 import { getIsFirstTimeUserOnboardingEnabled } from "selectors/onboardingSelectors";
 import WalkthroughContext from "components/featureWalkthrough/walkthroughContext";
 import { protectedModeSelector } from "selectors/gitSyncSelectors";
+import { setPreviewModeInitAction } from "actions/editorActions";
 
 interface Props {
   copySelectedWidget: () => void;
@@ -71,6 +72,7 @@ interface Props {
   appMode?: APP_MODE;
   isPreviewMode: boolean;
   isProtectedMode: boolean;
+  setPreviewModeInitAction: (shouldSet: boolean) => void;
   isSignpostingEnabled: boolean;
   showCommitModal: () => void;
   getMousePosition: () => { x: number; y: number };
@@ -327,6 +329,14 @@ class GlobalHotKeys extends React.Component<Props> {
           preventDefault
           stopPropagation
         />
+        <Hotkey
+          combo="alt + p"
+          global
+          label="Preview Mode"
+          onKeyDown={() => {
+            this.props.setPreviewModeInitAction(!this.props.isPreviewMode);
+          }}
+        />
         <Hotkey
           combo="ctrl + shift + g"
           global
@@ -383,6 +393,8 @@ const mapDispatchToProps = (dispatch: any) => {
         }),
       ),
     hideInstaller: () => dispatch(toggleInstaller(false)),
+    setPreviewModeInitAction: (shouldSet: boolean) =>
+      dispatch(setPreviewModeInitAction(shouldSet)),
   };
 };
 
diff --git a/app/client/src/pages/Editor/ToggleModeButton.tsx b/app/client/src/pages/Editor/ToggleModeButton.tsx
index 8796e9e0da..ee882fa4db 100644
--- a/app/client/src/pages/Editor/ToggleModeButton.tsx
+++ b/app/client/src/pages/Editor/ToggleModeButton.tsx
@@ -10,6 +10,7 @@ import { setPreviewModeInitAction } from "actions/editorActions";
 import { previewModeSelector } from "selectors/editorSelectors";
 
 import { createMessage, EDITOR_HEADER } from "@appsmith/constants/messages";
+import { altText } from "../../utils/helpers";
 
 function ToggleModeButton() {
   const dispatch = useDispatch();
@@ -31,7 +32,9 @@ function ToggleModeButton() {
         <>
           {createMessage(EDITOR_HEADER.previewTooltip.text)}
           <span style={{ marginLeft: 20 }}>
-            {createMessage(EDITOR_HEADER.previewTooltip.shortcut)}
+            {`${altText()} ${createMessage(
+              EDITOR_HEADER.previewTooltip.shortcut,
+            )}`}
           </span>
         </>
       }