@antscorp/antsomi-ui 1.3.5-beta.276 → 1.3.5-beta.278

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

@@ -65,6 +65,6 @@ export const AccountListing = props => {
                     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 }))))), 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 ${isAllAccount ? 'is-selected' : ''}`, onClick: () => handleSelectAccount('') },
+        showAllAccount ? (React.createElement(Text, { className: `all-account ${isAllAccount ? 'is-selected' : ''}`, onClick: () => handleSelectAccount('all') },
             React.createElement("strong", null, "All account"))) : null));
 };

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

@@ -32,9 +32,9 @@ export const HeaderV2 = memo(props => {
     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, appCode = contextAppCode, menuCode = contextMenuCode, } = config || {};
     const { currentAccount, inputStyle = 'select', onSelectAccount } = accountSelection, accountSelectionProps = __rest(accountSelection, ["currentAccount", "inputStyle", "onSelectAccount"]);
     const urlParams = useMemo(() => new URLSearchParams(search), [search]);
-    const oidParam = (_a = urlParams.get('oid')) !== null && _a !== void 0 ? _a : '';
+    const oidParam = (_a = urlParams.get('oid')) !== null && _a !== void 0 ? _a : 'all';
     // States
-    const [selectedAccount, setSelectedAccount] = useState(`${useURLParam ? oidParam : `${(_b = currentAccount !== null && currentAccount !== void 0 ? currentAccount : userId) !== null && _b !== void 0 ? _b : ''}`}`);
+    const [selectedAccount, setSelectedAccount] = useState(`${useURLParam ? oidParam : `${(_b = currentAccount !== null && currentAccount !== void 0 ? currentAccount : userId) !== null && _b !== void 0 ? _b : 'all'}`}`);
     // Memo
     const accountSelectionDomain = useMemo(() => {
         var _a;
@@ -87,7 +87,7 @@ export const HeaderV2 = memo(props => {
     const handleChangeAccount = (userId) => {
         setSelectedAccount(userId);
         if (useURLParam) {
-            if (userId) {
+            if (userId === 'all') {
                 urlParams.set('oid', userId);
             }
             else {
@@ -99,7 +99,7 @@ export const HeaderV2 = memo(props => {
     };
     return (React.createElement(HeaderV2Styled, { className: className || '', style: style },
         React.createElement("div", { className: "left-side" },
-            React.createElement(AccountSelection, Object.assign({}, accountSelectionProps, { currentAccount: selectedAccount || 'all', apiConfig: accountSelectionApiConfig, onChange: handleChangeAccount, inputStyle: inputStyle })),
+            React.createElement(AccountSelection, Object.assign({}, accountSelectionProps, { currentAccount: selectedAccount, apiConfig: accountSelectionApiConfig, onChange: handleChangeAccount, inputStyle: inputStyle })),
             typeof pageTitle === 'string' ? React.createElement("div", { className: "page-title" }, pageTitle) : pageTitle),
         React.createElement("div", { className: "right-side" },
             showHelp ? React.createElement(Help, Object.assign({ configs: helpConfigProps }, helpProps)) : null,

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

@@ -366,16 +366,14 @@ export const AlgorithmsSetting = (props) => {
                     React.createElement(AlgorithmWrapper, { mode: mode },
                         React.createElement(Text, Object.assign({}, labelStyle),
                             t(translations.last.title).toString(),
-                            char,
-                            ' '),
+                            char),
                         React.createElement("div", { style: { display: 'flex', alignItems: 'center' } },
                             React.createElement(InputNumber, { value: algo.last, width: 90, onChange: value => onChangeAlgorithm(algo, { last: value }), min: 1, max: 90, required: true }),
                             React.createElement(Text, { color: isCDP ? (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorIcon : undefined, style: { marginLeft: 8 } }, t(translations.days.title).toString()))),
                     React.createElement(AlgorithmWrapper, { style: { marginTop: 4 }, mode: mode },
                         React.createElement(Text, Object.assign({}, labelStyle),
                             t(translations.to.title).toString(),
-                            char,
-                            ' '),
+                            char),
                         React.createElement(Radio.Group, { onChange: event => onChangeAlgorithm(algo, { to: event.target.value }), value: algo.to },
                             React.createElement(Radio, { value: "today" }, t(translations.today.title).toString()),
                             React.createElement(Radio, { value: "yesterday" }, t(translations.yesterday.title).toString())))));
@@ -397,8 +395,7 @@ export const AlgorithmsSetting = (props) => {
                     React.createElement(AlgorithmWrapper, { mode: mode },
                         React.createElement(Text, Object.assign({}, labelStyle),
                             t(translations.last.title).toString(),
-                            char,
-                            ' '),
+                            char),
                         React.createElement("div", { style: { display: 'flex', alignItems: 'center' } },
                             React.createElement(InputNumber, { value: algo.last, width: 90, onChange: value => onChangeAlgorithm(algo, { last: value }), min: 1, max: 20, required: true }),
                             React.createElement(Text, { color: isCDP ? (_c = THEME.token) === null || _c === void 0 ? void 0 : _c.colorIcon : undefined, style: { marginLeft: 8 } }, t(translations.keywords.title).toLowerCase())))));
@@ -410,8 +407,7 @@ export const AlgorithmsSetting = (props) => {
                 element = (React.createElement(AlgorithmWrapper, { mode: mode },
                     React.createElement(Text, Object.assign({}, labelStyle),
                         t(translations.last.title).toString(),
-                        char,
-                        ' '),
+                        char),
                     React.createElement("div", { style: { display: 'flex', alignItems: 'center' } },
                         React.createElement(InputNumber, { value: algo.last, width: 90, onChange: value => onChangeAlgorithm(algo, { last: value }), min: 1, max: 90, required: true }),
                         React.createElement(Text, { color: isCDP ? (_d = THEME.token) === null || _d === void 0 ? void 0 : _d.colorIcon : undefined, style: { marginLeft: 8 } }, itemTypeName === ITEM_TYPE_NAME.ARTICLE
@@ -495,14 +491,12 @@ export const AlgorithmsSetting = (props) => {
                     React.createElement(AlgorithmWrapper, { mode: mode },
                         React.createElement(RequiredLabel, Object.assign({}, labelStyle),
                             t(translations.interest.title).toString(),
-                            char,
-                            ' '),
+                            char),
                         React.createElement(Select, { required: true, showSearch: true, focused: isShowErrorAlert, placeholder: t(translations.selectAnItem.title).toString(), style: styleNoBorderWFull, value: algo.interest, options: optionNotify, onChange: value => onChangeAlgorithm(algo, { interest: value }) })),
                     React.createElement(AlgorithmWrapper, { mode: mode },
                         React.createElement(Text, Object.assign({}, labelStyle),
                             t(translations.last.title).toString(),
-                            char,
-                            ' '),
+                            char),
                         React.createElement("div", { style: { display: 'flex', alignItems: 'center' } },
                             React.createElement(InputNumber, { value: algo.last, width: 90, onChange: value => onChangeAlgorithm(algo, { last: value }), min: 1, max: 90, required: true }),
                             React.createElement(Text, { color: isCDP ? (_e = THEME.token) === null || _e === void 0 ? void 0 : _e.colorIcon : undefined, style: { marginLeft: 8 } }, t(translations.days.title).toString())))));
@@ -520,14 +514,12 @@ export const AlgorithmsSetting = (props) => {
                     React.createElement(AlgorithmWrapper, { mode: mode },
                         React.createElement(RequiredLabel, Object.assign({}, labelStyle),
                             t(translations.with.title).toLowerCase(),
-                            char,
-                            ' '),
+                            char),
                         React.createElement(Select, { required: true, showSearch: true, disabled: isDisable, status: errorMessage ? 'error' : '', errorMsg: errorMessage, focused: isShowErrorAlert, placeholder: t(translations.selectAnItem.title).toString(), style: styleNoBorderWFull, value: algo.sort_by, options: options, onChange: value => onChangeAlgorithm(algo, { sort_by: value }) })),
                     React.createElement(AlgorithmWrapper, { mode: mode },
                         React.createElement(Text, Object.assign({}, labelStyle),
                             t(translations.sortBy.title).toLowerCase(),
-                            char,
-                            ' '),
+                            char),
                         React.createElement(Select, { showSearch: true, placeholder: t(translations.selectAnItem.title).toString(), style: styleNoBorderWFull, value: algo.sort_type, options: SORT_TYPE_OPTIONS, onChange: value => onChangeAlgorithm(algo, { sort_type: value }) }))));
                 break;
             }
@@ -536,14 +528,12 @@ export const AlgorithmsSetting = (props) => {
                     React.createElement(AlgorithmWrapper, { mode: mode },
                         React.createElement(RequiredLabel, Object.assign({}, labelStyle),
                             t(translations.by.title).toLowerCase(),
-                            char,
-                            ' '),
+                            char),
                         React.createElement(Select, { required: true, showSearch: true, focused: isShowErrorAlert, placeholder: t(translations.selectAnItem.title).toString(), style: styleNoBorderWFull, value: algo.by, options: ARTICLE_TREND_BY_OPTIONS, onChange: value => onChangeAlgorithm(algo, { by: value }) })),
                     React.createElement(AlgorithmWrapper, { mode: mode },
                         React.createElement(RequiredLabel, Object.assign({}, labelStyle),
                             t(translations.in.title).toLowerCase(),
-                            char,
-                            ' '),
+                            char),
                         React.createElement(Select, { required: true, showSearch: true, focused: isShowErrorAlert, placeholder: t(translations.selectAnItem.title).toString(), style: styleNoBorderWFull, value: algo.in, options: ARTICLE_TREND_IN_OPTIONS, onChange: value => onChangeAlgorithm(algo, { in: value }) })),
                     algo.by === 'compare_with_before' && (React.createElement(AlgorithmWrapper, { mode: mode },
                         React.createElement("div", null),
@@ -579,14 +569,12 @@ export const AlgorithmsSetting = (props) => {
                     React.createElement(AlgorithmWrapper, { mode: mode },
                         React.createElement(RequiredLabel, Object.assign({}, labelStyle),
                             t(translations.sortBy.title).toLowerCase(),
-                            char,
-                            ' '),
+                            char),
                         React.createElement(Select, { required: true, showSearch: true, focused: isShowErrorAlert, placeholder: t(translations.selectAnItem.title).toString(), style: styleNoBorderWFull, value: algo.sort_by, options: ARTICLE_TREND_SORT_BY_OPTIONS, onChange: value => onChangeAlgorithm(algo, { sort_by: value }) })),
                     React.createElement(AlgorithmWrapper, { mode: mode },
                         React.createElement(RequiredLabel, Object.assign({}, labelStyle),
                             t(translations.sortOrder.title).toLowerCase(),
-                            char,
-                            ' '),
+                            char),
                         React.createElement(Select, { required: true, showSearch: true, focused: isShowErrorAlert, placeholder: t(translations.selectAnItem.title).toString(), style: styleNoBorderWFull, value: algo.sort_order, options: SORT_TYPE_OPTIONS, onChange: value => onChangeAlgorithm(algo, { sort_order: value }) }))));
                 break;
             }
@@ -706,10 +694,9 @@ export const AlgorithmsSetting = (props) => {
                                                             : 'none',
                                                     } }, provided.dragHandleProps),
                                                     React.createElement(Icon, { type: "icon-ants-double-three-dots", size: 16, style: { opacity: 0.4, color: (_b = THEME.token) === null || _b === void 0 ? void 0 : _b.colorIcon } })),
-                                                React.createElement(Text, Object.assign({}, labelStyle), (_c = mapListAlgo[algo.value]) === null || _c === void 0 ? void 0 :
+                                                React.createElement(Text, Object.assign({}, labelStyle, { style: { marginRight: 8, textAlign: 'left' } }), (_c = mapListAlgo[algo.value]) === null || _c === void 0 ? void 0 :
                                                     _c.label,
-                                                    char,
-                                                    ' ')),
+                                                    char)),
                                             React.createElement(InputNumber, { value: algo.quantity, width: 90, onChange: value => onChangeAlgorithm(algo, { quantity: value }), min: 1, max: 30, required: true }),
                                             algorithms.value.length > 1 ? (React.createElement(Button, { onClick: () => onRemoveAlgo(algo), type: "text", icon: React.createElement(Icon, { type: "icon-ants-remove-slim", size: 15 }), style: { alignSelf: 'center' } })) : null),
                                         renderAlgorithmBy(algo),

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

@@ -1,28 +1,44 @@
 // Libraries
 import { useCallback, useMemo } from 'react';
-import { useHistory, useLocation } from 'react-router-dom';
+import { useHistory } from 'react-router-dom';
 // Constants
 import { CONFIG_OPTIONS } from './constants';
-import { HOME_REPORT_ROUTES } from '../../constants';
+import { HOME_REPORT_ROUTES, HOME_ROUTE } from '../../constants';
 // Utils
 import { getGeneratePath, getMenuItem } from '../../utils';
 // Types
 import { useLeftMenuStore } from '../../stores';
 export const useHomeMenu = () => {
     // Hooks
-    const { pathname } = useLocation();
+    const { pathname, hash, search } = window.location;
     const history = useHistory();
+    // Stores
     const appMenuChildren = useLeftMenuStore(store => store.state.appMenuChildren);
     const auth = useLeftMenuStore(store => { var _a; return (_a = store.state.appConfig) === null || _a === void 0 ? void 0 : _a.auth; });
     // Memos
+    const urlParams = useMemo(() => new URLSearchParams(search), [search]);
+    // Handlers
+    const handleSetSearchParams = useCallback((searchParam) => {
+        const url = `${pathname}${hash}`;
+        if (url.includes(getGeneratePath(HOME_ROUTE, Object.assign({}, auth)))) {
+            urlParams.set('type', searchParam);
+            history.replace({ search: urlParams.toString() });
+        }
+        else {
+            history.push(getGeneratePath(HOME_ROUTE, Object.assign({}, auth)));
+            urlParams.set('type', searchParam);
+            history.replace({ search: urlParams.toString() });
+        }
+    }, [auth, hash, history, pathname, urlParams]);
+    // Memos
     const onOptionCallback = useCallback((args) => {
         const { optionKey, menuItemKey } = args;
         switch (optionKey) {
             case CONFIG_OPTIONS.CONFIGURE.key: {
-                const newPathName = getGeneratePath(HOME_REPORT_ROUTES.CONFIGURE, Object.assign(Object.assign({}, auth), { dashboardId: menuItemKey }));
-                if (newPathName !== pathname) {
-                    history.push(newPathName);
-                }
+                const newPathName = getGeneratePath(HOME_REPORT_ROUTES.DETAIL, Object.assign(Object.assign({}, auth), { dashboardId: menuItemKey }));
+                history.push(newPathName);
+                urlParams.set('type', HOME_REPORT_ROUTES.CONFIGURE);
+                history.replace({ search: urlParams.toString() });
                 break;
             }
             case CONFIG_OPTIONS.REMOVE.key:
@@ -30,15 +46,17 @@ export const useHomeMenu = () => {
             default:
                 break;
         }
-    }, [auth, pathname, history]);
+    }, [auth, history, urlParams]);
     const customChildren = useMemo(() => appMenuChildren === null || appMenuChildren === void 0 ? void 0 : appMenuChildren.map(appMenuItem => {
         var _a;
         return getMenuItem(Object.assign(Object.assign({}, appMenuItem), { children: (_a = appMenuItem === null || appMenuItem === void 0 ? void 0 : appMenuItem.children) === null || _a === void 0 ? void 0 : _a.map(item => (Object.assign(Object.assign({}, item), { options: Object.values(CONFIG_OPTIONS), optionCallback: onOptionCallback }))) }));
     }), [appMenuChildren, onOptionCallback]);
     // Callbacks
     const onCreateNewReport = useCallback(() => {
-        history.push(getGeneratePath(HOME_REPORT_ROUTES.CREATE, auth));
-    }, [auth, history]);
+        history.push(getGeneratePath(HOME_ROUTE, auth));
+        urlParams.set('type', HOME_REPORT_ROUTES.CREATE);
+        history.replace({ search: urlParams.toString() });
+    }, [auth, history, urlParams]);
     const onMenuClick = useCallback((key, _) => {
         const newPathName = getGeneratePath(HOME_REPORT_ROUTES.DETAIL, Object.assign(Object.assign({}, auth), { dashboardId: key }));
         if (newPathName !== pathname) {

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

@@ -16,6 +16,7 @@ export declare const MENU_ITEM_TYPE: {
 };
 export declare const ICON_SIZE = 20;
 export declare const HOME_MENU_ITEMS: Record<string, TMenuFeatureItem>;
+export declare const HOME_ROUTE = "/gen2/:networkId/dashboard";
 export declare const HOME_REPORT_ROUTES: {
     DETAIL: string;
     CONFIGURE: string;

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

@@ -32,11 +32,11 @@ export const HOME_MENU_ITEMS = {
         icon_name: null,
     },
 };
-const HOME_ROUTE = '/gen2/:networkId/dashboard';
+export const HOME_ROUTE = '/gen2/:networkId/dashboard';
 export const HOME_REPORT_ROUTES = {
     DETAIL: `${HOME_ROUTE}/detail/:dashboardId`,
-    CONFIGURE: `${HOME_ROUTE}/detail/:dashboardId/configure`,
-    CREATE: `${HOME_ROUTE}/create`,
+    CONFIGURE: `configure`,
+    CREATE: `create`,
 };
 /* MARKETING APP */
 export const MARKETING_ROUTES = {

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

@@ -8,6 +8,8 @@ import { findActiveAppCodeByChild, findActiveAppCodeByUrl, findLastMatchedItemBy
 // Store
 import { useLeftMenuStore } from '../stores';
 import { POST_MESSAGE_TYPES } from '@antscorp/antsomi-ui/es/constants/postMessage';
+// Constants
+import { CDP_API, PERMISSION_API, PERMISSION_ENV_API } from '@antscorp/antsomi-ui/es/constants';
 const initialState = {
     hoverItem: '',
     isExpandMenu: true,
@@ -17,21 +19,22 @@ export const useLeftMenu = (props) => {
     const { objectType = 'OVERVIEW', objectId = 1, isGrouped = true, appConfig, customization, onActiveMenuCodeChange, } = props;
     const { isExpandable = true, isCustomized = false, items, activeKey } = customization || {};
     // Hooks
-    const { pathname, hash } = window.location;
+    const { pathname, hash, search } = window.location;
+    const urlParams = useMemo(() => new URLSearchParams(search), [search]);
     // Stores
     const activeAppCode = useLeftMenuStore(store => store.state.activeAppCode);
     const customActiveAppKey = useLeftMenuStore(store => store.state.customActiveAppKey);
     const setLeftMenuState = useLeftMenuStore(store => store.setState);
     // Destructuring variables
-    const { auth, languageCode } = appConfig || {};
+    const { auth, languageCode, env } = appConfig || {};
     // State
     const [state, setState] = useState(initialState);
     // Queries
     const { data: menuList } = useGetListMenu({
         args: {
             auth: {
-                token: '5474r2x214r2b4b4v2d4y444u2v5q2p5o4d4c4f424e4' || (auth === null || auth === void 0 ? void 0 : auth.token),
-                url: 'https://sandbox-permission.ants.vn',
+                token: env === 'production' ? auth === null || auth === void 0 ? void 0 : auth.token : '5474r2x214r2b4b4v2d4y444u2v5q2p5o4d4c4f424e4',
+                url: env ? PERMISSION_ENV_API[env] : '',
                 portalId: auth === null || auth === void 0 ? void 0 : auth.portalId,
                 userId: auth === null || auth === void 0 ? void 0 : auth.userId,
                 accountId: auth === null || auth === void 0 ? void 0 : auth.accountId,
@@ -44,10 +47,10 @@ export const useLeftMenu = (props) => {
     const { data: menuListPermission } = useGetListMenuPermission({
         args: {
             auth: {
-                token: '5474r2x214z284d4w2b4y454a4p5x2d4j4n4w2q4a4v5' || (auth === null || auth === void 0 ? void 0 : auth.token),
-                url: 'https://permission.antsomi.com',
-                userId: '1600083836' || (auth === null || auth === void 0 ? void 0 : auth.userId),
-                accountId: '1600083836' || (auth === null || auth === void 0 ? void 0 : auth.accountId),
+                token: auth === null || auth === void 0 ? void 0 : auth.token,
+                url: PERMISSION_API,
+                userId: auth === null || auth === void 0 ? void 0 : auth.userId,
+                accountId: auth === null || auth === void 0 ? void 0 : auth.accountId,
             },
             params: {
                 type: 'list-app',
@@ -61,7 +64,7 @@ export const useLeftMenu = (props) => {
         args: {
             auth: {
                 token: auth === null || auth === void 0 ? void 0 : auth.token,
-                url: 'https://sandbox-app.cdp.asia/hub',
+                url: env ? `${CDP_API.production}/hub` : '',
                 portalId: auth === null || auth === void 0 ? void 0 : auth.portalId,
                 userId: auth === null || auth === void 0 ? void 0 : auth.userId,
             },
@@ -76,9 +79,9 @@ export const useLeftMenu = (props) => {
     const { data: destinationChannel } = useGetDestinationChannel({
         args: {
             auth: {
-                token: '5474r2x214z2a46403e4y4749426s2v544r2i4u2k5t5' || (auth === null || auth === void 0 ? void 0 : auth.token),
-                url: 'https://sandbox-app.cdp.asia/hub',
-                userId: '1600085179' || (auth === null || auth === void 0 ? void 0 : auth.userId),
+                token: auth === null || auth === void 0 ? void 0 : auth.token,
+                url: env ? `${CDP_API[env]}/hub` : '',
+                userId: auth === null || auth === void 0 ? void 0 : auth.userId,
                 portalId: auth === null || auth === void 0 ? void 0 : auth.portalId,
             },
             params: {
@@ -165,35 +168,20 @@ export const useLeftMenu = (props) => {
         items,
         customActiveAppKey,
     ]);
-    /**
-     * Active App Item having code matching url
-     */
     useEffect(() => {
+        var _a;
         if (!isCustomized) {
             const url = `${pathname}${hash}`;
+            /**
+             * Active App Item having code matching url
+             */
             const matchAppCode = findActiveAppCodeByUrl({ url, menuItems: mappingChildrenMenu, auth });
             if (matchAppCode && matchAppCode !== activeAppCode) {
                 setLeftMenuState({ activeAppCode: matchAppCode });
             }
-        }
-    }, [
-        isCustomized,
-        activeAppCode,
-        appConfig === null || appConfig === void 0 ? void 0 : appConfig.auth,
-        auth,
-        hash,
-        mappingChildrenMenu,
-        pathname,
-        permissionMenu,
-        setLeftMenuState,
-    ]);
-    /**
-     * Callback function when url change
-     */
-    useEffect(() => {
-        var _a;
-        if (!isCustomized) {
-            const url = `${pathname}${hash}`;
+            /**
+             * Callback function when url change
+             */
             const matchedCode = (_a = findLastMatchedItemByUrl({
                 url,
                 menuItems: mappingChildrenMenu,
@@ -209,12 +197,16 @@ export const useLeftMenu = (props) => {
         }
     }, [
         isCustomized,
+        activeAppCode,
         auth,
-        flattenMenuPermission,
         hash,
         mappingChildrenMenu,
-        onActiveMenuCodeChange,
         pathname,
+        permissionMenu,
+        setLeftMenuState,
+        onActiveMenuCodeChange,
+        flattenMenuPermission,
+        urlParams,
     ]);
     /* Callbacks */
     const onToggleChildMenu = useCallback(() => {

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

@@ -170,7 +170,7 @@ export const FeatureMenuItem = styled.div `
     .popup-triangle {
       opacity: 0;
       visibility: hidden;
-      right: -4px;
+      right: -6px;
       position: absolute;
       width: 0;
       height: 0;

package/es/constants/api.d.ts

@@ -20,6 +20,11 @@ export declare const APP_PERMISSION_DOMAIN: {
         production: string;
     };
 };
+export declare const PERMISSION_ENV_API: {
+    development: string;
+    sandbox: string;
+    production: string;
+};
 export declare const APP_IAM_DOMAIN: {
     [x: string]: {
         development: string;

package/es/constants/api.js

@@ -17,18 +17,16 @@ export const PLATFORM_API = 'https://platform.ants.tech';
 export const PERMISSION_API = 'https://permission.antsomi.com';
 export const SOCKET_API = 'https://ws.ants.tech';
 export const IAM_API = 'https://iam.ants.tech';
+const PERMISSION_URLS = {
+    [ENV.DEV]: 'https://sandbox-permission.ants.vn',
+    [ENV.SANDBOX]: 'https://sandbox-permission.ants.vn',
+    [ENV.PROD]: 'https://permission.antsomi.com',
+};
 export const APP_PERMISSION_DOMAIN = {
-    [DATAFLOWS]: {
-        [ENV.DEV]: 'https://sandbox-permission.ants.vn',
-        [ENV.SANDBOX]: 'https://sandbox-permission.ants.vn',
-        [ENV.PROD]: 'https://permission.antsomi.com',
-    },
-    [APP_ANTALYSER]: {
-        [ENV.DEV]: 'https://sandbox-permission.ants.vn',
-        [ENV.SANDBOX]: 'https://sandbox-permission.ants.vn',
-        [ENV.PROD]: 'https://permission.antsomi.com',
-    },
+    [DATAFLOWS]: PERMISSION_URLS,
+    [APP_ANTALYSER]: PERMISSION_URLS,
 };
+export const PERMISSION_ENV_API = PERMISSION_URLS;
 export const APP_IAM_DOMAIN = {
     [DATAFLOWS]: {
         [ENV.DEV]: 'https://sandbox-aacm.ants.vn',

package/package.json

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