Refactor: Replace all display name usage for new component (#36137)

app/javascript/mastodon/features/account/components/follow_request_note.jsx

@@ -6,6 +6,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import CheckIcon from '@/material-icons/400-24px/check.svg?react';
 import CloseIcon from '@/material-icons/400-24px/close.svg?react';
 import { Icon }  from 'mastodon/components/icon';
+import { DisplayName } from '@/mastodon/components/display_name';
 
 export default class FollowRequestNote extends ImmutablePureComponent {
 
@@ -19,7 +20,7 @@ export default class FollowRequestNote extends ImmutablePureComponent {
     return (
       <div className='follow-request-banner'>
         <div className='follow-request-banner__message'>
-          <FormattedMessage id='account.requested_follow' defaultMessage='{name} has requested to follow you' values={{ name: <bdi><strong dangerouslySetInnerHTML={{ __html: account.get('display_name_html') }} /></bdi> }} />
+          <FormattedMessage id='account.requested_follow' defaultMessage='{name} has requested to follow you' values={{ name: <DisplayName account={account} variant='simple' /> }} />
         </div>
 
         <div className='follow-request-banner__action'>

app/javascript/mastodon/features/account_timeline/components/account_header.tsx

@@ -7,6 +7,7 @@ import { Helmet } from 'react-helmet';
 import { NavLink } from 'react-router-dom';
 
 import { AccountBio } from '@/mastodon/components/account_bio';
+import { DisplayName } from '@/mastodon/components/display_name';
 import CheckIcon from '@/material-icons/400-24px/check.svg?react';
 import LockIcon from '@/material-icons/400-24px/lock.svg?react';
 import MoreHorizIcon from '@/material-icons/400-24px/more_horiz.svg?react';
@@ -774,7 +775,6 @@ export const AccountHeader: React.FC<{
     );
   }
 
-  const displayNameHtml = { __html: account.display_name_html };
   const fields = account.fields;
   const isLocal = !account.acct.includes('@');
   const username = account.acct.split('@')[0];
@@ -863,7 +863,7 @@ export const AccountHeader: React.FC<{
 
           <div className='account__header__tabs__name'>
             <h1>
-              <span dangerouslySetInnerHTML={displayNameHtml} />
+              <DisplayName account={account} variant='simple' />
               <small>
                 <span>
                   @{username}

app/javascript/mastodon/features/account_timeline/components/familiar_followers.tsx

@@ -1,33 +1,26 @@
 import { FormattedMessage } from 'react-intl';
 
-import { Link } from 'react-router-dom';
-
 import { Avatar } from '@/mastodon/components/avatar';
 import { AvatarGroup } from '@/mastodon/components/avatar_group';
+import { LinkedDisplayName } from '@/mastodon/components/display_name';
 import type { Account } from '@/mastodon/models/account';
 
 import { useFetchFamiliarFollowers } from '../hooks/familiar_followers';
 
-const AccountLink: React.FC<{ account?: Account }> = ({ account }) => {
-  if (!account) {
-    return null;
-  }
-
-  return (
-    <Link
-      to={`/@${account.acct}`}
-      data-hover-card-account={account.id}
-      dangerouslySetInnerHTML={{ __html: account.display_name_html }}
-    />
-  );
-};
-
 const FamiliarFollowersReadout: React.FC<{ familiarFollowers: Account[] }> = ({
   familiarFollowers,
 }) => {
   const messageData = {
-    name1: <AccountLink account={familiarFollowers.at(0)} />,
-    name2: <AccountLink account={familiarFollowers.at(1)} />,
+    name1: (
+      <LinkedDisplayName
+        displayProps={{ account: familiarFollowers.at(0), variant: 'simple' }}
+      />
+    ),
+    name2: (
+      <LinkedDisplayName
+        displayProps={{ account: familiarFollowers.at(1), variant: 'simple' }}
+      />
+    ),
     othersCount: familiarFollowers.length - 2,
   };
 

app/javascript/mastodon/features/account_timeline/components/moved_note.tsx

@@ -2,8 +2,8 @@ import { FormattedMessage } from 'react-intl';
 
 import { Link } from 'react-router-dom';
 
+import { DisplayName } from '@/mastodon/components/display_name';
 import { AvatarOverlay } from 'mastodon/components/avatar_overlay';
-import { DisplayName } from 'mastodon/components/display_name';
 import { useAppSelector } from 'mastodon/store';
 
 export const MovedNote: React.FC<{
@@ -20,15 +20,7 @@ export const MovedNote: React.FC<{
           id='account.moved_to'
           defaultMessage='{name} has indicated that their new account is now:'
           values={{
-            name: (
-              <bdi>
-                <strong
-                  dangerouslySetInnerHTML={{
-                    __html: from?.display_name_html ?? '',
-                  }}
-                />
-              </bdi>
-            ),
+            name: <DisplayName account={from} variant='simple' />,
           }}
         />
       </div>

app/javascript/mastodon/features/annual_report/highlighted_post.tsx

@@ -6,6 +6,7 @@ import { useCallback } from 'react';
 
 import { FormattedMessage } from 'react-intl';
 
+import { DisplayName } from '@/mastodon/components/display_name';
 import { toggleStatusSpoilers } from 'mastodon/actions/statuses';
 import { DetailedStatus } from 'mastodon/features/status/components/detailed_status';
 import { me } from 'mastodon/initial_state';
@@ -79,11 +80,7 @@ export const HighlightedPost: React.FC<{
           id='annual_report.summary.highlighted_post.possessive'
           defaultMessage="{name}'s"
           values={{
-            name: account && (
-              <bdi
-                dangerouslySetInnerHTML={{ __html: account.display_name_html }}
-              />
-            ),
+            name: <DisplayName account={account} variant='simple' />,
           }}
         />
       </strong>

app/javascript/mastodon/features/direct_timeline/components/conversation.jsx

@@ -25,6 +25,7 @@ import StatusContent from 'mastodon/components/status_content';
 import { Dropdown } from 'mastodon/components/dropdown_menu';
 import { autoPlayGif } from 'mastodon/initial_state';
 import { makeGetStatus } from 'mastodon/selectors';
+import { LinkedDisplayName } from '@/mastodon/components/display_name';
 
 const messages = defineMessages({
   more: { id: 'status.more', defaultMessage: 'More' },
@@ -139,15 +140,8 @@ export const Conversation = ({ conversation, scrollKey }) => {
 
   menu.push({ text: intl.formatMessage(messages.delete), action: handleDelete });
 
-  const names = accounts.map(a => (
-    <Link to={`/@${a.get('acct')}`} key={a.get('id')} data-hover-card-account={a.get('id')}>
-      <bdi>
-        <strong
-          className='display-name__html'
-          dangerouslySetInnerHTML={{ __html: a.get('display_name_html') }}
-        />
-      </bdi>
-    </Link>
+  const names = accounts.map((account) => (
+    <LinkedDisplayName displayProps={{account, variant: 'simple'}} key={account.get('id')} />
   )).reduce((prev, cur) => [prev, ', ', cur]);
 
   const handlers = {

app/javascript/mastodon/features/explore/components/author_link.jsx

@@ -1,9 +1,8 @@
 import PropTypes from 'prop-types';
 
-import { Link } from 'react-router-dom';
-
 import { Avatar } from 'mastodon/components/avatar';
 import { useAppSelector } from 'mastodon/store';
+import { LinkedDisplayName } from '@/mastodon/components/display_name';
 
 export const AuthorLink = ({ accountId }) => {
   const account = useAppSelector(state => state.getIn(['accounts', accountId]));
@@ -13,10 +12,9 @@ export const AuthorLink = ({ accountId }) => {
   }
 
   return (
-    <Link to={`/@${account.get('acct')}`} className='story__details__shared__author-link' data-hover-card-account={accountId}>
+    <LinkedDisplayName displayProps={{account}} className='story__details__shared__author-link'>
       <Avatar account={account} size={16} />
-      <bdi dangerouslySetInnerHTML={{ __html: account.get('display_name_html') }} />
-    </Link>
+    </LinkedDisplayName>
   );
 };
 

app/javascript/mastodon/features/interaction_modal/index.tsx

@@ -7,6 +7,7 @@ import classNames from 'classnames';
 import { escapeRegExp } from 'lodash';
 import { useDebouncedCallback } from 'use-debounce';
 
+import { DisplayName } from '@/mastodon/components/display_name';
 import { openModal, closeModal } from 'mastodon/actions/modal';
 import { apiRequest } from 'mastodon/api';
 import { Button } from 'mastodon/components/button';
@@ -404,15 +405,13 @@ const InteractionModal: React.FC<{
   url: string;
 }> = ({ accountId, url }) => {
   const dispatch = useAppDispatch();
-  const displayNameHtml = useAppSelector(
-    (state) => state.accounts.get(accountId)?.display_name_html ?? '',
-  );
   const signupUrl = useAppSelector(
     (state) =>
       (state.server.getIn(['server', 'registrations', 'url'], null) ||
         '/auth/sign_up') as string,
   );
-  const name = <bdi dangerouslySetInnerHTML={{ __html: displayNameHtml }} />;
+  const account = useAppSelector((state) => state.accounts.get(accountId));
+  const name = <DisplayName account={account} variant='simple' />;
 
   const handleSignupClick = useCallback(() => {
     dispatch(

app/javascript/mastodon/features/notifications/components/notification.jsx

@@ -18,6 +18,7 @@ import PersonAddIcon from '@/material-icons/400-24px/person_add-fill.svg?react';
 import RepeatIcon from '@/material-icons/400-24px/repeat.svg?react';
 import StarIcon from '@/material-icons/400-24px/star-fill.svg?react';
 import { Account } from 'mastodon/components/account';
+import { LinkedDisplayName } from '@/mastodon/components/display_name';
 import { Icon }  from 'mastodon/components/icon';
 import { Hotkeys } from 'mastodon/components/hotkeys';
 import { StatusQuoteManager } from 'mastodon/components/status_quoted';
@@ -485,8 +486,10 @@ class Notification extends ImmutablePureComponent {
     }
 
     const targetAccount = report.get('target_account');
-    const targetDisplayNameHtml = { __html: targetAccount.get('display_name_html') };
-    const targetLink = <bdi><Link className='notification__display-name' title={targetAccount.get('acct')} data-hover-card-account={targetAccount.get('id')} to={`/@${targetAccount.get('acct')}`} dangerouslySetInnerHTML={targetDisplayNameHtml} /></bdi>;
+    const targetLink = <LinkedDisplayName
+      className='notification__display-name'
+      displayProps={{account:targetAccount, variant: 'simple'}}
+    />;
 
     return (
       <Hotkeys handlers={this.getHandlers()}>
@@ -508,8 +511,7 @@ class Notification extends ImmutablePureComponent {
   render () {
     const { notification } = this.props;
     const account          = notification.get('account');
-    const displayNameHtml  = { __html: account.get('display_name_html') };
-    const link             = <bdi><Link className='notification__display-name' href={`/@${account.get('acct')}`} title={account.get('acct')} data-hover-card-account={account.get('id')} to={`/@${account.get('acct')}`} dangerouslySetInnerHTML={displayNameHtml} /></bdi>;
+    const link             = <LinkedDisplayName className='notification__display-name' displayProps={{account, variant: 'simple'}} />;
 
     switch(notification.get('type')) {
     case 'follow':

app/javascript/mastodon/features/notifications/components/notification_request.jsx

@@ -16,6 +16,7 @@ import { acceptNotificationRequest, dismissNotificationRequest } from 'mastodon/
 import { initReport } from 'mastodon/actions/reports';
 import { Avatar } from 'mastodon/components/avatar';
 import { CheckBox } from 'mastodon/components/check_box';
+import { DisplayName } from '@/mastodon/components/display_name';
 import { IconButton } from 'mastodon/components/icon_button';
 import { Dropdown } from 'mastodon/components/dropdown_menu';
 import { makeGetAccount } from 'mastodon/selectors';
@@ -96,7 +97,7 @@ export const NotificationRequest = ({ id, accountId, notificationsCount, checked
 
         <div className='notification-request__name'>
           <div className='notification-request__name__display-name'>
-            <bdi><strong dangerouslySetInnerHTML={{ __html: account?.get('display_name_html') }} /></bdi>
+            <DisplayName account={account} variant='simple' />
           </div>
 
           <span>@{account?.get('acct')}</span>

app/javascript/mastodon/features/notifications_v2/components/displayed_name.tsx

@@ -1,22 +0,0 @@
-import { Link } from 'react-router-dom';
-
-import { useAppSelector } from 'mastodon/store';
-
-export const DisplayedName: React.FC<{
-  accountIds: string[];
-}> = ({ accountIds }) => {
-  const lastAccountId = accountIds[0] ?? '0';
-  const account = useAppSelector((state) => state.accounts.get(lastAccountId));
-
-  if (!account) return null;
-
-  return (
-    <Link
-      to={`/@${account.acct}`}
-      title={`@${account.acct}`}
-      data-hover-card-account={account.id}
-    >
-      <bdi dangerouslySetInnerHTML={{ __html: account.display_name_html }} />
-    </Link>
-  );
-};

app/javascript/mastodon/features/notifications_v2/components/notification_admin_report.tsx

@@ -2,6 +2,7 @@ import { FormattedMessage, useIntl, defineMessages } from 'react-intl';
 
 import classNames from 'classnames';
 
+import { DisplayName } from '@/mastodon/components/display_name';
 import FlagIcon from '@/material-icons/400-24px/flag-fill.svg?react';
 import { Icon } from 'mastodon/components/icon';
 import { RelativeTimestamp } from 'mastodon/components/relative_timestamp';
@@ -42,11 +43,9 @@ export const NotificationAdminReport: React.FC<{
 
   if (!account || !targetAccount) return null;
 
-  const domain = account.acct.split('@')[1];
-
   const values = {
-    name: <bdi>{domain ?? `@${account.acct}`}</bdi>,
-    target: <bdi>@{targetAccount.acct}</bdi>,
+    name: <DisplayName account={account} variant='simple' />,
+    target: <DisplayName account={targetAccount} variant='simple' />,
     category: intl.formatMessage(messages[report.category]),
     count: report.status_ids.length,
   };

app/javascript/mastodon/features/notifications_v2/components/notification_group_with_status.tsx

@@ -3,6 +3,7 @@ import type { JSX } from 'react';
 
 import classNames from 'classnames';
 
+import { LinkedDisplayName } from '@/mastodon/components/display_name';
 import { replyComposeById } from 'mastodon/actions/compose';
 import { navigateToStatus } from 'mastodon/actions/statuses';
 import { Avatar } from 'mastodon/components/avatar';
@@ -14,7 +15,6 @@ import { RelativeTimestamp } from 'mastodon/components/relative_timestamp';
 import { NOTIFICATIONS_GROUP_MAX_AVATARS } from 'mastodon/models/notification_group';
 import { useAppSelector, useAppDispatch } from 'mastodon/store';
 
-import { DisplayedName } from './displayed_name';
 import { EmbeddedStatus } from './embedded_status';
 
 const AVATAR_SIZE = 28;
@@ -61,15 +61,18 @@ export const NotificationGroupWithStatus: React.FC<{
   additionalContent,
 }) => {
   const dispatch = useAppDispatch();
+  const account = useAppSelector((state) =>
+    state.accounts.get(accountIds.at(0) ?? ''),
+  );
 
   const label = useMemo(
     () =>
       labelRenderer(
-        <DisplayedName accountIds={accountIds} />,
+        <LinkedDisplayName displayProps={{ account, variant: 'simple' }} />,
         count,
         labelSeeMoreHref,
       ),
-    [labelRenderer, accountIds, count, labelSeeMoreHref],
+    [labelRenderer, account, count, labelSeeMoreHref],
   );
 
   const isPrivateMention = useAppSelector(

app/javascript/mastodon/features/notifications_v2/components/notification_with_status.tsx

@@ -2,6 +2,7 @@ import { useMemo } from 'react';
 
 import classNames from 'classnames';
 
+import { LinkedDisplayName } from '@/mastodon/components/display_name';
 import { replyComposeById } from 'mastodon/actions/compose';
 import { toggleReblog, toggleFavourite } from 'mastodon/actions/interactions';
 import {
@@ -15,7 +16,6 @@ import { StatusQuoteManager } from 'mastodon/components/status_quoted';
 import { getStatusHidden } from 'mastodon/selectors/filters';
 import { useAppSelector, useAppDispatch } from 'mastodon/store';
 
-import { DisplayedName } from './displayed_name';
 import type { LabelRenderer } from './notification_group_with_status';
 
 export const NotificationWithStatus: React.FC<{
@@ -39,9 +39,16 @@ export const NotificationWithStatus: React.FC<{
 }) => {
   const dispatch = useAppDispatch();
 
+  const account = useAppSelector((state) =>
+    state.accounts.get(accountIds.at(0) ?? ''),
+  );
   const label = useMemo(
-    () => labelRenderer(<DisplayedName accountIds={accountIds} />, count),
-    [labelRenderer, accountIds, count],
+    () =>
+      labelRenderer(
+        <LinkedDisplayName displayProps={{ account, variant: 'simple' }} />,
+        count,
+      ),
+    [labelRenderer, account, count],
   );
 
   const isPrivateMention = useAppSelector(