feat(container.sidebar): remove chakra ui

ref:MANAGER-11708 Signed-off-by: Alex Boungnaseng <[email protected]>
ovh · Aug 10, 2023 · 96435c7 · 96435c7
1 parent 6326e9f
commit 96435c7
Show file tree

Hide file tree

Showing 190 changed files with 1,067 additions and 7,474 deletions.
diff --git a/packages/manager/apps/container/package.json b/packages/manager/apps/container/package.json
@@ -25,18 +25,19 @@
     "start:watch": "lerna exec --stream --parallel --scope='@ovh-ux/manager-container-app' --include-dependencies -- npm run dev:watch --if-present"
   },
   "dependencies": {
-    "@chakra-ui/icons": "^2.0.6",
-    "@chakra-ui/react": "^2.2.6",
     "@emotion/react": "^11.10.0",
     "@emotion/styled": "^11.10.0",
     "@ovh-ux/manager-config": "^7.1.0",
-    "@ovh-ux/manager-themes": "^0.3.0",
     "@ovh-ux/manager-vite-config": "^0.2.0",
     "@ovh-ux/ovh-payment-method": "^0.1.1",
     "@ovh-ux/ovh-reket": "^2.0.0",
     "@ovh-ux/request-tagger": "^0.1.1",
     "@ovh-ux/shell": "^2.1.0",
     "@ovh-ux/ui-kit": "^6.5.3",
+    "@ovhcloud/ods-core": "^14.0.1",
+    "@ovhcloud/ods-stencil": "^14.0.1",
+    "@ovhcloud/ods-theme-blue-jeans": "^14.0.1",
+    "@ovhcloud/ods-theming": "^14.0.1",
     "@popperjs/core": "^2.11.4",
     "@tanem/react-nprogress": "^5.0.0",
     "@tanstack/react-query": "^4.9.0",

diff --git a/packages/manager/apps/container/src/container/legacy/server-sidebar/OdsIconWrapper.tsx b/packages/manager/apps/container/src/container/legacy/server-sidebar/OdsIconWrapper.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { OsdsIcon } from '@ovhcloud/ods-stencil/components/react/';
+import { OdsIconName, OdsIconSize } from '@ovhcloud/ods-core';
+import { OdsThemeColorIntent } from '@ovhcloud/ods-theming';
+
+type OdsIconWrapperType = {
+  name: OdsIconName;
+};
+
+const OdsIconWrapper = ({ name }: OdsIconWrapperType) => (
+  <OsdsIcon
+    hoverable
+    name={name}
+    size={OdsIconSize.lg}
+    color={OdsThemeColorIntent.primary}
+  />
+);
+
+export default OdsIconWrapper;
diff --git a/packages/manager/apps/container/src/container/legacy/server-sidebar/Sidebar.tsx b/packages/manager/apps/container/src/container/legacy/server-sidebar/Sidebar.tsx
@@ -11,6 +11,8 @@ import {
   updateSidebarItemLabel,
 } from './sidebarMenu';
 import { useLocation } from 'react-router-dom';
+import { OsdsSpinner } from '@ovhcloud/ods-stencil/components/react';
+import { OdsSpinnerSize } from '@ovhcloud/ods-core';
 
 export default function ServerSidebar({ menu }: { menu: SidebarMenuItem }) {
   const [items, setItems] = useState<SidebarMenuItem[]>([]);
@@ -50,14 +52,6 @@ export default function ServerSidebar({ menu }: { menu: SidebarMenuItem }) {
   return menu ? (
     <ServerSidebarVirtual items={items} onMenuChange={refreshMenu} />
   ) : (
-    <div className="text-center">
-      <Spinner
-        as="span"
-        animation="border"
-        role="status"
-        aria-hidden="true"
-        className="mt-4 mx-auto"
-      />
-    </div>
+    <OsdsSpinner role="status" size={OdsSpinnerSize.sm} />
   );
 }
diff --git a/packages/manager/apps/container/src/container/legacy/server-sidebar/SidebarItemRenderer.tsx b/packages/manager/apps/container/src/container/legacy/server-sidebar/SidebarItemRenderer.tsx
@@ -1,9 +1,24 @@
 import React, { useCallback, useState } from 'react';
-import { Spinner } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
 import { useLegacyContainer } from '@/container/legacy/context';
 import { SidebarMenuItem } from './sidebarMenu';
 import style from './index.module.scss';
+import {
+  OsdsSpinner,
+  OsdsLink,
+  OsdsText,
+  OsdsIcon,
+} from '@ovhcloud/ods-stencil/components/react';
+import {
+  OdsSpinnerSize,
+  OdsIconName,
+  OdsHTMLAnchorElementTarget,
+  OdsHTMLAnchorElementRel,
+  OdsTextLevel,
+  OdsIconSize,
+} from '@ovhcloud/ods-core';
+
+import { OdsThemeColorIntent } from '@ovhcloud/ods-theming';
 
 function ServerSidebarSearchField({
   item,
@@ -47,107 +62,83 @@ export default function ServerSidebarItemRenderer({
   const hasToggle = item.loader || item.subItems?.length > 0;
   const updateHandler = useCallback(() => onSearch(item), [item, onSearch]);
   let itemRender = null;
+
   if ('searchField' in item) {
     itemRender = (
       <ServerSidebarSearchField item={item} onUpdate={updateHandler} />
     );
   } else if (item.isNoResultField) {
-    itemRender = (
-      <div>
-        {t('sidebar_no_result')}
-      </div>
-    );
+    itemRender = <div>{t('sidebar_no_result')}</div>;
   } else if (hasToggle) {
-    let icon = 'oui-icon-chevron-right';
-    if (item.loadingError) {
-      icon = 'oui-icon-error-circle';
-    } else if (item.isOpen) {
-      icon = 'oui-icon-chevron-down';
-    }
     itemRender = (
-      <button
-        type="button"
-        disabled={item.isLoading}
-        onClick={() => onToggle(item)}
-        {...{
-          'aria-busy': !!item.isLoading,
-        }}
-        title={item.isOpen ? '' : t('sidebar_load_services')}
-        className={`${item.depth > 0 ? style.subButton : ''} ${
-          item.isSelected ? style.selectedButton : ''
-        }`}
-      >
-        {item.isLoading && (
-          <span className={style.menuItemIcon} aria-hidden="true">
-            <Spinner
-              as="span"
-              animation="border"
-              size="sm"
-              role="status"
-              aria-hidden="true"
-            />
-          </span>
-        )}
-        {!item.isLoading && (
-          <span className={style.menuItemIcon} aria-hidden="true">
-            <i className={`oui-icon ${icon}`}></i>
-          </span>
-        )}
-        {item.icon && (
-          <span className={style.menuItemIcon} aria-hidden="true">
-            {item.icon}
+      <div className={`${style.itemOds}`}>
+        <div onClick={() => onToggle(item)}>
+          <span slot="start">
+            {item.isLoading ? (
+              <OsdsSpinner size={OdsSpinnerSize.sm} />
+            ) : (item.isOpen ? (
+              <OsdsIcon
+                name={OdsIconName.CHEVRON_DOWN}
+                size={OdsIconSize.xxs}
+                color={OdsThemeColorIntent.text}
+              />
+            ) : (
+              <OsdsIcon
+                name={OdsIconName.CHEVRON_RIGHT}
+                size={OdsIconSize.xxs}
+                color={OdsThemeColorIntent.text}
+              />
+            ))}
+
+            {item.icon && <span aria-hidden="true">{item.icon}</span>}
+            <OsdsText
+              level={OdsTextLevel.button}
+              color={OdsThemeColorIntent.text}
+            >
+              {' '}
+              {item.label}
+            </OsdsText>
+            {item?.badge && (
+              <span
+                className={`oui-badge oui-badge_s oui-badge_${item.badge} ${style.menuBadge}`}
+              >
+                {item.badge}
+              </span>
+            )}
           </span>
-        )}
-        <span>{item.label}</span>
-      </button>
+        </div>
+      </div>
     );
   } else {
-    const externalTarget = item.isExternal
-      ? {
-        target: '_blank',
-        rel: 'noopener',
-      }
-      : {};
+    let externalTarget: OdsHTMLAnchorElementTarget | undefined;
+    let externalRel: OdsHTMLAnchorElementRel | undefined;
+    if (item.isExternal) {
+      externalTarget = OdsHTMLAnchorElementTarget._blank;
+      externalRel = OdsHTMLAnchorElementRel.noopener;
+    }
     itemRender = (
-      <a
-        style={{
-          paddingLeft: item.depth === 0 ? '1.75rem' : '0',
-          fontWeight: item.isSelected || item.depth === 0 ? 700 : 400,
-          color: item.isSelected ? '#2859c0' : '#113f6d',
-        }}
-        href={item.href || '#'}
-        onClick={() => setIsResponsiveSidebarMenuOpen(false)}
-        {...externalTarget}
-        title={item.title || t('sidebar_access_dashboard')}
-      >
-        {item.icon && (
-          <span className={style.menuItemIcon} aria-hidden="true">
-            {item.icon}
-          </span>
-        )}
-        <span>{item.label}</span>
-        {item?.badge && (
-          <span
-            className={`oui-badge oui-badge_s oui-badge_${item.badge} ${style.menuBadge}`}
+      <>
+        <span className={style.itemLink}>
+          <span className={style.menuItemIcon}>{item.icon}</span>
+          <OsdsLink
+            role="treeitem"
+            color={OdsThemeColorIntent.text}
+            href={item.href || '#'}
+            onClick={() => setIsResponsiveSidebarMenuOpen(false)}
+            target={externalTarget}
+            rel={externalRel}
+            className={style.link}
           >
-            {item.badge}
-          </span>
-        )}
-      </a>
+            {item.label}
+          </OsdsLink>
+        </span>
+      </>
     );
   }
   return (
     <div className={`${style.menuItem} ${item.depth > 0 ? 'pl-2' : ''}`}>
       <div className={item.depth > 0 ? style.menuItemBorder : ''}>
-        <div
-          className={item.isSelected ? style.menuItemSelected : ''}
-          style={{
-            paddingLeft: `${item.depth * 1.75 -
-              (item.depth === 1 ? 0.5 : 0)}rem`,
-          }}
-        >
-          {itemRender}
-        </div>
+        <div>{itemRender}</div>
       </div>
     </div>
   );

diff --git a/packages/manager/apps/container/src/container/legacy/server-sidebar/SvgIconWrapper.tsx b/packages/manager/apps/container/src/container/legacy/server-sidebar/SvgIconWrapper.tsx
@@ -0,0 +1,41 @@
+import React, { FunctionComponent } from 'react';
+
+import { dedicatedIcons } from './order/shop-config/icons/dedicatedIcons';
+import { webIcons } from './order/shop-config/icons/webIcons';
+import { telecomIcons } from './order/shop-config/icons/telecomIcons';
+
+interface SvgIconProps {
+  name: string;
+  className?: string;
+  width?: number;
+  height?: number;
+}
+
+interface IconComponents {
+  [key: string]: FunctionComponent<
+    React.SVGProps<SVGSVGElement> & { title?: string }
+  >;
+}
+
+const iconComponents: IconComponents = {
+  ...dedicatedIcons,
+  ...webIcons,
+  ...telecomIcons,
+};
+
+const SvgIconWrapper: React.FC<SvgIconProps> = ({
+  name,
+  className,
+  width,
+  height,
+}) => {
+  const IconComponent = iconComponents[name];
+
+  if (!IconComponent) {
+    return null;
+  }
+
+  return <IconComponent className={className} width={width} height={height} />;
+};
+
+export default SvgIconWrapper;