Merge pull request #2682 from weseek/feat/transplant-tabs-to-modal-for-master-merge-history-panel-yan

Feat/transplant tabs to modal for master merge history panel yan

src/client/js/components/PageAccessoriesModal.jsx

@@ -16,6 +16,7 @@ import { withUnstatedContainers } from './UnstatedUtils';
 import PageAccessoriesContainer from '../services/PageAccessoriesContainer';
 import PageAttachment from './PageAttachment';
 import PageList from './PageList';
+import PageHistory from './PageHistory';
 
 const PageAccessoriesModal = (props) => {
   const { t, pageAccessoriesContainer } = props;
@@ -31,44 +32,47 @@ const PageAccessoriesModal = (props) => {
 
   return (
     <React.Fragment>
-      <Modal
-        size="lg"
-        isOpen={props.isOpen}
-        toggle={closeModalHandler}
-        className="grw-page-accessories-modal"
-      >
+      <Modal size="lg" isOpen={props.isOpen} toggle={closeModalHandler} className="grw-page-accessories-modal">
         <ModalBody>
           <Nav className="nav-title border-bottom">
             <NavItem type="button" className={`nav-link ${activeTab === 'pagelist' && 'active active-border'}`}>
               <NavLink
-                onClick={() => { switchActiveTab('pagelist') }}
+                onClick={() => {
+                  switchActiveTab('pagelist');
+                }}
               >
                 <PageListIcon />
-                { t('page_list') }
+                {t('page_list')}
               </NavLink>
             </NavItem>
             <NavItem type="button" className={`nav-link ${activeTab === 'timeline' && 'active active-border'}`}>
               <NavLink
-                onClick={() => { switchActiveTab('timeline') }}
+                onClick={() => {
+                  switchActiveTab('timeline');
+                }}
               >
                 <TimeLineIcon />
-                { t('Timeline View') }
+                {t('Timeline View')}
               </NavLink>
             </NavItem>
-            <NavItem type="button" className={`nav-link ${activeTab === 'recent-changes' && 'active active-border'}`}>
+            <NavItem type="button" className={`nav-link ${activeTab === 'page-history' && 'active active-border'}`}>
               <NavLink
-                onClick={() => { switchActiveTab('recent-changes') }}
+                onClick={() => {
+                  switchActiveTab('page-history');
+                }}
               >
                 <RecentChangesIcon />
-                { t('History') }
+                {t('History')}
               </NavLink>
             </NavItem>
             <NavItem type="button" className={`nav-link ${activeTab === 'attachment' && 'active active-border'}`}>
               <NavLink
-                onClick={() => { switchActiveTab('attachment') }}
+                onClick={() => {
+                  switchActiveTab('attachment');
+                }}
               >
                 <AttachmentIcon />
-                { t('attachment_data') }
+                {t('attachment_data')}
               </NavLink>
             </NavItem>
           </Nav>
@@ -77,9 +81,13 @@ const PageAccessoriesModal = (props) => {
               {pageAccessoriesContainer.state.activeComponents.has('pagelist') && <PageList />}
             </TabPane>
             <TabPane tabId="timeline"></TabPane>
-            <TabPane tabId="recent-changes"></TabPane>
+            <TabPane tabId="page-history">
+              <div className="overflow-auto">
+                {pageAccessoriesContainer.state.activeComponents.has('page-history') && <PageHistory /> }
+              </div>
+            </TabPane>
             <TabPane tabId="attachment" className="p-4">
-              {pageAccessoriesContainer.state.activeComponents.has('attachment') && <PageAttachment /> }
+              {pageAccessoriesContainer.state.activeComponents.has('attachment') && <PageAttachment />}
             </TabPane>
           </TabContent>
         </ModalBody>
@@ -88,13 +96,11 @@ const PageAccessoriesModal = (props) => {
   );
 };
 
-
 /**
  * Wrapper component for using unstated
  */
 const PageAccessoriesModalWrapper = withUnstatedContainers(PageAccessoriesModal, [PageAccessoriesContainer]);
 
-
 PageAccessoriesModal.propTypes = {
   t: PropTypes.func.isRequired, //  i18next
   // pageContainer: PropTypes.instanceOf(PageContainer).isRequired,

src/client/js/components/TopOfTableContents.jsx

@@ -39,7 +39,7 @@ const TopOfTableContents = (props) => {
           <TimeLineIcon />
         </button>
 
-        <button type="button" className="bg-transparent border-0" onClick={() => pageAccessoriesContainer.openPageAccessoriesModal('recent-changes')}>
+        <button type="button" className="bg-transparent border-0" onClick={() => pageAccessoriesContainer.openPageAccessoriesModal('page-history')}>
           <RecentChangesIcon />
         </button>