fix(compass-crud): add outdated warning to feature flagged crud toolbar (#3448)

Author: Anemy

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}