@antscorp/antsomi-ui 1.6.6 → 1.6.7

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

@@ -29,6 +29,7 @@ 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]);
@@ -73,6 +74,7 @@ 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 }),
@@ -80,10 +82,33 @@ 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('');
             }
         }
-    }), [auth, dashboardParams, env, removedDashboardId, removeDashboard]);
+    }), [
+        removedDashboardId,
+        auth,
+        env,
+        dashboardParams,
+        removeDashboard,
+        dashboardList,
+        pathname,
+        navigate,
+    ]);
     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 { isNil, uniq } from 'lodash';
+import { isEmpty, 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 { ICON_SIZE } from '../../../constants';
+import { HOME_MENU_ITEMS, ICON_SIZE } from '../../../constants';
 // Utils
 import { findActiveAppCodeByUrl, findLastMatchedItemByUrl, getMenuItem } from '../../../utils';
 import { findItemByPermissionCode, recursiveFindItemByKey, recursiveFindParentOfActiveItem, } from './utils';
@@ -20,6 +20,12 @@ 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 },
@@ -146,7 +152,8 @@ 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, optionCallback, } = 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 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,
@@ -173,7 +180,11 @@ 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()))),
-                children: customMenuItems({ parent: item, items: children }),
+                disabled,
+                children: customMenuItems({
+                    parent: item,
+                    items: isOwnerDashboardKey && isEmpty(children) ? [noDashboardItem] : children,
+                }),
             };
         });
     };

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

@@ -1,6 +1,6 @@
 export declare const usePermission: () => {
-    mappingChildrenMenu: import("../../../../models/LeftMenu").TFeatureMenu[];
-    permissionMenu: import("../../../../models/LeftMenu").TFeatureMenu[];
-    activeItemPath: import("../../../../models/LeftMenu").TFeatureMenu[];
-    flattenMenuPermission: import("../../../../models/LeftMenu").FeatureMenuPermission[];
+    mappingChildrenMenu: import("@antscorp/antsomi-ui/es/models/LeftMenu").TFeatureMenu[];
+    permissionMenu: import("@antscorp/antsomi-ui/es/models/LeftMenu").TFeatureMenu[];
+    activeItemPath: import("@antscorp/antsomi-ui/es/models/LeftMenu").TFeatureMenu[];
+    flattenMenuPermission: import("@antscorp/antsomi-ui/es/models/LeftMenu").FeatureMenuPermission[];
 };

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

@@ -1,6 +1,6 @@
 // Libraries
 import { useEffect, useMemo } from 'react';
-import { sortBy } from 'lodash';
+import { sortBy, uniqBy } from 'lodash';
 // Queries
 import { useGetDashboard, useGetDestinationChannel, useGetListMenu, useGetListMenuPermission, } from '@antscorp/antsomi-ui/es/queries/LeftMenu';
 // Stores
@@ -13,19 +13,21 @@ 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?.token,
                 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
+                    : permissionDomain || PERMISSION_API, // 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,
@@ -35,7 +37,7 @@ export const usePermission = () => {
             },
         },
         options: {
-            enabled: !!(auth === null || auth === void 0 ? void 0 : auth.userId) && !!auth.portalId && !!permissionDomain,
+            enabled: !!(auth === null || auth === void 0 ? void 0 : auth.userId) && !!auth.portalId,
         },
     });
     const { data: dashboardData, refetch: refetchDashboard } = useGetDashboard({
@@ -54,6 +56,8 @@ 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: {
@@ -89,10 +93,10 @@ export const usePermission = () => {
     const mappingChildrenMenu = useMemo(() => getMappingAppChildren({
         menuList: permissionMenu,
         auth,
-        dashboardData,
+        dashboardList,
         destinationChannelEntries: destinationChannel === null || destinationChannel === void 0 ? void 0 : destinationChannel.entries,
         isRecommendation,
-    }), [auth, dashboardData, destinationChannel === null || destinationChannel === void 0 ? void 0 : destinationChannel.entries, isRecommendation, permissionMenu]);
+    }), [auth, dashboardList, destinationChannel === null || destinationChannel === void 0 ? void 0 : destinationChannel.entries, isRecommendation, permissionMenu]);
     const activeItemPath = useMemo(() => {
         const url = `${pathname}${hash}`;
         const matchedCode = findLastMatchedItemByUrl({
@@ -107,6 +111,7 @@ 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 { TFeatureMenu } from '@antscorp/antsomi-ui/es/models/LeftMenu';
+import { TDashboard, TFeatureMenu } from '@antscorp/antsomi-ui/es/models/LeftMenu';
 import { TMenuItem } from '../types';
 import { AppConfigProviderProps } from '@antscorp/antsomi-ui/es/providers';
 export interface LeftMenuStoreProps {
@@ -17,6 +17,7 @@ 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,6 +3,7 @@ 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, TDashboardResponse, TDestinationChannel, TFeatureMenu } from '@antscorp/antsomi-ui/es/models/LeftMenu';
+import { FeatureMenuPermission, TDashboard, 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>;
-    dashboardData?: TDashboardResponse;
+    dashboardList?: TDashboard[];
     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, uniqBy } from 'lodash';
+import { cloneDeep, isArray, isEmpty, sortBy } from 'lodash';
 // Constants
 import { APP_KEYS, MARKETING_CHANNEL_KEY, HOME_MENU_ITEMS, MARKETING_ROUTES, MENU_ITEM_TYPE, RENDER_OPTION, HOME_REPORT_ROUTES, SETTING_APP, } from '../constants';
 import { 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, dashboardData, auth, destinationChannelEntries, isRecommendation } = args;
+    const { menuList, dashboardList, auth, destinationChannelEntries, isRecommendation } = args;
     const recursiveAddRenderOption = (menuItem) => {
         var _a;
         const cloneMenuItem = cloneDeep(menuItem);
@@ -170,11 +170,9 @@ 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: uniqBy([...ownedDashboard, ...sharedDashboard], 'dashboardId'),
+                    ownedDashboard: dashboardList,
                     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

@@ -63,7 +63,7 @@ export const Layout = memo(props => {
         characterDataOldValue: true,
     });
     // Memo
-    const permissionDomain = useMemo(() => {
+    const permissionDomain = useDeepCompareMemo(() => {
         var _a;
         /**
          * Priority for permission domain
@@ -117,7 +117,8 @@ export const Layout = memo(props => {
     const mergeHeaderProps = useDeepCompareMemo(() => merge(cloneDeep(initialHeaderProps), header), [initialHeaderProps, header]);
     const _b = useDeepCompareMemo(() => merge(cloneDeep(contentWrapperProps), cloneDeep(contentWrapper)), [contentWrapperProps, contentWrapper]), { noPadding } = _b, mergeContentWrapperProps = __rest(_b, ["noPadding"]);
     const mergeWorkSpaceProps = useDeepCompareMemo(() => merge(cloneDeep(restOfWorkspaceProps), omit(workspace, 'workspaceContentProps')), [restOfWorkspaceProps, workspace]);
-    const _c = useDeepCompareMemo(() => merge(cloneDeep(leftMenuProps), cloneDeep(leftMenu)), [leftMenuProps, leftMenu]), { className: leftMenuClassName, show: showLeftMenu = true } = _c, mergeLeftMenuProps = __rest(_c, ["className", "show"]);
+    const _c = useDeepCompareMemo(() => merge(cloneDeep(leftMenuProps), cloneDeep(leftMenu)), [leftMenuProps, leftMenu, appConfig]), { className: leftMenuClassName, show: showLeftMenu = true } = _c, mergeLeftMenuProps = __rest(_c, ["className", "show"]);
+    const leftMenuAppConfig = useDeepCompareMemo(() => omit(Object.assign(Object.assign({}, appConfig), { permissionDomain }), ['setAppConfig']), [appConfig]);
     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;
@@ -130,7 +131,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}` }, mergeLeftMenuProps, { appConfig: Object.assign(Object.assign({}, appConfig), { permissionDomain }), onActiveMenuCodeChange: onActiveMenuCodeChange }))),
+            showLeftMenu && (React.createElement(LeftMenu, Object.assign({ className: `layout-body__menu ${leftMenuClassName}` }, mergeLeftMenuProps, { appConfig: leftMenuAppConfig, 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/providers/AppConfigProvider/contexts/index.js

@@ -1,13 +1,15 @@
 // Libraries
-import React, { useMemo, useState } from 'react';
-import { createContext } from 'use-context-selector';
 import { merge } from 'lodash';
+import React, { useState } from 'react';
+import { createContext } from 'use-context-selector';
+// Hooks
+import { useDeepCompareMemo } from '@antscorp/antsomi-ui/es/hooks';
 const initialContext = { setAppConfig: () => { } };
 const AppConfigContext = createContext(initialContext);
 const AppConfigProvider = props => {
     const { value = initialContext, children } = props;
     const [appConfig, setAppConfig] = useState(value);
-    const mergedValue = useMemo(() => (Object.assign(Object.assign({}, merge(value, appConfig)), { setAppConfig })), [appConfig, value]);
+    const mergedValue = useDeepCompareMemo(() => (Object.assign(Object.assign({}, merge(value, appConfig)), { setAppConfig })), [appConfig, value]);
     return React.createElement(AppConfigContext.Provider, { value: mergedValue }, children);
 };
 export { AppConfigContext, AppConfigProvider };

package/package.json

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