Merge pull request #9501 from matrix-org/psg-863/dm-learn-more-rename

Device manager - add extra details to device security and renaming (PSG-863)

src/components/views/elements/LearnMore.tsx

@@ -21,12 +21,12 @@ import Modal from '../../../Modal';
 import InfoDialog from '../dialogs/InfoDialog';
 import AccessibleButton, { IAccessibleButtonProps } from './AccessibleButton';
 
-interface Props extends IAccessibleButtonProps {
+export interface LearnMoreProps extends IAccessibleButtonProps {
     title: string;
     description: string | React.ReactNode;
 }
 
-const LearnMore: React.FC<Props> = ({
+const LearnMore: React.FC<LearnMoreProps> = ({
     title,
     description,
     ...rest

src/components/views/settings/devices/DeviceDetailHeading.tsx

@@ -19,6 +19,7 @@ import React, { FormEvent, useEffect, useState } from 'react';
 import { _t } from '../../../../languageHandler';
 import AccessibleButton from '../../elements/AccessibleButton';
 import Field from '../../elements/Field';
+import LearnMore from '../../elements/LearnMore';
 import Spinner from '../../elements/Spinner';
 import { Caption } from '../../typography/Caption';
 import Heading from '../../typography/Heading';
@@ -88,7 +89,22 @@ const DeviceNameEditor: React.FC<Props & { stopEditing: () => void }> = ({
             <Caption
                 id={descriptionId}
             >
-                { _t('Please be aware that session names are also visible to people you communicate with') }
+                { _t('Please be aware that session names are also visible to people you communicate with.') }
+                <LearnMore
+                    title={_t('Renaming sessions')}
+                    description={<>
+                        <p>
+                            { _t(`Other users in direct messages and rooms that you join ` +
+                        `are able to view a full list of your sessions.`,
+                            ) }
+                        </p>
+                        <p>
+                            { _t(`This provides them with confidence that they are really speaking to you, ` +
+                        `but it also means they can see the session name you enter here.`,
+                            ) }
+                        </p>
+                    </>}
+                />
                 { !!error &&
                     <span
                         data-testid="device-rename-error"

src/components/views/settings/devices/DeviceSecurityLearnMore.tsx

@@ -0,0 +1,81 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+
+import { _t } from "../../../../languageHandler";
+import LearnMore, { LearnMoreProps } from "../../elements/LearnMore";
+import { DeviceSecurityVariation } from "./types";
+
+interface Props extends Omit<LearnMoreProps, 'title' | 'description'> {
+    variation: DeviceSecurityVariation;
+}
+
+const securityCardContent: Record<DeviceSecurityVariation, {
+    title: string;
+    description: React.ReactNode | string;
+ }> = {
+     [DeviceSecurityVariation.Verified]: {
+         title: _t('Verified sessions'),
+         description: <>
+             <p>{ _t('Verified sessions have logged in with your credentials and then been verified, either using your secure passphrase or by cross-verifying.') }
+             </p>
+             <p>
+                 { _t(
+                     `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.`,
+                 )
+                 }
+             </p>
+         </>,
+     },
+     [DeviceSecurityVariation.Unverified]: {
+         title: _t('Unverified sessions'),
+         description: <>
+             <p>{ _t('Unverified sessions are sessions that have logged in with your credentials but have not been cross-verified.') }
+             </p>
+             <p>
+                 { _t(
+                     `You should make especially certain that you recognise these sessions ` +
+                    `as they could represent an unauthorised use of your account.`,
+                 )
+                 }
+             </p>
+         </>,
+     },
+     [DeviceSecurityVariation.Inactive]: {
+         title: _t('Inactive sessions'),
+         description: <>
+             <p>{ _t('Inactive sessions are sessions you have not used in some time, but they continue to receive encryption keys.') }
+             </p>
+             <p>
+                 { _t(
+                     `Removing inactive sessions improves security and performance, ` +
+                    `and makes it easier for you to identify if a new session is suspicious.`,
+                 )
+                 }
+             </p>
+         </>,
+     },
+ };
+
+/**
+ * LearnMore with content for device security warnings
+ */
+export const DeviceSecurityLearnMore: React.FC<Props> = ({ variation }) => {
+    const { title, description } = securityCardContent[variation];
+    return <LearnMore title={title} description={description} />;
+};

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}

src/components/views/settings/devices/FilteredDeviceList.tsx

@@ -38,7 +38,7 @@ 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 {
     devices: DevicesDictionary;
@@ -77,22 +77,10 @@ type DeviceFilterKey = DeviceSecurityVariation | typeof ALL_FILTER_ID;
 const securityCardContent: Record<DeviceSecurityVariation, {
     title: string;
     description: string;
-    learnMoreDescription: React.ReactNode | string;
  }> = {
      [DeviceSecurityVariation.Verified]: {
          title: _t('Verified sessions'),
          description: _t('For best security, sign out from any session that you don\'t recognize or use anymore.'),
-         learnMoreDescription: <>
-             <p>{ _t('Verified sessions have logged in with your credentials and then been verified, either using your secure passphrase or by cross-verifying.') }
-             </p>
-             <p>
-                 { _t(
-                     `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.`,
-                 )
-                 }
-             </p>
-         </>,
      },
      [DeviceSecurityVariation.Unverified]: {
          title: _t('Unverified sessions'),
@@ -100,17 +88,6 @@ const securityCardContent: Record<DeviceSecurityVariation, {
              `Verify your sessions for enhanced secure messaging or ` +
             `sign out from those you don't recognize or use anymore.`,
          ),
-         learnMoreDescription: <>
-             <p>{ _t('Unverified sessions are sessions that have logged in with your credentials but have not been cross-verified.') }
-             </p>
-             <p>
-                 { _t(
-                     `You should make especially certain that you recognise these sessions ` +
-                    `as they could represent an unauthorised use of your account.`,
-                 )
-                 }
-             </p>
-         </>,
      },
      [DeviceSecurityVariation.Inactive]: {
          title: _t('Inactive sessions'),
@@ -119,17 +96,6 @@ const securityCardContent: Record<DeviceSecurityVariation, {
         `(%(inactiveAgeDays)s days or older) you don't use anymore.`,
              { inactiveAgeDays: INACTIVE_DEVICE_AGE_DAYS },
          ),
-         learnMoreDescription: <>
-             <p>{ _t('Inactive sessions are sessions you have not used in some time, but they continue to receive encryption keys.') }
-             </p>
-             <p>
-                 { _t(
-                     `Removing inactive sessions improves security and performance, ` +
-                    `and makes it easier for you to identify if a new session is suspicious.`,
-                 )
-                 }
-             </p>
-         </>,
      },
  };
 
@@ -138,16 +104,15 @@ const isSecurityVariation = (filter?: DeviceFilterKey): filter is DeviceSecurity
 
 const FilterSecurityCard: React.FC<{ filter?: DeviceFilterKey }> = ({ filter }) => {
     if (isSecurityVariation(filter)) {
-        const { title, description, learnMoreDescription } = securityCardContent[filter];
+        const { title, description } = securityCardContent[filter];
         return <div className='mx_FilteredDeviceList_securityCard'>
             <DeviceSecurityCard
                 variation={filter}
                 heading={title}
                 description={<span>
                     { description }
-                    <LearnMore
+                    <DeviceSecurityLearnMore
-                        title={title}
+                        variation={filter}
-                        description={learnMoreDescription}
                     />
                 </span>}
             />

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(
+                description={<>
-                    `Verify your sessions for enhanced secure messaging` +
+                    { _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(
+                    description={<>
-                        `Consider signing out from old sessions ` +
+                        { _t(
-                        `(%(inactiveAgeDays)s days or older) you don't use anymore`,
+                            `Consider signing out from old sessions ` +
-                        { inactiveAgeDays },
+                            `(%(inactiveAgeDays)s days or older) you don't use anymore`,
-                    )}
+                            { inactiveAgeDays },
+                        ) }
+                        <DeviceSecurityLearnMore variation={DeviceSecurityVariation.Inactive} />
+                    </>
+                    }
                 >
                     <AccessibleButton
                         kind='link_inline'

src/i18n/strings/en_EN.json

@@ -1747,7 +1747,10 @@
     "Sign out devices|one": "Sign out device",
     "Authentication": "Authentication",
     "Rename session": "Rename session",
-    "Please be aware that session names are also visible to people you communicate with": "Please be aware that session names are also visible to people you communicate with",
+    "Please be aware that session names are also visible to people you communicate with.": "Please be aware that session names are also visible to people you communicate with.",
+    "Renaming sessions": "Renaming sessions",
+    "Other users in direct messages and rooms that you join are able to view a full list of your sessions.": "Other users in direct messages and rooms that you join are able to view a full list of your sessions.",
+    "This provides them with confidence that they are really speaking to you, but it also means they can see the session name you enter here.": "This provides them with confidence that they are really speaking to you, but it also means they can see the session name you enter here.",
     "Session ID": "Session ID",
     "Last activity": "Last activity",
     "Application": "Application",
@@ -1764,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",
@@ -1776,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.",

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"

test/components/views/settings/devices/__snapshots__/DeviceDetailHeading-test.tsx.snap

@@ -36,7 +36,14 @@ Object {
           class="mx_Caption"
           id="device-rename-description-123"
         >
-          Please be aware that session names are also visible to people you communicate with
+          Please be aware that session names are also visible to people you communicate with.
+          <div
+            class="mx_AccessibleButton mx_LearnMore_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
+            role="button"
+            tabindex="0"
+          >
+            Learn more
+          </div>
         </span>
       </div>
       <div

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>

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"

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"