From bb4bffe1e85ea16f2fe1e0e48e5f78cc879e8fd3 Mon Sep 17 00:00:00 2001
From: Kerry Archibald <kerrya@element.io>
Date: Wed, 26 Oct 2022 11:03:19 +0200
Subject: [PATCH] learn more for session renaming

---
 .../settings/devices/DeviceDetailHeading.tsx   | 18 +++++++++++++++++-
 src/i18n/strings/en_EN.json                    |  5 ++++-
 .../DeviceDetailHeading-test.tsx.snap          |  9 ++++++++-
 3 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/src/components/views/settings/devices/DeviceDetailHeading.tsx b/src/components/views/settings/devices/DeviceDetailHeading.tsx
index 2673ef4e89..16c0eb8bad 100644
--- a/src/components/views/settings/devices/DeviceDetailHeading.tsx
+++ b/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"
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 8af41255fc..782c2dbfee 100644
--- a/src/i18n/strings/en_EN.json
+++ b/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",
diff --git a/test/components/views/settings/devices/__snapshots__/DeviceDetailHeading-test.tsx.snap b/test/components/views/settings/devices/__snapshots__/DeviceDetailHeading-test.tsx.snap
index c80da7be4c..b5ed8d43e4 100644
--- a/test/components/views/settings/devices/__snapshots__/DeviceDetailHeading-test.tsx.snap
+++ b/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