added unit tests

.eslintrc

@@ -1,6 +1,9 @@
 {
   "extends": ["airbnb", "prettier", "prettier/react"],
   "plugins": ["prettier"],
+  "env": {
+    "jest": true
+  },
   "rules": {
     "react/jsx-filename-extension": [
       1,

.github/workflows/dockerpublish.yml

@@ -5,7 +5,6 @@ on:
     # Publish `master` as Docker `latest` image.
     branches:
       - master
-      - 'release/**'
 
     # Publish `v1.2.3` tags as releases.
     tags:
@@ -14,10 +13,6 @@ on:
   # Run tests for any PRs.
   pull_request:
 
-  schedule:
-    # runs nightly build at 5AM
-    - cron: '00 09 * * *'
-
 env:
   IMAGE_NAME: wlan-cloud-ui
   DOCKER_REPO: tip-tip-wlan-cloud-docker-repo.jfrog.io
@@ -44,31 +39,11 @@ jobs:
     needs: test
 
     runs-on: ubuntu-latest
-    if: github.event_name == 'push' || github.event_name == 'schedule'
+    if: github.event_name == 'push'
 
     steps:
       - uses: actions/checkout@v2
 
-      - name: Adding property file with component version and commit hash
-        run: |
-          # Strip git ref prefix from version
-          VERSION=$(echo "${{ github.ref }}" | sed -e 's,.*/\(.*\),\1,')
-
-          # Strip "v" prefix from tag name
-          [[ "${{ github.ref }}" == "refs/tags/"* ]] && VERSION=$(echo $VERSION | sed -e 's/^v//')
-
-          # Create a release snapshot if we are on release branch
-          [[ "${{ github.ref }}" == "refs/heads/release/"* ]] && VERSION=$(echo "${{ github.ref }}" | sed -e 's/refs\/heads\/release\/[v]//' | awk '{print $1"-SNAPSHOT"}')
-
-          # Use Docker `latest` tag convention
-          [ "$VERSION" == "master" ] && VERSION=0.0.1-SNAPSHOT
-
-          TIMESTAMP=$(date +'%Y-%m-%d')
-
-          echo date=$TIMESTAMP > app/commit.properties
-          echo commitId=$GITHUB_SHA >> app/commit.properties
-          echo projectVersion=$VERSION>> app/commit.properties
-
       - name: Build image
         run: docker build . -f Dockerfile -t image --build-arg NPM_TOKEN=${{secrets.NPM_REPO_AUTH_TOKEN}}
 
@@ -81,7 +56,6 @@ jobs:
       - name: Push image
         run: |
           IMAGE_ID=$DOCKER_REPO/$IMAGE_NAME
-          TIMESTAMP=$(date +'%Y-%m-%d')
 
           # Change all uppercase to lowercase
           IMAGE_ID=$(echo $IMAGE_ID | tr '[A-Z]' '[a-z]')
@@ -92,18 +66,11 @@ jobs:
           # Strip "v" prefix from tag name
           [[ "${{ github.ref }}" == "refs/tags/"* ]] && VERSION=$(echo $VERSION | sed -e 's/^v//')
 
-          # Create a release snapshot if we are on release branch
-          [[ "${{ github.ref }}" == "refs/heads/release/"* ]] && VERSION=$(echo "${{ github.ref }}" | sed -e 's/refs\/heads\/release\/[v]//' | awk '{print $1"-SNAPSHOT"}')
-
           # Use Docker `latest` tag convention
-          [ "$VERSION" == "master" ] && VERSION=0.0.1-SNAPSHOT
+          [ "$VERSION" == "master" ] && VERSION=latest
 
           echo IMAGE_ID=$IMAGE_ID
           echo VERSION=$VERSION
-          echo TIMESTAMP=$TIMESTAMP
 
           docker tag image $IMAGE_ID:$VERSION
           docker push $IMAGE_ID:$VERSION
-
-          docker tag image $IMAGE_ID:$VERSION-$TIMESTAMP
-          docker push $IMAGE_ID:$VERSION-$TIMESTAMP

.gitignore

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

Dockerfile

@@ -13,7 +13,6 @@ ENV PATH /app/node_modules/.bin:$PATH
 # where available (npm@5+)
 COPY package*.json ./
 
-
 #RUN npm install
 # If you are building your code for production
 RUN (echo "@tip-wlan:registry=https://tip.jfrog.io/artifactory/api/npm/tip-wlan-cloud-npm-repo/" && echo "//tip.jfrog.io/artifactory/api/npm/tip-wlan-cloud-npm-repo/:_authToken=$NPM_TOKEN") > .npmrc
@@ -29,8 +28,7 @@ RUN apk add --no-cache jq
 COPY --from=build /app/dist /usr/share/nginx/html
 COPY nginx/nginx.conf /etc/nginx/conf.d/default.conf
 COPY docker_entrypoint.sh generate_config_js.sh /
-COPY app/commit.properties /
 RUN chmod +x docker_entrypoint.sh generate_config_js.sh
  
 EXPOSE 80
-ENTRYPOINT ["/docker_entrypoint.sh"]
+ENTRYPOINT ["/docker_entrypoint.sh"]

README.md

@@ -2,30 +2,12 @@
 
 ## Set up environment:
 
-Install Dependencies:
+Delete from package.json (undo this delete after all steps)
+`"@tip-wlan/wlan-cloud-ui-library": X.X.X,`
+
+Install Dependencies
 `npm install`
 
-You will get an error installing the package [wlan-cloud-ui-library](https://github.com/Telecominfraproject/wlan-cloud-ui-library) because it is in a private npm registry.
-You can either install the package with the commands below or clone the repo [wlan-cloud-ui-library](https://github.com/Telecominfraproject/wlan-cloud-ui-library) and skip to the section Set up Full Development.
-
-Run
-
-```
-npm login --registry=https://tip.jfrog.io/artifactory/api/npm/tip-wlan-cloud-npm-repo/
-```
-
-And enter the supplied credentials. Ask @sean-macfarlane for credentials if you don't have.
-
-Install package:
-
-```
-npm i --registry=https://tip.jfrog.io/artifactory/api/npm/tip-wlan-cloud-npm-repo/ @tip-wlan/wlan-cloud-ui-library
-```
-
-### Set up Full Development
-
-_Skip this section if you are not using a local [wlan-cloud-ui-library](https://github.com/Telecominfraproject/wlan-cloud-ui-library)_
-
 Clone [wlan-cloud-ui-library](https://github.com/Telecominfraproject/wlan-cloud-ui-library) in parent folder
 
 ```
@@ -46,25 +28,15 @@ If `npm link` fails due to Permissions run with `sudo`
 sudo npm link ../wlan-cloud-ui-library
 ```
 
-To run Full Development you must clone [wlan-cloud-graphql-gw](https://github.com/Telecominfraproject/wlan-cloud-graphql-gw), follow it's README, and run it. Or you use the live production build by setting the environment variable `API` to the GraphQL domain.
-
 ## Run:
 
-### Bare Development
-
-This is if you only want to run this repo locally, and want to use the live production builds of [wlan-cloud-ui-library](https://github.com/Telecominfraproject/wlan-cloud-ui-library) and [wlan-cloud-graphql-gw](https://github.com/Telecominfraproject/wlan-cloud-graphql-gw)
-
-`npm run start:bare`
-
-### Full Development
-
-If you have cloned [wlan-cloud-ui-library](https://github.com/Telecominfraproject/wlan-cloud-ui-library) and [wlan-cloud-graphql-gw](https://github.com/Telecominfraproject/wlan-cloud-graphql-gw)
+### Development
 
 `npm start`
 
 ### Tests
 
-`npm test`
+`npm run test`
 
 ### Production
 

app/commit.properties

@@ -1,4 +0,0 @@
-#This file will be used when running the docker locally
-date=${date}
-commitId=${commit.id}
-projectVersion=${project.version}

app/config.js

@@ -0,0 +1 @@
+window.REACT_APP_API = undefined;

app/containers/Accounts/index.js

@@ -1,72 +1,14 @@
 import React, { useContext } from 'react';
-import { useQuery, useMutation, gql } from '@apollo/client';
+import { useQuery, useMutation } from '@apollo/react-hooks';
 import { Alert, notification } from 'antd';
 
 import { Accounts as AccountsPage, Loading } from '@tip-wlan/wlan-cloud-ui-library';
-
+import { GET_ALL_USERS } from 'graphql/queries';
+import { CREATE_USER, UPDATE_USER, DELETE_USER } from 'graphql/mutations';
 import UserContext from 'contexts/UserContext';
 
-const GET_ALL_USERS = gql`
-  query GetAllUsers($customerId: ID!, $context: JSONObject) {
-    getAllUsers(customerId: $customerId, context: $context) {
-      items {
-        id
-        email: username
-        roles
-        lastModifiedTimestamp
-        customerId
-      }
-      context
-    }
-  }
-`;
-
-const CREATE_USER = gql`
-  mutation CreateUser($username: String!, $password: String!, $roles: [String], $customerId: ID!) {
-    createUser(username: $username, password: $password, roles: $roles, customerId: $customerId) {
-      username
-      roles
-      customerId
-    }
-  }
-`;
-
-const UPDATE_USER = gql`
-  mutation UpdateUser(
-    $id: ID!
-    $username: String!
-    $password: String!
-    $roles: [String]
-    $customerId: ID!
-    $lastModifiedTimestamp: String
-  ) {
-    updateUser(
-      id: $id
-      username: $username
-      password: $password
-      roles: $roles
-      customerId: $customerId
-      lastModifiedTimestamp: $lastModifiedTimestamp
-    ) {
-      id
-      username
-      roles
-      customerId
-      lastModifiedTimestamp
-    }
-  }
-`;
-
-const DELETE_USER = gql`
-  mutation DeleteUser($id: ID!) {
-    deleteUser(id: $id) {
-      id
-    }
-  }
-`;
-
 const Accounts = () => {
-  const { customerId, id: currentUserId } = useContext(UserContext);
+  const { customerId } = useContext(UserContext);
 
   const { data, loading, error, refetch, fetchMore } = useQuery(GET_ALL_USERS, {
     variables: { customerId },
@@ -78,7 +20,7 @@ const Accounts = () => {
   const handleLoadMore = () => {
     if (!data.getAllUsers.context.lastPage) {
       fetchMore({
-        variables: { context: data.getAllUsers.context },
+        variables: { cursor: data.getAllUsers.context.cursor },
         updateQuery: (previousResult, { fetchMoreResult }) => {
           const previousEntry = previousResult.getAllUsers;
           const newItems = fetchMoreResult.getAllUsers.items;
@@ -95,12 +37,12 @@ const Accounts = () => {
     }
   };
 
-  const handleCreateUser = (email, password, roles) => {
+  const handleCreateUser = (email, password, role) => {
     createUser({
       variables: {
         username: email,
         password,
-        roles: [roles],
+        role,
         customerId,
       },
     })
@@ -119,13 +61,13 @@ const Accounts = () => {
       );
   };
 
-  const handleEditUser = (id, email, password, roles, lastModifiedTimestamp) => {
+  const handleEditUser = (id, email, password, role, lastModifiedTimestamp) => {
     updateUser({
       variables: {
         id,
         username: email,
         password,
-        roles: [roles],
+        role,
         customerId,
         lastModifiedTimestamp,
       },
@@ -173,7 +115,6 @@ const Accounts = () => {
   return (
     <AccountsPage
       data={data.getAllUsers.items}
-      currentUserId={currentUserId}
       onLoadMore={handleLoadMore}
       onCreateUser={handleCreateUser}
       onEditUser={handleEditUser}

app/containers/Accounts/tests/index.test.js

@@ -0,0 +1,222 @@
+import React from 'react';
+import '@testing-library/jest-dom/extend-expect';
+import { MockedProvider } from '@apollo/react-testing';
+import { fireEvent, render, waitFor } from '@testing-library/react';
+import UserProvider from 'contexts/UserProvider';
+import { accountsMutationMock, accountsQueryMock } from './mock';
+import Accounts from '..';
+
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation(query => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(), // deprecated
+    removeListener: jest.fn(), // deprecated
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  })),
+});
+
+const mockProp = {
+  id: 123,
+  email: 'test@test.com',
+  role: 'admin',
+  customerId: 2,
+  updateUser: jest.fn(),
+  updateToken: jest.fn(),
+};
+
+describe('<Accounts />', () => {
+  afterEach(jest.resetModules);
+
+  it('should render with data', async () => {
+    const { getByText } = render(
+      <MockedProvider mocks={[accountsQueryMock.success]} addTypename={false}>
+        <UserProvider {...mockProp}>
+          <Accounts />
+        </UserProvider>
+      </MockedProvider>
+    );
+
+    await waitFor(() => expect(getByText('user-0')).toBeVisible());
+  });
+
+  it('error message should be visible with error true', async () => {
+    const { getByText } = render(
+      <MockedProvider mocks={[accountsQueryMock.error]} addTypename={false}>
+        <UserProvider {...mockProp}>
+          <Accounts />
+        </UserProvider>
+      </MockedProvider>
+    );
+    await waitFor(() => expect(getByText('Failed to load Users.')).toBeVisible());
+  });
+
+  it('deleting account should be successful with valid query', async () => {
+    const { getByText, getByRole, getAllByRole } = render(
+      <MockedProvider
+        mocks={[
+          accountsQueryMock.success,
+          accountsMutationMock.deleteAccountSuccess,
+          accountsQueryMock.success,
+        ]}
+        addTypename={false}
+      >
+        <UserProvider {...mockProp}>
+          <Accounts />
+        </UserProvider>
+      </MockedProvider>
+    );
+    await waitFor(() => expect(getByText('user-0')).toBeVisible());
+
+    fireEvent.click(getAllByRole('button', { name: /delete/i })[0]);
+
+    expect(getByRole('button', { name: 'Delete' }));
+    fireEvent.click(getByRole('button', { name: 'Delete' }));
+
+    await waitFor(() => expect(getByText('Account successfully deleted.')).toBeVisible());
+  });
+
+  it('deleting account should not be successful with invalid query', async () => {
+    const { getByText, getByRole, getAllByRole } = render(
+      <MockedProvider
+        mocks={[accountsQueryMock.success, accountsMutationMock.deleteAccountError]}
+        addTypename={false}
+      >
+        <UserProvider {...mockProp}>
+          <Accounts />
+        </UserProvider>
+      </MockedProvider>
+    );
+    await waitFor(() => expect(getByText('user-0')).toBeVisible());
+
+    fireEvent.click(getAllByRole('button', { name: /delete/i })[0]);
+
+    expect(getByRole('button', { name: 'Delete' }));
+    fireEvent.click(getByRole('button', { name: 'Delete' }));
+    await waitFor(() => expect(getByText('Account could not be deleted.')).toBeVisible());
+  });
+
+  it('editing user should not be successful when query is invalid', async () => {
+    const { getByText, getByLabelText, getByRole, getAllByRole } = render(
+      <MockedProvider
+        mocks={[accountsQueryMock.success, accountsMutationMock.editUserError]}
+        addTypename={false}
+      >
+        <UserProvider {...mockProp}>
+          <Accounts />
+        </UserProvider>
+      </MockedProvider>
+    );
+
+    await waitFor(() => expect(getByText('user-0')).toBeVisible());
+
+    fireEvent.click(getAllByRole('button', { name: /edit/i })[0]);
+    expect(getByText('Edit Account')).toBeVisible();
+
+    fireEvent.change(getByLabelText('E-mail'), { target: { value: 'test@test.com' } });
+    fireEvent.change(getByLabelText('Password'), { target: { value: 'password' } });
+    fireEvent.change(getByLabelText('Confirm Password'), { target: { value: 'password' } });
+    fireEvent.click(getByRole('button', { name: 'Save' }));
+
+    await waitFor(() => expect(getByText('Account could not be updated.')).toBeVisible());
+  });
+
+  it('adding user should be successful when query is valid', async () => {
+    const { getByText, getByLabelText, getAllByRole, getByRole } = render(
+      <MockedProvider
+        mocks={[
+          accountsQueryMock.success,
+          accountsQueryMock.success,
+          accountsQueryMock.success,
+
+          accountsMutationMock.addUserSuccess,
+        ]}
+        addTypename={false}
+      >
+        <UserProvider {...mockProp}>
+          <Accounts />
+        </UserProvider>
+      </MockedProvider>
+    );
+    await waitFor(() => expect(getByText('user-0')).toBeVisible());
+    fireEvent.click(getAllByRole('button', { name: /addaccount/i })[0]);
+    expect(getByText('Add Account', { selector: 'div' })).toBeVisible();
+
+    fireEvent.change(getByLabelText('E-mail'), { target: { value: 'test@test.com' } });
+    fireEvent.change(getByLabelText('Password'), { target: { value: 'password' } });
+    fireEvent.change(getByLabelText('Confirm Password'), { target: { value: 'password' } });
+    fireEvent.click(getByRole('button', { name: 'Save' }));
+    await waitFor(() => expect(getByText('Account successfully created.')).toBeVisible());
+  });
+
+  it('adding user should not be successful when query is invalid', async () => {
+    const { getByText, getByLabelText, getByRole } = render(
+      <MockedProvider
+        mocks={[accountsQueryMock.success, accountsMutationMock.addUserError]}
+        addTypename={false}
+      >
+        <UserProvider {...mockProp}>
+          <Accounts />
+        </UserProvider>
+      </MockedProvider>
+    );
+    await waitFor(() => expect(getByText('user-0')).toBeVisible());
+
+    fireEvent.click(getByRole('button', { name: /addaccount/i }));
+    expect(getByText('Add Account', { selector: 'div' })).toBeVisible();
+
+    fireEvent.change(getByLabelText('E-mail'), { target: { value: 'test@test.com' } });
+    fireEvent.change(getByLabelText('Password'), { target: { value: 'password' } });
+    fireEvent.change(getByLabelText('Confirm Password'), { target: { value: 'password' } });
+    fireEvent.click(getByRole('button', { name: 'Save' }));
+    await waitFor(() => expect(getByText('Account could not be created.')).toBeVisible());
+  });
+
+  it('fetchmore shoudl be called when onLoadMore button is clicked', async () => {
+    const { getByRole, getByText } = render(
+      <MockedProvider
+        mocks={[accountsQueryMock.success, accountsQueryMock.fetchMore, accountsQueryMock.success]}
+        addTypename={false}
+      >
+        <UserProvider {...mockProp}>
+          <Accounts />
+        </UserProvider>
+      </MockedProvider>
+    );
+    await waitFor(() => expect(getByText('user-0')).toBeVisible());
+    fireEvent.click(getByRole('button', { name: 'Load More' }));
+    await waitFor(() => expect(getByText('user-18')).toBeVisible());
+  });
+  it('editing user should be successful when query is valid', async () => {
+    const { getByText, getByLabelText, getByRole, getAllByRole } = render(
+      <MockedProvider
+        mocks={[
+          accountsQueryMock.success,
+          accountsQueryMock.success,
+          accountsMutationMock.editUserSuccess,
+        ]}
+        addTypename={false}
+      >
+        <UserProvider {...mockProp}>
+          <Accounts />
+        </UserProvider>
+      </MockedProvider>
+    );
+    await waitFor(() => expect(getByText('user-0')).toBeVisible());
+    fireEvent.click(getAllByRole('button', { name: /edit/i })[0]);
+
+    await waitFor(() => expect(getByText('Edit Account')).toBeVisible());
+
+    fireEvent.change(getByLabelText('E-mail'), { target: { value: 'test@test.com' } });
+    fireEvent.change(getByLabelText('Password'), { target: { value: 'password' } });
+    fireEvent.change(getByLabelText('Confirm Password'), { target: { value: 'password' } });
+    fireEvent.click(getByRole('button', { name: 'Save' }));
+    await waitFor(() => expect(getByText('user-0')).toBeVisible());
+    await waitFor(() => expect(getByText('Edit Account')).not.toBeVisible());
+    await waitFor(() => expect(getByText('Account successfully updated.')).toBeVisible());
+  }, 5000);
+});

app/containers/Accounts/tests/mock.js

@@ -0,0 +1,202 @@
+import { GET_ALL_USERS } from 'graphql/queries';
+import { CREATE_USER, UPDATE_USER, DELETE_USER } from 'graphql/mutations';
+
+export const accountsQueryMock = {
+  success: {
+    request: {
+      query: GET_ALL_USERS,
+      variables: { customerId: 2 },
+    },
+    result: {
+      data: {
+        getAllUsers: {
+          items: [
+            {
+              id: '1',
+              email: 'user-0',
+              role: 'CustomerIT',
+              lastModifiedTimestamp: '1596814602673',
+              customerId: '2',
+              __typename: 'User',
+            },
+            {
+              id: '2',
+              email: 'user-1',
+              role: 'CustomerIT',
+              lastModifiedTimestamp: '1596814602814',
+              customerId: '2',
+              __typename: 'User',
+            },
+            {
+              id: '3',
+              email: 'user-2',
+              role: 'CustomerIT',
+              lastModifiedTimestamp: '1596814602815',
+              customerId: '2',
+              __typename: 'User',
+            },
+            {
+              id: '4',
+              email: 'user-3',
+              role: 'CustomerIT',
+              lastModifiedTimestamp: '1596814602815',
+              customerId: '2',
+              __typename: 'User',
+            },
+            {
+              id: '5',
+              email: 'user-4',
+              role: 'CustomerIT',
+              lastModifiedTimestamp: '1596814602815',
+              customerId: '2',
+              __typename: 'User',
+            },
+          ],
+          context: {
+            cursor: 'test',
+            lastPage: false,
+          },
+        },
+      },
+      loading: false,
+      networkStatus: 7,
+      stale: false,
+    },
+  },
+  fetchMore: {
+    request: {
+      query: GET_ALL_USERS,
+      variables: { customerId: 2, cursor: 'test' },
+    },
+    result: {
+      data: {
+        getAllUsers: {
+          items: [
+            {
+              id: '18',
+              email: 'user-18',
+              role: 'CustomerIT',
+              lastModifiedTimestamp: '1596814602673',
+              customerId: '2',
+              __typename: 'User',
+            },
+          ],
+          context: {
+            cursor: 'test',
+            lastPage: true,
+          },
+        },
+      },
+      loading: false,
+      networkStatus: 7,
+      stale: false,
+    },
+  },
+  error: {
+    request: {
+      query: GET_ALL_USERS,
+      variables: { customerId: 2 },
+      errorPolicy: 'all',
+    },
+    result: {
+      data: null,
+      errors: [{}],
+      loading: false,
+      networkStatus: 7,
+      stale: false,
+    },
+  },
+};
+
+export const accountsMutationMock = {
+  addUserSuccess: {
+    request: {
+      query: CREATE_USER,
+      variables: {
+        username: 'test@test.com',
+        password: 'password',
+        role: 'CustomerIT',
+        customerId: 2,
+      },
+    },
+    result: {
+      data: {
+        createUser: {
+          username: 'test@test.com',
+          role: 'CustomerIT',
+          customerId: '2',
+        },
+      },
+    },
+  },
+  addUserError: {
+    request: {
+      query: CREATE_USER,
+      variables: {},
+    },
+    result: {
+      data: null,
+      errors: [{}],
+    },
+  },
+  editUserSuccess: {
+    request: {
+      query: UPDATE_USER,
+      variables: {
+        id: '1',
+        username: 'test@test.com',
+        password: 'password',
+        role: 'CustomerIT',
+        customerId: 2,
+        lastModifiedTimestamp: '1596814602673',
+      },
+    },
+    result: {
+      data: {
+        updateUser: {
+          id: '1',
+          username: 'test@test.com',
+          role: 'CustomerIT',
+          customerId: '2',
+          lastModifiedTimestamp: '1597080851726',
+          __typename: 'User',
+        },
+      },
+    },
+  },
+  editUserError: {
+    request: {
+      query: UPDATE_USER,
+      variables: {},
+    },
+    result: {
+      data: null,
+      errors: [{}],
+    },
+  },
+  deleteAccountSuccess: {
+    request: {
+      query: DELETE_USER,
+      variables: { id: '1' },
+    },
+    result: {
+      data: {
+        deleteUser: {
+          id: '1',
+          __typename: 'User',
+        },
+      },
+    },
+  },
+  deleteAccountError: {
+    request: {
+      query: DELETE_USER,
+      variables: { id: '2' },
+    },
+    result: {
+      data: null,
+      errors: [{}],
+      loading: false,
+    },
+  },
+};

app/containers/AddProfile/index.js

@@ -1,82 +1,18 @@
 import React, { useContext } from 'react';
 import { AddProfile as AddProfilePage } from '@tip-wlan/wlan-cloud-ui-library';
-import { useMutation, useQuery, gql } from '@apollo/client';
+import { useMutation, useQuery } from '@apollo/react-hooks';
 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 { fetchMoreProfiles } from 'graphql/functions';
-
-const CREATE_PROFILE = gql`
-  mutation CreateProfile(
-    $profileType: String!
-    $customerId: ID!
-    $name: String!
-    $childProfileIds: [ID]
-    $details: JSONObject
-  ) {
-    createProfile(
-      profileType: $profileType
-      customerId: $customerId
-      name: $name
-      childProfileIds: $childProfileIds
-      details: $details
-    ) {
-      profileType
-      customerId
-      name
-      childProfileIds
-      details
-    }
-  }
-`;
+import { CREATE_PROFILE } from 'graphql/mutations';
 
 const AddProfile = () => {
   const { customerId } = useContext(UserContext);
-  const { data: ssidProfiles, fetchMore } = useQuery(GET_ALL_PROFILES(), {
+  const { data: ssidProfiles } = useQuery(GET_ALL_PROFILES, {
     variables: { customerId, type: 'ssid' },
-    fetchPolicy: 'network-only',
-  });
-  const { data: radiusProfiles, fetchMore: fetchMoreRadiusProfiles } = useQuery(
-    GET_ALL_PROFILES(),
-    {
-      variables: { customerId, type: 'radius' },
-      fetchPolicy: 'network-only',
-    }
-  );
-  const { data: captiveProfiles, fetchMore: fetchMoreCaptiveProfiles } = useQuery(
-    GET_ALL_PROFILES(),
-    {
-      variables: { customerId, type: 'captive_portal' },
-      fetchPolicy: 'network-only',
-    }
-  );
-  const { data: venueProfiles, fetchMore: fetchMoreVenueProfiles } = useQuery(GET_ALL_PROFILES(), {
-    variables: { customerId, type: 'passpoint_venue' },
-    fetchPolicy: 'network-only',
-  });
-  const { data: operatorProfiles, fetchMore: fetchMoreOperatorProfiles } = useQuery(
-    GET_ALL_PROFILES(),
-    {
-      variables: { customerId, type: 'passpoint_operator' },
-      fetchPolicy: 'network-only',
-    }
-  );
-  const { data: idProviderProfiles, fetchMore: fetchMoreIdProviderProfiles } = useQuery(
-    GET_ALL_PROFILES(),
-    {
-      variables: { customerId, type: 'passpoint_osu_id_provider' },
-      fetchPolicy: 'network-only',
-    }
-  );
-  const { data: rfProfiles, fetchMore: fetchMoreRfProfiles } = useQuery(GET_ALL_PROFILES(), {
-    variables: { customerId, type: 'rf' },
-    fetchPolicy: 'network-only',
   });
   const [createProfile] = useMutation(CREATE_PROFILE);
-  const history = useHistory();
 
   const handleAddProfile = (profileType, name, details, childProfileIds = []) => {
     createProfile({
@@ -93,7 +29,6 @@ const AddProfile = () => {
           message: 'Success',
           description: 'Profile successfully created.',
         });
-        history.push(ROUTES.profiles, { refetch: true });
       })
       .catch(() =>
         notification.error({
@@ -103,30 +38,12 @@ const AddProfile = () => {
       );
   };
 
-  const handleFetchMoreProfiles = (e, key) => {
-    if (key === 'radius') fetchMoreProfiles(e, radiusProfiles, fetchMoreRadiusProfiles);
-    else if (key === 'captive_portal')
-      fetchMoreProfiles(e, captiveProfiles, fetchMoreCaptiveProfiles);
-    else if (key === 'rf') fetchMoreProfiles(e, rfProfiles, fetchMoreRfProfiles);
-    else if (key === 'passpoint_venue') fetchMoreProfiles(e, venueProfiles, fetchMoreVenueProfiles);
-    else if (key === 'passpoint_operator')
-      fetchMoreProfiles(e, operatorProfiles, fetchMoreOperatorProfiles);
-    else if (key === 'passpoint_osu_id_provider')
-      fetchMoreProfiles(e, idProviderProfiles, fetchMoreIdProviderProfiles);
-    else fetchMoreProfiles(e, ssidProfiles, fetchMore);
-  };
-
   return (
     <AddProfilePage
       onCreateProfile={handleAddProfile}
-      ssidProfiles={ssidProfiles?.getAllProfiles?.items}
-      radiusProfiles={radiusProfiles?.getAllProfiles?.items}
-      captiveProfiles={captiveProfiles?.getAllProfiles?.items}
-      venueProfiles={venueProfiles?.getAllProfiles?.items}
-      operatorProfiles={operatorProfiles?.getAllProfiles?.items}
-      idProviderProfiles={idProviderProfiles?.getAllProfiles?.items}
-      rfProfiles={rfProfiles?.getAllProfiles?.items}
-      onFetchMoreProfiles={handleFetchMoreProfiles}
+      ssidProfiles={
+        (ssidProfiles && ssidProfiles.getAllProfiles && ssidProfiles.getAllProfiles.items) || []
+      }
     />
   );
 };

app/containers/AddProfile/tests/index.test.js

@@ -0,0 +1,75 @@
+import React from 'react';
+import '@testing-library/jest-dom/extend-expect';
+import { MockedProvider } from '@apollo/react-testing';
+import { cleanup, fireEvent, render, waitFor } from '@testing-library/react';
+
+import UserProvider from 'contexts/UserProvider';
+import { addProfileMutationMock, getAllProfilesQueryMock } from './mock';
+import AddProfile from '..';
+
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation(query => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(), // deprecated
+    removeListener: jest.fn(), // deprecated
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  })),
+});
+
+const mockProp = {
+  id: 123,
+  email: 'test@test.com',
+  role: 'admin',
+  customerId: 2,
+  updateUser: jest.fn(),
+  updateToken: jest.fn(),
+};
+const DOWN_ARROW = { keyCode: 40 };
+
+describe('<AddProfile />', () => {
+  afterEach(cleanup);
+  it('should create profile when provide correct Mutation', async () => {
+    const { getByText, getByLabelText, getByRole } = render(
+      <MockedProvider
+        mocks={[getAllProfilesQueryMock.success, addProfileMutationMock.success]}
+        addTypename={false}
+      >
+        <UserProvider {...mockProp}>
+          <AddProfile />
+        </UserProvider>
+      </MockedProvider>
+    );
+    await waitFor(() => expect(getByRole('button', { name: 'Save' })).toBeVisible());
+
+    fireEvent.change(getByLabelText('Name'), { target: { value: 'test' } });
+    await waitFor(() => expect(getByLabelText('Name')).toHaveValue('test'));
+
+    fireEvent.keyDown(getByLabelText('Type'), DOWN_ARROW);
+    fireEvent.click(getByText('Access Point'));
+    fireEvent.click(getByRole('button', { name: 'Save' }));
+    await waitFor(() => expect(getByText('Profile successfully created.')).toBeVisible());
+  });
+  it('should show error when provide incorrect Mutation', async () => {
+    const { getByText, getByLabelText, getByRole } = render(
+      <MockedProvider mocks={[getAllProfilesQueryMock.success]} addTypename={false}>
+        <UserProvider {...mockProp}>
+          <AddProfile />
+        </UserProvider>
+      </MockedProvider>
+    );
+    await waitFor(() => expect(getByRole('button', { name: 'Save' })).toBeVisible());
+
+    fireEvent.change(getByLabelText('Name'), { target: { value: 'test' } });
+    await waitFor(() => expect(getByLabelText('Name')).toHaveValue('test'));
+
+    fireEvent.keyDown(getByLabelText('Type'), DOWN_ARROW);
+    fireEvent.click(getByText('Access Point'));
+    fireEvent.click(getByRole('button', { name: 'Save' }));
+    await waitFor(() => expect(getByText('Profile could not be created.')).toBeVisible());
+  });
+});

app/containers/AddProfile/tests/mock.js

@@ -0,0 +1,146 @@
+import { GET_ALL_PROFILES } from 'graphql/queries';
+import { CREATE_PROFILE } from 'graphql/mutations';
+
+export const getAllProfilesQueryMock = {
+  success: {
+    request: {
+      query: GET_ALL_PROFILES,
+      variables: { customerId: 2, type: 'ssid' },
+    },
+    result: {
+      data: {
+        getAllProfiles: {
+          items: [
+            {
+              id: '1',
+              name: 'Radius-Profile',
+              profileType: 'radius',
+              details: {
+                model_type: 'RadiusProfile',
+                subnetConfiguration: null,
+                serviceRegionMap: {
+                  Ottawa: {
+                    model_type: 'RadiusServiceRegion',
+                    serverMap: {
+                      'Radius-Profile': [
+                        {
+                          model_type: 'RadiusServer',
+                          ipAddress: '192.168.0.1',
+                          secret: 'testing123',
+                          authPort: 1812,
+                          timeout: null,
+                        },
+                      ],
+                    },
+                    regionName: 'Ottawa',
+                  },
+                },
+                profileType: 'radius',
+              },
+              __typename: 'Profile',
+            },
+          ],
+          context: {
+            cursor:
+              'bnVsbEBAQHsibW9kZWxfdHlwZSI6IkNvbnRleHRDaGlsZHJlbiIsImNoaWxkcmVuIjp7fX1AQEBudWxs',
+            lastPage: true,
+            __typename: 'PaginationContext',
+          },
+          __typename: 'ProfilePagination',
+        },
+      },
+      loading: false,
+      networkStatus: 7,
+      stale: false,
+    },
+  },
+  errpr: [],
+};
+export const addProfileMutationMock = {
+  success: {
+    request: {
+      query: CREATE_PROFILE,
+      variables: {
+        profileType: 'equipment_ap',
+        customerId: 2,
+        name: 'test',
+        childProfileIds: [],
+        details: {
+          profileType: 'equipment_ap',
+          name: 'test',
+          vlanNative: true,
+          ntpServer: { auto: undefined },
+          ledControlEnabled: undefined,
+          rtlsSettings: { enabled: false },
+          syslogRelay: { enabled: false },
+          syntheticClientEnabled: false,
+          equipmentDiscovery: false,
+          childProfileIds: [],
+          model_type: 'ApNetworkConfiguration',
+        },
+      },
+    },
+    result: {
+      data: {
+        createProfile: {
+          profileType: 'equipment_ap',
+          customerId: '2',
+          name: 'test',
+          childProfileIds: [],
+          details: {
+            model_type: 'ApNetworkConfiguration',
+            networkConfigVersion: 'AP-1',
+            equipmentType: 'AP',
+            vlanNative: true,
+            vlan: 0,
+            ntpServer: {
+              model_type: 'AutoOrManualString',
+              auto: false,
+              value: null,
+            },
+            syslogRelay: {
+              model_type: 'SyslogRelay',
+              enabled: false,
+              srvHostIp: null,
+              srvHostPort: 514,
+              severity: 'NOTICE',
+            },
+            rtlsSettings: {
+              model_type: 'RtlsSettings',
+              enabled: false,
+              srvHostIp: null,
+              srvHostPort: 0,
+            },
+            syntheticClientEnabled: false,
+            ledControlEnabled: true,
+            equipmentDiscovery: false,
+            radioMap: {
+              is5GHz: {
+                model_type: 'RadioProfileConfiguration',
+                bestApEnabled: true,
+                bestAPSteerType: 'both',
+              },
+              is2dot4GHz: {
+                model_type: 'RadioProfileConfiguration',
+                bestApEnabled: true,
+                bestAPSteerType: 'both',
+              },
+              is5GHzU: {
+                model_type: 'RadioProfileConfiguration',
+                bestApEnabled: true,
+                bestAPSteerType: 'both',
+              },
+              is5GHzL: {
+                model_type: 'RadioProfileConfiguration',
+                bestApEnabled: true,
+                bestAPSteerType: 'both',
+              },
+            },
+            profileType: 'equipment_ap',
+          },
+          __typename: 'Profile',
+        },
+      },
+    },
+  },
+};

app/containers/Alarms/index.js

@@ -1,27 +1,10 @@
 import React, { useContext } from 'react';
-import { useQuery, gql } from '@apollo/client';
+import { useQuery } from '@apollo/react-hooks';
 import { Alert, notification } from 'antd';
 import { Alarms as AlarmsPage, Loading } from '@tip-wlan/wlan-cloud-ui-library';
 
 import UserContext from 'contexts/UserContext';
-
-const GET_ALL_ALARMS = gql`
-  query GetAllAlarms($customerId: ID!, $context: JSONObject) {
-    getAllAlarms(customerId: $customerId, context: $context) {
-      items {
-        severity
-        alarmCode
-        details
-        createdTimestamp
-        equipment {
-          id
-          name
-        }
-      }
-      context
-    }
-  }
-`;
+import { GET_ALL_ALARMS } from 'graphql/queries';
 
 const Alarms = () => {
   const { customerId } = useContext(UserContext);
@@ -49,7 +32,7 @@ const Alarms = () => {
   const handleLoadMore = () => {
     if (!data.getAllAlarms.context.lastPage) {
       fetchMore({
-        variables: { context: data.getAllAlarms.context },
+        variables: { cursor: data.getAllAlarms.context.cursor },
         updateQuery: (previousResult, { fetchMoreResult }) => {
           const previousEntry = previousResult.getAllAlarms;
           const newItems = fetchMoreResult.getAllAlarms.items;

app/containers/Alarms/tests/index.test.js

@@ -0,0 +1,121 @@
+import React from 'react';
+import '@testing-library/jest-dom/extend-expect';
+import { fireEvent, render, waitFor } from '@testing-library/react';
+import { MockedProvider } from '@apollo/react-testing';
+import { BrowserRouter as Router } from 'react-router-dom';
+import UserProvider from 'contexts/UserProvider';
+import { alarmsQueryMock } from './mock';
+import Alarms from '..';
+
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation(query => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(), // deprecated
+    removeListener: jest.fn(), // deprecated
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  })),
+});
+
+const mockProp = {
+  id: 123,
+  email: 'test@test.com',
+  role: 'admin',
+  customerId: 2,
+  updateUser: jest.fn(),
+  updateToken: jest.fn(),
+};
+
+describe('<Alarms />', () => {
+  afterEach(jest.resetModules);
+
+  it('should render with Data', async () => {
+    const { getAllByText } = render(
+      <MockedProvider mocks={[alarmsQueryMock.success]} addTypename={false}>
+        <UserProvider {...mockProp}>
+          <Router>
+            <Alarms />
+          </Router>
+        </UserProvider>
+      </MockedProvider>
+    );
+    await waitFor(() => expect(getAllByText('Available memory is too low')[0]).toBeVisible());
+  });
+
+  it('should show error when query return error', async () => {
+    const { getByText } = render(
+      <MockedProvider mocks={[alarmsQueryMock.error]} addTypename={false}>
+        <UserProvider {...mockProp}>
+          <Router>
+            <Alarms />
+          </Router>
+        </UserProvider>
+      </MockedProvider>
+    );
+    await waitFor(() => expect(getByText('Failed to load alarms.')).toBeVisible());
+  });
+
+  it('should work with the onLoadMore', async () => {
+    const { getAllByText, getByRole } = render(
+      <MockedProvider
+        mocks={[alarmsQueryMock.success, alarmsQueryMock.loadmore]}
+        addTypename={false}
+      >
+        <UserProvider {...mockProp}>
+          <Router>
+            <Alarms />
+          </Router>
+        </UserProvider>
+      </MockedProvider>
+    );
+    await waitFor(() => expect(getAllByText('Available memory is too low')[0]).toBeVisible());
+
+    fireEvent.click(getByRole('button', { name: /load more/i }));
+    await waitFor(() => expect(getAllByText('Available memory is too low')[0]).toBeVisible());
+  });
+
+  it('should work with the onReload', async () => {
+    const { getAllByText, getByText, container } = render(
+      <MockedProvider
+        mocks={[alarmsQueryMock.success, alarmsQueryMock.success]}
+        addTypename={false}
+      >
+        <UserProvider {...mockProp}>
+          <Router>
+            <Alarms />
+          </Router>
+        </UserProvider>
+      </MockedProvider>
+    );
+    await waitFor(() => expect(getAllByText('Available memory is too low')[0]).toBeVisible());
+
+    const reloadButton = container.querySelector(
+      '.ant-btn.index-module__Button___VGygY.ant-btn-icon-only'
+    );
+    fireEvent.click(reloadButton);
+    await waitFor(() => expect(getByText('Alarms reloaded.')).toBeVisible());
+  });
+
+  it('should show error when reload wuery return error', async () => {
+    const { getAllByText, getByText, container } = render(
+      <MockedProvider mocks={[alarmsQueryMock.success]} addTypename={false}>
+        <UserProvider {...mockProp}>
+          <Router>
+            <Alarms />
+          </Router>
+        </UserProvider>
+      </MockedProvider>
+    );
+    await waitFor(() => expect(getAllByText('Available memory is too low')[0]).toBeVisible());
+
+    const reloadButton = container.querySelector(
+      '.ant-btn.index-module__Button___VGygY.ant-btn-icon-only'
+    );
+    fireEvent.click(reloadButton);
+    await waitFor(() => expect(getByText('Alarms reloaded.')).toBeVisible());
+  });
+});

app/containers/Alarms/tests/mock.js

@@ -0,0 +1,191 @@
+import { GET_ALL_ALARMS } from 'graphql/queries';
+
+export const alarmsQueryMock = {
+  success: {
+    request: {
+      query: GET_ALL_ALARMS,
+      variables: { customerId: 2 },
+      errorPolicy: 'all',
+    },
+    result: {
+      data: {
+        getAllAlarms: {
+          items: [
+            {
+              severity: 'error',
+              alarmCode: 'MemoryUtilization',
+              details: {
+                model_type: 'AlarmDetails',
+                message: 'Available memory is too low',
+                affectedEquipmentIds: null,
+                generatedBy: null,
+                contextAttrs: null,
+              },
+              createdTimestamp: '1596564234684',
+              equipment: {
+                id: '7',
+                name: 'AP 7',
+              },
+            },
+            {
+              severity: 'error',
+              alarmCode: 'MemoryUtilization',
+              details: {
+                model_type: 'AlarmDetails',
+                message: 'Available memory is too low',
+                affectedEquipmentIds: null,
+                generatedBy: null,
+                contextAttrs: null,
+              },
+              createdTimestamp: '1596564234796',
+              equipment: {
+                id: '14',
+                name: 'AP 14',
+              },
+            },
+            {
+              severity: 'error',
+              alarmCode: 'MemoryUtilization',
+              details: {
+                model_type: 'AlarmDetails',
+                message: 'Available memory is too low',
+                affectedEquipmentIds: null,
+                generatedBy: null,
+                contextAttrs: null,
+              },
+              createdTimestamp: '1596564234885',
+              equipment: {
+                id: '21',
+                name: 'AP 21',
+              },
+            },
+            {
+              severity: 'error',
+              alarmCode: 'MemoryUtilization',
+              details: {
+                model_type: 'AlarmDetails',
+                message: 'Available memory is too low',
+                affectedEquipmentIds: null,
+                generatedBy: null,
+                contextAttrs: null,
+              },
+              createdTimestamp: '1596564234957',
+              equipment: {
+                id: '28',
+                name: 'AP 28',
+              },
+            },
+            {
+              severity: 'error',
+              alarmCode: 'MemoryUtilization',
+              details: {
+                model_type: 'AlarmDetails',
+                message: 'Available memory is too low',
+                affectedEquipmentIds: null,
+                generatedBy: null,
+                contextAttrs: null,
+              },
+              createdTimestamp: '1596564235022',
+              equipment: {
+                id: '35',
+                name: 'AP 35',
+              },
+            },
+            {
+              severity: 'error',
+              alarmCode: 'MemoryUtilization',
+              details: {
+                model_type: 'AlarmDetails',
+                message: 'Available memory is too low',
+                affectedEquipmentIds: null,
+                generatedBy: null,
+                contextAttrs: null,
+              },
+              createdTimestamp: '1596564235082',
+              equipment: {
+                id: '42',
+                name: 'AP 42',
+              },
+            },
+            {
+              severity: 'error',
+              alarmCode: 'MemoryUtilization',
+              details: {
+                model_type: 'AlarmDetails',
+                message: 'Available memory is too low',
+                affectedEquipmentIds: null,
+                generatedBy: null,
+                contextAttrs: null,
+              },
+              createdTimestamp: '1596564235155',
+              equipment: {
+                id: '49',
+                name: 'AP 49',
+              },
+            },
+          ],
+          context: {
+            cursor: 'test',
+            lastPage: false,
+          },
+        },
+      },
+      loading: false,
+      networkStatus: 7,
+      stale: false,
+    },
+  },
+  loadmore: {
+    request: {
+      query: GET_ALL_ALARMS,
+      variables: { customerId: 2, cursor: 'test' },
+      errorPolicy: 'all',
+    },
+    result: {
+      data: {
+        getAllAlarms: {
+          items: [
+            {
+              severity: 'error',
+              alarmCode: 'MemoryUtilization',
+              details: {
+                model_type: 'AlarmDetails',
+                message: 'Available memory is too low',
+                affectedEquipmentIds: null,
+                generatedBy: null,
+                contextAttrs: null,
+              },
+              createdTimestamp: '1596564234684',
+              equipment: {
+                id: '7',
+                name: 'AP 7',
+              },
+            },
+          ],
+          context: {
+            cursor: 'test2',
+            lastPage: true,
+          },
+        },
+      },
+      loading: false,
+      networkStatus: 7,
+      stale: false,
+    },
+  },
+
+  error: {
+    request: {
+      query: GET_ALL_ALARMS,
+      variables: { customerId: 2 },
+      errorPolicy: 'all',
+    },
+    result: {
+      data: null,
+      loading: false,
+      errors: [{}],
+      networkStatus: 7,
+      stale: false,
+    },
+  },
+};

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, GenericNotFound } from '@tip-wlan/wlan-cloud-ui-library';
+import { ThemeProvider } 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, ROUTES, USER_FRIENDLY_RADIOS } from 'constants/index';
+import { AUTH_TOKEN, COMPANY } 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: ROUTES.dashboard,
+      pathname: '/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, roles: userRole, customerId };
+    initialUser = { id: userId, email: userName, role: 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, roles: userRole, customerId });
+      setUser({ id: userId, email: userName, role: userRole, customerId });
     }
   };
 
@@ -60,45 +60,32 @@ const App = () => {
     <UserProvider
       id={user.id}
       email={user.email}
-      roles={user.roles}
+      role={user.role}
       customerId={user.customerId}
       updateUser={updateUser}
       updateToken={updateToken}
     >
-      <ThemeProvider
-        company={COMPANY}
-        logo={logo}
-        logoMobile={logoMobile}
-        routes={ROUTES}
-        radioTypes={USER_FRIENDLY_RADIOS}
-      >
+      <ThemeProvider company={COMPANY} logo={logo} logoMobile={logoMobile}>
         <Helmet titleTemplate={`%s - ${COMPANY}`} defaultTitle={COMPANY}>
           <meta name="description" content={COMPANY} />
         </Helmet>
 
         <Switch>
-          <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} />
+          <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} />
 
-          <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="/profiles" component={Profiles} />
+          <ProtectedRouteWithLayout exact path="/profiles/:id" component={ProfileDetails} />
+          <ProtectedRouteWithLayout exact path="/addprofile" component={AddProfile} />
 
-          <ProtectedRouteWithLayout exact path={ROUTES.alarms} component={Alarms} />
-          {user?.id !== 0 && (
-            <ProtectedRouteWithLayout exact path={ROUTES.account} component={EditAccount} />
+          <ProtectedRouteWithLayout exact path="/alarms" component={Alarms} />
+          <ProtectedRouteWithLayout exact path="/account/edit" component={EditAccount} />
+          {user.role === 'SuperUser' && (
+            <ProtectedRouteWithLayout exact path="/accounts" component={Accounts} />
           )}
-          {user?.roles?.[0] === 'SuperUser' && (
-            <ProtectedRouteWithLayout exact path={ROUTES.users} component={Accounts} />
-          )}
-          <ProtectedRouteWithLayout component={GenericNotFound} />
         </Switch>
       </ThemeProvider>
     </UserProvider>

app/containers/Dashboard/index.js

@@ -1,11 +1,10 @@
 import React, { useContext, useEffect, useMemo, useState, useRef } from 'react';
 import { Alert } from 'antd';
 import moment from 'moment';
-import { useQuery } from '@apollo/client';
+import { useQuery } from '@apollo/react-hooks';
 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';
@@ -14,7 +13,7 @@ function formatBytes(bytes, decimals = 2) {
   const dm = decimals < 0 ? 0 : decimals;
   const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
 
-  const i = Math.floor(Math.log(Math.abs(bytes)) / Math.log(k));
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
 
   // eslint-disable-next-line no-restricted-properties
   return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i] || ''}`;
@@ -30,6 +29,13 @@ 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)' },
@@ -104,8 +110,6 @@ const Dashboard = () => {
         const clientDevices5GHz = [];
         const trafficBytesDownstreamData = [];
         const trafficBytesUpstreamData = [];
-        let totalDown = 0;
-        let totalUp = 0;
 
         list.forEach(
           ({
@@ -127,19 +131,10 @@ const Dashboard = () => {
             total5GHz += (radios?.is5GHz || 0) + (radios?.is5GHzL || 0) + (radios?.is5GHzU || 0); // combine all 5GHz radios
 
             clientDevices2dot4GHz.push([eventTimestamp, radios.is2dot4GHz || 0]);
-            clientDevices5GHz.push([eventTimestamp, total5GHz || 0]);
+            clientDevices5GHz.push([eventTimestamp, total5GHz]);
 
-            trafficBytesDownstreamData.push([
-              eventTimestamp,
-              (trafficBytesDownstream > 0 && trafficBytesDownstream) || 0,
-            ]);
-            trafficBytesUpstreamData.push([
-              eventTimestamp,
-              (trafficBytesUpstream > 0 && trafficBytesUpstream) || 0,
-            ]);
-
-            totalDown += (trafficBytesDownstream > 0 && trafficBytesDownstream) || 0;
-            totalUp += (trafficBytesUpstream > 0 && trafficBytesUpstream) || 0;
+            trafficBytesDownstreamData.push([eventTimestamp, trafficBytesDownstream]);
+            trafficBytesUpstreamData.push([eventTimestamp, trafficBytesUpstream]);
           }
         );
 
@@ -168,8 +163,6 @@ const Dashboard = () => {
               value: [...prev.traffic.trafficBytesUpstream.value, ...trafficBytesUpstreamData],
             },
           },
-          totalDownstreamTraffic: totalDown,
-          totalUpstreamTraffic: totalUp,
         };
       });
     }
@@ -202,7 +195,7 @@ const Dashboard = () => {
     formatLineChartData(metricsData?.filterSystemEvents?.items);
   }, [metricsData]);
 
-  const statsData = useMemo(() => {
+  const statsArr = useMemo(() => {
     const status = data?.getAllStatus?.items[0]?.detailsJSON || {};
 
     const {
@@ -210,6 +203,8 @@ const Dashboard = () => {
       totalProvisionedEquipment,
       equipmentInServiceCount,
       equipmentWithClientsCount,
+      trafficBytesDownstream,
+      trafficBytesUpstream,
     } = status;
 
     const clientRadios = {};
@@ -229,13 +224,24 @@ const Dashboard = () => {
       });
     }
 
-    return {
-      totalProvisionedEquipment,
-      equipmentInServiceCount,
-      equipmentWithClientsCount,
-      totalAssociated,
-      clientRadios,
-    };
+    return [
+      {
+        title: 'Access Point',
+        'Total Provisioned': totalProvisionedEquipment,
+        'In Service': equipmentInServiceCount,
+        'With Clients': equipmentWithClientsCount,
+      },
+      {
+        title: 'Client Devices',
+        'Total Associated': totalAssociated,
+        ...clientRadios,
+      },
+      {
+        title: 'Usage Information',
+        'Total Traffic (US)': formatBytes(trafficBytesUpstream),
+        'Total Traffic (DS)': formatBytes(trafficBytesDownstream),
+      },
+    ];
   }, [data]);
 
   const pieChartsData = useMemo(() => {
@@ -257,24 +263,7 @@ const Dashboard = () => {
 
   return (
     <DashboardPage
-      statsCardDetails={[
-        {
-          title: 'Access Point',
-          'Total Provisioned': statsData?.totalProvisionedEquipment,
-          'In Service': statsData?.equipmentInServiceCount,
-          'With Clients': statsData?.equipmentWithClientsCount,
-        },
-        {
-          title: 'Client Devices',
-          'Total Associated': statsData?.totalAssociated,
-          ...statsData?.clientRadios,
-        },
-        {
-          title: 'Usage Information (24 hours)',
-          'Total Traffic (US)': formatBytes(lineChartData?.totalUpstreamTraffic),
-          'Total Traffic (DS)': formatBytes(lineChartData?.totalDownstreamTraffic),
-        },
-      ]}
+      statsCardDetails={statsArr}
       pieChartDetails={pieChartsData}
       lineChartData={lineChartData}
       lineChartConfig={lineChartConfig}

app/containers/Dashboard/tests/index.test.js

@@ -0,0 +1,68 @@
+import React from 'react';
+import '@testing-library/jest-dom/extend-expect';
+import { MockedProvider } from '@apollo/react-testing';
+import { render, waitFor } from '@testing-library/react';
+import UserProvider from 'contexts/UserProvider';
+import { dashboardQueryMock } from './mock';
+import Dashboard from '..';
+
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation(query => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(), // deprecated
+    removeListener: jest.fn(), // deprecated
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  })),
+});
+
+const mockProp = {
+  id: 123,
+  email: 'test@test.com',
+  role: 'admin',
+  customerId: 2,
+  updateUser: jest.fn(),
+  updateToken: jest.fn(),
+};
+jest.mock('moment', () => () => ({
+  subtract: () => ({ valueOf: () => ({ toString: () => '1234' }) }),
+  valueOf: () => ({ toString: () => '1234' }),
+}));
+jest.useFakeTimers();
+describe('<Dashboard />', () => {
+  afterEach(jest.resetModules);
+
+  it('should render with data', async () => {
+    const { getByText } = render(
+      <MockedProvider
+        mocks={[
+          dashboardQueryMock.filterSystemEvents.success,
+          dashboardQueryMock.filterSystemEvents.success,
+          dashboardQueryMock.getAllStatus.success,
+        ]}
+        addTypename={false}
+      >
+        <UserProvider {...mockProp}>
+          <Dashboard />
+        </UserProvider>
+      </MockedProvider>
+    );
+    jest.advanceTimersByTime('300000');
+    await waitFor(() => expect(getByText('2.4GHz')).toBeVisible());
+  });
+
+  it('error message should be visible with error true', async () => {
+    const { getByText } = render(
+      <MockedProvider mocks={[dashboardQueryMock.filterSystemEvents.error]} addTypename={false}>
+        <UserProvider {...mockProp}>
+          <Dashboard />
+        </UserProvider>
+      </MockedProvider>
+    );
+    await waitFor(() => expect(getByText('Failed to load Dashboard')).toBeVisible());
+  });
+});

app/containers/EditAccount/index.js

@@ -1,47 +1,11 @@
 import React, { useContext } from 'react';
-import { useMutation, useQuery, gql } from '@apollo/client';
+import { useMutation, useQuery } from '@apollo/react-hooks';
 import { notification, Alert } from 'antd';
 import { EditAccount as EditAccountPage, Loading } from '@tip-wlan/wlan-cloud-ui-library';
 
 import UserContext from 'contexts/UserContext';
-
-const GET_USER = gql`
-  query GetUser($id: ID!) {
-    getUser(id: $id) {
-      id
-      username
-      roles
-      customerId
-      lastModifiedTimestamp
-    }
-  }
-`;
-
-const UPDATE_USER = gql`
-  mutation UpdateUser(
-    $id: ID!
-    $username: String!
-    $password: String!
-    $roles: [String]
-    $customerId: ID!
-    $lastModifiedTimestamp: String
-  ) {
-    updateUser(
-      id: $id
-      username: $username
-      password: $password
-      roles: $roles
-      customerId: $customerId
-      lastModifiedTimestamp: $lastModifiedTimestamp
-    ) {
-      id
-      username
-      roles
-      customerId
-      lastModifiedTimestamp
-    }
-  }
-`;
+import { GET_USER } from 'graphql/queries';
+import { UPDATE_USER } from 'graphql/mutations';
 
 const EditAccount = () => {
   const { id, email } = useContext(UserContext);
@@ -49,14 +13,14 @@ const EditAccount = () => {
   const [updateUser] = useMutation(UPDATE_USER);
 
   const handleSubmit = newPassword => {
-    const { roles, customerId, lastModifiedTimestamp } = data.getUser;
+    const { role, customerId, lastModifiedTimestamp } = data.getUser;
 
     updateUser({
       variables: {
         id,
         username: email,
         password: newPassword,
-        roles,
+        role,
         customerId,
         lastModifiedTimestamp,
       },

app/containers/EditAccount/tests/index.test.js

@@ -0,0 +1,86 @@
+import React from 'react';
+import '@testing-library/jest-dom/extend-expect';
+import { fireEvent, render, waitFor } from '@testing-library/react';
+import { MockedProvider } from '@apollo/react-testing';
+import UserProvider from 'contexts/UserProvider';
+import { editAccountMutationMock, editAccountQueryMock } from './mock';
+import EditAccount from '..';
+
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation(query => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(), // deprecated
+    removeListener: jest.fn(), // deprecated
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  })),
+});
+
+const mockProp = {
+  id: 123,
+  email: 'test@test.com',
+  role: 'admin',
+  customerId: 2,
+  updateUser: jest.fn(),
+  updateToken: jest.fn(),
+};
+
+describe('<EditAccount />', () => {
+  afterEach(jest.resetModules);
+
+  it('should render with Data and Edit Profile when valid Mutation', async () => {
+    const { getByText, getByTestId, getByLabelText } = render(
+      <MockedProvider
+        mocks={[editAccountQueryMock.success, editAccountMutationMock.success]}
+        addTypename={false}
+      >
+        <UserProvider {...mockProp}>
+          <EditAccount />
+        </UserProvider>
+      </MockedProvider>
+    );
+    await waitFor(() => expect(getByText('New Password')).toBeVisible());
+
+    fireEvent.change(getByLabelText('New Password'), { target: { value: 'password' } });
+    await waitFor(() => expect(getByLabelText('New Password')).toHaveValue('password'));
+    fireEvent.change(getByLabelText('Confirm Password'), { target: { value: 'password' } });
+    fireEvent.submit(getByTestId('saveButton'));
+    await waitFor(() => expect(getByText('Password successfully updated.')).toBeVisible());
+  });
+
+  it('should show error when query return Error', async () => {
+    const { getByText } = render(
+      <MockedProvider mocks={[editAccountQueryMock.error]} addTypename={false}>
+        <UserProvider {...mockProp}>
+          <EditAccount />
+        </UserProvider>
+      </MockedProvider>
+    );
+
+    await waitFor(() => expect(getByText('Failed to load User.')).toBeVisible());
+  });
+
+  it('should show error when edit profile Mutation return error', async () => {
+    const { getByText, getByTestId, getByLabelText } = render(
+      <MockedProvider
+        mocks={[editAccountQueryMock.success, editAccountMutationMock.error]}
+        addTypename={false}
+      >
+        <UserProvider {...mockProp}>
+          <EditAccount />
+        </UserProvider>
+      </MockedProvider>
+    );
+    await waitFor(() => expect(getByText('New Password')).toBeVisible());
+
+    fireEvent.change(getByLabelText('New Password'), { target: { value: 'password' } });
+    await waitFor(() => expect(getByLabelText('New Password')).toHaveValue('password'));
+    fireEvent.change(getByLabelText('Confirm Password'), { target: { value: 'password' } });
+    fireEvent.submit(getByTestId('saveButton'));
+    await waitFor(() => expect(getByText('Password could not be updated.')).toBeVisible());
+  });
+});

app/containers/EditAccount/tests/mock.js

@@ -0,0 +1,85 @@
+import { GET_USER } from 'graphql/queries';
+import { UPDATE_USER } from 'graphql/mutations';
+
+export const editAccountQueryMock = {
+  success: {
+    request: {
+      query: GET_USER,
+      variables: { id: 123 },
+    },
+    result: {
+      data: {
+        getUser: {
+          id: '123',
+          username: 'user-0',
+          role: 'CustomerIT',
+          customerId: '2',
+          lastModifiedTimestamp: '1597238767547',
+          __typename: 'User',
+        },
+      },
+      loading: false,
+      networkStatus: 7,
+      stale: false,
+    },
+  },
+
+  error: {
+    request: {
+      query: GET_USER,
+      variables: { id: 123 },
+    },
+    result: {
+      data: null,
+      errors: [{}],
+      loading: false,
+      networkStatus: 7,
+      stale: false,
+    },
+  },
+};
+
+export const editAccountMutationMock = {
+  success: {
+    request: {
+      query: UPDATE_USER,
+      variables: {
+        id: 123,
+        username: 'test@test.com',
+        password: 'password',
+        role: 'CustomerIT',
+        customerId: '2',
+        lastModifiedTimestamp: '1597238767547',
+      },
+    },
+    result: {
+      data: {
+        updateUser: {
+          id: 123,
+          username: 'user-0',
+          role: 'CustomerIT',
+          customerId: '2',
+          lastModifiedTimestamp: '1597238767547',
+          __typename: 'User',
+        },
+      },
+    },
+  },
+  error: {
+    request: {
+      query: UPDATE_USER,
+      variables: {
+        id: 123,
+        username: 'test@test.com',
+        password: 'password',
+        role: 'CustomerIT',
+        customerId: '2',
+        lastModifiedTimestamp: '1597238767547',
+      },
+    },
+    result: {
+      data: null,
+      errors: [{}],
+    },
+  },
+};

app/containers/Login/index.js

@@ -1,21 +1,12 @@
 import React, { useContext } from 'react';
-import { useMutation, useApolloClient, gql } from '@apollo/client';
+import { useMutation, useApolloClient } from '@apollo/react-hooks';
 import { useHistory } from 'react-router-dom';
 import { notification } from 'antd';
 
 import { Login as LoginPage } from '@tip-wlan/wlan-cloud-ui-library';
 
 import UserContext from 'contexts/UserContext';
-
-const AUTHENTICATE_USER = gql`
-  mutation AuthenticateUser($email: String!, $password: String!) {
-    authenticateUser(email: $email, password: $password) {
-      access_token
-      refresh_token
-      expires_in
-    }
-  }
-`;
+import { AUTHENTICATE_USER } from 'graphql/mutations';
 
 const Login = () => {
   const history = useHistory();
@@ -26,10 +17,9 @@ const Login = () => {
   const handleLogin = (email, password) => {
     authenticateUser({ variables: { email, password } })
       .then(({ data }) => {
-        client.resetStore().then(() => {
-          updateToken(data.authenticateUser);
-          history.push('/');
-        });
+        client.resetStore();
+        updateToken(data.authenticateUser);
+        history.push('/');
       })
       .catch(() =>
         notification.error({

app/containers/Login/tests/index.test.js

@@ -0,0 +1,71 @@
+import React from 'react';
+import '@testing-library/jest-dom/extend-expect';
+import { fireEvent, cleanup, render, waitFor } from '@testing-library/react';
+import { MockedProvider } from '@apollo/react-testing';
+import UserProvider from 'contexts/UserProvider';
+import { ThemeProvider } from '@tip-wlan/wlan-cloud-ui-library';
+import { loginMutationMock } from './mock';
+import Login from '..';
+
+jest.mock('react-router-dom', () => ({
+  useHistory: () => ({ push: jest.fn() }),
+}));
+
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation(query => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(), // deprecated
+    removeListener: jest.fn(), // deprecated
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  })),
+});
+
+const mockProp = {
+  id: 123,
+  email: 'test@test.com',
+  role: 'admin',
+  customerId: 2,
+  updateUser: jest.fn(),
+  updateToken: jest.fn(),
+};
+
+describe('<Login />', () => {
+  afterEach(() => cleanup);
+  it('login should be successful when mutation is valid', async () => {
+    const { getByLabelText, getByTestId } = render(
+      <ThemeProvider company="Test" logo="test.png" logoMobile="test.png">
+        <MockedProvider mocks={[loginMutationMock.loginSuccess]} addTypename={false}>
+          <UserProvider {...mockProp}>
+            <Login />
+          </UserProvider>
+        </MockedProvider>
+      </ThemeProvider>
+    );
+
+    fireEvent.change(getByLabelText('E-mail'), { target: { value: 'test@test.com' } });
+    fireEvent.change(getByLabelText('Password'), { target: { value: 'password' } });
+    fireEvent.submit(getByTestId('loginButton'));
+    await waitFor(() => expect(getByLabelText('E-mail')).toBeVisible());
+  });
+
+  it('login should not be successful when mutation is invalid', async () => {
+    const { getByLabelText, getByText, getByTestId } = render(
+      <ThemeProvider company="Test" logo="test.png" logoMobile="test.png">
+        <MockedProvider mocks={[loginMutationMock.loginError]} addTypename={false}>
+          <UserProvider {...mockProp}>
+            <Login />
+          </UserProvider>
+        </MockedProvider>
+      </ThemeProvider>
+    );
+    fireEvent.change(getByLabelText('E-mail'), { target: { value: 'test@test.com' } });
+    fireEvent.change(getByLabelText('Password'), { target: { value: 'password' } });
+    fireEvent.submit(getByTestId('loginButton'));
+    await waitFor(() => expect(getByText('Invalid e-mail or password.')).toBeVisible());
+  });
+});

app/containers/Login/tests/mock.js

@@ -0,0 +1,32 @@
+import { AUTHENTICATE_USER } from 'graphql/mutations';
+
+export const loginMutationMock = {
+  loginSuccess: {
+    request: {
+      query: AUTHENTICATE_USER,
+      variables: {
+        email: 'test@test.com',
+        password: 'password',
+      },
+    },
+    result: {
+      data: {
+        authenticateUser: {
+          access_token: '123',
+          refresh_token: '345',
+          expires_in: '1',
+        },
+      },
+    },
+  },
+  loginError: {
+    request: {
+      query: AUTHENTICATE_USER,
+      variables: {},
+    },
+    result: {
+      data: null,
+      errors: [{}],
+    },
+  },
+};

app/containers/MasterLayout/index.js

@@ -1,19 +1,19 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { useLocation } from 'react-router-dom';
-import { useApolloClient, useQuery } from '@apollo/client';
+import { useApolloClient, useQuery } from '@apollo/react-hooks';
 import { AppLayout as Layout } from '@tip-wlan/wlan-cloud-ui-library';
 
 import { GET_ALARM_COUNT } from 'graphql/queries';
 
-import { AUTH_TOKEN, ROUTES } from 'constants/index';
+import { AUTH_TOKEN } from 'constants/index';
 
 import { removeItem } from 'utils/localStorage';
 
 import UserContext from 'contexts/UserContext';
 
 const MasterLayout = ({ children }) => {
-  const { roles, customerId, id: currentUserId } = useContext(UserContext);
+  const { role, customerId } = useContext(UserContext);
 
   const client = useApolloClient();
   const location = useLocation();
@@ -30,60 +30,75 @@ const MasterLayout = ({ children }) => {
   const menuItems = [
     {
       key: 'dashboard',
-      path: ROUTES.dashboard,
+      path: '/dashboard',
       text: 'Dashboard',
     },
     {
       key: 'network',
-      path: ROUTES.network,
+      path: '/network',
       text: 'Network',
     },
     {
       key: 'profiles',
-      path: ROUTES.profiles,
+      path: '/profiles',
       text: 'Profiles',
     },
     {
       key: 'system',
-      path: ROUTES.system,
+      path: '/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: [
-        ...(currentUserId !== 0
-          ? [
-              {
-                key: 'editAccount',
-                path: ROUTES.account,
-                text: 'Edit Account',
-              },
-            ]
-          : []),
+        {
+          key: 'editAccount',
+          path: '/account/edit',
+          text: 'Edit Account',
+        },
         {
           key: 'logout',
-          path: ROUTES.root,
+          path: '/',
           text: 'Log Out',
         },
       ],
     },
   ];
 
-  if (roles?.[0] === 'SuperUser') {
+  if (role === 'SuperUser') {
     menuItems.push({
-      key: 'users',
-      path: ROUTES.users,
-      text: 'Users',
+      key: 'accounts',
+      path: '/accounts',
+      text: 'Accounts',
     });
     mobileMenuItems.push({
-      key: 'users',
-      path: ROUTES.users,
-      text: 'Users',
+      key: 'accounts',
+      path: '/accounts',
+      text: 'Accounts',
     });
   }
 
@@ -94,7 +109,6 @@ const MasterLayout = ({ children }) => {
       menuItems={menuItems}
       mobileMenuItems={mobileMenuItems}
       totalAlarms={data && data.getAlarmCount}
-      currentUserId={currentUserId}
     >
       {children}
     </Layout>

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

@@ -1,7 +1,8 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
-import { useParams, useHistory } from 'react-router-dom';
-import { useQuery, useMutation } from '@apollo/client';
+import gql from 'graphql-tag';
+import { useParams } from 'react-router-dom';
+import { useQuery, useMutation } from '@apollo/react-hooks';
 import { Alert, notification } from 'antd';
 import moment from 'moment';
 import {
@@ -9,63 +10,48 @@ import {
   Loading,
 } from '@tip-wlan/wlan-cloud-ui-library';
 
-import {
-  GET_EQUIPMENT,
-  FILTER_SERVICE_METRICS,
-  GET_ALL_FIRMWARE,
-  GET_ALL_PROFILES,
-} from 'graphql/queries';
-import {
-  UPDATE_EQUIPMENT,
-  DELETE_EQUIPMENT,
-  UPDATE_EQUIPMENT_FIRMWARE,
-  REQUEST_EQUIPMENT_SWITCH_BANK,
-  REQUEST_EQUIPMENT_REBOOT,
-} from 'graphql/mutations';
-import { fetchMoreProfiles } from 'graphql/functions';
+import { GET_EQUIPMENT, GET_ALL_FIRMWARE, FILTER_SERVICE_METRICS } from 'graphql/queries';
+import { UPDATE_EQUIPMENT, UPDATE_EQUIPMENT_FIRMWARE } from 'graphql/mutations';
 import UserContext from 'contexts/UserContext';
 
+export const GET_ALL_PROFILES = gql`
+  query GetAllProfiles($customerId: ID!, $cursor: String, $type: String, $limit: Int) {
+    getAllProfiles(customerId: $customerId, cursor: $cursor, type: $type, limit: $limit) {
+      items {
+        id
+        name
+        profileType
+        details
+        childProfiles {
+          id
+          name
+          details
+        }
+      }
+      context {
+        cursor
+        lastPage
+      }
+    }
+  }
+`;
+
 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',
-    errorPolicy: 'all',
+    variables: { id },
   });
-
-  const { data: dataFirmware, error: errorFirmware, loading: loadingFirmware } = useQuery(
-    GET_ALL_FIRMWARE,
+  const { data: dataProfiles, error: errorProfiles, loading: landingProfiles } = useQuery(
+    GET_ALL_PROFILES,
     {
-      skip: !data?.getEquipment?.model,
-      variables: { modelId: data?.getEquipment?.model },
-      errorPolicy: 'all',
+      variables: { customerId, type: 'equipment_ap', limit: 100 },
     }
   );
-  const {
-    data: dataProfiles,
-    error: errorProfiles,
-    loading: loadingProfiles,
-    fetchMore,
-  } = useQuery(
-    GET_ALL_PROFILES(`
-    childProfiles {
-      id
-      name
-      details
-    }`),
-    {
-      variables: { customerId, type: 'equipment_ap' },
-    }
-  );
-
   const {
     loading: metricsLoading,
     error: metricsError,
@@ -84,30 +70,30 @@ const AccessPointDetails = ({ locations }) => {
 
   const [updateEquipment] = useMutation(UPDATE_EQUIPMENT);
   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 { data: dataFirmware, error: errorFirmware, loading: landingFirmware } = useQuery(
+    GET_ALL_FIRMWARE
+  );
 
   const refetchData = () => {
     refetch();
     metricsRefetch();
   };
 
-  const handleUpdateEquipment = ({
-    id: equipmentId,
+  const handleUpdateEquipment = (
+    equipmentId,
     equipmentType,
     inventoryId,
-    customerId: custId,
+    custId,
     profileId,
     locationId,
     name,
-    baseMacAddress,
     latitude,
     longitude,
     serial,
     lastModifiedTimestamp,
-    formattedData,
-  }) => {
+    details
+  ) => {
     updateEquipment({
       variables: {
         id: equipmentId,
@@ -117,12 +103,11 @@ const AccessPointDetails = ({ locations }) => {
         profileId,
         locationId,
         name,
-        baseMacAddress,
         latitude,
         longitude,
         serial,
         lastModifiedTimestamp,
-        details: formattedData,
+        details,
       },
     })
       .then(() => {
@@ -140,38 +125,19 @@ 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 => {
-        if (firmwareResp?.data?.updateEquipmentFirmware?.success === true) {
-          notification.success({
-            message: 'Success',
-            description: 'Equipment Firmware Upgrade in progress',
-          });
-        } else {
+        if (firmwareResp && firmwareResp.updateEquipmentFirmware.success === false) {
           notification.error({
             message: 'Error',
             description: 'Equipment Firmware Upgrade could not be updated.',
           });
+        } else {
+          notification.success({
+            message: 'Success',
+            description: 'Equipment Firmware Upgrade in progress',
+          });
         }
       })
       .catch(() =>
@@ -181,59 +147,11 @@ const AccessPointDetails = ({ locations }) => {
         })
       );
 
-  const handleRequestEquipmentSwitchBank = equipmentId =>
-    requestEquipmentSwitchBank({ variables: { equipmentId } })
-      .then(firmwareResp => {
-        if (firmwareResp?.data?.requestEquipmentSwitchBank?.success === true) {
-          notification.success({
-            message: 'Success',
-            description: 'Equipment Firmware in progress',
-          });
-        } else {
-          notification.error({
-            message: 'Error',
-            description: 'Equipment Firmware could not be updated.',
-          });
-        }
-      })
-      .catch(() =>
-        notification.error({
-          message: 'Error',
-          description: 'Equipment Firmware could not be updated.',
-        })
-      );
-
-  const handleRequestEquipmentReboot = equipmentId =>
-    requestEquipmentReboot({ variables: { equipmentId } })
-      .then(firmwareResp => {
-        if (firmwareResp?.data?.requestEquipmentReboot?.success === true) {
-          notification.success({
-            message: 'Success',
-            description: 'Equipment Firmware in progress',
-          });
-        } else {
-          notification.error({
-            message: 'Error',
-            description: 'Equipment Firmware could not be updated.',
-          });
-        }
-      })
-      .catch(() =>
-        notification.error({
-          message: 'Error',
-          description: 'Equipment Firmware could not be updated.',
-        })
-      );
-
-  const handleFetchProfiles = e => {
-    fetchMoreProfiles(e, dataProfiles, fetchMore);
-  };
-
-  if (loading) {
+  if (loading || landingProfiles || landingFirmware) {
     return <Loading />;
   }
 
-  if (error && !data?.getEquipment) {
+  if (error) {
     return (
       <Alert
         message="Error"
@@ -244,29 +162,42 @@ const AccessPointDetails = ({ locations }) => {
     );
   }
 
+  if (errorProfiles) {
+    return (
+      <Alert
+        message="Error"
+        description="Failed to load Access Point profiles."
+        type="error"
+        showIcon
+      />
+    );
+  }
+
+  if (errorFirmware) {
+    return (
+      <Alert
+        message="Error"
+        description="Failed to load Access Point firmware."
+        type="error"
+        showIcon
+      />
+    );
+  }
+
   return (
     <AccessPointDetailsPage
       handleRefresh={refetchData}
       onUpdateEquipment={handleUpdateEquipment}
-      onDeleteEquipment={handleDeleteEquipment}
-      data={data?.getEquipment}
-      profiles={dataProfiles?.getAllProfiles?.items}
+      data={data.getEquipment}
+      profiles={dataProfiles.getAllProfiles.items}
       osData={{
         loading: metricsLoading,
         error: metricsError,
         data: metricsData && metricsData.filterServiceMetrics.items,
       }}
-      firmware={dataFirmware?.getAllFirmware}
+      firmware={dataFirmware.getAllFirmware}
       locations={locations}
       onUpdateEquipmentFirmware={handleUpdateEquipmentFirmware}
-      onRequestEquipmentSwitchBank={handleRequestEquipmentSwitchBank}
-      onRequestEquipmentReboot={handleRequestEquipmentReboot}
-      loadingProfiles={loadingProfiles}
-      errorProfiles={errorProfiles}
-      loadingFirmware={loadingFirmware}
-      errorFirmware={errorFirmware}
-      onFetchMoreProfiles={handleFetchProfiles}
-      isLastProfilesPage={dataProfiles?.getAllProfiles?.context?.lastPage}
     />
   );
 };

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

@@ -0,0 +1,106 @@
+import React from 'react';
+import '@testing-library/jest-dom/extend-expect';
+import { MockedProvider } from '@apollo/react-testing';
+import { render, waitFor } from '@testing-library/react';
+import UserProvider from 'contexts/UserProvider';
+import { APDetailsQueryMock } from './mock';
+import AccessPointDetails from '..';
+
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation(query => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(), // deprecated
+    removeListener: jest.fn(), // deprecated
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  })),
+});
+
+const mockProp = {
+  id: 123,
+  email: 'test@test.com',
+  role: 'admin',
+  customerId: 2,
+  updateUser: jest.fn(),
+  updateToken: jest.fn(),
+};
+
+jest.mock('moment', () => () => ({
+  subtract: () => ({ valueOf: () => ({ toString: () => '1234' }) }),
+  valueOf: () => ({ toString: () => '1234' }),
+}));
+jest.mock('react-router-dom', () => ({
+  useParams: () => ({
+    id: '1',
+  }),
+  useHistory: () => ({ push: jest.fn() }),
+}));
+
+jest.useFakeTimers();
+describe('<AccessPointDetails />', () => {
+  afterEach(jest.resetModules);
+
+  it('error message should be visible with error true', async () => {
+    const { getByText } = render(
+      <MockedProvider
+        mocks={[
+          APDetailsQueryMock.getEquipment.error,
+          APDetailsQueryMock.getAllProfiles.error,
+          APDetailsQueryMock.getAllFirmware.error,
+          APDetailsQueryMock.filterServiceMetrics.error,
+        ]}
+        addTypename={false}
+      >
+        <UserProvider {...mockProp}>
+          <AccessPointDetails locations={[1, 2, 3]} />
+        </UserProvider>
+      </MockedProvider>
+    );
+    jest.advanceTimersByTime(1000);
+    await waitFor(() => expect(getByText('Failed to load Access Point data.')).toBeVisible());
+  });
+
+  it('error message should be visible with error true', async () => {
+    const { getByText } = render(
+      <MockedProvider
+        mocks={[
+          APDetailsQueryMock.getEquipment.success,
+          APDetailsQueryMock.getAllProfiles.error,
+          APDetailsQueryMock.getAllFirmware.success,
+          APDetailsQueryMock.filterServiceMetrics.success,
+        ]}
+        addTypename={false}
+      >
+        <UserProvider {...mockProp}>
+          <AccessPointDetails locations={[1, 2, 3]} />
+        </UserProvider>
+      </MockedProvider>
+    );
+    jest.advanceTimersByTime(1000);
+    await waitFor(() => expect(getByText('Failed to load Access Point profiles.')).toBeVisible());
+  });
+
+  it('error message should be visible with error true', async () => {
+    const { getByText } = render(
+      <MockedProvider
+        mocks={[
+          APDetailsQueryMock.getEquipment.success,
+          APDetailsQueryMock.getAllProfiles.success,
+          APDetailsQueryMock.getAllFirmware.error,
+          APDetailsQueryMock.filterServiceMetrics.success,
+        ]}
+        addTypename={false}
+      >
+        <UserProvider {...mockProp}>
+          <AccessPointDetails locations={[1, 2, 3]} />
+        </UserProvider>
+      </MockedProvider>
+    );
+    jest.advanceTimersByTime(1000);
+    await waitFor(() => expect(getByText('Failed to load Access Point firmware.')).toBeVisible());
+  });
+});

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

@@ -1,32 +1,28 @@
 import React, { useEffect, useContext } from 'react';
 import PropTypes from 'prop-types';
 import moment from 'moment';
-import { useLazyQuery } from '@apollo/client';
+import { useLazyQuery } from '@apollo/react-hooks';
 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';
 
 import styles from './index.module.scss';
 
-const renderTableCell = (text, _record, _index, defaultValue = 'N/A') => {
-  if (Array.isArray(text)) {
-    if (text.length < 1) {
-      return defaultValue;
-    }
+const renderTableCell = tabCell => {
+  if (Array.isArray(tabCell)) {
     return (
       <div className={styles.tabColumn}>
-        {text.map((i, key) => (
+        {tabCell.map((i, key) => (
           // eslint-disable-next-line react/no-array-index-key
           <span key={key}>{i}</span>
         ))}
       </div>
     );
   }
-  return text !== null ? text : defaultValue;
+  return tabCell;
 };
 
 const durationToString = duration =>
@@ -59,17 +55,12 @@ const accessPointsTableColumns = [
   },
   {
     title: 'MAC',
-    dataIndex: 'baseMacAddress',
+    dataIndex: ['status', 'protocol', 'details', 'reportedMacAddr'],
     render: renderTableCell,
   },
   {
     title: 'MANUFACTURER',
-    dataIndex: 'manufacturer',
-    render: renderTableCell,
-  },
-  {
-    title: 'FIRMWARE',
-    dataIndex: ['status', 'firmware', 'detailsJSON', 'activeSwVersion'],
+    dataIndex: ['status', 'protocol', 'details', 'manufacturer'],
     render: renderTableCell,
   },
   {
@@ -89,8 +80,8 @@ const accessPointsTableColumns = [
   },
   {
     title: 'CHANNEL',
-    dataIndex: ['status', 'channel', 'detailsJSON', 'channelNumberStatusDataMap'],
-    render: text => renderTableCell(Object.values(text ?? [])),
+    dataIndex: 'channel',
+    render: renderTableCell,
   },
   {
     title: 'OCCUPANCY',
@@ -105,7 +96,7 @@ const accessPointsTableColumns = [
   {
     title: 'DEVICES',
     dataIndex: ['status', 'clientDetails', 'details', 'numClientsPerRadio'],
-    render: (text, record, index) => renderTableCell(text, record, index, 0),
+    render: renderTableCell,
   },
 ];
 
@@ -137,7 +128,7 @@ const AccessPoints = ({ checkedLocations }) => {
   const handleLoadMore = () => {
     if (!equipData.filterEquipment.context.lastPage) {
       fetchMore({
-        variables: { context: equipData.filterEquipment.context },
+        variables: { cursor: equipData.filterEquipment.context.cursor },
         updateQuery: (previousResult, { fetchMoreResult }) => {
           const previousEntry = previousResult.filterEquipment;
           const newItems = fetchMoreResult.filterEquipment.items;
@@ -166,7 +157,7 @@ const AccessPoints = ({ checkedLocations }) => {
 
   return (
     <NetworkTableContainer
-      activeTab={ROUTES.accessPoints}
+      activeTab="/network/access-points"
       onRefresh={handleOnRefresh}
       tableColumns={accessPointsTableColumns}
       tableData={equipData && equipData.filterEquipment && equipData.filterEquipment.items}

app/containers/Network/containers/AccessPoints/index.module.scss

@@ -1,4 +1,5 @@
 .tabColumn {
   display: flex;
   flex-direction: column;
+  padding: 0 30px;
 }

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

@@ -0,0 +1,124 @@
+import React from 'react';
+import '@testing-library/jest-dom/extend-expect';
+import { MockedProvider } from '@apollo/react-testing';
+import { fireEvent, render, waitFor } from '@testing-library/react';
+import UserProvider from 'contexts/UserProvider';
+import { BrowserRouter as Router } from 'react-router-dom';
+import { AccessPointsQueryMock } from './mock';
+import AccessPoints from '..';
+
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation(query => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(), // deprecated
+    removeListener: jest.fn(), // deprecated
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  })),
+});
+
+const mockProp = {
+  id: 123,
+  email: 'test@test.com',
+  role: 'admin',
+  customerId: 2,
+  updateUser: jest.fn(),
+  updateToken: jest.fn(),
+};
+
+describe('<AccessPoints />', () => {
+  afterEach(jest.resetModules);
+
+  it('should render with data', async () => {
+    const { getByText } = render(
+      <MockedProvider mocks={[AccessPointsQueryMock.filterEquipment.success]} addTypename={false}>
+        <UserProvider {...mockProp}>
+          <Router>
+            <AccessPoints checkedLocations={['2', '3', '4', '5', '6', '7', '8']} />
+          </Router>
+        </UserProvider>
+      </MockedProvider>
+    );
+    await waitFor(() => expect(getByText('AP 1')).toBeVisible());
+  });
+
+  it('error message should be visible with error true', async () => {
+    const { getByText } = render(
+      <MockedProvider mocks={[AccessPointsQueryMock.filterEquipment.error]} addTypename={false}>
+        <UserProvider {...mockProp}>
+          <Router>
+            <AccessPoints checkedLocations={[1, 2, 3]} />
+          </Router>
+        </UserProvider>
+      </MockedProvider>
+    );
+    await waitFor(() => expect(getByText('Failed to load equipment.')).toBeVisible());
+  });
+
+  it('click on Load More should fetch more data', async () => {
+    const { getByRole, getByText } = render(
+      <MockedProvider
+        mocks={[
+          AccessPointsQueryMock.filterEquipment.success,
+          AccessPointsQueryMock.filterEquipment.loadmore,
+        ]}
+        addTypename={false}
+      >
+        <UserProvider {...mockProp}>
+          <Router>
+            <AccessPoints checkedLocations={['2', '3', '4', '5', '6', '7', '8']} />
+          </Router>
+        </UserProvider>
+      </MockedProvider>
+    );
+    await waitFor(() => expect(getByText('AP 1')).toBeVisible());
+    fireEvent.click(getByRole('button', { name: /load more/i }));
+    await waitFor(() => expect(getByText('AP 1')).toBeVisible());
+  });
+
+  it('click on reload button should refetch data', async () => {
+    const { getByText, container } = render(
+      <MockedProvider
+        mocks={[
+          AccessPointsQueryMock.filterEquipment.success,
+          AccessPointsQueryMock.filterEquipment.success,
+        ]}
+        addTypename={false}
+      >
+        <UserProvider {...mockProp}>
+          <Router>
+            <AccessPoints checkedLocations={['2', '3', '4', '5', '6', '7', '8']} />
+          </Router>
+        </UserProvider>
+      </MockedProvider>
+    );
+    await waitFor(() => expect(getByText('AP 1')).toBeVisible());
+    const reloadButton = container.querySelector(
+      '.ant-btn.index-module__Button___VGygY.ant-btn-icon-only'
+    );
+    fireEvent.click(reloadButton);
+    await waitFor(() => expect(getByText('Access points reloaded.')).toBeVisible());
+  });
+
+  it('click on reload button should not refetch data when query return error', async () => {
+    const { getByText, container } = render(
+      <MockedProvider mocks={[AccessPointsQueryMock.filterEquipment.success]} addTypename={false}>
+        <UserProvider {...mockProp}>
+          <Router>
+            <AccessPoints checkedLocations={['2', '3', '4', '5', '6', '7', '8']} />
+          </Router>
+        </UserProvider>
+      </MockedProvider>
+    );
+    await waitFor(() => expect(getByText('AP 1')).toBeVisible());
+    const reloadButton = container.querySelector(
+      '.ant-btn.index-module__Button___VGygY.ant-btn-icon-only'
+    );
+    fireEvent.click(reloadButton);
+    await waitFor(() => expect(getByText('Access points could not be reloaded.')).toBeVisible());
+  });
+});

app/containers/Network/containers/BulkEditAccessPoints/index.js

@@ -2,7 +2,7 @@ import React, { useContext, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { Alert, notification } from 'antd';
 import { useParams } from 'react-router-dom';
-import { useQuery, useMutation } from '@apollo/client';
+import { useQuery, useMutation } from '@apollo/react-hooks';
 import { BulkEditAccessPoints, Loading } from '@tip-wlan/wlan-cloud-ui-library';
 
 import { FILTER_EQUIPMENT_BULK_EDIT_APS } from 'graphql/queries';
@@ -11,8 +11,6 @@ import { UPDATE_EQUIPMENT_BULK } from 'graphql/mutations';
 import UserContext from 'contexts/UserContext';
 import styles from './index.module.scss';
 
-const defaultAppliedRadios = { is5GHzL: 'is5GHzL', is2dot4GHz: 'is2dot4GHz', is5GHzU: 'is5GHzU' };
-
 const renderTableCell = tabCell => {
   if (Array.isArray(tabCell)) {
     return (
@@ -27,63 +25,47 @@ const renderTableCell = tabCell => {
   return <span>{tabCell}</span>;
 };
 const accessPointsChannelTableColumns = [
-  { title: 'Name', dataIndex: 'name', key: 'name', width: 250, render: renderTableCell },
+  { title: 'NAME', dataIndex: 'name', key: 'name', render: renderTableCell },
   {
-    title: 'Manual Active Channel',
-    dataIndex: 'manualChannelNumber',
-    key: 'manualChannelNumber',
+    title: 'CHANNEL',
+    dataIndex: 'channel',
+    key: 'channel',
     editable: true,
-    width: 200,
-    render: renderTableCell,
-  },
-
-  {
-    title: 'Manual Backup Channel',
-    dataIndex: 'manualBackupChannelNumber',
-    key: 'manualBackupChannelNumber',
-    editable: true,
-    width: 210,
     render: renderTableCell,
   },
   {
-    title: 'Cell Size',
+    title: 'CELL SIZE',
     dataIndex: 'cellSize',
     key: 'cellSize',
     editable: true,
-    width: 150,
     render: renderTableCell,
   },
   {
-    title: 'Probe Response Threshold',
+    title: 'PROB RESPONSE THRESHOLD',
     dataIndex: 'probeResponseThreshold',
     key: 'probeResponseThreshold',
     editable: true,
-    width: 210,
     render: renderTableCell,
   },
   {
-    title: 'Client Disconnect Threshold',
+    title: 'CLIENT DISCONNECT THRESHOLD',
     dataIndex: 'clientDisconnectThreshold',
     key: 'clientDisconnectThreshold',
     editable: true,
-    width: 210,
-
     render: renderTableCell,
   },
   {
-    title: 'SNR (% Drop)',
+    title: 'SNR (% DROP)',
     dataIndex: 'snrDrop',
     key: 'snrDrop',
     editable: true,
-    width: 150,
     render: renderTableCell,
   },
   {
-    title: 'Min Load',
+    title: 'MIN LOAD',
     dataIndex: 'minLoad',
     key: 'minLoad',
     editable: true,
-    width: 150,
     render: renderTableCell,
   },
 ];
@@ -178,84 +160,68 @@ const BulkEditAPs = ({ locations, checkedLocations }) => {
   const [updateEquipmentBulk] = useMutation(UPDATE_EQUIPMENT_BULK);
 
   const getRadioDetails = (radioDetails, type) => {
-    if (type === 'manualChannelNumber') {
-      const manualChannelNumbers = [];
-      Object.keys(radioDetails?.radioMap || {}).map(i => {
-        return manualChannelNumbers.push(radioDetails.radioMap[i]?.manualChannelNumber);
-      });
-      return manualChannelNumbers;
-    }
-
-    if (type === 'manualBackupChannelNumber') {
-      const manualBackupChannelNumbers = [];
-      Object.keys(radioDetails?.radioMap || {}).map(i => {
-        return manualBackupChannelNumbers.push(radioDetails.radioMap[i]?.manualBackupChannelNumber);
-      });
-      return manualBackupChannelNumbers;
-    }
     if (type === 'cellSize') {
       const cellSizeValues = [];
-      Object.keys(radioDetails?.radioMap || {}).map(i => {
-        return cellSizeValues.push(radioDetails.radioMap[i]?.rxCellSizeDb?.value);
+      Object.keys(radioDetails.radioMap).map(i => {
+        return cellSizeValues.push(radioDetails.radioMap[i].rxCellSizeDb.value);
       });
       return cellSizeValues;
     }
     if (type === 'probeResponseThreshold') {
       const probeResponseThresholdValues = [];
-      Object.keys(radioDetails?.radioMap || {}).map(i => {
+      Object.keys(radioDetails.radioMap).map(i => {
         return probeResponseThresholdValues.push(
-          radioDetails.radioMap[i]?.probeResponseThresholdDb?.value
+          radioDetails.radioMap[i].probeResponseThresholdDb.value
         );
       });
       return probeResponseThresholdValues;
     }
     if (type === 'clientDisconnectThreshold') {
       const clientDisconnectThresholdValues = [];
-      Object.keys(radioDetails?.radioMap || {}).map(i => {
+      Object.keys(radioDetails.radioMap).map(i => {
         return clientDisconnectThresholdValues.push(
-          radioDetails.radioMap[i]?.clientDisconnectThresholdDb?.value
+          radioDetails.radioMap[i].clientDisconnectThresholdDb.value
         );
       });
       return clientDisconnectThresholdValues;
     }
     if (type === 'snrDrop') {
       const snrDropValues = [];
-      Object.keys(radioDetails?.radioMap || {}).map(i => {
+      Object.keys(radioDetails.advancedRadioMap).map(i => {
         return snrDropValues.push(
-          radioDetails.advancedRadioMap[i]?.bestApSettings?.value?.dropInSnrPercentage
+          radioDetails.advancedRadioMap[i].bestApSettings.dropInSnrPercentage
         );
       });
       return snrDropValues;
     }
 
     const minLoadValue = [];
-    Object.keys(radioDetails?.radioMap || {}).map(i => {
-      return minLoadValue.push(
-        radioDetails.advancedRadioMap[i]?.bestApSettings?.value?.minLoadFactor
-      );
+    Object.keys(radioDetails.advancedRadioMap).map(i => {
+      return minLoadValue.push(radioDetails.advancedRadioMap[i].bestApSettings.minLoadFactor);
     });
     return minLoadValue;
   };
 
-  const setAccessPointsBulkEditTableData = (dataSource = []) =>
-    dataSource.items.map(({ id: key, name, details }) => ({
-      key,
-      id: key,
-      name,
-      manualChannelNumber: getRadioDetails(details, 'manualChannelNumber'),
-      manualBackupChannelNumber: getRadioDetails(details, 'manualBackupChannelNumber'),
-      cellSize: getRadioDetails(details, 'cellSize'),
-      probeResponseThreshold: getRadioDetails(details, 'probeResponseThreshold'),
-      clientDisconnectThreshold: getRadioDetails(details, 'clientDisconnectThreshold'),
-      snrDrop: getRadioDetails(details, 'snrDrop'),
-      minLoad: getRadioDetails(details, 'minLoad'),
-      radioMap: Object.keys(details?.radioMap || {}),
-    }));
+  const setAccessPointsBulkEditTableData = (dataSource = []) => {
+    const tableData = dataSource.items.map(({ id: key, name, channel, details }) => {
+      return {
+        key,
+        id: key,
+        name,
+        channel,
+        cellSize: getRadioDetails(details, 'cellSize'),
+        probeResponseThreshold: getRadioDetails(details, 'probeResponseThreshold'),
+        clientDisconnectThreshold: getRadioDetails(details, 'clientDisconnectThreshold'),
+        snrDrop: getRadioDetails(details, 'snrDrop'),
+        minLoad: getRadioDetails(details, 'minLoad'),
+      };
+    });
+    return tableData;
+  };
 
   const setUpdatedBulkEditTableData = (
     equipmentId,
-    manualChannelNumber,
-    manualBackupChannelNumber,
+    channel,
     cellSize,
     probeResponseThreshold,
     clientDisconnectThreshold,
@@ -268,14 +234,13 @@ const BulkEditAPs = ({ locations, checkedLocations }) => {
     let minLoadFactor;
     dataSource.items.forEach(({ id: itemId, details }) => {
       if (equipmentId === itemId) {
-        Object.keys(details?.radioMap || defaultAppliedRadios).forEach((i, dataIndex) => {
+        Object.keys(details.radioMap).forEach((i, dataIndex) => {
           const frequencies = {};
           dropInSnrPercentage = snrDrop[dataIndex];
           minLoadFactor = minLoad[dataIndex];
 
           frequencies[`${i}`] = {
-            channelNumber: manualChannelNumber[dataIndex],
-            backupChannelNumber: manualBackupChannelNumber[dataIndex],
+            channelNumber: channel[dataIndex],
             rxCellSizeDb: {
               auto: true,
               value: cellSize[dataIndex],
@@ -321,47 +286,48 @@ const BulkEditAPs = ({ locations, checkedLocations }) => {
 
   const handleSaveChanges = updatedRows => {
     const editedRowsArr = [];
-    Object.keys(updatedRows).forEach(key => {
-      const {
-        id: equipmentId,
-        manualChannelNumber,
-        manualBackupChannelNumber,
-        cellSize,
-        probeResponseThreshold,
-        clientDisconnectThreshold,
-        snrDrop,
-        minLoad,
-      } = updatedRows[key];
-      const updatedEuips = setUpdatedBulkEditTableData(
-        equipmentId,
-        manualChannelNumber,
-        manualBackupChannelNumber,
-        cellSize,
-        probeResponseThreshold,
-        clientDisconnectThreshold,
-        snrDrop,
-        minLoad,
-        equipData && equipData.filterEquipment
+    if (updatedRows.length > 0) {
+      updatedRows.map(
+        ({
+          id: equipmentId,
+          channel,
+          cellSize,
+          probeResponseThreshold,
+          clientDisconnectThreshold,
+          snrDrop,
+          minLoad,
+        }) => {
+          const updatedEuips = setUpdatedBulkEditTableData(
+            equipmentId,
+            channel,
+            cellSize,
+            probeResponseThreshold,
+            clientDisconnectThreshold,
+            snrDrop,
+            minLoad,
+            equipData && equipData.filterEquipment
+          );
+          const tempObj = {
+            equipmentId,
+            perRadioDetails: {},
+          };
+          updatedEuips.map(item => {
+            Object.keys(item).forEach(i => {
+              tempObj.perRadioDetails[i] = item[i];
+            });
+            return tempObj;
+          });
+          return editedRowsArr.push(tempObj);
+        }
       );
-      const tempObj = {
-        equipmentId,
-        perRadioDetails: {},
-      };
-      updatedEuips.map(item => {
-        Object.keys(item).forEach(i => {
-          tempObj.perRadioDetails[i] = item[i];
-        });
-        return tempObj;
-      });
-      return editedRowsArr.push(tempObj);
-    });
-    updateEquipments(editedRowsArr);
+      updateEquipments(editedRowsArr);
+    }
   };
 
   const handleLoadMore = () => {
     if (!equipData.filterEquipment.context.lastPage) {
       fetchMore({
-        variables: { context: equipData.filterEquipment.context },
+        variables: { cursor: equipData.filterEquipment.context.cursor },
         updateQuery: (previousResult, { fetchMoreResult }) => {
           const previousEntry = previousResult.filterEquipment;
           const newItems = fetchMoreResult.filterEquipment.items;
@@ -390,9 +356,18 @@ const BulkEditAPs = ({ locations, checkedLocations }) => {
   return (
     <BulkEditAccessPoints
       tableColumns={accessPointsChannelTableColumns}
-      tableData={setAccessPointsBulkEditTableData(equipData?.filterEquipment)}
+      tableData={
+        equipData &&
+        equipData.filterEquipment &&
+        setAccessPointsBulkEditTableData(equipData && equipData.filterEquipment)
+      }
       onLoadMore={handleLoadMore}
-      isLastPage={equipData?.filterEquipment?.context?.lastPage}
+      isLastPage={
+        equipData &&
+        equipData.filterEquipment &&
+        equipData.filterEquipment.context &&
+        equipData.filterEquipment.context.lastPage
+      }
       onSaveChanges={handleSaveChanges}
       breadcrumbPath={getBreadcrumbPath(id, locations)}
     />

app/containers/Network/containers/BulkEditAccessPoints/index.module.scss

@@ -1,4 +1,5 @@
 .tabColumn {
   display: flex;
   flex-direction: column;
+  padding: 0 30px;
 }

app/containers/Network/containers/BulkEditAccessPoints/tests/index.test.js

@@ -0,0 +1,152 @@
+import React from 'react';
+import '@testing-library/jest-dom/extend-expect';
+import { MockedProvider } from '@apollo/react-testing';
+import { render, waitFor } from '@testing-library/react';
+import UserProvider from 'contexts/UserProvider';
+import { BulkEditAPsQueryMock } from './mock';
+import BulkEditAPs from '..';
+
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation(query => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(), // deprecated
+    removeListener: jest.fn(), // deprecated
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  })),
+});
+
+const mockProp = {
+  id: 123,
+  email: 'test@test.com',
+  role: 'admin',
+  customerId: 2,
+  updateUser: jest.fn(),
+  updateToken: jest.fn(),
+};
+
+const locations = [
+  {
+    children: [
+      {
+        children: [
+          {
+            id: '4',
+            key: '4',
+            locationType: 'FLOOR',
+            name: 'Floor 1',
+            parentId: '3',
+            title: '',
+            value: '4',
+            __typename: 'Location',
+          },
+          {
+            id: '5',
+            key: '5',
+            locationType: 'FLOOR',
+            name: 'Floor 2',
+            parentId: '3',
+            title: '',
+            value: '5',
+            __typename: 'Location',
+          },
+          {
+            id: '6',
+            key: '6',
+            locationType: 'FLOOR',
+            name: 'Floor 3',
+            parentId: '3',
+            title: '',
+            value: '6',
+            __typename: 'Location',
+          },
+        ],
+        id: '3',
+        key: '3',
+        locationType: 'BUILDING',
+        name: 'Building 1',
+        parentId: '2',
+        title: '',
+        value: '3',
+        __typename: 'Location',
+      },
+      {
+        id: '7',
+        key: '7',
+        locationType: 'BUILDING',
+        name: 'Building 2',
+        parentId: '2',
+        title: '',
+        value: '7',
+        __typename: 'Location',
+      },
+    ],
+    id: '2',
+    key: '2',
+    locationType: 'SITE',
+    name: 'Menlo Park',
+    parentId: '0',
+    title: '',
+    value: '2',
+    __typename: 'Location',
+  },
+  {
+    id: '8',
+    key: '8',
+    locationType: 'SITE',
+    name: 'Ottawa',
+    parentId: '0',
+    title: 'test',
+    value: '8',
+    __typename: 'Location',
+  },
+];
+
+jest.mock('react-router-dom', () => ({
+  useParams: () => ({
+    id: '6',
+  }),
+  useHistory: () => ({ push: jest.fn() }),
+}));
+describe('<BulkEditAPs />', () => {
+  afterEach(jest.resetModules);
+
+  it('should render with data', async () => {
+    const { getByText } = render(
+      <MockedProvider
+        mocks={[BulkEditAPsQueryMock.filterEquipmentBulkEditAps.success]}
+        addTypename={false}
+      >
+        <UserProvider {...mockProp}>
+          <BulkEditAPs
+            locations={locations}
+            checkedLocations={['2', '3', '4', '5', '6', '7', '8']}
+          />
+        </UserProvider>
+      </MockedProvider>
+    );
+
+    await waitFor(() => expect(getByText('AP 1')).toBeVisible());
+  });
+
+  it('error message should be visible with error true', async () => {
+    const { getByText } = render(
+      <MockedProvider
+        mocks={[BulkEditAPsQueryMock.filterEquipmentBulkEditAps.error]}
+        addTypename={false}
+      >
+        <UserProvider {...mockProp}>
+          <BulkEditAPs
+            locations={locations}
+            checkedLocations={['2', '3', '4', '5', '6', '7', '8']}
+          />
+        </UserProvider>
+      </MockedProvider>
+    );
+    await waitFor(() => expect(getByText('Failed to load equipments data.')).toBeVisible());
+  });
+});

app/containers/Network/containers/ClientDeviceDetails/index.js

@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
 import { useParams } from 'react-router-dom';
-import { useQuery } from '@apollo/client';
+import { useQuery } from '@apollo/react-hooks';
 import moment from 'moment';
 import { Alert, notification } from 'antd';
 import {

app/containers/Network/containers/ClientDeviceDetails/tests/index.test.js

@@ -0,0 +1,122 @@
+import React from 'react';
+import '@testing-library/jest-dom/extend-expect';
+import { MockedProvider } from '@apollo/react-testing';
+import { fireEvent, render, waitFor, cleanup } from '@testing-library/react';
+import UserProvider from 'contexts/UserProvider';
+import { ClientDevicesDetailsQueryMock } from './mock';
+import ClientDeviceDetails from '..';
+
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation(query => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(), // deprecated
+    removeListener: jest.fn(), // deprecated
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  })),
+});
+
+const mockProp = {
+  id: 123,
+  email: 'test@test.com',
+  role: 'admin',
+  customerId: 2,
+  updateUser: jest.fn(),
+  updateToken: jest.fn(),
+};
+
+jest.mock('moment', () => () => ({
+  subtract: () => ({ valueOf: () => ({ toString: () => '1234' }) }),
+  valueOf: () => ({ toString: () => '1234' }),
+}));
+jest.mock('react-router-dom', () => ({
+  useParams: () => ({
+    id: '74:9c:00:01:45:ae',
+  }),
+  useHistory: () => ({ push: jest.fn() }),
+}));
+
+jest.useFakeTimers();
+describe('<ClientDeviceDetails />', () => {
+  afterEach(cleanup);
+  beforeEach(() => jest.useFakeTimers());
+  it('error message should be visible with error true', async () => {
+    const { getByText } = render(
+      <MockedProvider
+        mocks={[ClientDevicesDetailsQueryMock.getClientSession.error]}
+        addTypename={false}
+      >
+        <UserProvider {...mockProp}>
+          <ClientDeviceDetails />
+        </UserProvider>
+      </MockedProvider>
+    );
+    await waitFor(() => expect(getByText('Failed to load Client Device.')).toBeVisible());
+  });
+
+  it('should render with data', async () => {
+    const { getByText } = render(
+      <MockedProvider
+        mocks={[
+          ClientDevicesDetailsQueryMock.getClientSession.success,
+          ClientDevicesDetailsQueryMock.filterServiceMetrics.success,
+        ]}
+        addTypename={false}
+      >
+        <UserProvider {...mockProp}>
+          <ClientDeviceDetails />
+        </UserProvider>
+      </MockedProvider>
+    );
+    // jest.advanceTimersByTime('1000');
+    await waitFor(() => expect(getByText('74:9c:00:01:45:ae')).toBeVisible());
+  });
+
+  it.only('click on reload button should refetch data', async () => {
+    const { getByText, container } = render(
+      <MockedProvider
+        mocks={[
+          ClientDevicesDetailsQueryMock.getClientSession.success,
+          ClientDevicesDetailsQueryMock.filterServiceMetrics.success,
+          ClientDevicesDetailsQueryMock.getClientSession.success,
+          ClientDevicesDetailsQueryMock.filterServiceMetrics.success,
+        ]}
+        addTypename={false}
+      >
+        <UserProvider {...mockProp}>
+          <ClientDeviceDetails />
+        </UserProvider>
+      </MockedProvider>
+    );
+    await waitFor(() => expect(getByText('74:9c:00:01:45:ae')).toBeVisible());
+    // await waitFor(() => expect(getByText('hostName-128213363803566')).toBeVisible());
+    const reloadButton = container.querySelector(
+      '.ant-btn.index-module__Button___VGygY.ant-btn-icon-only'
+    );
+    fireEvent.click(reloadButton);
+    await waitFor(() => expect(getByText('Successfully reloaded.')).toBeVisible());
+  });
+
+  // it('error message should be visible with error true', async () => {
+  //   const { getByText } = render(
+  //     <MockedProvider
+  //       mocks={[
+  //         ClientDevicesDetailsQueryMock.getClientSession.success,
+  //         ClientDevicesDetailsQueryMock.filterServiceMetrics.success,
+  //         ClientDevicesDetailsQueryMock.filterServiceMetrics.success,
+  //         ClientDevicesDetailsQueryMock.getClientSession.success,
+  //       ]}
+  //       addTypename={false}
+  //     >
+  //       <UserProvider {...mockProp}>
+  //         <ClientDeviceDetails  />
+  //       </UserProvider>
+  //     </MockedProvider>
+  //   );
+  //   jest.advanceTimersByTime(60000);
+  // });
+});

app/containers/Network/containers/ClientDeviceDetails/tests/mock.js

@@ -0,0 +1,183 @@
+import { GET_CLIENT_SESSION, FILTER_SERVICE_METRICS } from 'graphql/queries';
+
+export const ClientDevicesDetailsQueryMock = {
+  getClientSession: {
+    success: {
+      request: {
+        query: GET_CLIENT_SESSION,
+        variables: {
+          customerId: 2,
+          macAddress: '74:9c:00:01:45:ae',
+        },
+      },
+      result: {
+        data: {
+          getClientSession: [
+            {
+              id: '74:9c:00:01:45:ae',
+              macAddress: '74:9c:00:01:45:ae',
+              ipAddress: '192.168.10.171',
+              hostname: 'hostName-128213363803566',
+              ssid: 'Default-SSID-1597172801679',
+              radioType: 'is2dot4GHz',
+              signal: '-56',
+              manufacturer: null,
+              equipment: {
+                name: 'AP 40',
+                __typename: 'Equipment',
+              },
+              details: {
+                model_type: 'ClientSessionDetails',
+                sessionId: 1597172802575,
+                authTimestamp: null,
+                assocTimestamp: 1597172185365,
+                assocInternalSC: null,
+                ipTimestamp: null,
+                disconnectByApTimestamp: null,
+                disconnectByClientTimestamp: null,
+                timeoutTimestamp: null,
+                firstDataSentTimestamp: null,
+                firstDataRcvdTimestamp: null,
+                ipAddress: '192.168.10.171',
+                radiusUsername: null,
+                ssid: 'Default-SSID-1597172801679',
+                radioType: 'is2dot4GHz',
+                lastEventTimestamp: 0,
+                hostname: 'hostName-128213363803566',
+                apFingerprint: 'fp 74:9c:00:01:45:ae',
+                userAgentStr: null,
+                lastRxTimestamp: null,
+                lastTxTimestamp: null,
+                cpUsername: null,
+                dhcpDetails: {
+                  model_type: 'ClientDhcpDetails',
+                  dhcpServerIp: '192.168.0.1',
+                  primaryDns: '8.8.8.8',
+                  secondaryDns: '192.168.0.1',
+                  subnetMask: '192.168.0.255',
+                  gatewayIp: '192.168.0.1',
+                  leaseStartTimestamp: 1597160501039,
+                  leaseTimeInSeconds: 14400,
+                  firstRequestTimestamp: null,
+                  firstOfferTimestamp: null,
+                  firstDiscoverTimestamp: null,
+                  nakTimestamp: null,
+                  fromInternal: false,
+                  associationId: 1597172802575,
+                },
+                eapDetails: null,
+                metricDetails: {
+                  model_type: 'ClientSessionMetricDetails',
+                  rxBytes: 6048860,
+                  txBytes: 6400949,
+                  totalRxPackets: null,
+                  totalTxPackets: null,
+                  rxMbps: 91.4453,
+                  txMbps: 65.76753,
+                  rssi: -56,
+                  snr: -51,
+                  rxRateKbps: null,
+                  txRateKbps: null,
+                  lastMetricTimestamp: 0,
+                  lastRxTimestamp: null,
+                  lastTxTimestamp: null,
+                  classification: null,
+                  txDataFrames: null,
+                  txDataFramesRetried: null,
+                  rxDataFrames: null,
+                },
+                isReassociation: null,
+                disconnectByApReasonCode: null,
+                disconnectByClientReasonCode: null,
+                disconnectByApInternalReasonCode: null,
+                disconnectByClientInternalReasonCode: null,
+                portEnabledTimestamp: null,
+                is11RUsed: null,
+                is11KUsed: null,
+                is11VUsed: null,
+                securityType: 'PSK',
+                steerType: null,
+                previousValidSessionId: null,
+                lastFailureDetails: null,
+                firstFailureDetails: null,
+                associationStatus: null,
+                dynamicVlan: null,
+                assocRssi: null,
+                priorSessionId: null,
+                priorEquipmentId: null,
+                classificationName: null,
+                associationState: null,
+                eapSuccessTimestamp: null,
+                eapKey4Timestamp: null,
+              },
+              __typename: 'ClientSession',
+            },
+          ],
+        },
+        loading: false,
+        networkStatus: 7,
+        stale: false,
+      },
+    },
+    error: {
+      request: {
+        query: GET_CLIENT_SESSION,
+        variables: { customerId: 2 },
+        errorPolicy: 'all',
+      },
+      result: {
+        data: null,
+        errors: [{}],
+        loading: false,
+        networkStatus: 7,
+        stale: false,
+      },
+    },
+  },
+  filterServiceMetrics: {
+    success: {
+      request: {
+        query: FILTER_SERVICE_METRICS,
+        variables: {
+          customerId: 2,
+          fromTime: '1234',
+          toTime: '1234',
+          clientMacs: ['74:9c:00:01:45:ae'],
+          dataTypes: ['Client'],
+          limit: 1000,
+        },
+      },
+      result: {
+        data: {
+          filterServiceMetrics: {
+            items: [],
+            context: {
+              lastPage: true,
+              cursor:
+                'bnVsbEBAQHsibW9kZWxfdHlwZSI6IkNvbnRleHRDaGlsZHJlbiIsImNoaWxkcmVuIjp7fX1AQEBudWxs',
+              __typename: 'PaginationContext',
+            },
+            __typename: 'ServiceMetricPagination',
+          },
+        },
+        loading: false,
+        networkStatus: 7,
+        stale: false,
+      },
+    },
+    error: {
+      request: {
+        query: FILTER_SERVICE_METRICS,
+        variables: { customerId: 2 },
+        errorPolicy: 'all',
+      },
+      result: {
+        data: null,
+        errors: [{}],
+        loading: false,
+        networkStatus: 7,
+        stale: false,
+      },
+    },
+  },
+};

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

@@ -1,11 +1,10 @@
 import React, { useEffect, useContext } from 'react';
 import PropTypes from 'prop-types';
-import { useLazyQuery } from '@apollo/client';
+import { useLazyQuery } from '@apollo/react-hooks';
 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';
 
@@ -23,25 +22,9 @@ const clientDevicesTableColumns = [
   { title: 'HOST NAME', dataIndex: 'hostname' },
   { title: 'ACCESS POINT', dataIndex: ['equipment', 'name'] },
   { title: 'SSID', dataIndex: 'ssid' },
-  {
-    title: 'BAND',
-    dataIndex: 'radioType',
-    render: band => USER_FRIENDLY_RADIOS[band],
-  },
+  { title: 'BAND', dataIndex: 'radioType' },
   { title: 'SIGNAL', dataIndex: 'signal' },
-  {
-    title: 'STATUS',
-    dataIndex: ['details', 'associationState'],
-    render: text => {
-      if (text === 'Active_Data') {
-        return 'Connected';
-      }
-      if (text === 'Disconnected') {
-        return 'Disconnected';
-      }
-      return 'N/A';
-    },
-  },
+  { title: 'STATUS', dataIndex: 'status' },
 ];
 
 const ClientDevices = ({ checkedLocations }) => {
@@ -56,7 +39,7 @@ const ClientDevices = ({ checkedLocations }) => {
   const handleLoadMore = () => {
     if (!data.filterClientSessions.context.lastPage) {
       fetchMore({
-        variables: { context: data.filterClientSessions.context },
+        variables: { cursor: data.filterClientSessions.context.cursor },
         updateQuery: (previousResult, { fetchMoreResult }) => {
           const previousEntry = previousResult.filterClientSessions;
           const newItems = fetchMoreResult.filterClientSessions.items;
@@ -101,9 +84,9 @@ const ClientDevices = ({ checkedLocations }) => {
 
   return (
     <NetworkTableContainer
-      activeTab={ROUTES.clientDevices}
+      activeTab="/network/client-devices"
       tableColumns={clientDevicesTableColumns}
-      tableData={data?.filterClientSessions?.items}
+      tableData={data && data.filterClientSessions && data.filterClientSessions.items}
       onLoadMore={handleLoadMore}
       onRefresh={handleOnRefresh}
       isLastPage={data && data.filterClientSessions && data.filterClientSessions.context.lastPage}

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

@@ -0,0 +1,138 @@
+import React from 'react';
+import '@testing-library/jest-dom/extend-expect';
+import { MockedProvider } from '@apollo/react-testing';
+import { fireEvent, render, waitFor } from '@testing-library/react';
+import UserProvider from 'contexts/UserProvider';
+import { BrowserRouter as Router } from 'react-router-dom';
+import { ClientDevicesQueryMock } from './mock';
+import ClientDevices from '..';
+
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation(query => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(), // deprecated
+    removeListener: jest.fn(), // deprecated
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  })),
+});
+
+const mockProp = {
+  id: 123,
+  email: 'test@test.com',
+  role: 'admin',
+  customerId: 2,
+  updateUser: jest.fn(),
+  updateToken: jest.fn(),
+};
+
+describe('<ClientDevices />', () => {
+  afterEach(jest.resetModules);
+
+  it('should render with data', async () => {
+    const { getByText } = render(
+      <MockedProvider
+        mocks={[ClientDevicesQueryMock.filterClientSessions.success]}
+        addTypename={false}
+      >
+        <UserProvider {...mockProp}>
+          <Router>
+            <ClientDevices checkedLocations={['2', '3', '4', '5', '6', '7', '8']} />
+          </Router>
+        </UserProvider>
+      </MockedProvider>
+    );
+    await waitFor(() => expect(getByText('74:9c:00:01:45:ae')).toBeVisible());
+    await waitFor(() => expect(getByText('hostName-128213363803566')).toBeVisible());
+  });
+
+  it('error message should be visible with error true', async () => {
+    const { getByText } = render(
+      <MockedProvider
+        mocks={[ClientDevicesQueryMock.filterClientSessions.error]}
+        addTypename={false}
+      >
+        <UserProvider {...mockProp}>
+          <Router>
+            <ClientDevices checkedLocations={[1, 2, 3]} />
+          </Router>
+        </UserProvider>
+      </MockedProvider>
+    );
+    await waitFor(() => expect(getByText('Failed to load client devices.')).toBeVisible());
+  });
+
+  it('click on Load More should fetch more data', async () => {
+    const { getByRole, getByText, getAllByText } = render(
+      <MockedProvider
+        mocks={[
+          ClientDevicesQueryMock.filterClientSessions.success,
+          ClientDevicesQueryMock.filterClientSessions.loadmore,
+        ]}
+        addTypename={false}
+      >
+        <UserProvider {...mockProp}>
+          <Router>
+            <ClientDevices checkedLocations={['2', '3', '4', '5', '6', '7', '8']} />
+          </Router>
+        </UserProvider>
+      </MockedProvider>
+    );
+    await waitFor(() => expect(getByText('74:9c:00:01:45:ae')).toBeVisible());
+    await waitFor(() => expect(getByText('hostName-128213363803566')).toBeVisible());
+    fireEvent.click(getByRole('button', { name: /load more/i }));
+    await waitFor(() => expect(getByText('74:9c:00:01:45:ae')).toBeVisible());
+    await waitFor(() => expect(getAllByText('hostName-128213363803566')[1]).toBeVisible());
+  });
+
+  it('click on reload button should refetch data', async () => {
+    const { getByText, container } = render(
+      <MockedProvider
+        mocks={[
+          ClientDevicesQueryMock.filterClientSessions.success,
+          ClientDevicesQueryMock.filterClientSessions.success,
+        ]}
+        addTypename={false}
+      >
+        <UserProvider {...mockProp}>
+          <Router>
+            <ClientDevices checkedLocations={['2', '3', '4', '5', '6', '7', '8']} />
+          </Router>
+        </UserProvider>
+      </MockedProvider>
+    );
+    await waitFor(() => expect(getByText('74:9c:00:01:45:ae')).toBeVisible());
+    await waitFor(() => expect(getByText('hostName-128213363803566')).toBeVisible());
+    const reloadButton = container.querySelector(
+      '.ant-btn.index-module__Button___VGygY.ant-btn-icon-only'
+    );
+    fireEvent.click(reloadButton);
+    await waitFor(() => expect(getByText('Client devices reloaded.')).toBeVisible());
+  });
+
+  it('click on reload button should not refetch data when query return error', async () => {
+    const { getByText, container } = render(
+      <MockedProvider
+        mocks={[ClientDevicesQueryMock.filterClientSessions.success]}
+        addTypename={false}
+      >
+        <UserProvider {...mockProp}>
+          <Router>
+            <ClientDevices checkedLocations={['2', '3', '4', '5', '6', '7', '8']} />
+          </Router>
+        </UserProvider>
+      </MockedProvider>
+    );
+    await waitFor(() => expect(getByText('74:9c:00:01:45:ae')).toBeVisible());
+    await waitFor(() => expect(getByText('hostName-128213363803566')).toBeVisible());
+    const reloadButton = container.querySelector(
+      '.ant-btn.index-module__Button___VGygY.ant-btn-icon-only'
+    );
+    fireEvent.click(reloadButton);
+    await waitFor(() => expect(getByText('Client devices could not be reloaded.')).toBeVisible());
+  });
+});

app/containers/Network/containers/ClientDevices/tests/mock.js

@@ -0,0 +1,591 @@
+import { FILTER_CLIENT_SESSIONS } from 'graphql/queries';
+
+export const ClientDevicesQueryMock = {
+  filterClientSessions: {
+    success: {
+      request: {
+        query: FILTER_CLIENT_SESSIONS,
+        variables: {
+          customerId: 2,
+          locationIds: ['2', '3', '4', '5', '6', '7', '8'],
+          equipmentType: 'AP',
+        },
+      },
+      result: {
+        data: {
+          filterClientSessions: {
+            items: [
+              {
+                id: '74:9c:00:01:45:ae',
+                macAddress: '74:9c:00:01:45:ae',
+                ipAddress: '192.168.10.171',
+                hostname: 'hostName-128213363803566',
+                ssid: 'Default-SSID-1597172801679',
+                radioType: 'is2dot4GHz',
+                signal: '-56',
+                manufacturer: null,
+                equipment: {
+                  name: 'AP 40',
+                },
+              },
+              {
+                id: '74:9c:00:8a:70:8b',
+                macAddress: '74:9c:00:8a:70:8b',
+                ipAddress: '192.168.10.159',
+                hostname: 'hostName-128213372792971',
+                ssid: 'TipWlan-cloud-3-radios',
+                radioType: 'is5GHzL',
+                signal: '-53',
+                manufacturer: null,
+                equipment: {
+                  name: 'AP 2',
+                },
+              },
+              {
+                id: '74:9c:00:ae:78:0b',
+                macAddress: '74:9c:00:ae:78:0b',
+                ipAddress: '192.168.10.21',
+                hostname: 'hostName-128213375154187',
+                ssid: 'Default-SSID-1597172801679',
+                radioType: 'is5GHzL',
+                signal: '-56',
+                manufacturer: null,
+                equipment: {
+                  name: 'AP 37',
+                },
+              },
+              {
+                id: '74:9c:00:b8:6e:6b',
+                macAddress: '74:9c:00:b8:6e:6b',
+                ipAddress: '192.168.10.145',
+                hostname: 'hostName-128213375807083',
+                ssid: 'TipWlan-cloud-3-radios',
+                radioType: 'is5GHzL',
+                signal: '-55',
+                manufacturer: null,
+                equipment: {
+                  name: 'AP 9',
+                },
+              },
+              {
+                id: '74:9c:00:da:28:86',
+                macAddress: '74:9c:00:da:28:86',
+                ipAddress: '192.168.10.136',
+                hostname: 'hostName-128213378017414',
+                ssid: 'Default-SSID-1597172801679',
+                radioType: 'is5GHzL',
+                signal: '-54',
+                manufacturer: null,
+                equipment: {
+                  name: 'AP 34',
+                },
+              },
+              {
+                id: '74:9c:01:20:7f:35',
+                macAddress: '74:9c:01:20:7f:35',
+                ipAddress: '192.168.10.132',
+                hostname: 'hostName-128213382627125',
+                ssid: 'Default-SSID-1597172801679',
+                radioType: 'is5GHzU',
+                signal: '-53',
+                manufacturer: null,
+                equipment: {
+                  name: 'AP 37',
+                },
+              },
+              {
+                id: '74:9c:01:4b:bd:77',
+                macAddress: '74:9c:01:4b:bd:77',
+                ipAddress: '192.168.10.114',
+                hostname: 'hostName-128213385461111',
+                ssid: 'TipWlan-cloud-3-radios',
+                radioType: 'is5GHzU',
+                signal: '-53',
+                manufacturer: null,
+                equipment: {
+                  name: 'AP 19',
+                },
+              },
+              {
+                id: '74:9c:01:77:97:6c',
+                macAddress: '74:9c:01:77:97:6c',
+                ipAddress: '192.168.10.35',
+                hostname: 'hostName-128213388334956',
+                ssid: 'TipWlan-cloud-3-radios',
+                radioType: 'is2dot4GHz',
+                signal: '-52',
+                manufacturer: null,
+                equipment: {
+                  name: 'AP 26',
+                },
+              },
+              {
+                id: '74:9c:01:9c:29:be',
+                macAddress: '74:9c:01:9c:29:be',
+                ipAddress: '192.168.10.174',
+                hostname: 'hostName-128213390731710',
+                ssid: 'TipWlan-cloud-3-radios',
+                radioType: 'is2dot4GHz',
+                signal: '-44',
+                manufacturer: null,
+                equipment: {
+                  name: 'AP 6',
+                },
+              },
+              {
+                id: '74:9c:01:bf:ce:af',
+                macAddress: '74:9c:01:bf:ce:af',
+                ipAddress: '192.168.10.36',
+                hostname: 'hostName-128213393067695',
+                ssid: 'TipWlan-cloud-3-radios',
+                radioType: 'is5GHzU',
+                signal: '-60',
+                manufacturer: null,
+                equipment: {
+                  name: 'AP 31',
+                },
+              },
+              {
+                id: '74:9c:02:41:bf:2a',
+                macAddress: '74:9c:02:41:bf:2a',
+                ipAddress: '192.168.10.202',
+                hostname: 'hostName-128213401583402',
+                ssid: 'TipWlan-cloud-3-radios',
+                radioType: 'is5GHzU',
+                signal: '-42',
+                manufacturer: null,
+                equipment: {
+                  name: 'AP 29',
+                },
+              },
+              {
+                id: '74:9c:02:86:89:6a',
+                macAddress: '74:9c:02:86:89:6a',
+                ipAddress: '192.168.10.77',
+                hostname: 'hostName-128213406091626',
+                ssid: 'Default-SSID-1597172801679',
+                radioType: 'is2dot4GHz',
+                signal: '-54',
+                manufacturer: null,
+                equipment: {
+                  name: 'AP 38',
+                },
+              },
+              {
+                id: '74:9c:02:8f:14:91',
+                macAddress: '74:9c:02:8f:14:91',
+                ipAddress: '192.168.10.144',
+                hostname: 'hostName-128213406651537',
+                ssid: 'TipWlan-cloud-3-radios',
+                radioType: 'is2dot4GHz',
+                signal: '-60',
+                manufacturer: null,
+                equipment: {
+                  name: 'AP 3',
+                },
+              },
+              {
+                id: '74:9c:02:9f:25:27',
+                macAddress: '74:9c:02:9f:25:27',
+                ipAddress: '192.168.10.125',
+                hostname: 'hostName-128213407704359',
+                ssid: 'TipWlan-cloud-3-radios',
+                radioType: 'is5GHzU',
+                signal: '-45',
+                manufacturer: null,
+                equipment: {
+                  name: 'AP 3',
+                },
+              },
+              {
+                id: '74:9c:03:12:cd:00',
+                macAddress: '74:9c:03:12:cd:00',
+                ipAddress: '192.168.10.214',
+                hostname: 'hostName-128213415283968',
+                ssid: 'TipWlan-cloud-3-radios',
+                radioType: 'is2dot4GHz',
+                signal: '-46',
+                manufacturer: null,
+                equipment: {
+                  name: 'AP 14',
+                },
+              },
+              {
+                id: '74:9c:03:47:bc:43',
+                macAddress: '74:9c:03:47:bc:43',
+                ipAddress: '192.168.10.187',
+                hostname: 'hostName-128213418753091',
+                ssid: 'TipWlan-cloud-3-radios',
+                radioType: 'is5GHzL',
+                signal: '-49',
+                manufacturer: null,
+                equipment: {
+                  name: 'AP 3',
+                },
+              },
+              {
+                id: '74:9c:03:73:2d:d0',
+                macAddress: '74:9c:03:73:2d:d0',
+                ipAddress: '192.168.10.107',
+                hostname: 'hostName-128213421600208',
+                ssid: 'TipWlan-cloud-3-radios',
+                radioType: 'is5GHzL',
+                signal: '-49',
+                manufacturer: null,
+                equipment: {
+                  name: 'AP 17',
+                },
+              },
+              {
+                id: '74:9c:04:1f:a0:26',
+                macAddress: '74:9c:04:1f:a0:26',
+                ipAddress: '192.168.10.48',
+                hostname: 'hostName-128213432901670',
+                ssid: 'TipWlan-cloud-3-radios',
+                radioType: 'is5GHzL',
+                signal: '-44',
+                manufacturer: null,
+                equipment: {
+                  name: 'AP 10',
+                },
+              },
+              {
+                id: '74:9c:04:61:19:c8',
+                macAddress: '74:9c:04:61:19:c8',
+                ipAddress: '192.168.10.218',
+                hostname: 'hostName-128213437192648',
+                ssid: 'Default-SSID-1597172801679',
+                radioType: 'is5GHzL',
+                signal: '-53',
+                manufacturer: null,
+                equipment: {
+                  name: 'AP 48',
+                },
+              },
+              {
+                id: '74:9c:04:7e:5c:ae',
+                macAddress: '74:9c:04:7e:5c:ae',
+                ipAddress: '192.168.10.92',
+                hostname: 'hostName-128213439110318',
+                ssid: 'TipWlan-cloud-3-radios',
+                radioType: 'is5GHzU',
+                signal: '-43',
+                manufacturer: null,
+                equipment: {
+                  name: 'AP 5',
+                },
+              },
+            ],
+            context: {
+              lastPage: false,
+              cursor: 'test',
+            },
+          },
+        },
+        loading: false,
+        networkStatus: 7,
+        stale: false,
+      },
+    },
+    loadmore: {
+      request: {
+        query: FILTER_CLIENT_SESSIONS,
+        variables: {
+          customerId: 2,
+          locationIds: ['2', '3', '4', '5', '6', '7', '8'],
+          equipmentType: 'AP',
+          cursor: 'test',
+        },
+      },
+      result: {
+        data: {
+          filterClientSessions: {
+            items: [
+              {
+                id: '74:9c:00:01:45:ae',
+                macAddress: '74:9c:00:01:45:ae',
+                ipAddress: '192.168.10.171',
+                hostname: 'hostName-128213363803566',
+                ssid: 'Default-SSID-1597172801679',
+                radioType: 'is2dot4GHz',
+                signal: '-56',
+                manufacturer: null,
+                equipment: {
+                  name: 'AP 40',
+                },
+              },
+              {
+                id: '74:9c:00:8a:70:8b',
+                macAddress: '74:9c:00:8a:70:8b',
+                ipAddress: '192.168.10.159',
+                hostname: 'hostName-128213372792971',
+                ssid: 'TipWlan-cloud-3-radios',
+                radioType: 'is5GHzL',
+                signal: '-53',
+                manufacturer: null,
+                equipment: {
+                  name: 'AP 2',
+                },
+              },
+              {
+                id: '74:9c:00:ae:78:0b',
+                macAddress: '74:9c:00:ae:78:0b',
+                ipAddress: '192.168.10.21',
+                hostname: 'hostName-128213375154187',
+                ssid: 'Default-SSID-1597172801679',
+                radioType: 'is5GHzL',
+                signal: '-56',
+                manufacturer: null,
+                equipment: {
+                  name: 'AP 37',
+                },
+              },
+              {
+                id: '74:9c:00:b8:6e:6b',
+                macAddress: '74:9c:00:b8:6e:6b',
+                ipAddress: '192.168.10.145',
+                hostname: 'hostName-128213375807083',
+                ssid: 'TipWlan-cloud-3-radios',
+                radioType: 'is5GHzL',
+                signal: '-55',
+                manufacturer: null,
+                equipment: {
+                  name: 'AP 9',
+                },
+              },
+              {
+                id: '74:9c:00:da:28:86',
+                macAddress: '74:9c:00:da:28:86',
+                ipAddress: '192.168.10.136',
+                hostname: 'hostName-128213378017414',
+                ssid: 'Default-SSID-1597172801679',
+                radioType: 'is5GHzL',
+                signal: '-54',
+                manufacturer: null,
+                equipment: {
+                  name: 'AP 34',
+                },
+              },
+              {
+                id: '74:9c:01:20:7f:35',
+                macAddress: '74:9c:01:20:7f:35',
+                ipAddress: '192.168.10.132',
+                hostname: 'hostName-128213382627125',
+                ssid: 'Default-SSID-1597172801679',
+                radioType: 'is5GHzU',
+                signal: '-53',
+                manufacturer: null,
+                equipment: {
+                  name: 'AP 37',
+                },
+              },
+              {
+                id: '74:9c:01:4b:bd:77',
+                macAddress: '74:9c:01:4b:bd:77',
+                ipAddress: '192.168.10.114',
+                hostname: 'hostName-128213385461111',
+                ssid: 'TipWlan-cloud-3-radios',
+                radioType: 'is5GHzU',
+                signal: '-53',
+                manufacturer: null,
+                equipment: {
+                  name: 'AP 19',
+                },
+              },
+              {
+                id: '74:9c:01:77:97:6c',
+                macAddress: '74:9c:01:77:97:6c',
+                ipAddress: '192.168.10.35',
+                hostname: 'hostName-128213388334956',
+                ssid: 'TipWlan-cloud-3-radios',
+                radioType: 'is2dot4GHz',
+                signal: '-52',
+                manufacturer: null,
+                equipment: {
+                  name: 'AP 26',
+                },
+              },
+              {
+                id: '74:9c:01:9c:29:be',
+                macAddress: '74:9c:01:9c:29:be',
+                ipAddress: '192.168.10.174',
+                hostname: 'hostName-128213390731710',
+                ssid: 'TipWlan-cloud-3-radios',
+                radioType: 'is2dot4GHz',
+                signal: '-44',
+                manufacturer: null,
+                equipment: {
+                  name: 'AP 6',
+                },
+              },
+              {
+                id: '74:9c:01:bf:ce:af',
+                macAddress: '74:9c:01:bf:ce:af',
+                ipAddress: '192.168.10.36',
+                hostname: 'hostName-128213393067695',
+                ssid: 'TipWlan-cloud-3-radios',
+                radioType: 'is5GHzU',
+                signal: '-60',
+                manufacturer: null,
+                equipment: {
+                  name: 'AP 31',
+                },
+              },
+              {
+                id: '74:9c:02:41:bf:2a',
+                macAddress: '74:9c:02:41:bf:2a',
+                ipAddress: '192.168.10.202',
+                hostname: 'hostName-128213401583402',
+                ssid: 'TipWlan-cloud-3-radios',
+                radioType: 'is5GHzU',
+                signal: '-42',
+                manufacturer: null,
+                equipment: {
+                  name: 'AP 29',
+                },
+              },
+              {
+                id: '74:9c:02:86:89:6a',
+                macAddress: '74:9c:02:86:89:6a',
+                ipAddress: '192.168.10.77',
+                hostname: 'hostName-128213406091626',
+                ssid: 'Default-SSID-1597172801679',
+                radioType: 'is2dot4GHz',
+                signal: '-54',
+                manufacturer: null,
+                equipment: {
+                  name: 'AP 38',
+                },
+              },
+              {
+                id: '74:9c:02:8f:14:91',
+                macAddress: '74:9c:02:8f:14:91',
+                ipAddress: '192.168.10.144',
+                hostname: 'hostName-128213406651537',
+                ssid: 'TipWlan-cloud-3-radios',
+                radioType: 'is2dot4GHz',
+                signal: '-60',
+                manufacturer: null,
+                equipment: {
+                  name: 'AP 3',
+                },
+              },
+              {
+                id: '74:9c:02:9f:25:27',
+                macAddress: '74:9c:02:9f:25:27',
+                ipAddress: '192.168.10.125',
+                hostname: 'hostName-128213407704359',
+                ssid: 'TipWlan-cloud-3-radios',
+                radioType: 'is5GHzU',
+                signal: '-45',
+                manufacturer: null,
+                equipment: {
+                  name: 'AP 3',
+                },
+              },
+              {
+                id: '74:9c:03:12:cd:00',
+                macAddress: '74:9c:03:12:cd:00',
+                ipAddress: '192.168.10.214',
+                hostname: 'hostName-128213415283968',
+                ssid: 'TipWlan-cloud-3-radios',
+                radioType: 'is2dot4GHz',
+                signal: '-46',
+                manufacturer: null,
+                equipment: {
+                  name: 'AP 14',
+                },
+              },
+              {
+                id: '74:9c:03:47:bc:43',
+                macAddress: '74:9c:03:47:bc:43',
+                ipAddress: '192.168.10.187',
+                hostname: 'hostName-128213418753091',
+                ssid: 'TipWlan-cloud-3-radios',
+                radioType: 'is5GHzL',
+                signal: '-49',
+                manufacturer: null,
+                equipment: {
+                  name: 'AP 3',
+                },
+              },
+              {
+                id: '74:9c:03:73:2d:d0',
+                macAddress: '74:9c:03:73:2d:d0',
+                ipAddress: '192.168.10.107',
+                hostname: 'hostName-128213421600208',
+                ssid: 'TipWlan-cloud-3-radios',
+                radioType: 'is5GHzL',
+                signal: '-49',
+                manufacturer: null,
+                equipment: {
+                  name: 'AP 17',
+                },
+              },
+              {
+                id: '74:9c:04:1f:a0:26',
+                macAddress: '74:9c:04:1f:a0:26',
+                ipAddress: '192.168.10.48',
+                hostname: 'hostName-128213432901670',
+                ssid: 'TipWlan-cloud-3-radios',
+                radioType: 'is5GHzL',
+                signal: '-44',
+                manufacturer: null,
+                equipment: {
+                  name: 'AP 10',
+                },
+              },
+              {
+                id: '74:9c:04:61:19:c8',
+                macAddress: '74:9c:04:61:19:c8',
+                ipAddress: '192.168.10.218',
+                hostname: 'hostName-128213437192648',
+                ssid: 'Default-SSID-1597172801679',
+                radioType: 'is5GHzL',
+                signal: '-53',
+                manufacturer: null,
+                equipment: {
+                  name: 'AP 48',
+                },
+              },
+              {
+                id: '74:9c:04:7e:5c:ae',
+                macAddress: '74:9c:04:7e:5c:ae',
+                ipAddress: '192.168.10.92',
+                hostname: 'hostName-128213439110318',
+                ssid: 'TipWlan-cloud-3-radios',
+                radioType: 'is5GHzU',
+                signal: '-43',
+                manufacturer: null,
+                equipment: {
+                  name: 'AP 5',
+                },
+              },
+            ],
+            context: {
+              lastPage: false,
+              cursor: 'test',
+            },
+          },
+        },
+        loading: false,
+        networkStatus: 7,
+        stale: false,
+      },
+    },
+    error: {
+      request: {
+        query: FILTER_CLIENT_SESSIONS,
+        variables: { customerId: 2 },
+        errorPolicy: 'all',
+      },
+      result: {
+        data: null,
+        errors: [{}],
+        loading: false,
+        networkStatus: 7,
+        stale: false,
+      },
+    },
+  },
+};

app/containers/Network/index.js

@@ -1,6 +1,6 @@
 import React, { useMemo, useContext, useState } from 'react';
 import { Switch, Route, useRouteMatch, Redirect } from 'react-router-dom';
-import { useQuery, useMutation, useLazyQuery } from '@apollo/client';
+import { useQuery, useMutation, useLazyQuery } from '@apollo/react-hooks';
 import { Alert, notification } from 'antd';
 import _ from 'lodash';
 import { Network as NetworkPage, PopoverMenu, Loading } from '@tip-wlan/wlan-cloud-ui-library';
@@ -12,19 +12,13 @@ import ClientDeviceDetails from 'containers/Network/containers/ClientDeviceDetai
 import BulkEditAccessPoints from 'containers/Network/containers/BulkEditAccessPoints';
 
 import UserContext from 'contexts/UserContext';
-import {
-  GET_ALL_LOCATIONS,
-  GET_LOCATION,
-  GET_ALL_PROFILES,
-  FILTER_EQUIPMENT,
-} from 'graphql/queries';
+import { GET_ALL_LOCATIONS, GET_LOCATION, GET_ALL_PROFILES } from 'graphql/queries';
 import {
   CREATE_LOCATION,
   UPDATE_LOCATION,
   DELETE_LOCATION,
   CREATE_EQUIPMENT,
 } from 'graphql/mutations';
-import { updateQueryGetAllProfiles } from 'graphql/functions';
 
 const Network = () => {
   const { path } = useRouteMatch();
@@ -32,8 +26,8 @@ const Network = () => {
   const { loading, error, refetch, data } = useQuery(GET_ALL_LOCATIONS, {
     variables: { customerId },
   });
-  const { loading: loadingProfile, error: errorProfile, data: apProfiles, fetchMore } = useQuery(
-    GET_ALL_PROFILES(),
+  const { loading: loadingProfile, error: errorProfile, data: apProfiles } = useQuery(
+    GET_ALL_PROFILES,
     {
       variables: { customerId, type: 'equipment_ap' },
     }
@@ -43,21 +37,13 @@ const Network = () => {
   const [createLocation] = useMutation(CREATE_LOCATION);
   const [updateLocation] = useMutation(UPDATE_LOCATION);
   const [deleteLocation] = useMutation(DELETE_LOCATION);
+  const [createEquipment] = useMutation(CREATE_EQUIPMENT);
   const [checkedLocations, setCheckedLocations] = useState([]);
   const [deleteModal, setDeleteModal] = useState(false);
   const [editModal, setEditModal] = useState(false);
   const [addModal, setAddModal] = useState(false);
   const [apModal, setApModal] = useState(false);
 
-  const [createEquipment] = useMutation(CREATE_EQUIPMENT, {
-    refetchQueries: [
-      {
-        query: FILTER_EQUIPMENT,
-        variables: { customerId, locationIds: checkedLocations, equipmentType: 'AP' },
-      },
-    ],
-  });
-
   const handleGetSingleLocation = id => {
     getLocation({
       variables: { id },
@@ -65,7 +51,7 @@ const Network = () => {
   };
 
   const formatLocationListForTree = (list = []) => {
-    const checkedTreeLocations = ['0'];
+    const checkedTreeLocations = [];
     list.forEach(ele => {
       checkedTreeLocations.push(ele.id);
     });
@@ -105,38 +91,26 @@ const Network = () => {
     return [
       {
         title: (
-          <PopoverMenu locationId="0" locationType="NETWORK" setAddModal={setAddModal}>
+          <PopoverMenu locationType="NETWORK" setAddModal={setAddModal}>
             Network
           </PopoverMenu>
         ),
         id: '0',
-        key: '0',
         value: '0',
+        key: '0',
         children: unflatten(list),
       },
     ];
   };
 
-  const handleAddLocation = ({ location }) => {
+  const handleAddLocation = (name, parentId, locationType) => {
     setAddModal(false);
-    let id;
-    let locationType;
-
-    // adding location from root makes selecetedLocation null so we check for that
-    if (selectedLocation && selectedLocation.getLocation) {
-      id = selectedLocation.getLocation.id;
-      locationType = 'SITE';
-    } else {
-      id = '0';
-      locationType = 'COUNTRY';
-    }
-
     createLocation({
       variables: {
         locationType,
         customerId,
-        parentId: id,
-        name: location,
+        parentId,
+        name,
       },
     })
       .then(() => {
@@ -154,10 +128,8 @@ const Network = () => {
       );
   };
 
-  const handleEditLocation = ({ name }) => {
+  const handleEditLocation = (id, parentId, name, locationType, lastModifiedTimestamp) => {
     setEditModal(false);
-    const { id, parentId, locationType, lastModifiedTimestamp } = selectedLocation.getLocation;
-
     updateLocation({
       variables: {
         customerId,
@@ -183,10 +155,8 @@ const Network = () => {
       );
   };
 
-  const handleDeleteLocation = () => {
+  const handleDeleteLocation = id => {
     setDeleteModal(false);
-    const { id } = selectedLocation.getLocation;
-
     deleteLocation({ variables: { id } })
       .then(() => {
         notification.success({
@@ -203,10 +173,8 @@ const Network = () => {
       );
   };
 
-  const handleCreateEquipment = ({ inventoryId, name, profileId }) => {
+  const handleCreateEquipment = (inventoryId, locationId, name, profileId) => {
     setApModal(false);
-    const { id: locationId } = selectedLocation.getLocation;
-
     createEquipment({ variables: { customerId, inventoryId, locationId, name, profileId } })
       .then(() => {
         notification.success({
@@ -232,27 +200,10 @@ const Network = () => {
     setCheckedLocations(checkedKeys.checked);
   };
 
-  const handleFetchProfiles = e => {
-    if (apProfiles.getAllProfiles.context.lastPage) {
-      return false;
-    }
-
-    e.persist();
-    const { target } = e;
-
-    if (target.scrollTop + target.offsetHeight === target.scrollHeight) {
-      fetchMore({
-        variables: { context: { ...apProfiles.getAllProfiles.context } },
-        updateQuery: updateQueryGetAllProfiles,
-      });
-    }
-
-    return true;
-  };
-
-  const locationsTree = useMemo(() => formatLocationListForTree(data && data.getAllLocations), [
-    data,
-  ]);
+  const locationsTree = useMemo(
+    () => formatLocationListForTree(data && data.getAllLocations)[0].children,
+    [data]
+  );
 
   if (loading) {
     return <Loading />;
@@ -284,8 +235,6 @@ const Network = () => {
       profiles={(apProfiles && apProfiles.getAllProfiles && apProfiles.getAllProfiles.items) || []}
       loadingProfile={loadingProfile}
       errorProfile={errorProfile}
-      onFetchMoreProfiles={handleFetchProfiles}
-      isLastProfilesPage={apProfiles?.getAllProfiles?.context?.lastPage}
     >
       <Switch>
         <Route
@@ -306,17 +255,15 @@ const Network = () => {
         />
         <Route
           exact
-          path={`${path}/access-points/:id/:tab`}
+          path={`${path}/access-points/:id`}
           render={props => <AccessPointDetails locations={locationsTree} {...props} />}
         />
-
         <Route
           exact
           path={`${path}/client-devices`}
           render={props => <ClientDevices checkedLocations={checkedLocations} {...props} />}
         />
         <Route exact path={`${path}/client-devices/:id`} component={ClientDeviceDetails} />
-        <Redirect from={`${path}/access-points/:id`} to={`${path}/access-points/:id/general`} />
         <Redirect from={path} to={`${path}/access-points`} />
       </Switch>
     </NetworkPage>

app/containers/ProfileDetails/index.js

@@ -1,83 +1,12 @@
 import React, { useState, useContext } from 'react';
 import { useParams, Redirect } from 'react-router-dom';
-import { useQuery, useMutation, gql } from '@apollo/client';
+import { useQuery, useMutation } from '@apollo/react-hooks';
 import { Alert, notification } from 'antd';
 import { ProfileDetails as ProfileDetailsPage, Loading } from '@tip-wlan/wlan-cloud-ui-library';
 
-import { ROUTES, AUTH_TOKEN } from 'constants/index';
 import UserContext from 'contexts/UserContext';
-import { GET_ALL_PROFILES, GET_API_URL } from 'graphql/queries';
-import { fetchMoreProfiles } from 'graphql/functions';
-import { getItem } from 'utils/localStorage';
-
-const GET_PROFILE = gql`
-  query GetProfile($id: ID!) {
-    getProfile(id: $id) {
-      id
-      profileType
-      customerId
-      name
-      childProfiles {
-        id
-        name
-        profileType
-        details
-      }
-      associatedSsidProfiles {
-        id
-        name
-        profileType
-        details
-      }
-      osuSsidProfile {
-        id
-        name
-      }
-      childProfileIds
-      createdTimestamp
-      lastModifiedTimestamp
-      details
-    }
-  }
-`;
-
-const UPDATE_PROFILE = gql`
-  mutation UpdateProfile(
-    $id: ID!
-    $profileType: String!
-    $customerId: ID!
-    $name: String!
-    $childProfileIds: [ID]
-    $lastModifiedTimestamp: String
-    $details: JSONObject
-  ) {
-    updateProfile(
-      id: $id
-      profileType: $profileType
-      customerId: $customerId
-      name: $name
-      childProfileIds: $childProfileIds
-      lastModifiedTimestamp: $lastModifiedTimestamp
-      details: $details
-    ) {
-      id
-      profileType
-      customerId
-      name
-      childProfileIds
-      lastModifiedTimestamp
-      details
-    }
-  }
-`;
-
-const DELETE_PROFILE = gql`
-  mutation DeleteProfile($id: ID!) {
-    deleteProfile(id: $id) {
-      id
-    }
-  }
-`;
+import { GET_PROFILE, GET_ALL_PROFILES } from 'graphql/queries';
+import { FILE_UPLOAD, UPDATE_PROFILE, DELETE_PROFILE } from 'graphql/mutations';
 
 const ProfileDetails = () => {
   const { customerId } = useContext(UserContext);
@@ -85,63 +14,17 @@ const ProfileDetails = () => {
 
   const [redirect, setRedirect] = useState(false);
 
-  const { data: apiUrl } = useQuery(GET_API_URL);
-
   const { loading, error, data } = useQuery(GET_PROFILE, {
     variables: { id },
-    fetchPolicy: 'network-only',
   });
-
-  const { data: ssidProfiles, fetchMore } = useQuery(GET_ALL_PROFILES(), {
+  const { data: ssidProfiles } = useQuery(GET_ALL_PROFILES, {
     variables: { customerId, type: 'ssid' },
-    fetchPolicy: 'network-only',
   });
-
-  const { data: radiusProfiles, fetchMore: fetchMoreRadiusProfiles } = useQuery(
-    GET_ALL_PROFILES(),
-    {
-      variables: { customerId, type: 'radius' },
-      fetchPolicy: 'network-only',
-    }
-  );
-
-  const { data: captiveProfiles, fetchMore: fetchMoreCaptiveProfiles } = useQuery(
-    GET_ALL_PROFILES(),
-    {
-      variables: { customerId, type: 'captive_portal' },
-      fetchPolicy: 'network-only',
-    }
-  );
-
-  const { data: venueProfiles, fetchMore: fetchMoreVenueProfiles } = useQuery(GET_ALL_PROFILES(), {
-    variables: { customerId, type: 'passpoint_venue' },
-    fetchPolicy: 'network-only',
-  });
-
-  const { data: operatorProfiles, fetchMore: fetchMoreOperatorProfiles } = useQuery(
-    GET_ALL_PROFILES(),
-    {
-      variables: { customerId, type: 'passpoint_operator' },
-      fetchPolicy: 'network-only',
-    }
-  );
-
-  const { data: idProviderProfiles, fetchMore: fetchMoreIdProviderProfiles } = useQuery(
-    GET_ALL_PROFILES(),
-    {
-      variables: { customerId, type: 'passpoint_osu_id_provider' },
-      fetchPolicy: 'network-only',
-    }
-  );
-
-  const { data: rfProfiles, fetchMore: fetchMoreRfProfiles } = useQuery(GET_ALL_PROFILES(), {
-    variables: { customerId, type: 'rf' },
-    fetchPolicy: 'network-only',
-  });
-
   const [updateProfile] = useMutation(UPDATE_PROFILE);
   const [deleteProfile] = useMutation(DELETE_PROFILE);
 
+  const [fileUpload] = useMutation(FILE_UPLOAD);
+
   const handleDeleteProfile = () => {
     deleteProfile({ variables: { id } })
       .then(() => {
@@ -187,90 +70,20 @@ const ProfileDetails = () => {
       );
   };
 
-  const handleFileUpload = async (fileName, file) => {
-    const token = getItem(AUTH_TOKEN);
-
-    if (apiUrl?.getApiUrl) {
-      fetch(`${apiUrl?.getApiUrl}filestore/${fileName}`, {
-        method: 'POST',
-        headers: {
-          Authorization: token ? `Bearer ${token.access_token}` : '',
-          'Content-Type': 'application/octet-stream',
-        },
-        body: file,
-      })
-        .then(response => response.json())
-        .then(resp => {
-          if (resp?.success) {
-            notification.success({
-              message: 'Success',
-              description: 'File successfully uploaded.',
-            });
-          } else {
-            notification.error({
-              message: 'Error',
-              description: 'File could not be uploaded.',
-            });
-          }
-        })
-        .catch(() => {
-          notification.error({
-            message: 'Error',
-            description: 'File could not be uploaded.',
-          });
+  const handleFileUpload = (fileName, file) =>
+    fileUpload({ variables: { fileName, file } })
+      .then(() => {
+        notification.success({
+          message: 'Success',
+          description: 'File successfully uploaded.',
         });
-    } else {
-      notification.error({
-        message: 'Error',
-        description: 'File could not be uploaded.',
-      });
-    }
-  };
-
-  const handleDownloadFile = async name => {
-    const token = getItem(AUTH_TOKEN);
-    if (apiUrl?.getApiUrl) {
-      return fetch(`${apiUrl?.getApiUrl}filestore/${encodeURIComponent(name)}`, {
-        method: 'GET',
-        headers: {
-          'Content-Type': 'application/octet-stream',
-          Authorization: token ? `Bearer ${token.access_token}` : '',
-        },
       })
-        .then(response => response.blob())
-        .then(blob => {
-          return new Promise((resolve, reject) => {
-            const reader = new FileReader();
-            reader.onloadend = () => resolve(reader.result);
-            reader.onerror = reject;
-            reader.readAsDataURL(blob);
-          });
+      .catch(() =>
+        notification.error({
+          message: 'Error',
+          description: 'File could not be uploaded.',
         })
-        .catch(() => {
-          notification.error({
-            message: 'Error',
-            description: 'File could not be retrieved.',
-          });
-        });
-    }
-    return notification.error({
-      message: 'Error',
-      description: 'File could not be retrieved.',
-    });
-  };
-
-  const handleFetchMoreProfiles = (e, key) => {
-    if (key === 'radius') fetchMoreProfiles(e, radiusProfiles, fetchMoreRadiusProfiles);
-    else if (key === 'captive_portal')
-      fetchMoreProfiles(e, captiveProfiles, fetchMoreCaptiveProfiles);
-    else if (key === 'rf') fetchMoreProfiles(e, rfProfiles, fetchMoreRfProfiles);
-    else if (key === 'passpoint_venue') fetchMoreProfiles(e, venueProfiles, fetchMoreVenueProfiles);
-    else if (key === 'passpoint_operator')
-      fetchMoreProfiles(e, operatorProfiles, fetchMoreOperatorProfiles);
-    else if (key === 'passpoint_osu_id_provider')
-      fetchMoreProfiles(e, idProviderProfiles, fetchMoreIdProviderProfiles);
-    else fetchMoreProfiles(e, ssidProfiles, fetchMore);
-  };
+      );
 
   if (loading) {
     return <Loading />;
@@ -283,7 +96,7 @@ const ProfileDetails = () => {
   }
 
   if (redirect) {
-    return <Redirect to={ROUTES.profiles} />;
+    return <Redirect to="/profiles" />;
   }
 
   return (
@@ -291,22 +104,13 @@ 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?.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}
-      associatedSsidProfiles={data.getProfile?.associatedSsidProfiles}
-      osuSsidProfile={data.getProfile?.osuSsidProfile}
+      ssidProfiles={
+        (ssidProfiles && ssidProfiles.getAllProfiles && ssidProfiles.getAllProfiles.items) || []
+      }
       fileUpload={handleFileUpload}
-      onFetchMoreProfiles={handleFetchMoreProfiles}
-      onDownloadFile={handleDownloadFile}
     />
   );
 };

app/containers/ProfileDetails/tests/index.test.js

@@ -0,0 +1,186 @@
+import React from 'react';
+import '@testing-library/jest-dom/extend-expect';
+import { fireEvent, render, waitFor } from '@testing-library/react';
+import { MockedProvider } from '@apollo/react-testing';
+import UserProvider from 'contexts/UserProvider';
+import { getAllProfilesQueryMock } from '../../AddProfile/tests/mock';
+import { profileDetailsMutationMock, profileDetailsQueryMock } from './mock';
+import ProfileDetails from '..';
+
+jest.mock('rc-upload/lib/uid.js', () => ({
+  __esModule: true,
+  default: () => '1234',
+}));
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation(query => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(), // deprecated
+    removeListener: jest.fn(), // deprecated
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  })),
+});
+jest.mock('react-router-dom', () => ({
+  useParams: () => ({
+    id: 123,
+  }),
+  useHistory: () => ({ push: jest.fn() }),
+}));
+const mockProp = {
+  id: 123,
+  email: 'test@test.com',
+  role: 'admin',
+  customerId: 2,
+  updateUser: jest.fn(),
+  updateToken: jest.fn(),
+};
+
+describe('<ProfileDetails />', () => {
+  afterEach(jest.resetModules);
+
+  it('should render with Data', async () => {
+    const { getByLabelText } = render(
+      <MockedProvider
+        mocks={[profileDetailsQueryMock.success, getAllProfilesQueryMock.success]}
+        addTypename={false}
+      >
+        <UserProvider {...mockProp}>
+          <ProfileDetails />
+        </UserProvider>
+      </MockedProvider>
+    );
+    await waitFor(() => expect(getByLabelText('Profile Name')).toHaveValue('Radius-Profile'));
+  });
+
+  it('should show error when query return error', async () => {
+    const { getByText } = render(
+      <MockedProvider mocks={[profileDetailsQueryMock.error]} addTypename={false}>
+        <UserProvider {...mockProp}>
+          <ProfileDetails />
+        </UserProvider>
+      </MockedProvider>
+    );
+    await waitFor(() => expect(getByText('Failed to load profile data.')).toBeVisible());
+  });
+
+  it('should render with Data and update successfully', async () => {
+    const { getByLabelText, getByText, getByRole } = render(
+      <MockedProvider
+        mocks={[
+          profileDetailsQueryMock.success,
+          getAllProfilesQueryMock.success,
+          profileDetailsMutationMock.updateSuccess,
+        ]}
+        addTypename={false}
+      >
+        <UserProvider {...mockProp}>
+          <ProfileDetails />
+        </UserProvider>
+      </MockedProvider>
+    );
+    await waitFor(() => expect(getByLabelText('Profile Name')).toHaveValue('Radius-Profile'));
+    await waitFor(() => expect(getByText('0.0.0.0')).toBeVisible());
+    fireEvent.click(getByRole('button', { name: 'Save' }));
+    await waitFor(() => expect(getByText('Profile successfully updated.')).toBeVisible());
+  });
+  it('should render with Data and show error when update mutation return error', async () => {
+    const { getByLabelText, getByText, getByRole } = render(
+      <MockedProvider
+        mocks={[
+          profileDetailsQueryMock.success,
+          getAllProfilesQueryMock.success,
+          profileDetailsMutationMock.updateError,
+        ]}
+        addTypename={false}
+      >
+        <UserProvider {...mockProp}>
+          <ProfileDetails />
+        </UserProvider>
+      </MockedProvider>
+    );
+    await waitFor(() => expect(getByLabelText('Profile Name')).toHaveValue('Radius-Profile'));
+    await waitFor(() => expect(getByText('0.0.0.0')).toBeVisible());
+    fireEvent.click(getByRole('button', { name: 'Save' }));
+    await waitFor(() => expect(getByText('Profile could not be updated.')).toBeVisible());
+  });
+
+  it('should render with Data and upload image successfully', async () => {
+    global.URL.createObjectURL = jest.fn();
+
+    const { getByLabelText, getByTestId, getByText } = render(
+      <MockedProvider
+        mocks={[
+          profileDetailsQueryMock.successCaptivePortal,
+          getAllProfilesQueryMock.success,
+          profileDetailsMutationMock.uploadSuccess,
+        ]}
+        addTypename={false}
+      >
+        <UserProvider {...mockProp}>
+          <ProfileDetails />
+        </UserProvider>
+      </MockedProvider>
+    );
+    await waitFor(() => expect(getByLabelText('Profile Name')).toHaveValue('Captive-portal'));
+    fireEvent.change(getByTestId('logoFile'), {
+      target: {
+        files: [
+          {
+            lastModified: 1595008730671,
+            lastModifiedDate: undefined,
+            name: 'testImg.jpg',
+            size: 100,
+            type: 'image/jpg',
+            percent: 0,
+            originFileObj: { uid: 'rc-upload-1595008718690-73' },
+          },
+        ],
+      },
+    });
+    expect(getByText(/testImg\.jpg/)).toBeInTheDocument();
+
+    await waitFor(() => expect(getByText('File successfully uploaded.')).toBeVisible());
+  });
+  it('should render with Data and show error when upload mutation return error', async () => {
+    global.URL.createObjectURL = jest.fn();
+
+    const { getByLabelText, getByTestId, getByText } = render(
+      <MockedProvider
+        mocks={[
+          profileDetailsQueryMock.successCaptivePortal,
+          getAllProfilesQueryMock.success,
+          profileDetailsMutationMock.uploadError,
+        ]}
+        addTypename={false}
+      >
+        <UserProvider {...mockProp}>
+          <ProfileDetails />
+        </UserProvider>
+      </MockedProvider>
+    );
+    await waitFor(() => expect(getByLabelText('Profile Name')).toHaveValue('Captive-portal'));
+
+    fireEvent.change(getByTestId('logoFile'), {
+      target: {
+        files: [
+          {
+            lastModified: 1595008730671,
+            lastModifiedDate: undefined,
+            name: 'testImg.jpg',
+            size: 100,
+            type: 'image/jpg',
+            percent: 0,
+            originFileObj: { uid: 'rc-upload-1595008718690-73' },
+          },
+        ],
+      },
+    });
+    expect(getByText(/testImg\.jpg/)).toBeInTheDocument();
+
+    await waitFor(() => expect(getByText('File could not be uploaded.')).toBeVisible());
+  });
+});

app/containers/ProfileDetails/tests/mock.js

@@ -0,0 +1,344 @@
+import { GET_PROFILE } from 'graphql/queries';
+import { FILE_UPLOAD, UPDATE_PROFILE } from 'graphql/mutations';
+
+export const profileDetailsQueryMock = {
+  success: {
+    request: {
+      query: GET_PROFILE,
+      variables: { id: 123 },
+    },
+    result: {
+      data: {
+        getProfile: {
+          id: '123',
+          profileType: 'radius',
+          customerId: '2',
+          name: 'Radius-Profile',
+          childProfiles: [],
+          childProfileIds: [],
+          createdTimestamp: '0',
+          lastModifiedTimestamp: '1597243756957',
+          details: {
+            model_type: 'RadiusProfile',
+            subnetConfiguration: {
+              test: {
+                model_type: 'RadiusSubnetConfiguration',
+                subnetAddress: '0.0.0.0',
+                subnetCidrPrefix: 0,
+                subnetName: 'test',
+                proxyConfig: {
+                  model_type: 'RadiusProxyConfiguration',
+                  floatingIpAddress: null,
+                  floatingIfCidrPrefix: null,
+                  floatingIfGwAddress: null,
+                  floatingIfVlan: null,
+                  sharedSecret: null,
+                },
+                probeInterval: null,
+                serviceRegionName: 'Ottawa',
+              },
+            },
+            serviceRegionMap: {
+              Ottawa: {
+                model_type: 'RadiusServiceRegion',
+                serverMap: {
+                  'Radius-Profile': [
+                    {
+                      model_type: 'RadiusServer',
+                      ipAddress: '192.168.0.1',
+                      secret: 'testing123',
+                      authPort: 1812,
+                      timeout: null,
+                    },
+                  ],
+                },
+                regionName: 'Ottawa',
+              },
+            },
+            profileType: 'radius',
+          },
+          __typename: 'Profile',
+        },
+      },
+      loading: false,
+      networkStatus: 7,
+      stale: false,
+    },
+  },
+  successCaptivePortal: {
+    request: {
+      query: GET_PROFILE,
+      variables: { id: 123 },
+    },
+    result: {
+      data: {
+        getProfile: {
+          id: '123',
+          profileType: 'captive_portal',
+          customerId: '2',
+          name: 'Captive-portal',
+          childProfiles: [],
+          childProfileIds: [],
+          createdTimestamp: '1597238768150',
+          lastModifiedTimestamp: '1597238768150',
+          details: {
+            model_type: 'CaptivePortalConfiguration',
+            name: 'Captive-portal',
+            browserTitle: 'Access the network as Guest',
+            headerContent: 'Captive Portal',
+            userAcceptancePolicy: 'Use this network at your own risk. No warranty of any kind.',
+            successPageMarkdownText: 'Welcome to the network',
+            redirectURL: '',
+            externalCaptivePortalURL: null,
+            sessionTimeoutInMinutes: 60,
+            logoFile: null,
+            backgroundFile: null,
+            walledGardenWhitelist: [],
+            usernamePasswordFile: null,
+            authenticationType: 'guest',
+            radiusAuthMethod: 'CHAP',
+            maxUsersWithSameCredentials: 42,
+            externalPolicyFile: null,
+            backgroundPosition: 'left_top',
+            backgroundRepeat: 'no_repeat',
+            radiusServiceName: null,
+            expiryType: 'unlimited',
+            userList: [],
+            macWhiteList: [],
+            profileType: 'captive_portal',
+          },
+          __typename: 'Profile',
+        },
+      },
+      loading: false,
+      networkStatus: 7,
+      stale: false,
+    },
+  },
+  error: {
+    request: {
+      query: GET_PROFILE,
+      variables: { id: 123 },
+    },
+    result: {
+      data: null,
+      errors: [{}],
+      loading: false,
+      networkStatus: 7,
+      stale: false,
+    },
+  },
+};
+
+export const profileDetailsMutationMock = {
+  updateSuccess: {
+    request: {
+      query: UPDATE_PROFILE,
+      variables: {
+        id: '123',
+        profileType: 'radius',
+        customerId: '2',
+        name: 'Radius-Profile',
+        childProfiles: [],
+        childProfileIds: [],
+        createdTimestamp: '0',
+        lastModifiedTimestamp: '1597243756957',
+        details: {
+          model_type: 'RadiusProfile',
+          subnetConfiguration: {
+            test: {
+              model_type: 'RadiusSubnetConfiguration',
+              subnetAddress: '0.0.0.0',
+              subnetCidrPrefix: 0,
+              subnetName: 'test',
+              proxyConfig: {
+                model_type: 'RadiusProxyConfiguration',
+                floatingIpAddress: null,
+                floatingIfCidrPrefix: null,
+                floatingIfGwAddress: null,
+                floatingIfVlan: null,
+                sharedSecret: null,
+              },
+              probeInterval: null,
+              serviceRegionName: 'Ottawa',
+            },
+          },
+          serviceRegionMap: {
+            Ottawa: {
+              regionName: 'Ottawa',
+              serverMap: {
+                'Radius-Profile': [
+                  {
+                    model_type: 'RadiusServer',
+                    ipAddress: '192.168.0.1',
+                    secret: 'testing123',
+                    authPort: 1812,
+                    timeout: null,
+                  },
+                ],
+              },
+            },
+          },
+          profileType: 'radius',
+          name: 'Radius-Profile',
+          probeInterval: 0,
+          services: [
+            {
+              name: 'Radius-Profile',
+              ips: [
+                {
+                  model_type: 'RadiusServer',
+                  ipAddress: '192.168.0.1',
+                  secret: 'testing123',
+                  authPort: 1812,
+                  timeout: null,
+                },
+              ],
+            },
+          ],
+          zones: [
+            {
+              name: 'Ottawa',
+              subnets: [
+                {
+                  model_type: 'RadiusSubnetConfiguration',
+                  subnetAddress: '0.0.0.0',
+                  subnetCidrPrefix: 0,
+                  subnetName: 'test',
+                  proxyConfig: {
+                    model_type: 'RadiusProxyConfiguration',
+                    floatingIpAddress: null,
+                    floatingIfCidrPrefix: null,
+                    floatingIfGwAddress: null,
+                    floatingIfVlan: null,
+                    sharedSecret: null,
+                  },
+                  probeInterval: null,
+                  serviceRegionName: 'Ottawa',
+                },
+              ],
+            },
+          ],
+        },
+      },
+    },
+    result: {
+      data: {
+        updateProfile: {
+          id: '123',
+          profileType: 'radius',
+          customerId: '2',
+          name: 'Radius-Profile',
+          childProfileIds: [],
+          lastModifiedTimestamp: '1597245742733',
+          details: {
+            model_type: 'RadiusProfile',
+            subnetConfiguration: {
+              test: {
+                model_type: 'RadiusSubnetConfiguration',
+                subnetAddress: '0.0.0.0',
+                subnetCidrPrefix: 0,
+                subnetName: 'test',
+                proxyConfig: {
+                  model_type: 'RadiusProxyConfiguration',
+                  floatingIpAddress: null,
+                  floatingIfCidrPrefix: null,
+                  floatingIfGwAddress: null,
+                  floatingIfVlan: null,
+                  sharedSecret: null,
+                },
+                probeInterval: null,
+                serviceRegionName: 'Ottawa',
+              },
+            },
+            serviceRegionMap: {
+              Ottawa: {
+                model_type: 'RadiusServiceRegion',
+                serverMap: {
+                  'Radius-Profile': [
+                    {
+                      model_type: 'RadiusServer',
+                      ipAddress: '192.168.0.1',
+                      secret: 'testing123',
+                      authPort: 1812,
+                      timeout: null,
+                    },
+                  ],
+                },
+                regionName: 'Ottawa',
+              },
+            },
+            profileType: 'radius',
+          },
+          __typename: 'Profile',
+        },
+      },
+    },
+  },
+  updateError: {
+    request: {
+      query: UPDATE_PROFILE,
+      variables: {
+        id: 123,
+        username: 'test@test.com',
+        password: 'password',
+        role: 'CustomerIT',
+        customerId: '2',
+        lastModifiedTimestamp: '1597238767547',
+      },
+    },
+    result: {
+      data: null,
+      errors: [{}],
+    },
+  },
+  uploadSuccess: {
+    request: {
+      query: FILE_UPLOAD,
+      variables: {
+        fileName: 'testImg.jpg',
+        file: {
+          uid: '1234',
+          lastModified: 1595008730671,
+          lastModifiedDate: undefined,
+          name: 'testImg.jpg',
+          size: 100,
+          type: 'image/jpg',
+          percent: 0,
+          originFileObj: { uid: 'rc-upload-1595008718690-73' },
+        },
+      },
+    },
+    result: {
+      data: {
+        fileUpload: {
+          fileName: 'talkblog@4x.png',
+          baseUrl: 'https://localhost:9091/',
+          __typename: 'File',
+        },
+      },
+    },
+  },
+  uploadError: {
+    request: {
+      query: FILE_UPLOAD,
+      variables: {
+        fileName: 'testImg.jpg',
+        file: {
+          uid: '1234',
+          lastModified: 1595008730671,
+          lastModifiedDate: undefined,
+          name: 'testImg.jpg',
+          size: 100,
+          type: 'image/jpg',
+          percent: 0,
+          originFileObj: { uid: 'rc-upload-1595008718690-73' },
+        },
+      },
+    },
+    result: {
+      data: null,
+      errors: [{}],
+    },
+  },
+};

app/containers/Profiles/index.js

@@ -1,45 +1,40 @@
-import React, { useContext, useEffect } from 'react';
-import { useQuery, useMutation, gql } from '@apollo/client';
-import { useLocation } from 'react-router-dom';
+import React, { useContext } from 'react';
+import gql from 'graphql-tag';
+import { useQuery, useMutation } from '@apollo/react-hooks';
+
 import { Alert, notification } from 'antd';
+
 import { Profile as ProfilePage, Loading } from '@tip-wlan/wlan-cloud-ui-library';
-
-import { GET_ALL_PROFILES } from 'graphql/queries';
-import { updateQueryGetAllProfiles } from 'graphql/functions';
 import UserContext from 'contexts/UserContext';
+import { DELETE_PROFILE } from 'graphql/mutations';
 
-const DELETE_PROFILE = gql`
-  mutation DeleteProfile($id: ID!) {
-    deleteProfile(id: $id) {
-      id
+export const GET_ALL_PROFILES = gql`
+  query GetAllProfiles($customerId: ID!, $cursor: String, $limit: Int) {
+    getAllProfiles(customerId: $customerId, cursor: $cursor, limit: $limit) {
+      items {
+        id
+        name
+        profileType
+        details
+        equipmentCount
+      }
+      context {
+        cursor
+        lastPage
+      }
     }
   }
 `;
 
 const Profiles = () => {
   const { customerId } = useContext(UserContext);
-  const { loading, error, data, refetch, fetchMore } = useQuery(
-    GET_ALL_PROFILES(`equipmentCount`),
-    {
-      variables: { customerId },
-      fetchPolicy: 'network-only',
-    }
-  );
+  const { loading, error, data, refetch, fetchMore } = useQuery(GET_ALL_PROFILES, {
+    variables: { customerId, limit: 100 },
+  });
   const [deleteProfile] = useMutation(DELETE_PROFILE);
-  const location = useLocation();
-
-  useEffect(() => {
-    if (location.state && location.state.refetch) {
-      refetch({
-        variables: { refresh: Date.now() },
-      });
-    }
-  }, []);
 
   const reloadTable = () => {
-    refetch({
-      variables: { refresh: Date.now() },
-    })
+    refetch()
       .then(() => {
         notification.success({
           message: 'Success',
@@ -57,22 +52,25 @@ const Profiles = () => {
   const handleLoadMore = () => {
     if (!data.getAllProfiles.context.lastPage) {
       fetchMore({
-        variables: { context: { ...data.getAllProfiles.context } },
-        updateQuery: updateQueryGetAllProfiles,
+        variables: { cursor: data.getAllProfiles.context.cursor },
+        updateQuery: (previousResult, { fetchMoreResult }) => {
+          const previousEntry = previousResult.getAllProfiles;
+          const newItems = fetchMoreResult.getAllProfiles.items;
+
+          return {
+            getAllProfiles: {
+              context: fetchMoreResult.getAllProfiles.context,
+              items: [...previousEntry.items, ...newItems],
+              __typename: previousEntry.__typename,
+            },
+          };
+        },
       });
     }
   };
 
   const handleDeleteProfile = id => {
-    deleteProfile({
-      variables: { id },
-      refetchQueries: [
-        {
-          query: GET_ALL_PROFILES(`equipmentCount`),
-          variables: { customerId },
-        },
-      ],
-    })
+    deleteProfile({ variables: { id } })
       .then(() => {
         notification.success({
           message: 'Success',
@@ -99,7 +97,7 @@ const Profiles = () => {
     <ProfilePage
       data={data.getAllProfiles.items}
       onReload={reloadTable}
-      isLastPage={data?.getAllProfiles?.context?.lastPage}
+      isLastPage={data.getAllProfiles.context.lastPage}
       onDeleteProfile={handleDeleteProfile}
       onLoadMore={handleLoadMore}
     />

app/containers/Profiles/tests/index.test.js

@@ -0,0 +1,171 @@
+import React from 'react';
+import '@testing-library/jest-dom/extend-expect';
+import { fireEvent, render, waitFor } from '@testing-library/react';
+import { MockedProvider } from '@apollo/react-testing';
+import { BrowserRouter as Router } from 'react-router-dom';
+import { screen } from '@testing-library/dom';
+import UserProvider from 'contexts/UserProvider';
+import { profilesMutationMock, profilesQueryMock } from './mock';
+import Profiles from '..';
+
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation(query => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(), // deprecated
+    removeListener: jest.fn(), // deprecated
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  })),
+});
+
+const mockProp = {
+  id: 123,
+  email: 'test@test.com',
+  role: 'admin',
+  customerId: 2,
+  updateUser: jest.fn(),
+  updateToken: jest.fn(),
+};
+
+describe('<Profiles />', () => {
+  afterEach(jest.resetModules);
+
+  it('should render with Data', async () => {
+    const { getByText } = render(
+      <MockedProvider mocks={[profilesQueryMock.success]} addTypename={false}>
+        <UserProvider {...mockProp}>
+          <Router>
+            <Profiles />
+          </Router>
+        </UserProvider>
+      </MockedProvider>
+    );
+    await waitFor(() => expect(getByText('Radius-Profile')).toBeVisible());
+  });
+
+  it('should show error when query return error', async () => {
+    const { getByText } = render(
+      <MockedProvider mocks={[profilesQueryMock.error]} addTypename={false}>
+        <UserProvider {...mockProp}>
+          <Router>
+            <Profiles />
+          </Router>
+        </UserProvider>
+      </MockedProvider>
+    );
+    await waitFor(() => expect(getByText('Failed to load profiles.')).toBeVisible());
+  });
+
+  it('should render with Data and call onReload if reload button is clicked', async () => {
+    const { getByText, getByRole } = render(
+      <MockedProvider
+        mocks={[profilesQueryMock.success, profilesQueryMock.success]}
+        addTypename={false}
+      >
+        <UserProvider {...mockProp}>
+          <Router>
+            <Profiles />
+          </Router>
+        </UserProvider>
+      </MockedProvider>
+    );
+    await waitFor(() => expect(getByText('Radius-Profile')).toBeVisible());
+    fireEvent.click(getByRole('button', { name: /reload/i }));
+    await waitFor(() => expect(getByText('Radius-Profile')).toBeVisible());
+  });
+
+  it('should render with Data and show error if reload button is clicked', async () => {
+    const { getByText, getByRole } = render(
+      <MockedProvider
+        mocks={[profilesQueryMock.success, profilesQueryMock.error]}
+        addTypename={false}
+      >
+        <UserProvider {...mockProp}>
+          <Router>
+            <Profiles />
+          </Router>
+        </UserProvider>
+      </MockedProvider>
+    );
+    await waitFor(() => expect(getByText('Radius-Profile')).toBeVisible());
+    fireEvent.click(getByRole('button', { name: /reload/i }));
+    await waitFor(() => expect(getByText('Radius-Profile')).toBeVisible());
+  });
+
+  it('should render with Data and Load More Button Should show when isLastPage false', async () => {
+    const { getByText, getByRole } = render(
+      <MockedProvider
+        mocks={[profilesQueryMock.success, profilesQueryMock.loadmore]}
+        addTypename={false}
+      >
+        <UserProvider {...mockProp}>
+          <Router>
+            <Profiles />
+          </Router>
+        </UserProvider>
+      </MockedProvider>
+    );
+    await waitFor(() => expect(getByText('Radius-Profile')).toBeVisible());
+    fireEvent.click(getByRole('button', { name: 'Load More' }));
+
+    await waitFor(() => expect(getByText('TipWlan-cloud-Enterprise')).toBeVisible());
+  });
+
+  it('should render with Data and Delete profile successfully', async () => {
+    const { getByText, getByRole } = render(
+      <MockedProvider
+        mocks={[
+          profilesQueryMock.success,
+          profilesQueryMock.loadmore,
+          profilesMutationMock.deleteSuccess,
+        ]}
+        addTypename={false}
+      >
+        <UserProvider {...mockProp}>
+          <Router>
+            <Profiles />
+          </Router>
+        </UserProvider>
+      </MockedProvider>
+    );
+    await waitFor(() => expect(getByText('Radius-Profile')).toBeVisible());
+    fireEvent.click(getByRole('button', { name: 'Load More' }));
+
+    await waitFor(() => expect(getByText('TipWlan-cloud-Enterprise')).toBeVisible());
+    fireEvent.click(screen.getByTitle('delete'));
+    expect(getByRole('button', { name: 'Delete' }));
+    fireEvent.click(getByRole('button', { name: 'Delete' }));
+    await waitFor(() => expect(getByText('Profile successfully deleted.')).toBeVisible());
+  });
+
+  it('should render with Data and show error when Delete profile', async () => {
+    const { getByText, getByRole } = render(
+      <MockedProvider
+        mocks={[
+          profilesQueryMock.success,
+          profilesQueryMock.loadmore,
+          profilesMutationMock.deleteError,
+        ]}
+        addTypename={false}
+      >
+        <UserProvider {...mockProp}>
+          <Router>
+            <Profiles />
+          </Router>
+        </UserProvider>
+      </MockedProvider>
+    );
+    await waitFor(() => expect(getByText('Radius-Profile')).toBeVisible());
+    fireEvent.click(getByRole('button', { name: 'Load More' }));
+
+    await waitFor(() => expect(getByText('TipWlan-cloud-Enterprise')).toBeVisible());
+    fireEvent.click(screen.getByTitle('delete'));
+    expect(getByRole('button', { name: 'Delete' }));
+    fireEvent.click(getByRole('button', { name: 'Delete' }));
+    await waitFor(() => expect(getByText('Profile could not be deleted.')).toBeVisible());
+  });
+});

app/containers/Profiles/tests/mock.js

@@ -0,0 +1,175 @@
+import { DELETE_PROFILE } from 'graphql/mutations';
+import { GET_ALL_PROFILES } from '..';
+
+export const profilesQueryMock = {
+  success: {
+    request: {
+      query: GET_ALL_PROFILES,
+      variables: { customerId: 2, limit: 100 },
+    },
+    result: {
+      data: {
+        getAllProfiles: {
+          items: [
+            {
+              id: '123',
+              name: 'Radius-Profile',
+              profileType: 'radius',
+              details: {
+                model_type: 'RadiusProfile',
+                subnetConfiguration: {
+                  test: {
+                    model_type: 'RadiusSubnetConfiguration',
+                    subnetAddress: '0.0.0.0',
+                    subnetCidrPrefix: 0,
+                    subnetName: 'test',
+                    proxyConfig: {
+                      model_type: 'RadiusProxyConfiguration',
+                      floatingIpAddress: null,
+                      floatingIfCidrPrefix: null,
+                      floatingIfGwAddress: null,
+                      floatingIfVlan: null,
+                      sharedSecret: null,
+                    },
+                    probeInterval: null,
+                    serviceRegionName: 'Ottawa',
+                  },
+                },
+                serviceRegionMap: {
+                  Ottawa: {
+                    model_type: 'RadiusServiceRegion',
+                    serverMap: {
+                      'Radius-Profile': [
+                        {
+                          model_type: 'RadiusServer',
+                          ipAddress: '192.168.0.1',
+                          secret: 'testing123',
+                          authPort: 1812,
+                          timeout: null,
+                        },
+                      ],
+                    },
+                    regionName: 'Ottawa',
+                  },
+                },
+                profileType: 'radius',
+              },
+              __typename: 'Profile',
+            },
+          ],
+          context: {
+            cursor: 'test',
+            lastPage: false,
+          },
+        },
+      },
+      loading: false,
+      networkStatus: 7,
+      stale: false,
+    },
+  },
+  loadmore: {
+    request: {
+      query: GET_ALL_PROFILES,
+      variables: { customerId: 2, limit: 100, cursor: 'test' },
+    },
+    result: {
+      data: {
+        getAllProfiles: {
+          items: [
+            {
+              id: '2',
+              name: 'TipWlan-cloud-Enterprise',
+              profileType: 'ssid',
+              details: {
+                model_type: 'SsidConfiguration',
+                ssid: 'Default-SSID-1597238767760',
+                appliedRadios: ['is5GHzU', 'is2dot4GHz', 'is5GHzL'],
+                ssidAdminState: 'enabled',
+                secureMode: 'wpaEAP',
+                vlanId: 1,
+                keyStr: 'testing123',
+                broadcastSsid: 'enabled',
+                keyRefresh: 0,
+                noLocalSubnets: false,
+                radiusServiceName: 'Radius-Profile',
+                captivePortalId: null,
+                bandwidthLimitDown: 0,
+                bandwidthLimitUp: 0,
+                videoTrafficOnly: false,
+                radioBasedConfigs: {
+                  is5GHz: {
+                    model_type: 'RadioBasedSsidConfiguration',
+                    enable80211r: null,
+                    enable80211k: null,
+                    enable80211v: null,
+                  },
+                  is2dot4GHz: {
+                    model_type: 'RadioBasedSsidConfiguration',
+                    enable80211r: null,
+                    enable80211k: null,
+                    enable80211v: null,
+                  },
+                  is5GHzU: {
+                    model_type: 'RadioBasedSsidConfiguration',
+                    enable80211r: null,
+                    enable80211k: null,
+                    enable80211v: null,
+                  },
+                  is5GHzL: {
+                    model_type: 'RadioBasedSsidConfiguration',
+                    enable80211r: null,
+                    enable80211k: null,
+                    enable80211v: null,
+                  },
+                },
+                bonjourGatewayProfileId: null,
+                enable80211w: null,
+                wepConfig: null,
+                forwardMode: null,
+                profileType: 'ssid',
+              },
+            },
+          ],
+          context: {
+            cursor: 'test2',
+            lastPage: true,
+          },
+        },
+      },
+      loading: false,
+      networkStatus: 7,
+      stale: false,
+    },
+  },
+  error: {
+    request: {
+      query: GET_ALL_PROFILES,
+      variables: { customerId: 2 },
+    },
+    result: {
+      data: null,
+      errors: [{}],
+    },
+  },
+};
+
+export const profilesMutationMock = {
+  deleteSuccess: {
+    request: {
+      query: DELETE_PROFILE,
+      variables: { id: '2' },
+    },
+    result: { data: { deleteProfile: { id: '2', __typename: 'Profile' } } },
+  },
+  deleteError: {
+    request: {
+      query: DELETE_PROFILE,
+      variables: { id: '2' },
+    },
+    result: {
+      data: null,
+      errors: [{}],
+    },
+  },
+};

app/containers/System/containers/AutoProvision/index.js

@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import { useQuery, useMutation } from '@apollo/client';
+import { useQuery, useMutation } from '@apollo/react-hooks';
 import { Alert, notification } from 'antd';
 import { AutoProvision as AutoProvisionPage, Loading } from '@tip-wlan/wlan-cloud-ui-library';
 
@@ -21,9 +21,9 @@ const AutoProvision = () => {
     }
   );
   const { data: dataProfile, loading: loadingProfile, error: errorProfile } = useQuery(
-    GET_ALL_PROFILES(),
+    GET_ALL_PROFILES,
     {
-      variables: { customerId, type: 'equipment_ap', limit: 100 },
+      variables: { customerId, type: 'equipment_ap' },
     }
   );
 

app/containers/System/containers/AutoProvision/tests/index.test.js

@@ -0,0 +1,124 @@
+import React from 'react';
+import '@testing-library/jest-dom/extend-expect';
+import { fireEvent, render, waitFor } from '@testing-library/react';
+import { MockedProvider } from '@apollo/react-testing';
+import { BrowserRouter as Router } from 'react-router-dom';
+import UserProvider from 'contexts/UserProvider';
+import { autoProvisionMutationMock, autoProvisionQueryMock } from './mock';
+import AutoProvision from '..';
+
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation(query => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(), // deprecated
+    removeListener: jest.fn(), // deprecated
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  })),
+});
+
+const mockProp = {
+  id: 123,
+  email: 'test@test.com',
+  role: 'admin',
+  customerId: 2,
+  updateUser: jest.fn(),
+  updateToken: jest.fn(),
+};
+
+describe('<AutoProvision />', () => {
+  afterEach(jest.resetModules);
+
+  it('should render with Data', async () => {
+    const { getByText } = render(
+      <MockedProvider
+        mocks={[
+          autoProvisionQueryMock.getAllProfilesSuccess,
+          autoProvisionQueryMock.getCustomerSuccess,
+          autoProvisionQueryMock.getAllLocationsSuccess,
+        ]}
+        addTypename={false}
+      >
+        <UserProvider {...mockProp}>
+          <Router>
+            <AutoProvision />
+          </Router>
+        </UserProvider>
+      </MockedProvider>
+    );
+    await waitFor(() => expect(getByText('EA8300')).toBeVisible());
+  });
+
+  it('should show error when customer query return error', async () => {
+    const { getByText } = render(
+      <MockedProvider
+        mocks={[
+          autoProvisionQueryMock.getAllProfilesSuccess,
+          autoProvisionQueryMock.error,
+          autoProvisionQueryMock.getAllLocationsSuccess,
+        ]}
+        addTypename={false}
+      >
+        <UserProvider {...mockProp}>
+          <Router>
+            <AutoProvision />
+          </Router>
+        </UserProvider>
+      </MockedProvider>
+    );
+    await waitFor(() => expect(getByText('Failed to load Customer Data.')).toBeVisible());
+  });
+
+  it('should render with Data and update successfully', async () => {
+    const { getByText, getByRole } = render(
+      <MockedProvider
+        mocks={[
+          autoProvisionQueryMock.getAllProfilesSuccess,
+          autoProvisionQueryMock.getCustomerSuccess,
+          autoProvisionQueryMock.getCustomerSuccess,
+          autoProvisionQueryMock.getAllLocationsSuccess,
+          autoProvisionMutationMock.success,
+        ]}
+        addTypename={false}
+      >
+        <UserProvider {...mockProp}>
+          <Router>
+            <AutoProvision />
+          </Router>
+        </UserProvider>
+      </MockedProvider>
+    );
+    await waitFor(() => expect(getByText('EA8300')).toBeVisible());
+    fireEvent.click(getByRole('button', { name: 'Save' }));
+    await waitFor(() => expect(getByText('Settings successfully updated.')).toBeVisible());
+    await waitFor(() => expect(getByText('EA8300')).toBeVisible());
+  });
+
+  it('should render with Data and update show error when mutation return error', async () => {
+    const { getByText, getByRole } = render(
+      <MockedProvider
+        mocks={[
+          autoProvisionQueryMock.getAllProfilesSuccess,
+          autoProvisionQueryMock.getCustomerSuccess,
+          autoProvisionQueryMock.getCustomerSuccess,
+          autoProvisionQueryMock.getAllLocationsSuccess,
+          autoProvisionMutationMock.error,
+        ]}
+        addTypename={false}
+      >
+        <UserProvider {...mockProp}>
+          <Router>
+            <AutoProvision />
+          </Router>
+        </UserProvider>
+      </MockedProvider>
+    );
+    await waitFor(() => expect(getByText('EA8300')).toBeVisible());
+    fireEvent.click(getByRole('button', { name: 'Save' }));
+    await waitFor(() => expect(getByText('Settings could not be updated.')).toBeVisible());
+  });
+});

app/containers/System/containers/AutoProvision/tests/mock.js

@@ -0,0 +1,361 @@
+import { GET_ALL_LOCATIONS, GET_ALL_PROFILES, GET_CUSTOMER } from 'graphql/queries';
+import { UPDATE_CUSTOMER } from 'graphql/mutations';
+
+export const autoProvisionQueryMock = {
+  getAllProfilesSuccess: {
+    request: {
+      query: GET_ALL_PROFILES,
+      variables: { customerId: 2, type: 'equipment_ap' },
+    },
+    result: {
+      data: {
+        getAllProfiles: {
+          items: [
+            {
+              id: '6',
+              name: 'ApProfile-3-radios',
+              profileType: 'equipment_ap',
+              details: {
+                model_type: 'ApNetworkConfiguration',
+                networkConfigVersion: 'AP-1',
+                equipmentType: 'AP',
+                vlanNative: true,
+                vlan: 0,
+                ntpServer: {
+                  model_type: 'AutoOrManualString',
+                  auto: true,
+                  value: 'pool.ntp.org',
+                },
+                syslogRelay: null,
+                rtlsSettings: null,
+                syntheticClientEnabled: true,
+                ledControlEnabled: true,
+                equipmentDiscovery: false,
+                radioMap: {
+                  is2dot4GHz: {
+                    model_type: 'RadioProfileConfiguration',
+                    bestApEnabled: true,
+                    bestAPSteerType: 'both',
+                  },
+                  is5GHzU: {
+                    model_type: 'RadioProfileConfiguration',
+                    bestApEnabled: true,
+                    bestAPSteerType: 'both',
+                  },
+                  is5GHzL: {
+                    model_type: 'RadioProfileConfiguration',
+                    bestApEnabled: true,
+                    bestAPSteerType: 'both',
+                  },
+                },
+                profileType: 'equipment_ap',
+              },
+              __typename: 'Profile',
+            },
+            {
+              id: '7',
+              name: 'ApProfile-2-radios',
+              profileType: 'equipment_ap',
+              details: {
+                model_type: 'ApNetworkConfiguration',
+                networkConfigVersion: 'AP-1',
+                equipmentType: 'AP',
+                vlanNative: true,
+                vlan: 0,
+                ntpServer: {
+                  model_type: 'AutoOrManualString',
+                  auto: true,
+                  value: 'pool.ntp.org',
+                },
+                syslogRelay: null,
+                rtlsSettings: null,
+                syntheticClientEnabled: true,
+                ledControlEnabled: true,
+                equipmentDiscovery: false,
+                radioMap: {
+                  is5GHz: {
+                    model_type: 'RadioProfileConfiguration',
+                    bestApEnabled: true,
+                    bestAPSteerType: 'both',
+                  },
+                  is2dot4GHz: {
+                    model_type: 'RadioProfileConfiguration',
+                    bestApEnabled: true,
+                    bestAPSteerType: 'both',
+                  },
+                },
+                profileType: 'equipment_ap',
+              },
+              __typename: 'Profile',
+            },
+            {
+              id: '8',
+              name: 'EnterpriseApProfile',
+              profileType: 'equipment_ap',
+              details: {
+                model_type: 'ApNetworkConfiguration',
+                networkConfigVersion: 'AP-1',
+                equipmentType: 'AP',
+                vlanNative: true,
+                vlan: 0,
+                ntpServer: {
+                  model_type: 'AutoOrManualString',
+                  auto: true,
+                  value: 'pool.ntp.org',
+                },
+                syslogRelay: null,
+                rtlsSettings: null,
+                syntheticClientEnabled: true,
+                ledControlEnabled: true,
+                equipmentDiscovery: false,
+                radioMap: {
+                  is5GHz: {
+                    model_type: 'RadioProfileConfiguration',
+                    bestApEnabled: true,
+                    bestAPSteerType: 'both',
+                  },
+                  is2dot4GHz: {
+                    model_type: 'RadioProfileConfiguration',
+                    bestApEnabled: true,
+                    bestAPSteerType: 'both',
+                  },
+                  is5GHzU: {
+                    model_type: 'RadioProfileConfiguration',
+                    bestApEnabled: true,
+                    bestAPSteerType: 'both',
+                  },
+                  is5GHzL: {
+                    model_type: 'RadioProfileConfiguration',
+                    bestApEnabled: true,
+                    bestAPSteerType: 'both',
+                  },
+                },
+                profileType: 'equipment_ap',
+              },
+              __typename: 'Profile',
+            },
+          ],
+          context: {
+            cursor:
+              'bnVsbEBAQHsibW9kZWxfdHlwZSI6IkNvbnRleHRDaGlsZHJlbiIsImNoaWxkcmVuIjp7fX1AQEBudWxs',
+            lastPage: true,
+            __typename: 'PaginationContext',
+          },
+          __typename: 'ProfilePagination',
+        },
+      },
+      loading: false,
+      networkStatus: 7,
+      stale: false,
+    },
+  },
+
+  getCustomerSuccess: {
+    request: {
+      query: GET_CUSTOMER,
+      variables: { id: 2 },
+    },
+    result: {
+      data: {
+        getCustomer: {
+          id: '2',
+          name: 'Test Customer',
+          email: 'test@example.com',
+          createdTimestamp: '1597329016138',
+          lastModifiedTimestamp: '1597329017058',
+          details: {
+            model_type: 'CustomerDetails',
+            autoProvisioning: {
+              model_type: 'EquipmentAutoProvisioningSettings',
+              enabled: true,
+              locationId: 8,
+              equipmentProfileIdPerModel: {
+                default: 6,
+                TIP_AP: 7,
+                ECW5410: 7,
+                ECW5211: 7,
+                AP2220: 7,
+                'EA8300-CA': 6,
+                EA8300: 6,
+              },
+            },
+          },
+          __typename: 'Customer',
+        },
+      },
+      loading: false,
+      networkStatus: 7,
+      stale: false,
+    },
+  },
+
+  getAllLocationsSuccess: {
+    request: {
+      query: GET_ALL_LOCATIONS,
+      variables: { customerId: 2 },
+    },
+    result: {
+      data: {
+        getAllLocations: [
+          {
+            id: '2',
+            name: 'Menlo Park',
+            parentId: '0',
+            locationType: 'SITE',
+            __typename: 'Location',
+          },
+          {
+            id: '3',
+            name: 'Building 1',
+            parentId: '2',
+            locationType: 'BUILDING',
+            __typename: 'Location',
+          },
+          {
+            id: '4',
+            name: 'Floor 1',
+            parentId: '3',
+            locationType: 'FLOOR',
+            __typename: 'Location',
+          },
+          {
+            id: '5',
+            name: 'Floor 2',
+            parentId: '3',
+            locationType: 'FLOOR',
+            __typename: 'Location',
+          },
+          {
+            id: '6',
+            name: 'Floor 3',
+            parentId: '3',
+            locationType: 'FLOOR',
+            __typename: 'Location',
+          },
+          {
+            id: '7',
+            name: 'Building 2',
+            parentId: '2',
+            locationType: 'BUILDING',
+            __typename: 'Location',
+          },
+          {
+            id: '8',
+            name: 'Ottawa',
+            parentId: '0',
+            locationType: 'SITE',
+            __typename: 'Location',
+          },
+        ],
+      },
+      loading: false,
+      networkStatus: 7,
+      stale: false,
+    },
+  },
+
+  error: {
+    request: {
+      query: GET_CUSTOMER,
+      variables: { id: 2 },
+    },
+    result: {
+      data: null,
+      errors: [{}],
+    },
+  },
+};
+
+export const autoProvisionMutationMock = {
+  success: {
+    request: {
+      query: UPDATE_CUSTOMER,
+      variables: {
+        id: '2',
+        email: 'test@example.com',
+        name: 'Test Customer',
+        details: {
+          model_type: 'CustomerDetails',
+          autoProvisioning: {
+            model_type: 'EquipmentAutoProvisioningSettings',
+            enabled: true,
+            locationId: '8',
+            equipmentProfileIdPerModel: {
+              default: 6,
+              TIP_AP: 7,
+              ECW5410: 7,
+              ECW5211: 7,
+              AP2220: 7,
+              'EA8300-CA': 6,
+              EA8300: 6,
+            },
+          },
+        },
+        createdTimestamp: '1597329016138',
+        lastModifiedTimestamp: '1597329017058',
+      },
+    },
+    result: {
+      data: {
+        updateCustomer: {
+          id: '2',
+          email: 'test@example.com',
+          name: 'Test Customer',
+          details: {
+            model_type: 'CustomerDetails',
+            autoProvisioning: {
+              model_type: 'EquipmentAutoProvisioningSettings',
+              enabled: true,
+              locationId: 8,
+              equipmentProfileIdPerModel: {
+                default: 6,
+                TIP_AP: 7,
+                ECW5410: 7,
+                ECW5211: 7,
+                AP2220: 7,
+                'EA8300-CA': 6,
+                EA8300: 6,
+              },
+            },
+          },
+          createdTimestamp: '1597329016138',
+          lastModifiedTimestamp: '1597331154979',
+          __typename: 'Customer',
+        },
+      },
+    },
+  },
+  error: {
+    request: {
+      query: UPDATE_CUSTOMER,
+      variables: {
+        id: '2',
+        email: 'test@example.com',
+        name: 'Test Customer',
+        details: {
+          model_type: 'CustomerDetails',
+          autoProvisioning: {
+            model_type: 'EquipmentAutoProvisioningSettings',
+            enabled: true,
+            locationId: '8',
+            equipmentProfileIdPerModel: {
+              default: 6,
+              TIP_AP: 7,
+              ECW5410: 7,
+              ECW5211: 7,
+              AP2220: 7,
+              'EA8300-CA': 6,
+              EA8300: 6,
+            },
+          },
+        },
+        createdTimestamp: '1597329016138',
+        lastModifiedTimestamp: '1597329017058',
+      },
+    },
+    result: {
+      data: null,
+      errors: [{}],
+    },
+  },
+};

app/containers/System/containers/BlockedList/index.js

@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import { useQuery, useMutation } from '@apollo/client';
+import { useQuery, useMutation } from '@apollo/react-hooks';
 import { Alert, notification } from 'antd';
 import { BlockedList as BlockedListPage, Loading } from '@tip-wlan/wlan-cloud-ui-library';
 import { GET_BLOCKED_CLIENTS } from 'graphql/queries';

app/containers/System/containers/BlockedList/tests/index.test.js

@@ -0,0 +1,167 @@
+import React from 'react';
+import '@testing-library/jest-dom/extend-expect';
+import { fireEvent, render, waitFor } from '@testing-library/react';
+import { MockedProvider } from '@apollo/react-testing';
+import { BrowserRouter as Router } from 'react-router-dom';
+import UserProvider from 'contexts/UserProvider';
+import { blockListMutationMock, blockListQueryMock } from './mock';
+import BlockedList from '..';
+
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation(query => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(), // deprecated
+    removeListener: jest.fn(), // deprecated
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  })),
+});
+
+const mockProp = {
+  id: 123,
+  email: 'test@test.com',
+  role: 'admin',
+  customerId: 2,
+  updateUser: jest.fn(),
+  updateToken: jest.fn(),
+};
+
+describe('<BlockedList />', () => {
+  afterEach(jest.resetModules);
+
+  it('should render with Data', async () => {
+    const { getByText } = render(
+      <MockedProvider mocks={[blockListQueryMock.success]} addTypename={false}>
+        <UserProvider {...mockProp}>
+          <Router>
+            <BlockedList />
+          </Router>
+        </UserProvider>
+      </MockedProvider>
+    );
+    await waitFor(() => expect(getByText('74:9c:00:01:45:ae')).toBeVisible());
+  });
+
+  it('should show error when Block query return error', async () => {
+    const { getByText } = render(
+      <MockedProvider mocks={[blockListQueryMock.error]} addTypename={false}>
+        <UserProvider {...mockProp}>
+          <Router>
+            <BlockedList />
+          </Router>
+        </UserProvider>
+      </MockedProvider>
+    );
+    await waitFor(() => expect(getByText('Failed to load Client Data.')).toBeVisible());
+  });
+
+  it('should render with Data and add Client successfully', async () => {
+    const { getByText, getByLabelText, getByRole } = render(
+      <MockedProvider
+        mocks={[
+          blockListQueryMock.success,
+          blockListQueryMock.success,
+          blockListMutationMock.addClientSuccess,
+        ]}
+        addTypename={false}
+      >
+        <UserProvider {...mockProp}>
+          <Router>
+            <BlockedList />
+          </Router>
+        </UserProvider>
+      </MockedProvider>
+    );
+    await waitFor(() => expect(getByText('74:9c:00:01:45:ae')).toBeVisible());
+    fireEvent.click(getByRole('button', { name: 'Add Client' }));
+    fireEvent.change(getByLabelText('MAC Address'), { target: { value: '74:8c:00:01:45:ae' } });
+    fireEvent.click(getByRole('button', { name: 'Save' }));
+    await waitFor(() =>
+      expect(getByText('Client successfully added to Blocked List')).toBeVisible()
+    );
+  });
+
+  it('should render with Data and add Client return error when mutation not work', async () => {
+    const { getByText, getByLabelText, getByRole } = render(
+      <MockedProvider
+        mocks={[blockListQueryMock.success, blockListMutationMock.addClientError]}
+        addTypename={false}
+      >
+        <UserProvider {...mockProp}>
+          <Router>
+            <BlockedList />
+          </Router>
+        </UserProvider>
+      </MockedProvider>
+    );
+    await waitFor(() => expect(getByText('74:9c:00:01:45:ae')).toBeVisible());
+    fireEvent.click(getByRole('button', { name: 'Add Client' }));
+    fireEvent.change(getByLabelText('MAC Address'), { target: { value: '74:8c:00:01:45:ae' } });
+    fireEvent.click(getByRole('button', { name: 'Save' }));
+    await waitFor(() =>
+      expect(getByText('Client could not be added to Blocked List')).toBeVisible()
+    );
+  });
+
+  it('should render with Data and update Client successfully', async () => {
+    const { getByText, getByRole } = render(
+      <MockedProvider
+        mocks={[
+          blockListQueryMock.success,
+          blockListQueryMock.success,
+          blockListMutationMock.updateClientSuccess,
+        ]}
+        addTypename={false}
+      >
+        <UserProvider {...mockProp}>
+          <Router>
+            <BlockedList />
+          </Router>
+        </UserProvider>
+      </MockedProvider>
+    );
+    await waitFor(() => expect(getByText('74:9c:00:01:45:ae')).toBeVisible());
+    fireEvent.click(
+      getByRole('button', {
+        name: `delete-mac-74:9c:00:01:45:ae`,
+      })
+    );
+    fireEvent.click(getByRole('button', { name: 'Remove' }));
+    await waitFor(() =>
+      expect(getByText('Client successfully removed from Blocked List')).toBeVisible()
+    );
+  });
+
+  it('should render with Data and update Client return error when mutation not work', async () => {
+    const { getByText, getByRole } = render(
+      <MockedProvider
+        mocks={[
+          blockListQueryMock.success,
+          blockListQueryMock.success,
+          blockListMutationMock.updateClientError,
+        ]}
+        addTypename={false}
+      >
+        <UserProvider {...mockProp}>
+          <Router>
+            <BlockedList />
+          </Router>
+        </UserProvider>
+      </MockedProvider>
+    );
+    await waitFor(() => expect(getByText('74:9c:00:01:45:ae')).toBeVisible());
+    fireEvent.click(
+      getByRole('button', {
+        name: `delete-mac-74:9c:00:01:45:ae`,
+      })
+    );
+    fireEvent.click(getByRole('button', { name: 'Remove' }));
+    await waitFor(() =>
+      expect(getByText('Client could not be removed from Blocked List')).toBeVisible()
+    );
+  });
+});

app/containers/System/containers/BlockedList/tests/mock.js

@@ -0,0 +1,189 @@
+import { ADD_BLOCKED_CLIENT, UPDATE_CLIENT } from 'graphql/mutations';
+import { GET_BLOCKED_CLIENTS } from 'graphql/queries';
+
+export const blockListQueryMock = {
+  success: {
+    request: {
+      query: GET_BLOCKED_CLIENTS,
+      variables: { customerId: 2 },
+    },
+    result: {
+      data: {
+        getBlockedClients: [
+          {
+            customerId: '2',
+            macAddress: '74:9c:00:01:45:ae',
+            createdTimestamp: '1597172802575',
+            lastModifiedTimestamp: '1597333913133',
+            details: {
+              model_type: 'ClientInfoDetails',
+              alias: 'alias 128213363803566',
+              clientType: 0,
+              apFingerprint: 'fp 74:9c:00:01:45:ae',
+              userName: 'user-128213363803566',
+              hostName: 'hostName-128213363803566',
+              lastUsedCpUsername: null,
+              lastUserAgent: null,
+              doNotSteer: false,
+              blocklistDetails: {
+                model_type: 'BlocklistDetails',
+                enabled: true,
+                startTime: null,
+                endTime: null,
+              },
+            },
+            __typename: 'Client',
+          },
+        ],
+      },
+      loading: false,
+      networkStatus: 7,
+      stale: false,
+    },
+  },
+
+  error: {
+    request: {
+      query: GET_BLOCKED_CLIENTS,
+      variables: { customerId: 2 },
+    },
+    result: {
+      data: null,
+      errors: [{}],
+    },
+  },
+};
+
+export const blockListMutationMock = {
+  addClientSuccess: {
+    request: {
+      query: ADD_BLOCKED_CLIENT,
+      variables: {
+        customerId: 2,
+        macAddress: '74:8c:00:01:45:ae',
+      },
+    },
+    result: {
+      data: {
+        addBlockedClient: {
+          customerId: '2',
+          macAddress: '74:8c:00:01:45:ae',
+          details: {
+            model_type: 'ClientInfoDetails',
+            alias: null,
+            clientType: 0,
+            apFingerprint: null,
+            userName: null,
+            hostName: null,
+            lastUsedCpUsername: null,
+            lastUserAgent: null,
+            doNotSteer: false,
+            blocklistDetails: {
+              model_type: 'BlocklistDetails',
+              enabled: true,
+              startTime: null,
+              endTime: null,
+            },
+          },
+          lastModifiedTimestamp: '1597334825157',
+          createdTimestamp: '1597334825157',
+          __typename: 'Client',
+        },
+      },
+    },
+  },
+  addClientError: {
+    request: {
+      query: ADD_BLOCKED_CLIENT,
+    },
+    result: {
+      data: null,
+      errors: [{}],
+    },
+  },
+  updateClientSuccess: {
+    request: {
+      query: UPDATE_CLIENT,
+      variables: {
+        customerId: 2,
+        macAddress: '74:9c:00:01:45:ae',
+        details: {
+          model_type: 'ClientInfoDetails',
+          alias: 'alias 128213363803566',
+          clientType: 0,
+          apFingerprint: 'fp 74:9c:00:01:45:ae',
+          userName: 'user-128213363803566',
+          hostName: 'hostName-128213363803566',
+          lastUsedCpUsername: null,
+          lastUserAgent: null,
+          doNotSteer: false,
+          blocklistDetails: {
+            model_type: 'BlocklistDetails',
+            enabled: false,
+            startTime: null,
+            endTime: null,
+          },
+        },
+      },
+    },
+    result: {
+      data: {
+        updateClient: {
+          customerId: '2',
+          macAddress: 'mac-74:9c:00:01:45:ae',
+          createdTimestamp: '0',
+          lastModifiedTimestamp: '1597336036972',
+          details: {
+            model_type: 'ClientInfoDetails',
+            alias: 'alias 128213363803566',
+            clientType: 0,
+            apFingerprint: 'fp 74:9c:00:01:45:ae',
+            userName: 'user-128213363803566',
+            hostName: 'hostName-128213363803566',
+            lastUsedCpUsername: null,
+            lastUserAgent: null,
+            doNotSteer: false,
+            blocklistDetails: {
+              model_type: 'BlocklistDetails',
+              enabled: false,
+              startTime: null,
+              endTime: null,
+            },
+          },
+          __typename: 'Client',
+        },
+      },
+    },
+  },
+
+  updateClientError: {
+    request: {
+      query: UPDATE_CLIENT,
+      variables: {
+        customerId: 2,
+        macAddress: '74:9c:00:01:45:ae',
+        details: {
+          model_type: 'ClientInfoDetails',
+          alias: 'alias 128213363803566',
+          clientType: 0,
+          apFingerprint: 'fp 74:9c:00:01:45:ae',
+          userName: 'user-128213363803566',
+          hostName: 'hostName-128213363803566',
+          lastUsedCpUsername: null,
+          lastUserAgent: null,
+          doNotSteer: false,
+          blocklistDetails: {
+            model_type: 'BlocklistDetails',
+            enabled: false,
+            startTime: null,
+            endTime: null,
+          },
+        },
+      },
+    },
+    result: {
+      data: null,
+      errors: [{}],
+    },
+  },
+};

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useQuery, useMutation, useLazyQuery } from '@apollo/client';
+import { useQuery, useMutation, useLazyQuery } from '@apollo/react-hooks';
 import { notification } from 'antd';
 import {
   GET_ALL_FIRMWARE,
@@ -22,7 +22,7 @@ const Firmware = () => {
   const [
     getAllFirmware,
     { data: firmwareVersionData, loading: firmwareVersionLoading },
-  ] = useLazyQuery(GET_ALL_FIRMWARE, { fetchPolicy: 'network-only' });
+  ] = useLazyQuery(GET_ALL_FIRMWARE);
 
   const {
     data: trackAssignmentData,
@@ -83,18 +83,8 @@ const Firmware = () => {
     firmwareVersionRecordId,
     modelId,
     createdTimestamp,
-    lastModifiedTimestamp,
-    prevFirmwareVersionRecordId
+    lastModifiedTimestamp
   ) => {
-    if (prevFirmwareVersionRecordId !== firmwareVersionRecordId) {
-      deleteTrackAssignment({
-        variables: {
-          firmwareTrackId: firmwareTrackData.getFirmwareTrack.recordId,
-          firmwareVersionId: prevFirmwareVersionRecordId,
-        },
-      });
-    }
-
     updateTrackAssignment({
       variables: {
         trackRecordId: firmwareTrackData.getFirmwareTrack.recordId,

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

@@ -0,0 +1,119 @@
+import React from 'react';
+import '@testing-library/jest-dom/extend-expect';
+import { fireEvent, render, waitFor } from '@testing-library/react';
+import { MockedProvider } from '@apollo/react-testing';
+import { BrowserRouter as Router } from 'react-router-dom';
+import UserProvider from 'contexts/UserProvider';
+import { firmwareMutationMock, firmwareQueryMock } from './mock';
+import Firmware from '..';
+
+const {
+  getAllFirmwareModelsSuccess,
+  getAllFirmwareSuccess,
+  getFirmwareTrackAssignmentSuccess,
+  getFirmwareTrackSuccess,
+} = firmwareQueryMock;
+
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation(query => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(), // deprecated
+    removeListener: jest.fn(), // deprecated
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  })),
+});
+
+const mockProp = {
+  id: 123,
+  email: 'test@test.com',
+  role: 'admin',
+  customerId: 2,
+  updateUser: jest.fn(),
+  updateToken: jest.fn(),
+};
+
+describe('<Firmware />', () => {
+  afterEach(jest.resetModules);
+
+  it('should render with Data', async () => {
+    const { getByText } = render(
+      <MockedProvider
+        mocks={[
+          getAllFirmwareModelsSuccess,
+          getAllFirmwareSuccess,
+          getFirmwareTrackAssignmentSuccess,
+          getFirmwareTrackSuccess,
+        ]}
+        addTypename={false}
+      >
+        <UserProvider {...mockProp}>
+          <Router>
+            <Firmware />
+          </Router>
+        </UserProvider>
+      </MockedProvider>
+    );
+    await waitFor(() => expect(getByText('ap2220-2020-06-25-ce03472')).toBeVisible());
+  });
+
+  it('should render with Data and Edit Model Target successfully', async () => {
+    const { getByText, getByRole } = render(
+      <MockedProvider
+        mocks={[
+          getAllFirmwareModelsSuccess,
+          getAllFirmwareSuccess,
+          getFirmwareTrackAssignmentSuccess,
+          getFirmwareTrackAssignmentSuccess,
+          getFirmwareTrackSuccess,
+          firmwareMutationMock.updateTrackAssignmentSuccess,
+        ]}
+        addTypename={false}
+      >
+        <UserProvider {...mockProp}>
+          <Router>
+            <Firmware />
+          </Router>
+        </UserProvider>
+      </MockedProvider>
+    );
+    await waitFor(() => expect(getByText('ap2220-2020-06-25-ce03472')).toBeVisible());
+    fireEvent.click(getByRole('button', { name: `edit-track-ap2220` }));
+    fireEvent.click(getByRole('button', { name: 'Save' }));
+    await waitFor(() =>
+      expect(getByText('Model Target Version successfully updated.')).toBeVisible()
+    );
+  });
+
+  it('should render with Data and Edit Model Target show error when mutation not work ', async () => {
+    const { getByText, getByRole } = render(
+      <MockedProvider
+        mocks={[
+          getAllFirmwareModelsSuccess,
+          getAllFirmwareSuccess,
+          getFirmwareTrackAssignmentSuccess,
+          getFirmwareTrackAssignmentSuccess,
+          getFirmwareTrackSuccess,
+          firmwareMutationMock.updateTrackAssignmentError,
+        ]}
+        addTypename={false}
+      >
+        <UserProvider {...mockProp}>
+          <Router>
+            <Firmware />
+          </Router>
+        </UserProvider>
+      </MockedProvider>
+    );
+    await waitFor(() => expect(getByText('ap2220-2020-06-25-ce03472')).toBeVisible());
+    fireEvent.click(getByRole('button', { name: `edit-track-ap2220` }));
+    fireEvent.click(getByRole('button', { name: 'Save' }));
+    await waitFor(() =>
+      expect(getByText('Model Target Version could not be updated.')).toBeVisible()
+    );
+  });
+});

app/containers/System/containers/Firmware/tests/mock.js

@@ -0,0 +1,223 @@
+import { UPDATE_TRACK_ASSIGNMENT } from 'graphql/mutations';
+import {
+  GET_ALL_FIRMWARE,
+  GET_ALL_FIRMWARE_MODELS,
+  GET_FIRMWARE_TRACK,
+  GET_TRACK_ASSIGNMENTS,
+} from 'graphql/queries';
+
+export const firmwareQueryMock = {
+  getAllFirmwareSuccess: {
+    request: {
+      query: GET_ALL_FIRMWARE,
+    },
+    result: {
+      data: {
+        getAllFirmware: [
+          {
+            id: '1',
+            modelId: 'ap2220',
+            versionName: 'ap2220-2020-06-25-ce03472',
+            description: '',
+            filename:
+              'https://tip-read:tip-read@tip.jfrog.io/artifactory/tip-wlan-ap-firmware/ap2220/ap2220-2020-06-25-ce03472.tar.gz',
+            commit: 'ce03472',
+            releaseDate: '1597329017106',
+            validationCode: 'c69370aa5b6622d91a0fba3a5441f31c',
+            createdTimestamp: '1597329017115',
+            lastModifiedTimestamp: '1597329017115',
+            __typename: 'Firmware',
+          },
+          {
+            id: '2',
+            modelId: 'ea8300',
+            versionName: 'ea8300-2020-06-25-ce03472',
+            description: '',
+            filename:
+              'https://tip-read:tip-read@tip-read:tip-read@tip.jfrog.io/artifactory/tip-wlan-ap-firmware/ea8300/ea8300-2020-06-25-ce03472.tar.gz',
+            commit: 'ce03472',
+            releaseDate: '1597329017115',
+            validationCode: 'b209deb9847bdf40a31e45edf2e5a8d7',
+            createdTimestamp: '1597329017115',
+            lastModifiedTimestamp: '1597329017115',
+            __typename: 'Firmware',
+          },
+          {
+            id: '3',
+            modelId: 'ea8300-ca',
+            versionName: 'ea8300-2020-06-25-ce03472',
+            description: '',
+            filename:
+              'https://tip-read:tip-read@tip.jfrog.io/artifactory/tip-wlan-ap-firmware/ea8300/ea8300-2020-06-25-ce03472.tar.gz',
+            commit: 'ce03472',
+            releaseDate: '1597329017115',
+            validationCode: 'b209deb9847bdf40a31e45edf2e5a8d7',
+            createdTimestamp: '1597329017115',
+            lastModifiedTimestamp: '1597329017115',
+            __typename: 'Firmware',
+          },
+          {
+            id: '4',
+            modelId: 'ecw5211',
+            versionName: 'ecw5211-2020-06-26-4ff7208',
+            description: '',
+            filename:
+              'https://tip-read:tip-read@tip.jfrog.io/artifactory/tip-wlan-ap-firmware/ecw5211/ecw5211-2020-06-26-4ff7208.tar.gz',
+            commit: '4ff7208',
+            releaseDate: '1597329017115',
+            validationCode: '133072b0e8a440063109604375938fba',
+            createdTimestamp: '1597329017115',
+            lastModifiedTimestamp: '1597329017115',
+            __typename: 'Firmware',
+          },
+          {
+            id: '5',
+            modelId: 'ecw5410',
+            versionName: 'ecw5410-2020-06-25-ce03472',
+            description: '',
+            filename:
+              'https://tip-read:tip-read@tip.jfrog.io/artifactory/tip-wlan-ap-firmware/ecw5410/ecw5410-2020-06-25-ce03472.tar.gz',
+            commit: 'ce03472',
+            releaseDate: '1597329017115',
+            validationCode: '2940ca34eeab85be18f3a4b79f4da6d9',
+            createdTimestamp: '1597329017115',
+            lastModifiedTimestamp: '1597329017115',
+            __typename: 'Firmware',
+          },
+        ],
+      },
+      loading: false,
+      networkStatus: 7,
+      stale: false,
+    },
+  },
+
+  getAllFirmwareModelsSuccess: {
+    request: {
+      query: GET_ALL_FIRMWARE_MODELS,
+    },
+    result: {
+      data: {
+        getAllFirmwareModelId: ['ea8300-ca', 'ap2220', 'ecw5211', 'ea8300', 'ecw5410'],
+      },
+      loading: false,
+      networkStatus: 7,
+      stale: false,
+    },
+  },
+
+  getFirmwareTrackAssignmentSuccess: {
+    request: {
+      query: GET_TRACK_ASSIGNMENTS,
+    },
+    result: {
+      data: {
+        getAllFirmwareTrackAssignment: [
+          {
+            modelId: 'ap2220',
+            firmwareVersionRecordId: '1',
+            trackRecordId: '1',
+            lastModifiedTimestamp: '1597342689340',
+            __typename: 'FirmwareTrackAssignment',
+          },
+          {
+            modelId: 'ea8300',
+            firmwareVersionRecordId: '2',
+            trackRecordId: '1',
+            lastModifiedTimestamp: '1597172802693',
+            __typename: 'FirmwareTrackAssignment',
+          },
+          {
+            modelId: 'ea8300-ca',
+            firmwareVersionRecordId: '3',
+            trackRecordId: '1',
+            lastModifiedTimestamp: '1597172802693',
+            __typename: 'FirmwareTrackAssignment',
+          },
+          {
+            modelId: 'ecw5211',
+            firmwareVersionRecordId: '4',
+            trackRecordId: '1',
+            lastModifiedTimestamp: '1597172802693',
+            __typename: 'FirmwareTrackAssignment',
+          },
+        ],
+      },
+      loading: false,
+      networkStatus: 7,
+      stale: false,
+    },
+  },
+
+  getFirmwareTrackSuccess: {
+    request: {
+      query: GET_FIRMWARE_TRACK,
+      variables: { firmwareTrackName: 'DEFAULT' },
+    },
+    result: {
+      data: {
+        getFirmwareTrack: {
+          recordId: '1',
+          trackName: 'DEFAULT',
+          createdTimestamp: '1597329017117',
+          lastModifiedTimestamp: '1597329017117',
+          __typename: 'FirmwareTrack',
+        },
+      },
+      loading: false,
+      networkStatus: 7,
+      stale: false,
+    },
+  },
+  error: {
+    request: {
+      query: GET_FIRMWARE_TRACK,
+      variables: { customerId: 2 },
+    },
+    result: {
+      data: null,
+      errors: [{}],
+    },
+  },
+};
+
+export const firmwareMutationMock = {
+  updateTrackAssignmentSuccess: {
+    request: {
+      query: UPDATE_TRACK_ASSIGNMENT,
+      variables: {
+        trackRecordId: '1',
+        firmwareVersionRecordId: '1',
+        modelId: 'ap2220',
+        lastModifiedTimestamp: '1597342689340',
+      },
+    },
+    result: {
+      data: {
+        updateFirmwareTrackAssignment: {
+          trackRecordId: '1',
+          firmwareVersionRecordId: '1',
+          modelId: 'ap2220',
+          createdTimestamp: '0',
+          lastModifiedTimestamp: '1597342689340',
+          __typename: 'FirmwareTrackAssignment',
+        },
+      },
+    },
+  },
+  updateTrackAssignmentError: {
+    request: {
+      query: UPDATE_TRACK_ASSIGNMENT,
+      variables: {
+        trackRecordId: '1',
+        firmwareVersionRecordId: '1',
+        modelId: 'ap2220',
+        lastModifiedTimestamp: '1597342689340',
+      },
+    },
+    result: {
+      data: null,
+      errors: [{}],
+    },
+  },
+};

app/containers/System/containers/Manufacturer/index.js

@@ -1,11 +1,9 @@
-import React, { useState } from 'react';
-import { useQuery, useMutation, useLazyQuery, gql } from '@apollo/client';
+import React from 'react';
+import gql from 'graphql-tag';
+import { useMutation, useLazyQuery } from '@apollo/react-hooks';
 import { notification } from 'antd';
 import { Manufacturer as ManufacturerPage } from '@tip-wlan/wlan-cloud-ui-library';
-
-import { AUTH_TOKEN } from 'constants/index';
-import { GET_API_URL } from 'graphql/queries';
-import { getItem } from 'utils/localStorage';
+import { OUI_UPLOAD } from 'graphql/mutations';
 
 const GET_OUI = gql`
   query GetOui($oui: String!) {
@@ -30,12 +28,7 @@ const UPDATE_OUI = gql`
     }
   }
 `;
-
 const System = () => {
-  const token = getItem(AUTH_TOKEN);
-  const [loadingFileUpload, setLoadingFileUpload] = useState(false);
-
-  const { data: apiUrl } = useQuery(GET_API_URL);
   const [updateOUI] = useMutation(UPDATE_OUI);
   const [searchOUI, { data }] = useLazyQuery(GET_OUI, {
     onError: () => {
@@ -44,16 +37,8 @@ const System = () => {
         description: 'No matching manufacturer found for OUI',
       });
     },
-    onCompleted: () => {
-      if (!data?.getOui?.oui) {
-        notification.error({
-          message: 'Error',
-          description: 'No matching manufacturer found for OUI',
-        });
-      }
-    },
-    fetchPolicy: 'no-cache',
   });
+  const [fileUpload] = useMutation(OUI_UPLOAD);
 
   const handleUpdateOUI = (oui, manufacturerAlias, manufacturerName) => {
     updateOUI({
@@ -81,54 +66,33 @@ const System = () => {
     searchOUI({ variables: { oui } });
   };
 
-  const handleFileUpload = (fileName, file) => {
-    if (apiUrl?.getApiUrl) {
-      setLoadingFileUpload(true);
-
-      fetch(`${apiUrl?.getApiUrl}portal/manufacturer/oui/upload?fileName=${fileName}`, {
-        method: 'POST',
-        headers: {
-          Authorization: token ? `Bearer ${token.access_token}` : '',
-          'Content-Type': 'application/octet-stream',
-        },
-        body: file,
-      })
-        .then(response => response.json())
-        .then(resp => {
-          if (resp?.success) {
-            notification.success({
-              message: 'Success',
-              description: 'File successfully uploaded.',
-            });
-          } else {
-            notification.error({
-              message: 'Error',
-              description: 'File could not be uploaded.',
-            });
-          }
-        })
-        .catch(() => {
+  const handleFileUpload = (fileName, file) =>
+    fileUpload({ variables: { fileName, file } })
+      .then(resp => {
+        if (resp?.ouiUpload?.success) {
+          notification.success({
+            message: 'Success',
+            description: 'File successfully uploaded.',
+          });
+        } else {
           notification.error({
             message: 'Error',
             description: 'File could not be uploaded.',
           });
+        }
+      })
+      .catch(() =>
+        notification.error({
+          message: 'Error',
+          description: 'File could not be uploaded.',
         })
-        .finally(() => setLoadingFileUpload(false));
-    } else {
-      notification.error({
-        message: 'Error',
-        description: 'File could not be uploaded.',
-      });
-    }
-  };
-
+      );
   return (
     <ManufacturerPage
       onSearchOUI={handleSearchOUI}
       onUpdateOUI={handleUpdateOUI}
       returnedOUI={data && data.getOui}
       fileUpload={handleFileUpload}
-      loadingFileUpload={loadingFileUpload}
     />
   );
 };

app/contexts/UserProvider/index.js

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

app/graphql/functions.js

@@ -1,30 +0,0 @@
-export const updateQueryGetAllProfiles = (previousResult, { fetchMoreResult }) => {
-  const previousEntry = previousResult.getAllProfiles;
-  const newItems = fetchMoreResult.getAllProfiles.items;
-
-  return {
-    getAllProfiles: {
-      context: { ...fetchMoreResult.getAllProfiles.context },
-      items: [...previousEntry.items, ...newItems],
-      __typename: previousEntry.__typename,
-    },
-  };
-};
-
-export const fetchMoreProfiles = (e, profile, fetchMore) => {
-  if (profile.getAllProfiles.context.lastPage) {
-    return false;
-  }
-
-  e.persist();
-  const { target } = e;
-
-  if (target.scrollTop + target.offsetHeight + 10 >= target.scrollHeight) {
-    fetchMore({
-      variables: { context: { ...profile.getAllProfiles.context } },
-      updateQuery: updateQueryGetAllProfiles,
-    });
-  }
-
-  return true;
-};

app/graphql/mutations.js

@@ -1,4 +1,4 @@
-import { gql } from '@apollo/client';
+import gql from 'graphql-tag';
 
 export const REFRESH_TOKEN = gql`
   mutation UpdateToken($refreshToken: String!) {
@@ -10,6 +10,167 @@ export const REFRESH_TOKEN = gql`
   }
 `;
 
+export const AUTHENTICATE_USER = gql`
+  mutation AuthenticateUser($email: String!, $password: String!) {
+    authenticateUser(email: $email, password: $password) {
+      access_token
+      refresh_token
+      expires_in
+    }
+  }
+`;
+
+export const UPDATE_PROFILE = gql`
+  mutation UpdateProfile(
+    $id: ID!
+    $profileType: String!
+    $customerId: ID!
+    $name: String!
+    $childProfileIds: [ID]
+    $lastModifiedTimestamp: String
+    $details: JSONObject
+  ) {
+    updateProfile(
+      id: $id
+      profileType: $profileType
+      customerId: $customerId
+      name: $name
+      childProfileIds: $childProfileIds
+      lastModifiedTimestamp: $lastModifiedTimestamp
+      details: $details
+    ) {
+      id
+      profileType
+      customerId
+      name
+      childProfileIds
+      lastModifiedTimestamp
+      details
+    }
+  }
+`;
+
+export const UPDATE_USER = gql`
+  mutation UpdateUser(
+    $id: ID!
+    $username: String!
+    $password: String!
+    $role: String!
+    $customerId: ID!
+    $lastModifiedTimestamp: String
+  ) {
+    updateUser(
+      id: $id
+      username: $username
+      password: $password
+      role: $role
+      customerId: $customerId
+      lastModifiedTimestamp: $lastModifiedTimestamp
+    ) {
+      id
+      username
+      role
+      customerId
+      lastModifiedTimestamp
+    }
+  }
+`;
+
+export const UPDATE_EQUIPMENT = gql`
+  mutation UpdateEquipment(
+    $id: ID!
+    $equipmentType: String!
+    $inventoryId: String!
+    $customerId: ID!
+    $profileId: ID!
+    $locationId: ID!
+    $name: String!
+    $latitude: String
+    $longitude: String
+    $serial: String
+    $lastModifiedTimestamp: String
+    $details: JSONObject
+  ) {
+    updateEquipment(
+      id: $id
+      equipmentType: $equipmentType
+      inventoryId: $inventoryId
+      customerId: $customerId
+      profileId: $profileId
+      locationId: $locationId
+      name: $name
+      latitude: $latitude
+      longitude: $longitude
+      serial: $serial
+      lastModifiedTimestamp: $lastModifiedTimestamp
+      details: $details
+    ) {
+      id
+      equipmentType
+      inventoryId
+      customerId
+      profileId
+      locationId
+      name
+      latitude
+      longitude
+      serial
+      lastModifiedTimestamp
+      details
+    }
+  }
+`;
+
+export const DELETE_PROFILE = gql`
+  mutation DeleteProfile($id: ID!) {
+    deleteProfile(id: $id) {
+      id
+    }
+  }
+`;
+
+export const CREATE_PROFILE = gql`
+  mutation CreateProfile(
+    $profileType: String!
+    $customerId: ID!
+    $name: String!
+    $childProfileIds: [ID]
+    $details: JSONObject
+  ) {
+    createProfile(
+      profileType: $profileType
+      customerId: $customerId
+      name: $name
+      childProfileIds: $childProfileIds
+      details: $details
+    ) {
+      profileType
+      customerId
+      name
+      childProfileIds
+      details
+    }
+  }
+`;
+
+export const CREATE_USER = gql`
+  mutation CreateUser($username: String!, $password: String!, $role: String!, $customerId: ID!) {
+    createUser(username: $username, password: $password, role: $role, customerId: $customerId) {
+      username
+      role
+      customerId
+    }
+  }
+`;
+
+export const DELETE_USER = gql`
+  mutation DeleteUser($id: ID!) {
+    deleteUser(id: $id) {
+      id
+    }
+  }
+`;
+
 export const CREATE_LOCATION = gql`
   mutation CreateLocation(
     $locationType: String!
@@ -99,22 +260,6 @@ export const UPDATE_EQUIPMENT_FIRMWARE = gql`
   }
 `;
 
-export const REQUEST_EQUIPMENT_SWITCH_BANK = gql`
-  mutation RequestEquipmentSwitchBank($equipmentId: ID) {
-    requestEquipmentSwitchBank(equipmentId: $equipmentId) {
-      success
-    }
-  }
-`;
-
-export const REQUEST_EQUIPMENT_REBOOT = gql`
-  mutation RequestEquipmentReboot($equipmentId: ID) {
-    requestEquipmentReboot(equipmentId: $equipmentId) {
-      success
-    }
-  }
-`;
-
 export const UPDATE_TRACK_ASSIGNMENT = gql`
   mutation UpdateFirmwareTrackAssignment(
     $trackRecordId: ID!
@@ -255,62 +400,6 @@ export const CREATE_EQUIPMENT = gql`
   }
 `;
 
-export const UPDATE_EQUIPMENT = gql`
-  mutation UpdateEquipment(
-    $id: ID!
-    $equipmentType: String!
-    $inventoryId: String!
-    $customerId: ID!
-    $profileId: ID!
-    $locationId: ID!
-    $name: String!
-    $baseMacAddress: String
-    $latitude: String
-    $longitude: String
-    $serial: String
-    $lastModifiedTimestamp: String
-    $details: JSONObject
-  ) {
-    updateEquipment(
-      id: $id
-      equipmentType: $equipmentType
-      inventoryId: $inventoryId
-      customerId: $customerId
-      profileId: $profileId
-      locationId: $locationId
-      name: $name
-      baseMacAddress: $baseMacAddress
-      latitude: $latitude
-      longitude: $longitude
-      serial: $serial
-      lastModifiedTimestamp: $lastModifiedTimestamp
-      details: $details
-    ) {
-      id
-      equipmentType
-      inventoryId
-      customerId
-      profileId
-      locationId
-      name
-      baseMacAddress
-      latitude
-      longitude
-      serial
-      lastModifiedTimestamp
-      details
-    }
-  }
-`;
-
-export const DELETE_EQUIPMENT = gql`
-  mutation DeleteEquipment($id: ID!) {
-    deleteEquipment(id: $id) {
-      id
-    }
-  }
-`;
-
 export const UPDATE_CUSTOMER = gql`
   mutation UpdateCustomer(
     $id: ID!

app/graphql/queries.js

@@ -1,81 +1,34 @@
-import { gql } from '@apollo/client';
+import gql from 'graphql-tag';
 
-export const GET_API_URL = gql`
-  query GetApiUrl {
-    getApiUrl
-  }
-`;
-
-export const GET_ALL_LOCATIONS = gql`
-  query GetAllLocations($customerId: ID!) {
-    getAllLocations(customerId: $customerId) {
+export const GET_PROFILE = gql`
+  query GetProfile($id: ID!) {
+    getProfile(id: $id) {
       id
+      profileType
+      customerId
       name
-      parentId
-      locationType
+      childProfiles {
+        id
+        name
+        profileType
+        details
+      }
+      childProfileIds
+      createdTimestamp
+      lastModifiedTimestamp
+      details
     }
   }
 `;
 
-export const FILTER_EQUIPMENT = gql`
-  query FilterEquipment(
-    $locationIds: [ID]
-    $customerId: ID!
-    $equipmentType: String
-    $context: JSONObject
-  ) {
-    filterEquipment(
-      customerId: $customerId
-      locationIds: $locationIds
-      equipmentType: $equipmentType
-      context: $context
-    ) {
-      items {
-        name
-        id
-        locationId
-        profileId
-        inventoryId
-        channel
-        model
-        alarmsCount
-        profile {
-          name
-        }
-        baseMacAddress
-        manufacturer
-        status {
-          protocol {
-            details {
-              reportedIpV4Addr
-            }
-          }
-          osPerformance {
-            details {
-              uptimeInSeconds
-            }
-          }
-          radioUtilization {
-            details {
-              reportedIpV4Addr
-              capacityDetails
-              noiseFloorDetails
-            }
-          }
-          clientDetails {
-            details {
-              numClientsPerRadio
-            }
-          }
-          firmware {
-            detailsJSON
-          }
-          channel {
-            detailsJSON
-          }
-        }
-      }
-      context
+export const GET_USER = gql`
+  query GetUser($id: ID!) {
+    getUser(id: $id) {
+      id
+      username
+      role
+      customerId
+      lastModifiedTimestamp
     }
   }
 `;
@@ -104,14 +57,16 @@ export const GET_EQUIPMENT = gql`
           details
         }
       }
-      baseMacAddress
-      manufacturer
       status {
         firmware {
           detailsJSON
         }
         protocol {
           detailsJSON
+          details {
+            reportedMacAddr
+            manufacturer
+          }
         }
         radioUtilization {
           detailsJSON
@@ -125,9 +80,6 @@ export const GET_EQUIPMENT = gql`
         osPerformance {
           detailsJSON
         }
-        channel {
-          detailsJSON
-        }
       }
       model
       alarmsCount
@@ -141,18 +93,162 @@ export const GET_EQUIPMENT = gql`
   }
 `;
 
-export const FILTER_EQUIPMENT_BULK_EDIT_APS = gql`
+export const GET_ALL_FIRMWARE = gql`
+  query GetAllFirmware($modelId: String) {
+    getAllFirmware(modelId: $modelId) {
+      id
+      modelId
+      versionName
+      description
+      filename
+      commit
+      releaseDate
+      validationCode
+      createdTimestamp
+      lastModifiedTimestamp
+    }
+  }
+`;
+
+export const GET_ALL_PROFILES = gql`
+  query GetAllProfiles($customerId: ID!, $cursor: String, $type: String) {
+    getAllProfiles(customerId: $customerId, cursor: $cursor, type: $type) {
+      items {
+        id
+        name
+        profileType
+        details
+      }
+      context {
+        cursor
+        lastPage
+      }
+    }
+  }
+`;
+
+export const GET_ALL_ALARMS = gql`
+  query GetAllAlarms($customerId: ID!, $cursor: String) {
+    getAllAlarms(customerId: $customerId, cursor: $cursor) {
+      items {
+        severity
+        alarmCode
+        details
+        createdTimestamp
+        equipment {
+          id
+          name
+        }
+      }
+      context {
+        cursor
+        lastPage
+      }
+    }
+  }
+`;
+
+export const GET_ALL_USERS = gql`
+  query GetAllUsers($customerId: ID!, $cursor: String) {
+    getAllUsers(customerId: $customerId, cursor: $cursor) {
+      items {
+        id
+        email: username
+        role
+        lastModifiedTimestamp
+        customerId
+      }
+      context {
+        cursor
+        lastPage
+      }
+    }
+  }
+`;
+
+export const GET_ALL_LOCATIONS = gql`
+  query GetAllLocations($customerId: ID!) {
+    getAllLocations(customerId: $customerId) {
+      id
+      name
+      parentId
+      locationType
+    }
+  }
+`;
+
+export const FILTER_EQUIPMENT = gql`
   query FilterEquipment(
     $locationIds: [ID]
     $customerId: ID!
     $equipmentType: String
-    $context: JSONObject
+    $cursor: String
   ) {
     filterEquipment(
       customerId: $customerId
       locationIds: $locationIds
       equipmentType: $equipmentType
-      context: $context
+      cursor: $cursor
+    ) {
+      items {
+        name
+        id
+        locationId
+        profileId
+        inventoryId
+        channel
+        model
+        alarmsCount
+        profile {
+          name
+        }
+        status {
+          protocol {
+            details {
+              reportedIpV4Addr
+              reportedMacAddr
+              manufacturer
+            }
+          }
+          osPerformance {
+            details {
+              uptimeInSeconds
+            }
+          }
+          radioUtilization {
+            details {
+              reportedIpV4Addr
+              capacityDetails
+              noiseFloorDetails
+            }
+          }
+          clientDetails {
+            details {
+              numClientsPerRadio
+            }
+          }
+        }
+      }
+      context {
+        lastPage
+        cursor
+      }
+    }
+  }
+`;
+
+export const FILTER_EQUIPMENT_BULK_EDIT_APS = gql`
+  query FilterEquipment(
+    $locationIds: [ID]
+    $customerId: ID!
+    $equipmentType: String
+    $cursor: String
+  ) {
+    filterEquipment(
+      customerId: $customerId
+      locationIds: $locationIds
+      equipmentType: $equipmentType
+      cursor: $cursor
     ) {
       items {
         name
@@ -161,7 +257,10 @@ export const FILTER_EQUIPMENT_BULK_EDIT_APS = gql`
         channel
         details
       }
-      context
+      context {
+        lastPage
+        cursor
+      }
     }
   }
 `;
@@ -179,8 +278,8 @@ export const GET_LOCATION = gql`
 `;
 
 export const FILTER_CLIENT_SESSIONS = gql`
-  query FilterClientSessions($customerId: ID!, $locationIds: [ID], $context: JSONObject) {
-    filterClientSessions(customerId: $customerId, locationIds: $locationIds, context: $context) {
+  query FilterClientSessions($customerId: ID!, $locationIds: [ID], $cursor: String) {
+    filterClientSessions(customerId: $customerId, locationIds: $locationIds, cursor: $cursor) {
       items {
         id
         macAddress
@@ -190,12 +289,14 @@ export const FILTER_CLIENT_SESSIONS = gql`
         radioType
         signal
         manufacturer
-        details
         equipment {
           name
         }
       }
-      context
+      context {
+        lastPage
+        cursor
+      }
     }
   }
 `;
@@ -222,7 +323,7 @@ export const GET_CLIENT_SESSION = gql`
 export const FILTER_SERVICE_METRICS = gql`
   query FilterServiceMetrics(
     $customerId: ID!
-    $context: JSONObject
+    $cursor: String
     $fromTime: String!
     $toTime: String!
     $clientMacs: [String]
@@ -232,7 +333,7 @@ export const FILTER_SERVICE_METRICS = gql`
   ) {
     filterServiceMetrics(
       customerId: $customerId
-      context: $context
+      cursor: $cursor
       fromTime: $fromTime
       toTime: $toTime
       clientMacs: $clientMacs
@@ -248,34 +349,10 @@ export const FILTER_SERVICE_METRICS = gql`
         txBytes
         detailsJSON
       }
-      context
-    }
-  }
-`;
-
-export const GET_ALL_PROFILES = (fields = '') => gql`
-  query GetAllProfiles(
-    $customerId: ID!
-    $cursor: String
-    $limit: Int
-    $type: String
-    $context: JSONObject
-  ) {
-    getAllProfiles(
-      customerId: $customerId
-      cursor: $cursor
-      limit: $limit
-      type: $type
-      context: $context
-    ) {
-      items {
-        id
-        name
-        profileType
-        details
-        ${fields}
+      context {
+        lastPage
+        cursor
       }
-      context
     }
   }
 `;
@@ -291,7 +368,10 @@ export const GET_ALL_STATUS = gql`
           clientCountPerOui
         }
       }
-      context
+      context {
+        lastPage
+        cursor
+      }
     }
   }
 `;
@@ -313,23 +393,6 @@ export const GET_FIRMWARE_TRACK = gql`
   }
 `;
 
-export const GET_ALL_FIRMWARE = gql`
-  query GetAllFirmware($modelId: String) {
-    getAllFirmware(modelId: $modelId) {
-      id
-      modelId
-      versionName
-      description
-      filename
-      commit
-      releaseDate
-      validationCode
-      createdTimestamp
-      lastModifiedTimestamp
-    }
-  }
-`;
-
 export const GET_TRACK_ASSIGNMENTS = gql`
   query GetAllFirmwareTrackAssignment {
     getAllFirmwareTrackAssignment {
@@ -367,7 +430,7 @@ export const FILTER_SYSTEM_EVENTS = gql`
     $toTime: String!
     $equipmentIds: [ID]
     $dataTypes: [String]
-    $context: JSONObject
+    $cursor: String
     $limit: Int
   ) {
     filterSystemEvents(
@@ -376,11 +439,14 @@ export const FILTER_SYSTEM_EVENTS = gql`
       toTime: $toTime
       dataTypes: $dataTypes
       equipmentIds: $equipmentIds
-      context: $context
+      cursor: $cursor
       limit: $limit
     ) {
       items
-      context
+      context {
+        lastPage
+        cursor
+      }
     }
   }
 `;

app/index.js

@@ -1,10 +1,12 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Router } from 'react-router-dom';
-import { ApolloClient, ApolloProvider, ApolloLink, Observable } from '@apollo/client';
-import { InMemoryCache } from '@apollo/client/cache';
-import { onError } from '@apollo/client/link/error';
+import { ApolloClient } from 'apollo-client';
+import { InMemoryCache } from 'apollo-cache-inmemory';
+import { onError } from 'apollo-link-error';
 import { createUploadLink } from 'apollo-upload-client';
+import { ApolloLink, Observable } from 'apollo-link';
+import { ApolloProvider } from '@apollo/react-hooks';
 
 import 'styles/antd.less';
 import 'styles/index.scss';
@@ -15,13 +17,14 @@ import { REFRESH_TOKEN } from 'graphql/mutations';
 import { getItem, setItem, removeItem } from 'utils/localStorage';
 import history from 'utils/history';
 
-const API_URI = process.env.NODE_ENV === 'production' ? window.REACT_APP_API : process.env.API;
+const API_URI =
+  process.env.NODE_ENV === 'development' ? 'http://localhost:4000/' : window.REACT_APP_API;
 const MOUNT_NODE = document.getElementById('root');
 
 const cache = new InMemoryCache();
 
 const uploadLink = createUploadLink({
-  uri: `${API_URI}/graphql`,
+  uri: API_URI,
 });
 
 const request = async operation => {

app/styles/variables.scss

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "wlan-cloud-ui",
-  "version": "1.0.7",
+  "version": "0.2.9",
   "author": "ConnectUs",
   "description": "React Portal",
   "engines": {
@@ -10,23 +10,28 @@
   "scripts": {
     "test": "jest --passWithNoTests --coverage",
     "start": "cross-env NODE_ENV=development webpack-dev-server",
-    "start:bare": "cross-env API=ttps://portal.rtl.lab.netexperience.com NODE_ENV=bare webpack-dev-server",
-    "start:dev": "cross-env API=https://portal.rtl.lab.netexperience.com NODE_ENV=development webpack-dev-server",
     "build": "webpack --mode=production",
-    "format": "prettier --write 'app/**/*{.js,.scss}'",
-    "eslint-fix": "eslint --fix 'app/**/*.js'",
-    "eslint": "eslint 'app/**/*.js' --max-warnings=0"
+    "format": "prettier --write \"app/**/*.js\"",
+    "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": "^1.0.10",
-    "antd": "^4.5.2",
+    "@apollo/react-hoc": "^3.1.4",
+    "@apollo/react-hooks": "^3.1.3",
+    "@tip-wlan/wlan-cloud-ui-library": "^0.2.9",
+    "antd": "^4.3.1",
+    "apollo-cache-inmemory": "^1.6.6",
+    "apollo-client": "^2.6.10",
+    "apollo-link": "^1.2.14",
+    "apollo-link-error": "^1.1.13",
+    "apollo-link-http": "^1.5.17",
     "apollo-upload-client": "^13.0.0",
     "clean-webpack-plugin": "^3.0.0",
     "graphql": "^14.6.0",
-    "highcharts": "^8.1.0",
+    "graphql-tag": "^2.10.3",
+    "highcharts": "^8.1.1",
     "highcharts-react-official": "^3.0.0",
     "history": "^4.10.1",
     "html-webpack-plugin": "^3.2.0",
@@ -44,10 +49,13 @@
     "terser-webpack-plugin": "^2.3.5"
   },
   "devDependencies": {
+    "@apollo/react-testing": "3.0.0",
     "@babel/core": "^7.8.7",
     "@babel/plugin-proposal-class-properties": "^7.8.3",
     "@babel/preset-env": "^7.8.7",
     "@babel/preset-react": "^7.8.3",
+    "@testing-library/dom": "^7.22.1",
+    "@testing-library/jest-dom": "^5.11.2",
     "@testing-library/react": "^10.0.3",
     "babel-core": "^6.26.3",
     "babel-eslint": "^10.1.0",
@@ -75,6 +83,7 @@
     "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",
@@ -83,20 +92,22 @@
     "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"
-    ]
   }
 }

webpack.config.js

@@ -4,7 +4,6 @@ const common = require('./webpack/webpack.common');
 const envs = {
   development: 'dev',
   production: 'prod',
-  bare: 'bare',
 };
 /* eslint-disable global-require,import/no-dynamic-require */
 const env = envs[process.env.NODE_ENV || 'production'];

webpack/webpack.bare.js

@@ -1,73 +0,0 @@
-const path = require('path');
-
-const commonPaths = require('./paths');
-
-module.exports = {
-  mode: 'development',
-  output: {
-    path: commonPaths.outputPath,
-    publicPath: '/',
-    filename: '[name].js',
-    chunkFilename: '[name].js',
-  },
-  devtool: 'inline-source-map',
-  devServer: {
-    port: 3000,
-    historyApiFallback: true,
-    contentBase: commonPaths.outputPath,
-  },
-  module: {
-    rules: [
-      {
-        test: /\.(css|scss)$/,
-        use: [
-          {
-            loader: 'style-loader',
-          },
-          {
-            loader: 'css-loader',
-            options: {
-              modules: {
-                localIdentName: '[name]__[local]___[hash:base64:5]',
-              },
-              sourceMap: true,
-            },
-          },
-          {
-            loader: 'sass-loader',
-            options: {
-              sourceMap: true,
-            },
-          },
-        ],
-      },
-      {
-        test: /\.less$/,
-        use: [
-          {
-            loader: 'style-loader',
-          },
-          {
-            loader: 'css-loader',
-          },
-          {
-            loader: 'less-loader', // compiles Less to CSS
-            options: {
-              lessOptions: {
-                javascriptEnabled: true,
-              },
-            },
-          },
-        ],
-      },
-    ],
-  },
-  resolve: {
-    modules: ['node_modules', 'app'],
-    alias: {
-      app: path.resolve(__dirname, '../', 'app'),
-      react: path.resolve(__dirname, '../', 'node_modules', 'react'),
-      'react-router-dom': path.resolve('./node_modules/react-router-dom'),
-    },
-  },
-};

webpack/webpack.common.js

@@ -22,6 +22,23 @@ module.exports = {
         exclude: /node_modules/,
         use: ['babel-loader', 'eslint-loader'],
       },
+      {
+        test: /\.less$/,
+        use: [
+          {
+            loader: 'style-loader',
+          },
+          {
+            loader: 'css-loader',
+          },
+          {
+            loader: 'less-loader',
+            options: {
+              javascriptEnabled: true,
+            },
+          },
+        ],
+      },
     ],
   },
   plugins: [
@@ -30,7 +47,7 @@ module.exports = {
       favicon: './app/images/favicon.ico',
     }),
     new webpack.DefinePlugin({
-      'process.env.API': JSON.stringify(process.env.API || 'http://localhost:4000'),
+      'process.env.GRAPHQL_URL': JSON.stringify(process.env.GRAPHQL_URL),
     }),
   ],
 };

webpack/webpack.dev.js

@@ -34,26 +34,6 @@ module.exports = {
           },
           {
             loader: 'sass-loader',
-            options: {
-              sourceMap: true,
-            },
-          },
-        ],
-      },
-      {
-        test: /\.less$/,
-        use: [
-          {
-            loader: 'style-loader',
-          },
-          {
-            loader: 'css-loader',
-          },
-          {
-            loader: 'less-loader', // compiles Less to CSS
-            options: {
-              javascriptEnabled: true,
-            },
           },
         ],
       },

webpack/webpack.prod.js

@@ -14,7 +14,6 @@ module.exports = {
     chunkFilename: `${commonPaths.jsFolder}/[name].[chunkhash].js`,
   },
   optimization: {
-    minimize: true,
     minimizer: [
       new TerserPlugin({
         // Use multi-process parallel running to improve the build speed
@@ -68,21 +67,6 @@ module.exports = {
           'sass-loader',
         ],
       },
-      {
-        test: /\.less$/,
-        use: [
-          MiniCssExtractPlugin.loader,
-          {
-            loader: 'css-loader',
-          },
-          {
-            loader: 'less-loader', // compiles Less to CSS
-            options: {
-              javascriptEnabled: true,
-            },
-          },
-        ],
-      },
     ],
   },
   resolve: {