extract device security learn more with content into component

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/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/FilteredDeviceList.tsx

@@ -39,6 +39,7 @@ 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 +78,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 +89,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 +97,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 +105,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>}
             />