Merge remote-tracking branch 'origin/main' into beta-releases

Author: github-actions[bot]

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 Wed Nov 29 2023.
+This document was automatically generated on Sun Dec 03 2023.
 
 ## List of dependencies
 

packages/compass-aggregations/src/components/modify-source-banner/modify-source-banner.tsx

@@ -3,23 +3,25 @@ import PropTypes from 'prop-types';
 import { Badge, BadgeVariant, css } from '@mongodb-js/compass-components';
 
 const modifySourceBannerStyles = css({
-  textAlign: 'center',
-  margin: '5px auto',
-  marginTop: '20px',
-  zIndex: 500,
+  display: 'inline-block',
+  minWidth: 0,
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
 });
 
 /**
  * The blue banner displayed when modifying a source pipeline.
  */
-const ModifySourceBanner = (props: { editViewName: React.ReactNode }) => {
+const ModifySourceBanner = (props: { editViewName: string }) => {
+  const bannerText = `Modifying pipeline backing "${props.editViewName}"`;
   return (
     <Badge
       className={modifySourceBannerStyles}
       variant={BadgeVariant.Blue}
       data-testid="modify-source-banner"
+      title={bannerText}
     >
-      Modifying pipeline backing &quot;{props.editViewName}&quot;
+      {bannerText}
     </Badge>
   );
 };

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

@@ -10,7 +10,6 @@ import {
   addStage,
   moveStage,
 } from '../../../modules/pipeline-builder/stage-editor';
-import ModifySourceBanner from '../../modify-source-banner';
 import AggregationSidePanel from '../../aggregation-side-panel';
 import { addWizard } from '../../../modules/pipeline-builder/stage-editor';
 import PipelineBuilderInputDocuments from '../../pipeline-builder-input-documents';
@@ -37,7 +36,6 @@ const pipelineWorkspaceStyles = css({
 
 export type PipelineBuilderUIWorkspaceProps = {
   stagesIdAndType: StageIdAndType[];
-  editViewName?: string | null;
   isSidePanelOpen: boolean;
   onStageMoveEnd: (from: number, to: number) => void;
   onStageAddAfterEnd: (after?: number) => void;
@@ -52,7 +50,6 @@ export const PipelineBuilderUIWorkspace: React.FunctionComponent<
   PipelineBuilderUIWorkspaceProps
 > = ({
   stagesIdAndType,
-  editViewName,
   isSidePanelOpen,
   onStageMoveEnd,
   onStageAddAfterEnd,
@@ -69,7 +66,6 @@ export const PipelineBuilderUIWorkspace: React.FunctionComponent<
         className={pipelineWorkspaceContainerStyles}
       >
         <div className={pipelineWorkspaceStyles}>
-          {editViewName && <ModifySourceBanner editViewName={editViewName} />}
           <PipelineBuilderInputDocuments />
           <SortableList
             stagesIdAndType={stagesIdAndType}
@@ -106,7 +102,6 @@ export const PipelineBuilderUIWorkspace: React.FunctionComponent<
 const mapState = (state: RootState) => {
   return {
     stagesIdAndType: state.pipelineBuilder.stageEditor.stagesIdAndType,
-    editViewName: state.editViewName,
     isSidePanelOpen: state.sidePanel.isPanelOpen,
   };
 };

packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-settings/index.tsx

@@ -10,29 +10,30 @@ import { getIsPipelineInvalidFromBuilderState } from '../../../modules/pipeline-
 import { confirmNewPipeline } from '../../../modules/is-new-pipeline-confirm';
 import { usePreference } from 'compass-preferences-model';
 import { hiddenOnNarrowPipelineToolbarStyles } from '../pipeline-toolbar-container';
+import ModifySourceBanner from '../../modify-source-banner';
 
 const containerStyles = css({
-  display: 'grid',
+  display: 'flex',
   gap: spacing[2],
-  gridTemplateAreas: '"settings extraSettings"',
-  gridTemplateColumns: '1fr auto',
   alignItems: 'center',
+  justifyContent: 'space-between',
   whiteSpace: 'nowrap',
 });
 
 const settingsStyles = css({
   display: 'flex',
   gap: spacing[2],
   alignItems: 'center',
+  flex: 'none',
 });
 
 const extraSettingsStyles = css({
-  gridArea: 'extraSettings',
   display: 'flex',
+  flex: 'none',
 });
 
 type PipelineSettingsProps = {
-  isEditingViewPipeline?: boolean;
+  editViewName?: string;
   isExportToLanguageEnabled?: boolean;
   onExportToLanguage: () => void;
   onCreateNewPipeline: () => void;
@@ -41,7 +42,7 @@ type PipelineSettingsProps = {
 export const PipelineSettings: React.FunctionComponent<
   PipelineSettingsProps
 > = ({
-  isEditingViewPipeline = false,
+  editViewName,
   isExportToLanguageEnabled,
   onExportToLanguage,
   onCreateNewPipeline,
@@ -51,8 +52,8 @@ export const PipelineSettings: React.FunctionComponent<
     React
   );
   const isSavePipelineDisplayed =
-    !isEditingViewPipeline && enableSavedAggregationsQueries;
-  const isCreatePipelineDisplayed = !isEditingViewPipeline;
+    !editViewName && enableSavedAggregationsQueries;
+  const isCreatePipelineDisplayed = !editViewName;
 
   return (
     <div className={containerStyles} data-testid="pipeline-settings">
@@ -87,6 +88,9 @@ export const PipelineSettings: React.FunctionComponent<
           </span>
         </Button>
       </div>
+      {editViewName && (
+        <ModifySourceBanner editViewName={editViewName}></ModifySourceBanner>
+      )}
       <div className={extraSettingsStyles}>
         <PipelineExtraSettings />
       </div>
@@ -98,7 +102,7 @@ export default connect(
   (state: RootState) => {
     const hasSyntaxErrors = getIsPipelineInvalidFromBuilderState(state, false);
     return {
-      isEditingViewPipeline: !!state.editViewName,
+      editViewName: state.editViewName ?? undefined,
       isExportToLanguageEnabled: !hasSyntaxErrors,
     };
   },

packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-settings/pipeline-extra-settings.tsx

@@ -19,7 +19,10 @@ import type { PipelineMode } from '../../../modules/pipeline-builder/pipeline-mo
 import { getIsPipelineInvalidFromBuilderState } from '../../../modules/pipeline-builder/builder-helpers';
 import { toggleSidePanel } from '../../../modules/side-panel';
 import { usePreference } from 'compass-preferences-model';
-import { hiddenOnNarrowPipelineToolbarStyles } from '../pipeline-toolbar-container';
+import {
+  hiddenOnNarrowPipelineToolbarStyles,
+  smallPipelineToolbar,
+} from '../pipeline-toolbar-container';
 
 const containerStyles = css({
   display: 'flex',
@@ -39,6 +42,17 @@ const toggleLabelStyles = css({
   textTransform: 'uppercase',
 });
 
+const segmentControlStyles = css({
+  [smallPipelineToolbar()]: {
+    // NB: leafygreen renders labels near icons, that's the most "stable" way of
+    // targeting it so we can hide it on smaller toolbar sizes. This can still
+    // break if they drastically change how segmented control is rendered
+    '& [data-segmented-control-icon] + span': {
+      display: 'none',
+    },
+  },
+});
+
 const toggleStageWizardStyles = css({ margin: 'auto' });
 
 type PipelineExtraSettingsProps = {
@@ -99,15 +113,17 @@ export const PipelineExtraSettings: React.FunctionComponent<
           disabled={isPipelineModeDisabled}
           data-testid="pipeline-builder-toggle-builder-ui"
           value="builder-ui"
-          glyph={<Icon glyph="CurlyBraces"></Icon>}
+          glyph={<Icon data-segmented-control-icon glyph="CurlyBraces"></Icon>}
+          className={segmentControlStyles}
         >
           Stages
         </SegmentedControlOption>
         <SegmentedControlOption
           disabled={isPipelineModeDisabled}
           data-testid="pipeline-builder-toggle-as-text"
           value="as-text"
-          glyph={<Icon glyph="Code"></Icon>}
+          glyph={<Icon data-segmented-control-icon glyph="Code"></Icon>}
+          className={segmentControlStyles}
         >
           Text
         </SegmentedControlOption>

packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-toolbar-container.tsx

@@ -19,11 +19,14 @@ const containerDisplayStyles = css({
   `,
 });
 
+export const smallPipelineToolbar = () => {
+  return `@container ${WorkspaceContainer.toolbarContainerQueryName} (width < 900px)`;
+};
+
 export const hiddenOnNarrowPipelineToolbarStyles = css({
-  [`@container ${WorkspaceContainer.toolbarContainerQueryName} (width < 900px)`]:
-    {
-      display: 'none',
-    },
+  [smallPipelineToolbar()]: {
+    display: 'none',
+  },
 });
 
 export const PipelineToolbarContainer = ({

packages/compass-crud/src/components/bulk-delete-modal.tsx

@@ -37,7 +37,7 @@ const documentContainerStyles = css({
 });
 
 const modalBodySpacingStyles = css({
-  marginTop: spacing[3],
+  marginTop: spacing[3] - spacing[1], // see queryBarStyles below
   paddingLeft: spacing[5],
   display: 'flex',
   flexDirection: 'column',
@@ -49,6 +49,7 @@ const queryBarStyles = css({
   flexDirection: 'row',
   alignItems: 'center',
   gap: spacing[3],
+  marginTop: spacing[1], // don't cut off the focus/hover ring on the Export button
 });
 
 const exportToLanguageButtonStyles = css({

packages/compass-crud/src/stores/crud-store.ts

@@ -1102,6 +1102,10 @@ class CrudStoreImpl
   }
 
   async openBulkUpdateDialog() {
+    track('Bulk Update Opened', {
+      isUpdatePreviewSupported: this.state.isUpdatePreviewSupported,
+    });
+
     await this.updateBulkUpdatePreview('{ $set: { } }');
     this.setState({
       bulkUpdate: {
@@ -1224,6 +1228,10 @@ class CrudStoreImpl
   }
 
   async runBulkUpdate() {
+    track('Bulk Update Executed', {
+      isUpdatePreviewSupported: this.state.isUpdatePreviewSupported,
+    });
+
     this.closeBulkUpdateDialog();
 
     // keep the filter count around for the duration of the toast
@@ -1826,6 +1834,8 @@ class CrudStoreImpl
   }
 
   openBulkDeleteDialog() {
+    track('Bulk Delete Opened');
+
     const PREVIEW_DOCS = 5;
 
     this.setState({
@@ -1880,6 +1890,8 @@ class CrudStoreImpl
   }
 
   async runBulkDelete() {
+    track('Bulk Delete Executed');
+
     const { affected } = this.state.bulkDelete;
     this.closeBulkDeleteDialog();
 
@@ -1919,6 +1931,10 @@ class CrudStoreImpl
   }
 
   async saveUpdateQuery(name: string): Promise<void> {
+    track('Bulk Update Favorited', {
+      isUpdatePreviewSupported: this.state.isUpdatePreviewSupported,
+    });
+
     const { filter } = this.state.query;
     let update;
     try {

packages/compass-e2e-tests/tests/collection-bulk-delete.test.ts

@@ -36,7 +36,7 @@ describe('Bulk Delete', () => {
   });
 
   it('deletes documents matching a filter', async function () {
-    //const telemetryEntry = await browser.listenForTelemetryEvents(telemetry);
+    const telemetryEntry = await browser.listenForTelemetryEvents(telemetry);
 
     // Set a query that we'll use.
     await browser.runFindOperation('Documents', '{ i: 5 }');
@@ -45,6 +45,10 @@ describe('Bulk Delete', () => {
     await browser.clickVisible(Selectors.OpenBulkDeleteButton);
     await browser.$(Selectors.BulkDeleteModal).waitForDisplayed();
 
+    // Check the telemetry
+    const openedEvent = await telemetryEntry('Bulk Delete Opened');
+    expect(openedEvent).to.deep.equal({});
+
     // Make sure the query is shown in the modal.
     expect(
       await browser.$(Selectors.BulkDeleteModalReadonlyFilter).getText()
@@ -71,6 +75,10 @@ describe('Bulk Delete', () => {
     await browser.clickVisible(Selectors.ConfirmationModalConfirmButton());
     await browser.runFindOperation('Documents', '{ i: 5 }');
 
+    // Check the telemetry
+    const executedEvent = await telemetryEntry('Bulk Delete Executed');
+    expect(executedEvent).to.deep.equal({});
+
     // The success toast is displayed
     await browser.$(Selectors.BulkDeleteSuccessToast).waitForDisplayed();
 
@@ -93,8 +101,6 @@ describe('Bulk Delete', () => {
   });
 
   it('does not delete documents when cancelled', async function () {
-    //const telemetryEntry = await browser.listenForTelemetryEvents(telemetry);
-
     // Set a query that we'll use.
     await browser.runFindOperation('Documents', '{ i: 5 }');
 
@@ -129,4 +135,52 @@ describe('Bulk Delete', () => {
       await browser.$(Selectors.DocumentListActionBarMessage).getText()
     ).to.equal('1 – 1 of 1');
   });
+
+  it('can export a delete query', async function () {
+    if (process.env.COMPASS_E2E_DISABLE_CLIPBOARD_USAGE === 'true') {
+      this.skip();
+    }
+
+    const telemetryEntry = await browser.listenForTelemetryEvents(telemetry);
+
+    // Set a query that we'll use.
+    await browser.runFindOperation('Documents', '{ i: 5 }');
+
+    // Open the modal.
+    await browser.clickVisible(Selectors.OpenBulkDeleteButton);
+    await browser.$(Selectors.BulkDeleteModal).waitForDisplayed();
+
+    // Click the export button
+    await browser.clickVisible(Selectors.BulkDeleteModalExportButton);
+
+    const openedEvent = await telemetryEntry('Delete Export Opened');
+    expect(openedEvent).to.deep.equal({});
+
+    const text = await browser.exportToLanguage('Python', {
+      includeImportStatements: true,
+      includeDriverSyntax: true,
+      useBuilders: false,
+    });
+    expect(text).to.equal(`from pymongo import MongoClient
+
+# Requires the PyMongo package.
+# https://api.mongodb.com/python/current
+
+client = MongoClient('mongodb://localhost:27091/test')
+filter={
+    'i': 5
+}
+
+result = client['test']['numbers'].delete_many(
+  filter=filter
+)`);
+
+    const exportedEvent = await telemetryEntry('Delete Exported');
+    expect(exportedEvent).to.deep.equal({
+      language: 'python',
+      with_builders: false,
+      with_drivers_syntax: true,
+      with_import_statements: true,
+    });
+  });
 });