chore: Add back Preview Mode shortcut (#31602)

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 -->

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");
   });

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)),
   };
 };
 

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>
         </>
       }