chore(components): Upgrade LeafyGreen packages COMPASS-8870

packages/compass-components/package.json

@@ -34,44 +34,44 @@
     "@dnd-kit/core": "^6.0.7",
     "@dnd-kit/sortable": "^7.0.2",
     "@dnd-kit/utilities": "^3.2.1",
-    "@leafygreen-ui/badge": "^8.1.3",
-    "@leafygreen-ui/banner": "^8.0.1",
-    "@leafygreen-ui/button": "^21.3.0",
-    "@leafygreen-ui/card": "^11.0.0",
-    "@leafygreen-ui/checkbox": "^13.1.2",
-    "@leafygreen-ui/code": "^15.0.0",
-    "@leafygreen-ui/combobox": "^10.0.0",
-    "@leafygreen-ui/confirmation-modal": "^5.2.1",
-    "@leafygreen-ui/emotion": "^4.0.8",
-    "@leafygreen-ui/guide-cue": "^6.0.0",
-    "@leafygreen-ui/hooks": "^8.3.0",
-    "@leafygreen-ui/icon": "^12.8.0",
-    "@leafygreen-ui/icon-button": "^15.0.23",
-    "@leafygreen-ui/info-sprinkle": "^3.0.0",
-    "@leafygreen-ui/leafygreen-provider": "^3.2.0",
-    "@leafygreen-ui/logo": "^9.2.0",
-    "@leafygreen-ui/marketing-modal": "^4.2.3",
-    "@leafygreen-ui/menu": "^27.0.0",
-    "@leafygreen-ui/modal": "^16.1.0",
-    "@leafygreen-ui/palette": "^4.1.1",
-    "@leafygreen-ui/pipeline": "^6.0.0",
-    "@leafygreen-ui/polymorphic": "^2.0.2",
-    "@leafygreen-ui/popover": "^12.0.0",
-    "@leafygreen-ui/portal": "^5.1.1",
-    "@leafygreen-ui/radio-box-group": "^13.0.2",
-    "@leafygreen-ui/radio-group": "^11.0.3",
-    "@leafygreen-ui/search-input": "^4.0.0",
-    "@leafygreen-ui/segmented-control": "^9.0.0",
-    "@leafygreen-ui/select": "^13.0.0",
-    "@leafygreen-ui/table": "^12.7.0",
-    "@leafygreen-ui/tabs": "^13.1.1",
-    "@leafygreen-ui/text-area": "^9.1.2",
-    "@leafygreen-ui/text-input": "^13.1.2",
-    "@leafygreen-ui/toast": "^6.1.28",
-    "@leafygreen-ui/toggle": "^10.1.2",
-    "@leafygreen-ui/tokens": "^2.11.0",
-    "@leafygreen-ui/tooltip": "^12.0.0",
-    "@leafygreen-ui/typography": "^19.3.0",
+    "@leafygreen-ui/badge": "^9.0.2",
+    "@leafygreen-ui/banner": "^9.0.2",
+    "@leafygreen-ui/button": "^22.0.2",
+    "@leafygreen-ui/card": "^12.0.2",
+    "@leafygreen-ui/checkbox": "^14.0.2",
+    "@leafygreen-ui/code": "^16.0.2",
+    "@leafygreen-ui/combobox": "^11.0.2",
+    "@leafygreen-ui/confirmation-modal": "^6.0.2",
+    "@leafygreen-ui/emotion": "^4.0.9",
+    "@leafygreen-ui/guide-cue": "^7.0.2",
+    "@leafygreen-ui/hooks": "^8.3.4",
+    "@leafygreen-ui/icon": "^13.1.2",
+    "@leafygreen-ui/icon-button": "^16.0.2",
+    "@leafygreen-ui/info-sprinkle": "^4.0.2",
+    "@leafygreen-ui/leafygreen-provider": "^4.0.2",
+    "@leafygreen-ui/logo": "^10.0.2",
+    "@leafygreen-ui/marketing-modal": "^5.0.2",
+    "@leafygreen-ui/menu": "^28.0.2",
+    "@leafygreen-ui/modal": "^17.0.2",
+    "@leafygreen-ui/palette": "^4.1.3",
+    "@leafygreen-ui/pipeline": "^7.0.2",
+    "@leafygreen-ui/polymorphic": "^2.0.5",
+    "@leafygreen-ui/popover": "^13.0.2",
+    "@leafygreen-ui/portal": "^6.0.2",
+    "@leafygreen-ui/radio-box-group": "^14.0.2",
+    "@leafygreen-ui/radio-group": "^12.0.2",
+    "@leafygreen-ui/search-input": "^5.0.2",
+    "@leafygreen-ui/segmented-control": "^10.0.2",
+    "@leafygreen-ui/select": "^14.0.2",
+    "@leafygreen-ui/table": "^13.0.1",
+    "@leafygreen-ui/tabs": "^14.0.2",
+    "@leafygreen-ui/text-area": "^10.0.2",
+    "@leafygreen-ui/text-input": "^14.0.2",
+    "@leafygreen-ui/toast": "^7.0.2",
+    "@leafygreen-ui/toggle": "^11.0.2",
+    "@leafygreen-ui/tokens": "^2.11.3",
+    "@leafygreen-ui/tooltip": "^13.0.2",
+    "@leafygreen-ui/typography": "^20.0.2",
     "@react-aria/interactions": "^3.9.1",
     "@react-aria/utils": "^3.13.1",
     "@react-aria/visually-hidden": "^3.3.1",

packages/compass-components/src/components/index-keys-badge.tsx

@@ -7,9 +7,11 @@ import { Variant as BadgeVariant } from '@leafygreen-ui/badge';
 
 const keyListStyles = css({
   display: 'inline-flex',
-  gap: spacing[1],
-  marginBottom: spacing[2],
-  padding: `0px ${spacing[6]}px`,
+  gap: spacing[100],
+  marginTop: spacing[200],
+  marginBottom: spacing[200],
+  paddingLeft: spacing[1600],
+  paddingRight: spacing[1600],
 });
 
 const badgeStyles = css({

packages/compass-components/src/components/leafygreen.tsx

@@ -49,6 +49,7 @@ import {
   TableBody,
   flexRender,
   useLeafyGreenTable,
+  getExpandedRowModel,
   getFilteredRowModel,
 } from '@leafygreen-ui/table';
 import type { Row as LgTableRowType } from '@tanstack/table-core'; // TODO(COMPASS-8437): import from LG
@@ -169,6 +170,7 @@ export {
   InfoSprinkle,
   flexRender,
   useLeafyGreenTable,
+  getExpandedRowModel,
   getFilteredRowModel,
   type LgTableRowType,
   Combobox,

packages/compass-e2e-tests/helpers/selectors.ts

@@ -1071,7 +1071,7 @@ export const SearchIndexConfirmButton =
 export const searchIndexRow = (name: string) =>
   `[data-testid="search-indexes-row-${name}"]`;
 export const searchIndexExpandButton = (name: string) =>
-  `${searchIndexRow(name)} button:first-child`;
+  `${searchIndexRow(name)} button[aria-label="Expand row"]`;
 export const searchIndexAggregateButton = (name: string) =>
   `${searchIndexRow(
     name

packages/compass-e2e-tests/tests/search-indexes.test.ts

@@ -129,7 +129,12 @@ async function verifyIndexDetails(
   const indexRow = browser.$(indexRowSelector);
   await indexRow.waitForDisplayed({ timeout: WAIT_TIMEOUT });
   await browser.hover(indexRowSelector);
-  await browser.clickVisible(Selectors.searchIndexExpandButton(indexName));
+
+  // Expand the row if it's not already expanded
+  const expandButton = browser.$(Selectors.searchIndexExpandButton(indexName));
+  if (await expandButton.isDisplayed()) {
+    await expandButton.click();
+  }
 
   await browser.waitUntil(async () => {
     const text = await browser

packages/compass-global-writes/src/components/shard-zones-table.tsx

@@ -15,6 +15,7 @@ import {
   type HeaderGroup,
   SearchInput,
   type LGTableDataType,
+  getExpandedRowModel,
   getFilteredRowModel,
   type LgTableRowType,
 } from '@mongodb-js/compass-components';
@@ -23,6 +24,7 @@ import { ShardZonesDescription } from './shard-zones-description';
 
 const containerStyles = css({
   height: '400px',
+  overflow: 'auto',
 });
 
 interface ShardZoneRow {
@@ -86,7 +88,6 @@ export function ShardZonesTable({
 }: {
   shardZones: ShardZoneData[];
 }) {
-  const tableContainerRef = useRef<HTMLDivElement>(null);
   const [searchText, setSearchText] = useState<string>('');
   const [expanded, setExpanded] = useState<true | Record<string, boolean>>({});
 
@@ -96,17 +97,18 @@ export function ShardZonesTable({
   );
 
   const table = useLeafyGreenTable({
-    containerRef: tableContainerRef,
     data,
     columns,
     state: {
       globalFilter: searchText,
-      expanded,
+      // Expand all matching rows when filtering
+      expanded: searchText !== '' ? true : expanded,
     },
     onGlobalFilterChange: setSearchText,
     onExpandedChange: setExpanded,
     enableGlobalFilter: true,
     getFilteredRowModel: getFilteredRowModel(),
+    getExpandedRowModel: getExpandedRowModel(),
     getIsRowExpanded: (row) => {
       return (
         (searchText && hasFilteredChildren(row)) ||
@@ -139,12 +141,7 @@ export function ShardZonesTable({
         aria-label="Search for a location"
         placeholder="Search for a location"
       />
-      <Table
-        className={containerStyles}
-        title="Zone Mapping"
-        table={table}
-        ref={tableContainerRef}
-      >
+      <Table className={containerStyles} title="Zone Mapping" table={table}>
         <TableHead isSticky>
           {table
             .getHeaderGroups()
@@ -168,25 +165,11 @@ export function ShardZonesTable({
             <Row key={row.id} row={row}>
               {row.getVisibleCells().map((cell) => {
                 return (
-                  <Cell key={cell.id}>
+                  <Cell key={cell.id} cell={cell}>
                     {flexRender(cell.column.columnDef.cell, cell.getContext())}
                   </Cell>
                 );
               })}
-              {row.subRows.map((subRow) => (
-                <Row key={subRow.id} row={subRow}>
-                  {subRow.getVisibleCells().map((cell) => {
-                    return (
-                      <Cell key={cell.id}>
-                        {flexRender(
-                          cell.column.columnDef.cell,
-                          cell.getContext()
-                        )}
-                      </Cell>
-                    );
-                  })}
-                </Row>
-              ))}
             </Row>
           ))}
         </TableBody>

packages/compass-indexes/src/components/indexes-table/indexes-table.tsx

@@ -54,15 +54,13 @@ const rowStyles = css({
 
 // When row is not hovered, we hide the delete button
 const indexActionsCellStyles = css({
-  display: 'flex',
-  justifyContent: 'flex-end',
   button: {
     opacity: 0,
     '&:focus': {
       opacity: 1,
     },
   },
-  minWidth: spacing[5],
+  minWidth: spacing[800],
 });
 
 const tableHeadStyles = css({
@@ -99,13 +97,11 @@ export function IndexesTable<T>({
     `${id}-sorting-state`,
     []
   );
-  const tableContainerRef = React.useRef<HTMLDivElement>(null);
   const table = useLeafyGreenTable<T>({
-    containerRef: tableContainerRef,
     data,
     columns,
-    enableExpanding: true,
     enableSortingRemoval: false,
+    withPagination: false,
     state: { sorting },
     onSortingChange: setSorting,
   });
@@ -120,7 +116,7 @@ export function IndexesTable<T>({
         className={tableStyles}
         data-testid={`${dataTestId}-list`}
         table={table}
-        ref={tableContainerRef}
+        shouldTruncate={false}
       >
         <TableHead
           isSticky
@@ -147,26 +143,30 @@ export function IndexesTable<T>({
           ))}
         </TableHead>
         <TableBody>
-          {rows.map((row: LeafyGreenTableRow<T>) => {
-            return (
+          {rows.map((row: LeafyGreenTableRow<T>) =>
+            row.isExpandedContent ? (
+              <ExpandedContent key={row.id} row={row} />
+            ) : (
               <Row
-                className={rowStyles}
                 key={row.id}
                 row={row}
+                className={rowStyles}
                 data-testid={`${dataTestId}-row-${
                   (row.original as { name?: string }).name ?? row.id
                 }`}
               >
                 {row.getVisibleCells().map((cell: LeafyGreenTableCell<T>) => {
+                  const isActionsCell = cell.column.id === 'actions';
                   return (
                     <Cell
-                      className={cx(
-                        cell.column.id === 'actions' && indexActionsCellStyles,
-                        cell.column.id === 'actions' &&
-                          indexActionsCellClassName
-                      )}
-                      data-testid={`${dataTestId}-${cell.column.id}-field`}
                       key={cell.id}
+                      id={cell.id}
+                      cell={cell}
+                      className={cx({
+                        [indexActionsCellClassName]: isActionsCell,
+                        [indexActionsCellStyles]: isActionsCell,
+                      })}
+                      data-testid={`${dataTestId}-${cell.column.id}-field`}
                     >
                       {flexRender(
                         cell.column.columnDef.cell,
@@ -175,13 +175,9 @@ export function IndexesTable<T>({
                     </Cell>
                   );
                 })}
-
-                {row.original.renderExpandedContent && (
-                  <ExpandedContent row={row} />
-                )}
               </Row>
-            );
-          })}
+            )
+          )}
         </TableBody>
       </Table>
     </div>

packages/compass-indexes/src/components/regular-indexes-table/regular-index-actions.tsx

@@ -1,7 +1,12 @@
 import semver from 'semver';
 import React, { useCallback, useMemo } from 'react';
 import type { GroupedItemAction } from '@mongodb-js/compass-components';
-import { ItemActionGroup } from '@mongodb-js/compass-components';
+import { css, ItemActionGroup } from '@mongodb-js/compass-components';
+
+const styles = css({
+  // Align actions with the end of the table
+  justifyContent: 'flex-end',
+});
 
 type Index = {
   name: string;
@@ -83,9 +88,10 @@ const IndexActions: React.FunctionComponent<IndexActionsProps> = ({
   return (
     <ItemActionGroup<IndexAction>
       data-testid="index-actions"
+      className={styles}
       actions={indexActions}
       onAction={onAction}
-    ></ItemActionGroup>
+    />
   );
 };