From 86716165f565cd93ea97eccdfc58e5410b0885c5 Mon Sep 17 00:00:00 2001
From: Le Roux Bodenstein <lerouxb@gmail.com>
Date: Thu, 5 Sep 2024 18:19:48 +0100
Subject: [PATCH] chore: also collapse Add Data and Export Data, add title
 attributes COMPASS-8231 (#6170)

also collapse Add Data and Export Data, add title attributes
---
 .../pipeline-toolbar/pipeline-settings/index.tsx      |  1 +
 .../src/components/item-action-controls.tsx           | 11 ++++++++++-
 .../compass-crud/src/components/delete-data-menu.tsx  |  1 +
 .../compass-crud/src/components/update-data-menu.tsx  |  1 +
 .../src/components/ai-experience-entry.tsx            |  1 +
 5 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-settings/index.tsx b/packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-settings/index.tsx
index 04458b965ff..f62bd1b00e2 100644
--- a/packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-settings/index.tsx
+++ b/packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-settings/index.tsx
@@ -78,6 +78,7 @@ export const PipelineSettings: React.FunctionComponent<
           onClick={onExportToLanguage}
           data-testid="pipeline-toolbar-export-button"
           disabled={!isExportToLanguageEnabled}
+          title="Export to language"
         >
           <span className={hiddenOnNarrowPipelineToolbarStyles}>
             Export to language
diff --git a/packages/compass-components/src/components/item-action-controls.tsx b/packages/compass-components/src/components/item-action-controls.tsx
index b26c56a3961..95d6a06eba4 100644
--- a/packages/compass-components/src/components/item-action-controls.tsx
+++ b/packages/compass-components/src/components/item-action-controls.tsx
@@ -18,6 +18,7 @@ import type { ButtonProps } from '@leafygreen-ui/button';
 import type { glyphs } from '@leafygreen-ui/icon';
 import { spacing } from '@leafygreen-ui/tokens';
 import { css, cx } from '@leafygreen-ui/emotion';
+import { WorkspaceContainer } from './workspace-container';
 
 export type ItemAction<Action extends string> = {
   action: Action;
@@ -486,6 +487,13 @@ export function ItemActionControls<Action extends string>({
   return <ItemActionGroup actions={actions} {...sharedProps}></ItemActionGroup>;
 }
 
+const hiddenOnNarrowStyles = css({
+  [`@container ${WorkspaceContainer.toolbarContainerQueryName} (width < 900px)`]:
+    {
+      display: 'none',
+    },
+});
+
 export function DropdownMenuButton<Action extends string>({
   isVisible = true,
   actions,
@@ -557,8 +565,9 @@ export function DropdownMenuButton<Action extends string>({
               onClick && onClick(evt);
             }}
             rightGlyph={<Icon glyph={'CaretDown'} />}
+            title={buttonText}
           >
-            {buttonText}
+            <span className={hiddenOnNarrowStyles}>{buttonText}</span>
             {children}
           </Button>
         );
diff --git a/packages/compass-crud/src/components/delete-data-menu.tsx b/packages/compass-crud/src/components/delete-data-menu.tsx
index f318f05927d..848fed3bcf0 100644
--- a/packages/compass-crud/src/components/delete-data-menu.tsx
+++ b/packages/compass-crud/src/components/delete-data-menu.tsx
@@ -31,6 +31,7 @@ const DeleteMenuButton: React.FunctionComponent<DeleteMenuButtonProps> = ({
       onClick={onClick}
       leftGlyph={<Icon glyph="Trash"></Icon>}
       data-testid="crud-bulk-delete"
+      title="Delete"
     >
       <span className={hiddenOnNarrowStyles}>Delete</span>
     </Button>
diff --git a/packages/compass-crud/src/components/update-data-menu.tsx b/packages/compass-crud/src/components/update-data-menu.tsx
index a5d9ffd063e..007e7e7924e 100644
--- a/packages/compass-crud/src/components/update-data-menu.tsx
+++ b/packages/compass-crud/src/components/update-data-menu.tsx
@@ -31,6 +31,7 @@ const UpdateMenuButton: React.FunctionComponent<UpdateMenuButtonProps> = ({
       onClick={onClick}
       leftGlyph={<Icon glyph="Edit"></Icon>}
       data-testid="crud-update"
+      title="Update"
     >
       <span className={hiddenOnNarrowStyles}>Update</span>
     </Button>
diff --git a/packages/compass-generative-ai/src/components/ai-experience-entry.tsx b/packages/compass-generative-ai/src/components/ai-experience-entry.tsx
index e4877a64dd0..5333eab0b46 100644
--- a/packages/compass-generative-ai/src/components/ai-experience-entry.tsx
+++ b/packages/compass-generative-ai/src/components/ai-experience-entry.tsx
@@ -105,6 +105,7 @@ function AIExperienceEntry({
       onClick={onClick}
       data-testid={dataTestId}
       type="button"
+      title={`Generate ${type}`}
     >
       <span className={hiddenOnNarrowStyles}>Generate {type}</span>
       <AIEntrySVG darkMode={darkMode} />