Added access lavels based on roles

.nvmrc

@@ -1 +1 @@
-10.22.1
+14.16.0

package.json

@@ -69,6 +69,7 @@
     "moment": "^2.29.1",
     "moment-timezone": "^0.5.33",
     "prop-types": "^15.7.2",
+    "qs": "^6.10.1",
     "react": "^16.12.0",
     "react-avatar": "^3.9.7",
     "react-datepicker": "^3.4.1",

src/api/mock/betaMembers.json

@@ -9,9 +9,16 @@
     "accepted": 1,
     "denied": 1,
     "no_response": 1,
+    "availability": "9:00 - 14:00 EDT",
     "notes": [
-      "Newer note msg...",
-      "Lorem Ipsum is simply dummy text of the printing and typesetting industry.\n Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
+      {
+        "created_on": "2021-03-31T14:22:29.905Z",
+        "text": "Newer note msg..."
+      },
+      {
+        "created_on": "2021-03-31T13:22:29.905Z",
+        "text": "Lorem Ipsum is simply dummy text of the printing and typesetting industry.\n Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
+      }      
     ]
   },
   {
@@ -24,6 +31,7 @@
     "accepted": 1,
     "denied": 0,
     "no_response": 0,
+    "availability": "9:00 - 14:00 EDT",
     "notes": []
   },
   {
@@ -36,6 +44,7 @@
     "accepted": 1,
     "denied": 0,
     "no_response": 0,
+    "availability": "9:00 - 14:00 EDT",
     "notes": []
   },
   {
@@ -48,6 +57,7 @@
     "accepted": 1,
     "denied": 0,
     "no_response": 0,
+    "availability": "9:00 - 14:00 EDT",
     "notes": []
   },
   {
@@ -60,6 +70,7 @@
     "accepted": 1,
     "denied": 0,
     "no_response": 0,
+    "availability": "9:00 - 14:00 EDT",
     "notes": []
   },
   {
@@ -72,6 +83,7 @@
     "accepted": 0,
     "denied": 0,
     "no_response": 0,
+    "availability": "9:00 - 14:00 EDT",
     "notes": []
   },
   {
@@ -84,6 +96,7 @@
     "accepted": 1,
     "denied": 0,
     "no_response": 0,
+    "availability": "9:00 - 14:00 EDT",
     "notes": []
   },
   {
@@ -96,6 +109,7 @@
     "accepted": 1,
     "denied": 0,
     "no_response": 0,
+    "availability": "9:00 - 14:00 EDT",
     "notes": []
   },
   {
@@ -108,6 +122,7 @@
     "accepted": 1,
     "denied": 0,
     "no_response": 0,
+    "availability": "9:00 - 14:00 EDT",
     "notes": []
   },
   {
@@ -120,6 +135,7 @@
     "accepted": 1,
     "denied": 0,
     "no_response": 0,
+    "availability": "9:00 - 14:00 EDT",
     "notes": []
   },
   {
@@ -132,6 +148,7 @@
     "accepted": 1,
     "denied": 0,
     "no_response": 0,
+    "availability": "9:00 - 14:00 EDT",
     "notes": []
   },
   {
@@ -156,6 +173,7 @@
     "accepted": 1,
     "denied": 0,
     "no_response": 0,
+    "availability": "9:00 - 14:00 EDT",
     "notes": []
   },
   {
@@ -168,6 +186,7 @@
     "accepted": 1,
     "denied": 0,
     "no_response": 0,
+    "availability": "9:00 - 14:00 EDT",
     "notes": []
   }
 ]

src/components/AsyncSelect/index.jsx

@@ -87,8 +87,8 @@ const AsyncSelect = (props) => {
         defaultOptions={props.defaultOptions}
       />
     </div>
-  )
-}
+  );
+};
 
 AsyncSelect.propTypes = {
   value: PT.string,
@@ -100,12 +100,11 @@ AsyncSelect.propTypes = {
   onFocus: PT.func,
   onInputChange: PT.func,
   cacheOptions: PT.bool,
-  onInputChange: PT.func,
   noOptionsText: PT.string,
   loadingText: PT.string,
   loadOptions: PT.func,
   defaultOptions: PT.bool || PT.array,
   disabled: PT.bool,
-}
+};
 
-export default AsyncSelect;
+export default AsyncSelect;

src/components/NoAccessPage/index.jsx

@@ -0,0 +1,27 @@
+/**
+ * No access page
+ * shown to members without Community Admin role
+ */
+import React from "react";
+import Page from "components/Page";
+import PageHeader from "components/PageHeader";
+import "./styles.module.scss";
+
+const NoAccessPage = () => {
+  return (
+    <Page title="Forbidden">
+      <PageHeader title="Forbidden Area" />
+      <h4 styleName="msg">
+        Sorry, looks that you not autorized to access this page :(
+      </h4>
+      <p>
+        If you feel this is an error, contact{" "}
+        <a href="mailto:[email protected]">Kiril</a> or{" "}
+        <a href="mailto:[email protected]">Nick</a> from the Community Team
+        for assistance.
+      </p>
+    </Page>
+  );
+};
+
+export default NoAccessPage;

src/components/NoAccessPage/styles.module.scss

@@ -0,0 +1,9 @@
+.msg {
+  color: red;
+  margin-bottom: 20px;
+}
+
+a {
+  color: blue;
+  text-decoration: underline;
+}

src/components/User/index.jsx

@@ -12,8 +12,14 @@ import { TOPCODER_COMMUNITY_WEBSITE_URL } from "../../../config";
 import IconDirectArrow from "../../assets/images/icon-direct-arrow.svg";
 import { Link } from "@reach/router";
 
-const User = ({ showArrow, user, hideFullName = false, handleLinkTo, noLink }) => {
-  let link = <strong>{user.handle}</strong>
+const User = ({
+  showArrow,
+  user,
+  hideFullName = false,
+  handleLinkTo,
+  noLink,
+}) => {
+  let link = <strong>{user.handle}</strong>;
 
   // if we set flag for no-link, then don't add link
   if (!noLink) {
@@ -29,7 +35,7 @@ const User = ({ showArrow, user, hideFullName = false, handleLinkTo, noLink }) =
       >
         <strong>{user.handle}</strong>
       </a>
-    )
+    );
   }
 
   return (

src/constants/index.js

@@ -305,22 +305,32 @@ export const appMenu = [
       "https://platform.topcoder.com/navbar/images/9df8566972f4b6d8b94b0367a6e27929.svg",
   },
   {
-    title: "BETA TESTERS",
+    title: "MEMBER VISIBILITY",
     children: [
       {
-        title: "Members",
-        path: "/community-admin/beta-testters/members",
-      },
-      {
-        title: "Tests",
-        path: "/community-admin/beta-testters/tests",
-      },
-      {
-        title: "Applications",
-        path: "/community-admin/beta-testters/applications",
+        title: "All",
+        path: "/community-admin/member-visibility/all",
       },
     ],
   },
+  // Will need at some later release...
+  // {
+  //   title: "BETA TESTERS",
+  //   children: [
+  //     {
+  //       title: "Members",
+  //       path: "/community-admin/beta-testters/members",
+  //     },
+  //     {
+  //       title: "Tests",
+  //       path: "/community-admin/beta-testters/tests",
+  //     },
+  //     {
+  //       title: "Applications",
+  //       path: "/community-admin/beta-testters/applications",
+  //     },
+  //   ],
+  // },
 ];
 
 // Member Category Filter

src/constants/permissions.js

@@ -59,6 +59,7 @@ export const TOPCODER_ROLE = {
   TOPCODER_USER: "Topcoder User",
   CONNECT_ADMIN: "Connect Admin",
   COPILOT_MANAGER: "Connect Copilot Manager",
+  COMMUNITY_ADMIN: "Community Admin",
 };
 
 /**
@@ -144,4 +145,13 @@ export const PERMISSIONS = {
       TOPCODER_ROLE.COPILOT_MANAGER,
     ],
   },
+
+  // Community Admins
+  ACCESS_COMMUNITY_ADMIN_APP: {
+    meta: {
+      group: "Community",
+      title: "Access the community admin app",
+    },
+    topcoderRoles: [TOPCODER_ROLE.COMMUNITY_ADMIN],
+  },
 };

src/root.component.jsx

@@ -5,6 +5,7 @@ import ReduxToastr from "react-redux-toastr";
 import { setAppMenu } from "@topcoder/micro-frontends-navbar-app";
 import { appMenu } from "./constants";
 import Home from "./routes/Home";
+import MemberVisibility from "./routes/MemberVisibility/All";
 import BetaTesterMembers from "./routes/BetaTesters/Members";
 import store from "./store";
 import "./styles/main.vendor.scss";
@@ -21,7 +22,8 @@ export default function Root() {
       <Provider store={store}>
         <Router>
           <Home path="/community-admin" />
-          <BetaTesterMembers path="/community-admin/beta-testters/members" />
+          <MemberVisibility path="/community-admin/member-visibility/all" />
+          {/* <BetaTesterMembers path="/community-admin/beta-testters/members" /> Will need for some next release... */}
         </Router>
 
         {/* Global config for Toastr popups */}

src/routes/BetaTesters/Members/components/ProfileModal/index.jsx

@@ -5,8 +5,6 @@
 import React from "react";
 import BaseModal from "components/BaseModal";
 import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
-import Button from "components/Button";
-import TesterForm from "../TesterForm";
 import "./styles.module.scss";
 
 const ProfileModal = ({ profileModal, onClose }) => {
@@ -24,7 +22,6 @@ const ProfileModal = ({ profileModal, onClose }) => {
               <Tab>Information</Tab>
               <Tab>Notes</Tab>
               <Tab>History</Tab>
-              <Tab>Update</Tab>
             </TabList>
 
             <TabPanel>
@@ -43,29 +40,13 @@ const ProfileModal = ({ profileModal, onClose }) => {
             </TabPanel>
             <TabPanel>
               {profileModal.notes.map((note) => (
-                <p styleName="memberNote">{note}</p>
+                <div styleName="memberNote">
+                  <span>{note.created_on}</span>
+                  <p>{note.text}</p>
+                </div>
               ))}
             </TabPanel>
             <TabPanel></TabPanel>
-            <TabPanel>
-              <div styleName="testerUpdate">
-                <TesterForm
-                  initTester={profileModal}
-                  onChange={(t) => console.log("TesterForm", t)}
-                />
-                <Button
-                  type="primary"
-                  // disabled={
-                  //   !profileModal.handle ||
-                  //   !profileModal.category ||
-                  //   !isValidEmail(profileModal.email)
-                  // }
-                  // onClick={() => onSave(tester)}
-                >
-                  Save
-                </Button>
-              </div>
-            </TabPanel>
           </Tabs>
         </div>
       ) : null}