chore(components): upgrade LeafyGreen modal components COMPASS-9642 (#7594)

* Upgrade LG modal packages

* Fix Modal to adopt LG Modal v20

* Fix connection-form to work around LG Modal v20

* Update generative-ai to adopt marketing-modal v7

* Fix compass-import-export to work around LG modal v20

* Update compass-welcome to adopt marketing-modal v7

* Update compass-explain-plan to LG Modal v20

* Fix compass-crud to adopt LG modal v20

* Update compass-schema to LG Modal v20

* Add workaround for jsdom missing HTMLDialogElement support

* Update generative-ai to adopt LG modal v20

* Fix fullScreen prop on derived Modal

* Remove use of deprecated backdropClassName

* Remove workaround for MarketingModal button disabling

* Fix remaining components tests

* Revert workaround for LG-5593

* Update existing tests to handle dialog elements remaining in the DOM

* Update databases-collections to allow immediate removal of the heading

* Update e2e tests to use waitForDisplayed over waitForExist as this is more important with the new dialog

* Update e2e tests removing [role=dialog] from confirm dialog selectors

* Update e2e tests to wait for bulk delete modal to disappear

* Update e2e tests to wait for connection form to be non-clickable in any case

* Update e2e tests to fix modal regressions

* Disable pointer events on a closed modal

* Disable auto-focus on confirmation modal children by default

* Add new modal specific commands

* Update E2E tests to use new modal commands instead of waitForDisplayed

* Default initialFocus to "null" to avoid breaking existing modals

* Wait for confirm button to show instead of simply expecting it

* Update FocusMode tests to handle LG Modal v20

* Update SettingsModal tests to handle LG Modal v20

* Clarify disabling the @typescript-eslint/no-namespace and add a TODO to move the code later

* Partial revert of ddd6d70

* Fix auto-focus in bulk update and delete modals

* Correcting sizing styles

* Correcting sizing styles more

* Use named imports

* Upgrade confirm-modal package

* Fix useConfirmation's confirmButtonProps types

* Update use of ConfirmationModal

* Set initial focus on cancel (fallback to confirm) button

* Fix package lock

Author: kraenhansen

configs/mocha-config-compass/register/jsdom-extra-mocks-register.js

@@ -35,6 +35,25 @@ Object.assign(tabbable, {
     origTabbable.isTabbable(node, { ...options, displayCheck: 'none' }),
 });
 
+// Workaround for missing HTMLDialogElement in jsdom
+// See https://github.com/jsdom/jsdom/issues/3294
+
+Object.assign(HTMLDialogElement.prototype, {
+  show() {
+    this.open = true;
+    this.style.display = '';
+  },
+  showModal() {
+    this.open = true;
+    this.style.display = '';
+  },
+  close(returnValue) {
+    this.open = false;
+    this.returnValue = returnValue;
+    this.style.display = 'none';
+  },
+});
+
 // leafygreen (through `clipboard` library) uses deprecated API check that is
 // not working in jsdom if copy / paste APIs are supported
 if (!window.document.queryCommandSupported) {

configs/testing-library-compass/src/assertions.ts

@@ -0,0 +1,43 @@
+import { Assertion, util } from 'chai';
+
+// TODO(COMPASS-10119): Move declaration into a separate .d.ts and implementation into a *-register.js file as we do with other global patching code intended for tests.
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace -- We're following a pattern established in the `@types/chai-as-promised` package to add a Chai assertion property.
+  export namespace Chai {
+    interface Assertion {
+      /** Asserts that a dialog is open */
+      get open(): Assertion;
+      /** Asserts that a dialog is closed */
+      get closed(): Assertion;
+    }
+  }
+}
+
+util.addProperty(
+  Assertion.prototype,
+  'open',
+  function (this: typeof Assertion) {
+    const obj = util.flag(this, 'object');
+    new Assertion(obj).to.be.instanceof(HTMLDialogElement);
+    new Assertion(obj as HTMLDialogElement).has.property(
+      'open',
+      true,
+      'Expected dialog to be open'
+    );
+  }
+);
+
+util.addProperty(
+  Assertion.prototype,
+  'closed',
+  function (this: typeof Assertion) {
+    const obj = util.flag(this, 'object');
+    new Assertion(obj).to.be.instanceof(HTMLDialogElement);
+    new Assertion(obj as HTMLDialogElement).has.property(
+      'open',
+      false,
+      'Expected dialog to be closed'
+    );
+  }
+);

configs/testing-library-compass/src/index.tsx

@@ -73,6 +73,8 @@ import { expect } from 'chai';
 import { Provider } from 'react-redux';
 import ConnectionString from 'mongodb-connection-string-url';
 
+import './assertions';
+
 function wait(ms: number) {
   return new Promise((resolve) => {
     setTimeout(resolve, ms);