add form

src/client/js/components/Admin/Notification/SlackAppConfiguration.jsx

@@ -6,13 +6,51 @@ import { createSubscribedElement } from '../../UnstatedUtils';
 
 import AppContainer from '../../../services/AppContainer';
 import AdminNotificationContainer from '../../../services/AdminNotificationContainer';
+import AdminUpdateButtonRow from '../Common/AdminUpdateButtonRow';
 
 class SlackAppConfiguration extends React.Component {
 
+  // TODO GW-788 i18n
   render() {
+    const { adminNotificationContainer } = this.props;
+
     return (
       <React.Fragment>
-        <h2 className="border-bottom">Slack Incoming Webhooks Configuration</h2>
+        <h2 className="border-bottom mb-5">Slack Incoming Webhooks Configuration</h2>
+
+        <div className="row mb-5">
+          <label className="col-xs-3 text-right">Webhook URL</label>
+          <div className="col-xs-6">
+            <input
+              className="form-control"
+              type="text"
+              defaultValue={adminNotificationContainer.state.webhookUrl}
+              onChange={e => adminNotificationContainer.changeWebhookUrl(e.target.value)}
+            />
+          </div>
+        </div>
+
+        <div className="row mb-5">
+          <div className="col-xs-offset-3 col-xs-6 text-left">
+            <div className="checkbox checkbox-success">
+              <input
+                id="cbPrioritizeIWH"
+                type="checkbox"
+                checked={adminNotificationContainer.state.isIncomingWebhookPrioritized}
+                onChange={() => { adminNotificationContainer.switchIsIncomingWebhookPrioritized() }}
+              />
+              <label htmlFor="cbPrioritizeIWH">
+                Prioritize Incoming Webhook than Slack App
+              </label>
+            </div>
+            <p className="help-block">
+              Check this option and GROWI use Incoming Webhooks even if Slack App settings are enabled.
+            </p>
+          </div>
+        </div>
+
+        <AdminUpdateButtonRow />
+
       </React.Fragment>
     );
   }

src/client/js/services/AdminNotificationContainer.js

@@ -12,7 +12,8 @@ export default class AdminNotificationContainer extends Container {
     this.appContainer = appContainer;
 
     this.state = {
-
+      webhookUrl: '',
+      isIncomingWebhookPrioritized: false,
     };
 
   }
@@ -24,4 +25,18 @@ export default class AdminNotificationContainer extends Container {
     return 'AdminNotificationContainer';
   }
 
+  /**
+   * Change webhookUrl
+   */
+  changeWebhookUrl(inputValue) {
+    this.setState({ webhookUrl: inputValue });
+  }
+
+  /**
+   * Switch incomingWebhookPrioritized
+   */
+  switchIsIncomingWebhookPrioritized() {
+    this.setState({ isIncomingWebhookPrioritized: !this.state.isIncomingWebhookPrioritized });
+  }
+
 }