Wrapstodon: Allow dismissing banner (#37202)

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

@@ -1,26 +1,34 @@
+import type { FC } from 'react';
+
 import { FormattedMessage } from 'react-intl';
 
-export const CriticalUpdateBanner = () => (
-  <div className='warning-banner'>
-    <div className='warning-banner__message'>
-      <h1>
+import { criticalUpdatesPending } from '@/mastodon/initial_state';
+
+export const CriticalUpdateBanner: FC = () => {
+  if (!criticalUpdatesPending) {
+    return null;
+  }
+  return (
+    <div className='warning-banner'>
+      <div className='warning-banner__message'>
         <FormattedMessage
           id='home.pending_critical_update.title'
           defaultMessage='Critical security update available!'
+          tagName='h1'
         />
-      </h1>
-      <p>
-        <FormattedMessage
-          id='home.pending_critical_update.body'
-          defaultMessage='Please update your Mastodon server as soon as possible!'
-        />{' '}
-        <a href='/admin/software_updates'>
+        <p>
           <FormattedMessage
-            id='home.pending_critical_update.link'
-            defaultMessage='See updates'
-          />
-        </a>
-      </p>
+            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>
-  </div>
-);
+  );
+};