polish(settings): Add callback so calling code knows when MfaGuard is dismissed.

Author: dschom

packages/fxa-settings/src/components/Settings/MfaGuard/index.test.tsx

@@ -220,4 +220,20 @@ describe('MfaGuard', () => {
       expect(mockAlertBar.error).toHaveBeenCalledWith('Unexpected error');
     });
   });
+
+  it('invokes onDismiss when dialog is dismissed', async () => {
+    const mockOnDismiss = jest.fn().mockResolvedValue(undefined);
+
+    renderWithRouter(
+      <AppContext.Provider value={mockAppContext()}>
+        <MfaGuard requiredScope={mockScope} onDismissCallback={mockOnDismiss}>
+          <div>secured</div>
+        </MfaGuard>
+      </AppContext.Provider>
+    );
+
+    await userEvent.click(screen.getByRole('button', { name: 'Cancel' }));
+
+    expect(mockOnDismiss).toHaveBeenCalledTimes(1);
+  });
 });

packages/fxa-settings/src/components/Settings/MfaGuard/index.tsx

@@ -38,9 +38,11 @@ import { getLocalizedErrorMessage } from '../../../lib/error-utils';
 export const MfaGuard = ({
   children,
   requiredScope,
+  onDismissCallback = async () => {},
 }: {
   children: ReactNode;
   requiredScope: MfaScope;
+  onDismissCallback?: () => Promise<void>;
 }) => {
   // Let errors be handled by error boundaries in async contexts
   const handleError = useErrorHandler();
@@ -76,9 +78,11 @@ export const MfaGuard = ({
   const alertBar = useAlertBar();
 
   const onDismiss = useCallback(() => {
-    resetStates();
-    navigate('/settings');
-  }, [navigate, resetStates]);
+    onDismissCallback().then(() => {
+      resetStates();
+      navigate('/settings');
+    });
+  }, [navigate, resetStates, onDismissCallback]);
 
   // If no session token exists, kick them to sign-in
   if (!sessionToken) {