use page management with reference to delete modal

src/client/js/components/Page/PageManagement.jsx

@@ -7,12 +7,13 @@ import { createSubscribedElement } from '../UnstatedUtils';
 import AppContainer from '../../services/AppContainer';
 import PageContainer from '../../services/PageContainer';
 import PageDeleteModal from '../PageDeleteModal';
+import RenameModal from '../RenameModal';
 
 
 const PageManagement = (props) => {
   const { t, appContainer, pageContainer } = props;
   const { path, isDeletable, isAbleToDeleteCompletely } = pageContainer.state;
-  const { currentUser } = appContainer;
+  const { currentUser, openRenameModal, closeRenameModal } = appContainer;
   const isTopPagePath = isTopPage(path);
 
   const [isPageDeleteModalShown, setIsPageDeleteModalShown] = useState(false);
@@ -31,6 +32,11 @@ const PageManagement = (props) => {
         <a className="dropdown-item" href="#" onClick={appContainer.openRenameModal}>
           <i className="icon-fw icon-action-redo"></i> { t('Move/Rename') }
         </a>
+        <RenameModal
+          isOpen={openRenameModal}
+          onClose={closeRenameModal}
+          path={path}
+        />
         <a className="dropdown-item" type="button" onClick={pageContainer.openPageDuplicateModal}>
           <i className="icon-fw icon-docs"></i> { t('Duplicate') }
         </a>

src/client/js/components/RenameModal.jsx

@@ -88,7 +88,7 @@ const RenameModal = (props) => {
           />
           <label className="custom-control-label" htmlFor="cbRenameRecursively">
             { t('modal_rename.label.Recursively') }
-            <p className="form-text text-muted mt-0"><code>{path}</code>{ t('modal_rename.help.recursive') }</p>
+            <p className="form-text text-muted mt-0">{ t('modal_rename.help.recursive') }</p>
           </label>
         </div>
 
@@ -103,7 +103,7 @@ const RenameModal = (props) => {
           />
           <label className="custom-control-label" htmlFor="cbRenameRedirect">
             { t('modal_rename.label.Redirect') }
-            <p className="form-text text-muted mt-0"><code>{path}</code>{ t('modal_rename.help.redirect') }</p>
+            <p className="form-text text-muted mt-0">{ t('modal_rename.help.redirect') }</p>
           </label>
         </div>
 

src/client/js/services/AppContainer.js

@@ -38,7 +38,6 @@ export default class AppContainer extends Container {
       isDrawerOpened: false,
 
       isPageCreateModalShown: false,
-      isRenameModalShown: false,
 
       recentlyUpdatedPages: [],
     };

src/client/js/services/PageContainer.js

@@ -65,6 +65,8 @@ export default class PageContainer extends Container {
 
       isPageDuplicateModalShown: false,
       isCreateTemplatePageModalShown: false,
+      isRenameModalShown: false,
+
       isRenameRecursively: true,
       isRenameRedirect: false,
       isRenameMetadata: false,

src/server/views/layout/layout.html

@@ -151,7 +151,6 @@
 <div id="staff-credit"></div>
 
 <div id="page-create-modal"></div>
-<div id="rename-modal"></div>
 {% include '../modal/shortcuts.html' %}
 
 {% block body_end %}