@antscorp/antsomi-ui 1.3.5-beta.531 → 1.3.5-beta.534

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

@@ -3,8 +3,7 @@ import React, { memo, useCallback, useMemo } from 'react';
 import Icon from '@antscorp/icons';
 import { Typography } from 'antd';
 import classNames from 'classnames';
-import { isNil, isString } from 'lodash';
-import { Link } from 'react-router-dom';
+import { isNil } from 'lodash';
 import isEqual from 'react-fast-compare';
 // Styled
 import { ChildMenuWrapper, ExpandWrapper, FeatureMenu, FeatureMenuItem, LeftMenuNav, LeftMenuNavWrapper, PopoverWrapper, NavLogoWrapper, FeatureMenuWrapper, IconWrapper, } from './styled';
@@ -13,13 +12,12 @@ import { APP_KEYS } from './constants';
 // Components
 import { CustomMenu, CommonMenu, HomeMenu } from './components';
 // Hooks
-import { useLeftMenu, useNavigatePath } from './hooks';
+import { useLeftMenu } from './hooks';
 const SubLogoAntsomi = 'https://st-media-template.antsomi.com/icons/antsomi/antsomi.png';
 export const LeftMenuComponent = memo(props => {
     const { style, className, customization, showLogo = true } = props;
     const { isExpandable = true, isCustomized, isRecommendation, items = [], onMenuItemClick, } = customization || {};
-    const { state, activeAppCode, permissionMenu, customActiveAppKey, onToggleChildMenu, onMouseEnter, onMouseLeave, onHoverMenuBar, onShowPopover, } = useLeftMenu(props);
-    const { isPushDifferentDomain, getPath, navigatePath } = useNavigatePath();
+    const { state, activeAppCode, permissionMenu, customActiveAppKey, onToggleChildMenu, onMouseEnter, onMouseLeave, onHoverMenuBar, onShowPopover, onClickFeatureMenuItem, } = useLeftMenu(props);
     const childActiveMenu = useMemo(() => {
         const appActiveKey = isCustomized || isRecommendation ? customActiveAppKey : activeAppCode;
         if (isCustomized)
@@ -43,15 +41,16 @@ export const LeftMenuComponent = memo(props => {
         }
     }, [isCustomized, isRecommendation, state.hoverItem]);
     const renderFeatureMenuItem = useCallback((item) => {
-        const { menu_item_name, menu_item, icon_name, menu_item_code, menu_item_path, menu_item_domain, } = item;
+        const { menu_item_name, menu_item, icon_name, menu_item_code } = item;
         const isActive = activeAppCode === menu_item_code;
         const isHover = state.hoverItem === menu_item_code;
         const renderLabel = () => (React.createElement("li", { role: "menuitem", className: classNames({ isActive, isHover }) },
             React.createElement(IconWrapper, null, isNil(icon_name) ? null : React.createElement(Icon, { type: icon_name })),
             React.createElement(Typography.Text, null, menu_item_name),
             React.createElement("div", { className: "popup-triangle" })));
-        return (React.createElement(FeatureMenuItem, { key: menu_item, onMouseEnter: () => onMouseEnter(menu_item_code) }, isString(menu_item_path) ? (isPushDifferentDomain(menu_item_domain, menu_item_path) ? (React.createElement("div", { onClick: () => navigatePath(menu_item_domain, menu_item_path) }, renderLabel())) : (React.createElement(Link, { to: getPath(menu_item_path), className: "menu-link" }, renderLabel()))) : (renderLabel())));
-    }, [activeAppCode, getPath, isPushDifferentDomain, navigatePath, onMouseEnter, state.hoverItem]);
+        return (React.createElement(FeatureMenuItem, { key: menu_item, onMouseEnter: () => onMouseEnter(menu_item_code) },
+            React.createElement("div", { onClick: () => onClickFeatureMenuItem(item) }, renderLabel())));
+    }, [activeAppCode, state.hoverItem, onClickFeatureMenuItem, onMouseEnter]);
     const renderRecommendationMenuItem = useCallback((item) => {
         const { menu_item_name, menu_item, icon_name, permission_code } = item;
         const isActive = customActiveAppKey === permission_code;

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

@@ -54,6 +54,9 @@ export const ChildMenu = memo(props => {
     const [openKeys, setOpenKeys] = useState([]);
     const { pathname, hash } = window.location;
     const { isPushDifferentDomain, getPath, navigatePath } = useNavigatePath();
+    useDeepCompareEffect(() => {
+        setOpenKeys((items === null || items === void 0 ? void 0 : items.map(item => item.key)) || []);
+    }, [items]);
     useDeepCompareEffect(() => {
         switch (true) {
             case isCustomized: {
@@ -132,25 +135,31 @@ export const ChildMenu = memo(props => {
         env,
     ]);
     const onClick = e => {
-        var _a;
         if (isRecommendation) {
-            const permissionCode = (_a = recursiveFindItemByKey({
-                activeKey: e.key,
-                menuItems: items || [],
-            })) === null || _a === void 0 ? void 0 : _a.permission_code;
-            const permissionCodePath = (() => {
+            const [permissionCode, permissionCodePath] = (() => {
                 var _a;
-                const array = [];
-                (_a = e.keyPath) === null || _a === void 0 ? void 0 : _a.forEach(item => {
+                if (e.key === 'WEB_PERSONALIZE') {
+                    return ['WEB_PERSONALIZE-JOURNEY', ['WEB_PERSONALIZE-JOURNEY']];
+                }
+                const permissionCode = (_a = recursiveFindItemByKey({
+                    activeKey: e.key,
+                    menuItems: items || [],
+                })) === null || _a === void 0 ? void 0 : _a.permission_code;
+                const permissionCodePath = (() => {
                     var _a;
-                    const permissionCode = (_a = recursiveFindItemByKey({
-                        activeKey: item,
-                        menuItems: items || [],
-                    })) === null || _a === void 0 ? void 0 : _a.permission_code;
-                    if (permissionCode)
-                        array.push(permissionCode);
-                });
-                return uniq(array);
+                    const array = [];
+                    (_a = e.keyPath) === null || _a === void 0 ? void 0 : _a.forEach(item => {
+                        var _a;
+                        const permissionCode = (_a = recursiveFindItemByKey({
+                            activeKey: item,
+                            menuItems: items || [],
+                        })) === null || _a === void 0 ? void 0 : _a.permission_code;
+                        if (permissionCode)
+                            array.push(permissionCode);
+                    });
+                    return uniq(array);
+                })();
+                return [permissionCode, permissionCodePath];
             })();
             if (permissionCode)
                 onMenuClick === null || onMenuClick === void 0 ? void 0 : onMenuClick(permissionCode, permissionCodePath);

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

@@ -34,6 +34,7 @@ export const HOME_MENU_ITEMS = {
         menu_item_name: 'Dashboard',
         menu_item_code: 'ownedDashboard',
         icon_name: 'icon-ants-dashboard',
+        menu_item_path: HOME_ROUTE,
         page_title: '_dashboard',
     },
 };

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

@@ -1,4 +1,5 @@
 import { LeftMenuProps } from '..';
+import { TFeatureMenu } from '@antscorp/antsomi-ui/es/models/LeftMenu';
 interface TState {
     hoverItem: string;
     isExpandMenu: boolean;
@@ -7,12 +8,13 @@ interface TState {
 export declare const useLeftMenu: (props: LeftMenuProps) => {
     state: TState;
     activeAppCode: string;
-    permissionMenu: import("../../../../models/LeftMenu").TFeatureMenu[];
+    permissionMenu: TFeatureMenu[];
     customActiveAppKey: string;
     onToggleChildMenu: () => void;
     onMouseEnter: (key: string) => void;
     onMouseLeave: () => void;
     onHoverMenuBar: () => void;
     onShowPopover: (hoverItem?: string) => void;
+    onClickFeatureMenuItem: (item: TFeatureMenu) => void;
 };
 export {};

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

@@ -10,7 +10,9 @@ import { useLeftMenuContext } from '../contexts';
 import { DASHBOARD_MODULE_CONFIG } from '../../../template/Layout/constants';
 // Hooks
 import { usePermission } from './usePermission';
-import { useDeepCompareEffect } from '@antscorp/antsomi-ui/es/hooks';
+import { useCustomRouter, useDeepCompareEffect } from '@antscorp/antsomi-ui/es/hooks';
+import { useNavigatePath } from './useNavigatePath';
+import { flatTree } from '@antscorp/antsomi-ui/es/utils';
 export const useLeftMenu = (props) => {
     // Props
     const { objectType = DASHBOARD_MODULE_CONFIG.objectType, objectId = DASHBOARD_MODULE_CONFIG.objectId, isGrouped = DASHBOARD_MODULE_CONFIG.isGrouped, appConfig, customization, onActiveMenuCodeChange, } = props;
@@ -28,12 +30,16 @@ export const useLeftMenu = (props) => {
                 return 'SQL_WORKSPACE';
             case 'DATASOURCES-APP_ANTALYSER':
                 return 'DATASOURCES-SQL_WORKSPACE';
+            case 'WEB_PERSONALIZE-JOURNEY':
+                return 'WEB_PERSONALIZE';
             default:
                 return activeKey;
         }
     }, [activeKey, isRecommendation]);
     const cookies = new ReactCookies();
     const { pathname, hash, origin } = window.location;
+    const { navigate } = useCustomRouter();
+    const { isPushDifferentDomain, getPath, navigatePath } = useNavigatePath();
     const activeAppCode = useLeftMenuContext(store => store.activeAppCode);
     const customActiveAppKey = useLeftMenuContext(store => store.customActiveAppKey);
     const setLeftMenuContextState = useLeftMenuContext(store => store.setState);
@@ -242,6 +248,38 @@ export const useLeftMenu = (props) => {
     const onHoverMenuBar = useCallback(() => {
         onMouseEnter(isCustomized ? customActiveAppKey : activeAppCode);
     }, [activeAppCode, customActiveAppKey, isCustomized, onMouseEnter]);
+    const onClickFeatureMenuItem = useCallback((item) => {
+        // Destructure permission_code from the item object
+        const { permission_code } = item;
+        // Initialize navigateInfo object with menu_item_domain and menu_item_path from the item
+        let navigateInfo = {
+            menu_item_domain: item.menu_item_domain,
+            menu_item_path: item.menu_item_path,
+        };
+        // Check if permission_code exists
+        if (permission_code) {
+            // Flatten the tree structure of item.children into a single array, filtering out items that have children
+            const flattenChildMenu = flatTree(item.children, 'children').filter(item => !item.children);
+            // Find the first child menu item that matches the permission_code or fallback to the first item in the array or the original item
+            const matchedChildMenu = (flattenChildMenu === null || flattenChildMenu === void 0 ? void 0 : flattenChildMenu.find(child => child.permission_code === permission_code)) ||
+                (flattenChildMenu === null || flattenChildMenu === void 0 ? void 0 : flattenChildMenu[0]) ||
+                item;
+            // If a matching child menu item is found, update navigateInfo with its domain and path
+            if (matchedChildMenu) {
+                navigateInfo = {
+                    menu_item_domain: matchedChildMenu.menu_item_domain,
+                    menu_item_path: matchedChildMenu.menu_item_path,
+                };
+            }
+        }
+        // Check if navigating to a different domain
+        if (!isPushDifferentDomain(navigateInfo.menu_item_domain, navigateInfo.menu_item_path)) {
+            // If not, navigate to the path using getPath and return
+            return navigate(getPath(navigateInfo.menu_item_path));
+        }
+        // If navigating to a different domain, use navigatePath with domain and path
+        navigatePath(navigateInfo.menu_item_domain, navigateInfo.menu_item_path);
+    }, [getPath, isPushDifferentDomain, navigate, navigatePath]);
     return {
         state,
         activeAppCode,
@@ -252,5 +290,6 @@ export const useLeftMenu = (props) => {
         onMouseLeave,
         onHoverMenuBar,
         onShowPopover,
+        onClickFeatureMenuItem,
     };
 };

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

@@ -132,7 +132,7 @@ export const recursiveGetInitialFeatureMenuItem = (featureMenuItem) => (Object.a
 export const recursiveGetMenuItemByPermission = (featureMenuItem) => {
     var _a;
     return ({
-        key: featureMenuItem.permission_code || 'null',
+        key: featureMenuItem.permission_code || featureMenuItem.menu_item_code || 'null',
         label: featureMenuItem.menu_item_name,
         icon: featureMenuItem.icon_name,
         logo_url: featureMenuItem.logo_url,
@@ -339,6 +339,10 @@ export const findLastMatchedItemByUrl = (args) => {
             }
         };
         recursiveFindActiveItem(menuItems || []);
+        const recommendationItem = matchedItems.find(item => item.menu_item_code === HOME_MENU_ITEMS.RECOMMENDATION.menu_item_code);
+        if (recommendationItem) {
+            return recommendationItem;
+        }
         return matchedItems === null || matchedItems === void 0 ? void 0 : matchedItems.pop();
     }
     catch (error) {

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

@@ -142,11 +142,12 @@ export const Layout = memo(props => {
     return (React.createElement(LayoutWrapper, { showLeftMenu: !!showLeftMenu },
         React.createElement(Helmet, null,
             React.createElement("meta", { charSet: "utf-8" }),
-            React.createElement("title", null, (header === null || header === void 0 ? void 0 : header.browserTitle) || (header === null || header === void 0 ? void 0 : header.pageTitle)
-                ? isString(header === null || header === void 0 ? void 0 : header.pageTitle)
-                    ? header === null || header === void 0 ? void 0 : header.pageTitle
-                    : ''
-                : activePageTitle)),
+            React.createElement("title", null, (header === null || header === void 0 ? void 0 : header.browserTitle) ||
+                ((header === null || header === void 0 ? void 0 : header.pageTitle)
+                    ? isString(header === null || header === void 0 ? void 0 : header.pageTitle)
+                        ? header === null || header === void 0 ? void 0 : header.pageTitle
+                        : ''
+                    : activePageTitle))),
         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: leftMenuAppConfig, onActiveMenuCodeChange: onActiveMenuCodeChange }))),

package/es/components/template/Layout/components/RecommendationWorkspace/components/MenuMapping/components/OldLeftMenu/index.js

@@ -31,6 +31,8 @@ export const OldLeftMenu = memo(props => {
                 return 'DATASOURCES-APP_ANTALYSER';
             case 'EXPLORERS':
                 return 'ANALYSIS';
+            case 'WEB_PERSONALIZE-JOURNEY':
+                return 'JOURNEY';
             default:
                 return activeKey;
         }

package/package.json

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