fix(svp): add link in action menu (#14993)

Co-authored-by: Lionel Bueno <lionel.bueno.ext@ovhcloud.com>
ovh · Jan 20, 2025 · a813e52 · a813e52
1 parent c4e044e
commit a813e52
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 10 deletions.
diff --git a/packages/manager/apps/pci-savings-plan/src/components/Table/ActionCell.scss b/packages/manager/apps/pci-savings-plan/src/components/Table/ActionCell.scss
@@ -0,0 +1,31 @@
+// Ugly patch for ODS to manager link like Button in ActionMenu
+.menu-item-link {
+  &::part(link) {
+    box-sizing: border-box;
+    width: 100%;
+    justify-content: left;
+    padding: 0 6px;
+    height: 32px;
+  }
+
+  &:not([is-disabled='true']) {
+    &::part(link) {
+      background-size: 0;
+
+      &:hover {
+        border-radius: 5px;
+        background-color: var(--ods-color-primary-100);
+      }
+    }
+  }
+}
+
+// Customize <OdsButton />
+.menu-item-button {
+  &::part(button) {
+    width: 100%;
+    justify-content: left;
+    height: 32px;
+    border-radius: 0;
+  }
+}
diff --git a/packages/manager/apps/pci-savings-plan/src/components/Table/ActionsCell.tsx b/packages/manager/apps/pci-savings-plan/src/components/Table/ActionsCell.tsx
@@ -7,7 +7,7 @@ import {
   ODS_BUTTON_VARIANT,
   ODS_ICON_NAME,
 } from '@ovhcloud/ods-components';
-import { OdsButton, OdsPopover } from '@ovhcloud/ods-components/react';
+import { OdsButton, OdsLink, OdsPopover } from '@ovhcloud/ods-components/react';
 import { usePciUrl } from '@ovh-ux/manager-pci-common';
 import {
   ButtonType,
@@ -18,6 +18,7 @@ import {
   SavingsPlanPlanedChangeStatus,
   SavingsPlanStatus,
 } from '@/types/api.type';
+import './ActionCell.scss';
 
 interface SavingsPlanActionsCell {
   onClickEditName: (path: string) => void;
@@ -77,23 +78,19 @@ const MenuItems = ({
           />
         )}
 
-        <OdsButton
+        <OdsLink
+          href={
+            isInstance ? `${pciUrl}/instances/new` : `${pciUrl}/rancher/new`
+          }
+          className="menu-item-link"
           label={t(isInstance ? 'order_instance' : 'order_rancher')}
-          size={ODS_BUTTON_SIZE.sm}
-          variant={ODS_BUTTON_VARIANT.ghost}
-          text-align="start"
           onClick={() => {
             trackClick({
               location: PageLocation.page,
               buttonType: ButtonType.button,
               actionType: 'navigation',
               actions: ['add_instance'],
             });
-            if (isInstance) {
-              navigate(`${pciUrl}/instances/new`);
-            } else {
-              navigate(`${pciUrl}/rancher/new`);
-            }
           }}
         />
       </div>