From c7fb8fac0cc4e42f34be7560945cbe9fb4aec3cb Mon Sep 17 00:00:00 2001
From: "M. Palanikannan" <73993394+Palanikannan1437@users.noreply.github.com>
Date: Tue, 22 Apr 2025 14:17:00 +0530
Subject: [PATCH] [WIKI-323] fix: added tooltips for displaying lock and move
 page (#3015)

---
 .../components/pages/header/lock-control.tsx  | 117 +-----------------
 .../components/pages/header/lock-control.tsx  |  22 +++-
 .../components/pages/header/move-control.tsx  |  18 +--
 3 files changed, 31 insertions(+), 126 deletions(-)

diff --git a/web/ce/components/pages/header/lock-control.tsx b/web/ce/components/pages/header/lock-control.tsx
index a09bfc1e12..ebc3fdb8d1 100644
--- a/web/ce/components/pages/header/lock-control.tsx
+++ b/web/ce/components/pages/header/lock-control.tsx
@@ -1,116 +1 @@
-"use client";
-
-import { useState, useEffect, useRef } from "react";
-import { observer } from "mobx-react";
-import { LockKeyhole, LockKeyholeOpen } from "lucide-react";
-// plane imports
-import { Tooltip } from "@plane/ui";
-// hooks
-import { usePageOperations } from "@/hooks/use-page-operations";
-// store
-import { TPageInstance } from "@/store/pages/base-page";
-
-// Define our lock display states, renaming "icon-only" to "neutral"
-type LockDisplayState = "neutral" | "locked" | "unlocked";
-
-type Props = {
-  page: TPageInstance;
-};
-
-export const PageLockControl = observer(({ page }: Props) => {
-  // Initial state: if locked, then "locked", otherwise default to "neutral"
-  const [displayState, setDisplayState] = useState<LockDisplayState>(page.is_locked ? "locked" : "neutral");
-  // derived values
-  const { canCurrentUserLockPage, is_locked } = page;
-  // Ref for the transition timer
-  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  // Ref to store the previous value of isLocked for detecting transitions
-  const prevLockedRef = useRef(is_locked);
-  // page operations
-  const {
-    pageOperations: { toggleLock },
-  } = usePageOperations({
-    page,
-  });
-
-  // Cleanup any running timer on unmount
-  useEffect(
-    () => () => {
-      if (timerRef.current) clearTimeout(timerRef.current);
-    },
-    []
-  );
-
-  // Update display state when isLocked changes
-  useEffect(() => {
-    // Clear any previous timer to avoid overlapping transitions
-    if (timerRef.current) {
-      clearTimeout(timerRef.current);
-      timerRef.current = null;
-    }
-
-    // Transition logic:
-    // If locked, ensure the display state is "locked"
-    // If unlocked after being locked, show "unlocked" briefly then revert to "neutral"
-    if (is_locked) {
-      setDisplayState("locked");
-    } else if (prevLockedRef.current === true) {
-      setDisplayState("unlocked");
-      timerRef.current = setTimeout(() => {
-        setDisplayState("neutral");
-        timerRef.current = null;
-      }, 600);
-    } else {
-      setDisplayState("neutral");
-    }
-
-    // Update the previous locked state
-    prevLockedRef.current = is_locked;
-  }, [is_locked]);
-
-  if (!canCurrentUserLockPage) return null;
-
-  // Render different UI based on the current display state
-  return (
-    <>
-      {displayState === "neutral" && (
-        <Tooltip tooltipContent="Lock" position="bottom">
-          <button
-            type="button"
-            onClick={() => toggleLock({ recursive: true })}
-            className="flex-shrink-0 size-6 grid place-items-center rounded text-custom-text-200 hover:text-custom-text-100 hover:bg-custom-background-80 transition-colors"
-            aria-label="Lock"
-          >
-            <LockKeyhole className="size-3.5" />
-          </button>
-        </Tooltip>
-      )}
-
-      {displayState === "locked" && (
-        <button
-          type="button"
-          onClick={() => toggleLock({ recursive: true })}
-          className="h-6 flex items-center gap-1 px-2 rounded text-custom-primary-100 bg-custom-primary-100/20 hover:bg-custom-primary-100/30 transition-colors"
-          aria-label="Locked"
-        >
-          <LockKeyhole className="flex-shrink-0 size-3.5 animate-lock-icon" />
-          <span className="text-xs font-medium whitespace-nowrap overflow-hidden transition-all duration-500 ease-out animate-text-slide-in">
-            Locked
-          </span>
-        </button>
-      )}
-
-      {displayState === "unlocked" && (
-        <div
-          className="h-6 flex items-center gap-1 px-2 rounded text-custom-text-200 animate-fade-out"
-          aria-label="Unlocked"
-        >
-          <LockKeyholeOpen className="flex-shrink-0 size-3.5 animate-unlock-icon" />
-          <span className="text-xs font-medium whitespace-nowrap overflow-hidden transition-all duration-500 ease-out animate-text-slide-in animate-text-fade-out">
-            Unlocked
-          </span>
-        </div>
-      )}
-    </>
-  );
-});
+export * from "ee/components/pages/header/lock-control";
diff --git a/web/ee/components/pages/header/lock-control.tsx b/web/ee/components/pages/header/lock-control.tsx
index 8d2dc4db57..eb5dbae430 100644
--- a/web/ee/components/pages/header/lock-control.tsx
+++ b/web/ee/components/pages/header/lock-control.tsx
@@ -108,7 +108,21 @@ export const PageLockControl = observer(({ page, storeType }: Props) => {
     [toggleLock]
   );
 
-  if (!canCurrentUserLockPage) return null;
+  if (is_locked && !canCurrentUserLockPage) {
+    return (
+      <Tooltip tooltipContent="You don't have the permission to unlock this page" position="bottom">
+        <div
+          className="h-6 flex items-center gap-1 px-2 rounded text-custom-primary-100 bg-custom-primary-100/20 cursor-default"
+          aria-label="Locked"
+        >
+          <LockKeyhole className="flex-shrink-0 size-3.5" />
+          <span className="text-xs font-medium whitespace-nowrap">Locked</span>
+        </div>
+      </Tooltip>
+    );
+  }
+
+  if (!is_locked && !canCurrentUserLockPage) return null;
 
   const actionText = is_locked ? "Unlock" : "Lock";
 
@@ -119,7 +133,7 @@ export const PageLockControl = observer(({ page, storeType }: Props) => {
         <Tooltip tooltipContent="Lock page" position="bottom" disabled={showLockOptions}>
           <button
             type="button"
-            onClick={handleButtonClick} // Use the main handler
+            onClick={handleButtonClick}
             className={cn(
               "flex-shrink-0 size-6 grid place-items-center rounded text-custom-text-200 hover:text-custom-text-100 hover:bg-custom-background-80 transition-colors",
               {
@@ -141,7 +155,9 @@ export const PageLockControl = observer(({ page, storeType }: Props) => {
           onMouseLeave={() => setIsHoveringLocked(false)}
           className={cn(
             "h-6 flex items-center gap-1 px-2 rounded text-custom-primary-100 bg-custom-primary-100/20 hover:bg-custom-primary-100/30 transition-colors duration-200 ease-in-out",
-            { "bg-custom-primary-100/30": isNestedPagesEnabled(workspaceSlug.toString()) && showLockOptions }
+            {
+              "bg-custom-primary-100/30": isNestedPagesEnabled(workspaceSlug.toString()) && showLockOptions,
+            }
           )}
           aria-label={isHoveringLocked ? "Unlock" : "Locked"}
         >
diff --git a/web/ee/components/pages/header/move-control.tsx b/web/ee/components/pages/header/move-control.tsx
index 729a2c92ab..8f0e2b0657 100644
--- a/web/ee/components/pages/header/move-control.tsx
+++ b/web/ee/components/pages/header/move-control.tsx
@@ -4,6 +4,8 @@ import { useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import { FolderOutput } from "lucide-react";
+// ui components
+import { Tooltip } from "@plane/ui";
 // core imports
 import { TPageMoveControlProps } from "@/ce/components/pages/header/move-control";
 // plane web hooks
@@ -29,13 +31,15 @@ export const PageMoveControl = observer((props: TPageMoveControlProps) => {
   return (
     <>
       <MovePageModal isOpen={isMovePageModalOpen} onClose={() => setIsMovePageModalOpen(false)} page={page} />
-      <button
-        type="button"
-        onClick={() => setIsMovePageModalOpen(true)}
-        className="flex-shrink-0 size-6 grid place-items-center rounded text-custom-text-200 hover:text-custom-text-100 hover:bg-custom-background-80 transition-colors"
-      >
-        <FolderOutput className="size-3.5" />
-      </button>
+      <Tooltip tooltipContent="Move page" position="bottom">
+        <button
+          type="button"
+          onClick={() => setIsMovePageModalOpen(true)}
+          className="flex-shrink-0 size-6 grid place-items-center rounded text-custom-text-200 hover:text-custom-text-100 hover:bg-custom-background-80 transition-colors"
+        >
+          <FolderOutput className="size-3.5" />
+        </button>
+      </Tooltip>
     </>
   );
 });