From 54ef71180dd442686d76557b0171375f695c4dc8 Mon Sep 17 00:00:00 2001
From: Romain Jamet <romain.jamet.ext@corp.ovh.com>
Date: Fri, 20 Dec 2024 17:12:46 +0100
Subject: [PATCH] fix(kms): fix UI post ods18 upgrade

ref: MANAGER-16501

Signed-off-by: Romain Jamet <romain.jamet.ext@corp.ovh.com>
---
 .../src/components/Listing/ListingCells.tsx   |  7 +-
 .../CredentialDatagridCells.tsx               |  3 +-
 .../Create/OrderConfirmation.tsx              | 60 ++++++-----
 .../layout-helpers/Create/RegionSelector.tsx  | 99 +++++++++----------
 .../BillingInformationsTile.tsx               |  2 +-
 .../InformationsTile.tsx                      |  4 +-
 .../menu/KmsActionMenu.component.tsx          |  7 +-
 .../src/pages/create/index.tsx                |  1 +
 .../credentialList/CredentialList.page.tsx    |  4 +-
 .../serviceKeyList/ServiceKeyList.page.tsx    | 44 ++++-----
 .../src/pages/listing/index.tsx               | 12 +--
 .../src/pages/serviceKey/ServiceKey.page.tsx  |  4 +-
 12 files changed, 122 insertions(+), 125 deletions(-)

diff --git a/packages/manager/apps/key-management-service/src/components/Listing/ListingCells.tsx b/packages/manager/apps/key-management-service/src/components/Listing/ListingCells.tsx
index e08362d69ad7..70fabd112d6e 100644
--- a/packages/manager/apps/key-management-service/src/components/Listing/ListingCells.tsx
+++ b/packages/manager/apps/key-management-service/src/components/Listing/ListingCells.tsx
@@ -13,7 +13,11 @@ import {
   useOvhTracking,
 } from '@ovh-ux/manager-react-shell-client';
 import { useNavigate } from 'react-router-dom';
-import { ODS_ICON_NAME, ODS_SPINNER_SIZE } from '@ovhcloud/ods-components';
+import {
+  ODS_BUTTON_VARIANT,
+  ODS_ICON_NAME,
+  ODS_SPINNER_SIZE,
+} from '@ovhcloud/ods-components';
 import { OdsSpinner } from '@ovhcloud/ods-components/react';
 import { OKMS } from '@/types/okms.type';
 import { OkmsAllServiceKeys } from '@/types/okmsServiceKey.type';
@@ -138,6 +142,7 @@ export const DatagridServiceKeyActionMenu = (props: OkmsAllServiceKeys) => {
       id={`service-key-actions-${props.id}`}
       isLoading={isPending}
       isCompact
+      variant={ODS_BUTTON_VARIANT.ghost}
       icon={ODS_ICON_NAME.ellipsisVertical}
       items={actionList}
     />
diff --git a/packages/manager/apps/key-management-service/src/components/credential/credentialDatagrid/CredentialDatagridCells.tsx b/packages/manager/apps/key-management-service/src/components/credential/credentialDatagrid/CredentialDatagridCells.tsx
index 1fbe6776ed1e..594c5f530477 100644
--- a/packages/manager/apps/key-management-service/src/components/credential/credentialDatagrid/CredentialDatagridCells.tsx
+++ b/packages/manager/apps/key-management-service/src/components/credential/credentialDatagrid/CredentialDatagridCells.tsx
@@ -13,7 +13,7 @@ import {
   PageLocation,
   useOvhTracking,
 } from '@ovh-ux/manager-react-shell-client';
-import { ODS_BUTTON_COLOR } from '@ovhcloud/ods-components';
+import { ODS_BUTTON_COLOR, ODS_BUTTON_VARIANT } from '@ovhcloud/ods-components';
 import { OkmsCredential } from '@/types/okmsCredential.type';
 import { useFormattedDate } from '@/hooks/useFormattedDate';
 import { CredentialStatus } from '../credentialStatus/CredentialStatus.component';
@@ -140,6 +140,7 @@ export const DatagridCredentialCellActions = (credential: OkmsCredential) => {
     <ActionMenu
       id={`credentialsActions-${credential.id}`}
       items={items}
+      variant={ODS_BUTTON_VARIANT.ghost}
       isCompact
     />
   );
diff --git a/packages/manager/apps/key-management-service/src/components/layout-helpers/Create/OrderConfirmation.tsx b/packages/manager/apps/key-management-service/src/components/layout-helpers/Create/OrderConfirmation.tsx
index e1eafc1b7a22..fa5de065bcbf 100644
--- a/packages/manager/apps/key-management-service/src/components/layout-helpers/Create/OrderConfirmation.tsx
+++ b/packages/manager/apps/key-management-service/src/components/layout-helpers/Create/OrderConfirmation.tsx
@@ -5,13 +5,13 @@ import {
   PageLocation,
   useOvhTracking,
 } from '@ovh-ux/manager-react-shell-client';
-import { OdsText, OdsButton, OdsCard } from '@ovhcloud/ods-components/react';
+import { OdsText, OdsButton } from '@ovhcloud/ods-components/react';
 import {
   ODS_TEXT_PRESET,
   ODS_BUTTON_SIZE,
   ODS_BUTTON_COLOR,
 } from '@ovhcloud/ods-components';
-import { LinkType, Links, Subtitle } from '@ovh-ux/manager-react-components';
+import { LinkType, Links } from '@ovh-ux/manager-react-components';
 import { useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { ROUTES_URLS } from '@/routes/routes.constants';
@@ -38,34 +38,32 @@ const OrderConfirmation = ({ region }: OrderConfirmationProps) => {
   }, [orderLink]);
 
   return (
-    <>
-      <OdsCard className="mb-6 p-4">
-        <div className="flex flex-col gap-6 mb-6">
-          <Subtitle>
-            {t('key_management_service_create_order_initiated_title')}
-          </Subtitle>
-          <OdsText preset={ODS_TEXT_PRESET.paragraph}>
-            {t('key_management_service_create_order_initiated_subtitle')}
-          </OdsText>
-          <Links
-            type={LinkType.external}
-            label={orderLink}
-            target="_blank"
-            href={orderLink}
-            onClickReturn={() =>
-              trackClick({
-                location: PageLocation.funnel,
-                buttonType: ButtonType.externalLink,
-                actionType: 'navigation',
-                actions: ['go-back-order'],
-              })
-            }
-          />
-          <OdsText preset={ODS_TEXT_PRESET.paragraph}>
-            {t('key_management_service_create_order_initiated_info')}
-          </OdsText>
-        </div>
-      </OdsCard>
+    <div className="flex flex-col gap-8">
+      <div className="flex flex-col gap-4">
+        <OdsText preset={ODS_TEXT_PRESET.heading2}>
+          {t('key_management_service_create_order_initiated_title')}
+        </OdsText>
+        <OdsText preset={ODS_TEXT_PRESET.paragraph}>
+          {t('key_management_service_create_order_initiated_subtitle')}
+        </OdsText>
+        <Links
+          type={LinkType.external}
+          label={orderLink}
+          target="_blank"
+          href={orderLink}
+          onClickReturn={() =>
+            trackClick({
+              location: PageLocation.funnel,
+              buttonType: ButtonType.externalLink,
+              actionType: 'navigation',
+              actions: ['go-back-order'],
+            })
+          }
+        />
+        <OdsText preset={ODS_TEXT_PRESET.paragraph}>
+          {t('key_management_service_create_order_initiated_info')}
+        </OdsText>
+      </div>
       <OdsButton
         size={ODS_BUTTON_SIZE.md}
         color={ODS_BUTTON_COLOR.primary}
@@ -80,7 +78,7 @@ const OrderConfirmation = ({ region }: OrderConfirmationProps) => {
         }}
         label={t('key_management_service_create_order_initiated_cta_done')}
       />
-    </>
+    </div>
   );
 };
 
diff --git a/packages/manager/apps/key-management-service/src/components/layout-helpers/Create/RegionSelector.tsx b/packages/manager/apps/key-management-service/src/components/layout-helpers/Create/RegionSelector.tsx
index 3b16080c10ac..6a84ced6f605 100644
--- a/packages/manager/apps/key-management-service/src/components/layout-helpers/Create/RegionSelector.tsx
+++ b/packages/manager/apps/key-management-service/src/components/layout-helpers/Create/RegionSelector.tsx
@@ -3,7 +3,6 @@ import { useTranslation } from 'react-i18next';
 import {
   OdsText,
   OdsSelect,
-  OdsFormField,
   OdsButton,
   OdsSpinner,
 } from '@ovhcloud/ods-components/react';
@@ -57,59 +56,53 @@ const RegionSelector = ({
     );
   }
   return (
-    <>
-      <div className="flex flex-col gap-6">
-        <OdsFormField className="mb-5">
-          <div slot="label">
-            <OdsText className="block" preset={ODS_TEXT_PRESET.heading5}>
-              {t('key_management_service_create_region_title')}
-            </OdsText>
-            <OdsText preset={ODS_TEXT_PRESET.paragraph}>
-              {t('key_management_service_create_region_description')}
-            </OdsText>
-            {isLoading && (
-              <OdsSpinner className="mr-3" size={ODS_SPINNER_SIZE.sm} />
-            )}
-          </div>
-          {orderCatalogOKMS && !isLoading && (
-            <OdsSelect
-              className="md:w-[250px] sm:w-full"
-              name="select-region"
-              placeholder={t(
-                'key_management_service_create_select_placeholder',
-              )}
-              onOdsChange={(v) => {
-                const value = v.detail.value?.toString();
+    <div className="flex flex-col gap-8">
+      <div className="flex flex-col gap-4">
+        <OdsText preset={ODS_TEXT_PRESET.heading2}>
+          {t('key_management_service_create_region_title')}
+        </OdsText>
+        <OdsText preset={ODS_TEXT_PRESET.paragraph}>
+          {t('key_management_service_create_region_description')}
+        </OdsText>
+        {isLoading && (
+          <OdsSpinner className="mr-3" size={ODS_SPINNER_SIZE.sm} />
+        )}
+        {orderCatalogOKMS && !isLoading && (
+          <OdsSelect
+            className="md:w-[250px] sm:w-full"
+            name="select-region"
+            placeholder={t('key_management_service_create_select_placeholder')}
+            onOdsChange={(v) => {
+              const value = v.detail.value?.toString();
 
-                if (value) {
-                  trackClick({
-                    location: PageLocation.funnel,
-                    buttonType: ButtonType.select,
-                    actionType: 'action',
-                    actions: ['select_location', value],
-                  });
+              if (value) {
+                trackClick({
+                  location: PageLocation.funnel,
+                  buttonType: ButtonType.select,
+                  actionType: 'action',
+                  actions: ['select_location', value],
+                });
 
-                  selectRegion(value);
-                }
-              }}
-            >
-              {orderCatalogOKMS.plans[0].configurations[0].values.map(
-                (region) => (
-                  <option
-                    key={region}
-                    value={region}
-                    data-testid={`select-region-option-${region}`}
-                  >
-                    <Region
-                      mode="region"
-                      name={region.toLowerCase().replaceAll('_', '-')}
-                    />
-                  </option>
-                ),
-              )}
-            </OdsSelect>
-          )}
-        </OdsFormField>
+                selectRegion(value);
+              }
+            }}
+          >
+            {orderCatalogOKMS.plans[0].configurations[0].values.map(
+              (region) => (
+                <option
+                  key={region}
+                  value={region}
+                  data-testid={`select-region-option-${region}`}
+                >
+                  <Region
+                    mode="region"
+                    name={region.toLowerCase().replaceAll('_', '-')}
+                  />
+                </option>
+              ),
+            )}
+          </OdsSelect>
+        )}
       </div>
       <div className="flex flex-row gap-4">
         <OdsButton
@@ -145,7 +138,7 @@ const RegionSelector = ({
           label={t('key_management_service_create_cta_order')}
         />
       </div>
-    </>
+    </div>
   );
 };
 
diff --git a/packages/manager/apps/key-management-service/src/components/layout-helpers/Dashboard/GeneralInformationsTiles/BillingInformationsTile.tsx b/packages/manager/apps/key-management-service/src/components/layout-helpers/Dashboard/GeneralInformationsTiles/BillingInformationsTile.tsx
index 67f446d878e6..2a4ccc18247a 100644
--- a/packages/manager/apps/key-management-service/src/components/layout-helpers/Dashboard/GeneralInformationsTiles/BillingInformationsTile.tsx
+++ b/packages/manager/apps/key-management-service/src/components/layout-helpers/Dashboard/GeneralInformationsTiles/BillingInformationsTile.tsx
@@ -104,7 +104,7 @@ const BillingInformationsTile = ({
               'key_management_service_dashboard_field_label_next_billing_date',
             ),
             value: (
-              <div className="flex flex-row justify-between items-center">
+              <div className="flex flex-row justify-between items-center gap-2">
                 <TileValueDate
                   value={okmsService?.billing.nextBillingDate}
                   options={dateFormat}
diff --git a/packages/manager/apps/key-management-service/src/components/layout-helpers/Dashboard/GeneralInformationsTiles/InformationsTile.tsx b/packages/manager/apps/key-management-service/src/components/layout-helpers/Dashboard/GeneralInformationsTiles/InformationsTile.tsx
index 76ef1df233e6..24edb3af3086 100644
--- a/packages/manager/apps/key-management-service/src/components/layout-helpers/Dashboard/GeneralInformationsTiles/InformationsTile.tsx
+++ b/packages/manager/apps/key-management-service/src/components/layout-helpers/Dashboard/GeneralInformationsTiles/InformationsTile.tsx
@@ -13,6 +13,7 @@ import {
   ODS_ICON_NAME,
   ODS_TEXT_PRESET,
   ODS_BUTTON_COLOR,
+  ODS_BUTTON_SIZE,
 } from '@ovhcloud/ods-components';
 import {
   ButtonType,
@@ -46,7 +47,7 @@ const InformationsTile = ({
             id: 'name',
             label: t('key_management_service_dashboard_field_label_name'),
             value: (
-              <div className="flex justify-between items-center">
+              <div className="flex justify-between items-center gap-2">
                 <OdsText
                   preset={ODS_TEXT_PRESET.paragraph}
                   className="break-all"
@@ -56,6 +57,7 @@ const InformationsTile = ({
                 <div className="min-w-fit">
                   <OdsButton
                     aria-label="edit"
+                    size={ODS_BUTTON_SIZE.sm}
                     variant={ODS_BUTTON_VARIANT.outline}
                     color={ODS_BUTTON_COLOR.primary}
                     onClick={() => navigate(ROUTES_URLS.okmsUpdateName)}
diff --git a/packages/manager/apps/key-management-service/src/components/menu/KmsActionMenu.component.tsx b/packages/manager/apps/key-management-service/src/components/menu/KmsActionMenu.component.tsx
index 0878684626cd..c49679eda842 100644
--- a/packages/manager/apps/key-management-service/src/components/menu/KmsActionMenu.component.tsx
+++ b/packages/manager/apps/key-management-service/src/components/menu/KmsActionMenu.component.tsx
@@ -5,7 +5,11 @@ import {
   useOvhTracking,
 } from '@ovh-ux/manager-react-shell-client';
 import React from 'react';
-import { ODS_BUTTON_COLOR, ODS_ICON_NAME } from '@ovhcloud/ods-components';
+import {
+  ODS_BUTTON_COLOR,
+  ODS_BUTTON_VARIANT,
+  ODS_ICON_NAME,
+} from '@ovhcloud/ods-components';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import { OKMS } from '@/types/okms.type';
@@ -39,6 +43,7 @@ const KmsActionMenu = ({ id }: OKMS) => {
       items={items}
       isCompact
       icon={ODS_ICON_NAME.ellipsisVertical}
+      variant={ODS_BUTTON_VARIANT.ghost}
     />
   );
 };
diff --git a/packages/manager/apps/key-management-service/src/pages/create/index.tsx b/packages/manager/apps/key-management-service/src/pages/create/index.tsx
index de347e69e3a1..8b4c392f4353 100644
--- a/packages/manager/apps/key-management-service/src/pages/create/index.tsx
+++ b/packages/manager/apps/key-management-service/src/pages/create/index.tsx
@@ -13,6 +13,7 @@ export default function Create() {
   const { t } = useTranslation('key-management-service/create');
   const [isOrderInitiated, setIsOrderInitiated] = useState(false);
   const [selectedRegion, setSelectedRegion] = useState(undefined);
+
   return (
     <div className="m-10">
       <Breadcrumb
diff --git a/packages/manager/apps/key-management-service/src/pages/dashboard/credentialList/CredentialList.page.tsx b/packages/manager/apps/key-management-service/src/pages/dashboard/credentialList/CredentialList.page.tsx
index 55cb7d1ffa4d..5649dc1c2a06 100644
--- a/packages/manager/apps/key-management-service/src/pages/dashboard/credentialList/CredentialList.page.tsx
+++ b/packages/manager/apps/key-management-service/src/pages/dashboard/credentialList/CredentialList.page.tsx
@@ -9,7 +9,6 @@ import {
 import {
   ODS_BUTTON_COLOR,
   ODS_BUTTON_SIZE,
-  ODS_BUTTON_VARIANT,
   ODS_ICON_NAME,
   ODS_TEXT_PRESET,
 } from '@ovhcloud/ods-components';
@@ -35,7 +34,7 @@ const CredentialList = () => {
   );
 
   return (
-    <div className="flex flex-col gap-8 mt-8">
+    <div className="flex flex-col gap-4">
       <OdsText preset={ODS_TEXT_PRESET.paragraph}>
         {t('key_management_service_credential_headline')}
       </OdsText>
@@ -44,7 +43,6 @@ const CredentialList = () => {
         isLoading={isLoadingIam}
         size={ODS_BUTTON_SIZE.sm}
         color={ODS_BUTTON_COLOR.primary}
-        variant={ODS_BUTTON_VARIANT.outline}
         className="w-fit"
         onClick={() => {
           trackClick({
diff --git a/packages/manager/apps/key-management-service/src/pages/dashboard/serviceKeyList/ServiceKeyList.page.tsx b/packages/manager/apps/key-management-service/src/pages/dashboard/serviceKeyList/ServiceKeyList.page.tsx
index 0a8350fdfd6f..2a8300b3f755 100644
--- a/packages/manager/apps/key-management-service/src/pages/dashboard/serviceKeyList/ServiceKeyList.page.tsx
+++ b/packages/manager/apps/key-management-service/src/pages/dashboard/serviceKeyList/ServiceKeyList.page.tsx
@@ -6,7 +6,6 @@ import {
   ODS_MESSAGE_COLOR,
   ODS_BUTTON_SIZE,
   ODS_ICON_NAME,
-  ODS_BUTTON_VARIANT,
   ODS_TEXT_PRESET,
   ODS_BUTTON_ICON_ALIGNMENT,
   ODS_BUTTON_COLOR,
@@ -102,7 +101,7 @@ export default function Keys() {
     );
 
   return (
-    <div className="flex flex-col gap-8">
+    <div className="flex flex-col gap-4">
       <OdsText preset={ODS_TEXT_PRESET.paragraph}>
         {t('key_management_service_service-keys_headline')}
       </OdsText>
@@ -111,28 +110,25 @@ export default function Keys() {
           {tError('manager_error_page_default')}
         </OdsMessage>
       )}
-      <div>
-        <ManagerButton
-          id="createEncryptionKey"
-          size={ODS_BUTTON_SIZE.sm}
-          color={ODS_BUTTON_COLOR.primary}
-          variant={ODS_BUTTON_VARIANT.outline}
-          onClick={() => {
-            trackClick({
-              location: PageLocation.page,
-              buttonType: ButtonType.button,
-              actionType: 'action',
-              actions: ['create_encryption_key'],
-            });
-            navigate(ROUTES_URLS.createKmsServiceKey);
-          }}
-          urn={okms.iam.urn}
-          iamActions={[kmsIamActions.serviceKeyCreate]}
-          label={t('key_management_service_service-keys_cta_create')}
-          icon={ODS_ICON_NAME.plus}
-          iconAlignment={ODS_BUTTON_ICON_ALIGNMENT.left}
-        />
-      </div>
+      <ManagerButton
+        id="createEncryptionKey"
+        size={ODS_BUTTON_SIZE.sm}
+        color={ODS_BUTTON_COLOR.primary}
+        onClick={() => {
+          trackClick({
+            location: PageLocation.page,
+            buttonType: ButtonType.button,
+            actionType: 'action',
+            actions: ['create_encryption_key'],
+          });
+          navigate(ROUTES_URLS.createKmsServiceKey);
+        }}
+        urn={okms.iam.urn}
+        iamActions={[kmsIamActions.serviceKeyCreate]}
+        label={t('key_management_service_service-keys_cta_create')}
+        icon={ODS_ICON_NAME.plus}
+        iconAlignment={ODS_BUTTON_ICON_ALIGNMENT.left}
+      />
       <Datagrid
         columns={columns}
         items={okmsServiceKey || []}
diff --git a/packages/manager/apps/key-management-service/src/pages/listing/index.tsx b/packages/manager/apps/key-management-service/src/pages/listing/index.tsx
index 36044e0adf28..7fd64f9fd20a 100644
--- a/packages/manager/apps/key-management-service/src/pages/listing/index.tsx
+++ b/packages/manager/apps/key-management-service/src/pages/listing/index.tsx
@@ -4,7 +4,6 @@ import { useTranslation } from 'react-i18next';
 import {
   ODS_MESSAGE_COLOR,
   ODS_BUTTON_SIZE,
-  ODS_BUTTON_VARIANT,
   ODS_BUTTON_COLOR,
 } from '@ovhcloud/ods-components';
 import { OdsButton, OdsMessage } from '@ovhcloud/ods-components/react';
@@ -114,11 +113,10 @@ export default function Listing() {
         }}
         message={<Notifications />}
       >
-        <div className="flex mb-3 mt-6">
+        <div className="flex flex-col gap-4">
           <OdsButton
             className="mr-1"
             size={ODS_BUTTON_SIZE.sm}
-            variant={ODS_BUTTON_VARIANT.outline}
             color={ODS_BUTTON_COLOR.primary}
             onClick={() => {
               clearNotifications();
@@ -132,9 +130,7 @@ export default function Listing() {
             }}
             label={t('key_management_service_listing_add_kms_button')}
           />
-        </div>
-        {flattenData && (
-          <div className="mt-8">
+          {flattenData && (
             <Datagrid
               columns={columns}
               items={flattenData}
@@ -143,8 +139,8 @@ export default function Listing() {
               onFetchNextPage={() => fetchNextPage()}
               contentAlignLeft
             />
-          </div>
-        )}
+          )}
+        </div>
         <Outlet />
       </BaseLayout>
     </RedirectionGuard>
diff --git a/packages/manager/apps/key-management-service/src/pages/serviceKey/ServiceKey.page.tsx b/packages/manager/apps/key-management-service/src/pages/serviceKey/ServiceKey.page.tsx
index 048e63525129..039dc206b01a 100644
--- a/packages/manager/apps/key-management-service/src/pages/serviceKey/ServiceKey.page.tsx
+++ b/packages/manager/apps/key-management-service/src/pages/serviceKey/ServiceKey.page.tsx
@@ -17,6 +17,7 @@ import {
   ODS_BUTTON_VARIANT,
   ODS_ICON_NAME,
   ODS_BUTTON_COLOR,
+  ODS_BUTTON_SIZE,
 } from '@ovhcloud/ods-components';
 import {
   ButtonType,
@@ -145,7 +146,7 @@ export default function Key() {
                   'key_management_service_service-keys_dashboard_field_name',
                 ),
                 value: (
-                  <div className="flex justify-between items-center">
+                  <div className="flex justify-between items-center gap-2">
                     <OdsText
                       className="max-w-1/2 text-ellipsis overflow-hidden"
                       preset={ODS_TEXT_PRESET.paragraph}
@@ -155,6 +156,7 @@ export default function Key() {
                     <ManagerButton
                       id="editName"
                       label=""
+                      size={ODS_BUTTON_SIZE.sm}
                       variant={ODS_BUTTON_VARIANT.outline}
                       color={ODS_BUTTON_COLOR.primary}
                       urn={serviceKey.data.iam.urn}