chore(databases-collections): refactor drop collection / drop databas…

…e to drop namespace plugin COMPASS-7410 (#5096) * chore(databases-collections): refactor drop collection / drop databse to drop namespace plugin * fix(compass-components): account for existing toast context in toast area
mongodb-js · Nov 10, 2023 · 909f12d · 909f12d
1 parent 53ac552
commit 909f12d
Show file tree

Hide file tree

Showing 28 changed files with 274 additions and 817 deletions.
diff --git a/packages/compass-components/src/hooks/use-confirmation.tsx b/packages/compass-components/src/hooks/use-confirmation.tsx
@@ -1,19 +1,23 @@
 import React, { useContext, useEffect, useRef, useState } from 'react';
-
 import {
   default as ConfirmationModal,
   Variant as ConfirmationModalVariant,
 } from '@leafygreen-ui/confirmation-modal';
 
 export { ConfirmationModalVariant };
 
-type ConfirmationProperties = {
-  title: string;
-  description: React.ReactNode;
-  buttonText?: string;
-  variant?: ConfirmationModalVariant;
-  requiredInputText?: string;
+type ConfirmationModalProps = React.ComponentProps<typeof ConfirmationModal>;
+
+type ConfirmationProperties = Partial<
+  Pick<
+    ConfirmationModalProps,
+    'title' | 'buttonText' | 'variant' | 'requiredInputText'
+  >
+> & {
+  description?: React.ReactNode;
+  'data-testid'?: string;
 };
+
 type ConfirmationCallback = (value: boolean) => void;
 
 interface ConfirmationModalContextData {
@@ -130,7 +134,7 @@ export const ConfirmationModalArea: React.FC = ({ children }) => {
     <ConfirmationModalContext.Provider value={contextValue}>
       {children}
       <ConfirmationModal
-        data-testid={'confirmation-modal'}
+        data-testid={confirmationProps['data-testid'] ?? 'confirmation-modal'}
         open={confirmationProps.open}
         title={confirmationProps.title ?? 'Are you sure?'}
         variant={confirmationProps.variant ?? ConfirmationModalVariant.Default}

diff --git a/packages/compass-components/src/hooks/use-toast.tsx b/packages/compass-components/src/hooks/use-toast.tsx
@@ -153,11 +153,19 @@ const _ToastArea: React.FunctionComponent = ({ children }) => {
   );
 };
 
+const ToastAreaMountedContext = React.createContext(false);
+
 export const ToastArea: React.FunctionComponent = ({ children }) => {
+  if (useContext(ToastAreaMountedContext)) {
+    return <>{children}</>;
+  }
+
   return (
-    <ToastProvider>
-      <_ToastArea>{children}</_ToastArea>
-    </ToastProvider>
+    <ToastAreaMountedContext.Provider value={true}>
+      <ToastProvider>
+        <_ToastArea>{children}</_ToastArea>
+      </ToastProvider>
+    </ToastAreaMountedContext.Provider>
   );
 };
 

diff --git a/packages/compass-e2e-tests/helpers/commands/drop-collection-from-sidebar.ts b/packages/compass-e2e-tests/helpers/commands/drop-collection-from-sidebar.ts
@@ -38,7 +38,7 @@ export async function dropCollectionFromSidebar(
   await browser.clickVisible(Selectors.CollectionShowActionsButton);
   await browser.clickVisible(Selectors.DropCollectionButton);
 
-  await browser.dropCollection(collectionName);
+  await browser.dropNamespace(collectionName);
 
   // wait for it to be gone
   await collectionElement.waitForExist({ reverse: true });

diff --git a/packages/compass-e2e-tests/helpers/commands/drop-collection.ts b/packages/compass-e2e-tests/helpers/commands/drop-collection.ts
diff --git a/packages/compass-e2e-tests/helpers/commands/drop-database-from-sidebar.ts b/packages/compass-e2e-tests/helpers/commands/drop-database-from-sidebar.ts
@@ -18,7 +18,7 @@ export async function dropDatabaseFromSidebar(
 
   await browser.clickVisible(Selectors.DropDatabaseButton);
 
-  await browser.dropDatabase(dbName);
+  await browser.dropNamespace(dbName);
 
   // wait for it to be gone
   await browser

diff --git a/packages/compass-e2e-tests/helpers/commands/drop-database.ts b/packages/compass-e2e-tests/helpers/commands/drop-database.ts
diff --git a/packages/compass-e2e-tests/helpers/commands/drop-namespace.ts b/packages/compass-e2e-tests/helpers/commands/drop-namespace.ts
@@ -0,0 +1,23 @@
+import type { CompassBrowser } from '../compass-browser';
+import * as Selectors from '../selectors';
+
+export async function dropNamespace(
+  browser: CompassBrowser,
+  collectionName: string
+): Promise<void> {
+  const dropModalElement = await browser.$(Selectors.DropNamespaceModal);
+  await dropModalElement.waitForDisplayed();
+  const confirmInput = await browser.$(Selectors.DropNamespaceConfirmNameInput);
+  await confirmInput.setValue(collectionName);
+  const confirmButton = await browser.$(Selectors.DropNamespaceDropButton);
+  await confirmButton.waitForEnabled();
+
+  await browser.screenshot('drop-namespace-modal.png');
+
+  await confirmButton.click();
+
+  const successToast = browser.$(Selectors.DropNamespaceSuccessToast);
+  await successToast.waitForDisplayed();
+  await browser.clickVisible(Selectors.DropNamespaceSuccessToastCloseButton);
+  await successToast.waitForDisplayed({ reverse: true });
+}
diff --git a/packages/compass-e2e-tests/helpers/commands/index.ts b/packages/compass-e2e-tests/helpers/commands/index.ts
@@ -25,8 +25,7 @@ export * from './do-connect';
 export * from './hover';
 export * from './add-database';
 export * from './add-collection';
-export * from './drop-database';
-export * from './drop-collection';
+export * from './drop-namespace';
 export * from './get-query-id';
 export * from './run-find';
 export * from './export-to-language';

diff --git a/packages/compass-e2e-tests/helpers/selectors.ts b/packages/compass-e2e-tests/helpers/selectors.ts
@@ -290,13 +290,6 @@ export const CreateDatabaseCreateButton =
 export const CreateDatabaseCancelButton =
   '[data-testid="create-database-modal"] [data-testid="cancel-button"]';
 
-// Drop database modal
-export const DropDatabaseModal = '[data-testid="drop-database-modal"]';
-export const DropDatabaseConfirmName =
-  '[data-testid="confirm-drop-database-name"]';
-export const DropDatabaseDropButton =
-  '[data-testid="drop-database-modal"] [data-testid="submit-button"]';
-
 // Create collection modal
 export const CreateCollectionModal = '[data-testid="create-collection-modal"]';
 export const CreateCollectionCollectionName = '[data-testid="collection-name"]';
@@ -361,12 +354,16 @@ export const createCollectionCustomCollationFieldMenu = (
   return `[data-testid="use-custom-collation-fields"] #collation-field-${fieldName}-menu`;
 };
 
-// Drop collection modal
-export const DropCollectionModal = '[data-testid="drop-collection-modal"]';
-export const DropCollectionConfirmName =
-  '[data-testid="confirm-drop-collection-name"]';
-export const DropCollectionDropButton =
-  '[data-testid="drop-collection-modal"] [data-testid="submit-button"]';
+// Drop namespace modal
+export const DropNamespaceModal =
+  '[data-testid="drop-namespace-confirmation-modal"]';
+export const DropNamespaceConfirmNameInput = `${DropNamespaceModal} input`;
+export const DropNamespaceDropButton = `${DropNamespaceModal} button:first-of-type`;
+export const DropNamespaceCancelButton = `${DropNamespaceModal} button:last-of-type`;
+export const DropNamespaceSuccessToast =
+  '[data-testid="toast-drop-namespace-success"]';
+export const DropNamespaceSuccessToastCloseButton =
+  '[data-testid="toast-drop-namespace-success"] [data-testid="lg-toast-dismiss-button"]';
 
 // Shell
 export const ShellSection = '[data-testid="shell-section"]';

diff --git a/packages/compass-e2e-tests/tests/database-collections-tab.test.ts b/packages/compass-e2e-tests/tests/database-collections-tab.test.ts
@@ -128,7 +128,7 @@ describe('Database collections tab', function () {
 
     await browser.clickVisible(Selectors.CollectionCardDrop);
 
-    await browser.dropCollection(collectionName);
+    await browser.dropNamespace(collectionName);
 
     // wait for it to be gone
     await collectionCard.waitForExist({ reverse: true });

diff --git a/packages/compass-e2e-tests/tests/instance-databases-tab.test.ts b/packages/compass-e2e-tests/tests/instance-databases-tab.test.ts
@@ -123,7 +123,7 @@ describe('Instance databases tab', function () {
 
     await browser.clickVisible(Selectors.DatabaseCardDrop);
 
-    await browser.dropDatabase(dbName);
+    await browser.dropNamespace(dbName);
 
     // wait for it to be gone (which it will be anyway because the app should
     // redirect back to the databases tab)

diff --git a/packages/compass-home/src/components/home.tsx b/packages/compass-home/src/components/home.tsx
@@ -44,9 +44,8 @@ import { CreateViewPlugin } from '@mongodb-js/compass-aggregations';
 import { CompassFindInPagePlugin } from '@mongodb-js/compass-find-in-page';
 import {
   CreateDatabasePlugin,
-  DropDatabasePlugin,
   CreateCollectionPlugin,
-  DropCollectionPlugin,
+  DropNamespacePlugin,
 } from '@mongodb-js/compass-databases-collections';
 import { ImportPlugin, ExportPlugin } from '@mongodb-js/compass-import-export';
 import { DataServiceProvider } from 'mongodb-data-service/provider';
@@ -360,6 +359,7 @@ function Home({
               <ImportPlugin></ImportPlugin>
               <ExportPlugin></ExportPlugin>
               <CreateViewPlugin></CreateViewPlugin>
+              <DropNamespacePlugin></DropNamespacePlugin>
               <Workspace namespace={namespace} />
             </CompassInstanceStorePlugin>
           </DataServiceProvider>
@@ -387,9 +387,7 @@ function Home({
       <CompassSettingsPlugin></CompassSettingsPlugin>
       <CompassFindInPagePlugin></CompassFindInPagePlugin>
       <CreateDatabasePlugin></CreateDatabasePlugin>
-      <DropDatabasePlugin></DropDatabasePlugin>
       <CreateCollectionPlugin></CreateCollectionPlugin>
-      <DropCollectionPlugin></DropCollectionPlugin>
       <AtlasSignIn></AtlasSignIn>
     </SignalHooksProvider>
   );

diff --git a/packages/databases-collections/package.json b/packages/databases-collections/package.json
@@ -53,6 +53,7 @@
     "@mongodb-js/databases-collections-list": "^1.19.1",
     "compass-preferences-model": "^2.15.6",
     "hadron-app-registry": "^9.0.14",
+    "mongodb-data-service": "^22.15.1",
     "react": "^17.0.2"
   },
   "devDependencies": {
@@ -73,7 +74,6 @@
     "mocha": "^10.2.0",
     "mongodb": "^6.0.0",
     "mongodb-collection-model": "^5.15.1",
-    "mongodb-data-service": "^22.15.1",
     "mongodb-instance-model": "^12.15.1",
     "mongodb-ns": "^2.4.0",
     "mongodb-query-parser": "^3.1.3",
@@ -92,6 +92,7 @@
     "@mongodb-js/compass-logging": "^1.2.6",
     "@mongodb-js/databases-collections-list": "^1.19.1",
     "compass-preferences-model": "^2.15.6",
-    "hadron-app-registry": "^9.0.14"
+    "hadron-app-registry": "^9.0.14",
+    "mongodb-data-service": "^22.15.1"
   }
 }
diff --git a/packages/databases-collections/src/components/drop-collection-modal.tsx b/packages/databases-collections/src/components/drop-collection-modal.tsx