Merge pull request #1359 from weseek/fetch-highlight-theme

Fetch highlight theme

src/client/js/components/Admin/Customize/CustomizeHighlightSetting.jsx

@@ -12,7 +12,6 @@ import AppContainer from '../../../services/AppContainer';
 
 import AdminCustomizeContainer from '../../../services/AdminCustomizeContainer';
 import AdminUpdateButtonRow from '../Common/AdminUpdateButtonRow';
-import AdminDropdownOption from '../Common/AdminDropdownOption';
 
 const logger = loggerFactory('growi:customizeHighlight');
 
@@ -24,10 +23,6 @@ class CustomizeHighlightSetting extends React.Component {
     this.onClickSubmit = this.onClickSubmit.bind(this);
   }
 
-  componentDidMount() {
-    // TODO GW-524 fetch highlightTheme option
-  }
-
   async onClickSubmit() {
     const { t, adminCustomizeContainer } = this.props;
 
@@ -60,6 +55,20 @@ class CustomizeHighlightSetting extends React.Component {
 
   render() {
     const { t, adminCustomizeContainer } = this.props;
+    const options = adminCustomizeContainer.state.highlightJsCssSelectorOptions;
+    const menuItem = [];
+
+    Object.entries(options).forEach((option) => {
+      const styleId = option[0];
+      const styleName = option[1].name;
+      const isBorderEnable = option[1].border;
+
+      menuItem.push(
+        <li key={styleId} role="presentation" type="button" onClick={() => adminCustomizeContainer.switchHighlightJsStyle(styleId, styleName, isBorderEnable)}>
+          <a role="menuitem">{styleName}</a>
+        </li>,
+      );
+    });
 
     return (
       <React.Fragment>
@@ -67,16 +76,23 @@ class CustomizeHighlightSetting extends React.Component {
 
         <div className="form-group row">
           <div className="col-xs-offset-3 col-xs-6 text-left">
-            <AdminDropdownOption
-              label={t('customize_page.Theme')}
-              selectedValue={adminCustomizeContainer.state.currentHighlightJsStyle}
-              onChangeValue={(value) => { adminCustomizeContainer.switchHighlightJsStyle(value) }}
-              // TODO GW-524 hand over theme option
-              options={[10, 30, 50]}
-            >
+            <div className="my-0 btn-group">
+              <label>{t('customize_page.Theme')}</label>
+              <div className="dropdown">
+                <button className="btn btn-default dropdown-toggle w-100" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                  <span className="pull-left">{adminCustomizeContainer.state.currentHighlightJsStyleName}</span>
+                  <span className="bs-caret pull-right">
+                    <span className="caret" />
+                  </span>
+                </button>
+                {/* TODO adjust dropdown after BS4 */}
+                <ul className="dropdown-menu" role="menu">
+                  {menuItem}
+                </ul>
+              </div>
               {/* eslint-disable-next-line react/no-danger */}
               <p className="help-block text-warning"><span dangerouslySetInnerHTML={{ __html:  t('customize_page.nocdn_desc') }} /></p>
-            </AdminDropdownOption>
+            </div>
           </div>
         </div>
 

src/client/js/services/AdminCustomizeContainer.js

@@ -1,5 +1,12 @@
 import { Container } from 'unstated';
 
+import loggerFactory from '@alias/logger';
+
+import { toastError } from '../util/apiNotification';
+
+// eslint-disable-next-line no-unused-vars
+const logger = loggerFactory('growi:services:AdminCustomizeContainer');
+
 /**
  * Service container for admin customize setting page (Customize.jsx)
  * @extends {Container} unstated Container
@@ -12,6 +19,7 @@ export default class AdminCustomizeContainer extends Container {
     this.appContainer = appContainer;
 
     this.state = {
+      // TODO GW-575 set data from apiV3
       currentTheme: appContainer.config.themeType,
       currentLayout: appContainer.config.layoutType,
       currentBehavior: appContainer.config.behaviorType,
@@ -19,12 +27,28 @@ export default class AdminCustomizeContainer extends Container {
       isSavedStatesOfTabChanges: appContainer.config.isSavedStatesOfTabChanges,
       isEnabledAttachTitleHeader: appContainer.config.isEnabledAttachTitleHeader,
       currentRecentCreatedLimit: appContainer.config.recentCreatedLimit,
-      currentHighlightJsStyle: appContainer.config.highlightJsStyle,
+      currentHighlightJsStyleId: appContainer.config.highlightJsStyle,
       isHighlightJsStyleBorderEnabled: appContainer.config.highlightJsStyleBorder,
       currentCustomizeCss: appContainer.config.customizeCss,
       currentCustomizeScript: appContainer.config.customizeScript,
+      /* eslint-disable quote-props, no-multi-spaces */
+      highlightJsCssSelectorOptions: {
+        'github':           { name: '[Light] GitHub',         border: false },
+        'github-gist':      { name: '[Light] GitHub Gist',    border: true },
+        'atom-one-light':   { name: '[Light] Atom One Light', border: true },
+        'xcode':            { name: '[Light] Xcode',          border: true },
+        'vs':               { name: '[Light] Vs',             border: true },
+        'atom-one-dark':    { name: '[Dark] Atom One Dark',   border: false },
+        'hybrid':           { name: '[Dark] Hybrid',          border: false },
+        'monokai':          { name: '[Dark] Monokai',         border: false },
+        'tomorrow-night':   { name: '[Dark] Tomorrow Night',  border: false },
+        'vs2015':           { name: '[Dark] Vs 2015',         border: false },
+      },
+      /* eslint-enable quote-props, no-multi-spaces */
     };
 
+    this.init();
+
   }
 
   /**
@@ -34,6 +58,31 @@ export default class AdminCustomizeContainer extends Container {
     return 'AdminCustomizeContainer';
   }
 
+  /**
+   * retrieve customize data
+   */
+  async init() {
+    // TODO GW-575 fetch data with apiV3
+    try {
+      // search style name from object for display
+      this.setState({ currentHighlightJsStyleName: this.state.highlightJsCssSelectorOptions[this.state.currentHighlightJsStyleId].name });
+    }
+    catch (err) {
+      logger.error(err);
+      toastError(new Error('Failed to fetch data'));
+    }
+  }
+
+  /**
+   * Fetch highLight theme
+   */
+  async fetchHighLightTheme() {
+    const response = await this.appContainer.apiv3.get('/customize-setting/');
+    this.setState({
+      highlightJsCssSelectorOptions: response.data.highlightJsCssSelectorOptions,
+    });
+  }
+
   /**
    * Switch layoutType
    */
@@ -90,8 +139,11 @@ export default class AdminCustomizeContainer extends Container {
   /**
    * Switch highlightJsStyle
    */
-  switchHighlightJsStyle(value) {
-    this.setState({ currentHighlightJsStyle: value });
+  switchHighlightJsStyle(styleId, styleName, isBorderEnable) {
+    this.setState({ currentHighlightJsStyleId: styleId });
+    this.setState({ currentHighlightJsStyleName: styleName });
+    // recommended settings are applied
+    this.setState({ isHighlightJsStyleBorderEnabled: isBorderEnable });
   }
 
   /**

src/server/routes/admin.js

@@ -196,6 +196,7 @@ module.exports = function(crowi, app) {
   actions.customize.index = function(req, res) {
     const settingForm = configManager.getConfigByPrefix('crowi', 'customize:');
 
+    // TODO delete after apiV3
     /* eslint-disable quote-props, no-multi-spaces */
     const highlightJsCssSelectorOptions = {
       'github':           { name: '[Light] GitHub',         border: false },

src/server/routes/apiv3/customize-setting.js

@@ -77,6 +77,13 @@ module.exports = (crowi) => {
     ],
   };
 
+  // TODO GW-575 writte swagger
+  router.get('/', loginRequiredStrictly, adminRequired, async(req, res) => {
+
+    // TODO GW-575 return others customize settings
+    return res.apiv3();
+  });
+
   /**
    * @swagger
    *