Modified translation & Modified design

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

@@ -322,7 +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.",
+      "allowed_channels_description": "Input allowed channels for \"{{commandName}}\" command. Separate each channel with \",\" . Users can will be able to use \"{{commandName}}\" command 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,7 +321,7 @@
       "manage_commands": "使用可能なGROWIコマンドを設定する",
       "multiple_growi_command": "複数のGROWIに対して送信できるコマンド",
       "single_growi_command": "一つのGROWIに対して送信できるコマンド",
-      "allowed_channels_description": "{{commandName}} コマンドの使用を許可するチャンネルを \",\" 区切りで入力してください。ユーザーはここに記入されているチャンネルから {{commandName}} コマンドを使用することができます。",
+      "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,7 +331,7 @@
       "manage_commands": "管理 GROWI 命令",
       "multiple_growi_command": "可以一次发送到多个 GROWI 实例的命令",
       "single_growi_command": "可以一次发送到一个 GROWI 实例的命令",
-      "allowed_channels_description": "为 {{commandName}} 命令输入允许的通道。每个通道之间用 \",\" 隔开。用户可以从这里写入的通道中使用 {{commandName}}。",
+      "allowed_channels_description": "为 \"{{commandName}}\" 命令输入允许的通道。每个通道之间用 \",\" 隔开。用户可以从这里写入的通道中使用 \"{{commandName}}\"。",
       "test_connection": "测试连接",
       "test_connection_by_pressing_button": "按下按钮以测试连接",
       "error_check_logs_below": "发生了错误。请检查以下日志。",

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

@@ -87,15 +87,20 @@ const ManageCommandsProcess = ({
   return (
     <div className="py-4 px-5">
       <p className="mb-4 font-weight-bold">{t('admin:slack_integration.accordion.manage_commands')}</p>
-      <div className="d-flex flex-column align-items-center">
+      <div className="row d-flex flex-column align-items-center">
 
-        <div>
+        <div className="col-md-6">
           <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="pl-5 custom-control custom-checkbox">
             <div className="row mb-5 d-block">
               {defaultSupportedCommandsNameForBroadcastUse.map((commandName) => {
 
+                let hiddenClass = '';
+                if (selectedCommandsForBroadcastUse.has(commandName)) {
+                  hiddenClass = 'd-none';
+                }
+
                 const allowedChannels = permittedChannelsForEachCommand.channelsObject[commandName];
                 let defaultAllowedChannels;
                 if (allowedChannels) {
@@ -121,7 +126,7 @@ const ManageCommandsProcess = ({
                         {commandName}
                       </label>
                     </div>
-                    <div className="row-12 row-md-6">
+                    <div className={`row-12 row-md-6 ${hiddenClass}`}>
                       <textarea
                         className="form-control"
                         type="textarea"
@@ -140,11 +145,16 @@ const ManageCommandsProcess = ({
             </div>
           </div>
 
-          <p className="font-weight-bold mb-0">Single GROWI</p>
+          <p className="font-weight-bold mb-0 mt-4">Single GROWI</p>
           <p className="text-muted mb-2">{t('admin:slack_integration.accordion.single_growi_command')}</p>
-          <div className="custom-control custom-checkbox">
-            <div className="row mb-5">
-              {defaultSupportedCommandsNameForSingleUse.map((commandName) => {
+          <div className="pl-5 custom-control custom-checkbox">
+            <div className="row mb-5 d-block">
+              {['create', 'togetter'].map((commandName) => {
+
+                let hiddenClass = '';
+                if (selectedCommandsForSingleUse.has(commandName)) {
+                  hiddenClass = 'd-none';
+                }
 
                 const allowedChannels = permittedChannelsForEachCommand.channelsObject[commandName];
                 let defaultAllowedChannels;
@@ -156,7 +166,7 @@ const ManageCommandsProcess = ({
                 }
 
                 return (
-                  <div className="row-6 my-1" key={commandName}>
+                  <div className="row-6 my-1 mb-2" key={commandName}>
                     <div className="row-6 my-3">
                       <input
                         type="checkbox"
@@ -171,7 +181,7 @@ const ManageCommandsProcess = ({
                         {commandName}
                       </label>
                     </div>
-                    <div className="row-12 row-md-6">
+                    <div className={`row-12 row-md-6 ${hiddenClass}`}>
                       <textarea
                         className="form-control"
                         type="textarea"