@antscorp/antsomi-ui 1.3.5-beta.225 → 1.3.5-beta.227

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/DrawerDetail/components/ToggleDrawerSizeButton.js

@@ -10,12 +10,11 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 // Libraries
-import { THEME } from '@antscorp/antsomi-ui/es/constants';
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 import React from 'react';
 import styled from 'styled-components';
 // Icons
 import { ExpandMoreRight } from '../../../icons';
-const { token } = THEME || {};
 /* Styled */
 const StyledToggleButton = styled.div `
   position: absolute;
@@ -25,8 +24,8 @@ const StyledToggleButton = styled.div `
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: ${token === null || token === void 0 ? void 0 : token.blue1_2};
-  color: ${token === null || token === void 0 ? void 0 : token.bw8};
+  background-color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.blue1_2};
+  color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8};
   top: 50%;
   transform: translateY(-50%);
   left: -5px;

package/es/components/molecules/DrawerDetail/styled.js

@@ -1,11 +1,8 @@
-var _a, _b;
 // Libraries
 import styled from 'styled-components';
 // Drawer
 import { Drawer } from '../Drawer';
-// Constants
-import { THEME } from '@antscorp/antsomi-ui/es/constants';
-const { token } = THEME || {};
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 export const StyledDrawer = styled(Drawer) `
   &.antsomi-drawer-content {
     overflow: visible !important;
@@ -26,7 +23,7 @@ export const StyledDrawer = styled(Drawer) `
       display: flex;
       align-items: center;
       justify-content: center;
-      color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw8};
+      color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8};
       transition: all 0.3s;
       z-index: 100;
       cursor: pointer;
@@ -45,7 +42,7 @@ export const Content = styled.div `
 export const LeftMenu = styled.div `
   width: 46px;
   height: 100%;
-  background-color: ${token === null || token === void 0 ? void 0 : token.blue1_2};
+  background-color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.blue1_2};
   padding: 8px 5px;
   box-sizing: border-box;
   display: flex;
@@ -61,7 +58,7 @@ export const CloseBtn = styled.div `
   display: flex;
   align-items: center;
   justify-content: center;
-  color: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.bw8};
+  color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8};
   transition: all 0.3s;
   cursor: pointer;
 
@@ -72,7 +69,7 @@ export const CloseBtn = styled.div `
 export const MenuItem = styled.div `
   height: 36px;
   width: 36px;
-  border-radius: ${token === null || token === void 0 ? void 0 : token.borderRadiusXL}px;
+  border-radius: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.borderRadiusXL}px;
   background-color: transparent;
   display: flex;
   align-items: center;
@@ -81,7 +78,7 @@ export const MenuItem = styled.div `
   transition: all 0.2s;
 
   * {
-    color: ${token === null || token === void 0 ? void 0 : token.bw8};
+    color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8};
   }
 
   i {
@@ -91,10 +88,10 @@ export const MenuItem = styled.div `
   }
 
   &:hover {
-    background-color: ${token === null || token === void 0 ? void 0 : token.bw0};
+    background-color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw0};
 
     * {
-      color: ${token === null || token === void 0 ? void 0 : token.colorPrimary};
+      color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.colorPrimary};
     }
   }
 
@@ -102,7 +99,7 @@ export const MenuItem = styled.div `
     background-color: #d3e3fd;
 
     * {
-      color: ${token === null || token === void 0 ? void 0 : token.colorPrimary};
+      color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.colorPrimary};
     }
   }
 `;

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,26 +19,28 @@ 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'}`);
+            // 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);
         }
@@ -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/hooks/useNavigatePath.js

@@ -8,9 +8,12 @@ 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;
     // Callbacks
     const isPushDifferentDomain = useCallback((domain, path) => {
         var _a, _b, _c, _d, _e, _f;
@@ -33,11 +36,11 @@ export const useNavigatePath = () => {
             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 : ''}${searchParams}`, auth);
+    }, [auth, isPushDifferentDomain, 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}${searchParams}`, auth));
+    }, [auth, env, searchParams]);
     return { isPushDifferentDomain, getPath, navigatePath };
 };

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/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,17 +23,16 @@ 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
@@ -74,7 +73,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,
@@ -86,6 +85,8 @@ export const Layout = memo(props => {
     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,7 +125,7 @@ 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" },

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.225",
+  "version": "1.3.5-beta.227",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",