Merge branch 'support/reactify-pagemanagement-modal-for-merge' into imprv/renamepage-modal-reactify

resource/locales/en-US/translation.json

@@ -303,7 +303,7 @@
       "recursively": "Put back recursively"
     },
     "help": {
-      "recursively": "Put back children of under <code>%s</code> recursively"
+      "recursively": "Put back page under this path recursively"
     }
   },
   "modal_shortcuts": {

resource/locales/ja/translation.json

@@ -301,7 +301,7 @@
       "recursively": "全ての子ページも元に戻す"
     },
     "help": {
-      "recursively": "<code>%s</code> 配下のページも元に戻します"
+      "recursively": "配下のページも元に戻します"
     }
   },
   "modal_shortcuts": {

src/client/js/components/Admin/ImportData/GrowiArchive/UploadForm.jsx

@@ -51,7 +51,9 @@ class UploadForm extends React.Component {
       <form onSubmit={this.uploadZipFile}>
         <fieldset>
           <div className="form-group row">
-            <label htmlFor="file" className="col-md-3 control-label">{t('admin:importer_management.growi_settings.growi_archive_file')}</label>
+            <label htmlFor="file" className="col-md-3 col-form-label col-form-label-sm">
+              {t('admin:importer_management.growi_settings.growi_archive_file')}
+            </label>
             <div className="col-md-6">
               <input
                 type="file"

src/client/js/components/Admin/MarkdownSetting/PresentationForm.jsx

@@ -42,7 +42,7 @@ class PresentationForm extends React.Component {
     return (
       <fieldset className="form-group col-12 my-2">
 
-        <label className="col-8 offset-4 control-label font-weight-bold text-left mt-3">
+        <label className="col-8 offset-4 col-form-label font-weight-bold text-left mt-3">
           {t('admin:markdown_setting.presentation_options.page_break_setting')}
         </label>
 

src/client/js/components/Admin/MarkdownSetting/PresentationLineBreakOptions.jsx

@@ -1,86 +0,0 @@
-import React, { Fragment } from 'react';
-import PropTypes from 'prop-types';
-import { withTranslation } from 'react-i18next';
-
-import { createSubscribedElement } from '../../UnstatedUtils';
-
-import AppContainer from '../../../services/AppContainer';
-import AdminMarkDownContainer from '../../../services/AdminMarkDownContainer';
-
-class PresentationLineBreakOptions extends React.Component {
-
-  render() {
-    const { t, adminMarkDownContainer } = this.props;
-    const { pageBreakOption, customRegularExpression } = adminMarkDownContainer.state;
-
-    return (
-      <Fragment>
-        <div className="col-xs-3 radio radio-primary">
-          <input
-            type="radio"
-            id="pageBreakOption1"
-            checked={pageBreakOption === 1}
-            onChange={() => { adminMarkDownContainer.setState({ pageBreakOption: 1 }) }}
-          />
-          <label htmlFor="pageBreakOption1">
-            <p className="font-weight-bold">{ t('markdown_setting.Preset one separator') }</p>
-            <div className="mt-3">
-              { t('markdown_setting.Preset one separator desc') }
-              <pre><code>{ t('markdown_setting.Preset one separator value') }</code></pre>
-            </div>
-          </label>
-        </div>
-
-        <div className="col-xs-3 radio radio-primary mt-3">
-          <input
-            type="radio"
-            id="pageBreakOption2"
-            checked={pageBreakOption === 2}
-            onChange={() => { adminMarkDownContainer.setState({ pageBreakOption: 2 }) }}
-          />
-          <label htmlFor="pageBreakOption2">
-            <p className="font-weight-bold">{ t('markdown_setting.Preset two separator') }</p>
-            <div className="mt-3">
-              { t('markdown_setting.Preset two separator desc') }
-              <pre><code>{ t('markdown_setting.Preset two separator value') }</code></pre>
-            </div>
-          </label>
-        </div>
-
-        <div className="col-xs-3 radio radio-primary mt-3">
-          <input
-            type="radio"
-            id="pageBreakOption3"
-            checked={pageBreakOption === 3}
-            onChange={() => { adminMarkDownContainer.setState({ pageBreakOption: 3 }) }}
-          />
-          <label htmlFor="pageBreakOption3">
-            <p className="font-weight-bold">{ t('markdown_setting.Custom separator') }</p>
-            <div className="mt-3">
-              { t('markdown_setting.Custom separator desc') }
-              <input
-                className="form-control"
-                defaultValue={customRegularExpression}
-                onChange={(e) => { adminMarkDownContainer.setState({ customRegularExpression: e.target.value }) }}
-              />
-            </div>
-          </label>
-        </div>
-      </Fragment>
-    );
-  }
-
-}
-
-const PresentationLineBreakOptionsWrapper = (props) => {
-  return createSubscribedElement(PresentationLineBreakOptions, props, [AppContainer, AdminMarkDownContainer]);
-};
-
-PresentationLineBreakOptions.propTypes = {
-  t: PropTypes.func.isRequired, // i18next
-  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
-  adminMarkDownContainer: PropTypes.instanceOf(AdminMarkDownContainer).isRequired,
-
-};
-
-export default withTranslation()(PresentationLineBreakOptionsWrapper);

src/client/js/components/Admin/Security/SamlSecuritySetting.jsx

@@ -213,7 +213,7 @@ class SamlSecurityManagement extends React.Component {
                   <th>{t('security_setting.form_item_name.cert')}</th>
                   <td>
                     <textarea
-                      className="form-control input-sm"
+                      className="form-control form-control-sm"
                       type="text"
                       rows="5"
                       name="samlCert"
@@ -243,7 +243,7 @@ pWVdnzS1VCO8fKsJ7YYIr+JmHvseph3kFUOI5RqkCcMZlKUv83aUThsTHw==
                   </td>
                   <td>
                     <textarea
-                      className="form-control input-sm"
+                      className="form-control form-control-sm"
                       type="text"
                       rows="5"
                       readOnly

src/client/js/components/Admin/Security/SecuritySetting.jsx

@@ -147,7 +147,7 @@ class SecuritySetting extends React.Component {
         </div>
         {adminGeneralSecurityContainer.isWikiModeForced && (
         <div className="row mb-4">
-          <div className="col-xs-offset-3 col-xs-6 text-left">
+          <div className="offset-3 col-6 text-left">
             <p className="alert alert-warning mt-2 text-left">
               <i className="icon-exclamation icon-fw">
               </i><b>FIXED</b><br />

src/client/js/components/Me/ProfileImageSettings.jsx

@@ -144,7 +144,7 @@ class ProfileImageSettings extends React.Component {
               </div>
             </h4>
             <div className="row mb-3">
-              <label className="col-sm-4 col-12 control-label">
+              <label className="col-sm-4 col-12 col-form-label text-left">
                 { t('Current Image') }
               </label>
               <div className="col-sm-8 col-12">
@@ -153,7 +153,7 @@ class ProfileImageSettings extends React.Component {
               </div>
             </div>
             <div className="row">
-              <label className="col-sm-4 col-12 control-label">
+              <label className="col-sm-4 col-12 col-form-label text-left">
                 {t('Upload new image')}
               </label>
               <div className="col-sm-8 col-12">

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

@@ -8,7 +8,7 @@ import { createSubscribedElement } from '../UnstatedUtils';
 import AppContainer from '../../services/AppContainer';
 import PageContainer from '../../services/PageContainer';
 import UserPicture from '../User/UserPicture';
-
+import PutbackPageModal from '../PutbackPageModal';
 import EmptyTrashModal from '../EmptyTrashModal';
 import PageDeleteModal from '../PageDeleteModal';
 
@@ -20,6 +20,7 @@ const TrashPageAlert = (props) => {
   } = pageContainer.state;
   const { currentUser } = appContainer;
   const [isEmptyTrashModalShown, setIsEmptyTrashModalShown] = useState(false);
+  const [isPutbackPageModalShown, setIsPutbackPageModalShown] = useState(false);
   const [isPageDeleteModalShown, setIsPageDeleteModalShown] = useState(false);
 
   function openEmptyTrashModalHandler() {
@@ -30,6 +31,14 @@ const TrashPageAlert = (props) => {
     setIsEmptyTrashModalShown(false);
   }
 
+  function openPutbackPageModalHandler() {
+    setIsPutbackPageModalShown(true);
+  }
+
+  function closePutbackPageModalHandler() {
+    setIsPutbackPageModalShown(false);
+  }
+
   function openPageDeleteModalHandler() {
     setIsPageDeleteModalShown(true);
   }
@@ -72,8 +81,8 @@ const TrashPageAlert = (props) => {
       <>
         <button
           type="button"
-          className="btn btn-outline-secondary rounded-pill btn-sm ml-auto mr-2"
-          data-target="#putBackPage"
+          className="btn btn-info rounded-pill btn-sm ml-auto mr-2"
+          onClick={openPutbackPageModalHandler}
           data-toggle="modal"
         >
           <i className="icon-action-undo" aria-hidden="true"></i> { t('Put Back') }
@@ -101,6 +110,11 @@ const TrashPageAlert = (props) => {
         {(isDeleted && currentUser != null) && renderTrashPageManagementButtons()}
       </div>
       <EmptyTrashModal isOpen={isEmptyTrashModalShown} onClose={closeEmptyTrashModalHandler} onClickEmptyBtn={emptyButtonHandler} />
+      <PutbackPageModal
+        isOpen={isPutbackPageModalShown}
+        onClose={closePutbackPageModalHandler}
+        path={path}
+      />
       <PageDeleteModal
         isOpen={isPageDeleteModalShown}
         onClose={opclosePageDeleteModalHandler}

src/client/js/components/PutbackPageModal.jsx

@@ -0,0 +1,105 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+
+import {
+  Modal, ModalHeader, ModalBody, ModalFooter,
+} from 'reactstrap';
+
+import { withTranslation } from 'react-i18next';
+
+import { createSubscribedElement } from './UnstatedUtils';
+
+import PageContainer from '../services/PageContainer';
+
+import ApiErrorMessage from './PageManagement/ApiErrorMessage';
+
+const PutBackPageModal = (props) => {
+  const {
+    t, isOpen, onClose, pageContainer, path,
+  } = props;
+
+  const [errorCode, setErrorCode] = useState(null);
+  const [errorMessage, setErrorMessage] = useState(null);
+
+  const [isPutbackRecursively, setIsPutbackRecursively] = useState(true);
+
+  function changeIsPutbackRecursivelyHandler() {
+    setIsPutbackRecursively(!isPutbackRecursively);
+  }
+
+  async function putbackPage() {
+    setErrorCode(null);
+    setErrorMessage(null);
+
+    try {
+      const response = await pageContainer.revertRemove(isPutbackRecursively);
+      const putbackPagePath = response.page.path;
+      window.location.href = encodeURI(putbackPagePath);
+    }
+    catch (err) {
+      setErrorCode(err.code);
+      setErrorMessage(err.message);
+    }
+  }
+
+  async function putbackPageButtonHandler() {
+    putbackPage();
+  }
+
+  return (
+    <Modal isOpen={isOpen} toggle={onClose} className="grw-create-page">
+      <ModalHeader tag="h4" toggle={onClose} className="bg-info text-light">
+        <i className="icon-action-undo mr-2" aria-hidden="true"></i> { t('modal_putback.label.Put Back Page') }
+      </ModalHeader>
+      <ModalBody>
+        <div>
+          <label htmlFor="">{t('modal_putback.label.Put Back Page')}:</label><br />
+          <code>{path}</code>
+        </div>
+        <div className="custom-control custom-checkbox custom-checkbox-warning">
+          <input
+            className="custom-control-input"
+            id="cbPutBackRecursively"
+            type="checkbox"
+            checked={isPutbackRecursively}
+            onChange={changeIsPutbackRecursivelyHandler}
+          />
+          <label htmlFor="cbPutBackRecursively" className="custom-control-label">
+            { t('modal_putback.label.recursively') }
+          </label>
+          <p className="form-text text-muted mt-0">
+            <code>{ path }</code><br />
+            { t('modal_putback.help.recursively') }
+          </p>
+        </div>
+      </ModalBody>
+      <ModalFooter>
+        <ApiErrorMessage errorCode={errorCode} errorMessage={errorMessage} linkPath={path} />
+        <button type="button" className="btn btn-info" onClick={putbackPageButtonHandler}>
+          <i className="icon-action-undo mr-2" aria-hidden="true"></i> { t('Put Back') }
+        </button>
+      </ModalFooter>
+    </Modal>
+  );
+
+};
+
+/**
+ * Wrapper component for using unstated
+ */
+const PutBackPageModalWrapper = (props) => {
+  return createSubscribedElement(PutBackPageModal, props, [PageContainer]);
+};
+
+PutBackPageModal.propTypes = {
+  t: PropTypes.func.isRequired, //  i18next
+  pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
+
+  isOpen: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+
+  path: PropTypes.string.isRequired,
+};
+
+
+export default withTranslation()(PutBackPageModalWrapper);

src/client/js/components/SearchPage/SearchResult.jsx

@@ -41,6 +41,13 @@ class SearchResult extends React.Component {
     return false;
   }
 
+  /**
+   * move the page
+   */
+  visitPageButtonHandler(e) {
+    window.location.href = e.currentTarget.value;
+  }
+
   /**
    * toggle checkbox and add (or delete from) selected pages list
    *
@@ -197,7 +204,7 @@ class SearchResult extends React.Component {
                 )
               }
               <div className="page-list-option">
-                <button type="button" className="btn btn-link p-0" href={page.path}><i className="icon-login" /></button>
+                <button type="button" className="btn btn-link p-0" value={page.path} onClick={this.visitPageButtonHandler}><i className="icon-login" /></button>
               </div>
             </div>
           </a>
@@ -285,7 +292,7 @@ class SearchResult extends React.Component {
     return (
       <div className="content-main">
         <div className="search-result row" id="search-result">
-          <div className="col-lg-4 d-none d-lg-block page-list search-result-list" id="search-result-list">
+          <div className="col-lg-4 d-none d-lg-block page-list search-result-list pr-0" id="search-result-list">
             <nav>
               <div className="d-flex align-items-start justify-content-between mt-1">
                 <div className="search-result-meta">

src/client/js/services/PageContainer.js

@@ -342,6 +342,19 @@ export default class PageContainer extends Container {
 
   }
 
+  revertRemove(isRecursively) {
+    const websocketContainer = this.appContainer.getContainer('WebsocketContainer');
+
+    // control flag
+    const recursively = isRecursively ? true : null;
+
+    return this.appContainer.apiPost('/pages.revertRemove', {
+      recursively,
+      page_id: this.state.pageId,
+      socketClientId: websocketContainer.getSocketClientId(),
+    });
+  }
+
   showSuccessToastr() {
     toastr.success(undefined, 'Saved successfully', {
       closeButton: true,

src/client/styles/scss/_search.scss

@@ -125,17 +125,22 @@
     overflow-y: scroll;
 
     .nav.nav-pills {
-      > li > a {
-        padding: 2px 8px;
-        border-radius: 0;
-
-        &:hover {
-          color: inherit;
-          text-decoration: none;
-        }
-        &.active {
-          padding: 2px 5px;
-          border-right: solid 3px transparent;
+      > li {
+        > a {
+          padding: 2px 8px;
+          border-radius: 0;
+
+          &:hover {
+            color: inherit;
+            text-decoration: none;
+          }
+          &.active {
+            padding-right: 5px;
+            border-right: solid 3px transparent;
+          }
+          > * {
+            margin-right: 3px;
+          }
         }
       }
     }

src/client/styles/scss/theme/_apply-colors.scss

@@ -2,6 +2,10 @@
 //== Apply to Bootstrap
 //
 
+// determine optional variables
+$border-image-navbar: linear-gradient(to right, #ccc 0%, #ccc 100%) !default;
+$bgcolor-search-top-dropdown: $secondary !default;
+
 // override bootstrap variables
 $body-bg: $bgcolor-global;
 $body-color: $color-global;
@@ -111,10 +115,16 @@ $input-focus-color: $color-global;
     color: $color-link-nabvar;
   }
 
-  border-image: linear-gradient(to right, #545fff 0%, #00a6e5 100%);
+  border-image: $border-image-navbar;
   border-image-slice: 1;
 }
 
+.search-top {
+  .btn-secondary.dropdown-toggle {
+    @include button-variant($bgcolor-search-top-dropdown, $bgcolor-search-top-dropdown);
+  }
+}
+
 .grw-sidebar {
   .ak-navigation-resize-button {
     $color-resize-button: $color-global !default;

src/client/styles/scss/theme/default.scss

@@ -15,7 +15,7 @@
 //== Light Mode
 //
 html[light] {
-  $primary: #112744;
+  $primary: #122c55;
 
   // Background colors
   $bgcolor-global: white;
@@ -23,14 +23,14 @@ html[light] {
   $bgcolor-card: #f5f5f5;
 
   // Font colors
-  $color-global: #333333;
+  $color-global: #112744;
   $color-reversal: #eeeeee;
   // $color-header: #2b2b2b;
-  $color-link: lighten($primary, 20%);
+  $color-link: #1938ba;
   $color-link-hover: lighten($color-link, 20%);
-  $color-link-wiki: lighten($primary, 20%);
+  $color-link-wiki: $color-link;
   $color-link-wiki-hover: lighten($color-link-wiki, 20%);
-  $color-link-nabvar: $color-reversal;
+  $color-link-nabvar: #a7a7a7;
   $color-inline-code: #c7254e;
 
   // List Group colors
@@ -42,8 +42,8 @@ html[light] {
 
   // Navbar
   $bgcolor-navbar: #2a2929;
-  $border-color-navbar-gradient-left: #545fff;
-  $border-color-navbar-gradient-right: #00a6e5;
+  $bgcolor-search-top-dropdown: #209fd8;
+  $border-image-navbar: linear-gradient(to right, #36c9ff 0%, #36c9ff 33%, #7926ff 66%, #ff2eff 100%);
 
   // Logo colors
   $bgcolor-logo: $bgcolor-navbar;
@@ -55,7 +55,7 @@ html[light] {
   $bgcolor-sidebar-context: #f4f6fc;
   // Sidebar resize button
   $color-resize-button: $color-reversal;
-  $bgcolor-resize-button: #5587ec;
+  $bgcolor-resize-button: #209fd8;
   $color-resize-button-hover: $color-reversal;
   $bgcolor-resize-button-hover: lighten($bgcolor-resize-button, 5%);
 
@@ -86,24 +86,22 @@ html[light] {
 //== Dark Mode
 //
 html[dark] {
-  $primary: #d65a31;
-
-  $basecolor: #222831;
+  $primary: #db00c2;
 
   // Background colors
-  $bgcolor-global: $basecolor;
-  $bgcolor-inline-code: darken($basecolor, 5%);
-  $bgcolor-card: darken($basecolor, 5%);
+  $bgcolor-global: #131418;
+  $bgcolor-inline-code: darken($bgcolor-global, 5%);
+  $bgcolor-card: darken($bgcolor-global, 5%);
 
   // Font colors
-  $color-global: #eeeeee;
+  $color-global: #a8a8a8;
   $color-reversal: #333333;
   // $color-header: desaturate($primary, 20%);
-  $color-link: $primary;
+  $color-link: #7b9ad5;
   $color-link-hover: lighten($color-link, 10%);
-  $color-link-wiki: lighten($basecolor, 50%);
-  $color-link-wiki-hover: darken($color-link-wiki, 5%);
-  $color-link-nabvar: $color-global;
+  $color-link-wiki: $color-link;
+  $color-link-wiki-hover: lighten($color-link-wiki, 10%);
+  $color-link-nabvar: #a7a7a7;
   $color-inline-code: #c7254e;
 
   // List Group colors
@@ -115,22 +113,22 @@ html[dark] {
 
   // Navbar
   $bgcolor-navbar: #2a2929;
-  $border-color-navbar-gradient-left: #545fff;
-  $border-color-navbar-gradient-right: #00a6e5;
+  $bgcolor-search-top-dropdown: $primary;
+  $border-image-navbar: linear-gradient(to right, #44bfe3 0%, #b04aff 50%, #ff1794 100%);
 
   // Logo colors
   $bgcolor-logo: $bgcolor-navbar;
   $fillcolor-logo-mark: #444;
 
   // Sidebar
-  $bgcolor-sidebar: $bgcolor-navbar;
+  $bgcolor-sidebar: #122c55;
   $color-sidebar-context: $color-global;
-  $bgcolor-sidebar-context: lighten($bgcolor-navbar, 5%);
+  $bgcolor-sidebar-context: #111d2f;
   // Sidebar resize button
   $color-resize-button: $color-global;
-  $bgcolor-resize-button: #5587ec;
+  $bgcolor-resize-button: $primary;
   $color-resize-button-hover: $color-global;
-  $bgcolor-resize-button-hover: lighten($bgcolor-resize-button, 5%);
+  $bgcolor-resize-button-hover: darken($bgcolor-resize-button, 5%);
 
   // Icon colors
   $color-editor-icons: $color-global;

src/server/views/widget/passport/ldap-association-tester.html

@@ -1,103 +0,0 @@
-<form id="formTestLdapCredentials" method="post" class="form-horizontal" role="form">
-  <div class="alert-container"></div>
-  <fieldset>
-    <div class="form-group">
-      <label for="username" class="col-xs-3 control-label">{{ t('username') }}</label>
-      <div class="col-xs-6">
-        <input class="form-control" name="loginForm[username]">
-      </div>
-    </div>
-    <div class="form-group">
-      <label for="password" class="col-xs-3 control-label">{{ t('Password') }}</label>
-      <div class="col-xs-6">
-        <input class="form-control col-xs-4" type="password" name="loginForm[password]">
-      </div>
-    </div>
-
-
-  </fieldset>
-
-  {% if showLog %}
-  <fieldset>
-    <h5>Logs</h5>
-    <textarea id="taLogs" class="col-xs-12" rows="4" readonly></textarea>
-  </fieldset>
-  {% endif %}
-
-  <fieldset class="mt-4">
-    <button type="button" class="btn btn-default col-xs-offset-5 col-xs-2" onclick="testLdapCredentials()">{{ t('Test') }}</button>
-  </fieldset>
-
-  <script>
-    /**
-     * test association (ajax)
-     */
-    function testLdapCredentials() {
-      function showMessage(formId, msg, status) {
-        $('#' + formId + ' .alert-container .alert').remove();
-
-        var $message = $('<p class="alert"></p>');
-        $message.addClass('alert-' + status);
-        $message.html(msg.replace(/\n/g, '<br>'));
-        $message.appendTo('#' + formId + '> .alert-container');
-
-        if (status == 'success') {
-          setTimeout(function()
-          {
-            $message.fadeOut({
-              complete: function() {
-                $message.remove();
-              }
-            });
-          }, 5000);
-        }
-      }
-      /**
-       * add logs
-       */
-      function addLogs(formId, log) {
-        const textarea = $(`#${formId} #taLogs`);
-        const newLog = `${new Date()} - ${log}\n\n`;
-        textarea.val(`${newLog}${textarea.val()}`);
-      }
-
-      var $form = $('#formTestLdapCredentials');
-      var $action = '/_api/login/testLdap';
-      var $id = $form.attr('id');
-      var $button = $('button', this);
-      $button.attr('disabled', 'disabled');
-
-      var jqxhr = $.post($action, $form.serialize(), function(data)
-        {
-          if (!data.status) {
-            showMessage($id, 'data.status not found', 'danger');
-          }
-          else {
-            showMessage($id, data.message, data.status);
-          }
-
-          // add logs
-          if ('true' === '{{showLog}}') {
-            if (data.err) {
-              addLogs($id, JSON.stringify(data.err, null, 2));
-            }
-            if (data.ldapConfiguration) {
-              const prettified = JSON.stringify(data.ldapConfiguration.server, undefined, 4);
-              addLogs($id, `LDAP Configuration : ${prettified}`);
-            }
-            if (data.ldapAccountInfo) {
-              const prettified = JSON.stringify(data.ldapAccountInfo, undefined, 4);
-              addLogs($id, `Retrieved LDAP Account : ${prettified}`);
-            }
-          }
-        })
-        .fail(function() {
-          showMessage($id, 'エラーが発生しました', 'danger');
-        })
-        .always(function() {
-          $button.prop('disabled', false);
-        });
-        return false;
-    }
-  </script>
-</form>