@antscorp/antsomi-ui 1.3.5-beta.226 → 1.3.5-beta.228

package/es/components/molecules/AccountSelection/AccountListing.d.ts

@@ -10,7 +10,7 @@ export interface AccountListingProps {
         appCode?: string;
     };
     showAllAccount?: boolean;
-    currentAccount?: number | 'ALL_ACCOUNT';
+    currentAccount?: string | 'ALL_ACCOUNT';
     onLabelChange?: (label: string) => void;
     onChange?: (userId: number | 'ALL_ACCOUNT') => void;
 }

package/es/components/molecules/AccountSelection/AccountListing.js

@@ -1,5 +1,5 @@
 import Icon from '@antscorp/icons';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { Input, Text } from '@antscorp/antsomi-ui/es/components/atoms';
 import { AccountItem } from './components';
 import { AccountSelectionStyled } from './styled';
@@ -48,25 +48,30 @@ export const AccountListing = props => {
         return (data === null || data === void 0 ? void 0 : data.entries) || [];
     }, [data === null || data === void 0 ? void 0 : data.entries, permissionAccountList, portalId]);
     const [searchValue, setSearchValue] = useState('');
-    const currentAccountInfo = useMemo(() => accountData === null || accountData === void 0 ? void 0 : accountData.find(account => account.userId === currentAccount), [accountData, currentAccount]);
-    // HACK: this use for popover input label
-    const inputLabel = currentAccount === 'ALL_ACCOUNT' ? 'All account' : currentAccountInfo === null || currentAccountInfo === void 0 ? void 0 : currentAccountInfo.userName;
-    useEffect(() => {
-        if (onLabelChange)
-            onLabelChange(inputLabel);
-    }, [inputLabel]);
+    // const currentAccountInfo = useMemo(
+    //   () => accountData?.find(account => String(account.userId) === currentAccount),
+    //   [accountData, currentAccount],
+    // );
+    const isAllAccount = !currentAccount || currentAccount === 'ALL_ACCOUNT';
+    // useEffect(() => {
+    //   // HACK: this use for popover input label
+    //   const inputLabel = isAllAccount ? 'All account' : currentAccountInfo?.userName;
+    //   onLabelChange?.(inputLabel);
+    // }, [currentAccountInfo?.userName, isAllAccount, onLabelChange]);
     const handleSelectAccount = useCallback((userId) => {
-        if (onChange)
-            onChange(userId);
+        onChange === null || onChange === void 0 ? void 0 : onChange(userId);
+        // const userInfo = accountData?.find(account => String(account.userId) === userId);
+        // const inputLabel = userId === 'ALL_ACCOUNT' ? 'All account' : userInfo?.userName;
+        // onLabelChange?.(inputLabel);
     }, [onChange]);
     return (React.createElement(AccountSelectionStyled, { className: className },
         React.createElement(Input, { placeholder: "Search", suffix: React.createElement(Icon, { type: "icon-ants-search-2", style: { fontSize: '24px' } }), value: searchValue, onChange: event => setSearchValue(event.target.value) }),
         !!(recentData === null || recentData === void 0 ? void 0 : recentData.value) && (React.createElement(React.Fragment, null,
             React.createElement(Text, { className: "recent-text" }, "Recent"),
-            React.createElement("ul", null, recentData === null || recentData === void 0 ? void 0 : recentData.value.map(accountId => accountData === null || accountData === void 0 ? void 0 : accountData.find(account => account.userId === accountId)).filter(Boolean).map(account => (React.createElement(AccountItem, { key: account.userId, userName: account.userName, userId: account.userId, onClick: handleSelectAccount, isSelected: currentAccount === account.userId })))))),
+            React.createElement("ul", null, recentData === null || recentData === void 0 ? void 0 : recentData.value.map(accountId => accountData === null || accountData === void 0 ? void 0 : accountData.find(account => account.userId === accountId)).filter(Boolean).map(account => (React.createElement(AccountItem, { key: account.userId, userName: account.userName, userId: account.userId, onClick: handleSelectAccount, isSelected: currentAccount === String(account.userId) })))))),
         React.createElement("div", { className: "antsomi-scroll-box account-list" },
             React.createElement("ul", { className: "scroll-content" }, accountData === null || accountData === void 0 ? void 0 : accountData.filter(account => !(recentData === null || recentData === void 0 ? void 0 : recentData.value.includes(account.userId)) &&
-                searchStringQuery(account.userName, searchValue)).map(account => (React.createElement(AccountItem, { key: account.userId, userName: account.userName, userId: account.userId, onClick: handleSelectAccount, isSelected: currentAccount === account.userId }))))),
-        showAllAccount ? (React.createElement(Text, { className: `all-account ${currentAccount === 'ALL_ACCOUNT' ? 'is-selected' : ''}`, onClick: () => handleSelectAccount('ALL_ACCOUNT') },
+                searchStringQuery(account.userName, searchValue)).map(account => (React.createElement(AccountItem, { key: account.userId, userName: account.userName, userId: account.userId, onClick: handleSelectAccount, isSelected: currentAccount === String(account.userId) }))))),
+        showAllAccount ? (React.createElement(Text, { className: `all-account ${isAllAccount ? 'is-selected' : ''}`, onClick: () => handleSelectAccount('ALL_ACCOUNT') },
             React.createElement("strong", null, "All account"))) : null));
 };

package/es/components/molecules/AccountSelection/AccountSelection.js

@@ -10,20 +10,61 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import Icon from '@antscorp/icons';
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { Popover } from '@antscorp/antsomi-ui/es/components/atoms';
 import { PopoverFieldStyled } from './styled';
 import { Tooltip } from 'antd';
 import { AccountListing } from './AccountListing';
+import { useGetAccountList, useGetPermissionAccountList } from '../../..';
+import { PORTALS_IDS } from '@antscorp/antsomi-ui/es/constants';
 export const AccountSelection = props => {
     const { show = true, inputStyle = 'input', inputClassName, onChange, getPopupContainer, zIndex } = props, accountListingProps = __rest(props, ["show", "inputStyle", "inputClassName", "onChange", "getPopupContainer", "zIndex"]);
-    const [inputLabel, setInputLabel] = useState('');
+    const [inputLabel, setInputLabel] = useState('All account');
     const [open, setOpen] = useState(false);
     // const [searchValue, setSearchValue] = useState<string>('');
+    const { apiConfig, currentAccount } = props;
+    const { domain, token, userId, appCode, portalId } = apiConfig;
+    const { data } = useGetAccountList({
+        apiConfig,
+        options: {
+            enabled: portalId !== PORTALS_IDS.SANDBOX_76753,
+        },
+    });
+    const { data: permissionAccountList } = useGetPermissionAccountList({
+        args: {
+            _account_id: userId,
+            _user_id: userId,
+            _app_code: appCode || '',
+            _token: token,
+            domain,
+            appCode: appCode || '',
+            fullParent: true,
+            menuCode: appCode || '',
+        },
+        options: {
+            enabled: portalId === PORTALS_IDS.SANDBOX_76753,
+        },
+    });
+    const accountData = useMemo(() => {
+        if (portalId === PORTALS_IDS.SANDBOX_76753) {
+            return ((permissionAccountList === null || permissionAccountList === void 0 ? void 0 : permissionAccountList.map(account => ({
+                email: account.email,
+                userId: account.user_id,
+                userName: account.full_name,
+                status: 1,
+            }))) || []);
+        }
+        return (data === null || data === void 0 ? void 0 : data.entries) || [];
+    }, [data === null || data === void 0 ? void 0 : data.entries, permissionAccountList, portalId]);
+    const currentAccountInfo = useMemo(() => accountData === null || accountData === void 0 ? void 0 : accountData.find(account => String(account.userId) === currentAccount), [accountData, currentAccount]);
+    const isAllAccount = !currentAccount || currentAccount === 'ALL_ACCOUNT';
+    useEffect(() => {
+        const newLabel = isAllAccount ? 'All account' : currentAccountInfo === null || currentAccountInfo === void 0 ? void 0 : currentAccountInfo.userName;
+        setInputLabel(newLabel);
+    }, [currentAccountInfo === null || currentAccountInfo === void 0 ? void 0 : currentAccountInfo.userName, isAllAccount]);
     const handleSelectAccount = useCallback((userId) => {
         setOpen(false);
-        if (onChange)
-            onChange(userId);
+        onChange === null || onChange === void 0 ? void 0 : onChange(userId);
     }, [onChange]);
     return (show && (React.createElement(Popover, { content: React.createElement(AccountListing, Object.assign({}, accountListingProps, { onChange: handleSelectAccount, onLabelChange: newLabel => setInputLabel(newLabel) })), trigger: "click", overlayInnerStyle: { padding: 0 }, 
         // getPopupContainer={triggerNode => triggerNode}

package/es/components/molecules/HeaderV2/HeaderV2.d.ts

@@ -8,7 +8,7 @@ export interface HeaderV2Props {
     style?: React.CSSProperties;
     pageTitle?: string | React.ReactNode;
     accountSelection?: Omit<AccountSelectionProps, 'onChange' | 'apiConfig'> & {
-        onSelectAccount?: (account: number | 'ALL_ACCOUNT') => void;
+        onSelectAccount?: (account: string | 'ALL_ACCOUNT') => void;
     };
     helpConfig: Omit<IHelpProps, 'configs'> & {
         configs: Omit<IHelpProps['configs'], 'portalId' | 'userId' | 'token' | 'domain' | 'domainTicket' | 'domainPlatform'>;

package/es/components/molecules/HeaderV2/HeaderV2.js

@@ -19,32 +19,34 @@ import { AccountSharing, Help, Notification, } from '../../organism';
 import { APP_CODES, APP_PERMISSION_DOMAIN, CDP_API, IAM_API, ISSUE_API, PERMISSION_API, PLATFORM_API, PORTALS_IDS, SOCKET_API, } from '@antscorp/antsomi-ui/es/constants';
 import { useContextSelector } from 'use-context-selector';
 import { AppConfigContext } from '../../..';
-const { DATAFLOWS } = APP_CODES;
+import { useHistory, useLocation } from 'react-router-dom';
 export const HeaderV2 = memo(props => {
-    var _a, _b, _c;
-    const { auth, env: envContext, languageCode = 'en', appCode, } = useContextSelector(AppConfigContext, state => state);
+    var _a;
+    const { auth, env: envContext, languageCode = 'en', appCode, urlLogout: urlLogoutProvider = '', } = useContextSelector(AppConfigContext, state => state);
+    const { search } = useLocation();
+    const history = useHistory();
     /** Prefer to use Header in AppConfigContext */
     const { className, style, pageTitle = 'Page Title', accountSelection = {}, helpConfig, notificationConfig = {}, accountSharingConfig, useURLParam, config, } = props;
     /** General config for children component */
     const { env = envContext, language = languageCode, userId = isNaN(Number(auth === null || auth === void 0 ? void 0 : auth.userId)) ? 0 : Number(auth === null || auth === void 0 ? void 0 : auth.userId), portalId = auth === null || auth === void 0 ? void 0 : auth.portalId, token = auth === null || auth === void 0 ? void 0 : auth.token, permissionDomain = PERMISSION_API, iamDomain = IAM_API, } = config || {};
     const { currentAccount, inputStyle = 'select', onSelectAccount } = accountSelection, accountSelectionProps = __rest(accountSelection, ["currentAccount", "inputStyle", "onSelectAccount"]);
-    const urlParams = new URLSearchParams(window.location.search);
+    const urlParams = useMemo(() => new URLSearchParams(search), [search]);
     const oidParam = urlParams.get('oid');
-    const [selectedAccount, setSelectedAccount] = useState(useURLParam
-        ? (_b = (_a = Number(oidParam)) !== null && _a !== void 0 ? _a : userId) !== null && _b !== void 0 ? _b : 'ALL_ACCOUNT'
-        : (_c = currentAccount !== null && currentAccount !== void 0 ? currentAccount : userId) !== null && _c !== void 0 ? _c : 'ALL_ACCOUNT');
+    // States
+    const [selectedAccount, setSelectedAccount] = useState(`${useURLParam ? oidParam !== null && oidParam !== void 0 ? oidParam : '' : (_a = currentAccount !== null && currentAccount !== void 0 ? currentAccount : userId) !== null && _a !== void 0 ? _a : ''}`);
+    // Side effects
     useEffect(() => {
-        var _a;
         if (!useURLParam)
             return;
         if (!oidParam) {
-            urlParams.append('oid', `${(_a = currentAccount !== null && currentAccount !== void 0 ? currentAccount : userId) !== null && _a !== void 0 ? _a : 'ALL_ACCOUNT'}`);
-            const newUrl = `${window.location.pathname}?${urlParams.toString()}${window.location.hash}`;
-            window.history.replaceState(null, '', newUrl);
+            // urlParams.append('oid', 'ALL_ACCOUNT');
+            // urlParams.append('oid', `${currentAccount ?? userId ?? 'ALL_ACCOUNT'}`);
+            // const newUrl = `${window.location.pathname}?${urlParams.toString()}${window.location.hash}`;
+            // window.history.replaceState(null, '', newUrl);
         }
         else {
-            const newUrl = `${window.location.pathname}?${urlParams.toString()}${window.location.hash}`;
-            window.history.replaceState(null, '', newUrl);
+            // const newUrl = `${window.location.pathname}?${urlParams.toString()}${window.location.hash}`;
+            // window.history.replaceState(null, '', newUrl);
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [oidParam, useURLParam, userId]);
@@ -89,21 +91,20 @@ export const HeaderV2 = memo(props => {
         networkId: portalId,
         urlEditProfile: `${permissionDomain}/${portalId}#/account/profile/`,
         // 6006 is storybook port so direct to sandbox page
-        urlLogout: window.location.origin,
+        urlLogout: urlLogoutProvider || window.location.origin,
+        // urlLogout: window.location.origin,
         token,
         lang: language,
     };
     return (React.createElement(HeaderV2Styled, { className: className || '', style: style },
         React.createElement("div", { className: "left-side" },
             React.createElement(AccountSelection, Object.assign({}, accountSelectionProps, { currentAccount: selectedAccount, apiConfig: accountSelectionApiConfig, onChange: userId => {
-                    setSelectedAccount(userId);
+                    setSelectedAccount(String(userId));
                     if (useURLParam) {
                         urlParams.set('oid', `${userId}`);
-                        const newUrl = `${window.location.pathname}?${urlParams.toString()}`;
-                        window.history.replaceState(null, '', newUrl);
+                        history.replace({ search: urlParams.toString() });
                     }
-                    if (onSelectAccount)
-                        onSelectAccount(userId);
+                    onSelectAccount === null || onSelectAccount === void 0 ? void 0 : onSelectAccount(String(userId));
                 }, inputStyle: inputStyle })),
             typeof pageTitle === 'string' ? React.createElement("div", { className: "page-title" }, pageTitle) : pageTitle),
         React.createElement("div", { className: "right-side" },

package/es/components/organism/LeftMenu/components/HomeMenu/useHomeMenu.js

@@ -1,14 +1,11 @@
 // Libraries
 import { useCallback, useMemo } from 'react';
-import { useContextSelector } from 'use-context-selector';
 import { useHistory, useLocation } from 'react-router-dom';
 // Constants
 import { CONFIG_OPTIONS } from './constants';
 import { HOME_REPORT_ROUTES } from '../../constants';
 // Utils
 import { getGeneratePath, getMenuItem } from '../../utils';
-// Contexts
-import { AppConfigContext } from '@antscorp/antsomi-ui/es/providers';
 // Types
 import { useLeftMenuStore } from '../../stores';
 export const useHomeMenu = () => {
@@ -16,8 +13,7 @@ export const useHomeMenu = () => {
     const { pathname } = useLocation();
     const history = useHistory();
     const appMenuChildren = useLeftMenuStore(store => store.state.appMenuChildren);
-    // Contexts
-    const auth = useContextSelector(AppConfigContext, state => state === null || state === void 0 ? void 0 : state.auth);
+    const auth = useLeftMenuStore(store => { var _a; return (_a = store.state.appConfig) === null || _a === void 0 ? void 0 : _a.auth; });
     // Memos
     const onOptionCallback = useCallback((args) => {
         const { optionKey, menuItemKey } = args;

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

@@ -3,8 +3,7 @@ import React, { memo, useEffect, useState } from 'react';
 import Icon from '@antscorp/icons';
 import { isEmpty, isNil, uniq } from 'lodash';
 import classNames from 'classnames';
-import { Link, useLocation } from 'react-router-dom';
-import { useContextSelector } from 'use-context-selector';
+import { Link } from 'react-router-dom';
 // Components
 import { Dropdown, Menu } from 'antd';
 import { Flex } from '../../../../../atoms';
@@ -14,8 +13,6 @@ import { LabelCustom, MenuWrapper } from './styled';
 import { IconWrapper } from '../../../styled';
 // Constants
 import { ICON_SIZE } from '../../../constants';
-// Contexts
-import { AppConfigContext } from '@antscorp/antsomi-ui/es/providers';
 // Utils
 import { findActiveAppCodeByUrl, findLastMatchedItemByUrl } from '../../../utils';
 import { recursiveFindParentOfActiveItem } from './utils';
@@ -25,9 +22,8 @@ import { useLeftMenuStore } from '../../../stores';
 import { useNavigatePath } from '../../../hooks/useNavigatePath';
 export const ChildMenu = memo(props => {
     const { items = [], parentKey, onMenuClick } = props;
-    // Contexts
-    const auth = useContextSelector(AppConfigContext, state => state === null || state === void 0 ? void 0 : state.auth);
     // Stores
+    const auth = useLeftMenuStore(store => { var _a; return (_a = store.state.appConfig) === null || _a === void 0 ? void 0 : _a.auth; });
     const activeAppCode = useLeftMenuStore(store => store.state.activeAppCode);
     const menuItems = useLeftMenuStore(store => store.state.menuItems);
     const setLeftMenuState = useLeftMenuStore(store => store.setState);
@@ -37,12 +33,12 @@ export const ChildMenu = memo(props => {
     // Variables
     const randomMenuWrapperId = random(10);
     // Hooks
-    const { pathname, hash, search } = useLocation();
+    const { pathname, hash } = window.location;
     const { isPushDifferentDomain, getPath, navigatePath } = useNavigatePath();
     // Side Effects
     useEffect(() => {
         var _a;
-        const url = `${pathname}${hash}${search}`;
+        const url = `${pathname}${hash}`;
         /** Active menu item by current url */
         const activeMenuItem = (_a = findLastMatchedItemByUrl({ url, menuItems, auth })) === null || _a === void 0 ? void 0 : _a.menu_item_code;
         if (activeMenuItem && activeMenuItem !== currentActiveItem) {
@@ -64,7 +60,6 @@ export const ChildMenu = memo(props => {
         hash,
         items,
         pathname,
-        search,
         parentKey,
         activeAppCode,
         menuItems,
@@ -93,7 +88,7 @@ export const ChildMenu = memo(props => {
                     React.createElement(Icon, { className: "child-menu-item-icon", type: "icon-ants-three-dot-vertical", style: { marginTop: '2px', zIndex: 1000 } })))) : (React.createElement(LabelCustom, { ellipsis: { tooltip: label } }, label));
             return {
                 key,
-                label: !menu_item_path ? (labelComponent()) : isPushDifferentDomain(menu_item_domain, menu_item_path) ? (React.createElement("div", { onClick: () => navigatePath(menu_item_domain, menu_item_path), className: "menu-link" }, labelComponent())) : (React.createElement(Link, { to: getPath(menu_item_domain, menu_item_path), className: "menu-link" }, labelComponent())),
+                label: !menu_item_path ? (labelComponent()) : isPushDifferentDomain(menu_item_domain, menu_item_path) ? (React.createElement("div", { onClick: () => navigatePath(menu_item_domain, menu_item_path), className: "menu-link" }, labelComponent())) : (React.createElement(Link, { to: getPath(menu_item_path), className: "menu-link" }, labelComponent())),
                 icon: !isNil(icon) ? (React.createElement(IconWrapper, null,
                     React.createElement(Icon, { type: icon }))) : !isNil(logo_url) ? (React.createElement(MenuItemImage, { imageUrl: logo_url, fallbackIcon: (_a = args === null || args === void 0 ? void 0 : args.parent) === null || _a === void 0 ? void 0 : _a.icon, className: classNames({ isActive: currentActiveItem === key }) })) : null,
                 children: customMenuItems({ parent: item, items: children }),

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

@@ -1,5 +1,5 @@
 // Utils
-import { getGeneratePath } from '../../../utils';
+import { getComparePath, getGeneratePath } from '../../../utils';
 import { handleError } from '@antscorp/antsomi-ui/es/utils';
 const PATH = 'src/components/organism/LeftMenu/components/common/ChildMenu/utils.ts';
 /**
@@ -22,7 +22,8 @@ export const findActiveMenuItemByUrl = (args) => {
             const recursiveFindActiveItem = (items) => {
                 let activeItem;
                 for (const item of items) {
-                    if (!!(item === null || item === void 0 ? void 0 : item.menu_item_path) && url.includes(getGeneratePath(item.menu_item_path, auth))) {
+                    if (!!(item === null || item === void 0 ? void 0 : item.menu_item_path) &&
+                        url.includes(getComparePath(getGeneratePath(item.menu_item_path, auth)))) {
                         activeItem = item === null || item === void 0 ? void 0 : item.menu_item_code;
                         break;
                     }

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

@@ -1,7 +1,4 @@
 import { TFeatureMenu } from '@antscorp/antsomi-ui/es/models/LeftMenu';
-export declare const MENU_ITEMS: {
-    key: string;
-    label: string;
-    icon: string;
-}[];
+import { TMenuItem } from '../types';
+export declare const MENU_ITEMS: TMenuItem[];
 export declare const MENU_SAMPLE: TFeatureMenu[];

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

@@ -1,10 +1,6 @@
 // Libraries
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { useContextSelector } from 'use-context-selector';
 import { isArray, sortBy } from 'lodash';
-import { useLocation } from 'react-router-dom';
-// Contexts
-import { AppConfigContext } from '@antscorp/antsomi-ui/es/providers';
 // Queries
 import { useGetDashboard, useGetDestinationChannel, useGetListMenu, useGetListMenuPermission, } from '@antscorp/antsomi-ui/es/queries/LeftMenu';
 // Utils
@@ -18,16 +14,15 @@ const initialState = {
 };
 export const useLeftMenu = (props) => {
     // Props
-    const { objectType = 'OVERVIEW', objectId = 1, isGrouped = true, onActiveMenuCodeChange } = props;
+    const { objectType = 'OVERVIEW', objectId = 1, isGrouped = true, appConfig, onActiveMenuCodeChange, } = props;
     // Hooks
-    const { pathname, hash, search } = useLocation();
-    // Contexts
-    const appConfig = useContextSelector(AppConfigContext, state => state);
+    const { pathname, hash } = window.location;
+    console.log({ pathname, hash, locationWindow: window.location });
     // Stores
     const activeAppCode = useLeftMenuStore(store => store.state.activeAppCode);
     const setLeftMenuState = useLeftMenuStore(store => store.setState);
     // Destructuring variables
-    const { auth, languageCode } = appConfig;
+    const { auth, languageCode } = appConfig || {};
     // State
     const [state, setState] = useState(initialState);
     // Queries
@@ -101,7 +96,7 @@ export const useLeftMenu = (props) => {
         dashboardData,
         destinationChannelEntries: destinationChannel === null || destinationChannel === void 0 ? void 0 : destinationChannel.entries,
     }), [auth, dashboardData, destinationChannel === null || destinationChannel === void 0 ? void 0 : destinationChannel.entries, permissionMenu]);
-    /* Handers */
+    /* Handlers */
     const receivePostMessage = (event) => {
         const { data } = event;
         const { type } = data || {};
@@ -119,7 +114,12 @@ export const useLeftMenu = (props) => {
     useEffect(() => {
         window.addEventListener('message', receivePostMessage);
         return () => window.removeEventListener('message', receivePostMessage);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
+    useEffect(() => {
+        if (appConfig)
+            setLeftMenuState({ appConfig });
+    }, [appConfig, setLeftMenuState]);
     /**
      * Change list menu children when hovering or activating items, giving priority to hovering items
      */
@@ -137,20 +137,19 @@ export const useLeftMenu = (props) => {
      * Active App Item having code matching url
      */
     useEffect(() => {
-        const url = `${pathname}${hash}${search}`;
+        const url = `${pathname}${hash}`;
         const matchAppCode = findActiveAppCodeByUrl({ url, menuItems: mappingChildrenMenu, auth });
         if (matchAppCode && matchAppCode !== activeAppCode) {
             setLeftMenuState({ activeAppCode: matchAppCode });
         }
     }, [
         activeAppCode,
-        appConfig.auth,
+        appConfig === null || appConfig === void 0 ? void 0 : appConfig.auth,
         auth,
         hash,
         mappingChildrenMenu,
         pathname,
         permissionMenu,
-        search,
         setLeftMenuState,
     ]);
     /**
@@ -158,7 +157,7 @@ export const useLeftMenu = (props) => {
      */
     useEffect(() => {
         var _a;
-        const url = `${pathname}${hash}${search}`;
+        const url = `${pathname}${hash}`;
         const matchedCode = (_a = findLastMatchedItemByUrl({
             url,
             menuItems: mappingChildrenMenu,
@@ -171,15 +170,7 @@ export const useLeftMenu = (props) => {
             })
             : [];
         onActiveMenuCodeChange === null || onActiveMenuCodeChange === void 0 ? void 0 : onActiveMenuCodeChange(activeItemPath, flattenMenuPermission);
-    }, [
-        auth,
-        flattenMenuPermission,
-        hash,
-        mappingChildrenMenu,
-        onActiveMenuCodeChange,
-        pathname,
-        search,
-    ]);
+    }, [auth, flattenMenuPermission, hash, mappingChildrenMenu, onActiveMenuCodeChange, pathname]);
     /* Callbacks */
     const onToggleChildMenu = useCallback(() => {
         setState(prev => (Object.assign(Object.assign({}, prev), { isExpandMenu: !prev.isExpandMenu })));

package/es/components/organism/LeftMenu/hooks/useNavigatePath.d.ts

@@ -1,5 +1,5 @@
 export declare const useNavigatePath: () => {
     isPushDifferentDomain: (domain: string | null, path: string | null) => boolean;
-    getPath: (domain: string | null, path: string | null) => string;
+    getPath: (path: string | null) => string;
     navigatePath: (domain: string | null, path: string | null) => void;
 };

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

@@ -8,13 +8,17 @@ import { AppConfigContext } from '@antscorp/antsomi-ui/es/providers';
 import { getGeneratePath } from '../utils';
 // Constants
 import { ENV } from '@antscorp/antsomi-ui/es/config';
+import { useLocation } from 'react-router-dom';
 export const useNavigatePath = () => {
     // Contexts
     const { auth, env } = useContextSelector(AppConfigContext, state => state);
+    const { search } = useLocation();
+    const searchParams = search === '?' || !search ? '' : search;
+    const isDev = env === ENV.DEV;
     // Callbacks
     const isPushDifferentDomain = useCallback((domain, path) => {
         var _a, _b, _c, _d, _e, _f;
-        if (env === ENV.DEV)
+        if (isDev)
             return false;
         const customDomain = domain !== null && domain !== void 0 ? domain : '';
         const splitNextPath = (path === null || path === void 0 ? void 0 : path.split('#')) || ['', ''];
@@ -26,18 +30,20 @@ export const useNavigatePath = () => {
             return currentRoute !== nextRoute;
         }
         return !!customDomain && customDomain !== ((_f = window.location) === null || _f === void 0 ? void 0 : _f.origin);
-    }, [env]);
-    const getPath = useCallback((domain, path) => {
+    }, [isDev]);
+    const getPath = useCallback((path) => {
         var _a;
-        if ((path === null || path === void 0 ? void 0 : path.includes('#')) && isPushDifferentDomain(domain, path)) {
+        if (path === null || path === void 0 ? void 0 : path.includes('#')) {
             const customPath = ((_a = path === null || path === void 0 ? void 0 : path.split('#')) === null || _a === void 0 ? void 0 : _a[1]) || '';
             return getGeneratePath(customPath, auth);
         }
-        return getGeneratePath(`${path !== null && path !== void 0 ? path : ''}`, auth);
-    }, [auth, isPushDifferentDomain]);
+        return `${getGeneratePath(path !== null && path !== void 0 ? path : '', auth)}`;
+        // return `${getGeneratePath(path ?? '', auth)}${searchParams}`;
+    }, [auth, searchParams]);
     const navigatePath = useCallback((domain, path) => {
         const newDomain = isNil(domain) || env === ENV.DEV ? '' : domain;
-        window.location.assign(getGeneratePath(`${newDomain}${path}`, auth));
-    }, [auth, env]);
+        window.location.assign(`${getGeneratePath(`${newDomain}${path}`, auth)}`);
+        // window.location.assign(`${getGeneratePath(`${newDomain}${path}`, auth)}${searchParams}`);
+    }, [auth, env, searchParams]);
     return { isPushDifferentDomain, getPath, navigatePath };
 };

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

@@ -1,12 +1,18 @@
 import React from 'react';
 import { TFeatureMenu } from '@antscorp/antsomi-ui/es/models/LeftMenu/FeatureMenu';
 import { FeatureMenuPermission } from '@antscorp/antsomi-ui/es/models/LeftMenu';
+import { AppConfigProviderProps } from '../../..';
+import { TMenuItem } from './types';
 export interface LeftMenuProps {
+    appConfig?: AppConfigProviderProps;
     objectType?: string;
     objectId?: number;
     isGrouped?: boolean;
     style?: React.CSSProperties;
     className?: string;
+    isExpandable?: boolean;
+    items?: TMenuItem[];
+    isCustomized?: boolean;
     onActiveMenuCodeChange?: (activeItemPath: TFeatureMenu[], flattenPermissionList?: FeatureMenuPermission[]) => void;
 }
 export declare const LeftMenu: React.FC<LeftMenuProps>;

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

@@ -18,7 +18,7 @@ import { useLeftMenu } from './hooks';
 import { useNavigatePath } from './hooks/useNavigatePath';
 export const LeftMenu = memo(props => {
     var _a;
-    const { style, className } = props;
+    const { style, className, isExpandable = true, isCustomized = false } = props;
     // Hooks
     const { 
     /* State */
@@ -71,8 +71,13 @@ export const LeftMenu = memo(props => {
             React.createElement("div", { className: "icon-wrapper" }, isNil(icon_name) ? null : React.createElement(Icon, { type: icon_name, style: { fontSize: ICON_SIZE } })),
             React.createElement(Typography.Text, null, menu_item_name),
             React.createElement("div", { className: "popup-triangle" })));
-        return (React.createElement(FeatureMenuItem, { key: menu_item, onMouseEnter: () => onMouseEnter(menu_item_code) }, isString(menu_item_path) ? (isPushDifferentDomain(menu_item_domain, menu_item_path) ? (React.createElement("div", { onClick: () => navigatePath(menu_item_domain, menu_item_path) }, labelComponent())) : (React.createElement(Link, { to: getPath(menu_item_domain, menu_item_path), className: "menu-link" }, labelComponent()))) : (labelComponent())));
+        return (React.createElement(FeatureMenuItem, { key: menu_item, onMouseEnter: () => onMouseEnter(menu_item_code) }, isString(menu_item_path) ? (isPushDifferentDomain(menu_item_domain, menu_item_path) ? (React.createElement("div", { onClick: () => navigatePath(menu_item_domain, menu_item_path) }, labelComponent())) : (React.createElement(Link, { to: getPath(menu_item_path), className: "menu-link" }, labelComponent()))) : (labelComponent())));
     };
+    // const renderCustomizedMenuItems = (items: TMenuItem) => {
+    //   return items?.map(item => {
+    //     return <FeatureMenuItem key={menu_item} onMouseEnter={() => onMouseEnter(menu_item_code)} />;
+    //   });
+    // };
     return (React.createElement(LeftMenuNavWrapper, { style: style, className: className },
         React.createElement(LeftMenuNav, null,
             React.createElement(FeatureMenuWrapper, { isExpandMenu: state.isExpandMenu, vertical: true },
@@ -88,12 +93,12 @@ export const LeftMenu = memo(props => {
                     const settingFeature = permissionMenu === null || permissionMenu === void 0 ? void 0 : permissionMenu.find(item => item.menu_item_code === APP_KEYS.SETTINGS);
                     return settingFeature ? renderFeatureMenuItems(settingFeature) : null;
                 })())),
-            React.createElement(ExpandWrapper, { onMouseEnter: onMouseLeave },
+            isExpandable && (React.createElement(ExpandWrapper, { onMouseEnter: onMouseLeave },
                 React.createElement(Icon, { type: "icon-ants-expand-more", style: {
                         cursor: 'pointer',
                         fontSize: '20px',
                         transform: `rotate(${state.isExpandMenu ? '90deg' : '270deg'})`,
-                    }, onClick: onToggleChildMenu }))),
-        React.createElement(ChildMenuWrapper, { isExpand: state.isExpandMenu, className: "antsomi-scroll-box" },
+                    }, onClick: onToggleChildMenu })))),
+        React.createElement(ChildMenuWrapper, { isExpand: state.isExpandMenu && isExpandable, className: "antsomi-scroll-box" },
             React.createElement("div", { className: "scroll-content" }, childMenu))));
 });

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

@@ -1,8 +1,10 @@
 import { TFeatureMenu } from '@antscorp/antsomi-ui/es/models/LeftMenu';
+import { AppConfigProviderProps } from '@antscorp/antsomi-ui/es/providers';
 export interface LeftMenuState {
     activeAppCode: string;
     menuItems: TFeatureMenu[];
     appMenuChildren: TFeatureMenu[];
+    appConfig?: AppConfigProviderProps;
 }
 interface LeftMenuStore {
     state: LeftMenuState;

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

@@ -125,6 +125,10 @@ export const FeatureMenuItem = styled.div `
     padding: 5px 0;
     position: relative;
 
+    &::before {
+      display: none !important;
+    }
+
     .icon-wrapper {
       height: 30px;
       width: 30px;

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

@@ -28,6 +28,11 @@ export declare const getGeneratePath: (path: string, params?: Partial<PayloadInf
     dashboardId?: string;
     channelId?: number;
 }) => string;
+/**
+ * This is used to delete the hash of the path returned from the api,
+ * the purpose of which is to compare with the url to activate the app
+ */
+export declare const getComparePath: (path: string) => string;
 /**
  * Creates an initial feature menu item object with default values.
  * @param {Partial<TFeatureMenu>} featureMenuItem - The partial feature menu item object.

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

@@ -87,6 +87,18 @@ export const getGeneratePath = (path, params) => {
         return '';
     }
 };
+/**
+ * This is used to delete the hash of the path returned from the api,
+ * the purpose of which is to compare with the url to activate the app
+ */
+export const getComparePath = (path) => {
+    var _a;
+    if (path === null || path === void 0 ? void 0 : path.includes('#')) {
+        const customPath = ((_a = path === null || path === void 0 ? void 0 : path.split('#')) === null || _a === void 0 ? void 0 : _a[1]) || '';
+        return customPath;
+    }
+    return path;
+};
 /**
  * Creates an initial feature menu item object with default values.
  * @param {Partial<TFeatureMenu>} featureMenuItem - The partial feature menu item object.
@@ -167,7 +179,8 @@ export const findActiveAppCodeByUrl = (args) => {
         const recursiveCheckHasActiveChild = (items) => {
             let matchAppCode = false;
             for (const item of items) {
-                if (!!(item === null || item === void 0 ? void 0 : item.menu_item_path) && url.includes(getGeneratePath(item.menu_item_path, auth))) {
+                if (!!(item === null || item === void 0 ? void 0 : item.menu_item_path) &&
+                    url.includes(getComparePath(getGeneratePath(item.menu_item_path, auth)))) {
                     matchAppCode = true;
                     break;
                 }
@@ -182,7 +195,7 @@ export const findActiveAppCodeByUrl = (args) => {
         };
         for (const menuItem of menuItems) {
             if (!!(menuItem === null || menuItem === void 0 ? void 0 : menuItem.menu_item_path) &&
-                url.includes(getGeneratePath(menuItem.menu_item_path, auth))) {
+                url.includes(getComparePath(getGeneratePath(menuItem.menu_item_path, auth)))) {
                 matchAppCode = menuItem.menu_item_code;
                 break;
             }
@@ -208,7 +221,8 @@ export const findLastMatchedItemByUrl = (args) => {
         const matchedItems = [];
         const recursiveFindActiveItem = (items) => {
             for (const item of items) {
-                if (!!(item === null || item === void 0 ? void 0 : item.menu_item_path) && url.includes(getGeneratePath(item.menu_item_path, auth))) {
+                if (!!(item === null || item === void 0 ? void 0 : item.menu_item_path) &&
+                    url.includes(getComparePath(getGeneratePath(item.menu_item_path, auth)))) {
                     matchedItems.push(item);
                 }
                 if ((item === null || item === void 0 ? void 0 : item.children) && item.children.length) {

package/es/components/template/Layout/Layout.d.ts

@@ -12,6 +12,7 @@ interface LayoutProps {
     workspaceProps?: React.HTMLAttributes<HTMLDivElement> & {
         workspaceContentProps?: React.HTMLAttributes<HTMLDivElement>;
     };
+    onActiveMenuChange?: (menuActive?: string) => void;
 }
 export declare const Layout: React.FC<PropsWithChildren<LayoutProps>>;
 declare global {

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

@@ -23,21 +23,21 @@ import { HeaderV2 } from '../../molecules';
 // Contexts
 import { AppConfigContext } from '../../..';
 // Constants
+import { MENU_PERMISSIONS } from './constants';
 import { APP_CODES, APP_IAM_DOMAIN, APP_PERMISSION_DOMAIN, IAM_API, PERMISSION_API, PORTALS_IDS, SOCKET_API, } from '../../../constants';
 // Css
 import '@antscorp/processing-notification/dist/index.css';
 import { useLayoutStore } from './stores';
 // Utils
 import { checkingRoleScope } from './utils';
-import { MENU_PERMISSIONS } from './constants';
-// Types
 const { DATAFLOWS } = APP_CODES;
 export const Layout = memo(props => {
-    const { leftMenuProps, headerProps = {}, workspaceProps, processingNotificationProps, children, } = props;
+    const { leftMenuProps, headerProps = {}, workspaceProps, processingNotificationProps, children, onActiveMenuChange, } = props;
     const _a = leftMenuProps || {}, { className = '' } = _a, restOfLeftMenuProps = __rest(_a, ["className"]);
     const _b = workspaceProps || {}, { workspaceContentProps } = _b, restOfWorkspaceProps = __rest(_b, ["workspaceContentProps"]);
     // Selectors
-    const { auth, languageCode, appCode, env } = useContextSelector(AppConfigContext, state => state);
+    const appConfig = useContextSelector(AppConfigContext, state => state);
+    const { auth, languageCode, appCode, env } = appConfig;
     const { token, userId, portalId } = auth || {};
     const headerStore = useLayoutStore(store => store.state.header);
     const [showAccountSelection, setShowAccountSelection] = useState(false);
@@ -74,7 +74,7 @@ export const Layout = memo(props => {
     }, [appCode, env, portalId]);
     const initialHeaderProps = useMemo(() => {
         var _a, _b;
-        return (Object.assign(Object.assign({ className: 'layout-header' }, headerProps), { config: Object.assign(Object.assign({}, headerProps === null || headerProps === void 0 ? void 0 : headerProps.config), { permissionDomain,
+        return (Object.assign(Object.assign({ className: 'layout-header', useURLParam: true }, headerProps), { config: Object.assign(Object.assign({}, headerProps === null || headerProps === void 0 ? void 0 : headerProps.config), { permissionDomain,
                 iamDomain }), helpConfig: Object.assign(Object.assign({}, headerProps === null || headerProps === void 0 ? void 0 : headerProps.helpConfig), { configs: Object.assign(Object.assign({}, (_a = headerProps === null || headerProps === void 0 ? void 0 : headerProps.helpConfig) === null || _a === void 0 ? void 0 : _a.configs), { appCode: 'SANDBOX_MARKETING', avatar: '//c0-platform.ants.tech/avatar/2021/09/17/0xgbkurioo.png', config: {
                         p_timezone: 'Asia/Singapore',
                         api_pid: 33167,
@@ -82,10 +82,12 @@ export const Layout = memo(props => {
                         embeddedData: {},
                         INSIGHT_U_OGS: 'uogs',
                     } }) }), accountSharingConfig: Object.assign(Object.assign({}, headerProps === null || headerProps === void 0 ? void 0 : headerProps.accountSharingConfig), { u_ogs: 'uogs', appCode: 'APP_CUSTOMER_360' }), accountSelection: Object.assign(Object.assign({}, headerProps === null || headerProps === void 0 ? void 0 : headerProps.accountSelection), { show: !!((_b = headerProps === null || headerProps === void 0 ? void 0 : headerProps.accountSelection) === null || _b === void 0 ? void 0 : _b.show) && showAccountSelection }) }));
-    }, [headerProps, permissionDomain, showAccountSelection]);
+    }, [headerProps, iamDomain, permissionDomain, showAccountSelection]);
     const mergeHeaderProps = useMemo(() => merge(initialHeaderProps, headerStore), [initialHeaderProps, headerStore]);
     const antsProcessingNotificationConfig = useMemo(() => (Object.assign({ permissionDomain, socketDomain: SOCKET_API, token, accountId: userId, userId, lang: languageCode, networkId: portalId }, processingNotificationProps)), [permissionDomain, token, userId, languageCode, portalId, processingNotificationProps]);
     const onActiveMenuCodeChange = useCallback((activeItemPath, flattenPermissionList) => {
+        var _a;
+        onActiveMenuChange === null || onActiveMenuChange === void 0 ? void 0 : onActiveMenuChange((_a = activeItemPath === null || activeItemPath === void 0 ? void 0 : activeItemPath[(activeItemPath === null || activeItemPath === void 0 ? void 0 : activeItemPath.length) - 1]) === null || _a === void 0 ? void 0 : _a.menu_item_code);
         if (isEmpty(activeItemPath)) {
             setShowAccountSelection(false);
             return;
@@ -124,11 +126,11 @@ export const Layout = memo(props => {
             }
         }
         setShowAccountSelection(roleScope);
-    }, []);
+    }, [onActiveMenuChange]);
     return (React.createElement(LayoutWrapper, null,
         React.createElement(HeaderV2, Object.assign({}, mergeHeaderProps)),
         React.createElement(Flex, { className: "layout-body" },
-            React.createElement(LeftMenu, Object.assign({ className: `layout-body__menu ${className}` }, restOfLeftMenuProps, { onActiveMenuCodeChange: onActiveMenuCodeChange })),
+            React.createElement(LeftMenu, Object.assign({ className: `layout-body__menu ${className}`, appConfig: appConfig }, restOfLeftMenuProps, { onActiveMenuCodeChange: onActiveMenuCodeChange })),
             React.createElement(ContentWrapper, null,
                 React.createElement("div", Object.assign({}, restOfWorkspaceProps, { className: `layout-body__content ${(workspaceProps === null || workspaceProps === void 0 ? void 0 : workspaceProps.className) || ''}` }),
                     React.createElement(NotificationWrapper, null,

package/es/components/template/Layout/constants/permission.d.ts

@@ -17,4 +17,9 @@ export declare const MENU_PERMISSIONS: {
     ALL_CHANNEL: string;
     ORCHESTRATION: string;
     CAMPAIGN: string;
+    BATCH_STREAM: string;
+    REALTIME_STREAM: string;
+    DF_DATA_SOURCE: string;
+    DESTINATION: string;
+    REPORT: string;
 };

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

@@ -17,4 +17,9 @@ export const MENU_PERMISSIONS = {
     [MARKETING_CHANNEL_CODE.ALL_CHANNEL]: 'JOURNEY',
     [MARKETING_CHANNEL_CODE.ORCHESTRATION]: 'JOURNEY',
     [MARKETING_CHANNEL_CODE.CAMPAIGN]: 'JOURNEY',
+    BATCH_STREAM: 'BATCH_STREAM',
+    REALTIME_STREAM: 'REALTIME_STREAM',
+    DF_DATA_SOURCE: 'DF_DATA_SOURCE',
+    DESTINATION: 'DESTINATION',
+    REPORT: 'REPORT',
 };

package/es/components/template/Layout/stores/index.d.ts

@@ -3,7 +3,6 @@ import { DeepPartial } from '@antscorp/antsomi-ui/es/types';
 export interface HeaderStore extends Partial<HeaderV2Props> {
 }
 export interface LeftMenuStore {
-    menuCodeActive?: string;
 }
 export interface WorkspaceStore {
 }

package/es/providers/AppConfigProvider/contexts/index.d.ts

@@ -6,6 +6,7 @@ export interface AppConfigProviderProps {
     auth?: Omit<PayloadInfo, 'url'>;
     appCode?: string;
     languageCode?: string;
+    urlLogout?: string;
 }
 declare const AppConfigContext: import("use-context-selector").Context<AppConfigProviderProps>;
 declare const AppConfigProvider: React.FC<React.PropsWithChildren<{

package/package.json

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