feat(connections): show device auth code in the confirmation modal for multiple connectinos connect flow COMPASS-8140 (#6086)

* feat(connections): show device auth code in the confirmation modal for multiple connectinos connect flow

* fix(e2e): update selectors

* chore(connections): clarify the usage of a feature flag

* chore(connections): fix bad automerge

Author: gribnoysup

package-lock.json

@@ -40,7 +40,7 @@
     "@leafygreen-ui/card": "^10.0.6",
     "@leafygreen-ui/checkbox": "^12.1.1",
     "@leafygreen-ui/code": "^14.3.1",
-    "@leafygreen-ui/confirmation-modal": "^5.0.11",
+    "@leafygreen-ui/confirmation-modal": "^5.2.0",
     "@leafygreen-ui/emotion": "^4.0.7",
     "@leafygreen-ui/guide-cue": "^5.0.6",
     "@leafygreen-ui/hooks": "^8.1.2",

packages/compass-components/package.json

@@ -1,17 +1,19 @@
 import React, { useContext, useEffect, useRef, useState } from 'react';
 import { Variant as ConfirmationModalVariant } from '@leafygreen-ui/confirmation-modal';
 import ConfirmationModal from '../components/modals/confirmation-modal';
+import { css } from '@leafygreen-ui/emotion';
 
 export { ConfirmationModalVariant };
 
 type ConfirmationModalProps = React.ComponentProps<typeof ConfirmationModal>;
 
 type ConfirmationProperties = Partial<
-  Pick<
-    ConfirmationModalProps,
-    'title' | 'buttonText' | 'variant' | 'requiredInputText'
-  >
+  Pick<ConfirmationModalProps, 'title' | 'variant' | 'requiredInputText'>
 > & {
+  buttonText?: React.ReactNode;
+  cancelButtonText?: React.ReactNode;
+  hideConfirmButton?: boolean;
+  hideCancelButton?: boolean;
   description?: React.ReactNode;
   signal?: AbortSignal;
   'data-testid'?: string;
@@ -85,6 +87,10 @@ type ConfirmationModalAreaProps = Partial<
   ShowConfirmationEventDetail['props']
 > & { open: boolean };
 
+const hideButtonStyles = css({
+  display: 'none !important',
+});
+
 export const ConfirmationModalArea: React.FC = ({ children }) => {
   const hasParentContext = useContext(ConfirmationModalContext).isMounted;
 
@@ -159,10 +165,21 @@ export const ConfirmationModalArea: React.FC = ({ children }) => {
         open={confirmationProps.open}
         title={confirmationProps.title ?? 'Are you sure?'}
         variant={confirmationProps.variant ?? ConfirmationModalVariant.Default}
-        buttonText={confirmationProps.buttonText ?? 'Confirm'}
+        confirmButtonProps={{
+          className: confirmationProps.hideConfirmButton
+            ? hideButtonStyles
+            : undefined,
+          children: confirmationProps.buttonText ?? 'Confirm',
+          onClick: handleConfirm,
+        }}
+        cancelButtonProps={{
+          className: confirmationProps.hideCancelButton
+            ? hideButtonStyles
+            : undefined,
+          children: confirmationProps.cancelButtonText ?? 'Cancel',
+          onClick: handleCancel,
+        }}
         requiredInputText={confirmationProps.requiredInputText ?? undefined}
-        onConfirm={handleConfirm}
-        onCancel={handleCancel}
       >
         {confirmationProps.description}
       </ConfirmationModal>

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

@@ -1,5 +1,13 @@
 import React, { useCallback } from 'react';
-import { css, Link, spacing, useToast } from '@mongodb-js/compass-components';
+import {
+  Body,
+  Code,
+  css,
+  Link,
+  showConfirmation,
+  spacing,
+  useToast,
+} from '@mongodb-js/compass-components';
 import type { ConnectionInfo } from '@mongodb-js/connection-info';
 import { getConnectionTitle } from '@mongodb-js/connection-info';
 import { usePreference } from 'compass-preferences-model/provider';
@@ -70,7 +78,23 @@ function ConnectionErrorToastBody({
 
 const noop = () => undefined;
 
-export function useConnectionStatusToasts() {
+const deviceAuthModalContentStyles = css({
+  textAlign: 'center',
+  '& > *:not(:last-child)': {
+    paddingBottom: spacing[150],
+  },
+});
+
+/**
+ * Returns triggers for various notifications (toasts and modals) that are
+ * supposed to be displayed every time connection flow is happening in the
+ * application.
+ *
+ * All toasts and modals are only applicable in multiple connections mode. Right
+ * now it's gated by the feature flag, the flag check can be removed when this
+ * is the default behavior
+ */
+export function useConnectionStatusNotifications() {
   const enableNewMultipleConnectionSystem = usePreference(
     'enableNewMultipleConnectionSystem'
   );
@@ -156,15 +180,66 @@ export function useConnectionStatusToasts() {
     [openToast]
   );
 
+  const openNotifyDeviceAuthModal = useCallback(
+    (
+      connectionInfo: ConnectionInfo,
+      verificationUrl: string,
+      userCode: string,
+      onCancel: () => void,
+      signal: AbortSignal
+    ) => {
+      void showConfirmation({
+        title: `Complete authentication in the browser`,
+        description: (
+          <div className={deviceAuthModalContentStyles}>
+            <Body>
+              Visit the following URL to complete authentication for{' '}
+              <b>{getConnectionTitle(connectionInfo)}</b>:
+            </Body>
+            <Body>
+              <Link href={verificationUrl} target="_blank">
+                {verificationUrl}
+              </Link>
+            </Body>
+            <br></br>
+            <Body>Enter the following code on that page:</Body>
+            <Body as="div">
+              <Code language="none" copyable>
+                {userCode}
+              </Code>
+            </Body>
+          </div>
+        ),
+        hideConfirmButton: true,
+        signal,
+      }).then(
+        (result) => {
+          if (result === false) {
+            onCancel?.();
+          }
+        },
+        () => {
+          // Abort signal was triggered
+        }
+      );
+    },
+    []
+  );
+
+  // Gated by the feature flag: if flag is on, we return trigger functions, if
+  // flag is off, we return noop functions so that we can call them
+  // unconditionally in the actual flow
   return enableNewMultipleConnectionSystem
     ? {
+        openNotifyDeviceAuthModal,
         openConnectionStartedToast,
         openConnectionSucceededToast,
         openConnectionFailedToast,
         openMaximumConnectionsReachedToast,
         closeConnectionStatusToast: closeToast,
       }
     : {
+        openNotifyDeviceAuthModal: noop,
         openConnectionStartedToast: noop,
         openConnectionSucceededToast: noop,
         openConnectionFailedToast: noop,

packages/compass-connections/src/components/connection-status-toasts.tsx renamed to packages/compass-connections/src/components/connection-status-notifications.tsx

@@ -28,7 +28,7 @@ import { createNewConnectionInfo } from '../stores/connections-store';
 import {
   getConnectingStatusText,
   getConnectionErrorMessage,
-} from './connection-status-toasts';
+} from './connection-status-notifications';
 import { useConnectionFormPreferences } from '../hooks/use-connection-form-preferences';
 
 type ConnectFn = typeof connect;

packages/compass-connections/src/components/legacy-connections.tsx

@@ -43,6 +43,17 @@ function wait(ms: number) {
   });
 }
 
+function createMockDataService() {
+  return {
+    mockDataService: 'yes',
+    addReauthenticationHandler() {},
+    getUpdatedSecrets() {
+      return Promise.resolve({});
+    },
+    disconnect() {},
+  } as unknown as DataService;
+}
+
 const mockConnections: ConnectionInfo[] = [
   {
     id: 'turtle',
@@ -122,14 +133,7 @@ describe('useConnections', function () {
     mockConnectionStorage = new InMemoryConnectionStorage([...mockConnections]);
     connectionsManager = getConnectionsManager(async () => {
       await wait(200);
-      return {
-        mockDataService: 'yes',
-        addReauthenticationHandler() {},
-        getUpdatedSecrets() {
-          return Promise.resolve({});
-        },
-        disconnect() {},
-      } as unknown as DataService;
+      return createMockDataService();
     });
   });
 
@@ -245,8 +249,6 @@ describe('useConnections', function () {
       const connections = renderHookWithContext();
       const connectionInfo = createNewConnectionInfo();
 
-      sinon.spy(connectionsManager, 'connect');
-
       const connectPromise = connections.current.connect(connectionInfo);
 
       await waitFor(() => {
@@ -258,6 +260,50 @@ describe('useConnections', function () {
       await connectPromise;
     });
 
+    it('should show device auth code modal when OIDC flow triggers the notification', async function () {
+      const connections = renderHookWithContext();
+      let resolveConnect;
+      const spy = sinon.stub(connectionsManager, 'connect').returns(
+        new Promise((resolve) => {
+          resolveConnect = () => resolve(createMockDataService());
+        })
+      );
+      const connectPromise = connections.current.connect(
+        createNewConnectionInfo()
+      );
+
+      await waitFor(() => {
+        expect(spy).to.have.been.calledOnce;
+      });
+
+      spy.getCall(0).lastArg.onNotifyOIDCDeviceFlow({
+        verificationUrl: 'http://example.com/device-auth',
+        userCode: 'ABCabc123',
+      });
+
+      await waitFor(() => {
+        expect(
+          screen.getByText(/Visit the following URL to complete authentication/)
+        ).to.exist;
+
+        expect(
+          screen.getByRole('link', { name: 'http://example.com/device-auth' })
+        ).to.exist;
+
+        expect(screen.getByText('ABCabc123')).to.exist;
+      });
+
+      resolveConnect();
+
+      await connectPromise;
+
+      await waitFor(() => {
+        expect(() =>
+          screen.getByText('Complete authentication in the browser')
+        ).to.throw();
+      });
+    });
+
     describe('saving connections during connect in single connection mode', function () {
       it('should NOT update existing connection with new props when existing connection is successfull', async function () {
         await preferences.savePreferences({