fix/create new component that validate url has compare param

packages/app/src/client/app.jsx

@@ -51,8 +51,6 @@ import TagPage from '../components/TagPage';
 import TrashPageList from '../components/TrashPageList';
 
 import { appContainer, componentMappings } from './base';
-import { toastError } from './util/apiNotification';
-
 
 const logger = loggerFactory('growi:cli:app');
 
@@ -136,12 +134,6 @@ if (pageContainer.state.pageId != null) {
 
     'recent-created-icon': <RecentlyCreatedIcon />,
   });
-
-  // show the Page accessory modal when query of "compare" is requested
-  if (revisionComparerContainer.getRevisionIDsToCompareAsParam().length > 0) {
-    toastError('Sorry, opening PageAccessoriesModal is not implemented yet in v5.');
-  //   pageAccessoriesContainer.openPageAccessoriesModal('pageHistory');
-  }
 }
 if (pageContainer.state.creator != null) {
   Object.assign(componentMappings, {

packages/app/src/client/base.jsx

@@ -18,6 +18,8 @@ import PageDuplicateModal from '../components/PageDuplicateModal';
 import PagePresentationModal from '../components/PagePresentationModal';
 import PageRenameModal from '../components/PageRenameModal';
 
+import ShowPageAccessories from './services/ShowPageAccessories';
+
 const logger = loggerFactory('growi:cli:app');
 
 if (!window) {
@@ -58,6 +60,7 @@ const componentMappings = {
 
   'grw-hotkeys-manager': <HotkeysManager />,
 
+  'show-page-accessories': <ShowPageAccessories />,
 };
 
 export { appContainer, componentMappings };

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

@@ -0,0 +1,28 @@
+import React, { useEffect } from 'react';
+
+import { usePageAccessoriesModal, PageAccessoriesModalContents } from '~/stores/modal';
+
+function hasURLQueryParamValue(key) {
+// window.location.href is page URL;
+  const queryStr = new URL(window.location.href).searchParams;
+  if (queryStr === null) {
+    return '';
+  }
+  if (queryStr.get(key) === null) {
+    return '';
+  }
+  return queryStr.get(key);
+}
+
+const ShowPageAccessoriesModal = (): JSX.Element => {
+  const { open: openPageAccessories } = usePageAccessoriesModal();
+  useEffect(() => {
+    if (hasURLQueryParamValue('compare')!.split('...').length > 1) {
+      openPageAccessories(PageAccessoriesModalContents.PageHistory);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return <></>;
+};
+
+export default ShowPageAccessoriesModal;

packages/app/src/components/PageAccessoriesModal.tsx

@@ -1,25 +1,25 @@
 import React, { useEffect, useMemo, useState } from 'react';
 
+import { useTranslation } from 'react-i18next';
 import {
   Modal, ModalBody, ModalHeader,
 } from 'reactstrap';
 
-import { useTranslation } from 'react-i18next';
 
+import AppContainer from '~/client/services/AppContainer';
 import { useIsGuestUser, useIsSharedUser } from '~/stores/context';
 import { usePageAccessoriesModal, PageAccessoriesModalContents } from '~/stores/modal';
-import AppContainer from '~/client/services/AppContainer';
 
-import HistoryIcon from './Icons/HistoryIcon';
+import { CustomNavTab } from './CustomNavigation/CustomNav';
+import CustomTabContent from './CustomNavigation/CustomTabContent';
+import ExpandOrContractButton from './ExpandOrContractButton';
 import AttachmentIcon from './Icons/AttachmentIcon';
+import HistoryIcon from './Icons/HistoryIcon';
 import ShareLinkIcon from './Icons/ShareLinkIcon';
-import { withUnstatedContainers } from './UnstatedUtils';
 import PageAttachment from './PageAttachment';
 import PageHistory from './PageHistory';
 import ShareLink from './ShareLink/ShareLink';
-import { CustomNavTab } from './CustomNavigation/CustomNav';
-import ExpandOrContractButton from './ExpandOrContractButton';
-import CustomTabContent from './CustomNavigation/CustomTabContent';
+import { withUnstatedContainers } from './UnstatedUtils';
 
 
 type Props = {
@@ -42,7 +42,9 @@ const PageAccessoriesModal = (props: Props): JSX.Element => {
   const { data: isSharedUser } = useIsSharedUser();
   const { data: isGuestUser } = useIsGuestUser();
 
-  const { data: status, mutate, close } = usePageAccessoriesModal();
+  const {
+    data: status, mutate, close,
+  } = usePageAccessoriesModal();
 
   // add event handler when opened
   useEffect(() => {

packages/app/src/server/views/layout/layout.html

@@ -113,6 +113,7 @@
 <div id="page-accessories-modal"></div>
 <div id="descendants-page-list-modal"></div>
 <div id="page-put-back-modal"></div>
+<div id="show-page-accessories"></div>
 
 {% include '../modal/shortcuts.html' %}