@antscorp/antsomi-ui 1.3.5-beta.384 → 1.3.5-beta.385

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

@@ -26,6 +26,7 @@ interface EditorTabProps {
     modalFuncProps?: ModalFuncProps;
     onActiveTab: (id: string) => void;
     onCloseTab: (tab: EditorTabItem, index: number, newTabs: EditorTabItem[]) => void;
+    onConfirmRemove?: (tab: EditorTabItem) => void;
     onConfigure: (id: string) => void;
     onSaveName?: (id: string, value: string) => void;
     onAddTab: () => void;

package/es/components/molecules/EditorTab/EditorTab.js

@@ -22,7 +22,7 @@ export const EditorTab = props => {
     var _a;
     const { listTab = [], activeId = '', showArrow, showDropdown, editNameOnConfigure, 
     // disabledScroll,
-    onCloseTab, onActiveTab, onAddTab, onConfigure, onSaveName, newTabText, showComposeNewQuery, className, leftBlockClassName, tabItemClassName, confirmOnRemoveTab = true, modalFuncProps, } = props;
+    onCloseTab, onConfirmRemove, onActiveTab, onAddTab, onConfigure, onSaveName, newTabText, showComposeNewQuery, className, leftBlockClassName, tabItemClassName, confirmOnRemoveTab = true, modalFuncProps, } = props;
     const [activeTabId, setActiveTabId] = useState(activeId || ((_a = listTab === null || listTab === void 0 ? void 0 : listTab[0]) === null || _a === void 0 ? void 0 : _a.id));
     const [arrTabs, setArrTabs] = useState(listTab || []);
     const [isEditable, setIsEditable] = useState();
@@ -49,7 +49,13 @@ export const EditorTab = props => {
     const handleAddNew = () => {
         onAddTab();
     };
-    const modalConfirmAsync = useCallback(() => modal.confirm(Object.assign({ title: 'Remove this tab', content: 'Removing this tab will delete it permanently. Are you sure you want to perform this action?', okText: 'Confirm', icon: React.createElement("span", { style: { display: 'none' } }), className: 'editor-tab__modal-confirm' }, modalFuncProps)), [modalFuncProps, modal]);
+    const modalConfirmAsync = useCallback((tab) => {
+        const modalInstance = modal.confirm(Object.assign({ title: 'Remove this tab', content: 'Removing this tab will delete it permanently. Are you sure you want to perform this action?', okText: 'Confirm', icon: React.createElement("span", { style: { display: 'none' } }), onOk: () => {
+                if (onConfirmRemove)
+                    return onConfirmRemove(tab);
+            }, className: 'editor-tab__modal-confirm', centered: true }, modalFuncProps));
+        return modalInstance;
+    }, [modalFuncProps, modal, onConfirmRemove]);
     const handleActiveTab = useCallback((tabId) => {
         setActiveTabId(tabId);
         if (onActiveTab)
@@ -60,7 +66,7 @@ export const EditorTab = props => {
         if (arrTabs.length < 2) {
             return;
         }
-        const isConfirm = confirmOnRemoveTab ? yield modalConfirmAsync() : true;
+        const isConfirm = confirmOnRemoveTab ? yield modalConfirmAsync(tab) : true;
         if (!isConfirm)
             return;
         if (activeTabId === tab.id) {
@@ -143,7 +149,7 @@ export const EditorTab = props => {
                                         break;
                                 }
                             }),
-                        }, placement: "bottomRight", trigger: ['click'], destroyPopupOnHide: true },
+                        }, placement: "bottomLeft", trigger: ['click'], destroyPopupOnHide: true },
                         React.createElement(Button, { icon: React.createElement(Icon, { type: "icon-ants-three-dot-vertical", overlayStyle: { fontSize: 12 } }), size: "small" }))) : closeable ? (React.createElement(Button, { onClick: e => handleCloseTab(e, tab, idx), icon: React.createElement(Icon, { type: "icon-ants-remove-slim", overlayStyle: { fontSize: 12 } }), size: "small" })) : null));
             })
             : null),

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

@@ -29,7 +29,6 @@ export const useHomeMenu = () => {
     const auth = useLeftMenuContext(store => { var _a; return (_a = store.appConfig) === null || _a === void 0 ? void 0 : _a.auth; });
     const env = useLeftMenuContext(store => { var _a; return (_a = store.appConfig) === null || _a === void 0 ? void 0 : _a.env; });
     const dashboardParams = useLeftMenuContext(store => store.dashboardParams);
-    const dashboardList = useLeftMenuContext(store => (store === null || store === void 0 ? void 0 : store.dashboardList) || []);
     const onClickCreateDashboard = useLayoutStore(store => store.state.leftMenu.onClickCreateDashboard);
     const [removedDashboardId, setRemovedDashboardId] = useState('');
     const urlParams = useMemo(() => new URLSearchParams(search), [search]);
@@ -74,7 +73,6 @@ export const useHomeMenu = () => {
         }
     }, [isRecommendation, auth, pathname, navigate]);
     const onRemoveDashboard = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
-        var _a, _b;
         if (removedDashboardId && auth && env) {
             const params = {
                 params: Object.assign(Object.assign({}, dashboardParams), { dashboardId: +removedDashboardId }),
@@ -82,33 +80,10 @@ export const useHomeMenu = () => {
             };
             const response = yield removeDashboard(params);
             if ((response === null || response === void 0 ? void 0 : response.code) === API_RESPONSE_CODE.SUCCESS) {
-                let nextDashboardId;
-                for (const [index, item] of dashboardList.entries()) {
-                    if (item.dashboardId === +removedDashboardId) {
-                        nextDashboardId =
-                            ((_a = dashboardList === null || dashboardList === void 0 ? void 0 : dashboardList[index + 1]) === null || _a === void 0 ? void 0 : _a.dashboardId) || ((_b = dashboardList === null || dashboardList === void 0 ? void 0 : dashboardList[0]) === null || _b === void 0 ? void 0 : _b.dashboardId);
-                        break;
-                    }
-                }
-                const newPathName = nextDashboardId
-                    ? getGeneratePath(HOME_REPORT_ROUTES.DETAIL, Object.assign(Object.assign({}, auth), { dashboardId: String(nextDashboardId) }))
-                    : getGeneratePath(HOME_ROUTE, Object.assign({}, auth));
-                if (newPathName !== pathname) {
-                    navigate(newPathName);
-                }
                 setRemovedDashboardId('');
             }
         }
-    }), [
-        removedDashboardId,
-        auth,
-        env,
-        dashboardParams,
-        removeDashboard,
-        dashboardList,
-        pathname,
-        navigate,
-    ]);
+    }), [auth, dashboardParams, env, removedDashboardId, removeDashboard]);
     return {
         children: customChildren,
         removedDashboardId,

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

@@ -1,7 +1,7 @@
 // Libraries
 import React, { memo, useLayoutEffect, useState } from 'react';
 import Icon from '@antscorp/icons';
-import { isEmpty, isNil, uniq } from 'lodash';
+import { isNil, uniq } from 'lodash';
 import classNames from 'classnames';
 import { Link } from 'react-router-dom';
 // Components
@@ -12,7 +12,7 @@ import { Flex } from '../../../../../atoms';
 import { LabelCustom, LabelWrapper, MenuWrapper, OptionDropdownWrapper } from './styled';
 import { IconWrapper } from '../../../styled';
 // Constants
-import { HOME_MENU_ITEMS, ICON_SIZE } from '../../../constants';
+import { ICON_SIZE } from '../../../constants';
 // Utils
 import { findActiveAppCodeByUrl, findLastMatchedItemByUrl, getMenuItem } from '../../../utils';
 import { findItemByPermissionCode, recursiveFindItemByKey, recursiveFindParentOfActiveItem, } from './utils';
@@ -20,12 +20,6 @@ import { findItemByPermissionCode, recursiveFindItemByKey, recursiveFindParentOf
 import { useNavigatePath } from '../../../hooks';
 // Contexts
 import { useLeftMenuContext } from '../../../contexts';
-const noDashboardItem = {
-    key: 'no_dashboard',
-    label: 'No dashboard available',
-    disabled: true,
-    icon: null,
-};
 const styles = {
     dropdownMenu: { width: '130px', padding: '8px 0' },
     dotIcon: { marginTop: '2px', zIndex: 1000, flexShrink: 0, fontSize: 16 },
@@ -152,8 +146,7 @@ export const ChildMenu = memo(props => {
     const customMenuItems = (args) => {
         var _a;
         return (_a = args === null || args === void 0 ? void 0 : args.items) === null || _a === void 0 ? void 0 : _a.map(item => {
-            const { key, label, children, icon, logo_url, menu_item_path = null, menu_item_domain = null, options, disabled, optionCallback, } = item;
-            const isOwnerDashboardKey = key === HOME_MENU_ITEMS.DASHBOARD.menu_item_code;
+            const { key, label, children, icon, logo_url, menu_item_path = null, menu_item_domain = null, options, optionCallback, } = item;
             const renderLabel = () => (React.createElement(LabelWrapper, null,
                 React.createElement(LabelCustom, { ellipsis: { tooltip: label } }, label),
                 (options === null || options === void 0 ? void 0 : options.length) && !isRecommendation && (React.createElement(OptionDropdownWrapper, null,
@@ -180,11 +173,7 @@ export const ChildMenu = memo(props => {
                 label: (React.createElement(Flex, { gap: 10, align: "center", justify: "space-between", style: { height: '100%' } },
                     renderIcon(),
                     React.createElement(Flex, { style: styles.menuItemTitle, align: "center" }, renderTitle()))),
-                disabled,
-                children: customMenuItems({
-                    parent: item,
-                    items: isOwnerDashboardKey && isEmpty(children) ? [noDashboardItem] : children,
-                }),
+                children: customMenuItems({ parent: item, items: children }),
             };
         });
     };

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

@@ -1,6 +1,6 @@
 // Libraries
 import { useEffect, useMemo } from 'react';
-import { sortBy, uniqBy } from 'lodash';
+import { sortBy } from 'lodash';
 // Queries
 import { useGetDashboard, useGetDestinationChannel, useGetListMenu, useGetListMenuPermission, } from '@antscorp/antsomi-ui/es/queries/LeftMenu';
 // Stores
@@ -13,15 +13,19 @@ export const usePermission = () => {
     const appConfig = useLeftMenuContext(store => store.appConfig);
     const isCustomized = useLeftMenuContext(store => store.isCustomized);
     const isRecommendation = useLeftMenuContext(store => store.isRecommendation);
-    const setLeftMenuState = useLeftMenuContext(store => store.setState);
     const { isGrouped, objectId, objectType } = useLeftMenuContext(store => store.dashboardParams);
     const { auth, languageCode = 'en', env = 'development', permissionDomain } = appConfig || {};
     const { pathname, hash } = window.location;
     const { data: menuList } = useGetListMenu({
         args: {
             auth: {
-                token: '5474r2x214r2b4b4v2d4y444u2v5q2p5o4d4c4f424e4' || (auth === null || auth === void 0 ? void 0 : auth.token),
-                url: 'https://sandbox-permission.ants.vn',
+                token: ['development', 'sandbox'].includes(env)
+                    ? '5474r2x214r2b4b4v2d4y444u2v5q2p5o4d4c4f424e4'
+                    : auth === null || auth === void 0 ? void 0 : auth.token,
+                // url: 'https://sandbox-permission.ants.vn',
+                url: ['development', 'sandbox'].includes(env)
+                    ? 'https://sandbox-permission.ants.vn'
+                    : permissionDomain, // NOTE: Hard for sandbox, development
                 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,
@@ -31,7 +35,7 @@ export const usePermission = () => {
             },
         },
         options: {
-            enabled: !!(auth === null || auth === void 0 ? void 0 : auth.userId) && !!auth.portalId,
+            enabled: !!(auth === null || auth === void 0 ? void 0 : auth.userId) && !!auth.portalId && !!permissionDomain,
         },
     });
     const { data: dashboardData, refetch: refetchDashboard } = useGetDashboard({
@@ -50,8 +54,6 @@ export const usePermission = () => {
             },
         },
     });
-    const { ownedDashboard = [], sharedDashboard = [] } = (dashboardData === null || dashboardData === void 0 ? void 0 : dashboardData.entries) || {};
-    const dashboardList = useMemo(() => uniqBy([...ownedDashboard, ...sharedDashboard], 'dashboardId'), [ownedDashboard, sharedDashboard]);
     const { data: destinationChannel } = useGetDestinationChannel({
         args: {
             auth: {
@@ -87,10 +89,10 @@ export const usePermission = () => {
     const mappingChildrenMenu = useMemo(() => getMappingAppChildren({
         menuList: permissionMenu,
         auth,
-        dashboardList,
+        dashboardData,
         destinationChannelEntries: destinationChannel === null || destinationChannel === void 0 ? void 0 : destinationChannel.entries,
         isRecommendation,
-    }), [auth, dashboardList, destinationChannel === null || destinationChannel === void 0 ? void 0 : destinationChannel.entries, isRecommendation, permissionMenu]);
+    }), [auth, dashboardData, destinationChannel === null || destinationChannel === void 0 ? void 0 : destinationChannel.entries, isRecommendation, permissionMenu]);
     const activeItemPath = useMemo(() => {
         const url = `${pathname}${hash}`;
         const matchedCode = findLastMatchedItemByUrl({
@@ -105,7 +107,6 @@ export const usePermission = () => {
             })
             : [];
     }, [auth, hash, mappingChildrenMenu, pathname]);
-    useEffect(() => setLeftMenuState({ dashboardList: [] }), [dashboardList, setLeftMenuState]);
     useEffect(() => {
         if (!isCustomized) {
             const receivePostMessage = (event) => {

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

@@ -1,4 +1,4 @@
-import { TDashboard, TFeatureMenu } from '@antscorp/antsomi-ui/es/models/LeftMenu';
+import { TFeatureMenu } from '@antscorp/antsomi-ui/es/models/LeftMenu';
 import { TMenuItem } from '../types';
 import { AppConfigProviderProps } from '@antscorp/antsomi-ui/es/providers';
 export interface LeftMenuStoreProps {
@@ -17,7 +17,6 @@ export interface LeftMenuStoreProps {
         objectType: string;
         isGrouped: boolean;
     };
-    dashboardList?: TDashboard[];
     onMenuClick?: (key: string, keyPath: string[]) => void;
 }
 export interface LeftMenuState extends LeftMenuStoreProps {

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

@@ -3,7 +3,6 @@ export type TMenuItem = Omit<Partial<TFeatureMenu>, 'children' | keyof TRequireM
     key: string;
     label: string;
     icon: string | null;
-    disabled?: boolean;
     children?: TMenuItem[];
 } & TOption;
 export type TMenuFeatureItem = Omit<Partial<TFeatureMenu>, 'children'> & TRequireMenuItemKey & TOption & {

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

@@ -1,4 +1,4 @@
-import { FeatureMenuPermission, TDashboard, TDestinationChannel, TFeatureMenu } from '@antscorp/antsomi-ui/es/models/LeftMenu';
+import { FeatureMenuPermission, TDashboardResponse, TDestinationChannel, TFeatureMenu } from '@antscorp/antsomi-ui/es/models/LeftMenu';
 import { PayloadInfo } from '@antscorp/antsomi-ui/es/types';
 import { TMenuFeatureItem, TMenuItem } from '../types';
 /**
@@ -63,7 +63,7 @@ export declare const recursiveGetMenuItemByPermission: (featureMenuItem: TFeatur
 export declare const getMappingAppChildren: (args: {
     menuList: TFeatureMenu[];
     auth?: Partial<PayloadInfo>;
-    dashboardList?: TDashboard[];
+    dashboardData?: TDashboardResponse;
     destinationChannelEntries?: TDestinationChannel[];
     isRecommendation?: boolean;
 }) => TFeatureMenu[];

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

@@ -10,7 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 // Libraries
-import { cloneDeep, isArray, isEmpty, sortBy } from 'lodash';
+import { cloneDeep, isArray, isEmpty, sortBy, uniqBy } from 'lodash';
 // Constants
 import { APP_KEYS, MARKETING_CHANNEL_KEY, HOME_MENU_ITEMS, MARKETING_ROUTES, MENU_ITEM_TYPE, RENDER_OPTION, HOME_REPORT_ROUTES, SETTING_APP, } from '../constants';
 import { MARKETING_CHANNEL_CODE } from '../../../template/Layout/constants';
@@ -132,7 +132,7 @@ export const recursiveGetMenuItemByPermission = (featureMenuItem) => {
 };
 /** Map children to each App Item */
 export const getMappingAppChildren = (args) => {
-    const { menuList, dashboardList, auth, destinationChannelEntries, isRecommendation } = args;
+    const { menuList, dashboardData, auth, destinationChannelEntries, isRecommendation } = args;
     const recursiveAddRenderOption = (menuItem) => {
         var _a;
         const cloneMenuItem = cloneDeep(menuItem);
@@ -170,9 +170,11 @@ export const getMappingAppChildren = (args) => {
         var _a, _b;
         switch (appItem.menu_item_code) {
             case APP_KEYS.HOME: {
+                const { ownedDashboard = [], sharedDashboard = [] } = (dashboardData === null || dashboardData === void 0 ? void 0 : dashboardData.entries) || {};
+                uniqBy([...ownedDashboard, ...sharedDashboard], 'dashboardId');
                 const dashboardObject = {
                     sharedDashboard: [],
-                    ownedDashboard: dashboardList,
+                    ownedDashboard: uniqBy([...ownedDashboard, ...sharedDashboard], 'dashboardId'),
                     recentDashboard: [],
                 };
                 appItem.children = (_a = Object.values(HOME_MENU_ITEMS)) === null || _a === void 0 ? void 0 : _a.map(childMenuItem => {

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

@@ -130,7 +130,7 @@ export const Layout = memo(props => {
     return (React.createElement(LayoutWrapper, { showLeftMenu: !!showLeftMenu },
         React.createElement(HeaderV2, Object.assign({}, mergeHeaderProps, { showLogo: !showLeftMenu })),
         React.createElement(Flex, { className: "layout-body" },
-            showLeftMenu && (React.createElement(LeftMenu, Object.assign({ className: `layout-body__menu ${leftMenuClassName}`, appConfig: appConfig }, mergeLeftMenuProps, { onActiveMenuCodeChange: onActiveMenuCodeChange }))),
+            showLeftMenu && (React.createElement(LeftMenu, Object.assign({ className: `layout-body__menu ${leftMenuClassName}` }, mergeLeftMenuProps, { appConfig: Object.assign(Object.assign({}, appConfig), { permissionDomain }), onActiveMenuCodeChange: onActiveMenuCodeChange }))),
             React.createElement(ContentWrapper, Object.assign({ "$noPadding": noPadding, "$noSpaceTopContent": noSpaceTopContent }, mergeContentWrapperProps), activeMenuCode === HOME_MENU_ITEMS.RECOMMENDATION.menu_item_code ? (React.createElement("div", { className: "layout-body__content" },
                 React.createElement(RecommendationWorkspace, null))) : (React.createElement("div", Object.assign({ className: `layout-body__content ${(workspaceProps === null || workspaceProps === void 0 ? void 0 : workspaceProps.className) || ''}` }, mergeWorkSpaceProps),
                 React.createElement(NotificationWrapper, { ref: notificationWrapperRef },

package/es/config/index.d.ts

@@ -2,6 +2,7 @@ export declare const ENV: {
     readonly DEV: "development";
     readonly PROD: "production";
     readonly SANDBOX: "sandbox";
+    readonly STAGING: "staging";
 };
 export declare const isDev: boolean;
 export declare const ENDPOINT: {

package/es/config/index.js

@@ -3,6 +3,7 @@ export const ENV = {
     DEV: 'development',
     PROD: 'production',
     SANDBOX: 'sandbox',
+    STAGING: 'staging',
 };
 export const isDev = process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'sandbox';
 /* VERSION */

package/es/constants/api.d.ts

@@ -5,11 +5,13 @@ export declare const TINYMCE_API_KEY = "scyw71pj8619analvxs56ppc2w2fj2kpy5vnmflh
 export declare const CDP_API: {
     development: string;
     sandbox: string;
+    staging: string;
     production: string;
 };
 export declare const ISSUE_API: {
     development: string;
     sandbox: string;
+    staging: string;
     production: string;
 };
 export declare const PLATFORM_API = "https://platform.ants.tech";
@@ -20,18 +22,21 @@ export declare const APP_PERMISSION_DOMAIN: {
     [x: string]: {
         development: string;
         sandbox: string;
+        staging: string;
         production: string;
     };
 };
 export declare const PERMISSION_ENV_API: {
     development: string;
     sandbox: string;
+    staging: string;
     production: string;
 };
 export declare const APP_IAM_DOMAIN: {
     [x: string]: {
         development: string;
         sandbox: string;
+        staging: string;
         production: string;
     };
 };

package/es/constants/api.js

@@ -9,11 +9,13 @@ export const TINYMCE_API_KEY = 'scyw71pj8619analvxs56ppc2w2fj2kpy5vnmflhhc300y35
 export const CDP_API = {
     [ENV.DEV]: 'https://sandbox-app.cdp.asia',
     [ENV.SANDBOX]: 'https://sandbox-app.cdp.asia',
+    [ENV.STAGING]: 'https://staging-cdp.antsomi.com',
     [ENV.PROD]: 'https://cdp.antsomi.com',
 };
 export const ISSUE_API = {
     [ENV.DEV]: 'https://sandbox-issue.antsomi.com',
     [ENV.SANDBOX]: 'https://sandbox-issue.antsomi.com',
+    [ENV.STAGING]: 'https://issue.antsomi.com',
     [ENV.PROD]: 'https://issue.antsomi.com',
 };
 export const PLATFORM_API = 'https://platform.ants.tech';
@@ -23,6 +25,7 @@ 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.STAGING]: 'https://permission.antsomi.com',
     [ENV.PROD]: 'https://permission.antsomi.com',
 };
 export const APP_PERMISSION_DOMAIN = {
@@ -34,11 +37,13 @@ export const APP_IAM_DOMAIN = {
     [DATAFLOWS]: {
         [ENV.DEV]: 'https://sandbox-aacm.ants.vn',
         [ENV.SANDBOX]: 'https://sandbox-aacm.ants.vn',
+        [ENV.STAGING]: 'https://iam.ants.tech',
         [ENV.PROD]: 'https://iam.ants.tech',
     },
     [APP_ANTALYSER]: {
         [ENV.DEV]: 'https://sandbox-aacm.ants.vn',
         [ENV.SANDBOX]: 'https://sandbox-aacm.ants.vn',
+        [ENV.STAGING]: 'https://iam.ants.tech',
         [ENV.PROD]: 'https://iam.ants.tech',
     },
 };

package/package.json

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