From 35e45136b4f89b9016a34cf3dc7387f3d74b105f Mon Sep 17 00:00:00 2001
From: Kerry Archibald <kerrya@element.io>
Date: Wed, 26 Oct 2022 11:30:32 +0200
Subject: [PATCH] add learn more to device security cards

---
 .../devices/DeviceVerificationStatusCard.tsx  | 11 ++++-
 .../settings/devices/FilteredDeviceList.tsx   |  1 -
 .../devices/SecurityRecommendations.tsx       | 24 +++++++----
 src/i18n/strings/en_EN.json                   | 18 ++++----
 .../CurrentDeviceSection-test.tsx.snap        | 21 ++++++++++
 .../__snapshots__/DeviceDetails-test.tsx.snap | 21 ++++++++++
 .../SecurityRecommendations-test.tsx.snap     | 42 +++++++++++++++++++
 .../SessionManagerTab-test.tsx.snap           | 14 +++++++
 8 files changed, 132 insertions(+), 20 deletions(-)

diff --git a/src/components/views/settings/devices/DeviceVerificationStatusCard.tsx b/src/components/views/settings/devices/DeviceVerificationStatusCard.tsx
index 127f5eedf6..0ee37c9bc4 100644
--- a/src/components/views/settings/devices/DeviceVerificationStatusCard.tsx
+++ b/src/components/views/settings/devices/DeviceVerificationStatusCard.tsx
@@ -19,6 +19,7 @@ import React from 'react';
 import { _t } from '../../../../languageHandler';
 import AccessibleButton from '../../elements/AccessibleButton';
 import DeviceSecurityCard from './DeviceSecurityCard';
+import { DeviceSecurityLearnMore } from './DeviceSecurityLearnMore';
 import {
     DeviceSecurityVariation,
     ExtendedDevice,
@@ -36,11 +37,17 @@ export const DeviceVerificationStatusCard: React.FC<Props> = ({
     const securityCardProps = device.isVerified ? {
         variation: DeviceSecurityVariation.Verified,
         heading: _t('Verified session'),
-        description: _t('This session is ready for secure messaging.'),
+        description: <>
+            { _t('This session is ready for secure messaging.') }
+            <DeviceSecurityLearnMore variation={DeviceSecurityVariation.Verified} />
+        </>,
     } : {
         variation: DeviceSecurityVariation.Unverified,
         heading: _t('Unverified session'),
-        description: _t('Verify or sign out from this session for best security and reliability.'),
+        description: <>
+            { _t('Verify or sign out from this session for best security and reliability.') }
+            <DeviceSecurityLearnMore variation={DeviceSecurityVariation.Unverified} />
+        </>,
     };
     return <DeviceSecurityCard
         {...securityCardProps}
diff --git a/src/components/views/settings/devices/FilteredDeviceList.tsx b/src/components/views/settings/devices/FilteredDeviceList.tsx
index 04d2c39d6c..53f77c0d33 100644
--- a/src/components/views/settings/devices/FilteredDeviceList.tsx
+++ b/src/components/views/settings/devices/FilteredDeviceList.tsx
@@ -38,7 +38,6 @@ import {
 import { DevicesState } from './useOwnDevices';
 import FilteredDeviceListHeader from './FilteredDeviceListHeader';
 import Spinner from '../../elements/Spinner';
-import LearnMore from '../../elements/LearnMore';
 import { DeviceSecurityLearnMore } from './DeviceSecurityLearnMore';
 
 interface Props {
diff --git a/src/components/views/settings/devices/SecurityRecommendations.tsx b/src/components/views/settings/devices/SecurityRecommendations.tsx
index ddeb2f2e2e..7b6381306b 100644
--- a/src/components/views/settings/devices/SecurityRecommendations.tsx
+++ b/src/components/views/settings/devices/SecurityRecommendations.tsx
@@ -20,6 +20,7 @@ import { _t } from '../../../../languageHandler';
 import AccessibleButton from '../../elements/AccessibleButton';
 import SettingsSubsection from '../shared/SettingsSubsection';
 import DeviceSecurityCard from './DeviceSecurityCard';
+import { DeviceSecurityLearnMore } from './DeviceSecurityLearnMore';
 import { filterDevicesBySecurityRecommendation, INACTIVE_DEVICE_AGE_DAYS } from './filter';
 import {
     DeviceSecurityVariation,
@@ -70,10 +71,13 @@ const SecurityRecommendations: React.FC<Props> = ({
             <DeviceSecurityCard
                 variation={DeviceSecurityVariation.Unverified}
                 heading={_t('Unverified sessions')}
-                description={_t(
-                    `Verify your sessions for enhanced secure messaging` +
+                description={<>
+                    { _t(
+                        `Verify your sessions for enhanced secure messaging` +
                     ` or sign out from those you don't recognize or use anymore.`,
-                )}
+                    ) }
+                    <DeviceSecurityLearnMore variation={DeviceSecurityVariation.Unverified} />
+                </>}
             >
                 <AccessibleButton
                     kind='link_inline'
@@ -91,11 +95,15 @@ const SecurityRecommendations: React.FC<Props> = ({
                 <DeviceSecurityCard
                     variation={DeviceSecurityVariation.Inactive}
                     heading={_t('Inactive sessions')}
-                    description={_t(
-                        `Consider signing out from old sessions ` +
-                        `(%(inactiveAgeDays)s days or older) you don't use anymore`,
-                        { inactiveAgeDays },
-                    )}
+                    description={<>
+                        { _t(
+                            `Consider signing out from old sessions ` +
+                            `(%(inactiveAgeDays)s days or older) you don't use anymore`,
+                            { inactiveAgeDays },
+                        ) }
+                        <DeviceSecurityLearnMore variation={DeviceSecurityVariation.Inactive} />
+                    </>
+                    }
                 >
                     <AccessibleButton
                         kind='link_inline'
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 782c2dbfee..e90f09d45d 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -1767,6 +1767,15 @@
     "Receive push notifications on this session.": "Receive push notifications on this session.",
     "Sign out of this session": "Sign out of this session",
     "Toggle device details": "Toggle device details",
+    "Verified sessions": "Verified sessions",
+    "Verified sessions have logged in with your credentials and then been verified, either using your secure passphrase or by cross-verifying.": "Verified sessions have logged in with your credentials and then been verified, either using your secure passphrase or by cross-verifying.",
+    "This means they hold encryption keys for your previous messages, and confirm to other users you are communicating with that these sessions are really you.": "This means they hold encryption keys for your previous messages, and confirm to other users you are communicating with that these sessions are really you.",
+    "Unverified sessions": "Unverified sessions",
+    "Unverified sessions are sessions that have logged in with your credentials but have not been cross-verified.": "Unverified sessions are sessions that have logged in with your credentials but have not been cross-verified.",
+    "You should make especially certain that you recognise these sessions as they could represent an unauthorised use of your account.": "You should make especially certain that you recognise these sessions as they could represent an unauthorised use of your account.",
+    "Inactive sessions": "Inactive sessions",
+    "Inactive sessions are sessions you have not used in some time, but they continue to receive encryption keys.": "Inactive sessions are sessions you have not used in some time, but they continue to receive encryption keys.",
+    "Removing inactive sessions improves security and performance, and makes it easier for you to identify if a new session is suspicious.": "Removing inactive sessions improves security and performance, and makes it easier for you to identify if a new session is suspicious.",
     "Inactive for %(inactiveAgeDays)s+ days": "Inactive for %(inactiveAgeDays)s+ days",
     "Verified": "Verified",
     "Unverified": "Unverified",
@@ -1779,18 +1788,9 @@
     "Unverified session": "Unverified session",
     "Verify or sign out from this session for best security and reliability.": "Verify or sign out from this session for best security and reliability.",
     "Verify session": "Verify session",
-    "Verified sessions": "Verified sessions",
     "For best security, sign out from any session that you don't recognize or use anymore.": "For best security, sign out from any session that you don't recognize or use anymore.",
-    "Verified sessions have logged in with your credentials and then been verified, either using your secure passphrase or by cross-verifying.": "Verified sessions have logged in with your credentials and then been verified, either using your secure passphrase or by cross-verifying.",
-    "This means they hold encryption keys for your previous messages, and confirm to other users you are communicating with that these sessions are really you.": "This means they hold encryption keys for your previous messages, and confirm to other users you are communicating with that these sessions are really you.",
-    "Unverified sessions": "Unverified sessions",
     "Verify your sessions for enhanced secure messaging or sign out from those you don't recognize or use anymore.": "Verify your sessions for enhanced secure messaging or sign out from those you don't recognize or use anymore.",
-    "Unverified sessions are sessions that have logged in with your credentials but have not been cross-verified.": "Unverified sessions are sessions that have logged in with your credentials but have not been cross-verified.",
-    "You should make especially certain that you recognise these sessions as they could represent an unauthorised use of your account.": "You should make especially certain that you recognise these sessions as they could represent an unauthorised use of your account.",
-    "Inactive sessions": "Inactive sessions",
     "Consider signing out from old sessions (%(inactiveAgeDays)s days or older) you don't use anymore.": "Consider signing out from old sessions (%(inactiveAgeDays)s days or older) you don't use anymore.",
-    "Inactive sessions are sessions you have not used in some time, but they continue to receive encryption keys.": "Inactive sessions are sessions you have not used in some time, but they continue to receive encryption keys.",
-    "Removing inactive sessions improves security and performance, and makes it easier for you to identify if a new session is suspicious.": "Removing inactive sessions improves security and performance, and makes it easier for you to identify if a new session is suspicious.",
     "No verified sessions found.": "No verified sessions found.",
     "No unverified sessions found.": "No unverified sessions found.",
     "No inactive sessions found.": "No inactive sessions found.",
diff --git a/test/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap b/test/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap
index 0edf12289d..6651a91b69 100644
--- a/test/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap
+++ b/test/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap
@@ -50,6 +50,13 @@ HTMLCollection [
             class="mx_DeviceSecurityCard_description"
           >
             Verify or sign out from this session for best security and reliability.
+            <div
+              class="mx_AccessibleButton mx_LearnMore_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
+              role="button"
+              tabindex="0"
+            >
+              Learn more
+            </div>
           </p>
           <div
             class="mx_DeviceSecurityCard_actions"
@@ -266,6 +273,13 @@ exports[`<CurrentDeviceSection /> renders device and correct security card when
             class="mx_DeviceSecurityCard_description"
           >
             Verify or sign out from this session for best security and reliability.
+            <div
+              class="mx_AccessibleButton mx_LearnMore_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
+              role="button"
+              tabindex="0"
+            >
+              Learn more
+            </div>
           </p>
           <div
             class="mx_DeviceSecurityCard_actions"
@@ -402,6 +416,13 @@ exports[`<CurrentDeviceSection /> renders device and correct security card when
             class="mx_DeviceSecurityCard_description"
           >
             Verify or sign out from this session for best security and reliability.
+            <div
+              class="mx_AccessibleButton mx_LearnMore_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
+              role="button"
+              tabindex="0"
+            >
+              Learn more
+            </div>
           </p>
           <div
             class="mx_DeviceSecurityCard_actions"
diff --git a/test/components/views/settings/devices/__snapshots__/DeviceDetails-test.tsx.snap b/test/components/views/settings/devices/__snapshots__/DeviceDetails-test.tsx.snap
index 9f2f538658..cfd483f010 100644
--- a/test/components/views/settings/devices/__snapshots__/DeviceDetails-test.tsx.snap
+++ b/test/components/views/settings/devices/__snapshots__/DeviceDetails-test.tsx.snap
@@ -50,6 +50,13 @@ exports[`<DeviceDetails /> renders a verified device 1`] = `
             class="mx_DeviceSecurityCard_description"
           >
             This session is ready for secure messaging.
+            <div
+              class="mx_AccessibleButton mx_LearnMore_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
+              role="button"
+              tabindex="0"
+            >
+              Learn more
+            </div>
           </p>
         </div>
       </div>
@@ -152,6 +159,13 @@ exports[`<DeviceDetails /> renders device with metadata 1`] = `
             class="mx_DeviceSecurityCard_description"
           >
             Verify or sign out from this session for best security and reliability.
+            <div
+              class="mx_AccessibleButton mx_LearnMore_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
+              role="button"
+              tabindex="0"
+            >
+              Learn more
+            </div>
           </p>
         </div>
       </div>
@@ -354,6 +368,13 @@ exports[`<DeviceDetails /> renders device without metadata 1`] = `
             class="mx_DeviceSecurityCard_description"
           >
             Verify or sign out from this session for best security and reliability.
+            <div
+              class="mx_AccessibleButton mx_LearnMore_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
+              role="button"
+              tabindex="0"
+            >
+              Learn more
+            </div>
           </p>
         </div>
       </div>
diff --git a/test/components/views/settings/devices/__snapshots__/SecurityRecommendations-test.tsx.snap b/test/components/views/settings/devices/__snapshots__/SecurityRecommendations-test.tsx.snap
index a854601344..f1c0f12cf5 100644
--- a/test/components/views/settings/devices/__snapshots__/SecurityRecommendations-test.tsx.snap
+++ b/test/components/views/settings/devices/__snapshots__/SecurityRecommendations-test.tsx.snap
@@ -46,6 +46,13 @@ exports[`<SecurityRecommendations /> renders both cards when user has both unver
             class="mx_DeviceSecurityCard_description"
           >
             Verify your sessions for enhanced secure messaging or sign out from those you don't recognize or use anymore.
+            <div
+              class="mx_AccessibleButton mx_LearnMore_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
+              role="button"
+              tabindex="0"
+            >
+              Learn more
+            </div>
           </p>
           <div
             class="mx_DeviceSecurityCard_actions"
@@ -87,6 +94,13 @@ exports[`<SecurityRecommendations /> renders both cards when user has both unver
             class="mx_DeviceSecurityCard_description"
           >
             Consider signing out from old sessions (90 days or older) you don't use anymore
+            <div
+              class="mx_AccessibleButton mx_LearnMore_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
+              role="button"
+              tabindex="0"
+            >
+              Learn more
+            </div>
           </p>
           <div
             class="mx_DeviceSecurityCard_actions"
@@ -153,6 +167,13 @@ exports[`<SecurityRecommendations /> renders inactive devices section when user
             class="mx_DeviceSecurityCard_description"
           >
             Verify your sessions for enhanced secure messaging or sign out from those you don't recognize or use anymore.
+            <div
+              class="mx_AccessibleButton mx_LearnMore_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
+              role="button"
+              tabindex="0"
+            >
+              Learn more
+            </div>
           </p>
           <div
             class="mx_DeviceSecurityCard_actions"
@@ -194,6 +215,13 @@ exports[`<SecurityRecommendations /> renders inactive devices section when user
             class="mx_DeviceSecurityCard_description"
           >
             Consider signing out from old sessions (90 days or older) you don't use anymore
+            <div
+              class="mx_AccessibleButton mx_LearnMore_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
+              role="button"
+              tabindex="0"
+            >
+              Learn more
+            </div>
           </p>
           <div
             class="mx_DeviceSecurityCard_actions"
@@ -260,6 +288,13 @@ exports[`<SecurityRecommendations /> renders unverified devices section when use
             class="mx_DeviceSecurityCard_description"
           >
             Verify your sessions for enhanced secure messaging or sign out from those you don't recognize or use anymore.
+            <div
+              class="mx_AccessibleButton mx_LearnMore_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
+              role="button"
+              tabindex="0"
+            >
+              Learn more
+            </div>
           </p>
           <div
             class="mx_DeviceSecurityCard_actions"
@@ -301,6 +336,13 @@ exports[`<SecurityRecommendations /> renders unverified devices section when use
             class="mx_DeviceSecurityCard_description"
           >
             Consider signing out from old sessions (90 days or older) you don't use anymore
+            <div
+              class="mx_AccessibleButton mx_LearnMore_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
+              role="button"
+              tabindex="0"
+            >
+              Learn more
+            </div>
           </p>
           <div
             class="mx_DeviceSecurityCard_actions"
diff --git a/test/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap b/test/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap
index 2ff8c77b72..b875caf0d2 100644
--- a/test/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap
+++ b/test/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap
@@ -130,6 +130,13 @@ exports[`<SessionManagerTab /> current session section renders current session s
           class="mx_DeviceSecurityCard_description"
         >
           This session is ready for secure messaging.
+          <div
+            class="mx_AccessibleButton mx_LearnMore_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
+            role="button"
+            tabindex="0"
+          >
+            Learn more
+          </div>
         </p>
       </div>
     </div>
@@ -252,6 +259,13 @@ exports[`<SessionManagerTab /> current session section renders current session s
           class="mx_DeviceSecurityCard_description"
         >
           Verify or sign out from this session for best security and reliability.
+          <div
+            class="mx_AccessibleButton mx_LearnMore_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
+            role="button"
+            tabindex="0"
+          >
+            Learn more
+          </div>
         </p>
         <div
           class="mx_DeviceSecurityCard_actions"