Repository: hasura/graphql-engine
File: console/src/components/Services/Actions/Permissions/Permissions.js (JavaScript)

Code before:
              className += ` ${styles.currEdit}`;
            }
          }

          const getRoleQueryPermission = () => {
            let _permission;
            if (role === 'admin') {
              _permission = permissionsSymbols.fullAccess;
            } else if (isNewRole) {
              _permission = permissionsSymbols.noAccess;
            } else {
              const existingPerm = findActionPermission(allPermissions, role);
              if (!existingPerm) {
                _permission = permissionsSymbols.noAccess;
              } else {
                _permission = permissionsSymbols.fullAccess;
              }
            }
            return _permission;
          };

          return {
            permType: queryType,
            className,
            editIcon: editIcon,
            onClick: !readOnlyMode && onClick,
            dataTest: `${role}-${queryType}`,
            access: getRoleQueryPermission(),
          };
        });
      };

      // form rolesList and permissions metadata associated with each role
      const _roleList = ['admin', ...allRoles];
      const rolePermissions = _roleList.map(r => {
        return {
          roleName: r,
          permTypes: getQueryTypes(r, false),
        };
      });

      // push permissions metadata associated with the new role
      rolePermissions.push({
        roleName: permissionEdit.newRole,
        permTypes: getQueryTypes(permissionEdit.newRole, true),
        isNewRole: true,
      });

      // form permissions table body based on the roles and their metadata
      return (
        <PermTableBody

Review comment (suggestion):
It results in an error:

<img width="1545" alt="Screenshot 2020-06-03 at 16 31 17" src="https://user-images.githubusercontent.com/9019397/83649606-ad1a4680-a5b7-11ea-93b2-6080ecf2a485.png">


Code after:
              onClick = dispatchOpenEdit(queryType);
            }
          }

          const getRoleQueryPermission = () => {
            let _permission;
            if (role === 'admin') {
              _permission = permissionsSymbols.fullAccess;
            } else if (isNewRole) {
              _permission = permissionsSymbols.noAccess;
            } else {
              const existingPerm = findActionPermission(allPermissions, role);
              if (!existingPerm) {
                _permission = permissionsSymbols.noAccess;
              } else {
                _permission = permissionsSymbols.fullAccess;
              }
            }
            return _permission;
          };

          return {
            permType: queryType,
            className,
            editIcon: editIcon,
            onClick,
            dataTest: `${role}-${queryType}`,
            access: getRoleQueryPermission(),
          };
        });
      };

      // form rolesList and permissions metadata associated with each role
      const _roleList = ['admin', ...allRoles];
      const rolePermissions = _roleList.map(r => {
        return {
          roleName: r,
          permTypes: getQueryTypes(r, false),
        };
      });

      // push permissions metadata associated with the new role
      rolePermissions.push({
        roleName: permissionEdit.newRole,
        permTypes: getQueryTypes(permissionEdit.newRole, true),
        isNewRole: true,
      });

      // form permissions table body based on the roles and their metadata
      return (
        <PermTableBody