Add admin notifications for new Mastodon versions (#26582)

app/javascript/mastodon/features/home_timeline/components/critical_update_banner.tsx

@@ -0,0 +1,26 @@
+import { FormattedMessage } from 'react-intl';
+
+export const CriticalUpdateBanner = () => (
+  <div className='warning-banner'>
+    <div className='warning-banner__message'>
+      <h1>
+        <FormattedMessage
+          id='home.pending_critical_update.title'
+          defaultMessage='Critical security update available!'
+        />
+      </h1>
+      <p>
+        <FormattedMessage
+          id='home.pending_critical_update.body'
+          defaultMessage='Please update your Mastodon server as soon as possible!'
+        />{' '}
+        <a href='/admin/software_updates'>
+          <FormattedMessage
+            id='home.pending_critical_update.link'
+            defaultMessage='See updates'
+          />
+        </a>
+      </p>
+    </div>
+  </div>
+);

app/javascript/mastodon/features/home_timeline/index.jsx

@@ -14,7 +14,7 @@ import { fetchAnnouncements, toggleShowAnnouncements } from 'mastodon/actions/an
 import { IconWithBadge } from 'mastodon/components/icon_with_badge';
 import { NotSignedInIndicator } from 'mastodon/components/not_signed_in_indicator';
 import AnnouncementsContainer from 'mastodon/features/getting_started/containers/announcements_container';
-import { me } from 'mastodon/initial_state';
+import { me, criticalUpdatesPending } from 'mastodon/initial_state';
 
 import { addColumn, removeColumn, moveColumn } from '../../actions/columns';
 import { expandHomeTimeline } from '../../actions/timelines';
@@ -23,6 +23,7 @@ import ColumnHeader from '../../components/column_header';
 import StatusListContainer from '../ui/containers/status_list_container';
 
 import { ColumnSettings } from './components/column_settings';
+import { CriticalUpdateBanner } from './components/critical_update_banner';
 import { ExplorePrompt } from './components/explore_prompt';
 
 const messages = defineMessages({
@@ -156,8 +157,9 @@ class HomeTimeline extends PureComponent {
     const { intl, hasUnread, columnId, multiColumn, tooSlow, hasAnnouncements, unreadAnnouncements, showAnnouncements } = this.props;
     const pinned = !!columnId;
     const { signedIn } = this.context.identity;
+    const banners = [];
 
-    let announcementsButton, banner;
+    let announcementsButton;
 
     if (hasAnnouncements) {
       announcementsButton = (
@@ -173,8 +175,12 @@ class HomeTimeline extends PureComponent {
       );
     }
 
+    if (criticalUpdatesPending) {
+      banners.push(<CriticalUpdateBanner key='critical-update-banner' />);
+    }
+
     if (tooSlow) {
-      banner = <ExplorePrompt />;
+      banners.push(<ExplorePrompt key='explore-prompt' />);
     }
 
     return (
@@ -196,7 +202,7 @@ class HomeTimeline extends PureComponent {
 
         {signedIn ? (
           <StatusListContainer
-            prepend={banner}
+            prepend={banners}
             alwaysPrepend
             trackScroll={!pinned}
             scrollKey={`home_timeline-${columnId}`}