Looks good. Data interaction left

packages/app/resource/locales/en_US/admin/admin.json

@@ -322,6 +322,7 @@
       "manage_commands": "Manage GROWI commands",
       "multiple_growi_command": "Commands that could be sent to multiple GROWI instances at once",
       "single_growi_command": "Commands that could be sent to single GROWI instance at a time",
+      "allowed_channels_description": "Input allowed channels for {{commandName}} command. Separate each channel with \",\" . Users can will be able to use {{commandName}} from channels written here.",
       "test_connection": "Test Connection",
       "test_connection_by_pressing_button": "Press the button to test the connection",
       "error_check_logs_below": "An error has occurred. Please check the logs below.",

packages/app/resource/locales/ja_JP/admin/admin.json

@@ -321,6 +321,7 @@
       "manage_commands": "使用可能なGROWIコマンドを設定する",
       "multiple_growi_command": "複数のGROWIに対して送信できるコマンド",
       "single_growi_command": "一つのGROWIに対して送信できるコマンド",
+      "allowed_channels_description": "{{commandName}} コマンドの使用を許可するチャンネルを \",\" 区切りで入力してください。ユーザーはここに記入されているチャンネルから {{commandName}} コマンドを使用することができます。",
       "test_connection": "連携状況のテストをする",
       "test_connection_by_pressing_button": "以下のテストボタンを押して、Slack連携が完了しているかの確認をしましょう",
       "error_check_logs_below": "エラーが発生しました。下記のログを確認してください。",

packages/app/resource/locales/zh_CN/admin/admin.json

@@ -331,6 +331,7 @@
       "manage_commands": "管理 GROWI 命令",
       "multiple_growi_command": "可以一次发送到多个 GROWI 实例的命令",
       "single_growi_command": "可以一次发送到一个 GROWI 实例的命令",
+      "allowed_channels_description": "为 {{commandName}} 命令输入允许的通道。每个通道之间用 \",\" 隔开。用户可以从这里写入的通道中使用 {{commandName}}。",
       "test_connection": "测试连接",
       "test_connection_by_pressing_button": "按下按钮以测试连接",
       "error_check_logs_below": "发生了错误。请检查以下日志。",

packages/app/src/components/Admin/SlackIntegration/ManageCommandsProcess.jsx

@@ -15,7 +15,7 @@ const ManageCommandsProcess = ({
   const [selectedCommandsForBroadcastUse, setSelectedCommandsForBroadcastUse] = useState(new Set(supportedCommandsForBroadcastUse));
   const [selectedCommandsForSingleUse, setSelectedCommandsForSingleUse] = useState(new Set(supportedCommandsForSingleUse));
 
-  const toggleCheckboxForBroadcast = (e) => {
+  const toggleCheckboxForBroadcastUse = (e) => {
     const { target } = e;
     const { name, checked } = target;
 
@@ -73,22 +73,38 @@ const ManageCommandsProcess = ({
           <p className="font-weight-bold mb-0">Multiple GROWI</p>
           <p className="text-muted mb-2">{t('admin:slack_integration.accordion.multiple_growi_command')}</p>
           <div className="custom-control custom-checkbox">
-            <div className="row mb-5">
+            <div className="row mb-5 d-block">
               {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 className="row-6 my-1" key={commandName}>
+                    <div className="row-6 my-3">
+                      <input
+                        type="checkbox"
+                        className="custom-control-input"
+                        id={commandName}
+                        name={commandName}
+                        value={commandName}
+                        checked={selectedCommandsForBroadcastUse.has(commandName)}
+                        onChange={toggleCheckboxForBroadcastUse}
+                      />
+                      <label className="text-capitalize custom-control-label ml-3" htmlFor={commandName}>
+                        {commandName}
+                      </label>
+                    </div>
+                    <div className="row-12 row-md-6">
+                      <textarea
+                        className="form-control"
+                        type="textarea"
+                        name="permittedChannelsForEachCommand"
+                        // TODO: TAICHI implement data interactions
+                        // defaultValue={adminLocalSecurityContainer.state.registrationWhiteList.join('\n')}
+                        // onChange={e => adminLocalSecurityContainer.changeRegistrationWhiteList(e.target.value)}
+                      />
+                      <p className="form-text text-muted small">
+                        {t('admin:slack_integration.accordion.allowed_channels_description', { commandName })}
+                        <br />
+                      </p>
+                    </div>
                   </div>
                 );
               })}
@@ -101,19 +117,35 @@ const ManageCommandsProcess = ({
             <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 className="row-6 my-1" key={commandName}>
+                    <div className="row-6 my-3">
+                      <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 className="row-12 row-md-6">
+                      <textarea
+                        className="form-control"
+                        type="textarea"
+                        name="permittedChannelsForEachCommand"
+                        // TODO: TAICHI
+                        // defaultValue={adminLocalSecurityContainer.state.registrationWhiteList.join('\n')}
+                        // onChange={e => adminLocalSecurityContainer.changeRegistrationWhiteList(e.target.value)}
+                      />
+                      <p className="form-text text-muted small">
+                        {t('admin:slack_integration.accordion.allowed_channels_description', { commandName })}
+                        <br />
+                      </p>
+                    </div>
                   </div>
                 );
               })}