@webitel/ui-sdk 24.12.95 → 24.12.96

package/src/modules/Userinfo/v2/mappings/mappings.ts

@@ -0,0 +1,161 @@
+import invert from 'lodash/fp/invert';
+
+import {
+  AdminSections,
+  AuditorSections,
+  CrmSections,
+  CrudAction,
+  SupervisorSections,
+  WtApplication,
+  WtObject,
+} from '../../../../enums';
+import { CrudGlobalAction, ScopeClass } from '../enums';
+
+export const mapGlobalActionToCrudAction = {
+  [CrudGlobalAction.Add]: CrudAction.Create,
+  [CrudGlobalAction.Read]: CrudAction.Read,
+  [CrudGlobalAction.Write]: CrudAction.Update,
+  [CrudGlobalAction.Delete]: CrudAction.Delete,
+};
+
+export const mapCrudActionToGlobalAction = invert(mapGlobalActionToCrudAction);
+
+/* one-to-many */
+export const mapScopeClassToWtObjects: Record<ScopeClass, WtObject[]> = {
+  [ScopeClass.Users]: [WtObject.User],
+  [ScopeClass.Devices]: [WtObject.Device],
+  [ScopeClass.Schema]: [WtObject.Flow],
+  [ScopeClass.AcrRouting]: [WtObject.Dialplan],
+  [ScopeClass.Gateways]: [WtObject.Gateway],
+  [ScopeClass.AcrChatPlan]: [WtObject.Chatplan],
+  [ScopeClass.Chats]: [WtObject.ChatGateway],
+  [ScopeClass.Dictionaries]: [
+    WtObject.Region,
+    WtObject.Bucket,
+    WtObject.Communication,
+    WtObject.PauseCause,
+  ],
+  [ScopeClass.List]: [WtObject.Blacklist],
+  [ScopeClass.Skills]: [WtObject.Skill],
+  [ScopeClass.Calendars]: [WtObject.Calendar],
+  [ScopeClass.MediaFile]: [WtObject.Media],
+  [ScopeClass.Agent]: [WtObject.Agent],
+  [ScopeClass.Queue]: [WtObject.Queue, WtObject.Member],
+  [ScopeClass.ResourceGroup]: [WtObject.ResourceGroup],
+  [ScopeClass.Resource]: [WtObject.Resource],
+  [ScopeClass.Team]: [WtObject.Team],
+  [ScopeClass.StorageProfile]: [WtObject.Storage],
+  [ScopeClass.CognitiveProfile]: [WtObject.CognitiveProfile],
+  [ScopeClass.EmailProfile]: [WtObject.EmailProfile],
+  [ScopeClass.SingleSignOn]: [WtObject.SingleSignOn],
+  [ScopeClass.ImportTemplate]: [WtObject.ImportCsv],
+  [ScopeClass.Trigger]: [WtObject.Trigger],
+  [ScopeClass.Role]: [WtObject.Role],
+  [ScopeClass.Contacts]: [WtObject.Contact],
+  [ScopeClass.Logger]: [WtObject.Logger], // Change log in Admin
+  [ScopeClass.Calls]: [WtObject.Call], // Call history
+  [ScopeClass.RecordFile]: [WtObject.RecordFile], // Call history
+  [ScopeClass.ContactGroups]: [WtObject.ContactGroup], //CRM
+  [ScopeClass.ChatBots]: [WtObject.ChatBot], // routing cht_gateway
+  [ScopeClass.Cases]: [WtObject.Cases], // CRM
+  [ScopeClass.CaseComments]: [WtObject.CaseComment],
+};
+
+export const mapScopeClassAccessTokenToCrudAction = {
+  r: CrudAction.Read,
+  w: CrudAction.Update,
+  d: CrudAction.Delete,
+  x: CrudAction.Create,
+};
+
+export const mapCrudActionToScopeClassAccessToken = invert(
+  mapScopeClassAccessTokenToCrudAction,
+);
+
+type UiSection =
+  | AdminSections
+  | AuditorSections
+  | CrmSections
+  | SupervisorSections;
+export const mapWtObjectToUiSection: Record<
+  WtApplication,
+  Partial<Record<WtObject, UiSection>>
+> = {
+  // if we don`t need empty objects we can use  Partial<Record<WtApplication, Partial<Record<WtObject, UiSection>>>>
+  [WtApplication.Agent]: {},
+  [WtApplication.History]: {},
+  [WtApplication.Analytics]: {},
+
+  // Admin sections
+  [WtApplication.Admin]: {
+    [WtObject.User]: AdminSections.Users,
+    [WtObject.Agent]: AdminSections.Agents,
+    [WtObject.License]: AdminSections.License,
+    [WtObject.Device]: AdminSections.Devices,
+    [WtObject.Flow]: AdminSections.Flow,
+    [WtObject.Dialplan]: AdminSections.Dialplan,
+    [WtObject.Gateway]: AdminSections.Gateways,
+    [WtObject.Chatplan]: AdminSections.Chatplan,
+    [WtObject.ChatGateway]: AdminSections.ChatGateways,
+    [WtObject.Skill]: AdminSections.Skills,
+    [WtObject.Bucket]: AdminSections.Buckets,
+    [WtObject.Blacklist]: AdminSections.Blacklist,
+    [WtObject.Region]: AdminSections.Regions,
+    [WtObject.Calendar]: AdminSections.Calendars,
+    [WtObject.Communication]: AdminSections.Communications,
+    [WtObject.PauseCause]: AdminSections.PauseCause,
+    [WtObject.Media]: AdminSections.Media,
+    [WtObject.Team]: AdminSections.Teams,
+    [WtObject.Resource]: AdminSections.Resources,
+    [WtObject.ResourceGroup]: AdminSections.ResourceGroups,
+    [WtObject.Queue]: AdminSections.Queues,
+    [WtObject.Storage]: AdminSections.Storage,
+    [WtObject.CognitiveProfile]: AdminSections.CognitiveProfiles,
+    [WtObject.EmailProfile]: AdminSections.EmailProfiles,
+    [WtObject.ImportCsv]: AdminSections.ImportCsv,
+    [WtObject.Trigger]: AdminSections.Triggers,
+    [WtObject.Role]: AdminSections.Roles,
+    [WtObject.Object]: AdminSections.Objects,
+    [WtObject.ChangeLog]: AdminSections.Changelogs,
+    [WtObject.Configuration]: AdminSections.Configuration,
+    [WtObject.GlobalVariable]: AdminSections.GlobalVariables,
+    [WtObject.ShiftTemplate]: AdminSections.ShiftTemplates,
+    [WtObject.PauseTemplate]: AdminSections.PauseTemplates,
+    [WtObject.WorkingCondition]: AdminSections.WorkingConditions,
+    [WtObject.Member]: AdminSections.Members,
+  },
+
+  // Auditor sections
+  [WtApplication.Audit]: {
+    [WtObject.Scorecard]: AuditorSections.Scorecards,
+  },
+
+  // Crm sections
+  [WtApplication.Crm]: {
+    [WtObject.Contact]: CrmSections.Contacts,
+    [WtObject.Cases]: CrmSections.Cases,
+    [WtObject.Slas]: CrmSections.Slas,
+    [WtObject.ServiceCatalog]: CrmSections.ServiceCatalogs,
+    [WtObject.CaseSource]: CrmSections.CaseSources,
+    [WtObject.CloseReasonGroup]: CrmSections.CloseReasonGroups,
+    [WtObject.Priorities]: CrmSections.Priorities,
+    [WtObject.Status]: CrmSections.Statuses,
+    [WtObject.Source]: CrmSections.Sources,
+    [WtObject.ContactGroup]: CrmSections.ContactGroups,
+    [WtObject.CustomLookup]: CrmSections.CustomLookups,
+  },
+
+  // Supervisor sections
+  [WtApplication.Supervisor]: {
+    [WtObject.Queue]: SupervisorSections.Queues,
+    [WtObject.Agent]: SupervisorSections.Agents,
+    [WtObject.Communication]: SupervisorSections.ActiveCalls,
+  },
+};
+
+export const mapUiSectionToWtObject = invert(mapWtObjectToUiSection);
+
+export const AdminSectionsValues = invert(AdminSections);
+export const AuditorSectionsValues = invert(AuditorSections);
+export const CrmSectionsValues = invert(CrmSections);
+export const SupervisorSectionsValues = invert(SupervisorSections);

package/src/modules/Userinfo/v2/scripts/utils.ts

@@ -0,0 +1,123 @@
+import { CrudAction, WtApplication, WtObject } from '../../../../enums';
+import { _wtUiLog as wtlog } from '../../../../scripts/logger';
+import {
+  AdminSectionsValues,
+  AuditorSectionsValues,
+  CrmSectionsValues,
+  mapGlobalActionToCrudAction,
+  mapScopeClassAccessTokenToCrudAction,
+  mapScopeClassToWtObjects,
+  mapUiSectionToWtObject,
+  mapWtObjectToUiSection,
+  SupervisorSectionsValues,
+} from '../mappings/mappings';
+import type {
+  AppVisibilityMap,
+  GlobalAccessApiResponseItem,
+  GlobalAction,
+  GlobalActionAccessMap,
+  ScopeAccessApiResponseItem,
+  ScopeAccessMap,
+  SectionVisibilityMap,
+  UiSection,
+  VisibilityAccess,
+} from '../types/UserAccess.d.ts';
+
+/**
+ * @internal
+ * @description
+ * backend -> frontend
+ * */
+const castGlobalActionToCrudAction = (
+  globalAction: GlobalAction,
+): CrudAction | null => {
+  return mapGlobalActionToCrudAction[globalAction] || null;
+};
+
+export const makeGlobalAccessMap = (
+  rawGlobalAccess: GlobalAccessApiResponseItem[],
+): GlobalActionAccessMap => {
+  return rawGlobalAccess.reduce((map, { id }) => {
+    const key = castGlobalActionToCrudAction(id) || id;
+    return map.set(key, true);
+  }, new Map());
+};
+
+export const makeScopeAccessMap = (
+  rawScope: ScopeAccessApiResponseItem[],
+): ScopeAccessMap => {
+  const map = new Map();
+
+  rawScope.forEach(({ class: scopeClass, access: scopeAccess }) => {
+    const access = scopeAccess.split('').reduce((accessMap, token) => {
+      accessMap.set(mapScopeClassAccessTokenToCrudAction[token], true);
+      return accessMap;
+    }, new Map());
+
+    const scopeClassObjects = mapScopeClassToWtObjects[scopeClass];
+
+    if (!scopeClassObjects) {
+      wtlog.error({ module: 'modules/userinfo' })(
+        'Unknown scope class to convert to WtObject:',
+        scopeClass,
+      );
+      map.set(scopeClass, access);
+    } else {
+      scopeClassObjects.forEach((object) => {
+        map.set(object, access);
+      });
+    }
+  });
+
+  return map;
+};
+
+export const makeAppVisibilityMap = (
+  rawVisibility: VisibilityAccess,
+): AppVisibilityMap => {
+  const map = new Map();
+  Object.entries(rawVisibility).forEach(([app, visibility]) => {
+    map.set(app, visibility._enabled);
+  });
+  return map;
+};
+
+export const makeSectionVisibilityMap = (
+  rawVisibility: VisibilityAccess,
+): SectionVisibilityMap => {
+  const map = new Map();
+
+  Object.values(rawVisibility).forEach((appSectionsVisibility) => {
+    Object.entries(appSectionsVisibility).forEach(([section, visibility]) => {
+      if (section.startsWith('_')) return map; // skip private fields
+      map.set(section, visibility._enabled);
+    });
+  });
+
+  return map;
+};
+
+export const castUiSectionToWtObject = (section: UiSection): WtObject => {
+  return mapUiSectionToWtObject[section];
+};
+
+export const castWtObjectToUiSection = (object: WtObject): UiSection => {
+  return mapWtObjectToUiSection[object];
+};
+
+export const getWtAppByUiSection = (section: UiSection): WtApplication => {
+  /* use inverted maps because UiSection is the enum value, not key */
+  if (AdminSectionsValues[section]) {
+    return WtApplication.Admin;
+  }
+  if (AuditorSectionsValues[section]) {
+    return WtApplication.Audit;
+  }
+  if (CrmSectionsValues[section]) {
+    return WtApplication.Crm;
+  }
+  if (SupervisorSectionsValues[section]) {
+    return WtApplication.Supervisor;
+  }
+  wtlog.error({ module: 'modules/userinfo' })('Unknown section:', section);
+};

package/src/modules/Userinfo/v2/stores/__tests__/accessStore.spec.ts

@@ -0,0 +1,136 @@
+import {createPinia, setActivePinia, type StoreDefinition} from 'pinia';
+import { beforeEach, describe, expect,it } from 'vitest';
+import {createApp, h} from "vue";
+import {createRouter, createWebHistory, type Router} from "vue-router";
+
+import {AdminSections, WtApplication, WtObject} from "../../../../../enums";
+import {CrudGlobalAction} from "../../enums";
+import { createUserAccessStore } from '../accessStore';
+
+describe('AccessStore', () => {
+  let router: Router;
+  let useAccessStore: StoreDefinition;
+
+  beforeEach(async () => {
+    router = createRouter({
+      history: createWebHistory(),
+      routes: [
+        {
+          path: '/',
+          name: 'home',
+          component: () => h('div', 'home'),
+        },
+        {
+          path: '/users',
+          name: 'users',
+          component: () => h('div', 'users'),
+          meta: {
+            WtObject: WtObject.User,
+            UiSection: AdminSections.Users,
+          },
+        },
+      ],
+    });
+
+    const pinia = createPinia();
+    const app = createApp({});
+    app.use(router);
+    app.use(pinia)
+    setActivePinia(pinia);
+    useAccessStore = createUserAccessStore();
+  });
+
+  it('restricts route if no access', async () => {
+    const { initialize, routeAccessGuard } = useAccessStore();
+    router.beforeEach(routeAccessGuard);
+
+    initialize({
+      permissions: [],
+      scope: [],
+      access: {},
+    });
+
+    await router.push({ name: 'users' });
+
+    /* because guard should not allow to navigate
+    there since we pass empty permissions */
+    expect(router.currentRoute.value.name).not.toBe('users');
+  });
+
+  it('allows route access if has global permission', async () => {
+    const { initialize, routeAccessGuard } = useAccessStore();
+    router.beforeEach(routeAccessGuard);
+
+    initialize({
+      permissions: [{ id: CrudGlobalAction.Read }],
+      scope: [],
+      access: {},
+    });
+
+    await router.push({ name: 'users' });
+    expect(router.currentRoute.value.name).toBe('users');
+  });
+
+  it('allows route access if has scope permission, app visibility and section visibility', async () => {
+    const { initialize, routeAccessGuard } = useAccessStore();
+    router.beforeEach(routeAccessGuard);
+
+    initialize({
+      permissions: [],
+      scope: [{ class: 'users', access: 'r' }],
+      access: {
+        [WtApplication.Admin]: {
+          _enabled: true,
+            [AdminSections.Users]: {
+                _enabled: true,
+            },
+        },
+      },
+    });
+
+    await router.push({ name: 'users' });
+    expect(router.currentRoute.value.name).toBe('users');
+  });
+
+  it('restricts route access if has scope permission, app visibility, but no section visibility', async () => {
+    const { initialize, routeAccessGuard } = useAccessStore();
+    router.beforeEach(routeAccessGuard);
+
+    initialize({
+      permissions: [],
+      scope: [{ class: 'users', access: 'r' }],
+      access: {
+        [WtApplication.Admin]: {
+          _enabled: true,
+            [AdminSections.Users]: {
+                _enabled: false,
+            },
+        },
+      },
+    });
+
+    await router.push({ name: 'users' });
+    expect(router.currentRoute.value.name).not.toBe('users');
+  });
+
+  it('restricts route access if has scope permission, section visibility but no app visibility', async () => {
+    const { initialize, routeAccessGuard } = useAccessStore();
+    router.beforeEach(routeAccessGuard);
+
+    initialize({
+      permissions: [],
+      scope: [{ class: 'users', access: 'r' }],
+      access: {
+        [WtApplication.Admin]: {
+          _enabled: false,
+            [AdminSections.Users]: {
+                _enabled: true,
+            },
+        },
+      },
+    });
+
+    await router.push({ name: 'users' });
+    expect(router.currentRoute.value.name).not.toBe('users');
+  });
+});

package/src/modules/Userinfo/v2/stores/accessStore.ts

@@ -0,0 +1,131 @@
+import { defineStore } from 'pinia';
+import { NavigationGuard } from 'vue-router';
+
+import {
+  CrudAction,
+  type WtApplication,
+  type WtObject,
+} from '../../../../enums';
+import type { SpecialGlobalAction } from '../enums';
+import {
+  getWtAppByUiSection,
+  makeAppVisibilityMap,
+  makeGlobalAccessMap,
+  makeScopeAccessMap,
+  makeSectionVisibilityMap,
+} from '../scripts/utils';
+import type {
+  AppVisibilityMap,
+  CreateUserAccessStoreConfig,
+  CreateUserAccessStoreRawAccess,
+  GlobalActionAccessMap,
+  ScopeAccessMap,
+  SectionVisibilityMap,
+  UiSection,
+  UserAccessStore,
+} from '../types/UserAccess.d.ts';
+
+export const createUserAccessStore = ({
+  namespace = 'userinfo',
+}: CreateUserAccessStoreConfig = {}) => {
+  return defineStore(`${namespace}/access`, (): UserAccessStore => {
+    let globalAccess: GlobalActionAccessMap = new Map();
+
+    let scopeAccess: ScopeAccessMap = new Map();
+
+    let appVisibilityAccess: AppVisibilityMap = new Map();
+
+    let sectionVisibilityAccess: SectionVisibilityMap = new Map();
+
+    const hasAccess = (
+      action: CrudAction | SpecialGlobalAction,
+      object?: WtObject,
+    ) => {
+      const allowGlobalAccess = globalAccess.get(action);
+      if (allowGlobalAccess) return true;
+
+      const allowScopeAccess =
+        object && scopeAccess.get(object)?.get(action as CrudAction);
+      if (allowScopeAccess) return true;
+
+      return false;
+    };
+
+    const hasReadAccess = (object?: WtObject) => {
+      return hasAccess(CrudAction.Read, object);
+    };
+
+    const hasCreateAccess = (object?: WtObject) => {
+      return hasAccess(CrudAction.Create, object);
+    };
+
+    const hasUpdateAccess = (object?: WtObject) => {
+      return hasAccess(CrudAction.Update, object);
+    };
+
+    const hasDeleteAccess = (object?: WtObject) => {
+      return hasAccess(CrudAction.Delete, object);
+    };
+
+    const hasApplicationVisibility = (app: WtApplication) => {
+      return hasReadAccess() || appVisibilityAccess.get(app);
+    };
+
+    const hasSectionVisibility = (section: UiSection, object: WtObject) => {
+      const appOfSection = getWtAppByUiSection(section);
+      const objectOfSection = object; /*castUiSectionToWtObject(section)*/
+      const hasSectionVisibilityAccess = (section: UiSection) => {
+        return sectionVisibilityAccess.get(section);
+      };
+
+      const allowGlobalAccess = hasReadAccess();
+      if (allowGlobalAccess) return true;
+
+      const allowAppVisibility = hasApplicationVisibility(appOfSection);
+      const allowObjectAccess = hasReadAccess(objectOfSection);
+      const allowSectionVisibility = hasSectionVisibilityAccess(section);
+
+      return allowAppVisibility && allowObjectAccess && allowSectionVisibility;
+    };
+
+    const routeAccessGuard: NavigationGuard = (to) => {
+      /* find last because "matched" has top=>bottom routes order */
+      const uiSection = to.matched
+        .toReversed()
+        .find(({ meta }) => meta.UiSection)?.meta?.UiSection as UiSection;
+      /* find last because "matched" has top=>bottom routes order */
+      const wtObject = to.matched
+        .toReversed()
+        .find(({ meta }) => meta.UiSection)?.meta?.WtObject as WtObject;
+
+      if (uiSection && !hasSectionVisibility(uiSection, wtObject)) {
+        // return false;
+        return { path: '/access-denied' };
+      }
+
+      return true;
+    };
+
+    const initialize = ({
+      permissions: rawGlobalAccess,
+      scope: rawScopeAccess,
+      access: rawVisibilityAccess,
+    }: CreateUserAccessStoreRawAccess) => {
+      globalAccess = makeGlobalAccessMap(rawGlobalAccess);
+      scopeAccess = makeScopeAccessMap(rawScopeAccess);
+      appVisibilityAccess = makeAppVisibilityMap(rawVisibilityAccess);
+      sectionVisibilityAccess = makeSectionVisibilityMap(rawVisibilityAccess);
+    };
+
+    return {
+      initialize,
+
+      hasReadAccess,
+      hasCreateAccess,
+      hasUpdateAccess,
+      hasDeleteAccess,
+
+      routeAccessGuard,
+    };
+  });
+};

package/src/modules/Userinfo/v2/stores/userinfoStore.ts

@@ -0,0 +1,56 @@
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+
+import { getSession, getUiVisibilityAccess } from '../api/UserinfoAPI';
+import { createUserAccessStore } from './accessStore';
+
+export const createUserinfoStore = () => {
+  const namespace = 'userinfo';
+  const useAccessStore = createUserAccessStore({
+    namespace,
+  });
+
+  const store = defineStore(namespace, () => {
+    const accessStore = useAccessStore();
+    const {
+      hasReadAccess,
+      hasCreateAccess,
+      hasUpdateAccess,
+      hasDeleteAccess,
+      initialize: initializeAccessStore,
+      routeAccessGuard,
+    } = accessStore;
+
+    const userId = ref();
+
+    const initialize = async () => {
+      const { scope, permissions, ...userinfo } = await getSession();
+      const access = await getUiVisibilityAccess();
+
+      userId.value = userinfo.userId;
+
+      initializeAccessStore({
+        scope,
+        permissions,
+        access,
+      });
+    };
+
+    return {
+      userId,
+      initialize,
+
+      hasReadAccess,
+      hasCreateAccess,
+      hasUpdateAccess,
+      hasDeleteAccess,
+
+      routeAccessGuard,
+    };
+  });
+
+  // @ts-ignore
+  window._userinfoStore = store;
+
+  return store;
+};