chore(compass-components): add tooltips to doc actions (#5098)

mongodb-js · Nov 14, 2023 · 7352604 · 7352604
1 parent 3c2c827
commit 7352604
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 45 deletions.
diff --git a/packages/compass-components/src/components/document-list/document-actions-group.spec.tsx b/packages/compass-components/src/components/document-list/document-actions-group.spec.tsx
@@ -11,8 +11,8 @@ describe('DocumentActionsGroup', function () {
   it('should render Edit action', function () {
     const spy = Sinon.spy();
     render(<DocumentActionsGroup onEdit={spy}></DocumentActionsGroup>);
-    expect(screen.getByTitle('Edit document')).to.exist;
-    userEvent.click(screen.getByTitle('Edit document'), undefined, {
+    expect(screen.getByTestId('edit-document-button')).to.exist;
+    userEvent.click(screen.getByTestId('edit-document-button'), undefined, {
       // Leafygreen applies pointer-event: none to the element that renders
       // label inside the button, so even though click does work (the listener
       // is not attached to the button label), we have to enable this option
@@ -25,8 +25,8 @@ describe('DocumentActionsGroup', function () {
   it('should render Copy action', function () {
     const spy = Sinon.spy();
     render(<DocumentActionsGroup onCopy={spy}></DocumentActionsGroup>);
-    expect(screen.getByTitle('Copy document')).to.exist;
-    userEvent.click(screen.getByTitle('Copy document'), undefined, {
+    expect(screen.getByTestId('copy-document-button')).to.exist;
+    userEvent.click(screen.getByTestId('copy-document-button'), undefined, {
       // See above
       skipPointerEventsCheck: true,
     });
@@ -36,8 +36,8 @@ describe('DocumentActionsGroup', function () {
   it('should render Clone action', function () {
     const spy = Sinon.spy();
     render(<DocumentActionsGroup onClone={spy}></DocumentActionsGroup>);
-    expect(screen.getByTitle('Clone document')).to.exist;
-    userEvent.click(screen.getByTitle('Clone document'), undefined, {
+    expect(screen.getByTestId('clone-document-button')).to.exist;
+    userEvent.click(screen.getByTestId('clone-document-button'), undefined, {
       // See above
       skipPointerEventsCheck: true,
     });
@@ -47,8 +47,8 @@ describe('DocumentActionsGroup', function () {
   it('should render Remove action', function () {
     const spy = Sinon.spy();
     render(<DocumentActionsGroup onRemove={spy}></DocumentActionsGroup>);
-    expect(screen.getByTitle('Remove document')).to.exist;
-    userEvent.click(screen.getByTitle('Remove document'), undefined, {
+    expect(screen.getByTestId('remove-document-button')).to.exist;
+    userEvent.click(screen.getByTestId('remove-document-button'), undefined, {
       // See above
       skipPointerEventsCheck: true,
     });
@@ -63,8 +63,8 @@ describe('DocumentActionsGroup', function () {
         expanded={false}
       ></DocumentActionsGroup>
     );
-    expect(screen.getByTitle('Expand all')).to.exist;
-    userEvent.click(screen.getByTitle('Expand all'), undefined, {
+    expect(screen.getByTestId('expand-document-button')).to.exist;
+    userEvent.click(screen.getByTestId('expand-document-button'), undefined, {
       // See above
       skipPointerEventsCheck: true,
     });

diff --git a/packages/compass-components/src/components/document-list/document-actions-group.tsx b/packages/compass-components/src/components/document-list/document-actions-group.tsx
@@ -73,6 +73,36 @@ function useElementParentHoverState<T extends HTMLElement>(
   return isHovered;
 }
 
+function ActionButton({
+  tooltipText,
+  tooltipEnabled,
+  ...props
+}: Partial<React.ComponentProps<typeof Button>> & {
+  tooltipText: string;
+  tooltipEnabled: boolean;
+}) {
+  return (
+    <Tooltip
+      // We pass `enabled` as the buttons set their styles `display: false`
+      // the container isn't hovered, which causes the tooltips to reset
+      // their position to 0,0 and glitch visually without enabled.
+      enabled={tooltipEnabled}
+      trigger={({ children, ...tooltipProps }) => {
+        return (
+          <div data-action-item {...tooltipProps}>
+            <Button {...props} />
+            {children}
+          </div>
+        );
+      }}
+      justify="middle"
+      delay={200} // The copy and clone buttons look alike so we keep the delay short.
+    >
+      {tooltipText}
+    </Tooltip>
+  );
+}
+
 const DocumentActionsGroup: React.FunctionComponent<
   {
     onEdit?: () => void;
@@ -121,22 +151,22 @@ const DocumentActionsGroup: React.FunctionComponent<
       )}
     >
       {onExpand && (
-        <Button
+        <ActionButton
           size="xsmall"
+          tooltipEnabled={isActive}
           rightGlyph={
             <Icon
               role="presentation"
               glyph={expanded ? 'CaretDown' : 'CaretRight'}
             ></Icon>
           }
-          title={expanded ? 'Collapse all' : 'Expand all'}
           aria-label={expanded ? 'Collapse all' : 'Expand all'}
           aria-pressed={expanded}
           data-testid="expand-document-button"
           onClick={onExpand}
           className={actionsGroupItem}
-          data-action-item
-        ></Button>
+          tooltipText={expanded ? 'Collapse all' : 'Expand all'}
+        />
       )}
       <span className={actionsGroupItemSeparator}></span>
       {insights && (
@@ -151,67 +181,66 @@ const DocumentActionsGroup: React.FunctionComponent<
         </div>
       )}
       {onEdit && (
-        <Button
+        <ActionButton
+          tooltipEnabled={isActive}
           size="xsmall"
           rightGlyph={<Icon role="presentation" glyph="Edit"></Icon>}
-          title="Edit document"
           aria-label="Edit document"
           data-testid="edit-document-button"
           onClick={onEdit}
           className={actionsGroupItem}
-          data-action-item
-        ></Button>
+          tooltipText="Edit document"
+        />
       )}
       {onCopy && (
         <Tooltip
           open={showCopyButtonTooltip}
-          trigger={({ children }) => {
-            return (
-              <div data-action-item>
-                <Button
-                  size="xsmall"
-                  rightGlyph={<Icon role="presentation" glyph="Copy"></Icon>}
-                  title="Copy document"
-                  aria-label="Copy document"
-                  data-testid="copy-document-button"
-                  onClick={() => {
-                    setShowCopyButtonTooltip(true);
-                    onCopy();
-                  }}
-                  className={actionsGroupItem}
-                ></Button>
-                {children}
-              </div>
-            );
-          }}
+          trigger={({ children }) => (
+            <div data-action-item>
+              <ActionButton
+                tooltipEnabled={isActive}
+                size="xsmall"
+                rightGlyph={<Icon role="presentation" glyph="Copy"></Icon>}
+                aria-label="Copy document to clipboard"
+                data-testid="copy-document-button"
+                onClick={() => {
+                  setShowCopyButtonTooltip(true);
+                  onCopy();
+                }}
+                className={actionsGroupItem}
+                tooltipText="Copy to clipboard"
+              />
+              {children}
+            </div>
+          )}
           justify="middle"
         >
           Copied!
         </Tooltip>
       )}
       {onClone && (
-        <Button
+        <ActionButton
           size="xsmall"
+          tooltipEnabled={isActive}
           rightGlyph={<Icon role="presentation" glyph="Clone"></Icon>}
-          title="Clone document"
           aria-label="Clone document"
           data-testid="clone-document-button"
           onClick={onClone}
           className={actionsGroupItem}
-          data-action-item
-        ></Button>
+          tooltipText="Clone document"
+        />
       )}
       {onRemove && (
-        <Button
+        <ActionButton
           size="xsmall"
+          tooltipEnabled={isActive}
           rightGlyph={<Icon role="presentation" glyph="Trash"></Icon>}
-          title="Remove document"
           aria-label="Remove document"
           data-testid="remove-document-button"
           onClick={onRemove}
           className={actionsGroupItem}
-          data-action-item
-        ></Button>
+          tooltipText="Remove document"
+        />
       )}
     </div>
   );