Merge pull request #6496 from weseek/fix/wording-to-be-displayed

fix: Modified wording of alert when tags are updated

packages/app/src/components/Navbar/GrowiContextualSubNavigation.tsx

@@ -217,7 +217,7 @@ const GrowiContextualSubNavigation = (props) => {
       await pageContainer.setState({ revisionId: updatedRevisionId });
 
       const lastUpdateUser = res.savedPage?.lastUpdateUser as IUser;
-      await pageContainer.setState({ lastUpdateUsername: lastUpdateUser.username });
+      await pageContainer.setState({ lastUpdateUser });
 
       // revalidate SWRTagsInfo
       mutateSWRTagsInfo();

packages/app/src/components/PageStatusAlert.jsx

@@ -1,10 +1,12 @@
 import React from 'react';
 
 import PropTypes from 'prop-types';
+import ReactDOMServer from 'react-dom/server';
 import { useTranslation } from 'react-i18next';
 
 import AppContainer from '~/client/services/AppContainer';
 import PageContainer from '~/client/services/PageContainer';
+import Username from '~/components/User/Username';
 
 import { withUnstatedContainers } from './UnstatedUtils';
 
@@ -82,9 +84,12 @@ class PageStatusAlert extends React.Component {
       isConflictOnEdit = markdownOnEdit !== pageContainer.state.markdown;
     }
 
+    const usernameComponentToString = ReactDOMServer.renderToString(<Username user={pageContainer.state.lastUpdateUser} />);
+
     const label1 = isConflictOnEdit
       ? t('modal_resolve_conflict.file_conflicting_with_newer_remote')
-      : `${pageContainer.state.lastUpdateUsername} ${t('edited this page')}`;
+      // eslint-disable-next-line react/no-danger
+      : <span dangerouslySetInnerHTML={{ __html: `${usernameComponentToString} ${t('edited this page')}` }} />;
 
     return [
       ['bg-warning'],