@antscorp/antsomi-ui 1.3.5-beta.529 → 1.3.5-beta.530

package/es/components/organism/LeftMenu/components/common/ChildMenu/index.js

@@ -1,3 +1,4 @@
+var _a;
 // Libraries
 import React, { memo, useState } from 'react';
 import Icon from '@antscorp/icons';
@@ -21,11 +22,13 @@ import { useNavigatePath } from '../../../hooks';
 import { useDeepCompareEffect } from '@antscorp/antsomi-ui/es/hooks';
 // Contexts
 import { useLeftMenuContext } from '../../../contexts';
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
 const noDashboardItem = {
     key: 'no_dashboard',
-    label: 'No dashboard available',
+    label: 'Click Create to make a dashboard',
     disabled: true,
     icon: null,
+    style: { fontSize: '10px', color: (_a = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _a === void 0 ? void 0 : _a.bw8 },
 };
 const styles = {
     dropdownMenu: { width: '130px', padding: '8px 0' },
@@ -160,9 +163,9 @@ export const ChildMenu = memo(props => {
     const customMenuItems = (args) => {
         var _a;
         return (_a = args === null || args === void 0 ? void 0 : args.items) === null || _a === void 0 ? void 0 : _a.map(item => {
-            const { key, label, children, icon, logo_url, menu_item_path = null, menu_item_domain = null, options, disabled, optionCallback, } = item;
+            const { key, label, children, icon, logo_url, menu_item_path = null, menu_item_domain = null, options, disabled, style, optionCallback, } = item;
             const isOwnerDashboardKey = key === HOME_MENU_ITEMS.DASHBOARD.menu_item_code;
-            const renderLabel = () => (React.createElement(LabelWrapper, { gap: 10, align: "center", justify: "space-between" },
+            const renderLabel = () => (React.createElement(LabelWrapper, { gap: 10, align: "center", justify: "space-between", style: style },
                 React.createElement(LabelCustom, { ellipsis: { tooltip: label } }, label),
                 (options === null || options === void 0 ? void 0 : options.length) && !isRecommendation && (React.createElement(OptionDropdownWrapper, { align: "center" },
                     React.createElement(Dropdown, { menu: {

package/es/components/organism/LeftMenu/constants/variables.d.ts

@@ -8,6 +8,7 @@ export declare const APP_KEYS: {
     DATA: string;
     INSIGHTS: string;
     SETTINGS: string;
+    SHARE_ACCESS: string;
 };
 export declare const MENU_ITEM_TYPE: {
     APP: number;
@@ -40,3 +41,10 @@ export declare const SETTING_APP: {
         path: string;
     };
 };
+/** Some app in old menu permission is deprecated then we should remove */
+export declare const APP_EXCLUDED_KEYS: string[];
+/** Some app need to map app code to check duplicate permission_code */
+export declare const MAP_MENU_TO_PARENT_APP_CODE: {
+    DATA_SOURCE: string;
+    DF_DATA_SOURCE: string;
+};

package/es/components/organism/LeftMenu/constants/variables.js

@@ -7,6 +7,7 @@ export const APP_KEYS = {
     DATA: 'DATA',
     INSIGHTS: 'INSIGHT',
     SETTINGS: 'SETTING',
+    SHARE_ACCESS: 'SHARE_ACCESS',
 };
 export const MENU_ITEM_TYPE = {
     APP: 1,
@@ -52,3 +53,10 @@ export const SETTING_APP = {
         path: '/gen2/:networkId/:user_id/marketing-hub/destinations/:channelId',
     },
 };
+/** Some app in old menu permission is deprecated then we should remove */
+export const APP_EXCLUDED_KEYS = [APP_KEYS.SHARE_ACCESS];
+/** Some app need to map app code to check duplicate permission_code */
+export const MAP_MENU_TO_PARENT_APP_CODE = {
+    DATA_SOURCE: 'APP_ANTALYSER',
+    DF_DATA_SOURCE: 'DATAFLOWS',
+};

package/es/components/organism/LeftMenu/hooks/usePermission.js

@@ -10,6 +10,7 @@ import { CDP_API, PERMISSION_API, POST_MESSAGE_TYPES } from '@antscorp/antsomi-u
 import { ENV } from '@antscorp/antsomi-ui/es/config';
 // Utils
 import { findLastMatchedItemByUrl, findPathOfActiveItem, flattenMenuArray, getMappingAppChildren, recursivePermissionMenu, } from '../utils';
+import { useCheckUserPermission } from '@antscorp/antsomi-ui/es/queries';
 const { DEV, SANDBOX, SANDBOX_CDP } = ENV;
 export const usePermission = () => {
     const appConfig = useLeftMenuContext(store => store.appConfig);
@@ -42,6 +43,16 @@ export const usePermission = () => {
             enabled: !!(auth === null || auth === void 0 ? void 0 : auth.userId) && !!auth.portalId,
         },
     });
+    const { data: userPermission } = useCheckUserPermission({
+        apiConfig: {
+            userId: +((auth === null || auth === void 0 ? void 0 : auth.userId) || 0),
+            accountId: +((auth === null || auth === void 0 ? void 0 : auth.accountId) || 0),
+            portalId: auth === null || auth === void 0 ? void 0 : auth.portalId,
+            token: auth === null || auth === void 0 ? void 0 : auth.token,
+            languageCode,
+            domain: 'https://sandbox-app.cdp.asia',
+        },
+    });
     const { data: dashboardData, refetch: refetchDashboard } = useGetDashboard({
         args: {
             auth: {
@@ -113,6 +124,7 @@ export const usePermission = () => {
         destinationChannelEntries: destinationChannel === null || destinationChannel === void 0 ? void 0 : destinationChannel.entries,
         destinationChannelGen2Entries: destinationChannelGen2 === null || destinationChannelGen2 === void 0 ? void 0 : destinationChannelGen2.entries,
         isRecommendation,
+        userPermission,
     }), [
         auth,
         dashboardList,
@@ -120,6 +132,7 @@ export const usePermission = () => {
         destinationChannelGen2 === null || destinationChannelGen2 === void 0 ? void 0 : destinationChannelGen2.entries,
         isRecommendation,
         permissionMenu,
+        userPermission,
     ]);
     const activeItemPath = useMemo(() => {
         const url = `${pathname}${hash}`;

package/es/components/organism/LeftMenu/styled.js

@@ -116,6 +116,10 @@ export const FeatureMenu = styled.ul `
 
   .menu-content {
     flex-shrink: 0;
+
+    &.scroll-content {
+      margin-right: 0px !important;
+    }
   }
 
   .nav-blank {

package/es/components/organism/LeftMenu/types/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { TFeatureMenu } from '@antscorp/antsomi-ui/es/models/LeftMenu';
 export type TMenuItem = Omit<Partial<TFeatureMenu>, 'children' | keyof TRequireMenuItemKey> & {
     key: string;
@@ -5,6 +6,7 @@ export type TMenuItem = Omit<Partial<TFeatureMenu>, 'children' | keyof TRequireM
     icon: string | null;
     disabled?: boolean;
     children?: TMenuItem[];
+    style?: React.CSSProperties;
 } & TOption;
 export type TMenuFeatureItem = Omit<Partial<TFeatureMenu>, 'children'> & TRequireMenuItemKey & TOption & {
     children?: TMenuFeatureItem[];

package/es/components/organism/LeftMenu/utils/index.d.ts

@@ -2,6 +2,7 @@ import { FeatureMenuPermission, TDashboard, TDestinationChannel, TFeatureMenu }
 import { PayloadInfo } from '@antscorp/antsomi-ui/es/types';
 import { TMenuFeatureItem, TMenuItem } from '../types';
 import { TEnv } from '@antscorp/antsomi-ui/es/types/config';
+import { TAccountPermission } from '@antscorp/antsomi-ui/es/models/AccountListing';
 /**
  * Converts a feature menu item to a menu item suitable for rendering in the UI.
  * @param {TMenuFeatureItem} featureMenu - The feature menu item to convert.
@@ -15,7 +16,7 @@ export declare const getMenuItem: (featureMenu: TMenuFeatureItem) => TMenuItem;
  * @param {string} childKey - The key representing the children array in each menu item.
  * @returns {T[]} The flattened array of menu items.
  */
-export declare const flattenMenuArray: <T>(menuItems: T[], childKey: string) => T[];
+export declare const flattenMenuArray: (menuItems: FeatureMenuPermission[], childKey: string, parentAppCode?: FeatureMenuPermission['parent_app_code']) => FeatureMenuPermission[];
 /**
  * Recursively filters menu items based on permissions.
  * check permission if menu item has menu_type of @alias MENU_ITEM_TYPE.MENU
@@ -70,6 +71,7 @@ export declare const getMappingAppChildren: (args: {
     destinationChannelEntries?: TDestinationChannel[];
     destinationChannelGen2Entries?: TDestinationChannel[];
     isRecommendation?: boolean;
+    userPermission?: TAccountPermission;
 }) => TFeatureMenu[];
 /**
  * Finds the app code of the active menu item based on the provided URL within the given menu items.

package/es/components/organism/LeftMenu/utils/index.js

@@ -12,7 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 // Libraries
 import { cloneDeep, isArray, isEmpty, sortBy } from 'lodash';
 // Constants
-import { APP_KEYS, MARKETING_CHANNEL_KEY, HOME_MENU_ITEMS, MARKETING_ROUTES, MENU_ITEM_TYPE, RENDER_OPTION, HOME_REPORT_ROUTES, SETTING_APP, } from '../constants';
+import { APP_KEYS, MARKETING_CHANNEL_KEY, HOME_MENU_ITEMS, MARKETING_ROUTES, MENU_ITEM_TYPE, RENDER_OPTION, HOME_REPORT_ROUTES, SETTING_APP, APP_EXCLUDED_KEYS, MAP_MENU_TO_PARENT_APP_CODE, } from '../constants';
 import { MARKETING_CHANNEL_CODE, KEEP_HASH_PATH_DEV } from '../../../template/Layout/constants';
 // Utils
 import { handleError } from '@antscorp/antsomi-ui/es/utils';
@@ -35,15 +35,19 @@ export const getMenuItem = (featureMenu) => {
  * @param {string} childKey - The key representing the children array in each menu item.
  * @returns {T[]} The flattened array of menu items.
  */
-export const flattenMenuArray = (menuItems, childKey) => {
+export const flattenMenuArray = (menuItems, childKey, parentAppCode) => {
     let result = [];
-    menuItems.forEach(item => {
+    for (const item of menuItems) {
+        // If item has app_code and the app code is in the excluded list, skip it
+        if (!!item.app_code && APP_EXCLUDED_KEYS.includes(item.app_code)) {
+            continue;
+        }
         const children = (item === null || item === void 0 ? void 0 : item[childKey]) || [];
-        result.push(Object.assign(Object.assign({}, item), { [childKey]: [] }));
+        result.push(Object.assign(Object.assign(Object.assign({}, item), (parentAppCode ? { parent_app_code: parentAppCode } : {})), { [childKey]: [] }));
         if (children.length > 0) {
-            result = [...result, ...flattenMenuArray(children, childKey)];
+            result = [...result, ...flattenMenuArray(children, childKey, item.app_code)];
         }
-    });
+    }
     return result;
 };
 /**
@@ -52,11 +56,22 @@ export const flattenMenuArray = (menuItems, childKey) => {
  */
 export const recursivePermissionMenu = (menuItems, menuPermissions) => {
     var _a, _b;
-    const menu = (_b = (_a = menuItems === null || menuItems === void 0 ? void 0 : menuItems.filter(({ permission_code, menu_item_type }) => {
+    const menu = (_b = (_a = menuItems === null || menuItems === void 0 ? void 0 : menuItems.filter(({ permission_code, menu_item_type, menu_item_code }) => {
         if (Number(menu_item_type) !== MENU_ITEM_TYPE.MENU) {
             return true;
         }
-        return !!(menuPermissions === null || menuPermissions === void 0 ? void 0 : menuPermissions.find(({ menu_code = '' }) => !!permission_code && [menu_code].includes(permission_code)));
+        return !!(menuPermissions === null || menuPermissions === void 0 ? void 0 : menuPermissions.find(({ menu_code = '', parent_app_code }) => {
+            if (permission_code) {
+                const parentAppCode = MAP_MENU_TO_PARENT_APP_CODE[menu_item_code];
+                // If parent app code is exist in the MAP_MENU_TO_PARENT_APP_CODE then check with parent app code
+                if (parentAppCode && parent_app_code) {
+                    return parentAppCode === parent_app_code && [menu_code].includes(permission_code);
+                }
+                // Else just check with menu_code
+                return [menu_code].includes(permission_code);
+            }
+            return false;
+        }));
     })) === null || _a === void 0 ? void 0 : _a.map(item => (Object.assign(Object.assign({}, item), (isArray(item.children)
         ? {
             children: recursivePermissionMenu(sortBy(item.children || [], ['level_position']), menuPermissions),
@@ -71,13 +86,6 @@ export const recursivePermissionMenu = (menuItems, menuPermissions) => {
 export const getGeneratePath = (path, params) => {
     try {
         const { portalId, userId, dashboardId, channelId } = params || {};
-        // return generatePath(path, {
-        //   user_id: userId ?? '-1',
-        //   networkId: portalId ?? -1,
-        //   portalId: portalId ?? -1,
-        //   dashboardId: dashboardId ?? '-1',
-        //   channelId: channelId ?? -1,
-        // });
         const paramsObjects = {
             user_id: userId !== null && userId !== void 0 ? userId : '-1',
             networkId: portalId !== null && portalId !== void 0 ? portalId : -1,
@@ -133,7 +141,7 @@ export const recursiveGetMenuItemByPermission = (featureMenuItem) => {
 };
 /** Map children to each App Item */
 export const getMappingAppChildren = (args) => {
-    const { menuList, dashboardList, auth, destinationChannelEntries, destinationChannelGen2Entries, isRecommendation, } = args;
+    const { menuList, dashboardList, auth, destinationChannelEntries, destinationChannelGen2Entries, isRecommendation, userPermission, } = args;
     const recursiveAddRenderOption = (menuItem) => {
         var _a;
         const cloneMenuItem = cloneDeep(menuItem);
@@ -207,10 +215,17 @@ export const getMappingAppChildren = (args) => {
                     })), { children: (_a = dashboardObject === null || dashboardObject === void 0 ? void 0 : dashboardObject[childMenuItem.menu_item_code]) === null || _a === void 0 ? void 0 : _a.map(item => {
                             const { shareAccess } = item || {};
                             const dashboardEditable = (() => {
-                                var _a, _b;
-                                if (isEmpty(shareAccess))
-                                    return true;
-                                return (((_b = (_a = shareAccess === null || shareAccess === void 0 ? void 0 : shareAccess.list_access) === null || _a === void 0 ? void 0 : _a.find(item => item.user_id === (auth === null || auth === void 0 ? void 0 : auth.userId))) === null || _b === void 0 ? void 0 : _b.allow_edit) === FEATURE_PERMISSIONS.EVERYTHING);
+                                var _a, _b, _c;
+                                switch ((_a = userPermission === null || userPermission === void 0 ? void 0 : userPermission.permissions) === null || _a === void 0 ? void 0 : _a.edit) {
+                                    case 'EVERYTHING':
+                                        return true;
+                                    case 'NONE':
+                                        return false;
+                                    default:
+                                        if (isEmpty(shareAccess))
+                                            return true;
+                                        return (((_c = (_b = shareAccess === null || shareAccess === void 0 ? void 0 : shareAccess.list_access) === null || _b === void 0 ? void 0 : _b.find(item => item.user_id === (auth === null || auth === void 0 ? void 0 : auth.userId))) === null || _c === void 0 ? void 0 : _c.allow_edit) === FEATURE_PERMISSIONS.EVERYTHING);
+                                }
                             })();
                             return Object.assign({}, getInitialFeatureMenuItem({
                                 menu_item: String(item.dashboardId),

package/es/components/template/Layout/Layout.js

@@ -51,9 +51,7 @@ export const Layout = memo(props => {
     const [noSpaceTopContent, setNoSpaceTopContent] = useState(false);
     const [activeMenuCode, setActiveMenuCode] = useState('');
     const [activePageTitle, setActivePageTitle] = useState('');
-    // Refs
     const notificationWrapperRef = useRef(null);
-    // Hooks
     useMutationObserver(() => {
         if (notificationWrapperRef.current) {
             const child = notificationWrapperRef.current.querySelector('div');
@@ -67,7 +65,6 @@ export const Layout = memo(props => {
         attributeOldValue: true,
         characterDataOldValue: true,
     });
-    // Memo
     const permissionDomain = useDeepCompareMemo(() => {
         var _a;
         /**

package/es/components/template/Layout/components/RecommendationWorkspace/components/MenuMapping/components/OldLeftMenu/styled.js

@@ -21,6 +21,9 @@ export const MenuWrapper = styled.div `
     height: 100%;
     max-height: 100%;
     overflow: auto;
+    &::-webkit-scrollbar {
+      display: none !important;
+    }
 
     li {
       min-height: 40px !important;

package/es/constants/queries.d.ts

@@ -26,6 +26,7 @@ export declare const QUERY_KEYS: {
     GET_ACCOUNT_LISTING: string;
     GET_PERMISSION_ACCOUNT_LISTING: string;
     GET_RECENT_ACCOUNT: string;
+    CHECK_ACCOUNT_PERMISSION: string;
     GET_ABSTRACT_USERS: string;
     GET_COLUMN_METRICS: string;
     GET_DATA_TABLE_LISTING: string;

package/es/constants/queries.js

@@ -37,6 +37,7 @@ export const QUERY_KEYS = {
     GET_ACCOUNT_LISTING: 'GET_ACCOUNT_LISTING',
     GET_PERMISSION_ACCOUNT_LISTING: 'GET_PERMISSION_ACCOUNT_LISTING',
     GET_RECENT_ACCOUNT: 'GET_RECENT_ACCOUNT',
+    CHECK_ACCOUNT_PERMISSION: 'CHECK_ACCOUNT_PERMISSION',
     // ABSTRACT
     GET_ABSTRACT_USERS: 'GET_ABSTRACT_USERS',
     // DATA TABLE

package/es/models/AccountListing.d.ts

@@ -13,3 +13,15 @@ export interface AccountRecent {
     userId: number;
     value: number[];
 }
+export type TAccountPermission = {
+    objectType?: number;
+    isView?: boolean;
+    isEdit?: boolean;
+    isExist?: boolean;
+    permissions?: {
+        view: string;
+        edit: string;
+        loginView: string;
+        loginEdit: string;
+    };
+};

package/es/models/LeftMenu/FeatureMenuPermission.d.ts

@@ -1,5 +1,5 @@
 export type FeatureMenuPermission = {
-    app_id?: number;
+    app_id?: string | number;
     app_name?: string;
     app_code?: string | null;
     path?: string;
@@ -12,6 +12,7 @@ export type FeatureMenuPermission = {
     menu_code?: string | null;
     menu_name?: string;
     menu_parent?: number | null;
+    parent_app_code?: string | null;
     menu_order?: number;
     icon?: string;
     menu_path?: string;

package/es/queries/Account/useGetAccountList.d.ts

@@ -1,15 +1,20 @@
 import { UseQueryOptions } from '@tanstack/react-query';
-import { GetAccountList } from '../../services/Account';
-import { AccountListing, AccountRecent } from '../../models/AccountListing';
+import { TAccountParams } from '../../services/Account';
+import { AccountListing, AccountRecent, TAccountPermission } from '../../models/AccountListing';
 type OptionHasDefault = 'queryKey' | 'queryFn';
 type GetAccountListProps = {
-    apiConfig: GetAccountList;
+    apiConfig: TAccountParams;
     options?: Omit<UseQueryOptions<AccountListing, any, AccountListing, any[]>, OptionHasDefault>;
 };
 type GetRecentAccountProps = {
-    apiConfig: GetAccountList;
+    apiConfig: TAccountParams;
     options?: Omit<UseQueryOptions<any, any, AccountRecent, any[]>, OptionHasDefault>;
 };
+type TCheckUserPermissionProps = {
+    apiConfig: TAccountParams;
+    options?: Omit<UseQueryOptions<any, any, TAccountPermission | undefined, any[]>, OptionHasDefault>;
+};
 export declare const useGetAccountList: (props: GetAccountListProps) => import("@tanstack/react-query").UseQueryResult<AccountListing, any>;
 export declare const useGetRecentAccount: (props: GetRecentAccountProps) => import("@tanstack/react-query").UseQueryResult<AccountRecent, any>;
+export declare const useCheckUserPermission: (props: TCheckUserPermissionProps) => import("@tanstack/react-query").UseQueryResult<TAccountPermission | undefined, any>;
 export {};

package/es/queries/Account/useGetAccountList.js

@@ -4,7 +4,7 @@ import { useQuery } from '@tanstack/react-query';
 import { accountService } from '../../services/Account';
 // Constants
 import { QUERY_KEYS } from '../../constants/queries';
-const { getList, getRecentAccount } = accountService;
+const { getList, getRecentAccount, checkPermission } = accountService;
 export const useGetAccountList = (props) => {
     const { apiConfig, options } = props;
     return useQuery(Object.assign({ queryKey: [QUERY_KEYS.GET_ACCOUNT_LISTING, apiConfig], queryFn: () => getList(apiConfig) }, options));
@@ -13,3 +13,8 @@ export const useGetRecentAccount = (props) => {
     const { apiConfig, options } = props;
     return useQuery(Object.assign({ queryKey: [QUERY_KEYS.GET_RECENT_ACCOUNT], queryFn: () => getRecentAccount(apiConfig) }, options));
 };
+export const useCheckUserPermission = (props) => {
+    const { apiConfig, options } = props;
+    const { languageCode, userId, portalId } = apiConfig;
+    return useQuery(Object.assign({ queryKey: [QUERY_KEYS.CHECK_ACCOUNT_PERMISSION, languageCode, userId, portalId], queryFn: () => checkPermission(apiConfig) }, options));
+};

package/es/services/Account/index.d.ts

@@ -1,12 +1,14 @@
-import { AccountListing, AccountRecent } from '../../models/AccountListing';
-export type GetAccountList = {
+import { AccountListing, AccountRecent, TAccountPermission } from '../../models/AccountListing';
+export type TAccountParams = {
     domain: string;
     portalId?: number;
     languageCode?: string;
     userId?: number;
-    token: string;
+    accountId?: number;
+    token?: string;
 };
 export declare const accountService: {
-    getList: (config: GetAccountList) => Promise<AccountListing>;
-    getRecentAccount: (config: GetAccountList) => Promise<AccountRecent | undefined>;
+    getList: (config: TAccountParams) => Promise<AccountListing>;
+    getRecentAccount: (config: TAccountParams) => Promise<AccountRecent | undefined>;
+    checkPermission: (config: TAccountParams) => Promise<TAccountPermission>;
 };

package/es/services/Account/index.js

@@ -62,4 +62,28 @@ export const accountService = {
             return Promise.reject(error);
         }
     }),
+    checkPermission: (config) => __awaiter(void 0, void 0, void 0, function* () {
+        var _g, _h, _j;
+        const { domain, languageCode = 'en', portalId = 33167, userId, token, accountId } = config;
+        try {
+            const response = yield axios({
+                method: 'POST',
+                url: `${domain}/hub/toolkit/v2.0/operate/check-permission`,
+                params: {
+                    portalId,
+                    languageCode,
+                    _user_id: userId,
+                    _owner_id: accountId,
+                },
+                data: { objects: [{ objectType: 1 }] },
+                headers: {
+                    Token: token,
+                },
+            });
+            return ((_j = (_h = (_g = response === null || response === void 0 ? void 0 : response.data) === null || _g === void 0 ? void 0 : _g.data) === null || _h === void 0 ? void 0 : _h.entries) === null || _j === void 0 ? void 0 : _j[0]) || {};
+        }
+        catch (error) {
+            return Promise.reject(error);
+        }
+    }),
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.5-beta.529",
+  "version": "1.3.5-beta.530",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",