@antscorp/antsomi-ui 1.3.5-beta.596 → 1.3.5-beta.598

package/es/components/icons/ExpandMoreIcon.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { IconProps } from './types';
+export declare const ExpandMoreIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;

package/es/components/icons/ExpandMoreIcon.js

@@ -0,0 +1,7 @@
+import React, { forwardRef } from 'react';
+import { useIcon } from './hooks/useIcon';
+export const ExpandMoreIcon = forwardRef((props, ref) => {
+    const { width, height } = useIcon(props);
+    return (React.createElement("svg", Object.assign({ viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { ref: ref, width: width, height: height }),
+        React.createElement("path", { d: "M16.5938 8.57812L18 9.98438L12 15.9844L6 9.98438L7.40625 8.57812L12 13.1719L16.5938 8.57812Z", fill: "currentColor" })));
+});

package/es/components/icons/index.d.ts

@@ -238,3 +238,4 @@ export { WebIcon } from './WebIcon';
 export { WebhookIcon } from './WebhookIcon';
 export { WidgetIcon } from './WidgetIcon';
 export { WritingAIAssitantIcon } from './WritingAIAssitantIcon';
+export { ExpandMoreIcon } from './ExpandMoreIcon';

package/es/components/icons/index.js

@@ -238,3 +238,4 @@ export { WebIcon } from './WebIcon';
 export { WebhookIcon } from './WebhookIcon';
 export { WidgetIcon } from './WidgetIcon';
 export { WritingAIAssitantIcon } from './WritingAIAssitantIcon';
+export { ExpandMoreIcon } from './ExpandMoreIcon';

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

@@ -42,6 +42,7 @@ export interface HeaderV2Props {
         permissionDomain?: string;
         iamDomain?: string;
     };
+    onCLickLogo?: () => void;
 }
 export declare const HeaderV2: React.FC<HeaderV2Props>;
 export {};

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

@@ -32,7 +32,7 @@ export const HeaderV2 = memo(props => {
     const { search } = useLocation();
     const { replace } = useCustomRouter();
     // * Prefer to use Header in AppConfigContext
-    const { show = true, className, style, breadcrumbs, showLogo = false, rightContent, pageTitle = '', accountSelection = {}, helpConfig, notificationConfig = {}, accountSharingConfig, useURLParam, config, } = props;
+    const { show = true, className, style, breadcrumbs, showLogo = false, rightContent, pageTitle = '', accountSelection = {}, helpConfig, notificationConfig = {}, accountSharingConfig, useURLParam, config, onCLickLogo, } = props;
     /** General config for children component */
     const { env = envContext, language = languageCode, userId = isNaN(Number(auth === null || auth === void 0 ? void 0 : auth.userId)) ? 0 : Number(auth === null || auth === void 0 ? void 0 : auth.userId), portalId = auth === null || auth === void 0 ? void 0 : auth.portalId, token = auth === null || auth === void 0 ? void 0 : auth.token, permissionDomain = PERMISSION_API, iamDomain = IAM_API, appCode = contextAppCode, menuCode = contextMenuCode, } = config || {};
     const { currentAccount, inputStyle = 'select', onSelectAccount } = accountSelection, accountSelectionProps = __rest(accountSelection, ["currentAccount", "inputStyle", "onSelectAccount"]);
@@ -110,7 +110,7 @@ export const HeaderV2 = memo(props => {
     const QUOTE_ENTITY = React.createElement(React.Fragment, null, "\u00BB");
     return (React.createElement(HeaderV2Styled, { "$show": show, className: className || '', style: style },
         React.createElement("div", { className: "left-side" },
-            showLogo && (React.createElement(LogoWrapper, { className: "logo-wrapper" },
+            showLogo && (React.createElement(LogoWrapper, { className: "logo-wrapper", onClick: onCLickLogo },
                 React.createElement("img", { src: SubLogoAntsomi, alt: "Antsomi sub logo" }))),
             React.createElement(AccountSelection, Object.assign({}, accountSelectionProps, { currentAccount: selectedAccount, apiConfig: accountSelectionApiConfig, onChange: handleChangeAccount, inputStyle: inputStyle, refreshOnSelect: true })),
             React.createElement("div", { className: "title-container" },

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

@@ -6,6 +6,7 @@ import { THEME, globalToken } from '@antscorp/antsomi-ui/es/constants';
 export const LogoWrapper = styled.div `
   height: 30px;
   width: 30px;
+  cursor: pointer;
 
   img {
     height: 100%;

package/es/components/organism/AccountSharing/AccountSharing.js

@@ -19,12 +19,12 @@ import CloseIcon from './icons/close';
 import SearchIcon from './icons/search';
 import { InnerCardStyled, InputSearchStyled, PackageSharingStyled, TriggerPopoverStyled, } from './styled';
 // Utils
-import { formatUserId } from '@antscorp/antsomi-ui/es/utils';
+import { formatUserId, removeAppCookieSessionSubdomain, removeAppCookieSessionSubdomainPrefix, } from '@antscorp/antsomi-ui/es/utils';
 import { translate } from './utils';
 import Icon from '@antscorp/icons';
 import { useDebounce } from '@antscorp/antsomi-ui/es/hooks/useDebounceV2';
 import { DEFAULT_TRANSLATE_DATA } from './constant';
-import { THEME, UOGS_PREFIX } from '@antscorp/antsomi-ui/es/constants';
+import { CDP_ROUTE, THEME, UOGS_PREFIX } from '@antscorp/antsomi-ui/es/constants';
 import { useAppConfigContext } from '../../..';
 // Constants
 import { ENV } from '@antscorp/antsomi-ui/es/config';
@@ -229,18 +229,33 @@ export const AccountSharing = props => {
     });
     // const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms))
     const onClickButtonLogout = useCallback(() => {
-        removeCookie(`${UOGS_PREFIX}${networkId}`, Object.assign(Object.assign({}, (env !== ENV.DEV && {
-            domain: `.${origin.split('.').splice(-2).join('.')}`,
-        })), { path: '/', sameSite: 'none', secure: true }));
+        // Handle remove cookie and redirect to login
+        removeAppCookieSessionSubdomainPrefix({ name: UOGS_PREFIX, env });
+        removeAppCookieSessionSubdomain({ name: 'c_pid', env });
+        removeAppCookieSessionSubdomain({ name: 'api_token', env });
+        removeAppCookieSessionSubdomain({ name: 'api_r_token', env });
+        removeAppCookieSessionSubdomain({ name: 'api_pid', env });
+        removeAppCookieSessionSubdomain({ name: 'user_id', env });
+        removeAppCookieSessionSubdomain({ name: 'user_logged_in_email', env });
+        removeAppCookieSessionSubdomain({ name: 'user_logged_in_full_name', env });
+        removeAppCookieSessionSubdomain({ name: 'user_logged_in_avatar', env });
+        removeAppCookieSessionSubdomain({ name: '_fe_ogs_pid', env });
+        localStorage.removeItem('cdp_decrypt_permission');
         if (callbackLogout)
             callbackLogout();
-        if (urlLogout) {
-            window.location.href = urlLogout;
-        }
-        else {
+        // Check if env is dev
+        if (env === ENV.DEV) {
             window.location.reload();
+            return;
         }
-    }, [callbackLogout, env, networkId, removeCookie, urlLogout]);
+        // Handle logout with cdp domain
+        window.location.href = `${CDP_ROUTE[ENV.PROD]}/iam#/login`;
+        // if (urlLogout) {
+        //   window.location.href = urlLogout;
+        // } else {
+        //   window.location.reload();
+        // }
+    }, [callbackLogout, env]);
     useEffect(() => {
         const logoutEvent = (event) => {
             const { data } = event;

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

@@ -18,7 +18,7 @@ import { useLeftMenuContext } from './contexts';
 const SubLogoAntsomi = 'https://st-media-template.antsomi.com/icons/antsomi/antsomi.png';
 const homePermissionCode = 'DASHBOARD';
 export const LeftMenuComponent = memo(props => {
-    const { show = true, style, className, customization, showLogo = true } = props;
+    const { show = true, style, className, customization, showLogo = true, onClickLogo } = props;
     const { showMenuPopover = true, showButtonExpand = true, type, items = [], onMenuItemClick, } = customization || {};
     const appHoverMenuChildren = useLeftMenuContext(store => store.appHoverMenuChildren);
     const customHoverMenuChildren = useLeftMenuContext(store => store.customHoverMenuChildren);
@@ -109,7 +109,7 @@ export const LeftMenuComponent = memo(props => {
     return (React.createElement(LeftMenuNavWrapper, { "$show": show, style: style, "$isExpandMenu": state.isExpandMenu, className: className },
         React.createElement(LeftMenuNav, { className: "left-menu-nav" },
             React.createElement(FeatureMenuWrapper, { vertical: true, onMouseEnter: () => onShowPopover(), onMouseLeave: onMouseLeave },
-                showLogo && (React.createElement(NavLogoWrapper, { align: "center", justify: "center", onMouseEnter: onHoverMenuBar },
+                showLogo && (React.createElement(NavLogoWrapper, { align: "center", justify: "center", onMouseEnter: onHoverMenuBar, onClick: onClickLogo },
                     React.createElement("div", { className: "image-wrapper" },
                         React.createElement("img", { src: SubLogoAntsomi, alt: "Antsomi sub logo" })))),
                 React.createElement(FeatureMenu, { role: "menu", className: "antsomi-scroll-box" },

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

@@ -20,6 +20,7 @@ export interface LeftMenuProps {
         defaultExpandMenu?: boolean;
         onMenuItemClick?: (key: string, keyPath: string[]) => void;
     };
+    onClickLogo?: () => void;
     onActiveMenuCodeChange?: (activeItemPath: TFeatureMenu[], flattenPermissionList?: FeatureMenuPermission[], menuListPermission?: FeatureMenuPermission[]) => void;
 }
 export declare const LeftMenu: React.MemoExoticComponent<(props: LeftMenuProps) => React.JSX.Element | null>;

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

@@ -276,6 +276,12 @@ export const Layout = memo(props => {
             }
         }
     }, [antsProcessingNotificationConfig, env]);
+    const onCLickLogo = useCallback(() => {
+        // Redirect to recommendation
+        if (env !== ENV.DEV) {
+            window.location.assign(`${CDP_ROUTE[env || 'development']}/gen2/${portalId}/dashboard/recommendation`);
+        }
+    }, [env, portalId]);
     return (React.createElement(LayoutWrapper, { showLeftMenu: !!showLeftMenu },
         React.createElement(Helmet, null,
             React.createElement("meta", { charSet: "utf-8" }),
@@ -285,7 +291,7 @@ export const Layout = memo(props => {
                         ? header === null || header === void 0 ? void 0 : header.pageTitle
                         : ''
                     : activePageTitle))),
-        React.createElement(HeaderV2, Object.assign({}, mergeHeaderProps, { show: !showOnlyContent, showLogo: !showLeftMenu })),
+        React.createElement(HeaderV2, Object.assign({}, mergeHeaderProps, { show: !showOnlyContent, showLogo: !showLeftMenu, onCLickLogo: onCLickLogo })),
         React.createElement(Flex, { className: "layout-body" },
             React.createElement(LeftMenu, Object.assign({ show: showLeftMenu && !showOnlyContent, className: `layout-body__menu ${leftMenuClassName}` }, mergeLeftMenuProps, { customization: Object.assign(Object.assign({}, mergeLeftMenuProps.customization), { 
                     // If user has access denied, disable expandable

package/es/providers/ConfigProvider/GlobalStyle.js

@@ -191,14 +191,34 @@ export const GlobalStyle = () => {
 
       // NOTE: Just hot fix for easy looking
       .antsomi-btn-primary.antsomi-btn-compact-item.antsomi-btn-compact-first-item {
-        padding-right: 4px !important;
+        padding-right: 6px !important;
       }
       .antsomi-btn-compact-item.antsomi-btn-primary.antsomi-btn-compact-last-item {
         width: fit-content;
-        padding: 0px !important;
-        padding-right: 4px !important;
+        //padding: 0px !important;
+        padding: 0px 4px !important;
         &::before {
-          width: 0px !important;
+          content: '';
+          position: absolute;
+          left: 0px;
+          background-color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.blue5} !important;
+          top: auto !important;
+          height: 80% !important;
+          width: 1px !important;
+        }
+
+        &:disabled {
+          &::before {
+            background-color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw4} !important;
+          }
+        }
+
+        &:not(:disabled) {
+          &:hover {
+            &:: before {
+              opacity: 0;
+            }
+          }
         }
       }
 

package/es/utils/cookie.d.ts

@@ -0,0 +1,10 @@
+import { TEnv } from '../types/config';
+interface RemoveCookieSubDomain {
+    name: string;
+    env?: TEnv;
+    cookieOptions?: Record<string, any>;
+}
+export declare const removeCookieSubDomain: ({ name, env, cookieOptions, }: RemoveCookieSubDomain) => void;
+export declare const removeAppCookieSessionSubdomain: (args: RemoveCookieSubDomain) => void;
+export declare const removeAppCookieSessionSubdomainPrefix: (args: RemoveCookieSubDomain) => void;
+export {};

package/es/utils/cookie.js

@@ -0,0 +1,23 @@
+// Libraries
+import { Cookies } from 'react-cookie';
+import { ENV } from '../config';
+const cookies = new Cookies();
+export const removeCookieSubDomain = ({ name, env = 'development', cookieOptions, }) => {
+    const arrTmp = location.hostname.split('.');
+    cookies.remove(name, Object.assign(Object.assign(Object.assign({}, (env !== ENV.DEV && {
+        domain: arrTmp.length < 4 ? arrTmp.slice(-2).join('.') : arrTmp.slice(-3).join('.'),
+    })), { path: '/', sameSite: 'none', secure: true }), cookieOptions));
+};
+export const removeAppCookieSessionSubdomain = (args) => {
+    removeCookieSubDomain(args);
+    if (typeof Storage !== undefined) {
+        sessionStorage.removeItem(args.name);
+    }
+};
+export const removeAppCookieSessionSubdomainPrefix = (args) => {
+    Object.keys(cookies.getAll()).forEach(cookieName => {
+        if (cookieName.startsWith(args.name)) {
+            removeAppCookieSessionSubdomain(args);
+        }
+    });
+};

package/es/utils/index.d.ts

@@ -6,3 +6,4 @@ export * from './styles';
 export * from './variables';
 export * from './actionButtons';
 export * from './dataTable';
+export * from './cookie';

package/es/utils/index.js

@@ -6,3 +6,4 @@ export * from './styles';
 export * from './variables';
 export * from './actionButtons';
 export * from './dataTable';
+export * from './cookie';

package/package.json

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