Create WipPageAlert

apps/app/public/static/locales/en_US/translation.json

@@ -829,6 +829,8 @@
   "wip_page": {
     "save_as_wip": "Save as WIP (Currently drafting)",
     "success_save_as_wip": "Successfully saved as a WIP page",
-    "fail_save_as_wip": "Failed to save as a WIP page"
+    "fail_save_as_wip": "Failed to save as a WIP page",
+    "alert": "This page is a work in progress",
+    "publish_page": "Publish page"
   }
 }

apps/app/public/static/locales/ja_JP/translation.json

@@ -862,6 +862,8 @@
   "wip_page": {
     "save_as_wip": "WIP (執筆中) として保存",
     "success_save_as_wip": "WIP ページとして保存しました",
-    "fail_save_as_wip": "WIP ページとして保存できませんでした"
+    "fail_save_as_wip": "WIP ページとして保存できませんでした",
+    "alert": "このページは作業途中です",
+    "publish_page": "WIP を解除"
   }
 }

apps/app/public/static/locales/zh_CN/translation.json

@@ -832,6 +832,8 @@
   "wip_page": {
     "save_as_wip": "保存为 WIP（书面）",
     "success_save_as_wip": "成功保存为 WIP 页面",
-    "fail_save_as_wip": "保存为 WIP 页失败"
+    "fail_save_as_wip": "保存为 WIP 页失败",
+    "alert": "本页面正在制作中",
+    "publish_page": "发布 WIP"
   }
 }

apps/app/src/components/PageAlert/PageAlerts.tsx

@@ -8,6 +8,7 @@ import { OldRevisionAlert } from './OldRevisionAlert';
 import { PageGrantAlert } from './PageGrantAlert';
 import { PageRedirectedAlert } from './PageRedirectedAlert';
 import { PageStaleAlert } from './PageStaleAlert';
+import { WipPageAlert } from './WipPageAlert';
 
 const FixPageGrantAlert = dynamic(() => import('./FixPageGrantAlert').then(mod => mod.FixPageGrantAlert), { ssr: false });
 // dynamic import because TrashPageAlert uses localStorageMiddleware
@@ -22,6 +23,7 @@ export const PageAlerts = (): JSX.Element => {
       <div className="col-sm-12">
         {/* alerts */}
         { !isNotFound && <FixPageGrantAlert /> }
+        <WipPageAlert />
         <PageGrantAlert />
         <TrashPageAlert />
         <PageStaleAlert />

apps/app/src/components/PageAlert/WipPageAlert.tsx

@@ -0,0 +1,42 @@
+import React, { useCallback } from 'react';
+
+import { useTranslation } from 'react-i18next';
+
+import { useSWRMUTxCurrentPage, useSWRxCurrentPage } from '~/stores/page';
+
+import { publish } from '../../client/services/page-operation';
+
+
+export const WipPageAlert = (): JSX.Element => {
+  const { t } = useTranslation();
+  const { data: currentPage } = useSWRxCurrentPage();
+  const { trigger: mutateCurrentPage } = useSWRMUTxCurrentPage();
+
+  const clickPagePublishButton = useCallback(async() => {
+    if (currentPage?._id == null) {
+      return;
+    }
+
+    await publish(currentPage._id);
+    await mutateCurrentPage();
+  }, [currentPage._id, mutateCurrentPage]);
+
+
+  if (!currentPage?.wip) {
+    return <></>;
+  }
+
+  return (
+    <p className="d-flex align-items-center alert alert-secondary py-3 px-4">
+      <span className="material-symbols-outlined me-1 fs-5">info</span>
+      <span>{t('wip_page.alert')}</span>
+      <button
+        type="button"
+        className="btn btn-outline-secondary ms-auto"
+        onClick={clickPagePublishButton}
+      >
+        {t('wip_page.publish_page') }
+      </button>
+    </p>
+  );
+};