Combined log point panel icons

replayio · Jul 8, 2024 · 13c6ba1 · 13c6ba1
1 parent 2f13eb9
commit 13c6ba1
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 22 deletions.
diff --git a/packages/e2e-tests/helpers/source-panel.ts b/packages/e2e-tests/helpers/source-panel.ts
@@ -320,6 +320,7 @@ export async function editLogPoint(
       .locator('[data-test-name="PointPanel-ContentWrapper"] [data-lexical-editor="true"]')
       .isVisible();
     if (!isEditing) {
+      await line.locator('[data-test-name="PointPanel-IconAndAvatar"]').hover();
       await line.locator('[data-test-name="PointPanel-EditButton"]').click();
     }
 

diff --git a/packages/replay-next/components/sources/log-point-panel/LogPointPanel.module.css b/packages/replay-next/components/sources/log-point-panel/LogPointPanel.module.css
@@ -159,7 +159,7 @@
   justify-content: center;
   line-height: 1.5rem;
   height: 1rem;
-  width: 1rem;
+  min-width: 1rem;
   cursor: pointer;
   color: var(--point-panel-input-edit-button-color);
 }
@@ -172,6 +172,11 @@
 .ButtonWithIcon[data-invalid]:hover {
   color: var(--point-panel-input-disabled-cancel-button-color-hover);
 }
+.ButtonWithIcon:disabled,
+.ButtonWithIcon:disabled:hover {
+  cursor: default;
+  color: var(--point-panel-input-edit-button-color);
+}
 
 .ContentInput,
 .ContentInputWithNag {
@@ -211,7 +216,7 @@
   flex: 0 0 1.5rem;
 }
 
-.DisabledIconAndAvatar {
+.IconAndAvatar {
   flex-shrink: 0;
   display: flex;
   align-items: center;
@@ -231,3 +236,13 @@
   word-break: break-word;
   padding: 0.25rem 0;
 }
+
+.ButtonIcon {
+  height: 1rem;
+  width: 1rem;
+}
+
+.DisabledIcon {
+  height: 1rem;
+  width: 1.25rem;
+}
diff --git a/packages/replay-next/components/sources/log-point-panel/LogPointPanel.tsx b/packages/replay-next/components/sources/log-point-panel/LogPointPanel.tsx
@@ -1,5 +1,6 @@
 import { TimeStampedPoint, TimeStampedPointRange } from "@replayio/protocol";
 import {
+  MouseEvent,
   Suspense,
   unstable_useCacheRefresh as useCacheRefresh,
   useContext,
@@ -193,6 +194,7 @@ export function PointPanelWithHitPoints({
   const invalidateCache = useCacheRefresh();
 
   const [isEditing, setIsEditing] = useState(!readOnlyMode && showEditBreakpointNag);
+  const [isHovering, setIsHovering] = useState(false);
   const [editReason, setEditReason] = useState<EditReason | null>(null);
 
   const [isPending, startTransition] = useTransition();
@@ -261,7 +263,12 @@ export function PointPanelWithHitPoints({
     }
   };
 
-  const toggleShouldLog = () => {
+  const toggleShouldLog = (event?: MouseEvent<HTMLElement>) => {
+    if (event) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+
     editPointBehavior(
       key,
       {
@@ -415,7 +422,7 @@ export function PointPanelWithHitPoints({
                   </div>
 
                   <RemoveConditionalButton
-                    disabled={isPending}
+                    disabled={isPending || !editable}
                     invalid={!isConditionValid}
                     onClick={toggleCondition}
                   />
@@ -432,7 +439,7 @@ export function PointPanelWithHitPoints({
                   </div>
 
                   <RemoveConditionalButton
-                    disabled={isPending}
+                    disabled={isPending || !editable}
                     invalid={!isConditionValid}
                     onClick={toggleCondition}
                   />
@@ -494,12 +501,25 @@ export function PointPanelWithHitPoints({
             data-state-logging-enabled={shouldLog}
             data-test-name="PointPanel-ContentWrapper"
             onClick={() => startEditing("content")}
+            onMouseEnter={() => setIsHovering(true)}
+            onMouseLeave={() => setIsHovering(false)}
           >
-            <BadgePicker
-              disabled={!editable}
-              invalid={!isContentValid}
-              point={pointWithPendingEdits}
-            />
+            {shouldLog ? (
+              <BadgePicker
+                disabled={!editable}
+                invalid={!isContentValid}
+                point={pointWithPendingEdits}
+              />
+            ) : (
+              <button
+                className={styles.ButtonWithIcon}
+                data-test-name="PointPanel-DisabledButton"
+                disabled={isPending}
+                onClick={toggleShouldLog}
+              >
+                <Icon className={styles.DisabledIcon} data-disabled type="toggle-off" />
+              </button>
+            )}
 
             <div className={styles.Content}>
               {isEditing ? (
@@ -532,23 +552,24 @@ export function PointPanelWithHitPoints({
                   fileExtension=".js"
                 />
               )}
-              <div className={styles.DisabledIconAndAvatar}>
+              <div className={styles.IconAndAvatar} data-test-name="PointPanel-IconAndAvatar">
                 {isEditing ? (
                   saveButton
-                ) : editable ? (
+                ) : editable && isHovering ? (
                   <button
                     className={styles.ButtonWithIcon}
                     data-test-name="PointPanel-EditButton"
                     disabled={isPending}
                   >
-                    <Icon className={styles.ButtonIcon} type={shouldLog ? "edit" : "toggle-off"} />
+                    <Icon className={styles.ButtonIcon} type="edit" />
                   </button>
-                ) : null}
-                <AvatarImage
-                  className={styles.CreatedByAvatar}
-                  src={user?.picture || undefined}
-                  title={user?.name || undefined}
-                />
+                ) : (
+                  <AvatarImage
+                    className={styles.CreatedByAvatar}
+                    src={user?.picture || undefined}
+                    title={user?.name || undefined}
+                  />
+                )}
               </div>
             </div>
           </div>

diff --git a/packages/replay-next/src/hooks/useTooltip.tsx b/packages/replay-next/src/hooks/useTooltip.tsx
@@ -161,7 +161,7 @@ export default function useTooltip({
 
   const onMouseEnter = (event: MouseEvent) => {
     setClientX(event.clientX);
-    setClientX(event.clientY);
+    setClientY(event.clientY);
     setMouseTarget(event.currentTarget as HTMLElement);
 
     if (delay === 0) {
@@ -173,7 +173,7 @@ export default function useTooltip({
 
   const onMouseLeave = (event: MouseEvent) => {
     setClientX(null);
-    setClientX(null);
+    setClientY(null);
     setMouseTarget(null);
     setShowTooltip(false);
     setShowTooltipDebounced.cancel();
@@ -185,7 +185,7 @@ export default function useTooltip({
     }
 
     setClientX(event.clientX);
-    setClientX(event.clientY);
+    setClientY(event.clientY);
   };
 
   return { onMouseEnter, onMouseLeave, onMouseMove, tooltip: renderedTooltip };