learn more for session renaming

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/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",

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