[WIKI-530] regression: page version history dropdown item (#7360)

apps/web/core/components/pages/editor/toolbar/options-dropdown.tsx

@@ -2,18 +2,22 @@
 
 import { useMemo, useState } from "react";
 import { observer } from "mobx-react";
-import { ArrowUpToLine, Clipboard } from "lucide-react";
+import { ArrowUpToLine, Clipboard, History } from "lucide-react";
 // plane imports
 import { TContextMenuItem, TOAST_TYPE, ToggleSwitch, setToast } from "@plane/ui";
 import { copyTextToClipboard } from "@plane/utils";
 // components
 import { ExportPageModal, PageActions, TPageActions } from "@/components/pages";
 // hooks
+import { useAppRouter } from "@/hooks/use-app-router";
 import { usePageFilters } from "@/hooks/use-page-filters";
+import { useQueryParams } from "@/hooks/use-query-params";
 // plane web imports
+import { TPageNavigationPaneTab } from "@/plane-web/components/pages/navigation-pane";
 import { EPageStoreType } from "@/plane-web/hooks/store";
 // store
 import { TPageInstance } from "@/store/pages/base-page";
+import { PAGE_NAVIGATION_PANE_TABS_QUERY_PARAM } from "../../navigation-pane";
 
 type Props = {
   page: TPageInstance;
@@ -24,6 +28,8 @@ export const PageOptionsDropdown: React.FC<Props> = observer((props) => {
   const { page, storeType } = props;
   // states
   const [isExportModalOpen, setIsExportModalOpen] = useState(false);
+  // navigation
+  const router = useAppRouter();
   // store values
   const {
     name,
@@ -32,6 +38,8 @@ export const PageOptionsDropdown: React.FC<Props> = observer((props) => {
   } = page;
   // page filters
   const { isFullWidth, handleFullWidth, isStickyToolbarEnabled, handleStickyToolbar } = usePageFilters();
+  // query params
+  const { updateQueryParams } = useQueryParams();
   // menu items list
   const EXTRA_MENU_OPTIONS: (TContextMenuItem & { key: TPageActions })[] = useMemo(
     () => [
@@ -74,6 +82,21 @@ export const PageOptionsDropdown: React.FC<Props> = observer((props) => {
         icon: Clipboard,
         shouldRender: true,
       },
+      {
+        key: "version-history",
+        action: () => {
+          // update query param to show info tab in navigation pane
+          const updatedRoute = updateQueryParams({
+            paramsToAdd: {
+              [PAGE_NAVIGATION_PANE_TABS_QUERY_PARAM]: "info" satisfies TPageNavigationPaneTab,
+            },
+          });
+          router.push(updatedRoute);
+        },
+        title: "Version history",
+        icon: History,
+        shouldRender: true,
+      },
       {
         key: "export",
         action: () => setIsExportModalOpen(true),
@@ -82,7 +105,16 @@ export const PageOptionsDropdown: React.FC<Props> = observer((props) => {
         shouldRender: true,
       },
     ],
-    [editorRef, handleFullWidth, handleStickyToolbar, isContentEditable, isFullWidth, isStickyToolbarEnabled]
+    [
+      editorRef,
+      handleFullWidth,
+      handleStickyToolbar,
+      isContentEditable,
+      isFullWidth,
+      isStickyToolbarEnabled,
+      router,
+      updateQueryParams,
+    ]
   );
 
   return (