success opening modal finally

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

@@ -128,7 +128,7 @@ const PageManagement = (props) => {
         </button>
         {(!isTopPagePath && isDeletable) && renderDropdownItemForDeletablePage()}
       </div>
-      {/* {renderModals()} */}
+      {renderModals()}
     </>
   );
 };

src/client/js/components/PageAccessoriesModal.jsx

@@ -7,19 +7,20 @@ import { Modal, ModalHeader, ModalBody } from 'reactstrap';
 import { withTranslation } from 'react-i18next';
 
 import { withUnstatedContainers } from './UnstatedUtils';
+import PageContainer from '../services/PageContainer';
 
 const PageAccessoriesModal = (props) => {
-  // const { pageContainer } = props;
+  const { t } = props;
 
   return (
     <Modal
       size="lg"
-      // isOpen={.isOpen}
-      // toggle={.onClose}
+      isOpen={props.isOpen}
+      toggle={props.onClose}
       className="grw-create-page"
     >
       <ModalHeader tag="h4" className="bg-primary text-light">
-        TopOfTableContentsModal
+        { t('TopOfTableContentsModal') }
       </ModalHeader>
       <ModalBody>
       </ModalBody>
@@ -32,13 +33,14 @@ const PageAccessoriesModal = (props) => {
 /**
  * Wrapper component for using unstated
  */
-const PageAccessoriesModalWrapper = withUnstatedContainers(PageAccessoriesModal, []);
+const PageAccessoriesModalWrapper = withUnstatedContainers(PageAccessoriesModal, [PageContainer]);
 
 
 PageAccessoriesModal.propTypes = {
   t: PropTypes.func.isRequired, //  i18next
-  // appContainer: PropTypes.instanceOf(AppContainer).isRequired,
-  topOfTableContents: PropTypes.instanceOf().isRequired,
+  pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
+  isOpen: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
 };
 
 export default withTranslation()(PageAccessoriesModalWrapper);

src/client/js/components/TopOfTableContents.jsx

@@ -45,15 +45,15 @@ const TopOfTableContents = (props) => {
         </button>
 
         <button type="button" className="bg-transparent border-0">
-          <TimeLine /* onClick=penTopOfTableContentsModal */ />
+          <TimeLine onClick={renderModal} />
         </button>
 
         <button type="button" className="bg-transparent border-0">
-          <RecentChanges /* onClick=this.openTopOfTableContentsModal */ />
+          <RecentChanges />
         </button>
 
         <button type="button" className="bg-transparent border-0">
-          <Attachment /* onClick=this.openTopOfTableContentsModal */ />
+          <Attachment />
         </button>
         {/* [TODO: setting Footprints' icon by GW-3308] */}
         <div