WIP: refactor RevisionPath -> RevisionPathControls

src/client/js/app.jsx

@@ -21,7 +21,7 @@ import PageTimeline from './components/PageTimeline';
 import CommentEditorLazyRenderer from './components/PageComment/CommentEditorLazyRenderer';
 import PageAttachment from './components/PageAttachment';
 import PageStatusAlert from './components/PageStatusAlert';
-import RevisionPath from './components/Page/RevisionPath';
+import RevisionPathControls from './components/Page/RevisionPathControls';
 import TagLabels from './components/Page/TagLabels';
 import PagePathAutoComplete from './components/PagePathAutoComplete';
 import RecentCreated from './components/RecentCreated/RecentCreated';
@@ -101,7 +101,7 @@ if (pageContainer.state.path != null) {
   Object.assign(componentMappings, {
     // eslint-disable-next-line quote-props
     'page': <Page />,
-    'revision-path': <RevisionPath pageId={pageContainer.state.pageId} pagePath={pageContainer.state.path} />,
+    'revision-path-controls': <RevisionPathControls pageId={pageContainer.state.pageId} pagePath={pageContainer.state.path} />,
     'tag-label': <TagLabels />,
     'grw-subnav': <GrowiSubNavigation />,
     'grw-subnav-for-user-page': <GrowiSubNavigationForUserPage />,

src/client/js/components/Navbar/GrowiSubNavigation.jsx

@@ -12,7 +12,7 @@ import PagePathHierarchicalLink from '@commons/components/PagePathHierarchicalLi
 import { createSubscribedElement } from '../UnstatedUtils';
 import AppContainer from '../../services/AppContainer';
 
-import RevisionPath from '../Page/RevisionPath';
+import RevisionPathControls from '../Page/RevisionPathControls';
 import PageContainer from '../../services/PageContainer';
 import TagLabels from '../Page/TagLabels';
 import LikeButton from '../LikeButton';
@@ -44,13 +44,15 @@ const GrowiSubNavigation = (props) => {
     return (
       <div className="px-3 py-3 grw-subnavbar">
         { renderFormerLink() }
-        <h1 className="m-0">
-          <RevisionPath
+        <span className="d-flex align-items-center flex-wrap">
+          <h1 className="m-0">
+          </h1>
+          <RevisionPathControls
             pageId={pageId}
             pagePath={pageContainer.state.path}
             isPageForbidden={isPageForbidden}
           />
-        </h1>
+        </span>
       </div>
     );
   }
@@ -73,9 +75,11 @@ const GrowiSubNavigation = (props) => {
       {/* Page Path */}
       <div>
         { renderFormerLink() }
-        <h1 className="m-0">
-          <RevisionPath pageId={pageId} pagePath={pageContainer.state.path} />
-        </h1>
+        <span className="d-flex align-items-center flex-wrap">
+          <h1 className="m-0">
+          </h1>
+          <RevisionPathControls pageId={pageId} pagePath={pageContainer.state.path} />
+        </span>
         { !isPageNotFound && !isPageForbidden && (
           <TagLabels />
         ) }

src/client/js/components/Navbar/GrowiSubNavigationForUserPage.jsx

@@ -5,8 +5,9 @@ import { withTranslation } from 'react-i18next';
 
 import { createSubscribedElement } from '../UnstatedUtils';
 import AppContainer from '../../services/AppContainer';
-import RevisionPath from '../Page/RevisionPath';
 import PageContainer from '../../services/PageContainer';
+
+import RevisionPathControls from '../Page/RevisionPathControls';
 import BookmarkButton from '../BookmarkButton';
 import UserPicture from '../User/UserPicture';
 
@@ -33,7 +34,7 @@ const GrowiSubNavigationForUserPage = (props) => {
   return (
     <div className={`px-3 ${additionalClassNames.join(' ')}`}>
       <h4 className="grw-user-page-path">
-        <RevisionPath pageId={pageId} pagePath={pageContainer.state.path} />
+        <RevisionPathControls pageId={pageId} pagePath={pageContainer.state.path} />
       </h4>
 
       <div className="d-flex align-items-center justify-content-between">

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

@@ -1,55 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import { withTranslation } from 'react-i18next';
-
-import { isTrashPage } from '@commons/util/path-utils';
-import DevidedPagePath from '@commons/models/devided-page-path';
-import LinkedPagePath from '@commons/models/linked-page-path';
-import PagePathHierarchicalLink from '@commons/components/PagePathHierarchicalLink';
-
-import CopyDropdown from './CopyDropdown';
-
-const RevisionPath = (props) => {
-  // define styles
-  const buttonStyle = {
-    marginLeft: '0.5em',
-    padding: '0 2px',
-  };
-
-  const {
-    pagePath, pageId, isPageForbidden,
-  } = props;
-
-  const dPagePath = new DevidedPagePath(pagePath, false, true);
-  const linkedPagePathLatter = new LinkedPagePath(dPagePath.latter);
-  const isInTrash = isTrashPage(pagePath);
-
-  return (
-    <>
-      <span className="d-flex align-items-center flex-wrap">
-        <PagePathHierarchicalLink linkedPagePath={linkedPagePathLatter} basePath={dPagePath.isRoot ? undefined : dPagePath.former} />
-        <CopyDropdown pagePath={props.pagePath} pageId={pageId} buttonStyle={buttonStyle} />
-        { !isInTrash && !isPageForbidden && (
-          <a href="#edit" className="d-block d-edit-none text-muted btn btn-secondary bg-transparent btn-edit border-0" style={buttonStyle}>
-            <i className="icon-note" />
-          </a>
-        ) }
-      </span>
-    </>
-  );
-};
-
-RevisionPath.propTypes = {
-  t: PropTypes.func.isRequired, // i18next
-
-  pagePath: PropTypes.string.isRequired,
-  pageId: PropTypes.string,
-  isPageForbidden: PropTypes.bool,
-};
-
-RevisionPath.defaultProps = {
-  isPageForbidden: false,
-};
-
-export default withTranslation()(RevisionPath);

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

@@ -0,0 +1,55 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { withTranslation } from 'react-i18next';
+
+import { isTrashPage } from '@commons/util/path-utils';
+
+// import DevidedPagePath from '@commons/models/devided-page-path';
+// import LinkedPagePath from '@commons/models/linked-page-path';
+// import PagePathHierarchicalLink from '@commons/components/PagePathHierarchicalLink';
+
+import CopyDropdown from './CopyDropdown';
+
+const RevisionPathControls = (props) => {
+  // define styles
+  const buttonStyle = {
+    marginLeft: '0.5em',
+    padding: '0 2px',
+  };
+
+  const {
+    pagePath, pageId, isPageForbidden,
+  } = props;
+
+  const isPageInTrash = isTrashPage(pagePath);
+
+  // const dPagePath = new DevidedPagePath(props.pagePath, false, true);
+  // const linkedPagePathLatter = new LinkedPagePath(dPagePath.latter);
+
+  return (
+    <>
+      {/* <PagePathHierarchicalLink linkedPagePath={linkedPagePathLatter} basePath={dPagePath.isRoot ? undefined : dPagePath.former} /> */}
+      <CopyDropdown pagePath={pagePath} pageId={pageId} buttonStyle={buttonStyle} />
+      { !isPageInTrash && !isPageForbidden && (
+        <a href="#edit" className="d-edit-none text-muted btn btn-secondary bg-transparent btn-edit border-0" style={buttonStyle}>
+          <i className="icon-note" />
+        </a>
+      ) }
+    </>
+  );
+};
+
+RevisionPathControls.propTypes = {
+  t: PropTypes.func.isRequired, // i18next
+
+  pagePath: PropTypes.string.isRequired,
+  pageId: PropTypes.string,
+  isPageForbidden: PropTypes.bool,
+};
+
+RevisionPathControls.defaultProps = {
+  isPageForbidden: false,
+};
+
+export default withTranslation()(RevisionPathControls);

src/server/views/widget/page_tabs.html

@@ -39,6 +39,7 @@
 
     <div class="grw-revision-path-for-edit d-none ml-2">
       <h4 id="revision-path" class="mb-0"></h4>
+      <div id="revision-path-controls"></div>
       <div id="tag-label"></div>
     </div>
   {% endif %}