feat(container): replace font-awesome icons with ODS

ref: MANAGER-15628 Signed-off-by: Dustin Kroger <[email protected]>
ovh · Jan 9, 2025 · b45eb66 · b45eb66
1 parent fdec1f1
commit b45eb66
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 16 deletions.
diff --git a/packages/manager/apps/container/package.json b/packages/manager/apps/container/package.json
@@ -52,7 +52,6 @@
     "date-fns": "^2.24.0",
     "dialog-polyfill": "^0.5.6",
     "dompurify": "^2.3.6",
-    "font-awesome": "^4.7.0",
     "framer-motion": "^7.0.0",
     "i18next": "^23.8.2",
     "i18next-http-backend": "^2.4.3",

diff --git a/.../manager/apps/container/src/container/legacy/server-sidebar/universe/DedicatedSidebar.tsx b/.../manager/apps/container/src/container/legacy/server-sidebar/universe/DedicatedSidebar.tsx
@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { useShell } from '@/context';
 import { sanitizeMenu, SidebarMenuItem } from '../sidebarMenu';
 import Sidebar from '../Sidebar';
-import useServiceLoader from "./useServiceLoader";
+import useServiceLoader from './useServiceLoader';
 import dedicatedShopConfig from '../order/shop-config/dedicated';
 import OrderTrigger from '../order/OrderTrigger';
 import { ShopItem } from '../order/OrderPopupContent';
@@ -48,7 +48,7 @@ export const features = [
   'dedicated-server:nutanixOrder',
   'carbon-calculator',
   'network-security',
-  'key-management-service'
+  'key-management-service',
 ];
 
 export default function DedicatedSidebar() {
@@ -90,9 +90,11 @@ export default function DedicatedSidebar() {
                 ...service,
                 icon: getIcon('oui-icon oui-icon-cluster_concept'),
                 async loader() {
-                  return await loadServices(`/dedicated/cluster/${service.serviceName}`);
+                  return await loadServices(
+                    `/dedicated/cluster/${service.serviceName}`,
+                  );
                 },
-              }
+              };
             }),
             ...housing,
             ...servers,
@@ -223,7 +225,15 @@ export default function DedicatedSidebar() {
       menu.push({
         id: 'dbaas-logs',
         label: t('sidebar_logs_db'),
-        icon: getIcon('fa fa-bar-chart'),
+        icon: (
+          <OsdsIcon
+            name={ODS_ICON_NAME.GRAPH_CONCEPT}
+            size={ODS_ICON_SIZE.xxs}
+            color={ODS_THEME_COLOR_INTENT.text}
+            className="mr-1"
+            aria-hidden="true"
+          />
+        ),
         routeMatcher: new RegExp('^/dbaas/logs'),
         async loader() {
           const dbaas = await loadServices('/dbaas/logs');
@@ -246,7 +256,9 @@ export default function DedicatedSidebar() {
         label: t('sidebar_network'),
         icon: getIcon('oui-icon oui-icon-bandwidth_concept'),
         minSearchItems: 0,
-        routeMatcher: new RegExp('^(/ip(/|$)|/network-security|/vrack|/cloud-connect|/vrack-services|(/network)?/iplb)'),
+        routeMatcher: new RegExp(
+          '^(/ip(/|$)|/network-security|/vrack|/cloud-connect|/vrack-services|(/network)?/iplb)',
+        ),
         pathMatcher: new RegExp('^(/vrack-services/)'),
         subItems: [
           feature.ip && {
@@ -263,8 +275,7 @@ export default function DedicatedSidebar() {
             href: navigation.getURL('dedicated', '#/network-security'),
             routeMatcher: new RegExp('^/network-security'),
           },
-          feature['ip-load-balancer'] &&
-          {
+          feature['ip-load-balancer'] && {
             id: 'ip-loadbalancer',
             label: t('sidebar_pci_load_balancer'),
             icon: getIcon('ovh-font ovh-font-iplb'),
@@ -357,8 +368,8 @@ export default function DedicatedSidebar() {
                   `/nasha/${nashaItem.serviceName}`,
                 ),
               }));
-            }
-          }
+            },
+          },
         ],
       });
     }
@@ -374,11 +385,23 @@ export default function DedicatedSidebar() {
     }
 
     if (feature['key-management-service']) {
-      const keyIcon = <OsdsIcon name={ODS_ICON_NAME.KEY_CONCEPT} size={ODS_ICON_SIZE.xxs} color={ODS_THEME_COLOR_INTENT.text}/>
+      const keyIcon = (
+        <OsdsIcon
+          name={ODS_ICON_NAME.KEY_CONCEPT}
+          size={ODS_ICON_SIZE.xxs}
+          color={ODS_THEME_COLOR_INTENT.text}
+        />
+      );
       menu.push({
         id: 'identity-security-operations',
         label: t('sidebar_identity_security_operations'),
-        icon: <OsdsIcon name={ODS_ICON_NAME.CLOUD_EYE_CONCEPT} size={ODS_ICON_SIZE.xxs} color={ODS_THEME_COLOR_INTENT.text}/>,
+        icon: (
+          <OsdsIcon
+            name={ODS_ICON_NAME.CLOUD_EYE_CONCEPT}
+            size={ODS_ICON_SIZE.xxs}
+            color={ODS_THEME_COLOR_INTENT.text}
+          />
+        ),
         pathMatcher: new RegExp('^/key-management-service'),
         subItems: [
           {
@@ -389,7 +412,11 @@ export default function DedicatedSidebar() {
             icon: keyIcon,
             async loader() {
               const app = 'key-management-service';
-              const services = await loadServices('/okms/resource', undefined, app);
+              const services = await loadServices(
+                '/okms/resource',
+                undefined,
+                app,
+              );
 
               return [
                 {
@@ -415,7 +442,7 @@ export default function DedicatedSidebar() {
     return menu;
   };
 
-  const {data: availability} = useFeatureAvailability(features);
+  const { data: availability } = useFeatureAvailability(features);
 
   useEffect(() => {
     if (availability) {

diff --git a/packages/manager/apps/container/src/index.tsx b/packages/manager/apps/container/src/index.tsx
@@ -20,7 +20,6 @@ import { setupDevApplication } from '@/core/dev';
 import { ContainerProvider } from '@/core/container';
 
 import '@ovh-ux/ui-kit/dist/css/oui.css';
-import 'font-awesome/css/font-awesome.min.css';
 import 'react-tooltip/dist/react-tooltip.css';
 import './index.scss';
 import './global.scss';