Added FixGrantAlert.tsx

packages/app/src/client/app.jsx

@@ -37,6 +37,7 @@ import NotFoundAlert from '../components/Page/NotFoundAlert';
 import RedirectedAlert from '../components/Page/RedirectedAlert';
 import ShareLinkAlert from '../components/Page/ShareLinkAlert';
 import TrashPageAlert from '../components/Page/TrashPageAlert';
+import FixGrantAlert from '../components/Page/FixGrantAlert';
 import PageComment from '../components/PageComment';
 import CommentEditorLazyRenderer from '../components/PageComment/CommentEditorLazyRenderer';
 import PageContentFooter from '../components/PageContentFooter';
@@ -99,6 +100,8 @@ Object.assign(componentMappings, {
 
   'trash-page-alert': <TrashPageAlert />,
 
+  'fix-grant-alert': <FixGrantAlert />,
+
   'trash-page-list-container': <TrashPageList />,
 
   'not-found-page': <NotFoundPage />,

packages/app/src/components/Page/FixGrantAlert.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+const FixGrantAlert = (): JSX.Element => {
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <div className="alert alert-warning py-3 pl-4 d-flex flex-column flex-lg-row">
+        <div className="flex-grow-1">
+          <i className="icon-fw icon-exclamation ml-1" aria-hidden="true" />
+          {t('fix_grant_alert.description')}
+        </div>
+        <div className="d-flex align-items-end align-items-lg-center">
+          <button className="btn btn-info btn-sm rounded-pill" onClick={() => alert('Show modal to fix')}>
+            {t('fix_grant_alert.btn_label')}
+          </button>
+        </div>
+      </div>
+      {/* TODO: Render modal */}
+    </>
+  );
+};
+
+export default FixGrantAlert;

packages/app/src/server/views/widget/page_alerts.html

@@ -68,6 +68,12 @@
 
     {% if isTrashPage(page.path) %}
       <div id="trash-page-alert"></div>
+      {% endif %}
+      <div id="trash-page-alert"></div>
+
+    {% if shouldFixGrant %}
+      <div id="fix-grant-alert"></div>
     {% endif %}
+    <div id="fix-grant-alert"></div>
   </div>
 </div>