render SlackNotification on edit page

lib/util/swigFunctions.js

@@ -172,14 +172,6 @@ module.exports = function(crowi, app, req, locals) {
     return Config.isEnabledTimeline(config);
   };
 
-  locals.slackConfigured = function() {
-    var config = crowi.getConfig();
-    if (Config.hasSlackToken(config) || Config.hasSlackIwhUrl(config)) {
-      return true;
-    }
-    return false;
-  };
-
   locals.isUploadable = function() {
     var config = crowi.getConfig();
     return Config.isUploadable(config);

lib/views/_form.html

@@ -27,27 +27,9 @@
       <div id="page-editor-options-selector"></div>
     </div>
 
-    <div class="form-inline page-form-setting d-flex align-items-center" id="page-form-setting">
-      {% if slackConfigured() %}
-      <span class="input-group input-group-sm input-group-slack extended-setting m-r-5">
-        <label class="input-group-addon">
-          <img id="slack-mark-white" src="/images/icons/slack/mark-monochrome_white.svg" width="18" height="18">
-          <img id="slack-mark-black" src="/images/icons/slack/mark-monochrome_black.svg" width="18" height="18">
-          <input class="" type="checkbox" name="pageForm[notify][slack][on]" value="1">
-        </label>
-        <input class="form-control" type="text" name="pageForm[notify][slack][channel]" value="{{ slack|default('') }}" placeholder="slack-channel-name"
-          id="page-form-slack-channel"
-          data-toggle="popover"
-          title="Slack通知"
-          data-content="通知するにはチェックを入れてください。カンマ区切りで複数チャンネルに通知することができます。"
-          data-trigger="focus"
-          data-placement="top"
-        >
-      </span>
-      {% endif %}
-
+    <div class="form-inline d-flex align-items-center" id="page-form-setting">
+      <div id="editor-slack-notification"></div>
       <div id="page-grant-selector"></div>
-
       <input type="hidden" id="page-grant" name="pageForm[grant]" value="{{ page.grant }}">
       <input type="hidden" id="grant-group" name="pageForm[grantUserGroupId]" value="{{ pageRelatedGroup._id.toString() }}">
       <input type="hidden" id="edit-form-csrf" name="_csrf" value="{{ csrf() }}">

resource/js/app.js

@@ -19,6 +19,7 @@ import PageListSearch   from './components/PageListSearch';
 import PageHistory      from './components/PageHistory';
 import PageComments     from './components/PageComments';
 import CommentForm from './components/PageComment/CommentForm';
+import SlackNotification from './components/SlackNotification';
 import PageAttachment   from './components/PageAttachment';
 import SeenUserList     from './components/SeenUserList';
 import RevisionPath     from './components/Page/RevisionPath';
@@ -188,6 +189,20 @@ if (writeCommentElem) {
     writeCommentElem);
 }
 
+// render slack notification form
+const editorSlackElem = document.getElementById('editor-slack-notification');
+if (editorSlackElem) {
+  ReactDOM.render(
+    <SlackNotification
+      crowi={crowi}
+      pageId={pageId}
+      pagePath={pagePath}
+      isSlackEnabled={false}
+      slackChannels={slackChannels}
+      formName='pageForm' />,
+    editorSlackElem);
+}
+
 // render OptionsSelector
 const pageEditorOptionsSelectorElem = document.getElementById('page-editor-options-selector');
 if (pageEditorOptionsSelectorElem) {

resource/js/components/PageComment/CommentForm.js

@@ -268,7 +268,8 @@ export default class CommentForm extends React.Component {
                     <span className="text-danger text-right mr-2">{this.state.errorMessage}</span>
                   }
                   { this.state.hasSlackConfig &&
-                    <SlackNotification
+                    <div className="form-inline d-flex align-items-center">
+                      <SlackNotification
                       crowi={this.props.crowi}
                       pageId={this.props.pageId}
                       pagePath={this.props.pagePath}
@@ -276,7 +277,8 @@ export default class CommentForm extends React.Component {
                       onChannelChange={this.onChannelChange}
                       isSlackEnabled={this.state.isSlackEnabled}
                       slackChannels={this.state.slackChannels}
-                    />
+                      />
+                    </div>
                   }
                   <Button type="submit" value="Submit" bsStyle="primary" className="fcbtn btn btn-sm btn-primary btn-outline btn-rounded btn-1b">
                     Comment

resource/js/components/SlackNotification.js

@@ -43,24 +43,24 @@ export default class SlackNotification extends React.Component {
   }
 
   render() {
+    const formNameSlackOn = this.props.formName && this.props.formName + '[notify][slack][on]';
+    const formNameChannels = this.props.formName && this.props.formName + '[notify][slack][channel]';
+
     return (
-      <div className="form-inline d-flex align-items-center" id="comment-form-setting">
-        <span className="input-group input-group-sm input-group-slack extended-setting m-r-5">
-          <label className="input-group-addon">
-            <img id="slack-mark-white" src="/images/icons/slack/mark-monochrome_white.svg" width="18" height="18"/>
-            <img id="slack-mark-black" src="/images/icons/slack/mark-monochrome_black.svg" width="18" height="18"/>
-            <input className="comment-form-slack" type="checkbox" name="slack" value="1" checked={this.state.isSlackEnabled} onChange={this.updateStateCheckbox}/>
-          </label>
-          <input className="form-control" type="text" value={this.state.slackChannels} placeholder="slack-channel-name"
-            id="comment-form-slack-channel"
-            data-toggle="popover"
-            title="Slack通知"
-            data-content="通知するにはチェックを入れてください。カンマ区切りで複数チャンネルに通知することができます。"
-            data-trigger="focus"
-            data-placement="top"
-            onChange={e => this.updateState(e.target.value)}
-            />
-        </span>
+      <div className="input-group input-group-sm input-group-slack extended-setting m-r-5">
+        <label className="input-group-addon">
+          <img id="slack-mark-white" src="/images/icons/slack/mark-monochrome_white.svg" width="18" height="18"/>
+          <img id="slack-mark-black" src="/images/icons/slack/mark-monochrome_black.svg" width="18" height="18"/>
+          <input type="checkbox" name={formNameSlackOn} value="1" checked={this.state.isSlackEnabled} onChange={this.updateStateCheckbox}/>
+        </label>
+        <input className="form-control" type="text" name={formNameChannels} value={this.state.slackChannels} placeholder="slack channel name"
+          data-toggle="popover"
+          title="Slack通知"
+          data-content="通知するにはチェックを入れてください。カンマ区切りで複数チャンネルに通知することができます。"
+          data-trigger="focus"
+          data-placement="top"
+          onChange={e => this.updateState(e.target.value)}
+          />
       </div>
     );
   }
@@ -70,8 +70,9 @@ SlackNotification.propTypes = {
   crowi: PropTypes.object.isRequired,
   pageId: PropTypes.string,
   pagePath: PropTypes.string,
-  onChannelChange: PropTypes.func.isRequired,
-  onSlackOnChange: PropTypes.func.isRequired,
+  onChannelChange: PropTypes.func,
+  onSlackOnChange: PropTypes.func,
   isSlackEnabled: PropTypes.bool,
   slackChannels: PropTypes.string,
+  formName: PropTypes.string,
 };