wip

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

@@ -63,43 +63,41 @@ const getPermissionTypeFromValue = (value) => {
 };
 
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-const ManageCommandsProcess = ({
-  apiv3Put, slackAppIntegrationId, permissionsForBroadcastUseCommands, permissionsForSingleUseCommands,
-}) => {
+const ManageCommandsProcess = ({ apiv3Put, commandPermission }) => {
   const { t } = useTranslation();
 
-  const [permissionsForBroadcastUseCommandsState, setPermissionsForBroadcastUseCommandsState] = useState({
-    search: permissionsForBroadcastUseCommands.search,
-  });
-  const [permissionsForSingleUseCommandsState, setPermissionsForSingleUseCommandsState] = useState({
-    create: permissionsForSingleUseCommands.create,
-    togetter: permissionsForSingleUseCommands.togetter,
-  });
-  const [currentPermissionTypes, setCurrentPermissionTypes] = useState(() => {
-    const initialState = {};
-    Object.entries(permissionsForBroadcastUseCommandsState).forEach((entry) => {
-      const [commandName, value] = entry;
-      initialState[commandName] = getPermissionTypeFromValue(value);
-    });
-    Object.entries(permissionsForSingleUseCommandsState).forEach((entry) => {
-      const [commandName, value] = entry;
-      initialState[commandName] = getPermissionTypeFromValue(value);
-    });
-    return initialState;
-  });
+  // const [permissionsForBroadcastUseCommandsState, setPermissionsForBroadcastUseCommandsState] = useState({
+  //   search: permissionsForBroadcastUseCommands.search,
+  // });
+  // const [permissionsForSingleUseCommandsState, setPermissionsForSingleUseCommandsState] = useState({
+  //   create: permissionsForSingleUseCommands.create,
+  //   togetter: permissionsForSingleUseCommands.togetter,
+  // });
+  // const [currentPermissionTypes, setCurrentPermissionTypes] = useState(() => {
+  //   const initialState = {};
+  //   Object.entries(permissionsForBroadcastUseCommandsState).forEach((entry) => {
+  //     const [commandName, value] = entry;
+  //     initialState[commandName] = getPermissionTypeFromValue(value);
+  //   });
+  //   Object.entries(permissionsForSingleUseCommandsState).forEach((entry) => {
+  //     const [commandName, value] = entry;
+  //     initialState[commandName] = getPermissionTypeFromValue(value);
+  //   });
+  //   return initialState;
+  // });
 
-  const updatePermissionsForBroadcastUseCommandsState = useCallback((e) => {
-    const { target } = e;
-    const { name: commandName, value } = target;
+  // const updatePermissionsForBroadcastUseCommandsState = useCallback((e) => {
+  //   const { target } = e;
+  //   const { name: commandName, value } = target;
 
-    // update state
-    setPermissionsForBroadcastUseCommandsState(prev => getUpdatedPermissionSettings(prev, commandName, value));
-    setCurrentPermissionTypes((prevState) => {
-      const newState = { ...prevState };
-      newState[commandName] = value;
-      return newState;
-    });
-  }, []);
+  //   // update state
+  //   setPermissionsForBroadcastUseCommandsState(prev => getUpdatedPermissionSettings(prev, commandName, value));
+  //   setCurrentPermissionTypes((prevState) => {
+  //     const newState = { ...prevState };
+  //     newState[commandName] = value;
+  //     return newState;
+  //   });
+  // }, []);
 
   // const updatePermissionsForSingleUseCommandsState = useCallback((e) => {
   //   const { target } = e;
@@ -114,36 +112,36 @@ const ManageCommandsProcess = ({
   //   });
   // }, []);
 
-  const updateChannelsListForBroadcastUseCommandsState = useCallback((e) => {
-    const { target } = e;
-    const { name: commandName, value } = target;
-    // update state
-    setPermissionsForBroadcastUseCommandsState(prev => getUpdatedChannelsList(prev, commandName, value));
-  }, []);
+  // const updateChannelsListForBroadcastUseCommandsState = useCallback((e) => {
+  //   const { target } = e;
+  //   const { name: commandName, value } = target;
+  //   // update state
+  //   setPermissionsForBroadcastUseCommandsState(prev => getUpdatedChannelsList(prev, commandName, value));
+  // }, []);
 
-  const updateChannelsListForSingleUseCommandsState = useCallback((e) => {
-    const { target } = e;
-    const { name: commandName, value } = target;
-    // update state
-    setPermissionsForSingleUseCommandsState(prev => getUpdatedChannelsList(prev, commandName, value));
-  }, []);
+  // const updateChannelsListForSingleUseCommandsState = useCallback((e) => {
+  //   const { target } = e;
+  //   const { name: commandName, value } = target;
+  //   // update state
+  //   setPermissionsForSingleUseCommandsState(prev => getUpdatedChannelsList(prev, commandName, value));
+  // }, []);
 
-  const updateCommandsHandler = async(e) => {
-    try {
-      await apiv3Put(`/slack-integration-settings/slack-app-integrations/${slackAppIntegrationId}/supported-commands`, {
-        permissionsForBroadcastUseCommands: permissionsForBroadcastUseCommandsState,
-        permissionsForSingleUseCommands: permissionsForSingleUseCommandsState,
-      });
-      toastSuccess(t('toaster.update_successed', { target: 'Token' }));
-    }
-    catch (err) {
-      toastError(err);
-      logger.error(err);
-    }
-  };
+  // const updateCommandsHandler = async(e) => {
+  //   try {
+  //     await apiv3Put(`/slack-integration-settings/slack-app-integrations/${slackAppIntegrationId}/supported-commands`, {
+  //       permissionsForBroadcastUseCommands: permissionsForBroadcastUseCommandsState,
+  //       permissionsForSingleUseCommands: permissionsForSingleUseCommandsState,
+  //     });
+  //     toastSuccess(t('toaster.update_successed', { target: 'Token' }));
+  //   }
+  //   catch (err) {
+  //     toastError(err);
+  //     logger.error(err);
+  //   }
+  // };
 
   const PermissionSettingForEachCommandComponent = ({ commandName, commandUsageType }) => {
-    const hiddenClass = currentPermissionTypes[commandName] === PermissionTypes.ALLOW_SPECIFIED ? '' : 'd-none';
+    // const hiddenClass = currentPermissionTypes[commandName] === PermissionTypes.ALLOW_SPECIFIED ? '' : 'd-none';
     // const isCommandBroadcastUse = commandUsageType === CommandUsageTypes.BROADCAST_USE;
 
     const permissionSettings = ['search'];
@@ -165,14 +163,14 @@ const ManageCommandsProcess = ({
               aria-haspopup="true"
               aria-expanded="true"
             >
-              <span className="float-left">
+              {/* <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>
+              </span> */}
             </button>
             <div className="dropdown-menu">
               <button
@@ -180,7 +178,7 @@ const ManageCommandsProcess = ({
                 type="button"
                 name={commandName}
                 value={PermissionTypes.ALLOW_ALL}
-                onClick={updatePermissionsForBroadcastUseCommandsState}
+                // onClick={updatePermissionsForBroadcastUseCommandsState}
               >
                 {t('admin:slack_integration.accordion.allow_all_long')}
               </button>
@@ -189,7 +187,7 @@ const ManageCommandsProcess = ({
                 type="button"
                 name={commandName}
                 value={PermissionTypes.DENY_ALL}
-                onClick={updatePermissionsForBroadcastUseCommandsState}
+                // onClick={updatePermissionsForBroadcastUseCommandsState}
               >
                 {t('admin:slack_integration.accordion.deny_all_long')}
               </button>
@@ -198,27 +196,27 @@ const ManageCommandsProcess = ({
                 type="button"
                 name={commandName}
                 value={PermissionTypes.ALLOW_SPECIFIED}
-                onClick={updatePermissionsForBroadcastUseCommandsState}
+                // onClick={updatePermissionsForBroadcastUseCommandsState}
               >
                 {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={textareaDefaultValue}
-            onChange={updateChannelsListForBroadcastUseCommandsState}
-          />
-          <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={textareaDefaultValue}
+          // onChange={updateChannelsListForBroadcastUseCommandsState}
+        />
+        <p className="form-text text-muted small">
+          {t('admin:slack_integration.accordion.allowed_channels_description', { commandName })}
+          <br />
+        </p>
       </div>
+      // </div>
     );
   };
 
@@ -268,7 +266,7 @@ const ManageCommandsProcess = ({
         <button
           type="submit"
           className="btn btn-primary mx-auto"
-          onClick={updateCommandsHandler}
+          // onClick={updateCommandsHandler}
         >
           { t('Update') }
         </button>
@@ -279,9 +277,8 @@ const ManageCommandsProcess = ({
 
 ManageCommandsProcess.propTypes = {
   apiv3Put: PropTypes.func,
-  slackAppIntegrationId: PropTypes.string.isRequired,
-  permissionsForBroadcastUseCommands: PropTypes.object.isRequired,
-  permissionsForSingleUseCommands: PropTypes.object.isRequired,
+  commandPermission: PropTypes.string,
+
 };
 
 export default ManageCommandsProcess;