Merge branch 'dev/5.0.x' into feat/scroll-into-highlighted-string

packages/app/src/client/app.jsx

@@ -39,7 +39,7 @@ import MyDraftList from '../components/MyDraftList/MyDraftList';
 import BookmarkList from '../components/PageList/BookmarkList';
 import Fab from '../components/Fab';
 import PersonalSettings from '../components/Me/PersonalSettings';
-import GrowiSubNavigation from '../components/Navbar/GrowiSubNavigation';
+import GrowiContextualSubNavigation from '../components/Navbar/GrowiContextualSubNavigation';
 import GrowiSubNavigationSwitcher from '../components/Navbar/GrowiSubNavigationSwitcher';
 import IdenticalPathPage from '~/components/IdenticalPathPage';
 
@@ -117,7 +117,6 @@ Object.assign(componentMappings, {
   'renamed-alert': <RenamedAlert />,
   'not-found-alert': <NotFoundAlert
     isGuestUserMode={appContainer.isGuestUser}
-    isHidden={pageContainer.state.pageId != null ? (pageContainer.state.isNotCreatable || pageContainer.state.isTrashPage) : false} // !!DO NOT MOVE THIS!! https://github.com/weseek/growi/pull/4899
   />,
 });
 
@@ -147,7 +146,7 @@ if (pageContainer.state.path != null) {
   Object.assign(componentMappings, {
     // eslint-disable-next-line quote-props
     'page': <Page />,
-    'grw-subnav-container': <GrowiSubNavigation />,
+    'grw-subnav-container': <GrowiContextualSubNavigation />,
     'grw-subnav-switcher-container': <GrowiSubNavigationSwitcher />,
     'display-switcher': <DisplaySwitcher />,
   });

packages/app/src/client/services/ContextExtractor.tsx

@@ -3,7 +3,7 @@ import { pagePathUtils } from '@growi/core';
 
 import {
   useCurrentCreatedAt, useDeleteUsername, useDeletedAt, useHasChildren, useHasDraftOnHackmd, useIsAbleToDeleteCompletely,
-  useIsDeletable, useIsDeleted, useIsNotCreatable, useIsPageExist, useIsTrashPage, useIsUserPage, useLastUpdateUsername,
+  useIsDeletable, useIsDeleted, useIsNotCreatable, useIsTrashPage, useIsUserPage, useLastUpdateUsername,
   useCurrentPageId, usePageIdOnHackmd, usePageUser, useCurrentPagePath, useRevisionCreatedAt, useRevisionId, useRevisionIdHackmdSynced,
   useShareLinkId, useShareLinksNumber, useTemplateTagData, useCurrentUpdatedAt, useCreator, useRevisionAuthor, useCurrentUser, useTargetAndAncestors,
   useSlackChannels, useNotFoundTargetPathOrId, useIsSearchPage, useIsForbidden, useIsIdenticalPath,
@@ -58,7 +58,6 @@ const ContextExtractorOnce: FC = () => {
   const isDeletable = JSON.parse(mainContent?.getAttribute('data-page-is-deletable') || jsonNull) ?? false;
   const isNotCreatable = JSON.parse(mainContent?.getAttribute('data-page-is-not-creatable') || jsonNull) ?? false;
   const isAbleToDeleteCompletely = JSON.parse(mainContent?.getAttribute('data-page-is-able-to-delete-completely') || jsonNull) ?? false;
-  const isPageExist = mainContent?.getAttribute('data-page-id') != null;
   const isForbidden = forbiddenContent != null;
   const pageUser = JSON.parse(mainContent?.getAttribute('data-page-user') || jsonNull);
   const hasChildren = JSON.parse(mainContent?.getAttribute('data-page-has-children') || jsonNull);
@@ -105,7 +104,6 @@ const ContextExtractorOnce: FC = () => {
   useIsDeletable(isDeletable);
   useIsDeleted(isDeleted);
   useIsNotCreatable(isNotCreatable);
-  useIsPageExist(isPageExist);
   useIsForbidden(isForbidden);
   useIsTrashPage(isTrashPage);
   useIsUserPage(isUserPage);

packages/app/src/components/Navbar/AuthorInfo.jsx

@@ -34,7 +34,7 @@ const AuthorInfo = (props) => {
       if (err instanceof RangeError) {
         return <p>{nullinfoLabelForFooter} <UserPicture user={user} size="sm" /> {userLabel}</p>;
       }
-      return;
+      return <></>;
     }
   }
 

packages/app/src/components/Navbar/GrowiContextualSubNavigation.tsx

@@ -0,0 +1,148 @@
+import React, { useCallback } from 'react';
+import PropTypes from 'prop-types';
+
+import { withUnstatedContainers } from '../UnstatedUtils';
+import EditorContainer from '~/client/services/EditorContainer';
+import {
+  EditorMode, useDrawerMode, useEditorMode, useIsDeviceSmallerThanMd, useIsAbleToShowPageManagement, useIsAbleToShowTagLabel,
+  useIsAbleToShowPageEditorModeManager, useIsAbleToShowPageAuthors,
+} from '~/stores/ui';
+import {
+  useCurrentCreatedAt, useCurrentUpdatedAt, useCurrentPageId, useRevisionId, useCurrentPagePath,
+  useCreator, useRevisionAuthor, useIsGuestUser,
+} from '~/stores/context';
+import { useSWRTagsInfo } from '~/stores/page';
+
+import { SubNavButtons } from './SubNavButtons';
+import PageEditorModeManager from './PageEditorModeManager';
+
+import { toastSuccess, toastError } from '~/client/util/apiNotification';
+import { apiPost } from '~/client/util/apiv1-client';
+import { IPageHasId } from '~/interfaces/page';
+import { GrowiSubNavigation } from './GrowiSubNavigation';
+
+const GrowiContextualSubNavigation = (props) => {
+  const { data: isDeviceSmallerThanMd } = useIsDeviceSmallerThanMd();
+  const { data: isDrawerMode } = useDrawerMode();
+  const { data: editorMode, mutate: mutateEditorMode } = useEditorMode();
+  const { data: createdAt } = useCurrentCreatedAt();
+  const { data: updatedAt } = useCurrentUpdatedAt();
+  const { data: pageId } = useCurrentPageId();
+  const { data: revisionId } = useRevisionId();
+  const { data: path } = useCurrentPagePath();
+  const { data: creator } = useCreator();
+  const { data: revisionAuthor } = useRevisionAuthor();
+  const { data: isGuestUser } = useIsGuestUser();
+
+  const { data: isAbleToShowPageManagement } = useIsAbleToShowPageManagement();
+  const { data: isAbleToShowTagLabel } = useIsAbleToShowTagLabel();
+  const { data: isAbleToShowPageEditorModeManager } = useIsAbleToShowPageEditorModeManager();
+  const { data: isAbleToShowPageAuthors } = useIsAbleToShowPageAuthors();
+
+  const { mutate: mutateSWRTagsInfo, data: tagsInfoData } = useSWRTagsInfo(pageId);
+
+  const {
+    editorContainer, isCompactMode,
+  } = props;
+
+  const isViewMode = editorMode === EditorMode.View;
+
+  const tagsUpdatedHandler = useCallback(async(newTags: string[]) => {
+    // It will not be reflected in the DB until the page is refreshed
+    if (editorMode === EditorMode.Editor) {
+      return editorContainer.setState({ tags: newTags });
+    }
+
+    try {
+      const { tags } = await apiPost('/tags.update', { pageId, revisionId, tags: newTags }) as { tags };
+
+      // revalidate SWRTagsInfo
+      mutateSWRTagsInfo();
+      // update editorContainer.state
+      editorContainer.setState({ tags });
+
+      toastSuccess('updated tags successfully');
+    }
+    catch (err) {
+      toastError(err, 'fail to update tags');
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [pageId]);
+
+  const ControlComponents = useCallback(() => {
+    function onPageEditorModeButtonClicked(viewType) {
+      mutateEditorMode(viewType);
+    }
+
+    return (
+      <>
+        <div className="h-50 d-flex flex-column align-items-end justify-content-center">
+          { isViewMode && (
+            <SubNavButtons
+              isCompactMode={isCompactMode}
+              pageId={pageId}
+              showPageControlDropdown={isAbleToShowPageManagement}
+            />
+          ) }
+        </div>
+        <div className="h-50 d-flex flex-column align-items-end justify-content-center">
+          {isAbleToShowPageEditorModeManager && (
+            <PageEditorModeManager
+              onPageEditorModeButtonClicked={onPageEditorModeButtonClicked}
+              isBtnDisabled={isGuestUser}
+              editorMode={editorMode}
+              isDeviceSmallerThanMd={isDeviceSmallerThanMd}
+            />
+          )}
+        </div>
+      </>
+    );
+  }, [
+    pageId,
+    editorMode, mutateEditorMode,
+    isCompactMode, isDeviceSmallerThanMd, isGuestUser,
+    isViewMode, isAbleToShowPageEditorModeManager, isAbleToShowPageManagement,
+  ]);
+
+
+  if (path == null) {
+    return <></>;
+  }
+
+  const currentPage: Partial<IPageHasId> = {
+    _id: pageId ?? undefined,
+    path,
+    revision: revisionId ?? undefined,
+    creator: creator ?? undefined,
+    lastUpdateUser: revisionAuthor,
+    createdAt: createdAt ?? undefined,
+    updatedAt: updatedAt ?? undefined,
+  };
+
+
+  return (
+    <GrowiSubNavigation
+      page={currentPage}
+      showDrawerToggler={isDrawerMode}
+      showTagLabel={isAbleToShowTagLabel}
+      showPageAuthors={isAbleToShowPageAuthors}
+      tags={tagsInfoData?.tags || []}
+      tagsUpdatedHandler={tagsUpdatedHandler}
+      controls={ControlComponents}
+    />
+  );
+};
+
+/**
+ * Wrapper component for using unstated
+ */
+const GrowiContextualSubNavigationWrapper = withUnstatedContainers(GrowiContextualSubNavigation, [EditorContainer]);
+
+
+GrowiContextualSubNavigation.propTypes = {
+  editorContainer: PropTypes.instanceOf(EditorContainer).isRequired,
+
+  isCompactMode: PropTypes.bool,
+};
+
+export default GrowiContextualSubNavigationWrapper;

packages/app/src/components/Navbar/GrowiSubNavigation.jsx

@@ -1,158 +0,0 @@
-import React, { useCallback } from 'react';
-import PropTypes from 'prop-types';
-
-import { withUnstatedContainers } from '../UnstatedUtils';
-import EditorContainer from '~/client/services/EditorContainer';
-import {
-  EditorMode, useDrawerMode, useEditorMode, useIsDeviceSmallerThanMd, useIsAbleToShowPageManagement, useIsAbleToShowTagLabel,
-  useIsAbleToShowPageEditorModeManager, useIsAbleToShowPageAuthors,
-} from '~/stores/ui';
-import {
-  useCurrentCreatedAt, useCurrentUpdatedAt, useCurrentPageId, useRevisionId, useCurrentPagePath, useIsDeletable,
-  useIsAbleToDeleteCompletely, useCreator, useRevisionAuthor, useIsPageExist, useIsGuestUser,
-} from '~/stores/context';
-import { useSWRTagsInfo } from '~/stores/page';
-
-import TagLabels from '../Page/TagLabels';
-import SubNavButtons from './SubNavButtons';
-import PageEditorModeManager from './PageEditorModeManager';
-
-import AuthorInfo from './AuthorInfo';
-import DrawerToggler from './DrawerToggler';
-
-import PagePathNav from '../PagePathNav';
-
-import { toastSuccess, toastError } from '~/client/util/apiNotification';
-import { apiPost } from '~/client/util/apiv1-client';
-
-const GrowiSubNavigation = (props) => {
-  const { data: isDeviceSmallerThanMd } = useIsDeviceSmallerThanMd();
-  const { data: isDrawerMode } = useDrawerMode();
-  const { data: editorMode, mutate: mutateEditorMode } = useEditorMode();
-  const { data: createdAt } = useCurrentCreatedAt();
-  const { data: updatedAt } = useCurrentUpdatedAt();
-  const { data: pageId } = useCurrentPageId();
-  const { data: revisionId } = useRevisionId();
-  const { data: path } = useCurrentPagePath();
-  const { data: isDeletable } = useIsDeletable();
-  const { data: isAbleToDeleteCompletely } = useIsAbleToDeleteCompletely();
-  const { data: creator } = useCreator();
-  const { data: revisionAuthor } = useRevisionAuthor();
-  const { data: isGuestUser } = useIsGuestUser();
-
-  const { data: isAbleToShowPageManagement } = useIsAbleToShowPageManagement();
-  const { data: isAbleToShowTagLabel } = useIsAbleToShowTagLabel();
-  const { data: isAbleToShowPageEditorModeManager } = useIsAbleToShowPageEditorModeManager();
-  const { data: isAbleToShowPageAuthors } = useIsAbleToShowPageAuthors();
-
-  const { mutate: mutateSWRTagsInfo, data: TagsInfoData } = useSWRTagsInfo(pageId);
-
-  const {
-    editorContainer, isCompactMode,
-  } = props;
-
-  const isViewMode = editorMode === EditorMode.View;
-  const isEditorMode = !isViewMode;
-
-  function onPageEditorModeButtonClicked(viewType) {
-    mutateEditorMode(viewType);
-  }
-
-  const tagsUpdatedHandler = useCallback(async(newTags) => {
-    // It will not be reflected in the DB until the page is refreshed
-    if (editorMode === 'edit') {
-      return editorContainer.setState({ tags: newTags });
-    }
-
-    try {
-      const { tags } = await apiPost('/tags.update', { pageId, revisionId, tags: newTags });
-
-      // revalidate SWRTagsInfo
-      mutateSWRTagsInfo();
-      // update editorContainer.state
-      editorContainer.setState({ tags });
-
-      toastSuccess('updated tags successfully');
-    }
-    catch (err) {
-      toastError(err, 'fail to update tags');
-    }
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [pageId]);
-
-  return (
-    <div className={`grw-subnav container-fluid d-flex align-items-center justify-content-between ${isCompactMode ? 'grw-subnav-compact d-print-none' : ''}`}>
-
-      {/* Left side */}
-      <div className="d-flex grw-subnav-left-side">
-        { isDrawerMode && (
-          <div className={`d-none d-md-flex align-items-center ${isEditorMode ? 'mr-2 pr-2' : 'border-right mr-4 pr-4'}`}>
-            <DrawerToggler />
-          </div>
-        ) }
-
-        <div className="grw-path-nav-container">
-          { isAbleToShowTagLabel && !isCompactMode && (
-            <div className="grw-taglabels-container">
-              <TagLabels tags={TagsInfoData?.tags || []} tagsUpdateInvoked={tagsUpdatedHandler} />
-            </div>
-          ) }
-          <PagePathNav pageId={pageId} pagePath={path} isSingleLineMode={isEditorMode} isCompactMode={isCompactMode} />
-        </div>
-      </div>
-
-      {/* Right side */}
-      <div className="d-flex">
-
-        <div className="d-flex flex-column align-items-end">
-          <SubNavButtons
-            isCompactMode={isCompactMode}
-            pageId={pageId}
-            revisionId={revisionId}
-            path={path}
-            isDeletable={isDeletable}
-            isAbleToDeleteCompletely={isAbleToDeleteCompletely}
-            isViewMode={isViewMode}
-            isAbleToShowPageManagement={isAbleToShowPageManagement}
-          />
-          <div className="mt-2">
-            {isAbleToShowPageEditorModeManager && (
-              <PageEditorModeManager
-                onPageEditorModeButtonClicked={onPageEditorModeButtonClicked}
-                isBtnDisabled={isGuestUser}
-                editorMode={editorMode}
-                isDeviceSmallerThanMd={isDeviceSmallerThanMd}
-              />
-            )}
-          </div>
-        </div>
-
-        {/* Page Authors */}
-        { (isAbleToShowPageAuthors && !isCompactMode) && (
-          <ul className="authors text-nowrap border-left d-none d-lg-block d-edit-none py-2 pl-4 mb-0 ml-3">
-            <li className="pb-1">
-              <AuthorInfo user={creator} date={createdAt} locate="subnav" />
-            </li>
-            <li className="mt-1 pt-1 border-top">
-              <AuthorInfo user={revisionAuthor} date={updatedAt} mode="update" locate="subnav" />
-            </li>
-          </ul>
-        ) }
-      </div>
-    </div>
-  );
-};
-
-/**
- * Wrapper component for using unstated
- */
-const GrowiSubNavigationWrapper = withUnstatedContainers(GrowiSubNavigation, [EditorContainer]);
-
-
-GrowiSubNavigation.propTypes = {
-  editorContainer: PropTypes.instanceOf(EditorContainer).isRequired,
-
-  isCompactMode: PropTypes.bool,
-};
-
-export default GrowiSubNavigationWrapper;

packages/app/src/components/Navbar/GrowiSubNavigation.tsx

@@ -0,0 +1,100 @@
+import React from 'react';
+
+import { IPageHasId } from '~/interfaces/page';
+
+import {
+  EditorMode, useEditorMode,
+} from '~/stores/ui';
+
+import TagLabels from '../Page/TagLabels';
+
+import AuthorInfo from './AuthorInfo';
+import DrawerToggler from './DrawerToggler';
+
+import PagePathNav from '../PagePathNav';
+import { IUser } from '~/interfaces/user';
+
+
+type Props = {
+  page: Partial<IPageHasId>,
+
+  showDrawerToggler?: boolean,
+  showTagLabel?: boolean,
+  showPageAuthors?: boolean,
+
+  isGuestUser?: boolean,
+  isDrawerMode?: boolean,
+  isCompactMode?: boolean,
+
+  tags?: string[],
+  tagsUpdatedHandler?: (newTags: string[]) => Promise<void>,
+
+  controls?: any,
+}
+
+export const GrowiSubNavigation = (props: Props): JSX.Element => {
+  const { data: editorMode } = useEditorMode();
+
+  const {
+    page,
+    showDrawerToggler, showTagLabel, showPageAuthors,
+    isGuestUser, isDrawerMode, isCompactMode,
+    tags, tagsUpdatedHandler,
+    controls: Controls,
+  } = props;
+
+  const {
+    _id: pageId, path, creator, lastUpdateUser,
+    createdAt, updatedAt,
+  } = page;
+
+  const isViewMode = editorMode === EditorMode.View;
+  const isEditorMode = !isViewMode;
+
+  if (path == null) {
+    return <></>;
+  }
+
+  return (
+    <div className={`grw-subnav container-fluid d-flex align-items-center justify-content-between ${isCompactMode ? 'grw-subnav-compact d-print-none' : ''}`}>
+
+      {/* Left side */}
+      <div className="d-flex grw-subnav-left-side">
+        { showDrawerToggler && isDrawerMode && (
+          <div className={`d-none d-md-flex align-items-center ${isEditorMode ? 'mr-2 pr-2' : 'border-right mr-4 pr-4'}`}>
+            <DrawerToggler />
+          </div>
+        ) }
+
+        <div className="grw-path-nav-container">
+          { showTagLabel && !isCompactMode && (
+            <div className="grw-taglabels-container">
+              <TagLabels tags={tags} isGuestUser={isGuestUser ?? false} tagsUpdateInvoked={tagsUpdatedHandler} />
+            </div>
+          ) }
+          <PagePathNav pageId={pageId} pagePath={path} isSingleLineMode={isEditorMode} isCompactMode={isCompactMode} />
+        </div>
+      </div>
+
+      {/* Right side */}
+      <div className="d-flex">
+
+        <div>
+          { Controls && <Controls></Controls> }
+        </div>
+
+        {/* Page Authors */}
+        { (showPageAuthors && !isCompactMode) && (
+          <ul className="authors text-nowrap border-left d-none d-lg-block d-edit-none py-2 pl-4 mb-0 ml-3">
+            <li className="pb-1">
+              <AuthorInfo user={creator as IUser} date={createdAt} locate="subnav" />
+            </li>
+            <li className="mt-1 pt-1 border-top">
+              <AuthorInfo user={lastUpdateUser as IUser} date={updatedAt} mode="update" locate="subnav" />
+            </li>
+          </ul>
+        ) }
+      </div>
+    </div>
+  );
+};

packages/app/src/components/Navbar/GrowiSubNavigationSwitcher.jsx

@@ -8,7 +8,7 @@ import { debounce } from 'throttle-debounce';
 import loggerFactory from '~/utils/logger';
 import { useSidebarCollapsed } from '~/stores/ui';
 
-import GrowiSubNavigation from './GrowiSubNavigation';
+import GrowiContextualSubNavigation from './GrowiContextualSubNavigation';
 
 const logger = loggerFactory('growi:cli:GrowiSubNavigationSticky');
 
@@ -110,7 +110,7 @@ const GrowiSubNavigationSwitcher = (props) => {
   return (
     <div className={`grw-subnav-switcher ${isVisible ? '' : 'grw-subnav-switcher-hidden'}`}>
       <div id="grw-subnav-fixed-container" className="grw-subnav-fixed-container position-fixed" ref={fixedContainerRef} style={{ width }}>
-        <GrowiSubNavigation isCompactMode />
+        <GrowiContextualSubNavigation isCompactMode />
       </div>
     </div>
   );

packages/app/src/components/Navbar/SubNavButtons.tsx

@@ -1,10 +1,7 @@
-import React, {
-  FC, useCallback,
-} from 'react';
+import React, { useCallback } from 'react';
 
 import SubscribeButton from '../SubscribeButton';
 import PageReactionButtons from '../PageReactionButtons';
-import PageManagement from '../Page/PageManagement';
 import { useSWRPageInfo } from '../../stores/page';
 import { useSWRBookmarkInfo } from '../../stores/bookmark';
 import { toastError } from '../../client/util/apiNotification';
@@ -12,19 +9,14 @@ import { apiv3Put } from '../../client/util/apiv3-client';
 import { useSWRxLikerList } from '../../stores/user';
 import { useIsGuestUser } from '~/stores/context';
 
-type SubNavButtonsProps= {
+
+type SubNavButtonsSubstanceProps= {
   isCompactMode?: boolean,
-  pageId: string,
-  revisionId: string,
-  path: string,
-  isViewMode: boolean
-  isAbleToShowPageManagement: boolean,
-  isDeletable: boolean,
-  isAbleToDeleteCompletely: boolean,
+  showPageControlDropdown?: boolean,
 }
-const SubNavButtons: FC<SubNavButtonsProps> = (props: SubNavButtonsProps) => {
+const SubNavButtonsSubstance = (props: { pageId: string } & SubNavButtonsSubstanceProps): JSX.Element => {
   const {
-    isCompactMode, pageId, revisionId, path, isViewMode, isAbleToShowPageManagement, isDeletable, isAbleToDeleteCompletely,
+    isCompactMode, pageId, showPageControlDropdown,
   } = props;
 
   const { data: isGuestUser } = useIsGuestUser();
@@ -62,6 +54,7 @@ const SubNavButtons: FC<SubNavButtonsProps> = (props: SubNavButtonsProps) => {
     }
   }, [bookmarkInfo, isGuestUser, mutateBookmarkInfo, pageId]);
 
+
   if (pageInfoError != null || pageInfo == null) {
     return <></>;
   }
@@ -75,38 +68,52 @@ const SubNavButtons: FC<SubNavButtonsProps> = (props: SubNavButtonsProps) => {
 
   return (
     <div className="d-flex" style={{ gap: '2px' }}>
-      {isViewMode && (
-        <>
-          <span>
-            <SubscribeButton pageId={props.pageId} />
-          </span>
-          <PageReactionButtons
-            isCompactMode={isCompactMode}
-            sumOfLikers={sumOfLikers}
-            isLiked={isLiked}
-            likers={likers || []}
-            onLikeClicked={likeClickhandler}
-            sumOfBookmarks={sumOfBookmarks}
-            isBookmarked={isBookmarked}
-            bookmarkedUsers={bookmarkedUsers}
-            onBookMarkClicked={bookmarkClickHandler}
-          >
-          </PageReactionButtons>
-          { isAbleToShowPageManagement && (
-            <PageManagement
-              pageId={pageId}
-              revisionId={revisionId}
-              path={path}
-              isCompactMode={isCompactMode}
-              isDeletable={isDeletable}
-              isAbleToDeleteCompletely={isAbleToDeleteCompletely}
-            >
-            </PageManagement>
-          )}
-        </>
+      <span>
+        <SubscribeButton pageId={props.pageId} />
+      </span>
+      <PageReactionButtons
+        isCompactMode={isCompactMode}
+        sumOfLikers={sumOfLikers}
+        isLiked={isLiked}
+        likers={likers || []}
+        onLikeClicked={likeClickhandler}
+        sumOfBookmarks={sumOfBookmarks}
+        isBookmarked={isBookmarked}
+        bookmarkedUsers={bookmarkedUsers}
+        onBookMarkClicked={bookmarkClickHandler}
+      >
+      </PageReactionButtons>
+
+      { showPageControlDropdown && (
+        /*
+          TODO:
+          replace with PageItemControl
+        */
+        <></>
+        // <PageManagement
+        //   pageId={pageId}
+        //   revisionId={revisionId}
+        //   path={path}
+        //   isCompactMode={isCompactMode}
+        //   isDeletable={isDeletable}
+        //   isAbleToDeleteCompletely={isAbleToDeleteCompletely}
+        // >
+        // </PageManagement>
       )}
     </div>
   );
 };
 
-export default SubNavButtons;
+type SubNavButtonsProps= SubNavButtonsSubstanceProps & {
+  pageId?: string | null,
+};
+
+export const SubNavButtons = (props: SubNavButtonsProps): JSX.Element => {
+  const { pageId, isCompactMode } = props;
+
+  if (pageId == null) {
+    return <></>;
+  }
+
+  return <SubNavButtonsSubstance pageId={pageId} isCompactMode={isCompactMode} />;
+};

packages/app/src/components/Page/NotFoundAlert.jsx → packages/app/src/components/Page/NotFoundAlert.tsx

@@ -1,15 +1,21 @@
 import React, { useCallback } from 'react';
-import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import { UncontrolledTooltip } from 'reactstrap';
+
 import { EditorMode, useEditorMode } from '~/stores/ui';
 
 
-const NotFoundAlert = (props) => {
+type Props = {
+  isGuestUserMode?: boolean,
+}
+
+const NotFoundAlert = (props: Props): JSX.Element => {
   const { t } = useTranslation();
-  const { isHidden, isGuestUserMode } = props;
+  const { isGuestUserMode } = props;
+
+  const { data: editorMode, mutate: mutateEditorMode } = useEditorMode();
 
-  const { mutate: mutateEditorMode } = useEditorMode();
+  const isEditorMode = editorMode !== EditorMode.View;
 
   const clickHandler = useCallback(() => {
     // check guest user,
@@ -22,11 +28,10 @@ const NotFoundAlert = (props) => {
 
   }, [isGuestUserMode, mutateEditorMode]);
 
-  if (isHidden) {
-    return null;
+  if (isEditorMode) {
+    return <></>;
   }
 
-
   return (
     <div className="border border-info p-3">
       <div
@@ -59,9 +64,4 @@ const NotFoundAlert = (props) => {
 };
 
 
-NotFoundAlert.propTypes = {
-  isHidden: PropTypes.bool.isRequired,
-  isGuestUserMode: PropTypes.bool.isRequired,
-};
-
 export default NotFoundAlert;

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

@@ -20,11 +20,6 @@ const RenderTagLabels = React.memo((props: RenderTagLabelsProps) => {
     openEditorModal();
   }
 
-  // activate suspense
-  if (tags == null) {
-    throw new Promise(() => {});
-  }
-
   const isTagsEmpty = tags.length === 0;
   const tagElements = tags.map((tag) => {
     return (

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

@@ -1,20 +1,17 @@
-import React, { FC, Suspense, useState } from 'react';
-
-import { withUnstatedContainers } from '../UnstatedUtils';
-import AppContainer from '~/client/services/AppContainer';
+import React, { FC, useState } from 'react';
 
 import RenderTagLabels from './RenderTagLabels';
 import TagEditModal from './TagEditModal';
 
-type TagLabels = {
-  tags: string[],
-  appContainer: AppContainer,
-  tagsUpdateInvoked?: () => Promise<void>,
+type Props = {
+  tags?: string[],
+  isGuestUser: boolean,
+  tagsUpdateInvoked?: (tags: string[]) => Promise<void>,
 }
 
 
-const TagLabels:FC<TagLabels> = (props:TagLabels) => {
-  const { tags, appContainer, tagsUpdateInvoked } = props;
+const TagLabels:FC<Props> = (props: Props) => {
+  const { tags, isGuestUser, tagsUpdateInvoked } = props;
 
   const [isTagEditModalShown, setIsTagEditModalShown] = useState(false);
 
@@ -30,13 +27,18 @@ const TagLabels:FC<TagLabels> = (props:TagLabels) => {
     <>
       <form className="grw-tag-labels form-inline">
         <i className="tag-icon icon-tag mr-2"></i>
-        <Suspense fallback={<span className="grw-tag-label badge badge-secondary">―</span>}>
-          <RenderTagLabels
-            tags={tags}
-            openEditorModal={openEditorModal}
-            isGuestUser={appContainer.isGuestUser}
-          />
-        </Suspense>
+        { tags == null
+          ? (
+            <span className="grw-tag-label badge badge-secondary">―</span>
+          )
+          : (
+            <RenderTagLabels
+              tags={tags}
+              openEditorModal={openEditorModal}
+              isGuestUser={isGuestUser}
+            />
+          )
+        }
       </form>
 
       <TagEditModal
@@ -45,14 +47,8 @@ const TagLabels:FC<TagLabels> = (props:TagLabels) => {
         onClose={closeEditorModal}
         onTagsUpdated={tagsUpdateInvoked}
       />
-
     </>
   );
 };
 
-/**
- * Wrapper component for using unstated
- */
-const TagLabelsUnstatedWrapper = withUnstatedContainers(TagLabels, [AppContainer]);
-
-export default TagLabelsUnstatedWrapper;
+export default TagLabels;

packages/app/src/components/PageList/PageListItemL.tsx

@@ -10,7 +10,7 @@ import { IPageSearchMeta, isIPageSearchMeta } from '~/interfaces/search';
 
 import PageItemControl from '../Common/Dropdown/PageItemControl';
 
-const { isTopPage } = pagePathUtils;
+const { isTopPage, isUserNamePage } = pagePathUtils;
 
 type Props = {
   page: IPageWithMeta | IPageWithMeta<IPageSearchMeta>,
@@ -124,8 +124,7 @@ export const PageListItemL: FC<Props> = memo((props:Props) => {
                   page={pageData}
                   onClickDeleteButtonHandler={props.onClickDeleteButton}
                   isEnableActions={isEnableActions}
-                  isDeletable={!isTopPage(pageData.path)}
-                  // Todo: add onClickRenameButtonHandler
+                  isDeletable={!isTopPage(pageData.path) && !isUserNamePage(pageData.path)}
                 />
               </div>
             </div>

packages/app/src/components/PagePathNav.tsx

@@ -7,8 +7,8 @@ import LinkedPagePath from '../models/linked-page-path';
 
 
 type Props = {
-  pageId :string,
-  pagePath:string,
+  pagePath: string,
+  pageId?: string | null,
   isSingleLineMode?:boolean,
   isCompactMode?:boolean,
 }
@@ -43,11 +43,13 @@ const PagePathNav: FC<Props> = (props: Props) => {
       {formerLink}
       <span className="d-flex align-items-center">
         <h1 className="m-0">{latterLink}</h1>
-        <div className="mx-2">
-          <CopyDropdown pageId={pageId} pagePath={pagePath} dropdownToggleId={copyDropdownId} dropdownToggleClassName={copyDropdownToggleClassName}>
-            <i className="ti-clipboard"></i>
-          </CopyDropdown>
-        </div>
+        { pageId != null && (
+          <div className="mx-2">
+            <CopyDropdown pageId={pageId} pagePath={pagePath} dropdownToggleId={copyDropdownId} dropdownToggleClassName={copyDropdownToggleClassName}>
+              <i className="ti-clipboard"></i>
+            </CopyDropdown>
+          </div>
+        ) }
       </span>
     </div>
   );

packages/app/src/components/SearchPage/SearchResultContent.tsx

@@ -1,5 +1,5 @@
 import React, {
-  FC, useRef, useState, useEffect,
+  FC, useRef, useState, useEffect, useCallback,
 } from 'react';
 
 import { IPageWithMeta } from '~/interfaces/page';
@@ -8,9 +8,10 @@ import { IPageSearchMeta } from '~/interfaces/search';
 import RevisionLoader from '../Page/RevisionLoader';
 import AppContainer from '../../client/services/AppContainer';
 import { smoothScrollIntoView } from '~/client/util/smooth-scroll';
-import SearchResultContentSubNavigation from './SearchResultContentSubNavigation';
+import { GrowiSubNavigation } from '../Navbar/GrowiSubNavigation';
+import { SubNavButtons } from '../Navbar/SubNavButtons';
 
-const SCROLL_OFFSET_TOP = 150; // approximate height of (navigation + subnavigation)
+const SCROLL_OFFSET_TOP = 175; // approximate height of (navigation + subnavigation)
 
 type Props ={
   appContainer: AppContainer,
@@ -22,31 +23,54 @@ type Props ={
 const SearchResultContent: FC<Props> = (props: Props) => {
   const [isRevisionBodyRendered, setIsRevisionBodyRendered] = useState(false);
   const contentRef = useRef(null);
+
   useEffect(() => {
     // reset state
     if (isRevisionBodyRendered) {
-      const searchResultPageContent = contentRef.current as HTMLElement| null;
-      if (searchResultPageContent == null) return;
+
+      const searchResultPageContent = contentRef.current as HTMLElement | null;
+      if (searchResultPageContent == null) {
+        return setIsRevisionBodyRendered(false);
+      }
       const highlightedWord = searchResultPageContent?.querySelector('.highlighted-keyword') as HTMLElement | null;
-      if (highlightedWord == null) return;
+      if (highlightedWord == null) {
+        return setIsRevisionBodyRendered(false);
+      }
       smoothScrollIntoView(highlightedWord, SCROLL_OFFSET_TOP, searchResultPageContent);
+      setIsRevisionBodyRendered(false);
     }
-    setIsRevisionBodyRendered(false);
 
-  }, [isRevisionBodyRendered, contentRef]);
+  }, [isRevisionBodyRendered, contentRef.current]);
 
   const page = props.focusedSearchResultData?.pageData;
+
+  const growiRenderer = props.appContainer.getRenderer('searchresult');
+
+  const ControlComponents = useCallback(() => {
+    if (page == null) {
+      return <></>;
+    }
+
+    return (
+      <>
+        <div className="h-50 d-flex flex-column align-items-end justify-content-center">
+          <SubNavButtons pageId={page._id} />
+        </div>
+        <div className="h-50 d-flex flex-column align-items-end justify-content-center">
+        </div>
+      </>
+    );
+  }, [page]);
+
   // return if page is null
   if (page == null) return <></>;
-  const growiRenderer = props.appContainer.getRenderer('searchresult');
+
   return (
     <div key={page._id} className="search-result-page grw-page-path-text-muted-container d-flex flex-column">
-      <SearchResultContentSubNavigation
-        pageId={page._id}
-        revisionId={page.revision}
-        path={page.path}
-      >
-      </SearchResultContentSubNavigation>
+      <GrowiSubNavigation
+        page={page}
+        controls={ControlComponents}
+      />
       <div className="search-result-page-content" ref={contentRef}>
         <RevisionLoader
           growiRenderer={growiRenderer}

packages/app/src/components/SearchPage/SearchResultContentSubNavigation.tsx

@@ -1,85 +0,0 @@
-import React, { FC } from 'react';
-
-import { pagePathUtils } from '@growi/core';
-
-import { EditorMode, useEditorMode } from '~/stores/ui';
-
-import PagePathNav from '../PagePathNav';
-import { withUnstatedContainers } from '../UnstatedUtils';
-import AppContainer from '../../client/services/AppContainer';
-import { useSWRTagsInfo } from '../../stores/page';
-import SubNavButtons from '../Navbar/SubNavButtons';
-
-
-type Props = {
-  appContainer:AppContainer
-  pageId: string,
-  revisionId: string,
-  path: string,
-  isSignleLineMode?: boolean,
-  isCompactMode?: boolean,
-}
-
-
-const SearchResultContentSubNavigation: FC<Props> = (props : Props) => {
-  const {
-    appContainer, pageId, revisionId, path, isCompactMode, isSignleLineMode,
-  } = props;
-
-  const { isTrashPage, isDeletablePage } = pagePathUtils;
-
-  const { data: editorMode } = useEditorMode();
-
-  const { data: tagInfoData, error: tagInfoError } = useSWRTagsInfo(pageId);
-
-  if (tagInfoError != null || tagInfoData == null) {
-    return <></>;
-  }
-
-  const isViewMode = editorMode === EditorMode.View;
-
-  const isPageDeletable = isDeletablePage(path);
-  const { isSharedUser } = appContainer;
-  const isAbleToShowPageManagement = !(isTrashPage(path)) && !isSharedUser;
-  return (
-    <div className="shadow-sm search-result-content-nav">
-      <div className={`grw-subnav container-fluid d-flex align-items-start justify-content-between ${isCompactMode ? 'grw-subnav-compact d-print-none' : ''}`}>
-        {/* Left side */}
-        <div className="grw-path-nav-container">
-          <PagePathNav pageId={pageId} pagePath={path} isCompactMode={isCompactMode} isSingleLineMode={isSignleLineMode} />
-        </div>
-        {/* Right side */}
-        {/*
-          DeleteCompletely is currently disabled
-          TODO : Retrive isAbleToDeleteCompleltly state everywhere in the system via swr.
-          story: https://redmine.weseek.co.jp/issues/82222
-        */}
-        <div className="d-flex">
-          <SubNavButtons
-            isCompactMode={isCompactMode}
-            pageId={pageId}
-            revisionId={revisionId}
-            path={path}
-            isViewMode={isViewMode}
-            isDeletable={isPageDeletable}
-            isAbleToDeleteCompletely={false}
-            isAbleToShowPageManagement={isAbleToShowPageManagement}
-          >
-          </SubNavButtons>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-
-/**
- * Wrapper component for using unstated
- */
-const SearchResultContentSubNavigationUnstatedWrapper = withUnstatedContainers(SearchResultContentSubNavigation, [AppContainer]);
-
-// wrapping tsx component returned by withUnstatedContainers to avoid type error when this component used in other tsx components.
-const SearchResultContentSubNavigationWrapper = (props) => {
-  return <SearchResultContentSubNavigationUnstatedWrapper {...props}></SearchResultContentSubNavigationUnstatedWrapper>;
-};
-export default SearchResultContentSubNavigationWrapper;

packages/app/src/components/Sidebar/PageTree/Item.tsx

@@ -16,7 +16,7 @@ import { IPageForPageDeleteModal } from '~/components/PageDeleteModal';
 
 import TriangleIcon from '~/components/Icons/TriangleIcon';
 
-const { isTopPage, isUserPage } = pagePathUtils;
+const { isTopPage, isUserNamePage } = pagePathUtils;
 
 
 interface ItemProps {
@@ -132,7 +132,7 @@ const Item: FC<ItemProps> = (props: ItemProps) => {
 
   const hasDescendants = (page.descendantCount != null && page?.descendantCount > 0);
 
-  const isDeletable = !page.isEmpty && !isTopPage(page.path as string) && !isUserPage(page.path as string);
+  const isDeletable = !page.isEmpty && !isTopPage(page.path as string) && !isUserNamePage(page.path as string);
 
   const [{ isDragging }, drag] = useDrag(() => ({
     type: 'PAGE_TREE',

packages/app/src/stores/context.tsx

@@ -71,10 +71,6 @@ export const useIsAbleToDeleteCompletely = (initialData?: boolean): SWRResponse<
   return useStaticSWR<boolean, Error>('isAbleToDeleteCompletely', initialData, { fallbackData: false });
 };
 
-export const useIsPageExist = (initialData?: boolean): SWRResponse<boolean, Error> => {
-  return useStaticSWR<boolean, Error>('isPageExist', initialData, { fallbackData: false });
-};
-
 export const useIsForbidden = (initialData?: boolean): SWRResponse<boolean, Error> => {
   return useStaticSWR<boolean, Error>('isForbidden', initialData, { fallbackData: false });
 };

packages/app/src/stores/page.tsx

@@ -61,8 +61,10 @@ export const useSWRPageInfo = (pageId: string | null): SWRResponse<IPageInfo, Er
   }));
 };
 
-export const useSWRTagsInfo = (pageId: string): SWRResponse<IPageTagsInfo, Error> => {
-  return useSWR(`/pages.getPageTag?pageId=${pageId}`, endpoint => apiGet(endpoint).then((response: IPageTagsInfo) => {
+export const useSWRTagsInfo = (pageId: string | null | undefined): SWRResponse<IPageTagsInfo, Error> => {
+  const key = pageId == null ? null : `/pages.getPageTag?pageId=${pageId}`;
+
+  return useSWR(key, endpoint => apiGet(endpoint).then((response: IPageTagsInfo) => {
     return {
       tags: response.tags,
     };

packages/app/src/stores/ui.tsx

@@ -11,7 +11,7 @@ import loggerFactory from '~/utils/logger';
 
 import { useStaticSWR } from './use-static-swr';
 import {
-  useCurrentPagePath, useIsEditable, useIsPageExist, useIsTrashPage, useIsUserPage,
+  useCurrentPageId, useCurrentPagePath, useIsEditable, useIsTrashPage, useIsUserPage,
   useIsNotCreatable, useIsSharedUser, useNotFoundTargetPathOrId, useIsForbidden, useIsIdenticalPath,
 } from './context';
 import { IFocusable } from '~/client/interfaces/focusable';
@@ -314,16 +314,16 @@ export const useGlobalSearchFormRef = (initialData?: RefObject<IFocusable>): SWR
 
 export const useIsAbleToShowPageManagement = (): SWRResponse<boolean, Error> => {
   const key = 'isAbleToShowPageManagement';
-  const { data: isPageExist } = useIsPageExist();
+  const { data: currentPageId } = useCurrentPageId();
   const { data: isTrashPage } = useIsTrashPage();
   const { data: isSharedUser } = useIsSharedUser();
 
-  const includesUndefined = [isPageExist, isTrashPage, isSharedUser].some(v => v === undefined);
+  const includesUndefined = [currentPageId, isTrashPage, isSharedUser].some(v => v === undefined);
+  const isPageExist = currentPageId != null;
 
   return useSWRImmutable(
     includesUndefined ? null : key,
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    () => isPageExist! && !isTrashPage && !isSharedUser,
+    () => isPageExist && !isTrashPage && !isSharedUser,
   );
 };
 
@@ -364,14 +364,14 @@ export const useIsAbleToShowPageEditorModeManager = (): SWRResponse<boolean, Err
 
 export const useIsAbleToShowPageAuthors = (): SWRResponse<boolean, Error> => {
   const key = 'isAbleToShowPageAuthors';
-  const { data: isPageExist } = useIsPageExist();
+  const { data: currentPageId } = useCurrentPageId();
   const { data: isUserPage } = useIsUserPage();
 
-  const includesUndefined = [isPageExist, isUserPage].some(v => v === undefined);
+  const includesUndefined = [currentPageId, isUserPage].some(v => v === undefined);
+  const isPageExist = currentPageId != null;
 
   return useSWRImmutable(
     includesUndefined ? null : key,
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    () => isPageExist! && !isUserPage,
+    () => isPageExist && !isUserPage,
   );
 };

packages/core/src/utils/page-path-utils.ts

@@ -36,6 +36,19 @@ export const isUserPage = (path: string): boolean => {
   return false;
 };
 
+/**
+ * Whether path is right under the path '/user'
+ * @param path
+ */
+export const isUserNamePage = (path: string): boolean => {
+  // https://regex101.com/r/GUZntH/1
+  if (path.match(/^\/user\/[^/]+$/)) {
+    return true;
+  }
+
+  return false;
+};
+
 /**
  * Whether path belongs to the shared page
  * @param path