@antscorp/antsomi-ui 1.3.5-beta.435 → 1.3.5-beta.437

package/es/components/organism/DataTable/hooks/useDataTableListing/useDataTableListing.d.ts

@@ -24,6 +24,7 @@ interface TUseDataTableListing<TTableType = any> {
         getFilterMetricList: ReturnType<typeof useGetFilterMetricList>;
         getSearchListing: ReturnType<typeof useGetSearchListing>;
     };
+    onChangeSelectedRow: (selectedRowKeys: React.Key[], selectedRows?: TTableType[]) => void;
     setDatTableListingState: React.Dispatch<React.SetStateAction<TState<TTableType>>>;
 }
 type TState<TTableType = any> = {

package/es/components/organism/DataTable/hooks/useDataTableListing/useDataTableListing.js

@@ -75,7 +75,7 @@ export function useDataTableListing(props) {
     const _f = apiSearch || {}, { url: searchUrl = '', enabled: enabledApiSearch = true } = _f, restOfApiSearchRequest = __rest(_f, ["url", "enabled"]);
     const { filters, selectedFilterId, pagination, selectedRowKeys, searchValue, table, sorter, selectedRow, } = state;
     const { externalFilters, includeDataType = false } = filterProps || {};
-    const { sortDirectionKey = 'az' } = tableProps || {};
+    const { sortDirectionKey = 'az', mainColumnKey } = tableProps || {};
     const modifyColumnAuth = Object.assign(Object.assign({}, auth), { url: columnUrl });
     const filterAuth = Object.assign(Object.assign({}, auth), { url: filterUrl });
     const listingAuth = Object.assign(Object.assign({}, auth), { url: listingUrl });
@@ -471,6 +471,14 @@ export function useDataTableListing(props) {
             pageSize,
         });
     }, [handleUpdatePagination]);
+    const onChangeSelectedRow = useCallback((selectedRowKeys, selectedRows) => {
+        setState(prev => (Object.assign(Object.assign({}, prev), { selectedRowKeys, selectedRow: {
+                keys: selectedRowKeys,
+                rows: selectedRows ||
+                    (selectedRowKeys === null || selectedRowKeys === void 0 ? void 0 : selectedRowKeys.map(key => tableData === null || tableData === void 0 ? void 0 : tableData.find(row => { var _a; return ((_a = row[mainColumnKey]) === null || _a === void 0 ? void 0 : _a.toString()) === key.toString(); })).filter(Boolean)) ||
+                    [],
+            } })));
+    }, [mainColumnKey, tableData]);
     return {
         /* Modify Column */
         modifyColumn: {
@@ -506,10 +514,8 @@ export function useDataTableListing(props) {
             dataSource: tableData,
             columnWidths: table.columnWidths || {},
             rowSelection: {
-                selectedRowKeys,
-                onChange(selectedRowKeys, selectedRows) {
-                    setState(prev => (Object.assign(Object.assign({}, prev), { selectedRowKeys, selectedRow: { keys: selectedRowKeys, rows: selectedRows } })));
-                },
+                selectedRowKeys: selectedRow.keys || [],
+                onChange: onChangeSelectedRow,
             },
             onChange: onChangeTable,
             onColumnResize(data) {
@@ -549,6 +555,7 @@ export function useDataTableListing(props) {
             getSearchListing,
         },
         // Handles
+        onChangeSelectedRow,
         setDatTableListingState: setState,
     };
 }

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

@@ -37,9 +37,9 @@ export const LeftMenuComponent = memo(props => {
             return React.createElement(CustomMenu, { isHover: true });
         switch (appActiveKey) {
             case isRecommendation ? 'DASHBOARD' : APP_KEYS.HOME:
-                return React.createElement(HomeMenu, { isHover: true });
+                return React.createElement(HomeMenu, { isHover: !isRecommendation });
             default:
-                return React.createElement(CommonMenu, { isHover: true });
+                return React.createElement(CommonMenu, { isHover: !isRecommendation });
         }
     }, [isCustomized, isRecommendation, state.hoverItem]);
     const renderFeatureMenuItem = useCallback((item) => {

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

@@ -21,9 +21,10 @@ import { useLayoutStore } from '@antscorp/antsomi-ui/es/components/template';
 import { useCustomRouter } from '@antscorp/antsomi-ui/es/hooks';
 // Queries
 import { useRemoveDashboard } from '@antscorp/antsomi-ui/es/queries/LeftMenu';
+import { ENV } from '@antscorp/antsomi-ui/es/config';
 export const useHomeMenu = (props) => {
     const { isHover } = props;
-    const { pathname, search } = window.location;
+    const { pathname, search, origin } = window.location;
     const { navigate, replace } = useCustomRouter();
     const appMenuChildren = useLeftMenuContext(store => store.appMenuChildren);
     const appHoverMenuChildren = useLeftMenuContext(store => store.appHoverMenuChildren);
@@ -66,11 +67,16 @@ export const useHomeMenu = (props) => {
             onClickCreateDashboard(e);
         }
         else {
-            navigate(getGeneratePath(HOME_ROUTE, auth));
-            urlParams.set('type', HOME_REPORT_ROUTES.CREATE);
-            replace({ search: urlParams.toString() });
+            if (env !== ENV.DEV && origin !== (CDP_API === null || CDP_API === void 0 ? void 0 : CDP_API[`${env}`])) {
+                window.location.assign(`${CDP_API === null || CDP_API === void 0 ? void 0 : CDP_API[`${env}`]}${HOME_ROUTE}?${urlParams.toString()}`);
+            }
+            else {
+                navigate(getGeneratePath(HOME_ROUTE, auth));
+                urlParams.set('type', HOME_REPORT_ROUTES.CREATE);
+                replace({ search: urlParams.toString() });
+            }
         }
-    }, [auth, navigate, onClickCreateDashboard, replace, urlParams]);
+    }, [auth, env, navigate, onClickCreateDashboard, origin, replace, urlParams]);
     const onMenuClick = useCallback((key, _keyPath) => {
         if (!isRecommendation) {
             const newPathName = getGeneratePath(HOME_REPORT_ROUTES.DETAIL, Object.assign(Object.assign({}, auth), { dashboardId: key }));

package/es/components/organism/LeftMenu/components/common/ChildMenu/components/MenuItemImage/styled.js

@@ -8,7 +8,7 @@ import { Flex } from '../../../../../../../atoms';
 export const MaskImage = styled.div `
   width: ${ICON_SIZE}px;
   height: ${ICON_SIZE}px;
-  background: black;
+  background: #595959;
   mask-size: contain;
   mask-position: center center;
   mask-repeat: no-repeat;

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

@@ -175,7 +175,7 @@ export const ChildMenu = memo(props => {
                             style: styles.dropdownMenu,
                         }, trigger: ['click'] },
                         React.createElement(Icon, { className: "child-menu-item-icon", type: "icon-ants-three-dot-vertical", style: styles.dotIcon })))),
-                !(children === null || children === void 0 ? void 0 : children.length) && isRecommendation && !!menu_item_path && (React.createElement(Link, { to: getPath(menu_item_path), className: "icon-link", onClick: e => e.stopPropagation() },
+                !(children === null || children === void 0 ? void 0 : children.length) && isRecommendation && !!menu_item_path && (React.createElement(Link, { to: getPath(menu_item_path), className: "icon-link", target: "_blank", onClick: e => e.stopPropagation() },
                     React.createElement(Icon, { type: "icon-ants-open-in-new-window" })))));
             const renderIcon = () => {
                 var _a;

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

@@ -98,6 +98,7 @@ export const useLeftMenu = (props) => {
                     customActiveAppKey: findActiveAppCodeByChild({
                         activeCurrentKey: mappedActiveKey || '',
                         menuItems: mappingChildrenMenu === null || mappingChildrenMenu === void 0 ? void 0 : mappingChildrenMenu.map(item => recursiveGetMenuItemByPermission(item)),
+                        isRecommendation: true,
                     }) || '',
                     customActiveCurrentKey: mappedActiveKey,
                 });

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

@@ -103,6 +103,7 @@ export declare const findPathOfActiveItem: (args: {
 export declare const findActiveAppCodeByChild: (args: {
     activeCurrentKey: string;
     menuItems: TMenuItem[];
+    isRecommendation?: boolean;
 }) => string | undefined;
 export declare const getCustomActiveAppCode: (args: {
     activeKey: string;

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

@@ -340,17 +340,26 @@ export const findPathOfActiveItem = (args) => {
  */
 export const findActiveAppCodeByChild = (args) => {
     try {
-        const { activeCurrentKey, menuItems } = args;
+        const { activeCurrentKey, menuItems, isRecommendation } = args;
         let activeAppCode;
-        const recursiveCheckHasActiveChild = (items) => {
+        const recursiveCheckHasActiveChild = (items, parentKey) => {
             let matchedAppCode = false;
             for (const item of items) {
-                if (item.key === activeCurrentKey) {
-                    matchedAppCode = true;
-                    break;
+                if (isRecommendation && activeCurrentKey.includes('DATASOURCES')) {
+                    const [activeKey, activeParentKey] = activeCurrentKey.split('-');
+                    if (item.key === activeKey && parentKey === activeParentKey) {
+                        matchedAppCode = true;
+                        break;
+                    }
+                }
+                else {
+                    if (item.key === activeCurrentKey) {
+                        matchedAppCode = true;
+                        break;
+                    }
                 }
                 if ((item === null || item === void 0 ? void 0 : item.children) && item.children.length) {
-                    matchedAppCode = recursiveCheckHasActiveChild(item.children);
+                    matchedAppCode = recursiveCheckHasActiveChild(item.children, item.key);
                     if (matchedAppCode) {
                         break;
                     }
@@ -363,7 +372,7 @@ export const findActiveAppCodeByChild = (args) => {
                 activeAppCode = activeCurrentKey;
                 break;
             }
-            const hasActiveChild = recursiveCheckHasActiveChild((menuItem === null || menuItem === void 0 ? void 0 : menuItem.children) || []);
+            const hasActiveChild = recursiveCheckHasActiveChild((menuItem === null || menuItem === void 0 ? void 0 : menuItem.children) || [], menuItem.key);
             if (hasActiveChild) {
                 activeAppCode = menuItem.key;
                 break;

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

@@ -49,25 +49,32 @@ export const OldLeftMenu = memo(props => {
             },
         },
     });
-    const parentKeys = useMemo(() => recursiveFindParentOfActiveItem({
-        activeMenuItem: mappedActiveKey,
-        menuItems: menuListPermission || [],
-    }), [mappedActiveKey, menuListPermission]);
+    const parentKeys = useMemo(() => {
+        var _a;
+        if (mappedActiveKey.includes('DATASOURCES')) {
+            return (_a = mappedActiveKey === null || mappedActiveKey === void 0 ? void 0 : mappedActiveKey.split('-')) === null || _a === void 0 ? void 0 : _a[1];
+        }
+        return recursiveFindParentOfActiveItem({
+            activeMenuItem: mappedActiveKey,
+            menuItems: menuListPermission || [],
+        });
+    }, [mappedActiveKey, menuListPermission]);
     useLayoutEffect(() => setOpenKeys(parentKeys ? [parentKeys] : []), [parentKeys]);
     const onMenuClick = e => {
         onMenuItemClick === null || onMenuItemClick === void 0 ? void 0 : onMenuItemClick(e.key, uniq(e.keyPath));
     };
     const renderMenu = () => {
         var _a;
-        const recursiveGetMenuItem = (featureMenuPermission) => {
+        const recursiveGetMenuItem = (featureMenuPermission, parentKey) => {
             const { app_code, menu_code, app_name = '', menu_name = '', icon, childs, } = featureMenuPermission;
+            const key = menu_code === 'DATASOURCES' ? `${menu_code}-${parentKey}` : menu_code || '';
             return {
-                key: app_code || menu_code || '',
+                key: app_code || key,
                 label: app_code ? (React.createElement(AppLabel, null,
                     React.createElement(Typography.Text, { ellipsis: { tooltip: app_name.toUpperCase() } }, app_name.toUpperCase()))) : (React.createElement(MenuLabel, null,
                     React.createElement(Typography.Text, { ellipsis: { tooltip: menu_name } }, menu_name))),
                 icon: icon ? React.createElement(IconWrapper, { url: icon }) : undefined,
-                children: childs === null || childs === void 0 ? void 0 : childs.map(item => recursiveGetMenuItem(omit(item, ['childs']))),
+                children: childs === null || childs === void 0 ? void 0 : childs.map(item => recursiveGetMenuItem(omit(item, ['childs']), app_code)),
             };
         };
         const items = ((_a = orderBy(menuListPermission === null || menuListPermission === void 0 ? void 0 : menuListPermission.map(item => (Object.assign(Object.assign({}, item), { app_order: Number(item.app_order) }))), ['app_order'], ['asc'])) === null || _a === void 0 ? void 0 : _a.map(item => recursiveGetMenuItem(item))) || [];

package/es/components/template/Layout/components/RecommendationWorkspace/components/MenuMapping/styled.js

@@ -22,6 +22,7 @@ export const MenuMappingWrapper = styled.div `
   max-height: 100%;
   overflow: hidden;
   height: 763px;
+  flex-shrink: 0;
   border-radius: ${(_a = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _a === void 0 ? void 0 : _a.borderRadiusXL}px;
 
   ${MenuMappingContainer} {

package/es/components/template/Layout/components/RecommendationWorkspace/components/RecommendationImage/index.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { Flex, Typography } from '../../../../../../atoms';
+import { Typography } from '../../../../../../atoms';
 // Assets
 import recommendationHumanImage from '@antscorp/antsomi-ui/es/assets/images/components/Layout/recommendation-human.png';
-import { ImageWrapper, MessageWrapper } from './styled';
-export const RecommendationImage = () => (React.createElement(Flex, { gap: 40, vertical: true },
+import { ImageWrapper, MessageWrapper, RecommendationImageWrapper } from './styled';
+export const RecommendationImage = () => (React.createElement(RecommendationImageWrapper, null,
     React.createElement(MessageWrapper, null,
         React.createElement(Typography.Paragraph, null, `Having Trouble Navigating the New Menus? Let's Map Functions Together!`),
         React.createElement("div", { className: "arrow-triangle-down" })),

package/es/components/template/Layout/components/RecommendationWorkspace/components/RecommendationImage/styled.d.ts

@@ -1,2 +1,3 @@
 export declare const MessageWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ImageWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const RecommendationImageWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/components/template/Layout/components/RecommendationWorkspace/components/RecommendationImage/styled.js

@@ -5,6 +5,7 @@ export const MessageWrapper = styled.div `
   background-color: #eef5fc;
   border-radius: 30px;
   position: relative;
+  flex-shrink: 0;
 
   & > div.antsomi-typography {
     margin: 0px !important;
@@ -27,13 +28,23 @@ export const MessageWrapper = styled.div `
   }
 `;
 export const ImageWrapper = styled.div `
-  width: 215px;
-  height: auto;
-  min-height: 505px;
+  width: 100%;
+  height: 100%;
+  flex: 1 1 0%;
+  overflow: hidden;
 
   img {
-    width: 100%;
-    height: auto;
+    width: auto;
+    height: 100%;
+    max-height: 505px;
     object-fit: contain;
   }
 `;
+export const RecommendationImageWrapper = styled.div `
+  display: flex;
+  gap: 40px;
+  max-height: 700px;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+`;

package/es/components/template/TemplateListing/components/CategoryListing/index.js

@@ -20,7 +20,6 @@ import { CustomLabelStyled, CustomRootLabel, MenuWrapper, TextWrapper } from './
 // Components
 import { Checkbox, Scrollbars, Spin } from '../../../../atoms';
 import { Menu } from '../../../../organism';
-import { Empty } from '../Empty';
 // Utils
 import { handleError } from '@antscorp/antsomi-ui/es/utils';
 // Constants
@@ -118,8 +117,7 @@ export const CategoryListing = memo(props => {
         header,
         React.createElement(Scrollbars, { className: "category__listing" },
             React.createElement(Spin, { spinning: loading, wrapperClassName: "template-listing__loading" },
-                isEmpty(menuItems) && !loading ? (React.createElement("div", { className: "empty-wrapper" },
-                    React.createElement(Empty, Object.assign({}, emptyProps)))) : (React.createElement(Menu, Object.assign({ selectedKeys: [], items: menuItems, inlineIndent: 0, mode: "inline", defaultOpenKeys: items === null || items === void 0 ? void 0 : items.map(item => String(item.key)), expandIcon: ({ isOpen }) => {
+                React.createElement(Menu, Object.assign({ selectedKeys: [], items: menuItems, inlineIndent: 0, mode: "inline", defaultOpenKeys: items === null || items === void 0 ? void 0 : items.map(item => String(item.key)), expandIcon: ({ isOpen }) => {
                         var _a;
                         return (React.createElement(Icon, { type: "icon-ants-expand-more", style: {
                                 fontSize: 20,
@@ -139,7 +137,7 @@ export const CategoryListing = memo(props => {
                     //     }}
                     //   />
                     // }
-                    onClick: handleClickMenu }, restOfProps))),
+                    onClick: handleClickMenu }, restOfProps)),
                 footer)))) : null;
 });
 CategoryListing.displayName = 'CategoryListing';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.5-beta.435",
+  "version": "1.3.5-beta.437",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",
@@ -111,6 +111,7 @@
     "react-custom-scrollbars": "^4.2.1",
     "react-draggable": "^4.4.5",
     "react-frame-component": "^5.2.6",
+    "react-konva": "^18.2.10",
     "react-intersection-observer": "^9.10.3",
     "react-konva": "^18.2.10",
     "react-markdown": "^8.0.7",