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

Author: gribnoysup

.github/PULL_REQUEST_TEMPLATE.md

@@ -16,6 +16,7 @@
 ### Checklist
 - [ ] New tests and/or benchmarks are included
 - [ ] Documentation is changed or added
+- [ ] I have signed the MongoDB Contributor License Agreement (https://www.mongodb.com/legal/contributor-agreement)
 
 ## Motivation and Context
 <!--- Why is this change required? What problem does it solve? -->

THIRD-PARTY-NOTICES.md

@@ -1,5 +1,5 @@
 The following third-party software is used by and included in **compass**.
-This document was automatically generated on Thu Sep 08 2022.
+This document was automatically generated on Fri Sep 09 2022.
 
 ## List of dependencies
 

packages/compass-collection/src/components/collection-header-actions/collection-header-actions.tsx

@@ -17,6 +17,7 @@ const collectionHeaderActionsStyles = css({
   display: 'flex',
   marginLeft: 'auto',
   alignItems: 'center',
+  overflow: 'hidden',
 });
 
 const collectionHeaderActionsReadonlyStyles = css({

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

@@ -34,10 +34,9 @@ const collectionHeaderStyles = css({
 const collectionHeaderTitleStyles = css({
   display: 'flex',
   alignItems: 'center',
-  flex: '1 1 100%',
   padding: `0 ${String(spacing[3])}px`,
   margin: 0,
-  width: '100%',
+  overflow: 'hidden',
 });
 
 const collectionHeaderDBLinkStyles = css({
@@ -51,7 +50,7 @@ const collectionHeaderDBLinkStyles = css({
   },
   backgroundColor: 'transparent',
   border: 'none',
-  display: 'inline',
+  display: 'inline-block',
   padding: 0,
 });
 
@@ -69,12 +68,12 @@ const collectionHeaderNamespaceStyles = css({
   display: 'flex',
   whiteSpace: 'nowrap',
   overflow: 'hidden',
-  textOverflow: 'ellipsis',
 });
 
 const collectionHeaderDBNameStyles = css({
-  display: 'flex',
-  alignItems: 'center',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
 });
 
 const collectionHeaderDBNameLightStyles = css({

packages/compass-crud/src/components/crud-toolbar.spec.tsx

@@ -39,6 +39,8 @@ const mockQueryBarStore = {
   },
 };
 
+const testOutdatedMessageId = 'crud-outdated-message-id';
+
 function renderCrudToolbar(
   props?: Partial<React.ComponentProps<typeof CrudToolbar>>
 ) {
@@ -61,6 +63,7 @@ function renderCrudToolbar(
       onApplyClicked={noop}
       onResetClicked={noop}
       openExportFileDialog={noop}
+      outdated={false}
       page={0}
       readonly={false}
       refreshDocuments={noop}
@@ -241,6 +244,12 @@ describe('CrudToolbar Component', function () {
     expect(exportSpy.calledOnce).to.be.true;
   });
 
+  it('should not render the outdated message', function () {
+    renderCrudToolbar();
+
+    expect(screen.queryByTestId(testOutdatedMessageId)).to.not.exist;
+  });
+
   describe('when the instance is in a writable state (`isWritable` is true)', function () {
     beforeEach(function () {
       renderCrudToolbar({
@@ -268,4 +277,16 @@ describe('CrudToolbar Component', function () {
       ).to.exist;
     });
   });
+
+  describe('when the documents are outdated', function () {
+    beforeEach(function () {
+      renderCrudToolbar({
+        outdated: true,
+      });
+    });
+
+    it('should render the outdated message', function () {
+      expect(screen.getByTestId(testOutdatedMessageId)).to.be.visible;
+    });
+  });
 });

packages/compass-crud/src/components/crud-toolbar.tsx

@@ -13,6 +13,7 @@ import {
   css,
   spacing,
   useId,
+  WarningSummary,
 } from '@mongodb-js/compass-components';
 
 import { AddDataMenu } from './add-data-menu';
@@ -55,10 +56,15 @@ const exportCollectionButtonStyles = css({
   whiteSpace: 'nowrap',
 });
 
+const OUTDATED_WARNING = `The content is outdated and no longer in sync
+with the current query. Press "Find" again to see the results for
+the current query.`;
+
 type CrudToolbarProps = {
   activeDocumentView: string;
   count?: number;
   end: number;
+  error?: Error;
   getPage: (page: number) => void;
   insertDataHandler: (openInsertKey: 'insert-document' | 'import-file') => void;
   instanceDescription: string;
@@ -69,6 +75,7 @@ type CrudToolbarProps = {
   onApplyClicked: () => void;
   onResetClicked: () => void;
   openExportFileDialog: () => void;
+  outdated: boolean;
   page: number;
   readonly: boolean;
   refreshDocuments: () => void;
@@ -81,6 +88,7 @@ const CrudToolbar: React.FunctionComponent<CrudToolbarProps> = ({
   activeDocumentView,
   count,
   end,
+  error,
   getPage,
   insertDataHandler,
   instanceDescription,
@@ -91,6 +99,7 @@ const CrudToolbar: React.FunctionComponent<CrudToolbarProps> = ({
   onApplyClicked,
   onResetClicked,
   openExportFileDialog,
+  outdated,
   page,
   readonly,
   refreshDocuments,
@@ -236,6 +245,12 @@ const CrudToolbar: React.FunctionComponent<CrudToolbarProps> = ({
           </SegmentedControl>
         </div>
       </div>
+      {outdated && !error && (
+        <WarningSummary
+          data-testid="crud-outdated-message-id"
+          warnings={[OUTDATED_WARNING]}
+        />
+      )}
     </Toolbar>
   );
 };

packages/compass-crud/src/components/document-list.jsx

@@ -269,6 +269,7 @@ class DocumentList extends React.Component {
         {useNewToolbars ? (
           <CrudToolbar
             activeDocumentView={this.props.view}
+            error={this.props.error}
             count={this.props.count}
             loadingCount={this.props.loadingCount}
             start={this.props.start}
@@ -281,6 +282,7 @@ class DocumentList extends React.Component {
             onApplyClicked={this.onApplyClicked.bind(this)}
             onResetClicked={this.onResetClicked.bind(this)}
             openExportFileDialog={this.props.openExportFileDialog}
+            outdated={this.props.outdated}
             readonly={!this.props.isEditable}
             viewSwitchHandler={this.props.viewChanged}
             isWritable={this.props.isWritable}

packages/compass-databases-navigation/src/collection-item.tsx

@@ -135,7 +135,9 @@ export const CollectionItem: React.FunctionComponent<
       {...hoverProps}
     >
       <CollectionIcon type={type} />
-      <ItemLabel className={collectionItemLabel}>{name}</ItemLabel>
+      <ItemLabel className={collectionItemLabel} title={name}>
+        {name}
+      </ItemLabel>
       <ItemActionControls<Actions>
         className={collectionActions}
         onAction={onAction}

packages/compass-databases-navigation/src/database-item.tsx

@@ -181,6 +181,7 @@ export const DatabaseItem: React.FunctionComponent<
             ? databaseItemLabelNewSpacing
             : databaseItemLabelOldSpacing
         }
+        title={name}
       >
         {name}
       </ItemLabel>

packages/compass-sidebar/src/components-legacy/sidebar/navigation-items.jsx

@@ -31,9 +31,7 @@ const navItemButton = css({
   backgroundColor: uiColors.gray.dark2,
   ':hover': {
     cursor: 'pointer',
-    // removed the hover background color change and bolding the text so the old
-    // sidebar fits with the compass-databases-navigation colour changes.
-    fontWeight: 'bold',
+    backgroundColor: uiColors.gray.dark3,
   },
 });