feat(container): updated icons pnrv2, useful links behavior in panel

ref: MANAGER-15218 Signed-off-by: Omar ALKABOUSS MOUSSANA <[email protected]>
ovh · Sep 25, 2024 · 57d25df · 57d25df
1 parent cafaee2
commit 57d25df
Show file tree

Hide file tree

Showing 27 changed files with 217 additions and 75 deletions.
diff --git a/...ager/apps/container/src/container/nav-reshuffle/sidebar/Assistance/AssistanceLinkItem.tsx b/...ager/apps/container/src/container/nav-reshuffle/sidebar/Assistance/AssistanceLinkItem.tsx
@@ -2,7 +2,6 @@ import { Node } from '../navigation-tree/node';
 import { FunctionComponent } from 'react';
 import style from '../style.module.scss';
 import SidebarLink from '../SidebarLink';
-import { SvgIconWrapper } from '@ovh-ux/ovh-product-icons/utils/SvgIconWrapper';
 
 type Props = {
     node: Node;
@@ -12,7 +11,6 @@ type Props = {
 export const AssistanceLinkItem: FunctionComponent<Props> = ({ node, isSelected }) => {
     return (
         <li className={`flex px-3 align-items-center ${isSelected ? style.sidebar_menu_items_selected : ''} ${style.sidebar_menu_items}`} role="menuitem" >
-            <SvgIconWrapper name={node.svgIcon} height={24} width={24} className='fill-white block mr-1' />
             <SidebarLink
                 handleOnClick={node.onClick}
                 node={node}

diff --git a/...apps/container/src/container/nav-reshuffle/sidebar/Assistance/ShortAssistanceLinkItem.tsx b/...apps/container/src/container/nav-reshuffle/sidebar/Assistance/ShortAssistanceLinkItem.tsx
@@ -1,16 +1,17 @@
 import { useTranslation } from 'react-i18next';
 import { Node } from '../navigation-tree/node';
-import style from '../style.module.scss';
 import { FunctionComponent } from 'react';
 import { useShell } from '@/context';
-import { SvgIconWrapper } from '@ovh-ux/ovh-product-icons/utils/SvgIconWrapper';
+import { OsdsLink, OsdsIcon } from '@ovhcloud/ods-components/react';
+import { OdsHTMLAnchorElementRel, OdsHTMLAnchorElementTarget } from '@ovhcloud/ods-common-core';
+import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
+import { ODS_ICON_NAME, ODS_ICON_SIZE } from '@ovhcloud/ods-components';
 
 type Props = {
     node: Node;
-    isSelected: boolean;
 }
 
-export const ShortAssistanceLinkItem: FunctionComponent<Props> = ({ node, isSelected }) => {
+export const ShortAssistanceLinkItem: FunctionComponent<Props> = ({ node }) => {
     const { t } = useTranslation('sidebar');
     const shell = useShell();
     const navigation = shell.getPlugin('navigation');
@@ -28,19 +29,27 @@ export const ShortAssistanceLinkItem: FunctionComponent<Props> = ({ node, isSele
 
 
     return (
-        <li className={`flex p-1 justify-center ${isSelected ? style.sidebar_menu_items_selected : ''} ${style.sidebar_menu_items}`} role="menuitem" >
-            <a
-                onClick={node.onClick}
-                href={url}
-                target={node.isExternal ? '_blank' : '_top'}
-                rel={node.isExternal ? 'noopener noreferrer' : ''}
-                title={t(node.translation)}
-                id={node.id}
-                role="link"
-                className='d-flex items-center justify-center'
-            >
-                <SvgIconWrapper name={node.svgIcon} height={24} width={24} className='fill-white block' />
-            </a>
-        </li>
+        <OsdsLink
+            onClick={node.onClick}
+            href={url}
+            color={ODS_THEME_COLOR_INTENT.primary}
+            target={node.isExternal ? OdsHTMLAnchorElementTarget._blank : OdsHTMLAnchorElementTarget._top}
+            rel={node.isExternal ? OdsHTMLAnchorElementRel.noopener : undefined}
+            id={node.id}
+            role="link"
+            className='block p-2'
+        >
+            {t(node.translation)}
+            {node.isExternal && (
+                <span slot='end'>
+                    <OsdsIcon
+                        name={ODS_ICON_NAME.EXTERNAL_LINK}
+                        className='ml-1'
+                        size={ODS_ICON_SIZE.xxs}
+                        color={ODS_THEME_COLOR_INTENT.primary}
+                    />
+                </span>
+            )}
+        </OsdsLink>
     )
 }
diff --git a/packages/manager/apps/container/src/container/nav-reshuffle/sidebar/Assistance/index.tsx b/packages/manager/apps/container/src/container/nav-reshuffle/sidebar/Assistance/index.tsx
@@ -7,6 +7,9 @@ import useContainer from '@/core/container';
 import { Node } from '../navigation-tree/node';
 import { AssistanceLinkItem } from './AssistanceLinkItem';
 import { ShortAssistanceLinkItem } from './ShortAssistanceLinkItem';
+import { OsdsButton, OsdsIcon, OsdsMenuItem, OsdsPopover, OsdsPopoverContent } from '@ovhcloud/ods-components/react';
+import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
+import { ODS_BUTTON_SIZE, ODS_BUTTON_VARIANT, ODS_ICON_NAME } from '@ovhcloud/ods-components';
 
 interface AssistanceProps {
   nodeTree?: Node;
@@ -77,27 +80,46 @@ const AssistanceSidebar: React.FC<ComponentProps<AssistanceProps>> = ({
     trackingPlugin.trackClick({ name: `navbar_v3_entry_home::${id}`, type: 'navigation' });
   };
 
+  if (isShort) return (
+    <OsdsPopover className='w-full fixed z-[1000] left-[0.3rem] bottom-[3rem]' id="useful-links" role="menu">
+      <OsdsButton
+        slot="popover-trigger"
+        className='w-[4rem]'
+        color={ODS_THEME_COLOR_INTENT.primary}
+        variant={ODS_BUTTON_VARIANT.ghost}
+        size={ODS_BUTTON_SIZE.sm}
+        title={t('sidebar_assistance_title')}
+        contrasted
+      >
+        <OsdsIcon
+          name={ODS_ICON_NAME.ELLIPSIS}
+          contrasted
+        />
+      </OsdsButton>
+      <OsdsPopoverContent>
+        {nodeTree.children.map((node: Node) => (
+          <ShortAssistanceLinkItem key={node.id} node={node} />
+        ))}
+      </OsdsPopoverContent>
+    </OsdsPopover>
+  )
+
   return (
-    <ul className="mt-auto pb-3" id="useful-links" role="menu">
-      {!isShort &&
-        <li className="assistance_header px-3 mb-3">
-          <h2 className="flex justify-between">
-            <span>{t('sidebar_assistance_title')}</span>
-          </h2>
-        </li>}
-      {nodeTree.children.map((node: Node) => (isShort ?
-        <ShortAssistanceLinkItem
-          key={`assistance_${node.id}`}
-          node={node}
-          isSelected={node.id === selectedNode?.id}
-        /> :
+    <ul className="mt-auto pb-3 flex-none" id="useful-links2" role="menu">
+      <li className="assistance_header px-3 mb-3">
+        <h2 className="flex justify-between">
+          <span>{t('sidebar_assistance_title')}</span>
+        </h2>
+      </li>
+      {nodeTree.children.map((node: Node) => (
+
         <AssistanceLinkItem
           key={`assistance_${node.id}`}
           node={node}
           isSelected={node.id === selectedNode?.id}
-        />))}
-    </ul>
-  );
+        />
+      ))}
+    </ul>);
 };
 
 export default AssistanceSidebar;
diff --git a/packages/manager/apps/container/src/container/nav-reshuffle/sidebar/SidebarLink.tsx b/packages/manager/apps/container/src/container/nav-reshuffle/sidebar/SidebarLink.tsx
@@ -55,8 +55,10 @@ const SidebarLink: React.FC<ComponentProps<SidebarLinkProps>> = ({
       id={id}
       role="button"
     >
-      {isShortText ? <SvgIconWrapper name={node.svgIcon} height={42} width={42} className='p-1 fill-white block' />
-        : <span>{t(node.translation)}</span>}
+      <span className='flex gap-2 align-items-center'>
+        <SvgIconWrapper name={node.svgIcon} height={32} width={32} className='p-1 fill-white block' />
+        {!isShortText && <span>{t(node.translation)}</span>}
+      </span>
       <span className="flex justify-end align-items-center">
         {!isShortText && (count as number) > 0 && (
           <OsdsIcon

diff --git a/packages/manager/apps/container/src/container/nav-reshuffle/sidebar/index.tsx b/packages/manager/apps/container/src/container/nav-reshuffle/sidebar/index.tsx
@@ -25,6 +25,11 @@ import {
 import { Node } from './navigation-tree/node';
 import useProductNavReshuffle from '@/core/product-nav-reshuffle';
 import { fetchFeatureAvailabilityData } from '@ovh-ux/manager-react-components';
+import { SvgIconWrapper } from '@ovh-ux/ovh-product-icons/utils/SvgIconWrapper';
+import OvhProductName from '@ovh-ux/ovh-product-icons/utils/OvhProductNameEnum';
+import { OsdsButton } from '@ovhcloud/ods-components/react';
+import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
+import { ODS_BUTTON_SIZE, ODS_BUTTON_VARIANT } from '@ovhcloud/ods-components';
 
 interface ServicesCountError {
   url: string;
@@ -54,6 +59,7 @@ const Sidebar = (): JSX.Element => {
   } = useProductNavReshuffle();
   const [servicesCount, setServicesCount] = useState<ServicesCount>(null);
   const [selectedNode, setSelectedNode] = useState<Node>(null);
+  const [showSubTree, setShowSubTree] = useState<boolean>(false);
   const [selectedSubMenu, setSelectedSubMenu] = useState<Node>(null);
   const [open, setOpen] = useState<boolean>(true);
   const [assistanceTree, setAssistanceTree] = useState<Node>(null);
@@ -157,6 +163,8 @@ const Sidebar = (): JSX.Element => {
         ) {
           selectSubMenu(currentNode);
           setSelectedNode(universe);
+          setShowSubTree(Boolean(universe));
+
           return;
         } else {
           selectedNode ? setSelectedNode(null) : setSavedNode(null);
@@ -172,6 +180,7 @@ const Sidebar = (): JSX.Element => {
     if (foundNode) {
       selectSubMenu(foundNode.node);
       setSelectedNode(foundNode.universe);
+      setShowSubTree(Boolean(foundNode.universe));
     }
   }, [currentNavigationNode, location]);
 
@@ -235,13 +244,13 @@ const Sidebar = (): JSX.Element => {
   };
 
   const closeSubMenu = () => {
-    setSelectedNode(null);
-    setSelectedSubMenu(null);
+    setShowSubTree(false);
   };
 
   const menuClickHandler = (node: Node) => {
     setSelectedNode(node);
     setSelectedSubMenu(null);
+    setShowSubTree(true);
 
     let trackingIdComplement = 'navbar_v3_entry_home::';
     const history = findPathToNode(
@@ -297,17 +306,17 @@ const Sidebar = (): JSX.Element => {
         )}
 
         <div
-          className={`${style.sidebar_menu} ${
-            !open ? style.sidebar_menu_short : ''
-            }`}
+          className={style.sidebar_menu}
           role="menubar"
         >
           <ul id="menu" role="menu">
-            {open && currentNavigationNode && (
-              <li className="px-3 mb-3 mt-2">
+
+          <li className="px-3 mb-3 mt-2 h-8">
+              {open && currentNavigationNode && (
                 <h2>{t(currentNavigationNode.translation)}</h2>
-              </li>
-            )}
+              )}
+          </li>
+
             {currentNavigationNode?.children
               ?.filter((node) => !shouldHideElement(node, node.count))
               .map((node: Node) => (
@@ -316,8 +325,8 @@ const Sidebar = (): JSX.Element => {
                   id={node.id}
                   className={`${style.sidebar_menu_items} ${
                     node.id === selectedNode?.id
-                      ? style.sidebar_menu_items_selected
-                      : ''
+                    ? style.sidebar_menu_items_selected
+                    : ''
                     }`}
                   role="menuitem"
                 >
@@ -333,8 +342,11 @@ const Sidebar = (): JSX.Element => {
                 </li>
               ))}
           </ul>
-          <div className={`m-3 ${style.sidebar_action}`}>
-            <a
+          <div className={`m-2.5 mt-10`}>
+            <OsdsButton
+              variant={ODS_BUTTON_VARIANT.stroked}
+              size={ODS_BUTTON_SIZE.sm}
+              color={ODS_THEME_COLOR_INTENT.primary}
               onClick={() =>
                 trackingPlugin.trackClick({
                   name: 'navbar_v3_entry_home::cta_add_a_service',
@@ -345,12 +357,11 @@ const Sidebar = (): JSX.Element => {
               role="link"
               title={t('sidebar_service_add')}
             >
-              <span
-                className={`oui-icon oui-icon-cart ${style.sidebar_action_icon}`}
-                aria-hidden="true"
-              ></span>
-              {open && <span className="ml-3">{t('sidebar_service_add')}</span>}
-            </a>
+              <div className='flex justify-center align-middle p-0 m-0'>
+                <SvgIconWrapper name={OvhProductName.SHOPPINGCARTPLUS} height={24} width={24} className='fill-[var(--ods-color-primary-500)]' />
+                {open && <span className="ml-3">{t('sidebar_service_add')}</span>}
+              </div>
+            </OsdsButton>
           </div>
         </div>
 
@@ -378,7 +389,7 @@ const Sidebar = (): JSX.Element => {
           ></span>
         </button>
       </div>
-      {selectedNode !== null && (
+      {showSubTree && (
         <SubTree
           handleBackNavigation={() => {
             if (isMobile) setSelectedNode(null);

diff --git a/.../manager/apps/container/src/container/nav-reshuffle/sidebar/navigation-tree/assistance.ts b/.../manager/apps/container/src/container/nav-reshuffle/sidebar/navigation-tree/assistance.ts
@@ -12,30 +12,26 @@ export const assistanceTree: Node = {
       count: false,
       isExternal: true,
       region: ['EU'],
-      svgIcon: OvhProductName.STORE
     },
     {
       id: 'help',
       translation: 'sidebar_assistance_help_center',
       url: 'help',
       count: false,
       isExternal: true,
-      svgIcon: OvhProductName.HELPECENTER
     },
     {
       id: 'assistance_status',
       translation: 'sidebar_assistance_status',
       url: 'status',
       count: false,
       isExternal: true,
-      svgIcon: OvhProductName.NETWORKSTATUS
     },
     {
       id: 'livechat',
       features: ['livechat'],
       translation: 'sidebar_assistance_live_chat',
       count: false,
-      svgIcon: OvhProductName.LIVECHAT
     },
     {
       id: 'carbon_calculator',
@@ -46,7 +42,6 @@ export const assistanceTree: Node = {
         application: 'carbon-calculator',
         hash: '#',
       },
-      svgIcon: OvhProductName.LEAF
     }
   ]
 }
diff --git a/.../container/src/container/nav-reshuffle/sidebar/navigation-tree/services/bareMetalCloud.ts b/.../container/src/container/nav-reshuffle/sidebar/navigation-tree/services/bareMetalCloud.ts
@@ -8,7 +8,7 @@ const baremetalUniverse: Node = {
   translation: 'sidebar_bare_metal_cloud',
   shortTranslation: 'sidebar_bare_metal_cloud_short',
   illustration,
-  svgIcon: OvhProductName.BAREMETALCLOUD,
+  svgIcon: OvhProductName.SERVERV2,
   features: ['bare-metal-cloud'],
   routing: {
     application: 'dedicated',

diff --git a/...tainer/src/container/nav-reshuffle/sidebar/navigation-tree/services/hostedPrivateCloud.ts b/...tainer/src/container/nav-reshuffle/sidebar/navigation-tree/services/hostedPrivateCloud.ts
@@ -8,7 +8,7 @@ const hostedPrivateCloudUniverse: Node = {
   translation: 'sidebar_hpc',
   shortTranslation: 'sidebar_hpc_short',
   illustration,
-  svgIcon: OvhProductName.HOSTEDPRIVATECLOUD,
+  svgIcon: OvhProductName.LOCKCLOSE,
   features: ['hosted-private-cloud'],
 };
 

diff --git a/...er/apps/container/src/container/nav-reshuffle/sidebar/navigation-tree/services/network.ts b/...er/apps/container/src/container/nav-reshuffle/sidebar/navigation-tree/services/network.ts
@@ -8,7 +8,7 @@ const networkUniverse: Node = {
   translation: 'sidebar_network',
   shortTranslation: 'sidebar_network_short',
   illustration,
-  svgIcon: OvhProductName.NETWORK,
+  svgIcon: OvhProductName.NETWORKV2,
   features: [
     'vrack:bare-metal-cloud',
     'ip',

diff --git a/...pps/container/src/container/nav-reshuffle/sidebar/navigation-tree/services/publicCloud.ts b/...pps/container/src/container/nav-reshuffle/sidebar/navigation-tree/services/publicCloud.ts
@@ -9,7 +9,7 @@ const pciNode: Node = {
   shortTranslation: 'sidebar_pci_short',
   illustration,
   universe: 'pci',
-  svgIcon: OvhProductName.PUBLICCLOUD,
+  svgIcon: OvhProductName.GLOBE,
   features: ['public-cloud'],
   forceVisibility: true,
   routing: {

diff --git a/...src/container/nav-reshuffle/sidebar/navigation-tree/services/securityIdentityOperation.ts b/...src/container/nav-reshuffle/sidebar/navigation-tree/services/securityIdentityOperation.ts
@@ -8,7 +8,7 @@ const sioUniverse : Node = {
   translation: 'sidebar_security_identity_operations',
   shortTranslation: 'sidebar_security_identity_operations_short',
   illustration,
-  svgIcon: OvhProductName.SECURITYIDENTITYOPERATION,
+  svgIcon: OvhProductName.SHIELDCHECK,
   routing: {
     application: 'iam',
   },

diff --git a/...er/apps/container/src/container/nav-reshuffle/sidebar/navigation-tree/services/sunrise.ts b/...er/apps/container/src/container/nav-reshuffle/sidebar/navigation-tree/services/sunrise.ts
@@ -8,7 +8,7 @@ const sunriseUniverse: Node = {
   translation: 'sidebar_sunrise',
   shortTranslation: 'sidebar_sunrise_short',
   illustration,
-  svgIcon: OvhProductName.SUNRISE,
+  svgIcon: OvhProductName.STAR,
   routing: {
     application: 'sunrise',
   },

diff --git a/...er/apps/container/src/container/nav-reshuffle/sidebar/navigation-tree/services/telecom.ts b/...er/apps/container/src/container/nav-reshuffle/sidebar/navigation-tree/services/telecom.ts
@@ -8,7 +8,7 @@ const telecomUniverse: Node = {
   translation: 'sidebar_telecom',
   shortTranslation: 'sidebar_telecom_short',
   illustration,
-  svgIcon: OvhProductName.TELECOM,
+  svgIcon: OvhProductName.PHONE,
   features: ['telecom'],
   routing: {
     application: 'telecom',