@webitel/ui-sdk 0.1.11 → 0.1.112

package/src/modules/Userinfo/classes/ApplicationsAccess.js

@@ -0,0 +1,170 @@
+import deepmerge from 'deepmerge';
+import deepCopy from 'deep-copy';
+import WebitelApplications from '../../../enums/WebitelApplications/WebitelApplications.enum';
+import SupervisorSections from '../../../enums/WebitelApplications/SupervisorSections.enum';
+import AdminSections from '../../../enums/WebitelApplications/AdminSections.enum';
+
+const applicationsAccess = (value = true) => ({
+  [WebitelApplications.AGENT]: {
+    _enabled: value,
+    _locale: `WebitelApplications.${WebitelApplications.AGENT}.name`,
+  },
+  [WebitelApplications.HISTORY]: {
+    _enabled: value,
+    _locale: `WebitelApplications.${WebitelApplications.HISTORY}.name`,
+  },
+  [WebitelApplications.ANALYTICS]: {
+    _enabled: value,
+    _locale: `WebitelApplications.${WebitelApplications.ANALYTICS}.name`,
+  },
+  [WebitelApplications.SUPERVISOR]: {
+    _enabled: value,
+    _locale: `WebitelApplications.${WebitelApplications.SUPERVISOR}.name`,
+    [SupervisorSections.QUEUES]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.SUPERVISOR}.sections.${SupervisorSections.QUEUES}`,
+    },
+    [SupervisorSections.AGENTS]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.SUPERVISOR}.sections.${SupervisorSections.AGENTS}`,
+    },
+    [SupervisorSections.ACTIVE_CALLS]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.SUPERVISOR}.sections.${SupervisorSections.ACTIVE_CALLS}`,
+    },
+  },
+  [WebitelApplications.ADMIN]: {
+    _enabled: value,
+    _locale: `WebitelApplications.${WebitelApplications.ADMIN}.name`,
+    [AdminSections.LICENSE]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSections.LICENSE}`,
+    },
+    [AdminSections.USERS]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSections.USERS}`,
+    },
+    [AdminSections.DEVICES]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSections.DEVICES}`,
+    },
+    [AdminSections.FLOW]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSections.FLOW}`,
+    },
+    [AdminSections.DIALPLAN]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSections.DIALPLAN}`,
+    },
+    [AdminSections.GATEWAYS]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSections.GATEWAYS}`,
+    },
+    [AdminSections.CHAT_GATEWAYS]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSections.CHAT_GATEWAYS}`,
+    },
+    [AdminSections.SKILLS]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSections.SKILLS}`,
+    },
+    [AdminSections.BUCKETS]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSections.BUCKETS}`,
+    },
+    [AdminSections.BLACKLIST]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSections.BLACKLIST}`,
+    },
+    [AdminSections.REGIONS]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSections.REGIONS}`,
+    },
+    [AdminSections.CALENDARS]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSections.CALENDARS}`,
+    },
+    [AdminSections.COMMUNICATIONS]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSections.COMMUNICATIONS}`,
+    },
+    [AdminSections.PAUSE_CAUSE]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSections.PAUSE_CAUSE}`,
+    },
+    [AdminSections.MEDIA]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSections.MEDIA}`,
+    },
+    [AdminSections.AGENTS]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSections.AGENTS}`,
+    },
+    [AdminSections.TEAMS]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSections.TEAMS}`,
+    },
+    [AdminSections.RESOURCES]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSections.RESOURCES}`,
+    },
+    [AdminSections.RESOURCE_GROUPS]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSections.RESOURCE_GROUPS}`,
+    },
+    [AdminSections.QUEUES]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSections.QUEUES}`,
+    },
+    [AdminSections.STORAGE]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSections.STORAGE}`,
+    },
+    [AdminSections.ROLES]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSections.ROLES}`,
+    },
+    [AdminSections.OBJECTS]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSections.OBJECTS}`,
+    },
+  },
+});
+
+/**
+ */
+export default class ApplicationsAccess {
+  // value param could be passed to set same value for all options
+  constructor({ access, value } = { value: true }) {
+    /* if access, deeply merge with falsy values schema
+     if no access, "not configured => full permissions" */
+    this.access = access ? ApplicationsAccess.restore(access) : applicationsAccess(value);
+  }
+
+  getAccess() {
+    return this.access;
+  }
+
+  // minify schema for API sending
+  static minify(access) {
+    const rmEmptyKeys = (obj) => {
+      Object.keys(obj).forEach((key) => {
+        // eslint-disable-next-line no-param-reassign
+        if (!obj[key] || key === '_locale') delete obj[key];
+        if (typeof obj[key] === 'object') {
+          rmEmptyKeys(obj[key]);
+          // eslint-disable-next-line no-param-reassign
+          if (!Object.keys(obj[key]).length) delete obj[key];
+        }
+      });
+      return obj;
+    };
+    return rmEmptyKeys(deepCopy(access));
+  }
+
+  // restore minified schema from API response
+  static restore(access) {
+    return deepmerge(applicationsAccess(false), access);
+    // return deepmerge(access, applicationsAccess(false));
+  }
+}

package/src/modules/Userinfo/components/__tests__/auth.spec.js

@@ -0,0 +1,57 @@
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import Vuex from 'vuex';
+import VueRouter from 'vue-router';
+import JSDOM from 'jsdom';
+import authAPI from '../../api/auth';
+import userinfoAPI from '../../api/userinfo';
+import Auth from '../the-auth.vue';
+import UserinfoStoreModule from '../../store/UserinfoStoreModule';
+
+import '../../../../../tests/mocks/localStorageMock';
+
+localStorage.setItem('access-token', 'jest');
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+localVue.use(VueRouter);
+
+authAPI.setToken = jest.fn();
+userinfoAPI.getSession = jest.fn(() => ({}));
+userinfoAPI.getApplicationsAccess = jest.fn(() => ({}));
+
+describe('Auth', () => {
+  let store;
+  let wrapper;
+  global.window = new JSDOM.JSDOM().window;
+  const router = new VueRouter();
+  router.replace = jest.fn();
+
+  const userinfo = new UserinfoStoreModule().getModule();
+  beforeEach(() => {
+    store = new Vuex.Store({
+      modules: { userinfo },
+    });
+
+    wrapper = shallowMount(Auth, {
+      localVue,
+      store,
+      router,
+    });
+  });
+
+  it('renders a component', () => {
+    expect(wrapper.classes('auth-wrap')).toBe(true);
+  });
+
+  it('sets token, gets session and opens app after auth token message emit', async (done) => {
+    const accessToken = 'hello there';
+    window.postMessage({ accessToken }, '*');
+    await setTimeout(() => {
+      expect(authAPI.setToken).toHaveBeenCalledWith(accessToken);
+      expect(userinfoAPI.getSession).toHaveBeenCalled();
+      expect(userinfoAPI.getApplicationsAccess).toHaveBeenCalled();
+      expect(router.replace).toHaveBeenCalled();
+      done();
+    }, 100);
+  });
+});

package/src/modules/Userinfo/components/the-auth.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="auth-wrap">
+    <div v-show="!isLoaded" class="auth-loader">
+      <wt-loader/>
+    </div>
+    <iframe
+      class="auth"
+      :src="authURL"
+      @load="isLoaded = true"
+    >
+      <p>Your browser does not support iframes.</p>
+    </iframe>
+  </div>
+</template>
+
+<script>
+import AuthAPI from '../api/auth';
+
+const authURL = process.env.VUE_APP_AUTH_MODULE_URL;
+
+export default {
+  name: 'auth',
+  props: {
+    namespace: {
+      type: String,
+      default: 'userinfo',
+    },
+  },
+  data: () => ({
+    authURL,
+    isLoaded: false,
+  }),
+
+  mounted() {
+    window.addEventListener('message', this.authMessageHandler, false);
+  },
+  destroyed() {
+    window.removeEventListener('message', this.authMessageHandler, false);
+  },
+
+  methods: {
+    openSession(payload) {
+      return this.$store.dispatch(`${this.namespace}/OPEN_SESSION`, payload);
+    },
+    async authMessageHandler(event) {
+      if (event.data.accessToken) {
+        // eslint-disable-next-line import/no-named-as-default-member
+        await AuthAPI.setToken(event.data.accessToken);
+        await this.openSession();
+        await this.$router.replace('/');
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.auth-wrap {
+  position: relative;
+  height: 100vh;
+  width: 100vw;
+
+  .wt-loader {
+    position: absolute;
+    top: 50%;
+    right: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .auth {
+    height: 100%;
+    width: 100%;
+  }
+}
+</style>

package/src/modules/Userinfo/store/UserinfoStoreModule.js

@@ -0,0 +1,112 @@
+import userinfo from '../api/userinfo';
+import ApplicationsAccess from '../classes/ApplicationsAccess';
+import BaseStoreModule from '../../../store/BaseStoreModules/BaseStoreModule';
+
+const defaultState = () => ({
+  isLoading: true,
+  domainId: 0,
+  name: '',
+  username: '',
+  account: '',
+  userId: 0,
+  scope: {},
+  permissions: {},
+  roles: [],
+  license: [],
+  access: {},
+  language: localStorage.getItem('lang'),
+});
+
+export default class UserinfoStoreModule extends BaseStoreModule {
+  state = {
+    ...defaultState(),
+  }
+
+  getters = {
+    THIS_APP: (state) => state.thisApp,
+    // if no access[app] => accessed by default
+    CHECK_APP_ACCESS: (state) => (app) => !state.access[app] || state.access[app]?._enabled,
+    CHECK_OBJECT_ACCESS: (state, getters) => ({ name, route }) => {
+      if (!state.access[getters.THIS_APP] || !state.access[getters.THIS_APP]._enabled) return false;
+      if (route) return getters.CHECK_OBJECT_ACCESS_BY_ROUTE(route);
+      return getters.CHECK_OBJECT_ACCESS_BY_NAME(name);
+    },
+    CHECK_OBJECT_ACCESS_BY_NAME: (state, getters) => (name) => (
+      state.access[getters.THIS_APP][name]?._enabled
+    ),
+    CHECK_OBJECT_ACCESS_BY_ROUTE: (state, getters) => (route) => {
+      const accessKey = Object.keys(state.access[getters.THIS_APP]).find((object) => route.name.includes(object));
+      return state.access[getters.THIS_APP][accessKey]?._enabled;
+    },
+  }
+
+  actions = {
+    BEFORE_OPEN_SESSION_HOOK: () => {},
+    AFTER_OPEN_SESSION_HOOK: () => {},
+    CONVERT_USER_SCOPE: (context, scope) => scope,
+    CONVERT_USER_PERMISSIONS: (context, permissions) => permissions,
+
+    OPEN_SESSION: async (context) => {
+      await context.dispatch('BEFORE_OPEN_SESSION_HOOK');
+      // !!! it should be checked in router.js beforeEach hook
+      // if (!localStorage.getItem('access-token')) {
+      //   context.dispatch('REDIRECT_TO_AUTH');
+      //   throw new Error('No access-token in localStorage');
+      // }
+      const session = await userinfo.getSession();
+      await context.dispatch('SET_SESSION', session);
+      const access = await userinfo.getApplicationsAccess();
+      await context.dispatch('SET_APPLICATIONS_ACCESS', new ApplicationsAccess({ access }).getAccess());
+      await context.dispatch('AFTER_OPEN_SESSION_HOOK');
+    },
+    SET_SESSION: async (context, _session) => {
+      const defaultSession = {
+        domainId: 0,
+        username: '',
+        userId: 0,
+        scope: [],
+        roles: [],
+        license: [],
+      };
+
+      try {
+        await context.dispatch('RESET_STATE');
+        const session = { ...defaultSession, ..._session };
+        const scope = await context.dispatch('CONVERT_USER_SCOPE', session.scope);
+        const permissions = await context.dispatch('CONVERT_USER_PERMISSIONS', session.permissions);
+        context.commit('SET_SESSION', { ...session, scope, permissions });
+        await context.dispatch('SET_LOADING', false);
+      } catch (err) {
+        throw err;
+      }
+    },
+
+    SET_APPLICATIONS_ACCESS: (context, access) => context.commit('SET_APPLICATIONS_ACCESS', access),
+
+    SET_LOADING: (context, isLoading) => {
+      context.commit('SET_LOADING', isLoading);
+    },
+
+    RESET_STATE: (context) => {
+      context.commit('RESET_STATE');
+    },
+  }
+
+  mutations = {
+    SET_SESSION: (state, session) => {
+      Object.assign(state, session);
+    },
+
+    SET_APPLICATIONS_ACCESS: (state, access) => {
+      state.access = access;
+    },
+
+    SET_LOADING: (state, isLoading) => {
+      state.isLoading = isLoading;
+    },
+
+    RESET_STATE: (state) => {
+      Object.assign(state, defaultState());
+    },
+  }
+}

package/src/scripts/__tests__/caseConverters.spec.js

@@ -0,0 +1,65 @@
+import {
+  camelToKebab,
+  camelToSnake,
+  kebabToCamel,
+  objCamelToSnake,
+  objSnakeToCamel,
+  snakeToCamel,
+} from '../caseConverters';
+
+describe('Case converters', () => {
+  it('Camel-Kebab', () => {
+    const camelStr = 'camelToKebab';
+    const kebabStr = 'camel-to-kebab';
+    expect(camelToKebab(camelStr)).toBe(kebabStr);
+    expect(kebabToCamel(kebabStr)).toBe(camelStr);
+  });
+
+  it('Camel-Snake', () => {
+    const camelStr = 'camelToSnake';
+    const snakeStr = 'camel_to_snake';
+    expect(camelToSnake(camelStr)).toBe(snakeStr);
+    expect(snakeToCamel(snakeStr)).toBe(camelStr);
+  });
+
+  it('Camel <- Snake skips first char "_"', () => {
+    const camelStr = '_camelToSnake';
+    const snakeStr = '_camel_to_snake';
+    expect(snakeToCamel(snakeStr)).toBe(camelStr);
+  });
+
+  it('Camel-Snake Objects', () => {
+    const camelObj = { camelToSnake: { camelToSnake: null, arr: [10] } };
+    const snakeObj = { camel_to_snake: { camel_to_snake: null, arr: [10] } };
+    expect(objCamelToSnake(camelObj)).toEqual(snakeObj);
+    expect(objSnakeToCamel(snakeObj)).toEqual(camelObj);
+  });
+
+  it('Camel-Snake Objects: NULL VALUES', () => {
+    const camelObj = null;
+    const snakeObj = null;
+    expect(objCamelToSnake(camelObj)).toEqual(snakeObj);
+    expect(objSnakeToCamel(snakeObj)).toEqual(camelObj);
+  });
+
+  it('Camel-Snake Arrays', () => {
+    const camelArr = ['camelToSnake', { camelToSnake: { camelToSnake: null } }];
+    const snakeArr = ['camel_to_snake', { camel_to_snake: { camel_to_snake: null } }];
+    expect(objCamelToSnake(camelArr)).toEqual(snakeArr);
+    expect(objSnakeToCamel(snakeArr)).toEqual(camelArr);
+  });
+
+  it('Camel-to-Snake Object skips passed keys', () => {
+    const skippedKeys = ['skippedKey'];
+    const camelArr = { camelToSnake: null, skippedKey: null };
+    const snakeArr = { camel_to_snake: null, skippedKey: null };
+    expect(objCamelToSnake(camelArr, skippedKeys)).toEqual(snakeArr);
+  });
+
+  it('Snake-to-Camel Object skips passed keys', () => {
+    const skippedKeys = ['skipped_key'];
+    const camelArr = { camelToSnake: null, skipped_key: null };
+    const snakeArr = { camel_to_snake: null, skipped_key: null };
+    expect(objSnakeToCamel(snakeArr, skippedKeys)).toEqual(camelArr);
+  });
+});

package/src/scripts/__tests__/convertDuration.spec.js

@@ -0,0 +1,21 @@
+import convertDuration from '../convertDuration';
+
+describe('Case converters', () => {
+  it('duration from sec value', () => {
+    const time = 111;
+    const duration = '00:01:51';
+    expect(convertDuration(time)).toBe(duration);
+  });
+
+  it('duration from sec string value', () => {
+    const time = '61';
+    const duration = '00:01:01';
+    expect(convertDuration(time)).toBe(duration);
+  });
+
+  it('duration from false value', () => {
+    const time = null;
+    const duration = '00:00:00';
+    expect(convertDuration(time)).toBe(duration);
+  });
+});

package/src/scripts/__tests__/debounce.spec.js

@@ -0,0 +1,15 @@
+import debounce from '../debounce';
+
+describe('debounce', () => {
+  it('debounces call', async (done) => {
+    let isFnCalled = false;
+    let fn = () => { isFnCalled = true; };
+    fn = debounce(fn, 50);
+    fn();
+    expect(isFnCalled).toBeFalsy();
+    await setTimeout(() => {
+      expect(isFnCalled).toBeTruthy();
+      done();
+    }, 100);
+  });
+});

package/src/scripts/__tests__/editProxy.spec.js

@@ -0,0 +1,9 @@
+import editProxy from '../editProxy';
+
+describe('editProxy', () => {
+  it('correctly updates _dirty prop at object property change', () => {
+    const object = editProxy({ value: 'jest', _dirty: false });
+    object.value = 'upd jest';
+    expect(object._dirty).toBe(true);
+  });
+});

package/src/scripts/__tests__/isEmpty.spec.js

@@ -0,0 +1,16 @@
+import isEmpty from '../isEmpty';
+
+describe('isEmpty', () => {
+  it('falsy cases (not empty)', () => {
+    expect(isEmpty(['jest'])).toBeFalsy();
+    expect(isEmpty({ jest: 'jest' })).toBeFalsy();
+    expect(isEmpty(1)).toBeFalsy();
+    expect(isEmpty('jest')).toBeFalsy();
+  });
+  it('truthy cases (empty)', () => {
+    expect(isEmpty([])).toBeTruthy();
+    expect(isEmpty({})).toBeTruthy();
+    expect(isEmpty(0)).toBeTruthy();
+    expect(isEmpty('')).toBeTruthy();
+  });
+});

package/src/scripts/__tests__/prettifyFileSize.spec.js

@@ -0,0 +1,18 @@
+import prettifyFileSize from '../prettifyFileSize';
+
+describe('prettifyFileSize', () => {
+  it('prettifies bytes to kb\'s', () => {
+    const size = 1025;
+    expect(prettifyFileSize(size)).toBe('1 Kb');
+  });
+
+  it('prettifies bytes to mb\'s', () => {
+    const size = 1205 ** 2;
+    expect(prettifyFileSize(size)).toBe('1.38 Mb');
+  });
+
+  it('handles 0 size', () => {
+    const size = 0;
+    expect(prettifyFileSize(size)).toBe('0');
+  });
+});

package/src/scripts/__tests__/prettifyTime.spec.js

@@ -0,0 +1,18 @@
+import prettifyTime from '../prettifyTime';
+
+describe('prettifyTime', () => {
+  it('prettifies date-format time', () => {
+    const time = new Date(0);
+    expect(prettifyTime(time)).toBeTruthy();
+  });
+
+  it('prettifies number-format time', () => {
+    const time = 0;
+    expect(prettifyTime(time)).toBeTruthy();
+  });
+
+  it('prettifies string-format time', () => {
+    const time = '0';
+    expect(prettifyTime(time)).toBeTruthy();
+  });
+});

package/src/scripts/__tests__/preventHiddenPageCallsDecorator.spec.js

@@ -0,0 +1,16 @@
+import preventHiddenPageCallsDecorator from '../preventHiddenPageCallsDecorator';
+
+describe('preventHiddenPageCallsDecorator', () => {
+  it('prevents call on hidden page', () => {
+    let isFnCalled = false;
+    let fn = () => { isFnCalled = true; };
+    fn = preventHiddenPageCallsDecorator(fn, 50);
+    Object.defineProperty(document, 'hidden', {
+      configurable: true,
+      get() { return true; },
+    });
+    expect(isFnCalled).toBeFalsy();
+    fn();
+    expect(isFnCalled).toBeFalsy();
+  });
+});

package/src/scripts/__tests__/sortQueryAdapters.spec.js

@@ -0,0 +1,12 @@
+import * as sortQueryAdapters from '../sortQueryAdapters';
+
+test('sortToQueryAdapter', () => {
+  expect(sortQueryAdapters.sortToQueryAdapter('asc')).toBe('+');
+  expect(sortQueryAdapters.sortToQueryAdapter('desc')).toBe('-');
+  expect(sortQueryAdapters.sortToQueryAdapter(null)).toBe('');
+});
+test('queryToSortAdapter', () => {
+  expect(sortQueryAdapters.queryToSortAdapter('+')).toBe('asc');
+  expect(sortQueryAdapters.queryToSortAdapter('-')).toBe('desc');
+  expect(sortQueryAdapters.queryToSortAdapter('')).toBe(null);
+});