Merge branch 'main' into COMPASS-8395-e2e-compass-web-gen-ai

Author: Anemy

.github/workflows/authors-and-third-party-notices.yaml

@@ -68,5 +68,5 @@ jobs:
 
       - name: Commit and push
         run: |
-          git commit --no-allow-empty -m "chore: update AUTHORS, THIRD-PARTY-NOTICES, Security Test Summary [skip actions]" || true
+          git commit --no-allow-empty -m "chore: update AUTHORS, THIRD-PARTY-NOTICES, Security Test Summary" || true
           git push

AUTHORS

@@ -95,3 +95,4 @@ Ruchitha Rajaghatta <[email protected]>
 syn-zhu <[email protected]>
 Nikola Irinchev <[email protected]>
 djechlin-mongodb <[email protected]>
+Dylan Richardson <[email protected]>

THIRD-PARTY-NOTICES.md

@@ -1,7 +1,7 @@
 
 # Compass Tracking Plan
 
-Generated on Mon, Dec 9, 2024 at 03:11 PM
+Generated on Fri, Dec 13, 2024 at 07:24 PM
 
 ## Table of Contents
 

docs/tracking-plan.md

@@ -79,8 +79,8 @@
     "@mongodb-js/compass-user-data": "^0.3.12",
     "@mongodb-js/compass-utils": "^0.6.16",
     "@mongodb-js/connection-info": "^0.9.5",
-    "@mongodb-js/devtools-connect": "^3.3.3",
-    "@mongodb-js/devtools-proxy-support": "^0.4.1",
+    "@mongodb-js/devtools-connect": "^3.3.4",
+    "@mongodb-js/devtools-proxy-support": "^0.4.2",
     "@mongodb-js/oidc-plugin": "^1.1.5",
     "hadron-app-registry": "^9.2.8",
     "compass-preferences-model": "^2.31.1",

package-lock.json

@@ -84,7 +84,7 @@
     "hadron-document": "^8.6.6",
     "hadron-type-checker": "^7.2.4",
     "lodash": "^4.17.21",
-    "mongodb": "^6.11.0",
+    "mongodb": "^6.12.0",
     "mongodb-collection-model": "^5.23.9",
     "mongodb-data-service": "^22.23.9",
     "mongodb-database-model": "^2.23.9",

packages/atlas-service/package.json

@@ -58,7 +58,7 @@ const SortableItem = ({ id, index, type }: SortableItemProps) => {
   const style = {
     transform: cssDndKit.Transform.toString(transform),
     transition,
-    zIndex: isDragging ? 1 : 0,
+    ...(isDragging ? { zIndex: 1 } : {}),
   };
 
   const sortableProps: SortableProps = {

packages/compass-aggregations/package.json

@@ -17,21 +17,34 @@ import { filterStageOperators } from '../../utils/stage';
 import { isAtlasOnly } from '../../utils/stage';
 import type { ServerEnvironment } from '../../modules/env';
 
-const inputWidth = spacing[7] * 2;
+const inputWidth = spacing[1400] * 3;
+const inputHeight = spacing[600] - 2; // match other xs controls
+// width of options popover
+const comboxboxOptionsWidth = spacing[1200] * 10;
+// left position of options popover wrt input. this aligns it with the start of input
+const comboboxOptionsLeft = (comboxboxOptionsWidth - inputWidth) / 2;
 
-const inputHeight = spacing[4] - 2; // match other xs controls
 const comboboxStyles = css({
   width: inputWidth,
   '& [role="combobox"]': {
     padding: 0,
-    paddingLeft: spacing[1],
+    paddingLeft: spacing[100],
     height: inputHeight,
     '& > div': {
       minHeight: inputHeight,
     },
-    '& input': {
-      height: inputHeight - 2,
-    },
+  },
+});
+
+const comboboxPortalStyles = css({
+  position: 'fixed',
+  top: 0,
+  // -4px to count for the input focus outline.
+  left: `${comboboxOptionsLeft - 4}px`,
+  zIndex: 1,
+  '> div': {
+    width: comboxboxOptionsWidth,
+    whiteSpace: 'normal',
   },
 });
 
@@ -61,32 +74,35 @@ export const StageOperatorSelect = ({
     },
     [onChange, index]
   );
+  const portalRef = React.useRef<HTMLDivElement | null>(null);
 
   return (
-    <Combobox
-      value={selectedStage}
-      disabled={isDisabled}
-      aria-label="Select a stage operator"
-      onChange={onStageOperatorSelected}
-      size="default"
-      clearable={false}
-      data-testid="stage-operator-combobox"
-      className={comboboxStyles}
-      // Used for testing to access the popover for a stage
-      popoverClassName={`mongodb-compass-stage-operator-combobox-${index}`}
-    >
-      {stages.map((stage, index) => (
-        <ComboboxOption
-          data-testid={`combobox-option-stage-${stage.name}`}
-          key={`combobox-option-stage-${index}`}
-          value={stage.name}
-          displayName={stage.name}
-          description={
-            (isAtlasOnly(stage.env) ? 'Atlas only. ' : '') + stage.description
-          }
-        />
-      ))}
-    </Combobox>
+    <React.Fragment>
+      <div className={comboboxPortalStyles} ref={portalRef} />
+      <Combobox
+        value={selectedStage}
+        disabled={isDisabled}
+        aria-label="Select a stage operator"
+        onChange={onStageOperatorSelected}
+        size="default"
+        clearable={false}
+        data-testid="stage-operator-combobox"
+        className={comboboxStyles}
+        portalContainer={portalRef.current}
+        usePortal
+      >
+        {stages.map((stage, index) => (
+          <ComboboxOption
+            data-testid={`combobox-option-stage-${stage.name}`}
+            key={`combobox-option-stage-${index}`}
+            value={stage.name}
+            description={
+              (isAtlasOnly(stage.env) ? 'Atlas only. ' : '') + stage.description
+            }
+          />
+        ))}
+      </Combobox>
+    </React.Fragment>
   );
 };
 

packages/compass-aggregations/src/components/pipeline-builder-workspace/pipeline-builder-ui-workspace/sortable-list.tsx

@@ -40,16 +40,15 @@
     "@leafygreen-ui/card": "^10.0.6",
     "@leafygreen-ui/checkbox": "^12.1.1",
     "@leafygreen-ui/code": "^14.3.1",
+    "@leafygreen-ui/combobox": "^9.1.6",
     "@leafygreen-ui/confirmation-modal": "^5.2.0",
     "@leafygreen-ui/emotion": "^4.0.7",
     "@leafygreen-ui/guide-cue": "^5.0.6",
     "@leafygreen-ui/hooks": "^8.1.2",
     "@leafygreen-ui/icon": "^12.0.0",
     "@leafygreen-ui/icon-button": "^15.0.20",
     "@leafygreen-ui/info-sprinkle": "^1.0.3",
-    "@leafygreen-ui/inline-definition": "^6.0.14",
     "@leafygreen-ui/leafygreen-provider": "^3.1.12",
-    "@leafygreen-ui/lib": "^13.2.1",
     "@leafygreen-ui/logo": "^9.1.1",
     "@leafygreen-ui/marketing-modal": "^4.2.1",
     "@leafygreen-ui/menu": "^23.0.2",
@@ -84,7 +83,6 @@
     "is-electron-renderer": "^2.0.1",
     "lodash": "^4.17.21",
     "polished": "^4.2.2",
-    "prop-types": "^15.7.2",
     "react": "^17.0.2",
     "react-hotkeys-hook": "^4.3.7",
     "react-intersection-observer": "^8.34.0",