chore: also collapse Add Data and Export Data, add title attributes COMPASS-8231 (#6170)

also collapse Add Data and Export Data, add title attributes

Author: lerouxb

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

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>
         );

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>

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>

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} />