Merge branch 'master' into feat/handsontable-data-import

# Conflicts:
#	src/client/js/components/PageEditor/HandsontableModal.jsx
#	src/client/styles/scss/_handsontable.scss

CHANGES.md

@@ -1,12 +1,21 @@
 CHANGES
 ========
 
-## 3.2.5-RC
+## 3.2.6-RC
 
+* Feature: Import CSV/TSV/HTML table on Spreadsheet like GUI (Handsontable)
+* Feature: Add select alignment buttons of Spreadsheet like GUI (Handsontable)
+
+## 3.2.5
+
+* Improvement: Expandable Spreadsheet like GUI (Handsontable)
+* Improvement: Move/Resize rows/columns of Spreadsheet like GUI (Handsontable)
 * Improvement: Prevent XSS of New Page modal
 * Fix: Recent Created tab of user home shows wrong page list
     * Introduced by 3.2.4
 * Support: Upgrade libs
+    * @handsontable/react
+    * handsontable
     * metismenu
     * sinon
 

README.md

@@ -79,7 +79,7 @@ On-premise
 ### Dependencies
 
 - node 8.x (DON'T USE 9.x)
-- npm 5.x
+- npm 6.x
 - yarn
 - MongoDB 3.x
 

config/env.dev.js

@@ -9,4 +9,5 @@ module.exports = {
     // 'growi-plugin-pukiwiki-like-linker',
   ],
   // DEV_HTTPS: true,
+  // PUBLIC_WIKI_ONLY: true,
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "growi",
-  "version": "3.2.5-RC",
+  "version": "3.2.6-RC",
   "description": "Team collaboration software using markdown",
   "tags": [
     "wiki",
@@ -123,7 +123,7 @@
   },
   "devDependencies": {
     "@alienfast/i18next-loader": "^1.0.16",
-    "@handsontable/react": "^1.1.0",
+    "@handsontable/react": "^2.0.0",
     "autoprefixer": "^9.0.0",
     "babel-core": "^6.25.0",
     "babel-loader": "^7.1.1",
@@ -152,7 +152,7 @@
     "eslint-plugin-react": "^7.7.0",
     "extract-text-webpack-plugin": "^4.0.0-beta.0",
     "file-loader": "^2.0.0",
-    "handsontable": "^5.0.1",
+    "handsontable": "^6.0.1",
     "i18next-browser-languagedetector": "^2.2.0",
     "imports-loader": "^0.8.0",
     "jquery-slimscroll": "^1.3.8",
@@ -218,7 +218,7 @@
   },
   "engines": {
     "node": ">=8.11.1 <9",
-    "npm": ">=5.6.0 <6",
+    "npm": ">=5.6.0 <7",
     "yarn": "^1.5.1"
   },
   "config": {

resource/locales/en-US/translation.json

@@ -298,6 +298,7 @@
 		"Selecting authentication mechanism": "Selecting authentication mechanism",
 		"common_authentication": "If you set the basic authentication, common authentication is applied on the whole page.",
 		"without_encryption": "Please be noted that your ID and Password will be sent wihtout encryption.",
+		"basic_acl_disable": "Because of Public Wiki  setting, basic authentication can not be used.",
 		"users_without_account": "Users without account is not accessible",
     "example": "Example",
     "restrict_emails": "You can restrict registerable e-mail address.",

resource/locales/ja/translation.json

@@ -317,6 +317,7 @@
     "Selecting authentication mechanism": "認証機構選択",
     "common_authentication": "Basic認証を設定すると、ページ全体に共通の認証がかかります。",
     "without_encryption": "IDとパスワードは暗号化されずに送信されるのでご注意下さい。",
+    "basic_acl_disable": "Public Wiki の設定のため、Basic認証は利用できません。",
     "users_without_account": "アカウントを持たないユーザーはアクセス不可",
     "example": "例",
     "restrict_emails": "登録可能なメールアドレスを制限することができます。",

src/client/js/components/PageEditor/HandsontableModal.jsx

@@ -4,6 +4,8 @@ import PropTypes from 'prop-types';
 import Modal from 'react-bootstrap/es/Modal';
 import Button from 'react-bootstrap/es/Button';
 import ButtonGroup from 'react-bootstrap/es/ButtonGroup';
+
+import { debounce } from 'throttle-debounce';
 import Collapse from 'react-bootstrap/es/Collapse';
 import FormGroup from 'react-bootstrap/es/FormGroup';
 import ControlLabel from 'react-bootstrap/es/ControlLabel';
@@ -15,15 +17,21 @@ import { HotTable } from '@handsontable/react';
 import MarkdownTable from '../../models/MarkdownTable';
 import HandsontableUtil from './HandsontableUtil';
 
+const DEFAULT_HOT_HEIGHT = 300;
+
 export default class HandsontableModal extends React.Component {
+
+
   constructor(props) {
     super(props);
 
     this.state = {
       show: false,
       isDataImportAreaExpanded: false,
+      isWindowExpanded: false,
       markdownTableOnInit: HandsontableModal.getDefaultMarkdownTable(),
       markdownTable: HandsontableModal.getDefaultMarkdownTable(),
+      handsontableHeight: DEFAULT_HOT_HEIGHT,
       handsontableSetting: HandsontableModal.getDefaultHandsontableSetting()
     };
 
@@ -32,6 +40,11 @@ export default class HandsontableModal extends React.Component {
     this.cancel = this.cancel.bind(this);
     this.save = this.save.bind(this);
     this.toggleDataImportArea = this.toggleDataImportArea.bind(this);
+    this.expandWindow = this.expandWindow.bind(this);
+    this.contractWindow = this.contractWindow.bind(this);
+
+    // create debounced method for expanding HotTable
+    this.expandHotTableHeightWithDebounce = debounce(100, this.expandHotTableHeight);
   }
 
   init(markdownTable) {
@@ -101,13 +114,54 @@ export default class HandsontableModal extends React.Component {
     this.setState({ isDataImportAreaExpanded: !this.state.isDataImportAreaExpanded });
   }
 
+  expandWindow() {
+    this.setState({ isWindowExpanded: true });
+
+    // invoke updateHotTableHeight method with delay
+    // cz. Resizing this.refs.hotTableContainer is completeted after a little delay after 'isWindowExpanded' set with 'true'
+    this.expandHotTableHeightWithDebounce();
+  }
+
+  contractWindow() {
+    this.setState({ isWindowExpanded: false, handsontableHeight: DEFAULT_HOT_HEIGHT });
+  }
+
+  /**
+   * Expand the height of the Handsontable
+   *  by updating 'handsontableHeight' state
+   *  according to the height of this.refs.hotTableContainer
+   */
+  expandHotTableHeight() {
+    if (this.state.isWindowExpanded && this.refs.hotTableContainer != null) {
+      const height = this.refs.hotTableContainer.getBoundingClientRect().height;
+      this.setState({ handsontableHeight: height });
+    }
+  }
+
+  renderExpandOrContractButton() {
+    const iconClassName = this.state.isWindowExpanded ? 'icon-size-actual' : 'icon-size-fullscreen';
+    return (
+      <button className="close mr-3" onClick={this.state.isWindowExpanded ? this.contractWindow : this.expandWindow}>
+        <i className={iconClassName} style={{ fontSize: '0.8em' }} aria-hidden="true"></i>
+      </button>
+    );
+  }
+
   render() {
+    const dialogClassNames = ['handsontable-modal'];
+    if (this.state.isWindowExpanded) {
+      dialogClassNames.push('handsontable-modal-expanded');
+    }
+
+    const dialogClassName = dialogClassNames.join(' ');
+
     return (
-      <Modal show={this.state.show} onHide={this.cancel} bsSize="large" dialogClassName="handsontable-modal">
+      <Modal show={this.state.show} onHide={this.cancel} bsSize="large" dialogClassName={dialogClassName}>
         <Modal.Header closeButton>
+          { this.renderExpandOrContractButton() }
           <Modal.Title>Edit Table</Modal.Title>
         </Modal.Header>
-        <Modal.Body className="p-0">
+        <Modal.Body className="p-0 d-flex flex-column">
           <div className="px-4 py-3 modal-navbar">
             <Button className="m-r-20 data-import-button" onClick={this.toggleDataImportArea}>
               Data Import<i className={this.state.isDataImportAreaExpanded ? 'fa fa-angle-up' : 'fa fa-angle-down' }></i>
@@ -140,8 +194,8 @@ export default class HandsontableModal extends React.Component {
               </div>
             </Collapse>
           </div>
-          <div className="p-4">
-            <HotTable ref='hotTable' data={this.state.markdownTable.table} settings={this.state.handsontableSetting} />
+          <div ref="hotTableContainer" className="m-4 hot-table-container">
+            <HotTable ref='hotTable' data={this.state.markdownTable.table} settings={this.state.handsontableSetting} height={this.state.handsontableHeight} />
           </div>
         </Modal.Body>
         <Modal.Footer>
@@ -172,9 +226,19 @@ export default class HandsontableModal extends React.Component {
 
   static getDefaultHandsontableSetting() {
     return {
-      height: 300,
       rowHeaders: true,
       colHeaders: true,
+      manualRowMove: true,
+      manualRowResize: true,
+      manualColumnMove: true,
+      manualColumnResize: true,
+      selectionMode: 'multiple',
+      outsideClickDeselects: false,
+
+      modifyColWidth: function(width) {
+        return Math.max(80, Math.min(400, width));
+      },
+
       contextMenu: {
         items: {
           'row_above': {}, 'row_below': {}, 'col_left': {}, 'col_right': {},
@@ -205,16 +269,6 @@ export default class HandsontableModal extends React.Component {
             }
           }
         }
-      },
-      selectionMode: 'multiple',
-      outsideClickDeselects: false,
-      modifyColWidth: function(width) {
-        if (width < 100) {
-          return 100;
-        }
-        if (width > 300) {
-          return 300;
-        }
       }
     };
   }

src/client/js/components/SavePageControls.jsx

@@ -42,6 +42,8 @@ class SavePageControls extends React.PureComponent {
   render() {
     const { t } = this.props;
 
+    const config = this.props.crowi.getConfig();
+    const isAclEnabled = config.isAclEnabled;
     const label = this.state.pageId == null ? t('Create') : t('Update');
 
     return (
@@ -56,17 +58,20 @@ class SavePageControls extends React.PureComponent {
               slackChannels={this.props.slackChannels} />
         </div>
 
-        <div className="mr-2">
-          <GrantSelector crowi={this.props.crowi}
-              ref={(elem) => {
-                if (this.refs.grantSelector == null) {
-                  this.refs.grantSelector = elem.getWrappedInstance();
-                }
-              }}
-              grant={this.props.grant}
-              grantGroupId={this.props.grantGroupId}
-              grantGroupName={this.props.grantGroupName} />
-        </div>
+
+        {isAclEnabled &&
+          <div className="mr-2">
+            <GrantSelector crowi={this.props.crowi}
+                ref={(elem) => {
+                  if (this.refs.grantSelector == null) {
+                    this.refs.grantSelector = elem.getWrappedInstance();
+                  }
+                }}
+                grant={this.props.grant}
+                grantGroupId={this.props.grantGroupId}
+                grantGroupName={this.props.grantGroupName} />
+          </div>
+        }
 
         <button className="btn btn-primary btn-submit" onClick={this.submit}>{label}</button>
       </div>

src/client/styles/scss/_handsontable.scss

@@ -8,11 +8,34 @@
   }
 }
 
-.handsontable-modal {
-  &.modal-lg {
-    width: 90%;
+// expanded window layout
+.handsontable-modal.handsontable-modal-expanded {
+  // full-screen modal
+  width: 97%;
+  height: 95%;
+  .modal-content {
+    height: 95%;
   }
 
+  // expand .modal-body (with calculating height)
+  .modal-body {
+    $modal-header: 54px;
+    $modal-footer: 46px;
+    $margin: $modal-header + $modal-footer;
+    height: calc(100% - #{$margin});
+
+    // expand .hot-table-container (with flexbox)
+    .hot-table-container {
+      flex: 1;
+    }
+  }
+}
+
+// Prevent handsontable/handsontable #2937 (Manual column resize does not work when handsontable is loaded inside Bootstrap 3.0 Modal)
+// see https://github.com/handsontable/handsontable/issues/2937#issuecomment-287390111
+.modal.in .modal-dialog.handsontable-modal {
+  transform: none;
+
   .modal-navbar {
     background-color: $navbar-default-bg;
     border-bottom: $border 1px solid;

src/client/styles/scss/_override-handsontable.scss

@@ -1,3 +0,0 @@
-.modal .handsontable .wtBorder {
-  z-index: 110;
-}

src/client/styles/scss/style.scss

@@ -14,9 +14,6 @@
 // override react-bootstrap-typeahead styles
 @import 'override-rbt';
 
-// override Handsontable styles
-@import 'override-handsontable';
-
 // crowi component
 @import 'admin';
 @import 'attachments';

src/server/models/config.js

@@ -338,6 +338,11 @@ module.exports = function(crowi) {
   };
 
   configSchema.statics.isGuesstAllowedToRead = function(config) {
+    // return true if puclic wiki mode
+    if (Config.isPublicWikiOnly(config)) {
+      return true;
+    }
+
     // return false if undefined
     if (undefined === config.crowi || undefined === config.crowi['security:restrictGuestMode']) {
       return false;
@@ -360,6 +365,13 @@ module.exports = function(crowi) {
     const key = 'markdown:isEnabledLinebreaksInComments';
     return getValueForMarkdownNS(config, key);
   };
+  configSchema.statics.isPublicWikiOnly = function(config) {
+    const publicWikiOnly = process.env.PUBLIC_WIKI_ONLY;
+    if ( publicWikiOnly === 'true' || publicWikiOnly == 1) {
+      return true;
+    }
+    return false;
+  };
 
   configSchema.statics.pageBreakSeparator = function(config) {
     const key = 'markdown:presentation:pageBreakSeparator';
@@ -592,6 +604,7 @@ module.exports = function(crowi) {
         MATHJAX: env.MATHJAX || null,
       },
       recentCreatedLimit: Config.showRecentCreatedNumber(config),
+      isAclEnabled: !Config.isPublicWikiOnly(config),
     };
 
     return local_config;

src/server/routes/admin.js

@@ -104,7 +104,8 @@ module.exports = function(crowi, app) {
   actions.security = {};
   actions.security.index = function(req, res) {
     const settingForm = Config.setupCofigFormData('crowi', req.config);
-    return res.render('admin/security', { settingForm });
+    const isAclEnabled = !Config.isPublicWikiOnly(req.config);
+    return res.render('admin/security', { settingForm, isAclEnabled });
   };
 
   // app.get('/admin/markdown'                  , admin.markdown.index);
@@ -669,10 +670,12 @@ module.exports = function(crowi, app) {
   actions.userGroup = {};
   actions.userGroup.index = function(req, res) {
     var page = parseInt(req.query.page) || 1;
+    const isAclEnabled = !Config.isPublicWikiOnly(req.config);
     var renderVar = {
       userGroups: [],
       userGroupRelations: new Map(),
       pager: null,
+      isAclEnabled,
     };
 
     UserGroup.findUserGroupsWithPagination({ page: page })
@@ -1030,6 +1033,21 @@ module.exports = function(crowi, app) {
 
   actions.api.securitySetting = function(req, res) {
     const form = req.form.settingForm;
+    const config = crowi.getConfig();
+    const isPublicWikiOnly = Config.isPublicWikiOnly(config);
+    if (isPublicWikiOnly) {
+      const basicName = form['security:basicName'];
+      const basicSecret = form['security:basicSecret'];
+      if (basicName != '' || basicSecret != '') {
+        req.form.errors.push('Public Wikiのため、Basic認証は利用できません。');
+        return res.json({status: false, message: req.form.errors.join('\n')});
+      }
+      const guestMode = form['security:restrictGuestMode'];
+      if ( guestMode == 'Deny' ) {
+        req.form.errors.push('Private Wikiへの設定変更はできません。');
+        return res.json({status: false, message: req.form.errors.join('\n')});
+      }
+    }
 
     if (req.form.isValid) {
       debug('form content', form);

src/server/views/admin/security.html

@@ -44,16 +44,20 @@
             <label for="settingForm[security:registrationMode]" class="col-xs-3 control-label">{{ t('Basic authentication') }}</label>
             <div class="col-xs-3">
               <label for="">ID</label>
-              <input class="form-control" type="text" name="settingForm[security:basicName]"   value="{{ settingForm['security:basicName']|default('') }}">
+              <input class="form-control" type="text" name="settingForm[security:basicName]"   value="{{ settingForm['security:basicName']|default('') }}" {% if not isAclEnabled  %}readonly{% endif%}>
             </div>
             <div class="col-xs-3">
               <label for="">{{ t('Password') }}</label>
-              <input class="form-control" type="text" name="settingForm[security:basicSecret]" value="{{ settingForm['security:basicSecret']|default('') }}">
+              <input class="form-control" type="text" name="settingForm[security:basicSecret]" value="{{ settingForm['security:basicSecret']|default('') }}" {% if not isAclEnabled  %}readonly{% endif%}>
             </div>
             <div class="col-xs-offset-3 col-xs-9">
               <p class="help-block">
-                {{ t("security_setting.common_authentication") }}<br>
-                {{ t("security_setting.without_encryption") }}<br>
+                {% if not isAclEnabled %}
+                  {{ t("security_setting.basic_acl_disable") }}<br>
+                {% else %}
+                  {{ t("security_setting.common_authentication") }}<br>
+                  {{ t("security_setting.without_encryption") }}<br>
+                {% endif %}
               </p>
             </div>
           </div>
@@ -301,6 +305,7 @@
       {
         function showMessage(formId, msg, status) {
           $('#' + formId + ' > .alert').remove();
+          $('#' + formId ).find('.alert').remove();
 
           if (!status) {
             status = 'success';

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

@@ -33,7 +33,11 @@
 
     <div class="col-md-9">
       <p>
-        <button  data-toggle="collapse" class="btn btn-default" href="#createGroupForm">新規グループの作成</button>
+        {% if isAclEnabled %}
+          <button  data-toggle="collapse" class="btn btn-default" href="#createGroupForm">新規グループの作成</button>
+        {% else %}
+          現在の設定では新規グループの作成はできません。
+        {% endif %}
       </p>
       <form role="form" action="/admin/user-group/create" method="post">
         <div id="createGroupForm" class="collapse">
@@ -124,13 +128,18 @@
             <td>
               <img src="{{ sGroup|picture }}" class="picture img-circle" />
             </td>
-            <td><a href="{{ sGroupDetailPageUrl }}">{{ sGroup.name | preventXss }}</a></td>
+            {% if isAclEnabled %}
+              <td><a href="{{ sGroupDetailPageUrl }}">{{ sGroup.name | preventXss }}</a></td>
+            {% else %}
+              <td>{{ sGroup.name | preventXss }}</td>
+            {% endif %}
             <td><ul class="list-inline">
               {% for relation in userGroupRelations.get(sGroup) %}
               <li class="list-inline-item badge badge-primary">{{relation.relatedUser.username}}</li>
               {% endfor %}
             </ul></td>
             <td>{{ sGroup.createdAt|date('Y-m-d', sGroup.createdAt.getTimezoneOffset()) }}</td>
+            {% if isAclEnabled %}
             <td>
               <div class="btn-group admin-group-menu">
                 <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown">
@@ -156,6 +165,9 @@
                 </ul>
               </div>
             </td>
+            {% else %}
+              <td></td>
+            {% endif %}
           </tr>
           {% endfor %}
         </tbody>

wercker.yml

@@ -17,7 +17,10 @@ test:
 
     - script:
       name: print dependencies
-      code: yarn list --depth=0
+      code: |
+        echo -n "node " && node -v
+        echo -n "npm " && npm -v
+        yarn list --depth=0
 
     - script:
       name: npm test
@@ -52,7 +55,10 @@ build-prod:
 
     - script:
       name: print dependencies
-      code: yarn list --depth=0
+      code: |
+        echo -n "node " && node -v
+        echo -n "npm " && npm -v
+        yarn list --depth=0
 
     - script:
       name: npm run build:prod:analyze
@@ -97,7 +103,10 @@ build-dev:
 
     - script:
       name: print dependencies
-      code: yarn list --depth=0
+      code: |
+        echo -n "node " && node -v
+        echo -n "npm " && npm -v
+        yarn list --depth=0
 
     - script:
       name: npm run build:dev

yarn.lock

@@ -27,9 +27,9 @@
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/@browser-bunyan/levels/-/levels-1.3.0.tgz#a052303ae5d1a1f9b63eeb3a94495a2f429f4831"
 
-"@handsontable/react@^1.1.0":
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/@handsontable/react/-/react-1.1.0.tgz#7f7cc822bc4cfab26f843792982ef81838e82d07"
+"@handsontable/react@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@handsontable/react/-/react-2.0.0.tgz#30d9c2bd05421588a6ed1b3050b1f7dc476b35d3"
 
 "@sinonjs/commons@^1.0.2":
   version "1.0.2"
@@ -4042,9 +4042,9 @@ gzip-size@^5.0.0:
     duplexer "^0.1.1"
     pify "^3.0.0"
 
-handsontable@^5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/handsontable/-/handsontable-5.0.1.tgz#4aadbaf1a468d8c7b3cdbf8a5f49c4110879c373"
+handsontable@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/handsontable/-/handsontable-6.0.1.tgz#93f07d895b42335e2882044a79bca96003a2cab2"
   dependencies:
     moment "2.20.1"
     numbro "^2.0.6"