fix/define query string format outside of the component and rename file name

packages/app/src/client/base.jsx

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

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

@@ -2,18 +2,20 @@ import React, { useEffect } from 'react';
 
 import { usePageAccessoriesModal, PageAccessoriesModalContents } from '~/stores/modal';
 
-function getURLQueryParamValue(key: string): string | null {
+function getURLQueryParamValue(key: string) {
 // window.location.href is page URL;
   const queryStr: URLSearchParams = new URL(window.location.href).searchParams;
   return queryStr.get(key);
 }
 
+const queryCompareFormat = new RegExp(/([a-z0-9]){24}...([a-z0-9]){24}/);
+
 const ShowPageAccessoriesModal = (): JSX.Element => {
   const { open: openPageAccessories } = usePageAccessoriesModal();
   useEffect(() => {
     const pageIdParams = getURLQueryParamValue('compare');
     if (pageIdParams != null) {
-      if (/([a-z0-9]){24}...([a-z0-9]){24}/.test(pageIdParams)) {
+      if (queryCompareFormat.test(pageIdParams)) {
         openPageAccessories(PageAccessoriesModalContents.PageHistory);
       }
     }

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

@@ -113,7 +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>
+<div id="show-page-accessories-modal"></div>
 
 {% include '../modal/shortcuts.html' %}