fixed spelling

bugfix/NETEXP-783: AP table uses baseMacAddress and manufacturer

.gitignore

@@ -4,6 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
+package-lock.json
 
 # testing
 /coverage

app/components/UsersDropdown/index.js

@@ -0,0 +1,58 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+import { Popover, Row } from 'antd';
+import { UserOutlined } from '@ant-design/icons';
+
+import styles from './index.module.scss';
+
+const UsersDropdown = ({ onLogout }) => {
+  const [popoverVisible, setPopoverVisible] = useState(false);
+
+  const hidePopover = () => {
+    setPopoverVisible(false);
+  };
+
+  const handleVisibleChange = visible => {
+    setPopoverVisible(visible);
+  };
+
+  const userOptions = (
+    <>
+      <Row>
+        <Link onClick={hidePopover} to="/account">
+          Account
+        </Link>
+      </Row>
+      <Row>
+        <Link onClick={onLogout} to="/">
+          Log Out
+        </Link>
+      </Row>
+    </>
+  );
+
+  return (
+    <Popover
+      content={userOptions}
+      trigger="click"
+      getPopupContainer={e => e.parentElement}
+      visible={popoverVisible}
+      onVisibleChange={handleVisibleChange}
+      placement="bottomRight"
+      arrowPointAtCenter
+    >
+      <UserOutlined className={styles.MenuIcon} />
+    </Popover>
+  );
+};
+
+UsersDropdown.propTypes = {
+  onLogout: PropTypes.func,
+};
+
+UsersDropdown.defaultProps = {
+  onLogout: () => {},
+};
+
+export default UsersDropdown;

app/components/UsersDropdown/index.module.scss

@@ -0,0 +1,7 @@
+.MenuIcon {
+    cursor: pointer;
+    font-size: 18px;
+    line-height: 64px;
+    padding: 0 24px;
+  }
+  

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!) {
-    createUser(username: $username, password: $password, role: $role, customerId: $customerId) {
+  mutation CreateUser($username: String!, $password: String!, $roles: [String], $customerId: ID!) {
+    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
     }
@@ -66,7 +66,7 @@ const DELETE_USER = gql`
 `;
 
 const Accounts = () => {
-  const { customerId } = useContext(UserContext);
+  const { customerId, id: currentUserId } = useContext(UserContext);
 
   const { data, loading, error, refetch, fetchMore } = useQuery(GET_ALL_USERS, {
     variables: { customerId },
@@ -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,
       },
@@ -173,6 +173,7 @@ const Accounts = () => {
   return (
     <AccountsPage
       data={data.getAllUsers.items}
+      currentUserId={currentUserId}
       onLoadMore={handleLoadMore}
       onCreateUser={handleCreateUser}
       onEditUser={handleEditUser}

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';
@@ -37,6 +38,24 @@ const AddProfile = () => {
   const { data: ssidProfiles, fetchMore } = useQuery(GET_ALL_PROFILES(), {
     variables: { customerId, type: 'ssid' },
   });
+  const { data: venueProfiles, fetchMore: fetchMoreVenueProfiles } = useQuery(GET_ALL_PROFILES(), {
+    variables: { customerId, type: 'passpoint_venue' },
+  });
+  const { data: operatorProfiles, fetchMore: fetchMoreOperatorProfiles } = useQuery(
+    GET_ALL_PROFILES(),
+    {
+      variables: { customerId, type: 'passpoint_operator' },
+    }
+  );
+  const { data: idProviderProfiles, fetchMore: fetchMoreIdProviderProfiles } = useQuery(
+    GET_ALL_PROFILES(),
+    {
+      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();
 
@@ -55,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({
@@ -83,13 +102,93 @@ const AddProfile = () => {
     return true;
   };
 
+  const handleFetchVenueProfiles = e => {
+    if (venueProfiles.getAllProfiles.context.lastPage) {
+      return false;
+    }
+
+    e.persist();
+    const { target } = e;
+
+    if (target.scrollTop + target.offsetHeight === target.scrollHeight) {
+      fetchMoreVenueProfiles({
+        variables: { context: { ...venueProfiles.getAllProfiles.context } },
+        updateQuery: updateQueryGetAllProfiles,
+      });
+    }
+
+    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;
+    }
+
+    e.persist();
+    const { target } = e;
+
+    if (target.scrollTop + target.offsetHeight === target.scrollHeight) {
+      fetchMoreOperatorProfiles({
+        variables: { context: { ...operatorProfiles.getAllProfiles.context } },
+        updateQuery: updateQueryGetAllProfiles,
+      });
+    }
+
+    return true;
+  };
+
+  const handleFetchIdProviderProfiles = e => {
+    if (idProviderProfiles.getAllProfiles.context.lastPage) {
+      return false;
+    }
+
+    e.persist();
+    const { target } = e;
+
+    if (target.scrollTop + target.offsetHeight === target.scrollHeight) {
+      fetchMoreIdProviderProfiles({
+        variables: { context: { ...idProviderProfiles.getAllProfiles.context } },
+        updateQuery: updateQueryGetAllProfiles,
+      });
+    }
+
+    return true;
+  };
+
   return (
     <AddProfilePage
       onCreateProfile={handleAddProfile}
       ssidProfiles={
         (ssidProfiles && ssidProfiles.getAllProfiles && ssidProfiles.getAllProfiles.items) || []
       }
+      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, USER_FRIENDLY_RADIOS } 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,43 @@ 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}
+        radioTypes={USER_FRIENDLY_RADIOS}
+      >
         <Helmet titleTemplate={`%s - ${COMPANY}`} defaultTitle={COMPANY}>
           <meta name="description" content={COMPANY} />
         </Helmet>
 
         <Switch>
-          <UnauthenticatedRoute exact path="/login" component={Login} />
-          <ProtectedRouteWithLayout exact path="/" component={RedirectToDashboard} />
-          <ProtectedRouteWithLayout exact path="/dashboard" component={Dashboard} />
-          <ProtectedRouteWithLayout path="/network" component={Network} />
-          <ProtectedRouteWithLayout path="/system" component={System} />
+          <UnauthenticatedRoute exact path={ROUTES.login} component={Login} />
+          <ProtectedRouteWithLayout exact path={ROUTES.root} component={RedirectToDashboard} />
+          <ProtectedRouteWithLayout exact path={ROUTES.dashboard} component={Dashboard} />
+          <ProtectedRouteWithLayout path={ROUTES.network} component={Network} />
+          <ProtectedRouteWithLayout path={ROUTES.system} component={System} />
 
-          <ProtectedRouteWithLayout exact path="/profiles" component={Profiles} />
-          <ProtectedRouteWithLayout exact path="/profiles/:id" component={ProfileDetails} />
-          <ProtectedRouteWithLayout exact path="/addprofile" component={AddProfile} />
+          <ProtectedRouteWithLayout exact path={ROUTES.profiles} component={Profiles} />
+          <ProtectedRouteWithLayout
+            exact
+            path={`${ROUTES.profiles}/:id`}
+            component={ProfileDetails}
+          />
+          <ProtectedRouteWithLayout exact path={ROUTES.addprofile} component={AddProfile} />
 
-          <ProtectedRouteWithLayout exact path="/alarms" component={Alarms} />
-          <ProtectedRouteWithLayout exact path="/account/edit" component={EditAccount} />
-          {user.role === 'SuperUser' && (
-            <ProtectedRouteWithLayout exact path="/accounts" component={Accounts} />
+          <ProtectedRouteWithLayout exact path={ROUTES.alarms} component={Alarms} />
+          <ProtectedRouteWithLayout exact path={ROUTES.account} component={EditAccount} />
+          {user?.roles?.[0] === 'SuperUser' && (
+            <ProtectedRouteWithLayout exact path={ROUTES.users} component={Accounts} />
           )}
+          <ProtectedRouteWithLayout component={GenericNotFound} />
         </Switch>
       </ThemeProvider>
     </UserProvider>

app/containers/Dashboard/index.js

@@ -5,6 +5,7 @@ import { useQuery } from '@apollo/client';
 import { Dashboard as DashboardPage, Loading } from '@tip-wlan/wlan-cloud-ui-library';
 import UserContext from 'contexts/UserContext';
 import { FILTER_SYSTEM_EVENTS, GET_ALL_STATUS } from 'graphql/queries';
+import { USER_FRIENDLY_RADIOS } from 'constants/index';
 
 function formatBytes(bytes, decimals = 2) {
   if (bytes === 0) return '0 Bytes';
@@ -29,13 +30,6 @@ function trafficTooltipFormatter() {
   )}</b><br/>`;
 }
 
-const USER_FRIENDLY_RADIOS = {
-  is2dot4GHz: '2.4GHz',
-  is5GHzL: '5GHz (L)',
-  is5GHzU: '5GHz (U)',
-  is5GHz: '5GHz',
-};
-
 const lineChartConfig = [
   { key: 'inservicesAPs', title: 'Inservice APs (24 hours)' },
   { key: 'clientDevices', title: 'Client Devices (24 hours)' },

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,16 @@ 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';
 
+import UsersDropdown from 'components/UsersDropdown';
+
 const MasterLayout = ({ children }) => {
-  const { role, customerId } = useContext(UserContext);
+  const { roles, customerId, email } = useContext(UserContext);
 
   const client = useApolloClient();
   const location = useLocation();
@@ -30,75 +32,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 = [
-    {
-      key: 'dashboard',
-      path: '/dashboard',
-      text: 'Dashboard',
-    },
-    {
-      key: 'network',
-      path: '/network',
-      text: 'Network',
-    },
-    {
-      key: 'profiles',
-      path: '/profiles',
-      text: 'Profiles',
-    },
-    {
-      key: 'system',
-      path: '/system',
-      text: 'System',
-    },
+    ...menuItems,
     {
       key: 'settings',
       text: 'Settings',
       children: [
         {
           key: 'editAccount',
-          path: '/account/edit',
-          text: 'Edit Account',
+          path: ROUTES.account,
+          text: 'Account',
         },
         {
           key: 'logout',
-          path: '/',
+          path: ROUTES.root,
           text: 'Log Out',
         },
       ],
     },
   ];
 
-  if (role === 'SuperUser') {
+  if (roles?.[0] === 'SuperUser') {
     menuItems.push({
-      key: 'accounts',
-      path: '/accounts',
-      text: 'Accounts',
+      key: 'users',
+      path: ROUTES.users,
+      text: 'Users',
     });
     mobileMenuItems.push({
-      key: 'accounts',
-      path: '/accounts',
-      text: 'Accounts',
+      key: 'users',
+      path: ROUTES.users,
+      text: 'Users',
     });
   }
 
@@ -109,6 +92,8 @@ const MasterLayout = ({ children }) => {
       menuItems={menuItems}
       mobileMenuItems={mobileMenuItems}
       totalAlarms={data && data.getAlarmCount}
+      currentUserEmail={email}
+      usersDropdown={<UsersDropdown onLogout={handleLogout} />}
     >
       {children}
     </Layout>

app/containers/Network/containers/AccessPointDetails/index.js

@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
-import { useParams } from 'react-router-dom';
+import { useParams, useHistory } from 'react-router-dom';
 import { useQuery, useMutation, gql } from '@apollo/client';
 import { Alert, notification } from 'antd';
 import moment from 'moment';
@@ -42,16 +42,14 @@ const GET_EQUIPMENT = gql`
           details
         }
       }
+      baseMacAddress
+      manufacturer
       status {
         firmware {
           detailsJSON
         }
         protocol {
           detailsJSON
-          details {
-            reportedMacAddr
-            manufacturer
-          }
         }
         radioUtilization {
           detailsJSON
@@ -123,17 +121,27 @@ const UPDATE_EQUIPMENT = gql`
   }
 `;
 
+const DELETE_EQUIPMENT = gql`
+  mutation DeleteEquipment($id: ID!) {
+    deleteEquipment(id: $id) {
+      id
+    }
+  }
+`;
+
 const toTime = moment();
 const fromTime = moment().subtract(1, 'hour');
 
 const AccessPointDetails = ({ locations }) => {
   const { id } = useParams();
   const { customerId } = useContext(UserContext);
+  const history = useHistory();
 
   const { loading, error, data, refetch } = useQuery(GET_EQUIPMENT, {
     variables: {
       id,
     },
+    fetchPolicy: 'network-only',
   });
 
   const { data: dataFirmware, error: errorFirmware, loading: loadingFirmware } = useQuery(
@@ -181,6 +189,7 @@ const AccessPointDetails = ({ locations }) => {
   const [updateEquipmentFirmware] = useMutation(UPDATE_EQUIPMENT_FIRMWARE);
   const [requestEquipmentSwitchBank] = useMutation(REQUEST_EQUIPMENT_SWITCH_BANK);
   const [requestEquipmentReboot] = useMutation(REQUEST_EQUIPMENT_REBOOT);
+  const [deleteEquipment] = useMutation(DELETE_EQUIPMENT);
 
   const refetchData = () => {
     refetch();
@@ -232,6 +241,25 @@ const AccessPointDetails = ({ locations }) => {
       );
   };
 
+  const handleDeleteEquipment = () => {
+    deleteEquipment({
+      variables: { id },
+    })
+      .then(() => {
+        history.push('/network/access-points');
+        notification.success({
+          message: 'Success',
+          description: 'Equipment successfully deleted',
+        });
+      })
+      .catch(() =>
+        notification.error({
+          message: 'Error',
+          description: 'Equipment could not be deleted.',
+        })
+      );
+  };
+
   const handleUpdateEquipmentFirmware = (equipmentId, firmwareVersionId) =>
     updateEquipmentFirmware({ variables: { equipmentId, firmwareVersionId } })
       .then(firmwareResp => {
@@ -335,6 +363,7 @@ const AccessPointDetails = ({ locations }) => {
     <AccessPointDetailsPage
       handleRefresh={refetchData}
       onUpdateEquipment={handleUpdateEquipment}
+      onDeleteEquipment={handleDeleteEquipment}
       data={data?.getEquipment}
       profiles={dataProfiles?.getAllProfiles?.items}
       osData={{

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';
 
@@ -58,12 +59,12 @@ const accessPointsTableColumns = [
   },
   {
     title: 'MAC',
-    dataIndex: ['status', 'protocol', 'details', 'reportedMacAddr'],
+    dataIndex: 'baseMacAddress',
     render: renderTableCell,
   },
   {
     title: 'MANUFACTURER',
-    dataIndex: ['status', 'protocol', 'details', 'manufacturer'],
+    dataIndex: 'manufacturer',
     render: renderTableCell,
   },
   {
@@ -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, USER_FRIENDLY_RADIOS } from 'constants/index';
 import UserContext from 'contexts/UserContext';
 import { FILTER_CLIENT_SESSIONS } from 'graphql/queries';
 
@@ -22,7 +23,11 @@ const clientDevicesTableColumns = [
   { title: 'HOST NAME', dataIndex: 'hostname' },
   { title: 'ACCESS POINT', dataIndex: ['equipment', 'name'] },
   { title: 'SSID', dataIndex: 'ssid' },
-  { title: 'BAND', dataIndex: 'radioType' },
+  {
+    title: 'BAND',
+    dataIndex: 'radioType',
+    render: band => USER_FRIENDLY_RADIOS[band],
+  },
   { title: 'SIGNAL', dataIndex: 'signal' },
   {
     title: 'STATUS',
@@ -96,7 +101,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';
@@ -97,6 +98,28 @@ const ProfileDetails = () => {
     }
   );
 
+  const { data: venueProfiles, fetchMore: fetchMoreVenueProfiles } = useQuery(GET_ALL_PROFILES(), {
+    variables: { customerId, type: 'passpoint_venue' },
+  });
+
+  const { data: operatorProfiles, fetchMore: fetchMoreOperatorProfiles } = useQuery(
+    GET_ALL_PROFILES(),
+    {
+      variables: { customerId, type: 'passpoint_operator' },
+    }
+  );
+
+  const { data: idProviderProfiles, fetchMore: fetchMoreIdProviderProfiles } = useQuery(
+    GET_ALL_PROFILES(),
+    {
+      variables: { customerId, type: 'passpoint_osu_id_provider' },
+    }
+  );
+
+  const { data: rfProfiles, fetchMore: fetchMoreRfProfiles } = useQuery(GET_ALL_PROFILES(), {
+    variables: { customerId, type: 'rf' },
+  });
+
   const [updateProfile] = useMutation(UPDATE_PROFILE);
   const [deleteProfile] = useMutation(DELETE_PROFILE);
 
@@ -216,6 +239,78 @@ const ProfileDetails = () => {
     return true;
   };
 
+  const handleFetchVenueProfiles = e => {
+    if (venueProfiles.getAllProfiles.context.lastPage) {
+      return false;
+    }
+
+    e.persist();
+    const { target } = e;
+
+    if (target.scrollTop + target.offsetHeight === target.scrollHeight) {
+      fetchMoreVenueProfiles({
+        variables: { context: { ...venueProfiles.getAllProfiles.context } },
+        updateQuery: updateQueryGetAllProfiles,
+      });
+    }
+
+    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;
+    }
+
+    e.persist();
+    const { target } = e;
+
+    if (target.scrollTop + target.offsetHeight === target.scrollHeight) {
+      fetchMoreOperatorProfiles({
+        variables: { context: { ...operatorProfiles.getAllProfiles.context } },
+        updateQuery: updateQueryGetAllProfiles,
+      });
+    }
+
+    return true;
+  };
+
+  const handleFetchIdProviderProfiles = e => {
+    if (idProviderProfiles.getAllProfiles.context.lastPage) {
+      return false;
+    }
+
+    e.persist();
+    const { target } = e;
+
+    if (target.scrollTop + target.offsetHeight === target.scrollHeight) {
+      fetchMoreIdProviderProfiles({
+        variables: { context: { ...idProviderProfiles.getAllProfiles.context } },
+        updateQuery: updateQueryGetAllProfiles,
+      });
+    }
+
+    return true;
+  };
+
   if (loading) {
     return <Loading />;
   }
@@ -227,7 +322,7 @@ const ProfileDetails = () => {
   }
 
   if (redirect) {
-    return <Redirect to="/profiles" />;
+    return <Redirect to={ROUTES.profiles} />;
   }
 
   return (
@@ -235,18 +330,25 @@ const ProfileDetails = () => {
       name={data.getProfile.name}
       profileType={data.getProfile.profileType}
       details={data.getProfile.details}
+      childProfiles={data.getProfile.childProfiles}
       childProfileIds={data.getProfile.childProfileIds}
       onDeleteProfile={handleDeleteProfile}
       onUpdateProfile={handleUpdateProfile}
-      ssidProfiles={
-        (ssidProfiles && ssidProfiles.getAllProfiles && ssidProfiles.getAllProfiles.items) || []
-      }
+      ssidProfiles={ssidProfiles?.getAllProfiles?.items}
+      rfProfiles={rfProfiles?.getAllProfiles?.items}
       radiusProfiles={radiusProfiles?.getAllProfiles?.items}
       captiveProfiles={captiveProfiles?.getAllProfiles?.items}
+      venueProfiles={venueProfiles?.getAllProfiles?.items}
+      operatorProfiles={operatorProfiles?.getAllProfiles?.items}
+      idProviderProfiles={idProviderProfiles?.getAllProfiles?.items}
       fileUpload={handleFileUpload}
       onFetchMoreProfiles={handleFetchProfiles}
+      onFetchMoreRfProfiles={handleFetchRfProfiles}
       onFetchMoreRadiusProfiles={handleFetchRadiusProfiles}
       onFetchMoreCaptiveProfiles={handleFetchCaptiveProfiles}
+      onFetchMoreVenueProfiles={handleFetchVenueProfiles}
+      onFetchMoreOperatorProfiles={handleFetchOperatorProfiles}
+      onFetchMoreIdProviderProfiles={handleFetchIdProviderProfiles}
     />
   );
 };

app/containers/System/containers/Firmware/index.js

@@ -22,7 +22,7 @@ const Firmware = () => {
   const [
     getAllFirmware,
     { data: firmwareVersionData, loading: firmwareVersionLoading },
-  ] = useLazyQuery(GET_ALL_FIRMWARE);
+  ] = useLazyQuery(GET_ALL_FIRMWARE, { fetchPolicy: 'network-only' });
 
   const {
     data: trackAssignmentData,

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 }) => (
-  <UserContext.Provider value={{ id, email, role, customerId, updateUser, updateToken }}>
+const UserProvider = ({ children, id, email, roles, 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,
 };
 

app/graphql/queries.js

@@ -42,12 +42,12 @@ export const FILTER_EQUIPMENT = gql`
         profile {
           name
         }
+        baseMacAddress
+        manufacturer
         status {
           protocol {
             details {
               reportedIpV4Addr
-              reportedMacAddr
-              manufacturer
             }
           }
           osPerformance {

app/styles/variables.scss

@@ -1,4 +1,4 @@
 $sidebar-width: 234px;
 $sidebar-collapsed-width: 80px;
 
-$header-height: 64px;
+$header-height: 64px;

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "wlan-cloud-ui",
-  "version": "0.5.3",
+  "version": "0.7.5",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -1845,9 +1845,9 @@
       }
     },
     "@tip-wlan/wlan-cloud-ui-library": {
-      "version": "0.3.16",
-      "resolved": "https://tip.jfrog.io/artifactory/api/npm/tip-wlan-cloud-npm-repo/@tip-wlan/wlan-cloud-ui-library/-/@tip-wlan/wlan-cloud-ui-library-0.3.16.tgz",
-      "integrity": "sha1-y/s6saHvVfKSGagl8gwNzutFjxw="
+      "version": "0.7.6",
+      "resolved": "https://tip.jfrog.io/artifactory/api/npm/tip-wlan-cloud-npm-repo/@tip-wlan/wlan-cloud-ui-library/-/@tip-wlan/wlan-cloud-ui-library-0.7.6.tgz",
+      "integrity": "sha1-GW0Wz1L8OnAwRqlyjUNZnGIuWQg="
     },
     "@types/anymatch": {
       "version": "1.3.1",
@@ -2615,12 +2615,6 @@
       "integrity": "sha1-45sJrqne+Gao8gbiiK9jkZuuOcQ=",
       "dev": true
     },
-    "array-differ": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/array-differ/-/array-differ-3.0.0.tgz",
-      "integrity": "sha512-THtfYS6KtME/yIAhKjZ2ul7XI96lQGHRputJQHO80LAWQnuGP4iCIN8vdMRboGbIEYBwU33q8Tch1os2+X0kMg==",
-      "dev": true
-    },
     "array-equal": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/array-equal/-/array-equal-1.0.0.tgz",
@@ -2695,12 +2689,6 @@
         "function-bind": "^1.1.1"
       }
     },
-    "arrify": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/arrify/-/arrify-2.0.1.tgz",
-      "integrity": "sha512-3duEwti880xqi4eAMN8AyR4a0ByT90zoYdLlevfrvU43vb0YZwZVfxOgxWrLXXXpyugL0hNZc9G6BiB5B3nUug==",
-      "dev": true
-    },
     "asn1": {
       "version": "0.2.4",
       "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.4.tgz",
@@ -7395,9 +7383,9 @@
       "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ=="
     },
     "highcharts": {
-      "version": "8.1.0",
-      "resolved": "https://registry.npmjs.org/highcharts/-/highcharts-8.1.0.tgz",
-      "integrity": "sha512-4KXq9t2/PU0cqKUtET7om9Kh5AyOinIn4vYi62oYVsb4ql5wyUYW06f9Si/ERG2Thoy/rcwNmR77upKjg8xhqQ=="
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/highcharts/-/highcharts-8.2.0.tgz",
+      "integrity": "sha512-s3R7UEaMWUDJNxFfdjuiOtI8rnSvhEZUNN4TA7LiDRc9Tw7DUKvTv5WXSTYzxojokLbybwwlf9t3jg/meAUTnQ=="
     },
     "highcharts-react-official": {
       "version": "3.0.0",
@@ -11193,12 +11181,6 @@
         "run-queue": "^1.0.3"
       }
     },
-    "mri": {
-      "version": "1.1.6",
-      "resolved": "https://registry.npmjs.org/mri/-/mri-1.1.6.tgz",
-      "integrity": "sha512-oi1b3MfbyGa7FJMP9GmLTttni5JoICpYBRlq+x5V16fZbLsnL9N3wFqqIm/nIG43FjUFkFh9Epzp/kzUGUnJxQ==",
-      "dev": true
-    },
     "ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -11221,27 +11203,6 @@
       "integrity": "sha1-iZ8R2WhuXgXLkbNdXw5jt3PPyQE=",
       "dev": true
     },
-    "multimatch": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/multimatch/-/multimatch-4.0.0.tgz",
-      "integrity": "sha512-lDmx79y1z6i7RNx0ZGCPq1bzJ6ZoDDKbvh7jxr9SJcWLkShMzXrHbYVpTdnhNM5MXpDUxCQ4DgqVttVXlBgiBQ==",
-      "dev": true,
-      "requires": {
-        "@types/minimatch": "^3.0.3",
-        "array-differ": "^3.0.0",
-        "array-union": "^2.1.0",
-        "arrify": "^2.0.1",
-        "minimatch": "^3.0.4"
-      },
-      "dependencies": {
-        "array-union": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
-          "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
-          "dev": true
-        }
-      }
-    },
     "mute-stream": {
       "version": "0.0.8",
       "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.8.tgz",
@@ -11313,9 +11274,9 @@
       }
     },
     "node-forge": {
-      "version": "0.10.0",
-      "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.10.0.tgz",
-      "integrity": "sha512-PPmu8eEeG9saEUvI97fm4OYxXVB6bFvyNTyiUOBichBpFG8A1Ljw3bY62+5oOjDEMHRnd0Y7HQ+x7uzxOzC6JA==",
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.9.0.tgz",
+      "integrity": "sha512-7ASaDa3pD+lJ3WvXFsxekJQelBKRpne+GOVbLbtHYdd7pFspyeuJHnWfLplGf3SwKGbfs/aYl5V/JCIaHVUKKQ==",
       "dev": true
     },
     "node-gyp": {
@@ -12836,107 +12797,6 @@
         }
       }
     },
-    "pretty-quick": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/pretty-quick/-/pretty-quick-2.0.2.tgz",
-      "integrity": "sha512-aLb6vtOTEfJDwi1w+MBTeE20GwPVUYyn6IqNg6TtGpiOB1W3y6vKcsGFjqGeaaEtQgMLSPXTWONqh33UBuwG8A==",
-      "dev": true,
-      "requires": {
-        "chalk": "^2.4.2",
-        "execa": "^2.1.0",
-        "find-up": "^4.1.0",
-        "ignore": "^5.1.4",
-        "mri": "^1.1.4",
-        "multimatch": "^4.0.0"
-      },
-      "dependencies": {
-        "cross-spawn": {
-          "version": "7.0.3",
-          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-          "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-          "dev": true,
-          "requires": {
-            "path-key": "^3.1.0",
-            "shebang-command": "^2.0.0",
-            "which": "^2.0.1"
-          }
-        },
-        "execa": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/execa/-/execa-2.1.0.tgz",
-          "integrity": "sha512-Y/URAVapfbYy2Xp/gb6A0E7iR8xeqOCXsuuaoMn7A5PzrXUK84E1gyiEfq0wQd/GHA6GsoHWwhNq8anb0mleIw==",
-          "dev": true,
-          "requires": {
-            "cross-spawn": "^7.0.0",
-            "get-stream": "^5.0.0",
-            "is-stream": "^2.0.0",
-            "merge-stream": "^2.0.0",
-            "npm-run-path": "^3.0.0",
-            "onetime": "^5.1.0",
-            "p-finally": "^2.0.0",
-            "signal-exit": "^3.0.2",
-            "strip-final-newline": "^2.0.0"
-          }
-        },
-        "get-stream": {
-          "version": "5.2.0",
-          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz",
-          "integrity": "sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==",
-          "dev": true,
-          "requires": {
-            "pump": "^3.0.0"
-          }
-        },
-        "ignore": {
-          "version": "5.1.8",
-          "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.1.8.tgz",
-          "integrity": "sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw==",
-          "dev": true
-        },
-        "is-stream": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.0.tgz",
-          "integrity": "sha512-XCoy+WlUr7d1+Z8GgSuXmpuUFC9fOhRXglJMx+dwLKTkL44Cjd4W1Z5P+BQZpr+cR93aGP4S/s7Ftw6Nd/kiEw==",
-          "dev": true
-        },
-        "npm-run-path": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-3.1.0.tgz",
-          "integrity": "sha512-Dbl4A/VfiVGLgQv29URL9xshU8XDY1GeLy+fsaZ1AA8JDSfjvr5P5+pzRbWqRSBxk6/DW7MIh8lTM/PaGnP2kg==",
-          "dev": true,
-          "requires": {
-            "path-key": "^3.0.0"
-          }
-        },
-        "p-finally": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/p-finally/-/p-finally-2.0.1.tgz",
-          "integrity": "sha512-vpm09aKwq6H9phqRQzecoDpD8TmVyGw70qmWlyq5onxY7tqyTTFVvxMykxQSQKILBSFlbXpypIw2T1Ml7+DDtw==",
-          "dev": true
-        },
-        "path-key": {
-          "version": "3.1.1",
-          "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-          "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-          "dev": true
-        },
-        "shebang-command": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
-          "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-          "dev": true,
-          "requires": {
-            "shebang-regex": "^3.0.0"
-          }
-        },
-        "shebang-regex": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-          "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-          "dev": true
-        }
-      }
-    },
     "private": {
       "version": "0.1.8",
       "resolved": "https://registry.npmjs.org/private/-/private-0.1.8.tgz",
@@ -14603,12 +14463,12 @@
       "dev": true
     },
     "selfsigned": {
-      "version": "1.10.8",
-      "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-1.10.8.tgz",
-      "integrity": "sha512-2P4PtieJeEwVgTU9QEcwIRDQ/mXJLX8/+I3ur+Pg16nS8oNbrGxEso9NyYWy8NAmXiNl4dlAp5MwoNeCWzON4w==",
+      "version": "1.10.7",
+      "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-1.10.7.tgz",
+      "integrity": "sha512-8M3wBCzeWIJnQfl43IKwOmC4H/RAp50S8DF60znzjW5GVqTcSe2vWclt7hmYVPkKPlHWOu5EaWOMZ2Y6W8ZXTA==",
       "dev": true,
       "requires": {
-        "node-forge": "^0.10.0"
+        "node-forge": "0.9.0"
       }
     },
     "semver": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "wlan-cloud-ui",
-  "version": "0.5.3",
+  "version": "0.7.5",
   "author": "ConnectUs",
   "description": "React Portal",
   "engines": {
@@ -10,18 +10,18 @@
   "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:dev": "cross-env API=https://wlan-graphql.zone3.lab.connectus.ai NODE_ENV=development 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\"",
-    "eslint-fix": "eslint --fix \"app/**/*.js\"",
-    "eslint": "eslint \"app/**/*.js\" --max-warnings=0"
+    "format": "prettier --write 'app/**/*{.js,.scss}'",
+    "eslint-fix": "eslint --fix 'app/**/*.js'",
+    "eslint": "eslint 'app/**/*.js' --max-warnings=0"
   },
   "license": "MIT",
   "dependencies": {
     "@ant-design/icons": "^4.2.1",
     "@apollo/client": "^3.1.3",
-    "@tip-wlan/wlan-cloud-ui-library": "^0.3.16",
+    "@tip-wlan/wlan-cloud-ui-library": "^0.7.6",
     "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"
+    ]
   }
 }