chore(components): remove useToast / useConfirmationModal hooks, only provide global functions as interface (#6823)

* chore(components): remove useToast / useConfirmationModal hooks, only provide global functions as interface

* chore(components): fix toast id

* chore(components): add method descriptions

Author: gribnoysup

packages/compass-components/src/hooks/use-confirmation.spec.tsx

@@ -1,5 +1,4 @@
 import {
-  cleanup,
   render,
   screen,
   waitFor,
@@ -10,85 +9,30 @@ import {
 import { expect } from 'chai';
 import React from 'react';
 
-import {
-  ConfirmationModalArea,
-  useConfirmationModal,
-  showConfirmation,
-} from './use-confirmation';
-
-const OpenConfirmationModalButton = () => {
-  const { showConfirmation } = useConfirmationModal();
-  return (
-    <button
-      type="button"
-      onClick={() =>
-        void showConfirmation({
-          title: 'Are you sure?',
-          description: 'This action can not be undone.',
-          buttonText: 'Yes',
-        })
-      }
-    >
-      Open Modal
-    </button>
-  );
-};
+import { ConfirmationModalArea, showConfirmation } from './use-confirmation';
 
 describe('use-confirmation', function () {
-  afterEach(cleanup);
-
-  context('useConfirmationModal hook', function () {
-    let modal: HTMLElement;
-    beforeEach(function () {
-      render(
-        <ConfirmationModalArea>
-          <OpenConfirmationModalButton />
-        </ConfirmationModalArea>
-      );
-
-      userEvent.click(screen.getByText('Open Modal'));
-      modal = screen.getByTestId('confirmation-modal');
-      expect(modal).to.exist;
-    });
-
-    it('renders modal contents', function () {
-      expect(within(modal).getByText('Are you sure?')).to.exist;
-      expect(
-        within(modal).getByText('This action can not be undone.')
-      ).to.exist;
-      expect(within(modal).getByText('Yes')).to.exist;
-      expect(within(modal).getByText('Cancel')).to.exist;
-    });
-
-    it('handles cancel action', async function () {
-      userEvent.click(within(modal).getByText('Cancel'));
-      await waitForElementToBeRemoved(() =>
-        screen.getByTestId('confirmation-modal')
-      );
-    });
-
-    it('handles confirm action', async function () {
-      userEvent.click(within(modal).getByText('Yes'));
-      await waitForElementToBeRemoved(() =>
-        screen.getByTestId('confirmation-modal')
-      );
-    });
-  });
-
   context('showConfirmation global function', function () {
     let modal: HTMLElement;
     let response: Promise<boolean>;
     beforeEach(async function () {
       render(
         <ConfirmationModalArea>
-          <div />
+          <button
+            type="button"
+            onClick={() => {
+              response = showConfirmation({
+                title: 'Are you sure?',
+                description: 'This action can not be undone.',
+                buttonText: 'Yes',
+              });
+            }}
+          >
+            Open Modal
+          </button>
         </ConfirmationModalArea>
       );
-      response = showConfirmation({
-        title: 'Are you sure?',
-        description: 'This action can not be undone.',
-        buttonText: 'Yes',
-      });
+      userEvent.click(screen.getByText('Open Modal'));
       await waitFor(() => {
         modal = screen.getByTestId('confirmation-modal');
       });
@@ -105,12 +49,18 @@ describe('use-confirmation', function () {
 
     it('handles cancel action', async function () {
       userEvent.click(within(modal).getByText('Cancel'));
+      await waitForElementToBeRemoved(() =>
+        screen.getByTestId('confirmation-modal')
+      );
       const confirmed = await response;
       expect(confirmed).to.be.false;
     });
 
     it('handles confirm action', async function () {
       userEvent.click(within(modal).getByText('Yes'));
+      await waitForElementToBeRemoved(() =>
+        screen.getByTestId('confirmation-modal')
+      );
       const confirmed = await response;
       expect(confirmed).to.be.true;
     });