Merge pull request #19767 from mozilla/FXA-12725

fix(settings): Show password reset warning to more users

packages/fxa-settings/src/components/ResetPasswordWarning/index.test.tsx

@@ -141,4 +141,29 @@ describe('ResetPasswordWarning component', () => {
       ).not.toBeInTheDocument();
     });
   });
+
+  it('defaults to collapsed view if defaultClosed is true', async () => {
+    renderWithLocalizationProvider(
+      <ResetPasswordWarning
+        locationState={createMockLocationState(false)}
+        defaultClosed
+      />
+    );
+
+    expect(
+      screen.getByRole('img', {
+        name: 'Warning',
+      })
+    ).toBeVisible();
+
+    expect(
+      screen.getByText('Your browser data may not be recovered')
+    ).toBeVisible();
+
+    expect(screen.getByRole('img', { name: 'Expand warning' })).toBeVisible();
+
+    expect(
+      screen.getByText('Have any device where you previously signed in?')
+    ).not.toBeVisible();
+  });
 });

packages/fxa-settings/src/components/ResetPasswordWarning/index.tsx

@@ -18,14 +18,18 @@ import GleanMetrics from '../../lib/glean';
 const ResetPasswordWarning = ({
   locationState,
   searchParams,
+  defaultClosed = false,
+  showVersion2,
 }: {
   locationState: CompleteResetPasswordLocationState;
   searchParams?: string;
+  defaultClosed?: boolean;
+  showVersion2?: boolean;
 }) => {
   const ftlMsgResolver = useFtlMsgResolver();
   // component is expanded by default on desktop
   // and collapsed by default on mobile
-  const defaultOpenState = window.innerWidth > 480;
+  const defaultOpenState = !defaultClosed && window.innerWidth > 480;
   const [expanded, setExpanded] = useState(defaultOpenState);
 
   return (

packages/fxa-settings/src/pages/ResetPassword/CompleteResetPassword/index.test.tsx

@@ -54,6 +54,11 @@ describe('CompleteResetPassword page', () => {
         screen.getByText('Your browser data may not be recovered')
       ).toBeVisible();
 
+      // Warning should be expanded by default for known active sync user
+      expect(
+        screen.getByRole('img', { name: 'Collapse warning' })
+      ).toBeVisible();
+
       const inputs = screen.getAllByRole('textbox');
       expect(inputs).toHaveLength(2);
       expect(screen.getByLabelText('New password')).toBeVisible();
@@ -99,10 +104,12 @@ describe('CompleteResetPassword page', () => {
         ).toBeVisible()
       );
 
-      // Warning messages about data loss should not be displayed.
+      // Warning messages about data loss is displayed but collapsed
       expect(
         screen.queryByText('Your browser data may not be recovered')
-      ).not.toBeInTheDocument();
+      ).toBeInTheDocument();
+
+      expect(screen.getByRole('img', { name: 'Expand warning' })).toBeVisible();
 
       // Warning message about using recovery key should not be displayed
       expect(
@@ -227,10 +234,12 @@ describe('CompleteResetPassword page', () => {
         ).toBeVisible()
       );
 
-      // Warning is only shown to sync users
+      // Warning messages about data loss is displayed but collapsed
       expect(
         screen.queryByText('Your browser data may not be recovered')
-      ).not.toBeInTheDocument();
+      ).toBeInTheDocument();
+
+      expect(screen.getByRole('img', { name: 'Expand warning' })).toBeVisible();
     });
   });
 

packages/fxa-settings/src/pages/ResetPassword/CompleteResetPassword/index.tsx

@@ -43,11 +43,11 @@ const CompleteResetPassword = ({
   const ftlMsgResolver = useFtlMsgResolver();
 
   const [isSubmitting, setIsSubmitting] = useState(false);
-  const isSyncUser = !!(
+  const isActiveSyncUser = !!(
     integrationIsSync ||
     (estimatedSyncDeviceCount !== undefined && estimatedSyncDeviceCount > 0)
   );
-  const showSyncWarning = !!(!hasConfirmedRecoveryKey && isSyncUser);
+  const defaultClosed = !isActiveSyncUser;
 
   const showRecoveryKeyLink = !!(recoveryKeyExists && !hasConfirmedRecoveryKey);
 
@@ -81,9 +81,10 @@ const CompleteResetPassword = ({
         <Banner type="error" content={{ localizedHeading: errorMessage }} />
       )}
 
-      {/* Show an error message to sync users who do not have or have not used a recovery key */}
-      {showSyncWarning && (
-        <ResetPasswordWarning {...{ locationState, searchParams }} />
+      {!hasConfirmedRecoveryKey && (
+        <ResetPasswordWarning
+          {...{ locationState, searchParams, defaultClosed }}
+        />
       )}
 
       {/*