plan

src/client/js/app.js

@@ -46,6 +46,7 @@ import CustomHeaderEditor from './components/Admin/CustomHeaderEditor';
 import AdminRebuildSearch from './components/Admin/AdminRebuildSearch';
 import GroupDeleteModal from './components/GroupDeleteModal/GroupDeleteModal';
 
+import UserGroupPage from './components/Admin/UserGroup/UserGroupPage';
 
 const logger = loggerFactory('growi:app');
 
@@ -603,6 +604,20 @@ if (adminGrantSelectorElem != null) {
   );
 }
 
+const adminUserGroupPageElem = document.getElementById('admin-user-group-page');
+if (adminUserGroupPageElem != null) {
+  // get props
+
+  ReactDOM.render(
+    <I18nextProvider i18n={i18n}>
+      <UserGroupPage
+        crowi={crowi}
+      />
+    </I18nextProvider>,
+    adminUserGroupPageElem,
+  );
+}
+
 // notification from websocket
 function updatePageStatusAlert(page, user) {
   const pageStatusAlert = componentInstances.pageStatusAlert;

src/client/js/components/Admin/UserGroup/UserGroupPage.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+class UserGroupPage extends React.Component {
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+    };
+  }
+
+  render() {
+    return (
+      'asdf'
+    );
+  }
+
+}
+
+UserGroupPage.propTypes = {
+  crowi: PropTypes.object.isRequired,
+};
+
+export default UserGroupPage;

src/server/views/admin/user-groups.html

@@ -12,6 +12,9 @@
 
 {% block content_main %}
 <div class="content-main">
+
+  <!-- user toastr start -->
+
   {% set smessage = req.flash('successMessage') %}
   {% if smessage.length %}
   <div class="alert alert-success">
@@ -26,12 +29,19 @@
   </div>
   {% endif %}
 
+  <!-- user toastr end -->
+
   <div class="row">
     <div class="col-md-3">
       {% include './widget/menu.html' with {current: 'user-group'} %}
     </div>
 
-    <div class="col-md-9">
+    <div id ="admin-user-group-page" class="col-md-9">
+
+      <!-- to react start -->
+
+      <!-- to UserGruopCreateForm start -->
+
       <p>
         {% if isAclEnabled %}
           <button  data-toggle="collapse" class="btn btn-default" href="#createGroupForm">{{ t('user_group_management.create_group') }}</button>
@@ -50,6 +60,8 @@
         <input type="hidden" name="_csrf" value="{{ csrf() }}">
       </form>
 
+      <!-- to UserGruopCreateForm end -->
+
       {% set createdUserGroup = req.flash('createdUserGroup') %}
       {% if createdUserGroup.length %}
       <div class="modal fade in" id="createdGroupModal">
@@ -74,8 +86,14 @@
       </div><!-- /.modal -->
       {% endif %}
 
+      <!-- import in react start -->
+
       <div class="modal fade" id="admin-delete-user-group-modal"></div>
 
+      <!-- import in react end -->
+
+      <!-- to UserGroupTable start -->
+
       <h2>{{ t('user_group_management.group_list') }}</h2>
 
       <table class="table table-bordered table-user-list">
@@ -136,8 +154,16 @@
         </tbody>
       </table>
 
+      <!-- to UserGroupTable end -->
+
+      <!-- to Paginator start -->
+
       {% include '../widget/pager.html' with {path: "/admin/user-groups", pager: pager} %}
 
+      <!-- to Paginator end -->
+
+      <!-- to react end -->
+
     </div>
   </div>
 </div>