refactor: permission check for member suggestions

ref issue #14

Author: maxceem

src/constants/index.js

@@ -222,30 +222,3 @@ export const STATUS_OPTIONS = [
   { value: "closed", label: "closed" },
   { value: "cancelled", label: "cancelled" },
 ];
-
-/*
- * TopCoder user roles
- */
-export const ROLE_TOPCODER_USER = "Topcoder User";
-export const ROLE_CONNECT_COPILOT = "Connect Copilot";
-export const ROLE_CONNECT_MANAGER = "Connect Manager";
-export const ROLE_CONNECT_ACCOUNT_MANAGER = "Connect Account Manager";
-export const ROLE_CONNECT_ADMIN = "Connect Admin";
-export const ROLE_ADMINISTRATOR = "administrator";
-export const ROLE_CONNECT_COPILOT_MANAGER = "Connect Copilot Manager";
-export const ROLE_BUSINESS_DEVELOPMENT_REPRESENTATIVE =
-  "Business Development Representative";
-export const ROLE_PRESALES = "Presales";
-export const ROLE_ACCOUNT_EXECUTIVE = "Account Executive";
-export const ROLE_PROGRAM_MANAGER = "Program Manager";
-export const ROLE_SOLUTION_ARCHITECT = "Solution Architect";
-export const ROLE_PROJECT_MANAGER = "Project Manager";
-
-// User roles that can see suggestions when adding new members to project
-export const SEE_SUGGESTION_ROLES = [
-  ROLE_ADMINISTRATOR,
-  ROLE_CONNECT_ADMIN,
-  ROLE_CONNECT_MANAGER,
-  ROLE_CONNECT_ACCOUNT_MANAGER,
-  ROLE_CONNECT_COPILOT_MANAGER,
-];

src/constants/permissions.js

@@ -57,6 +57,8 @@ export const TOPCODER_ROLE = {
   CONNECT_MANAGER: "Connect Manager",
   ADMINISTRATOR: "administrator",
   TOPCODER_USER: "Topcoder User",
+  CONNECT_ADMIN: "Connect Admin",
+  COPILOT_MANAGER: "Connect Copilot Manager",
 };
 
 /**
@@ -75,6 +77,9 @@ export const PROJECT_ROLE = {
  */
 
 export const PERMISSIONS = {
+  /**
+   * Resource Booking
+   */
   EDIT_RESOURCE_BOOKING: {
     meta: {
       group: "Resource Booking",
@@ -91,11 +96,32 @@ export const PERMISSIONS = {
     topcoderRoles: [TOPCODER_ROLE.BOOKING_MANAGER, TOPCODER_ROLE.ADMINISTRATOR],
   },
 
+  /**
+   * Job
+   */
   EDIT_JOB_STATUS: {
     meta: {
       group: "Job",
       title: 'Edit Job "status"',
     },
     topcoderRoles: [TOPCODER_ROLE.BOOKING_MANAGER, TOPCODER_ROLE.ADMINISTRATOR],
   },
+
+  /**
+   * Team
+   */
+  SEE_MEMBER_SUGGESTIONS: {
+    meta: {
+      group: "Team",
+      title: "See Member Suggestions",
+      description: "When entering user handle in the invite field.",
+    },
+    topcoderRoles: [
+      TOPCODER_ROLE.BOOKING_MANAGER,
+      TOPCODER_ROLE.ADMINISTRATOR,
+      TOPCODER_ROLE.CONNECT_ADMIN,
+      TOPCODER_ROLE.CONNECT_MANAGER,
+      TOPCODER_ROLE.COPILOT_MANAGER,
+    ],
+  },
 };

src/hoc/withAuthentication/index.js

@@ -8,7 +8,7 @@ import _ from "lodash";
 import { getAuthUserTokens, login } from "@topcoder/micro-frontends-navbar-app";
 import LoadingIndicator from "../../components/LoadingIndicator";
 import { authUserSuccess, authUserError } from "./actions";
-import { decodeToken } from "utils/helpers";
+import { decodeToken } from "tc-auth-lib";
 import { useDispatch, useSelector } from "react-redux";
 
 export default function withAuthentication(Component) {

src/routes/TeamAccess/components/AddModal/index.jsx

@@ -8,6 +8,7 @@ import Button from "components/Button";
 import BaseModal from "components/BaseModal";
 import ReactSelect from "components/ReactSelect";
 import "./styles.module.scss";
+import { formatPlural } from "utils/format";
 
 // Minimum length of input for suggestions to trigger
 const SUGGESTION_TRIGGER_LENGTH = 3;
@@ -101,10 +102,9 @@ const AddModal = ({ open, onClose, teamId, validateAdds, showSuggestions }) => {
         const { success, failed } = res.value;
         if (success.length) {
           const numAdds = success.length;
-          const plural = numAdds !== 1 ? "s" : "";
           toastr.success(
             "Members Added",
-            `Successfully added ${numAdds} member${plural}`
+            `Successfully added ${numAdds} ${formatPlural(numAdds, 'member')}`
           );
         }
 
@@ -125,7 +125,7 @@ const AddModal = ({ open, onClose, teamId, validateAdds, showSuggestions }) => {
         if (!!err.response) {
           setResponseErrors([err.message]);
         } else {
-          setResponseErrors(["Error occured when adding members"]);
+          setResponseErrors(["Error occurred when adding members"]);
         }
       });
   }, [dispatch, selectedMembers, teamId]);

src/routes/TeamAccess/components/AddModalContainer/index.jsx

@@ -5,9 +5,9 @@
 import React, { useCallback } from "react";
 import _ from "lodash";
 import PT from "prop-types";
-import { SEE_SUGGESTION_ROLES } from "constants";
 import AddModal from "../AddModal";
-import { useTCRoles } from "../../hooks/useTCRoles";
+import { hasPermission } from "utils/permissions";
+import { PERMISSIONS } from "constants/permissions";
 
 /**
  * Checks if a member to be added is already on the team
@@ -28,33 +28,13 @@ const checkForMatches = (newMember, memberList) => {
   return memberList.find((member) => member.handle === label);
 };
 
-/**
- * Checks if member has any of the allowed roles
- * @param {string[]} memberRoles A list of the member's roles
- * @param {string[]} neededRoles A list of allowed roles
- *
- * @returns {boolean} true if member has at least one allowed role, false otherwise
- */
-const hasRequiredRole = (memberRoles, neededRoles) => {
-  return _.some(memberRoles, (role) => {
-    const loweredRole = role.toLowerCase();
-    return neededRoles.find((needed) => {
-      const lowNeeded = needed.toLowerCase();
-      console.log(loweredRole, lowNeeded);
-      return loweredRole === lowNeeded;
-    });
-  });
-};
-
 const AddModalContainer = ({
   members,
   invitees,
   teamId,
   addOpen,
   setAddOpen,
 }) => {
-  const roles = useTCRoles();
-
   const validateAdds = useCallback(
     (newMembers) => {
       return _.some(newMembers, (newMember) => {
@@ -67,17 +47,13 @@ const AddModalContainer = ({
     [members, invitees]
   );
 
-  const shouldShowSuggestions = useCallback(() => {
-    return hasRequiredRole(roles, SEE_SUGGESTION_ROLES);
-  }, [roles]);
-
   return (
     <AddModal
       open={addOpen}
       onClose={() => setAddOpen(false)}
       teamId={teamId}
       validateAdds={validateAdds}
-      showSuggestions={shouldShowSuggestions()}
+      showSuggestions={hasPermission(PERMISSIONS.SEE_MEMBER_SUGGESTIONS)}
     />
   );
 };

src/routes/TeamAccess/hooks/useTCRoles.js

@@ -17,74 +17,3 @@ export const delay = (duration) =>
   new Promise((resolve) => {
     setTimeout(resolve, duration);
   });
-
-/**
- * Decode URL Base64 string
- *
- * This method was taken from https://github.com/topcoder-platform/tc-auth-lib/blob/dev/src/token.js
- *
- * @param {string} str URL base 64 string
- *
- * @returns {string} JSON string
- */
-function urlBase64Decode(str) {
-  let output = str.replace(/-/g, "+").replace(/_/g, "/");
-
-  switch (output.length % 4) {
-    case 0:
-      break;
-
-    case 2:
-      output += "==";
-      break;
-
-    case 3:
-      output += "=";
-      break;
-
-    default:
-      throw new Error("Illegal base64url string!");
-  }
-  return decodeURIComponent(escape(atob(output))); //polyfill https://github.com/davidchambers/Base64.js
-}
-
-/**
- * Decode data of the bearer user token
- *
- * This method was taken from https://github.com/topcoder-platform/tc-auth-lib/blob/dev/src/token.js
- *
- * @param {string} token Bearer user token
- */
-export function decodeToken(token) {
-  const parts = token.split(".");
-
-  if (parts.length !== 3) {
-    throw new Error("The token is invalid");
-  }
-
-  const decoded = urlBase64Decode(parts[1]);
-
-  if (!decoded) {
-    throw new Error("Cannot decode the token");
-  }
-
-  // covert base64 token in JSON object
-  let t = JSON.parse(decoded);
-
-  // tweaking for custom claim for RS256
-  t.userId = _.parseInt(
-    _.find(t, (value, key) => {
-      return key.indexOf("userId") !== -1;
-    })
-  );
-
-  t.handle = _.find(t, (value, key) => {
-    return key.indexOf("handle") !== -1;
-  });
-
-  t.roles = _.find(t, (value, key) => {
-    return key.indexOf("roles") !== -1;
-  });
-
-  return t;
-}