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

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

@@ -11,6 +11,7 @@ interface EditableNameProps {
     value?: string;
     style?: React.CSSProperties;
     readonly?: boolean;
+    maxLength?: number;
     onBlur?: React.FocusEventHandler<HTMLInputElement>;
     onChange?: (value: string) => void;
 }

package/es/components/molecules/EditableName/EditableName.js

@@ -3,12 +3,15 @@ import { InputWrapperStyled } from './styled';
 import { Input, Tooltip } from 'antd';
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 import Icon from '@antscorp/icons';
+import { useInView } from 'react-intersection-observer';
 import { Spin } from '../../atoms';
 export const EditableName = React.forwardRef((props, ref) => {
     var _a;
-    const { className, isLoading, defaultValue, required, error, value, style, readonly, onBlur, onChange, } = props;
+    const { className, isLoading, required, error, value, style, readonly, maxLength, onBlur, onChange, } = props;
+    const defaultValue = useRef(props.defaultValue);
     const [inputWidth, setInputWidth] = useState(1);
-    const [internalValue, setInternalValue] = useState(value || defaultValue || '');
+    const [internalValue, setInternalValue] = useState(value || defaultValue.current || '');
+    const { ref: componentInViewRef, inView: componentInView } = useInView();
     const requiredError = useMemo(() => {
         const newValue = value ? value.trim() : internalValue.trim();
         return required && newValue.length === 0 ? 'This field is required' : '';
@@ -29,16 +32,14 @@ export const EditableName = React.forwardRef((props, ref) => {
     };
     useEffect(() => {
         var _a;
-        if (spanRef.current) {
-            spanRef.current.innerText = value || defaultValue || '';
-            setInputWidth(((_a = spanRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 1);
-        }
-        // NOTE: the defaultValue props should need use only one time and don't change in component life circle
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [value]);
-    return (React.createElement(InputWrapperStyled, { className: className || '', style: style },
+        if (!spanRef.current || !componentInView)
+            return;
+        spanRef.current.innerText = value || defaultValue.current || '';
+        setInputWidth(((_a = spanRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 1);
+    }, [value, componentInView]);
+    return (React.createElement(InputWrapperStyled, { className: className || '', style: style, ref: componentInViewRef },
         React.createElement(Tooltip, { title: value || internalValue },
-            React.createElement(Input, { readOnly: readonly, ref: inputRef, style: { width: inputWidth + 2 }, defaultValue: defaultValue, value: value, onChange: event => {
+            React.createElement(Input, { readOnly: readonly, ref: inputRef, style: { width: inputWidth + 2 }, defaultValue: defaultValue.current, value: value, onChange: event => {
                     var _a;
                     const newValue = event.target.value;
                     if (spanRef.current)
@@ -46,7 +47,7 @@ export const EditableName = React.forwardRef((props, ref) => {
                     setInputWidth(((_a = spanRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 1);
                     setInternalValue(newValue);
                     onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
-                }, onBlur: onBlur, onKeyDown: onKeyDown })),
+                }, onBlur: onBlur, onKeyDown: onKeyDown, maxLength: maxLength })),
         isLoading ? (React.createElement(Spin, { indicatorSize: 20, style: { paddingLeft: '5px', marginLeft: '10px', alignSelf: 'center' } })) : null,
         (error || requiredError) && !isLoading ? (React.createElement("div", { className: "suffix-icon-error" },
             React.createElement(Tooltip, { title: error || requiredError },

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

@@ -84,7 +84,9 @@ export const HeaderV2 = memo(props => {
         iamDomain,
         accountId: userId,
         networkId: portalId,
-        urlEditProfile: `${permissionDomain}/${portalId}#/account/profile/`,
+        // NOTE: old edit link
+        // urlEditProfile: `${permissionDomain}/${portalId}#/account/profile/`,
+        urlEditProfile: `${permissionDomain}/${portalId}#/${userId}/permission/account?ui=drawer-detail&accountId=${userId}&tab=settings`,
         // 6006 is storybook port so direct to sandbox page
         urlLogout: urlLogoutProvider || window.location.origin,
         // urlLogout: window.location.origin,

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.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,6 +13,7 @@ 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;
@@ -49,6 +50,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: {
@@ -84,10 +87,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({
@@ -102,6 +105,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.5-beta.382",
+  "version": "1.3.5-beta.384",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",
@@ -59,7 +59,7 @@
     "not op_mini all"
   ],
   "dependencies": {
-    "@antscorp/icons": "0.27.36",
+    "@antscorp/icons": "0.27.37",
     "@antscorp/image-editor": "1.0.2",
     "@antscorp/processing-notification": "^1.0.3",
     "@dnd-kit/core": "^6.1.0",
@@ -111,6 +111,7 @@
     "react-draggable": "^4.4.5",
     "react-frame-component": "^5.2.6",
     "react-konva": "^18.2.10",
+    "react-intersection-observer": "^9.10.3",
     "react-markdown": "^8.0.7",
     "react-resizable": "^3.0.5",
     "react-syntax-highlighter": "^15.5.0",