Merge pull request #8506 from weseek/feat/140947-wip-badge

feat: WIP badge (PageTree)

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

@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';
 
 import { toastSuccess, toastError } from '~/client/util/toastr';
 import { useSWRMUTxCurrentPage, useSWRxCurrentPage } from '~/stores/page';
+import { mutatePageTree } from '~/stores/page-listing';
 
 import { publish } from '../../client/services/page-operation';
 
@@ -23,6 +24,7 @@ export const WipPageAlert = (): JSX.Element => {
     try {
       await publish(pageId);
       await mutateCurrentPage();
+      await mutatePageTree();
       toastSuccess(t('wip_page.success_publish_page'));
     }
     catch {

apps/app/src/components/SavePageControls.tsx

@@ -16,6 +16,7 @@ import {
 } from '~/stores/context';
 import { useWaitingSaveProcessing } from '~/stores/editor';
 import { useSWRMUTxCurrentPage, useSWRxCurrentPage } from '~/stores/page';
+import { mutatePageTree } from '~/stores/page-listing';
 import { useSelectedGrant } from '~/stores/ui';
 import loggerFactory from '~/utils/logger';
 
@@ -72,6 +73,7 @@ export const SavePageControls = (props: SavePageControlsProps): JSX.Element | nu
     try {
       await unpublish(pageId);
       await mutateCurrentPage();
+      await mutatePageTree();
       toastSuccess(t('wip_page.success_save_as_wip'));
     }
     catch (err) {

apps/app/src/components/TreeItem/SimpleItem.tsx

@@ -58,7 +58,12 @@ const SimpleItemContent = ({ page }: { page: IPageForItem }) => {
       )}
       {page != null && page.path != null && page._id != null && (
         <div className="grw-pagetree-title-anchor flex-grow-1">
-          <p className={`text-truncate m-auto ${page.isEmpty && 'grw-sidebar-text-muted'}`}>{pageName}</p>
+          <div className="d-flex align-items-center">
+            <span className={`text-truncate ${page.isEmpty && 'grw-sidebar-text-muted'}`}>{pageName}</span>
+            { page.wip && (
+              <span className="badge rounded-pill text-bg-secondary ms-2">WIP</span>
+            )}
+          </div>
         </div>
       )}
     </div>