FB

src/client/js/components/Admin/SlackIntegration/ManageCommandsProcess.jsx

@@ -0,0 +1,136 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
+import loggerFactory from '@alias/logger';
+
+import { defaultSupportedCommandsNameForBroadcastUse, defaultSupportedCommandsNameForSingleUse } from '@growi/slack';
+import { toastSuccess, toastError } from '../../../util/apiNotification';
+
+const logger = loggerFactory('growi:SlackIntegration:ManageCommandsProcess');
+
+const ManageCommandsProcess = ({
+  apiv3Put, slackAppIntegrationId, supportedCommandsForBroadcastUse, supportedCommandsForSingleUse,
+}) => {
+  const { t } = useTranslation();
+  const [selectedCommandsForBroadcastUse, setSelectedCommandsForBroadcastUse] = useState(new Set(supportedCommandsForBroadcastUse));
+  const [selectedCommandsForSingleUse, setSelectedCommandsForSingleUse] = useState(new Set(supportedCommandsForSingleUse));
+
+  const toggleCheckboxForBroadcast = (e) => {
+    const { target } = e;
+    const { name, checked } = target;
+
+    setSelectedCommandsForBroadcastUse((prevState) => {
+      const selectedCommands = new Set(prevState);
+      if (checked) {
+        selectedCommands.add(name);
+      }
+      else {
+        selectedCommands.delete(name);
+      }
+
+      return selectedCommands;
+    });
+  };
+
+  const toggleCheckboxForSingleUse = (e) => {
+    const { target } = e;
+    const { name, checked } = target;
+
+    setSelectedCommandsForSingleUse((prevState) => {
+      const selectedCommands = new Set(prevState);
+      if (checked) {
+        selectedCommands.add(name);
+      }
+      else {
+        selectedCommands.delete(name);
+      }
+
+      return selectedCommands;
+    });
+  };
+
+  const updateCommandsHandler = async() => {
+    try {
+      await apiv3Put(`/slack-integration-settings/${slackAppIntegrationId}/supported-commands`, {
+        supportedCommandsForBroadcastUse: Array.from(selectedCommandsForBroadcastUse),
+        supportedCommandsForSingleUse: Array.from(selectedCommandsForSingleUse),
+      });
+      toastSuccess(t('toaster.update_successed', { target: 'Token' }));
+    }
+    catch (err) {
+      toastError(err);
+      logger.error(err);
+    }
+  };
+
+
+  return (
+    <div className="py-4 px-5">
+      <p className="mb-4">{t('admin:slack_integration.accordion.manage_commands')}</p>
+      <span className="mb-2">Broadcast Use</span>
+      <div className="custom-control custom-checkbox">
+        <div className="row mb-5">
+          {defaultSupportedCommandsNameForBroadcastUse.map((commandName) => {
+            return (
+              <div className="col-sm-6 my-1" key={commandName}>
+                <input
+                  type="checkbox"
+                  className="custom-control-input"
+                  id={commandName}
+                  name={commandName}
+                  value={commandName}
+                  checked={selectedCommandsForBroadcastUse.has(commandName)}
+                  onChange={toggleCheckboxForBroadcast}
+                />
+                <label className="text-capitalize custom-control-label ml-3" htmlFor={commandName}>
+                  {commandName}
+                </label>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+      <span className="mb-2">Single Use</span>
+      <div className="custom-control custom-checkbox">
+        <div className="row mb-5">
+          {defaultSupportedCommandsNameForSingleUse.map((commandName) => {
+            return (
+              <div className="col-sm-6 my-1" key={commandName}>
+                <input
+                  type="checkbox"
+                  className="custom-control-input"
+                  id={commandName}
+                  name={commandName}
+                  value={commandName}
+                  checked={selectedCommandsForSingleUse.has(commandName)}
+                  onChange={toggleCheckboxForSingleUse}
+                />
+                <label className="text-capitalize custom-control-label ml-3" htmlFor={commandName}>
+                  {commandName}
+                </label>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+      <div className="row">
+        <button
+          type="button"
+          className="btn btn-primary mx-auto"
+          onClick={updateCommandsHandler}
+        >
+          { t('Update') }
+        </button>
+      </div>
+    </div>
+  );
+};
+
+ManageCommandsProcess.propTypes = {
+  apiv3Put: PropTypes.func,
+  slackAppIntegrationId: PropTypes.string.isRequired,
+  supportedCommandsForBroadcastUse: PropTypes.arrayOf(PropTypes.string),
+  supportedCommandsForSingleUse: PropTypes.arrayOf(PropTypes.string),
+};
+
+export default ManageCommandsProcess;

src/client/js/components/Admin/SlackIntegration/WithProxyAccordions.jsx

@@ -4,7 +4,6 @@ import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import loggerFactory from '@alias/logger';
-import { defaultSupportedCommandsNameForBroadcastUse, defaultSupportedCommandsNameForSingleUse } from '@growi/slack';
 
 import { withUnstatedContainers } from '../../UnstatedUtils';
 import { toastSuccess, toastError } from '../../../util/apiNotification';
@@ -12,6 +11,7 @@ import AppContainer from '../../../services/AppContainer';
 import Accordion from '../Common/Accordion';
 import { addLogs } from './slak-integration-util';
 import MessageBasedOnConnection from './MessageBasedOnConnection';
+import ManageCommandsProcess from './ManageCommandsProcess';
 
 const logger = loggerFactory('growi:SlackIntegration:WithProxyAccordionsWrapper');
 
@@ -203,124 +203,6 @@ const GeneratingTokensAndRegisteringProxyServiceProcess = withUnstatedContainers
   );
 }, [AppContainer]);
 
-const ManageCommandsProcess = ({
-  apiv3Put, slackAppIntegrationId, supportedCommandsForBroadcastUse, supportedCommandsForSingleUse,
-}) => {
-  const { t } = useTranslation();
-  const [selectedCommandsForBroadcastUse, setSelectedCommandsForBroadcastUse] = useState(new Set(supportedCommandsForBroadcastUse));
-  const [selectedCommandsForSingleUse, setSelectedCommandsForSingleUse] = useState(new Set(supportedCommandsForSingleUse));
-
-  const toggleCheckboxForBroadcast = (e) => {
-    const { target } = e;
-    const { name, checked } = target;
-
-    setSelectedCommandsForBroadcastUse((prevState) => {
-      const selectedCommands = new Set(prevState);
-      if (checked) {
-        selectedCommands.add(name);
-      }
-      else {
-        selectedCommands.delete(name);
-      }
-
-      return selectedCommands;
-    });
-  };
-
-  const toggleCheckboxForSingleUse = (e) => {
-    const { target } = e;
-    const { name, checked } = target;
-
-    setSelectedCommandsForSingleUse((prevState) => {
-      const selectedCommands = new Set(prevState);
-      if (checked) {
-        selectedCommands.add(name);
-      }
-      else {
-        selectedCommands.delete(name);
-      }
-
-      return selectedCommands;
-    });
-  };
-
-  const updateCommandsHandler = async() => {
-    try {
-      await apiv3Put(`/slack-integration-settings/${slackAppIntegrationId}/supported-commands`, {
-        supportedCommandsForBroadcastUse: Array.from(selectedCommandsForBroadcastUse),
-        supportedCommandsForSingleUse: Array.from(selectedCommandsForSingleUse),
-      });
-      toastSuccess(t('toaster.update_successed', { target: 'Token' }));
-    }
-    catch (err) {
-      toastError(err);
-      logger.error(err);
-    }
-  };
-
-
-  return (
-    <div className="py-4 px-5">
-      <p className="mb-4">{t('admin:slack_integration.accordion.manage_commands')}</p>
-      <span className="mb-2">Broadcast Use</span>
-      <div className="custom-control custom-checkbox">
-        <div className="row mb-5">
-          {defaultSupportedCommandsNameForBroadcastUse.map((commandName) => {
-            return (
-              <div className="col-sm-6 my-1" key={commandName}>
-                <input
-                  type="checkbox"
-                  className="custom-control-input"
-                  id={commandName}
-                  name={commandName}
-                  value={commandName}
-                  checked={selectedCommandsForBroadcastUse.has(commandName)}
-                  onChange={toggleCheckboxForBroadcast}
-                />
-                <label className="text-capitalize custom-control-label ml-3" htmlFor={commandName}>
-                  {commandName}
-                </label>
-              </div>
-            );
-          })}
-        </div>
-      </div>
-      <span className="mb-2">Single Use</span>
-      <div className="custom-control custom-checkbox">
-        <div className="row mb-5">
-          {defaultSupportedCommandsNameForSingleUse.map((commandName) => {
-            return (
-              <div className="col-sm-6 my-1" key={commandName}>
-                <input
-                  type="checkbox"
-                  className="custom-control-input"
-                  id={commandName}
-                  name={commandName}
-                  value={commandName}
-                  checked={selectedCommandsForSingleUse.has(commandName)}
-                  onChange={toggleCheckboxForSingleUse}
-                />
-                <label className="text-capitalize custom-control-label ml-3" htmlFor={commandName}>
-                  {commandName}
-                </label>
-              </div>
-            );
-          })}
-        </div>
-      </div>
-      <div className="row">
-        <button
-          type="button"
-          className="btn btn-primary mx-auto"
-          onClick={updateCommandsHandler}
-        >
-          { t('Update') }
-        </button>
-      </div>
-    </div>
-  );
-};
-
 const TestProcess = ({
   apiv3Post, slackAppIntegrationId, onSubmitForm, onSubmitFormFailed, isLatestConnectionSuccess,
 }) => {