Worked correctly

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

@@ -323,6 +323,12 @@
       "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}}\" command from channels written here.",
+      "allow_all": "Allow all",
+      "deny_all": "Deny all",
+      "allow_specified": "Allow specified",
+      "allow_all_long": "Allow all (The command is allowed from any channel)",
+      "deny_all_long": "Deny all (The command is denied from any channel)",
+      "allow_specified_long": "Allow specified (The command is allowed from only specified channels)",
       "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

@@ -322,6 +322,12 @@
       "multiple_growi_command": "複数のGROWIに対して送信できるコマンド",
       "single_growi_command": "一つのGROWIに対して送信できるコマンド",
       "allowed_channels_description": "\"{{commandName}}\" コマンドの使用を許可するチャンネルを \",\" 区切りで入力してください。ユーザーはここに記入されているチャンネルから \"{{commandName}}\" コマンドを使用することができます。",
+      "allow_all": "全てのチャンネルを許可",
+      "deny_all": "全てのチャンネルを拒否",
+      "allow_specified": "特定のチャンネルを許可",
+      "allow_all-long": "全て許可 (このコマンドは全てのチャンネルから使用することができます)",
+      "deny_all-long": "全て拒否 (このコマンドはどのチャンネルからも使用することはできません)",
+      "allow_specified-long": "特定のチャンネルを許可 (テキストボックスに入力されたチャンネルのみ許可されます)",
       "test_connection": "連携状況のテストをする",
       "test_connection_by_pressing_button": "以下のテストボタンを押して、Slack連携が完了しているかの確認をしましょう",
       "error_check_logs_below": "エラーが発生しました。下記のログを確認してください。",

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

@@ -332,6 +332,12 @@
       "multiple_growi_command": "可以一次发送到多个 GROWI 实例的命令",
       "single_growi_command": "可以一次发送到一个 GROWI 实例的命令",
       "allowed_channels_description": "为 \"{{commandName}}\" 命令输入允许的通道。每个通道之间用 \",\" 隔开。用户可以从这里写入的通道中使用 \"{{commandName}}\"。",
+      "allow_all": "允许所有",
+      "deny_all": "拒绝所有",
+      "allow_specified": "允许指定",
+      "allow_all_long": "允许所有（允许从任何通道发出命令）",
+      "deny_all_long": "拒绝所有（该命令被拒绝于任何通道）",
+      "allow_specified_long": "允许指定（该命令只允许来自指定的通道）",
       "test_connection": "测试连接",
       "test_connection_by_pressing_button": "按下按钮以测试连接",
       "error_check_logs_below": "发生了错误。请检查以下日志。",

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

@@ -13,46 +13,64 @@ const ManageCommandsProcess = ({
   apiv3Put, slackAppIntegrationId, supportedCommandsForBroadcastUse, supportedCommandsForSingleUse,
 }) => {
   const { t } = useTranslation();
-  // TODO: use data from server GW-7006
-  const [permissionSettingsForBroadcastUseCommands, setPermissionSettingsForBroadcastUseCommands] = useState({});
-  const [permissionSettingsForSingleUseCommands, setPermissionSettingsForSingleUseCommands] = useState({});
-
   const permissionTypes = {
     ALLOW_ALL: 'allowAll',
     DENY_ALL: 'denyAll',
     ALLOW_SPECIFIED: 'allowSpecified',
   };
 
-  const getCurrentPermissionTypeOfCommand = (state, commandName) => {
-    if (state[commandName] === true) {
-      return permissionTypes.ALLOW_ALL;
-    }
-    if (state[commandName] === false) {
-      return permissionTypes.DENY_ALL;
-    }
-    if (Array.isArray(state[commandName])) {
-      return permissionTypes.ALLOW_SPECIFIED;
-    }
-    return new Error('Not implemented');
+  // TODO: use data from server GW-7006
+  const [permissionSettingsForBroadcastUseCommands, setPermissionSettingsForBroadcastUseCommands] = useState({
+    search: true,
+  });
+  const [permissionSettingsForSingleUseCommands, setPermissionSettingsForSingleUseCommands] = useState({
+    create: false,
+    togetter: [],
+  });
+  const getInitialCurrentPermissionTypes = () => {
+    const getPermissionTypeFromValue = (value) => {
+      if (value === true) {
+        return permissionTypes.ALLOW_ALL;
+      }
+      if (value === false) {
+        return permissionTypes.DENY_ALL;
+      }
+      if (Array.isArray(value)) {
+        return permissionTypes.ALLOW_SPECIFIED;
+      }
+    };
+    const initialValue = {};
+    Object.entries(permissionSettingsForBroadcastUseCommands).forEach((entry) => {
+      const [commandName, value] = entry;
+      initialValue[commandName] = getPermissionTypeFromValue(value);
+    });
+    Object.entries(permissionSettingsForSingleUseCommands).forEach((entry) => {
+      const [commandName, value] = entry;
+      initialValue[commandName] = getPermissionTypeFromValue(value);
+    });
+    return initialValue;
   };
+  const [currentPermissionTypes, setCurrentPermissionTypes] = useState(getInitialCurrentPermissionTypes());
 
+  // returns new state
   const getUpdatedPermissionSettings = (prevState, commandName, value) => {
+    const newState = { ...prevState };
     switch (value) {
       case permissionTypes.ALLOW_ALL:
-        prevState[commandName] = true;
+        newState[commandName] = true;
         break;
       case permissionTypes.DENY_ALL:
-        prevState[commandName] = false;
+        newState[commandName] = false;
         break;
       case permissionTypes.ALLOW_SPECIFIED:
-        prevState[commandName] = [];
+        newState[commandName] = [];
         break;
       default:
         logger.error('Not implemented');
         break;
     }
 
-    return prevState;
+    return newState;
   };
 
   const updatePermissionSettingsForBroadcastUseCommands = (e) => {
@@ -63,6 +81,11 @@ const ManageCommandsProcess = ({
     setPermissionSettingsForBroadcastUseCommands((prevState) => {
       return getUpdatedPermissionSettings(prevState, commandName, value);
     });
+    setCurrentPermissionTypes((prevState) => {
+      const newState = { ...prevState };
+      newState[commandName] = value;
+      return newState;
+    });
   };
 
   const updatePermissionSettingsForSingleUseCommands = (e) => {
@@ -73,16 +96,22 @@ const ManageCommandsProcess = ({
     setPermissionSettingsForSingleUseCommands((prevState) => {
       return getUpdatedPermissionSettings(prevState, commandName, value);
     });
+    setCurrentPermissionTypes((prevState) => {
+      const newState = { ...prevState };
+      newState[commandName] = value;
+      return newState;
+    });
   };
 
   const getUpdatedChannelsList = (prevState, commandName, value) => {
+    const newState = { ...prevState };
     // string to array
     const allowedChannelsArray = value.split(',');
     // trim whitespace from all elements
     const trimedAllowedChannelsArray = allowedChannelsArray.map(channelName => channelName.trim());
 
     prevState[commandName] = trimedAllowedChannelsArray;
-    return prevState;
+    return newState;
   };
 
   const updateChannelsListForBroadcastUseCommands = (e) => {
@@ -103,6 +132,13 @@ const ManageCommandsProcess = ({
     });
   };
 
+  const getDefaultValueForChannelsTextArea = (permissionSettings, commandName) => {
+    if (permissionSettings[commandName] === undefined) throw new Error('Must be implemented');
+    if (typeof permissionSettings[commandName] === 'boolean') return '';
+
+    return permissionSettings[commandName].join(',');
+  };
+
   // TODO: UPDATE API AND REWRITE HERE GW-7006
   const updateCommandsHandler = async() => {
     try {
@@ -124,31 +160,97 @@ const ManageCommandsProcess = ({
       <p className="mb-4 font-weight-bold">{t('admin:slack_integration.accordion.manage_commands')}</p>
       <div className="row d-flex flex-column align-items-center">
 
-        <div className="col-md-6">
+        <div className="col-8">
           <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="pl-5 custom-control custom-checkbox">
+          <div className="custom-control custom-checkbox">
             <div className="row mb-5 d-block">
               {defaultSupportedCommandsNameForBroadcastUse.map((commandName) => {
-                return (<div></div>);
+                const hiddenClass = currentPermissionTypes[commandName] === permissionTypes.ALLOW_SPECIFIED ? '' : 'd-none';
+
+                return (
+                  <div className="row-6 my-1 mb-2" key={commandName}>
+                    <div className="row align-items-center mb-3">
+                      <p className="col my-auto text-capitalize align-middle">{commandName}</p>
+                      <div className="col dropdown">
+                        <button
+                          className="btn btn-outline-secondary dropdown-toggle text-right col-12 col-md-auto"
+                          type="button"
+                          id="dropdownMenuButton"
+                          data-toggle="dropdown"
+                          aria-haspopup="true"
+                          aria-expanded="true"
+                        >
+                          <span className="float-left">
+                            {currentPermissionTypes[commandName] === permissionTypes.ALLOW_ALL
+                            && t('admin:slack_integration.accordion.allow_all')}
+                            {currentPermissionTypes[commandName] === permissionTypes.DENY_ALL
+                            && t('admin:slack_integration.accordion.deny_all')}
+                            {currentPermissionTypes[commandName] === permissionTypes.ALLOW_SPECIFIED
+                            && t('admin:slack_integration.accordion.allow_specified')}
+                          </span>
+                        </button>
+                        <div className="dropdown-menu">
+                          <button
+                            className="dropdown-item"
+                            type="button"
+                            name={commandName}
+                            value={permissionTypes.ALLOW_ALL}
+                            onClick={updatePermissionSettingsForBroadcastUseCommands}
+                          >
+                            {t('admin:slack_integration.accordion.allow_all_long')}
+                          </button>
+                          <button
+                            className="dropdown-item"
+                            type="button"
+                            name={commandName}
+                            value={permissionTypes.DENY_ALL}
+                            onClick={updatePermissionSettingsForBroadcastUseCommands}
+                          >
+                            {t('admin:slack_integration.accordion.deny_all_long')}
+                          </button>
+                          <button
+                            className="dropdown-item"
+                            type="button"
+                            name={commandName}
+                            value={permissionTypes.ALLOW_SPECIFIED}
+                            onClick={updatePermissionSettingsForBroadcastUseCommands}
+                          >
+                            {t('admin:slack_integration.accordion.allow_specified_long')}
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+                    <div className={`row-12 row-md-6 ${hiddenClass}`}>
+                      <textarea
+                        className="form-control"
+                        type="textarea"
+                        name={commandName}
+                        defaultValue={getDefaultValueForChannelsTextArea(permissionSettingsForBroadcastUseCommands, commandName)}
+                        onChange={updateChannelsListForBroadcastUseCommands}
+                      />
+                      <p className="form-text text-muted small">
+                        {t('admin:slack_integration.accordion.allowed_channels_description', { commandName })}
+                        <br />
+                      </p>
+                    </div>
+                  </div>
+                );
               })}
             </div>
           </div>
 
           <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="pl-5 custom-control custom-checkbox">
+          <div className="custom-control custom-checkbox">
             <div className="row mb-5 d-block">
               {['create', 'togetter'].map((commandName) => {
-                const hiddenClass = '' || 'd-hidden';
-                const currentPermissionType = getCurrentPermissionTypeOfCommand(permissionSettingsForSingleUseCommands, commandName);
+                const hiddenClass = currentPermissionTypes[commandName] === permissionTypes.ALLOW_SPECIFIED ? '' : 'd-none';
 
                 return (
                   <div className="row-6 my-1 mb-2" key={commandName}>
-                    <div className="row">
-                      <div className="col">
-                        <p className="text-capitalize text-center">{commandName}</p>
-                      </div>
+                    <div className="row align-items-center mb-3">
+                      <p className="col my-auto text-capitalize align-middle">{commandName}</p>
                       <div className="col dropdown">
                         <button
                           className="btn btn-outline-secondary dropdown-toggle text-right col-12 col-md-auto"
@@ -159,11 +261,12 @@ const ManageCommandsProcess = ({
                           aria-expanded="true"
                         >
                           <span className="float-left">
-                            {/* TODO: IMPLEMENT THIS */}
-                            {true && t('MUST BE IMPLEMENTED')}
-                            {currentPermissionType === permissionTypes.ALLOW_ALL && t('MUST BE IMPLEMENTED')}
-                            {currentPermissionType === permissionTypes.DENY_ALL && t('MUST BE IMPLEMENTED')}
-                            {currentPermissionType === permissionTypes.ALLOW_SPECIFIED && t('MUST BE IMPLEMENTED')}
+                            {currentPermissionTypes[commandName] === permissionTypes.ALLOW_ALL
+                            && t('admin:slack_integration.accordion.allow_all')}
+                            {currentPermissionTypes[commandName] === permissionTypes.DENY_ALL
+                            && t('admin:slack_integration.accordion.deny_all')}
+                            {currentPermissionTypes[commandName] === permissionTypes.ALLOW_SPECIFIED
+                            && t('admin:slack_integration.accordion.allow_specified')}
                           </span>
                         </button>
                         <div className="dropdown-menu">
@@ -174,7 +277,7 @@ const ManageCommandsProcess = ({
                             value={permissionTypes.ALLOW_ALL}
                             onClick={updatePermissionSettingsForSingleUseCommands}
                           >
-                            TRANSLATE ALLOW FROM ALL
+                            {t('admin:slack_integration.accordion.allow_all_long')}
                           </button>
                           <button
                             className="dropdown-item"
@@ -183,7 +286,7 @@ const ManageCommandsProcess = ({
                             value={permissionTypes.DENY_ALL}
                             onClick={updatePermissionSettingsForSingleUseCommands}
                           >
-                            TRANSLATE DENY FROM ALL
+                            {t('admin:slack_integration.accordion.deny_all_long')}
                           </button>
                           <button
                             className="dropdown-item"
@@ -192,25 +295,23 @@ const ManageCommandsProcess = ({
                             value={permissionTypes.ALLOW_SPECIFIED}
                             onClick={updatePermissionSettingsForSingleUseCommands}
                           >
-                            TRANSLATE ALLOW FROM ONLY SPECIFIED CHANNELS
+                            {t('admin:slack_integration.accordion.allow_specified_long')}
                           </button>
                         </div>
                       </div>
                     </div>
-                    <div className="row HIDDEN_FALSE_WHEN_ALLOW_SPECIFIED">
-                      <div className={`row-12 row-md-6 ${hiddenClass}`}>
-                        <textarea
-                          className="form-control"
-                          type="textarea"
-                          name={commandName}
-                          defaultValue="GET FROM DATA"
-                          onChange={updateChannelsListForSingleUseCommands}
-                        />
-                        <p className="form-text text-muted small">
-                          {t('admin:slack_integration.accordion.allowed_channels_description', { commandName })}
-                          <br />
-                        </p>
-                      </div>
+                    <div className={`row-12 row-md-6 ${hiddenClass}`}>
+                      <textarea
+                        className="form-control"
+                        type="textarea"
+                        name={commandName}
+                        defaultValue={getDefaultValueForChannelsTextArea(permissionSettingsForSingleUseCommands, commandName)}
+                        onChange={updateChannelsListForSingleUseCommands}
+                      />
+                      <p className="form-text text-muted small">
+                        {t('admin:slack_integration.accordion.allowed_channels_description', { commandName })}
+                        <br />
+                      </p>
                     </div>
                   </div>
                 );
@@ -236,10 +337,11 @@ const ManageCommandsProcess = ({
 ManageCommandsProcess.propTypes = {
   apiv3Put: PropTypes.func,
   slackAppIntegrationId: PropTypes.string.isRequired,
+  // TODO: DEFINE PROP TYPES GW-7006
+  // supportedCommandsForBroadcastUse: PropTypes.object.isRequired,
+  // supportedCommandsForSingleUse: PropTypes.object.isRequired,
   supportedCommandsForBroadcastUse: PropTypes.arrayOf(PropTypes.string),
   supportedCommandsForSingleUse: PropTypes.arrayOf(PropTypes.string),
-  // TODO: validate props originally from SlackIntegration.jsx. Use PropTypes.shape() maybe GW-7006
-  // permittedChannelsForEachCommand: PropTypes.object.isRequired,
 };
 
 export default ManageCommandsProcess;