Merge branch 'main' into COMPASS-8451

Author: djechlin-mongodb

THIRD-PARTY-NOTICES.md

@@ -1,5 +1,5 @@
 The following third-party software is used by and included in **Mongodb Compass**.
-This document was automatically generated on Mon Nov 11 2024.
+This document was automatically generated on Fri Nov 15 2024.
 
 ## List of dependencies
 

docs/tracking-plan.md

@@ -1,7 +1,7 @@
 
 # Compass Tracking Plan
 
-Generated on Mon, Nov 11, 2024 at 04:57 PM
+Generated on Fri, Nov 15, 2024 at 03:44 PM
 
 ## Table of Contents
 

packages/compass-collection/src/components/collection-tab.tsx

@@ -3,6 +3,7 @@ import { connect } from 'react-redux';
 import { type CollectionState, selectTab } from '../modules/collection-tab';
 import { css, ErrorBoundary, TabNavBar } from '@mongodb-js/compass-components';
 import CollectionHeader from './collection-header';
+import toNS from 'mongodb-ns';
 import { useLogger } from '@mongodb-js/compass-logging/provider';
 import {
   useCollectionQueryBar,
@@ -118,10 +119,10 @@ function WithErrorBoundary({
 function useCollectionTabs(props: CollectionMetadata) {
   const pluginTabs = useCollectionSubTabs();
   const connectionInfoRef = useConnectionInfoRef();
-  const isGlobalWritesSupported = useConnectionSupports(
-    connectionInfoRef.current.id,
-    'globalWrites'
-  );
+  const isGlobalWritesSupported =
+    useConnectionSupports(connectionInfoRef.current.id, 'globalWrites') &&
+    !props.isReadonly &&
+    !toNS(props.namespace).specialish;
   return pluginTabs
     .filter((x) => {
       if (x.name === 'GlobalWrites' && !isGlobalWritesSupported) {

packages/compass-components/src/components/interactive-popover.tsx

@@ -8,7 +8,6 @@ import { palette } from '@leafygreen-ui/palette';
 import { rgba } from 'polished';
 import { useDarkMode } from '../hooks/use-theme';
 import { useHotkeys } from '../hooks/use-hotkeys';
-import { useId } from '@react-aria/utils';
 
 const borderRadius = spacing[2];
 
@@ -162,7 +161,7 @@ function InteractivePopover({
 
   useHotkeys('Escape', onClose, { enabled: open }, [onClose]);
 
-  const closeButtonId = useId('close-button-id');
+  const closeButtonId = 'close-button-id';
 
   return trigger({
     onClick: onClickTrigger,

packages/compass-components/src/components/item-action-controls.tsx

@@ -29,6 +29,8 @@ export type ItemAction<Action extends string> = {
   disabledDescription?: string;
   tooltip?: string;
   actionButtonClassName?: string;
+  /** How to show the item when not collapsed into the menu */
+  expandedPresentation?: 'icon' | 'button';
 };
 
 export type ItemSeparator = { separator: true };
@@ -343,26 +345,42 @@ export function ItemActionGroup<Action extends string>({
           tooltip,
           tooltipProps,
           actionButtonClassName,
+          expandedPresentation = 'icon',
         } = menuItem;
-        const button = (
-          <ItemActionButton
-            key={action}
-            glyph={icon}
-            label={label}
-            title={!tooltip ? label : undefined}
-            size={iconSize}
-            data-action={action}
-            data-testid={actionTestId<Action>(dataTestId, action)}
-            onClick={onClick}
-            className={cx(
-              actionGroupButtonStyle,
-              iconClassName,
-              actionButtonClassName
-            )}
-            style={iconStyle}
-            disabled={isDisabled}
-          />
-        );
+        const button =
+          expandedPresentation === 'icon' ? (
+            <ItemActionButton
+              key={action}
+              glyph={icon}
+              label={label}
+              title={!tooltip ? label : undefined}
+              size={iconSize}
+              data-action={action}
+              data-testid={actionTestId<Action>(dataTestId, action)}
+              onClick={onClick}
+              className={cx(
+                actionGroupButtonStyle,
+                iconClassName,
+                actionButtonClassName
+              )}
+              style={iconStyle}
+              disabled={isDisabled}
+            />
+          ) : (
+            <Button
+              key={action}
+              title={!tooltip ? label : undefined}
+              size={iconSize}
+              data-action={action}
+              data-testid={actionTestId<Action>(dataTestId, action)}
+              onClick={onClick}
+              className={actionButtonClassName}
+              style={iconStyle}
+              disabled={isDisabled}
+            >
+              {label}
+            </Button>
+          );
 
         if (tooltip) {
           return (

packages/compass-components/src/hooks/use-sort.spec.ts

@@ -57,7 +57,7 @@ describe('use-sort', function () {
     expect(
       screen
         .getByRole('button', {
-          name: /title/i,
+          name: 'Sort by',
         })
         .getAttribute('aria-disabled')
     ).to.equal('true');
@@ -70,7 +70,7 @@ describe('use-sort', function () {
     // Opens dropdown
     userEvent.click(
       screen.getByRole('button', {
-        name: /title/i,
+        name: 'Sort by',
       }),
       undefined,
       {
@@ -111,7 +111,7 @@ describe('use-sort', function () {
     // Opens dropdown
     userEvent.click(
       screen.getByRole('button', {
-        name: /title/i,
+        name: 'Sort by',
       }),
       undefined,
       {
@@ -141,7 +141,7 @@ describe('use-sort', function () {
     // Opens dropdown
     userEvent.click(
       screen.getByRole('button', {
-        name: /title/i,
+        name: 'Sort by',
       }),
       undefined,
       {

packages/compass-components/src/hooks/use-sort.tsx

@@ -43,7 +43,7 @@ export function useSortControls<T extends string>(
   items: readonly { name: T; label: string }[],
   options?: SortOptions
 ): [React.ReactElement, SortState<Unwrap<typeof items>['name']>] {
-  const labelId = useId('Sort by');
+  const labelId = 'sort-by';
   const controlId = useId();
 
   const [sortState, dispatch] = useReducer(

packages/compass-connections-navigation/src/base-navigation-item.tsx

@@ -17,6 +17,7 @@ type NavigationBaseItemProps = {
   isExpandDisabled: boolean;
   isExpanded: boolean;
   isFocused: boolean;
+  hasDefaultAction: boolean;
   icon: React.ReactNode;
   style: React.CSSProperties;
 
@@ -37,7 +38,6 @@ const menuStyles = css({
 });
 
 const itemContainerStyles = css({
-  cursor: 'pointer',
   color: 'var(--item-color)',
   backgroundColor: 'var(--item-bg-color)',
   '&[data-is-active="true"] .item-wrapper': {
@@ -53,6 +53,10 @@ const itemContainerStyles = css({
   },
 });
 
+const itemContainerWithActionStyles = css({
+  cursor: 'pointer',
+});
+
 const itemWrapperStyles = css({
   display: 'flex',
   height: ROW_HEIGHT,
@@ -93,14 +97,17 @@ export const NavigationBaseItem: React.FC<NavigationBaseItemProps> = ({
   isExpandDisabled,
   isExpanded,
   isFocused,
+  hasDefaultAction,
   onExpand,
   children,
 }) => {
   const [hoverProps, isHovered] = useHoverState();
   return (
     <div
       data-testid="base-navigation-item"
-      className={itemContainerStyles}
+      className={cx(itemContainerStyles, {
+        [itemContainerWithActionStyles]: hasDefaultAction,
+      })}
       {...hoverProps}
       {...dataAttributes}
     >

packages/compass-connections-navigation/src/connections-navigation-tree.tsx

@@ -87,8 +87,6 @@ const ConnectionsNavigationTree: React.FunctionComponent<
       if (item.type === 'connection') {
         if (item.connectionStatus === 'connected') {
           onItemAction(item, 'select-connection');
-        } else {
-          onItemAction(item, 'connection-connect');
         }
       } else if (item.type === 'database') {
         onItemAction(item, 'select-database');
@@ -187,7 +185,7 @@ const ConnectionsNavigationTree: React.FunctionComponent<
                 connectionInfo: item.connectionInfo,
               }),
               config: {
-                collapseAfter: 0,
+                collapseAfter: 1,
               },
             };
           }

packages/compass-connections-navigation/src/item-actions.ts

@@ -5,7 +5,7 @@ import { type ItemSeparator } from '@mongodb-js/compass-components';
 
 export type NavigationItemActions = (ItemAction<Actions> | ItemSeparator)[];
 
-export const notConnectedConnectionItemActions = ({
+export const commonConnectionItemActions = ({
   connectionInfo,
 }: {
   connectionInfo: ConnectionInfo;
@@ -81,7 +81,7 @@ export const connectedConnectionItemActions = ({
   isShellEnabled: boolean;
 }): NavigationItemActions => {
   const isAtlas = !!connectionInfo.atlasMetadata;
-  const connectionManagementActions = notConnectedConnectionItemActions({
+  const connectionManagementActions = commonConnectionItemActions({
     connectionInfo,
   });
   const actions: (ItemAction<Actions> | ItemSeparator | null)[] = [
@@ -135,6 +135,23 @@ export const connectedConnectionItemActions = ({
   });
 };
 
+export const notConnectedConnectionItemActions = ({
+  connectionInfo,
+}: {
+  connectionInfo: ConnectionInfo;
+}): NavigationItemActions => {
+  const commonActions = commonConnectionItemActions({ connectionInfo });
+  return [
+    {
+      action: 'connection-connect',
+      label: 'Connect',
+      icon: 'Connect',
+      expandedPresentation: 'button',
+    },
+    ...commonActions,
+  ];
+};
+
 export const databaseItemActions = ({
   hasWriteActionsDisabled,
 }: {