feat: add Roles page

* Add the Roles page which allows CRUDL operations on Roles.

Addresses https://github.com/topcoder-platform/taas-app/issues/403

Author: cagdas001

src/assets/images/icon-menu-item-roles.svg

@@ -0,0 +1,29 @@
+import React from "react";
+import PT from "prop-types";
+import cn from "classnames";
+import IconWrapper from "components/IconWrapper";
+import IconRoleManagement from "../../../assets/images/icon-menu-item-roles.svg";
+import styles from "./styles.module.scss";
+
+/**
+ * Displays a "role management" icon used in navigation menu.
+ *
+ * @param {Object} props component props
+ * @param {string} [props.className] class name added to root element
+ * @param {boolean} [props.isActive] a flag indicating whether the icon is active
+ * @returns {JSX.Element}
+ */
+const Roles = ({ className, isActive = false }) => (
+  <IconWrapper
+    className={cn(styles.container, className, { [styles.isActive]: isActive })}
+  >
+    <IconRoleManagement />
+  </IconWrapper>
+);
+
+Roles.propTypes = {
+  className: PT.string,
+  isActive: PT.bool,
+};
+
+export default Roles;

src/assets/images/icon-role-fallback.svg

@@ -0,0 +1,19 @@
+.container {
+  svg {
+    display: block;
+    width: auto;
+    height: 100%;
+
+    path {
+      fill: #7f7f7f;
+    }
+  }
+
+  &.isActive {
+    svg {
+      path {
+        fill: #06d6a0;
+      }
+    }
+  }
+}

src/assets/images/icon-search.svg

@@ -5,6 +5,7 @@ import NavMenu from "components/NavMenu";
 import styles from "./styles.module.scss";
 import WorkPeriods from "components/Icons/WorkPeriods";
 import Freelancers from "components/Icons/Freelancers";
+import Roles from "components/Icons/Roles";
 import { APP_BASE_PATH } from "../../constants";
 
 /**
@@ -38,6 +39,11 @@ const NAV_ITEMS = [
     label: "Freelancers",
     path: `${APP_BASE_PATH}/freelancers`,
   },
+  {
+    icon: Roles,
+    label: "Roles",
+    path: `${APP_BASE_PATH}/roles`,
+  },
 ];
 
 export default Sidebar;

src/components/Icons/Roles/index.jsx

@@ -1,9 +1,9 @@
 import React, { useCallback, useRef, useState } from "react";
 import PT from "prop-types";
 import cn from "classnames";
+import get from "lodash/get";
 import throttle from "lodash/throttle";
 import Select, { components } from "react-select";
-import { getMemberSuggestions } from "services/teams";
 import { useUpdateEffect } from "utils/hooks";
 import styles from "./styles.module.scss";
 
@@ -75,9 +75,11 @@ const selectComponents = {
  * @param {function} [props.onInputChange] function called when input value changes
  * @param {function} [props.onBlur] function called on input blur
  * @param {string} props.value input value
+ * @param {function} props.getSuggestions the function to get suggestions
+ * @param {string} props.targetProp the target property of the returned object from getSuggestions
  * @returns {JSX.Element}
  */
-const SearchHandleField = ({
+const Typeahead = ({
   className,
   id,
   name,
@@ -87,6 +89,8 @@ const SearchHandleField = ({
   onBlur,
   placeholder,
   value,
+  getSuggestions,
+  targetProp,
 }) => {
   const [inputValue, setInputValue] = useState(value);
   const [isLoading, setIsLoading] = useState(false);
@@ -165,11 +169,15 @@ const SearchHandleField = ({
           return;
         }
         setIsLoading(true);
-        const options = await loadSuggestions(value);
+        setIsMenuOpen(true);
+        const options = await loadSuggestions(
+          getSuggestions,
+          value,
+          targetProp
+        );
         if (!isChangeAppliedRef.current) {
           setOptions(options);
           setIsLoading(false);
-          setIsMenuOpen(true);
         }
       },
       300,
@@ -223,17 +231,17 @@ const SearchHandleField = ({
   );
 };
 
-const loadSuggestions = async (inputValue) => {
+const loadSuggestions = async (getSuggestions, inputValue, targetProp) => {
   let options = [];
   if (inputValue.length < 3) {
     return options;
   }
   try {
-    const res = await getMemberSuggestions(inputValue);
-    const users = res.data.slice(0, 100);
+    const res = await getSuggestions(inputValue);
+    const items = res.data.slice(0, 100);
     let match = null;
-    for (let i = 0, len = users.length; i < len; i++) {
-      let value = users[i].handle;
+    for (let i = 0, len = items.length; i < len; i++) {
+      let value = get(items[i], targetProp);
       if (value === inputValue) {
         match = { value, label: value };
       } else {
@@ -250,7 +258,7 @@ const loadSuggestions = async (inputValue) => {
   return options;
 };
 
-SearchHandleField.propTypes = {
+Typeahead.propTypes = {
   className: PT.string,
   id: PT.string.isRequired,
   size: PT.oneOf(["medium", "small"]),
@@ -260,6 +268,8 @@ SearchHandleField.propTypes = {
   onBlur: PT.func,
   placeholder: PT.string,
   value: PT.oneOfType([PT.number, PT.string]),
+  getSuggestions: PT.func,
+  targetProp: PT.string,
 };
 
-export default SearchHandleField;
+export default Typeahead;

src/components/Icons/Roles/styles.module.scss

@@ -8,6 +8,8 @@ export const WORK_PERIODS_PATH = `${APP_BASE_PATH}/work-periods`;
 
 export const FREELANCERS_PATH = `${APP_BASE_PATH}/freelancers`;
 
+export const ROLES_PATH = `${APP_BASE_PATH}/roles`;
+
 export const TAAS_BASE_PATH = "/taas";
 
 export const ADMIN_ROLES = ["bookingmanager", "administrator"];

src/components/Sidebar/index.jsx

@@ -5,10 +5,12 @@ import store from "store";
 import { disableSidebarForRoute } from "@topcoder/micro-frontends-navbar-app";
 import WorkPeriods from "routes/WorkPeriods";
 import Freelancers from "routes/Freelancers";
+import Roles from "routes/Roles";
 import {
   APP_BASE_PATH,
   FREELANCERS_PATH,
   WORK_PERIODS_PATH,
+  ROLES_PATH,
 } from "./constants";
 import "styles/global.scss";
 
@@ -23,6 +25,7 @@ export default function Root() {
         <Redirect from={APP_BASE_PATH} to={WORK_PERIODS_PATH} exact noThrow />
         <WorkPeriods path={WORK_PERIODS_PATH} />
         <Freelancers path={FREELANCERS_PATH} />
+        <Roles path={ROLES_PATH} />
       </Router>
     </Provider>
   );