Merge branch 'master' into feature/WIFI-1089

app/containers/Accounts/index.js

@@ -12,7 +12,7 @@ const GET_ALL_USERS = gql`
       items {
         id
         email: username
-        role
+        roles
         lastModifiedTimestamp
         customerId
       }
@@ -22,10 +22,10 @@ const GET_ALL_USERS = gql`
 `;
 
 const CREATE_USER = gql`
-  mutation CreateUser($username: String!, $password: String!, $role: String!, $customerId: ID!) {
+  mutation CreateUser($username: String!, $password: String!, $roles: [String], $customerId: ID!) {
-    createUser(username: $username, password: $password, role: $role, customerId: $customerId) {
+    createUser(username: $username, password: $password, roles: $roles, customerId: $customerId) {
       username
-      role
+      roles
       customerId
     }
   }
@@ -36,7 +36,7 @@ const UPDATE_USER = gql`
     $id: ID!
     $username: String!
     $password: String!
-    $role: String!
+    $roles: [String]
     $customerId: ID!
     $lastModifiedTimestamp: String
   ) {
@@ -44,13 +44,13 @@ const UPDATE_USER = gql`
       id: $id
       username: $username
       password: $password
-      role: $role
+      roles: $roles
       customerId: $customerId
       lastModifiedTimestamp: $lastModifiedTimestamp
     ) {
       id
       username
-      role
+      roles
       customerId
       lastModifiedTimestamp
     }
@@ -95,12 +95,12 @@ const Accounts = () => {
     }
   };
 
-  const handleCreateUser = (email, password, role) => {
+  const handleCreateUser = (email, password, roles) => {
     createUser({
       variables: {
         username: email,
         password,
-        role,
+        roles: [roles],
         customerId,
       },
     })
@@ -119,13 +119,13 @@ const Accounts = () => {
       );
   };
 
-  const handleEditUser = (id, email, password, role, lastModifiedTimestamp) => {
+  const handleEditUser = (id, email, password, roles, lastModifiedTimestamp) => {
     updateUser({
       variables: {
         id,
         username: email,
         password,
-        role,
+        roles: [roles],
         customerId,
         lastModifiedTimestamp,
       },

app/containers/AddProfile/index.js

@@ -4,6 +4,7 @@ import { useMutation, useQuery, gql } from '@apollo/client';
 import { notification } from 'antd';
 import { useHistory } from 'react-router-dom';
 
+import { ROUTES } from 'constants/index';
 import UserContext from 'contexts/UserContext';
 import { GET_ALL_PROFILES } from 'graphql/queries';
 import { updateQueryGetAllProfiles } from 'graphql/functions';
@@ -52,6 +53,9 @@ const AddProfile = () => {
       variables: { customerId, type: 'passpoint_osu_id_provider' },
     }
   );
+  const { data: rfProfiles, fetchMore: fetchMoreRfProfiles } = useQuery(GET_ALL_PROFILES(), {
+    variables: { customerId, type: 'rf' },
+  });
   const [createProfile] = useMutation(CREATE_PROFILE);
   const history = useHistory();
 
@@ -70,7 +74,7 @@ const AddProfile = () => {
           message: 'Success',
           description: 'Profile successfully created.',
         });
-        history.push('/profiles', { refetch: true });
+        history.push(ROUTES.profiles, { refetch: true });
       })
       .catch(() =>
         notification.error({
@@ -116,6 +120,24 @@ const AddProfile = () => {
     return true;
   };
 
+  const handleFetchRfProfiles = e => {
+    if (rfProfiles.getAllProfiles.context.lastPage) {
+      return false;
+    }
+
+    e.persist();
+    const { target } = e;
+
+    if (target.scrollTop + target.offsetHeight === target.scrollHeight) {
+      fetchMoreRfProfiles({
+        variables: { context: { ...rfProfiles.getAllProfiles.context } },
+        updateQuery: updateQueryGetAllProfiles,
+      });
+    }
+
+    return true;
+  };
+
   const handleFetchOperatorProfiles = e => {
     if (operatorProfiles.getAllProfiles.context.lastPage) {
       return false;
@@ -161,10 +183,12 @@ const AddProfile = () => {
       venueProfiles={venueProfiles?.getAllProfiles?.items}
       operatorProfiles={operatorProfiles?.getAllProfiles?.items}
       idProviderProfiles={idProviderProfiles?.getAllProfiles?.items}
+      rfProfiles={rfProfiles?.getAllProfiles?.items}
       onFetchMoreProfiles={handleFetchProfiles}
       onFetchMoreVenueProfiles={handleFetchVenueProfiles}
       onFetchMoreOperatorProfiles={handleFetchOperatorProfiles}
       onFetchMoreIdProviderProfiles={handleFetchIdProviderProfiles}
+      onFetchMoreRfProfiles={handleFetchRfProfiles}
     />
   );
 };

app/containers/App/index.js

@@ -2,12 +2,12 @@ import React, { useState } from 'react';
 import { Helmet } from 'react-helmet';
 import { Switch, Redirect } from 'react-router-dom';
 
-import { ThemeProvider } from '@tip-wlan/wlan-cloud-ui-library';
+import { ThemeProvider, GenericNotFound } from '@tip-wlan/wlan-cloud-ui-library';
 
 import logo from 'images/tip-logo.png';
 import logoMobile from 'images/tip-logo-mobile.png';
 
-import { AUTH_TOKEN, COMPANY } from 'constants/index';
+import { AUTH_TOKEN, COMPANY, ROUTES } from 'constants/index';
 import Login from 'containers/Login';
 
 import Network from 'containers/Network';
@@ -32,7 +32,7 @@ import ProtectedRouteWithLayout from './components/ProtectedRouteWithLayout';
 const RedirectToDashboard = () => (
   <Redirect
     to={{
-      pathname: '/dashboard',
+      pathname: ROUTES.dashboard,
     }}
   />
 );
@@ -42,7 +42,7 @@ const App = () => {
   let initialUser = {};
   if (token) {
     const { userId, userName, userRole, customerId } = parseJwt(token.access_token);
-    initialUser = { id: userId, email: userName, role: userRole, customerId };
+    initialUser = { id: userId, email: userName, roles: userRole, customerId };
   }
   const [user, setUser] = useState(initialUser);
 
@@ -50,7 +50,7 @@ const App = () => {
     setItem(AUTH_TOKEN, newToken);
     if (newToken) {
       const { userId, userName, userRole, customerId } = parseJwt(newToken.access_token);
-      setUser({ id: userId, email: userName, role: userRole, customerId });
+      setUser({ id: userId, email: userName, roles: userRole, customerId });
     }
   };
 
@@ -60,32 +60,37 @@ const App = () => {
     <UserProvider
       id={user.id}
       email={user.email}
-      role={user.role}
+      roles={user.roles}
       customerId={user.customerId}
       updateUser={updateUser}
       updateToken={updateToken}
     >
-      <ThemeProvider company={COMPANY} logo={logo} logoMobile={logoMobile}>
+      <ThemeProvider company={COMPANY} logo={logo} logoMobile={logoMobile} routes={ROUTES}>
         <Helmet titleTemplate={`%s - ${COMPANY}`} defaultTitle={COMPANY}>
           <meta name="description" content={COMPANY} />
         </Helmet>
 
         <Switch>
-          <UnauthenticatedRoute exact path="/login" component={Login} />
+          <UnauthenticatedRoute exact path={ROUTES.login} component={Login} />
-          <ProtectedRouteWithLayout exact path="/" component={RedirectToDashboard} />
+          <ProtectedRouteWithLayout exact path={ROUTES.root} component={RedirectToDashboard} />
-          <ProtectedRouteWithLayout exact path="/dashboard" component={Dashboard} />
+          <ProtectedRouteWithLayout exact path={ROUTES.dashboard} component={Dashboard} />
-          <ProtectedRouteWithLayout path="/network" component={Network} />
+          <ProtectedRouteWithLayout path={ROUTES.network} component={Network} />
-          <ProtectedRouteWithLayout path="/system" component={System} />
+          <ProtectedRouteWithLayout path={ROUTES.system} component={System} />
 
-          <ProtectedRouteWithLayout exact path="/profiles" component={Profiles} />
+          <ProtectedRouteWithLayout exact path={ROUTES.profiles} component={Profiles} />
-          <ProtectedRouteWithLayout exact path="/profiles/:id" component={ProfileDetails} />
+          <ProtectedRouteWithLayout
-          <ProtectedRouteWithLayout exact path="/addprofile" component={AddProfile} />
+            exact
+            path={`${ROUTES.profiles}/:id`}
+            component={ProfileDetails}
+          />
+          <ProtectedRouteWithLayout exact path={ROUTES.addprofile} component={AddProfile} />
 
-          <ProtectedRouteWithLayout exact path="/alarms" component={Alarms} />
+          <ProtectedRouteWithLayout exact path={ROUTES.alarms} component={Alarms} />
-          <ProtectedRouteWithLayout exact path="/account/edit" component={EditAccount} />
+          <ProtectedRouteWithLayout exact path={ROUTES.account} component={EditAccount} />
-          {user.role === 'SuperUser' && (
+          {user?.roles?.[0] === 'SuperUser' && (
-            <ProtectedRouteWithLayout exact path="/accounts" component={Accounts} />
+            <ProtectedRouteWithLayout exact path={ROUTES.users} component={Accounts} />
           )}
+          <ProtectedRouteWithLayout component={GenericNotFound} />
         </Switch>
       </ThemeProvider>
     </UserProvider>

app/containers/EditAccount/index.js

@@ -10,7 +10,7 @@ const GET_USER = gql`
     getUser(id: $id) {
       id
       username
-      role
+      roles
       customerId
       lastModifiedTimestamp
     }
@@ -22,7 +22,7 @@ const UPDATE_USER = gql`
     $id: ID!
     $username: String!
     $password: String!
-    $role: String!
+    $roles: [String]
     $customerId: ID!
     $lastModifiedTimestamp: String
   ) {
@@ -30,13 +30,13 @@ const UPDATE_USER = gql`
       id: $id
       username: $username
       password: $password
-      role: $role
+      roles: $roles
       customerId: $customerId
       lastModifiedTimestamp: $lastModifiedTimestamp
     ) {
       id
       username
-      role
+      roles
       customerId
       lastModifiedTimestamp
     }
@@ -49,14 +49,14 @@ const EditAccount = () => {
   const [updateUser] = useMutation(UPDATE_USER);
 
   const handleSubmit = newPassword => {
-    const { role, customerId, lastModifiedTimestamp } = data.getUser;
+    const { roles, customerId, lastModifiedTimestamp } = data.getUser;
 
     updateUser({
       variables: {
         id,
         username: email,
         password: newPassword,
-        role,
+        roles,
         customerId,
         lastModifiedTimestamp,
       },

app/containers/MasterLayout/index.js

@@ -6,14 +6,14 @@ import { AppLayout as Layout } from '@tip-wlan/wlan-cloud-ui-library';
 
 import { GET_ALARM_COUNT } from 'graphql/queries';
 
-import { AUTH_TOKEN } from 'constants/index';
+import { AUTH_TOKEN, ROUTES } from 'constants/index';
 
 import { removeItem } from 'utils/localStorage';
 
 import UserContext from 'contexts/UserContext';
 
 const MasterLayout = ({ children }) => {
-  const { role, customerId } = useContext(UserContext);
+  const { roles, customerId } = useContext(UserContext);
 
   const client = useApolloClient();
   const location = useLocation();
@@ -30,75 +30,56 @@ const MasterLayout = ({ children }) => {
   const menuItems = [
     {
       key: 'dashboard',
-      path: '/dashboard',
+      path: ROUTES.dashboard,
       text: 'Dashboard',
     },
     {
       key: 'network',
-      path: '/network',
+      path: ROUTES.network,
       text: 'Network',
     },
     {
       key: 'profiles',
-      path: '/profiles',
+      path: ROUTES.profiles,
       text: 'Profiles',
     },
     {
       key: 'system',
-      path: '/system',
+      path: ROUTES.system,
       text: 'System',
     },
   ];
 
   const mobileMenuItems = [
-    {
+    ...menuItems,
-      key: 'dashboard',
-      path: '/dashboard',
-      text: 'Dashboard',
-    },
-    {
-      key: 'network',
-      path: '/network',
-      text: 'Network',
-    },
-    {
-      key: 'profiles',
-      path: '/profiles',
-      text: 'Profiles',
-    },
-    {
-      key: 'system',
-      path: '/system',
-      text: 'System',
-    },
     {
       key: 'settings',
       text: 'Settings',
       children: [
         {
           key: 'editAccount',
-          path: '/account/edit',
+          path: ROUTES.account,
           text: 'Edit Account',
         },
         {
           key: 'logout',
-          path: '/',
+          path: ROUTES.root,
           text: 'Log Out',
         },
       ],
     },
   ];
 
-  if (role === 'SuperUser') {
+  if (roles?.[0] === 'SuperUser') {
     menuItems.push({
-      key: 'accounts',
+      key: 'users',
-      path: '/accounts',
+      path: ROUTES.users,
-      text: 'Accounts',
+      text: 'Users',
     });
     mobileMenuItems.push({
-      key: 'accounts',
+      key: 'users',
-      path: '/accounts',
+      path: ROUTES.users,
-      text: 'Accounts',
+      text: 'Users',
     });
   }
 

app/containers/Network/containers/AccessPoints/index.js

@@ -6,6 +6,7 @@ import { notification } from 'antd';
 import { floor, padStart } from 'lodash';
 import { NetworkTableContainer } from '@tip-wlan/wlan-cloud-ui-library';
 
+import { ROUTES } from 'constants/index';
 import UserContext from 'contexts/UserContext';
 import { FILTER_EQUIPMENT } from 'graphql/queries';
 
@@ -165,7 +166,7 @@ const AccessPoints = ({ checkedLocations }) => {
 
   return (
     <NetworkTableContainer
-      activeTab="/network/access-points"
+      activeTab={ROUTES.accessPoints}
       onRefresh={handleOnRefresh}
       tableColumns={accessPointsTableColumns}
       tableData={equipData && equipData.filterEquipment && equipData.filterEquipment.items}

app/containers/Network/containers/ClientDevices/index.js

@@ -5,6 +5,7 @@ import { notification } from 'antd';
 
 import { NetworkTableContainer } from '@tip-wlan/wlan-cloud-ui-library';
 
+import { ROUTES } from 'constants/index';
 import UserContext from 'contexts/UserContext';
 import { FILTER_CLIENT_SESSIONS } from 'graphql/queries';
 
@@ -96,7 +97,7 @@ const ClientDevices = ({ checkedLocations }) => {
 
   return (
     <NetworkTableContainer
-      activeTab="/network/client-devices"
+      activeTab={ROUTES.clientDevices}
       tableColumns={clientDevicesTableColumns}
       tableData={data?.filterClientSessions?.items}
       onLoadMore={handleLoadMore}

app/containers/ProfileDetails/index.js

@@ -4,6 +4,7 @@ import { useQuery, useMutation, gql } from '@apollo/client';
 import { Alert, notification } from 'antd';
 import { ProfileDetails as ProfileDetailsPage, Loading } from '@tip-wlan/wlan-cloud-ui-library';
 
+import { ROUTES } from 'constants/index';
 import UserContext from 'contexts/UserContext';
 import { GET_ALL_PROFILES } from 'graphql/queries';
 import { FILE_UPLOAD } from 'graphql/mutations';
@@ -115,6 +116,10 @@ const ProfileDetails = () => {
     }
   );
 
+  const { data: rfProfiles, fetchMore: fetchMoreRfProfiles } = useQuery(GET_ALL_PROFILES(), {
+    variables: { customerId, type: 'rf' },
+  });
+
   const [updateProfile] = useMutation(UPDATE_PROFILE);
   const [deleteProfile] = useMutation(DELETE_PROFILE);
 
@@ -252,6 +257,24 @@ const ProfileDetails = () => {
     return true;
   };
 
+  const handleFetchRfProfiles = e => {
+    if (rfProfiles.getAllProfiles.context.lastPage) {
+      return false;
+    }
+
+    e.persist();
+    const { target } = e;
+
+    if (target.scrollTop + target.offsetHeight === target.scrollHeight) {
+      fetchMoreRfProfiles({
+        variables: { context: { ...rfProfiles.getAllProfiles.context } },
+        updateQuery: updateQueryGetAllProfiles,
+      });
+    }
+
+    return true;
+  };
+
   const handleFetchOperatorProfiles = e => {
     if (operatorProfiles.getAllProfiles.context.lastPage) {
       return false;
@@ -299,7 +322,7 @@ const ProfileDetails = () => {
   }
 
   if (redirect) {
-    return <Redirect to="/profiles" />;
+    return <Redirect to={ROUTES.profiles} />;
   }
 
   return (
@@ -307,13 +330,12 @@ const ProfileDetails = () => {
       name={data.getProfile.name}
       profileType={data.getProfile.profileType}
       details={data.getProfile.details}
-      childProfileIds={data.getProfile.childProfileIds}
       childProfiles={data.getProfile.childProfiles}
+      childProfileIds={data.getProfile.childProfileIds}
       onDeleteProfile={handleDeleteProfile}
       onUpdateProfile={handleUpdateProfile}
-      ssidProfiles={
+      ssidProfiles={ssidProfiles?.getAllProfiles?.items}
-        (ssidProfiles && ssidProfiles.getAllProfiles && ssidProfiles.getAllProfiles.items) || []
+      rfProfiles={rfProfiles?.getAllProfiles?.items}
-      }
       radiusProfiles={radiusProfiles?.getAllProfiles?.items}
       captiveProfiles={captiveProfiles?.getAllProfiles?.items}
       venueProfiles={venueProfiles?.getAllProfiles?.items}
@@ -321,6 +343,7 @@ const ProfileDetails = () => {
       idProviderProfiles={idProviderProfiles?.getAllProfiles?.items}
       fileUpload={handleFileUpload}
       onFetchMoreProfiles={handleFetchProfiles}
+      onFetchMoreRfProfiles={handleFetchRfProfiles}
       onFetchMoreRadiusProfiles={handleFetchRadiusProfiles}
       onFetchMoreCaptiveProfiles={handleFetchCaptiveProfiles}
       onFetchMoreVenueProfiles={handleFetchVenueProfiles}

app/contexts/UserProvider/index.js

@@ -3,8 +3,8 @@ import PropTypes from 'prop-types';
 
 import UserContext from 'contexts/UserContext';
 
-const UserProvider = ({ children, id, email, role, customerId, updateUser, updateToken }) => (
+const UserProvider = ({ children, id, email, roles, customerId, updateUser, updateToken }) => (
-  <UserContext.Provider value={{ id, email, role, customerId, updateUser, updateToken }}>
+  <UserContext.Provider value={{ id, email, roles, customerId, updateUser, updateToken }}>
     {children}
   </UserContext.Provider>
 );
@@ -15,14 +15,14 @@ UserProvider.propTypes = {
   updateToken: PropTypes.func.isRequired,
   id: PropTypes.number,
   email: PropTypes.string,
-  role: PropTypes.string,
+  roles: PropTypes.instanceOf(Array),
   customerId: PropTypes.number,
 };
 
 UserProvider.defaultProps = {
   id: null,
   email: null,
-  role: null,
+  roles: [],
   customerId: null,
 };
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "wlan-cloud-ui",
-  "version": "0.5.4",
+  "version": "0.7.1",
   "author": "ConnectUs",
   "description": "React Portal",
   "engines": {
@@ -10,7 +10,7 @@
   "scripts": {
     "test": "jest --passWithNoTests --coverage",
     "start": "cross-env NODE_ENV=development webpack-dev-server",
-    "start:bare": "cross-env API=https://wlan-graphql.zone3.lab.connectus.ai NODE_ENV=bare webpack-dev-server",
+    "start:bare": "cross-env API=https://wlan-graphql.qa.lab.wlan.tip.build NODE_ENV=bare webpack-dev-server",
     "start:dev": "cross-env API=https://wlan-graphql.qa.lab.wlan.tip.build NODE_ENV=development webpack-dev-server",
     "build": "webpack --mode=production",
     "format": "prettier --write 'app/**/*{.js,.scss}'",
@@ -21,7 +21,7 @@
   "dependencies": {
     "@ant-design/icons": "^4.2.1",
     "@apollo/client": "^3.1.3",
-    "@tip-wlan/wlan-cloud-ui-library": "^0.3.19",
+    "@tip-wlan/wlan-cloud-ui-library": "^0.6.3",
     "antd": "^4.5.2",
     "apollo-upload-client": "^13.0.0",
     "clean-webpack-plugin": "^3.0.0",
@@ -75,7 +75,6 @@
     "lint-staged": "^10.0.8",
     "node-sass": "^4.13.1",
     "prettier": "^1.19.1",
-    "pretty-quick": "^2.0.1",
     "react-test-renderer": "^16.13.1",
     "sass-loader": "^8.0.2",
     "style-loader": "^1.1.3",
@@ -84,22 +83,20 @@
     "webpack-dev-server": "^3.11.0",
     "webpack-merge": "^4.2.2"
   },
-  "precommit": "NODE_ENV=production lint-staged",
   "browserslist": [
     "last 2 versions",
     "> 1%",
     "IE 10"
   ],
-  "lint-staged": {
-    "*.{js,jsx}": [
-      "pretty-quick --staged",
-      "eslint --fix 'app/**/*.js' --max-warnings=0",
-      "git add"
-    ]
-  },
   "husky": {
     "hooks": {
       "pre-commit": "lint-staged"
     }
+  },
+  "lint-staged": {
+    "*.{js,jsx}": [
+      "eslint --fix 'app/**/*.js' --max-warnings=0",
+      "prettier --write"
+    ]
   }
 }