fix: design issue after bump ods18

Signed-off-by: Lionel Bueno <[email protected]>
ovh · Dec 31, 2024 · cb673a8 · cb673a8
1 parent 7d4a8c3
commit cb673a8
Show file tree

Hide file tree

Showing 10 changed files with 90 additions and 58 deletions.
diff --git a/packages/manager/apps/pci-savings-plan/src/components/Breadcrumb/Breadcrumb.tsx b/packages/manager/apps/pci-savings-plan/src/components/Breadcrumb/Breadcrumb.tsx
@@ -64,7 +64,11 @@ const Breadcrumb: React.FC = () => {
   return (
     <OdsBreadcrumb>
       {breadcrumbItems.map((item) => (
-        <OdsBreadcrumbItem href={item.href} label={item.label} />
+        <OdsBreadcrumbItem
+          key={item.href}
+          href={item.href}
+          label={item.label}
+        />
       ))}
     </OdsBreadcrumb>
   );

diff --git a/packages/manager/apps/pci-savings-plan/src/components/Commitment/Commitment.style.scss b/packages/manager/apps/pci-savings-plan/src/components/Commitment/Commitment.style.scss
@@ -0,0 +1,4 @@
+.text-price::part(text) {
+   color: #AC246F;
+   font-weight: bold;
+  }
diff --git a/packages/manager/apps/pci-savings-plan/src/components/Commitment/Commitment.tsx b/packages/manager/apps/pci-savings-plan/src/components/Commitment/Commitment.tsx
@@ -7,6 +7,7 @@ import {
   CENTS_PRICE,
   convertHourlyPriceToMonthly,
 } from '../../utils/commercial-catalog/utils';
+import './Commitment.style.scss';
 
 const Commitment = ({
   duration,
@@ -48,7 +49,7 @@ const Commitment = ({
       <span className="flex flex-row items-center justify-center">
         <OdsText>{t('commitment_month', { value: duration })}</OdsText>
         <OdsText
-          className="ml-3 text-[#AC246F] text-[16px]"
+          className="ml-3  text-[16px] text-price"
           style={{ '--ods-text-color': '#AC246F' } as React.CSSProperties}
         >
           {diffInPercent ? `- ${diffInPercent} %` : ''}
@@ -61,7 +62,7 @@ const Commitment = ({
               {`~ ${getTextPrice(priceByMonthWithoutCommitment * CENTS_PRICE)}`}
             </OdsText>
           )}
-          <OdsText className="ml-3 text-[#AC246F] text-[16px]">
+          <OdsText className="ml-3 text-price text-[16px]">
             {getTextPrice(priceNumber * CENTS_PRICE)}
           </OdsText>
         </div>

diff --git a/packages/manager/apps/pci-savings-plan/src/components/CreatePlanForm/CreatePlanForm.tsx b/packages/manager/apps/pci-savings-plan/src/components/CreatePlanForm/CreatePlanForm.tsx
@@ -253,6 +253,7 @@ const CreatePlanForm: FC<CreatePlanFormProps> = ({
         <div className="flex flex-row  w-full overflow-x-auto">
           {resources.map((resource) => (
             <SimpleTile
+              className="py-5"
               key={resource.value.toString()}
               isActive={selectedResource === resource.value}
               onClick={() => onChangeResource(resource.value)}
@@ -322,7 +323,7 @@ const CreatePlanForm: FC<CreatePlanFormProps> = ({
             name="quantity"
           />
         </OdsCard>
-        <OdsMessage className="my-4">
+        <OdsMessage className="my-4" isDismissible={false}>
           <OdsText className="inline-block">
             {t(
               isInstance

diff --git a/packages/manager/apps/pci-savings-plan/src/components/Modal/RenewModal.tsx b/packages/manager/apps/pci-savings-plan/src/components/Modal/RenewModal.tsx
@@ -18,35 +18,35 @@ export default function RenewModal({
   const { t } = useTranslation('renew');
 
   return (
-    <OdsModal onOdsClose={onClose}>
+    <OdsModal onOdsClose={onClose} isOpen>
       <OdsText preset="heading-3">{t('title')}</OdsText>
 
-      <slot name="content">
-        <div className="mt-5">
-          <OdsText preset="span">
-            {t(
-              periodEndAction === SavingsPlanPlanedChangeStatus.REACTIVATE
-                ? 'message_deactivate'
-                : 'message_activate',
-            )}
-          </OdsText>
-        </div>
-      </slot>
-      <OdsButton
-        label={t('buttons_cancel')}
-        variant={ODS_BUTTON_VARIANT.ghost}
-        onClick={onClose}
-      />
+      <div className="mt-5">
+        <OdsText preset="span">
+          {t(
+            periodEndAction === SavingsPlanPlanedChangeStatus.REACTIVATE
+              ? 'message_deactivate'
+              : 'message_activate',
+          )}
+        </OdsText>
+      </div>
+      <div className="mt-5" slot="actions">
+        <OdsButton
+          label={t('buttons_cancel')}
+          variant={ODS_BUTTON_VARIANT.ghost}
+          onClick={onClose}
+        />
 
-      <OdsButton
-        label={t(
-          periodEndAction === SavingsPlanPlanedChangeStatus.REACTIVATE
-            ? 'buttons_deactivate'
-            : 'buttons_activate',
-        )}
-        onClick={onConfirm}
-        data-testid="renewModal-button_confirm"
-      />
+        <OdsButton
+          label={t(
+            periodEndAction === SavingsPlanPlanedChangeStatus.REACTIVATE
+              ? 'buttons_deactivate'
+              : 'buttons_activate',
+          )}
+          onClick={onConfirm}
+          data-testid="renewModal-button_confirm"
+        />
+      </div>
     </OdsModal>
   );
 }
diff --git a/packages/manager/apps/pci-savings-plan/src/components/SimpleTile/SimpleTile.tsx b/packages/manager/apps/pci-savings-plan/src/components/SimpleTile/SimpleTile.tsx
@@ -4,13 +4,17 @@ import React from 'react';
 const SimpleTile: React.FC<React.PropsWithChildren<{
   onClick?: () => void;
   isActive?: boolean;
-}>> = ({ children, onClick, isActive }) => (
+  className?: string;
+}>> = ({ children, onClick, isActive, className }) => (
   <OdsCard
     className={`flex items-center flex-col justify-center w-1/2 shrink-0 md:shrink md:w-1/4  mr-5 text-center p-3 ${
       onClick ? 'cursor-pointer' : 'cursor-default'
     } ${
-      isActive ? ' bg-[--ods-color-blue-100] border-[--ods-color-blue-600]' : ''
-    }`}
+      isActive
+        ? ' bg-[--ods-color-blue-100] border-[--ods-color-blue-600] border-2'
+        : ''
+    } ${className}`}
+    color={'neutral'}
     onClick={onClick}
   >
     {children}

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
@@ -24,13 +24,15 @@ interface SavingsPlanActionsCell {
 }
 
 const MenuItems = ({
+  id,
   status,
   flavor,
   onClickEdit,
   onClickRenew,
   periodEndAction,
   pciUrl,
 }: {
+  id: string;
   status: SavingsPlanStatus;
   flavor: string;
   onClickEdit: () => void;
@@ -45,18 +47,15 @@ const MenuItems = ({
   const isInstance = useMemo(() => /\d/.test(flavor), [flavor]);
 
   return (
-    <>
-      <div id="popover-trigger">
+    <OdsPopover triggerId={`popover-trigger-${id}`}>
+      <div className="flex flex-col gap-2">
         <OdsButton
           label={t('edit')}
           size={ODS_BUTTON_SIZE.sm}
           variant={ODS_BUTTON_VARIANT.ghost}
           text-align="start"
           onClick={onClickEdit}
         />
-      </div>
-
-      <OdsPopover triggerId="popover-trigger">
         {status !== SavingsPlanStatus.TERMINATED && (
           <OdsButton
             label={
@@ -82,8 +81,8 @@ const MenuItems = ({
               : navigate(`${pciUrl}/rancher/new`)
           }
         />
-      </OdsPopover>
-    </>
+      </div>
+    </OdsPopover>
   );
 };
 
@@ -103,13 +102,17 @@ export default function ActionsCell({
 
   return (
     <>
-      <OdsButton
-        icon={ODS_ICON_NAME.ellipsisVertical}
-        variant={ODS_BUTTON_VARIANT.outline}
-        size={ODS_BUTTON_SIZE.sm}
-        isDisabled={!editable || undefined}
-      />
+      <div id={`popover-trigger-${id}`}>
+        <OdsButton
+          label=""
+          icon={ODS_ICON_NAME.ellipsisVertical}
+          variant={ODS_BUTTON_VARIANT.outline}
+          size={ODS_BUTTON_SIZE.sm}
+          isDisabled={!editable || undefined}
+        />
+      </div>
       <MenuItems
+        id={id}
         pciUrl={pciUrl}
         flavor={flavor}
         status={status}

diff --git a/...ages/manager/apps/pci-savings-plan/src/components/TileTechnicalInfo/TileTechnicalInfo.tsx b/...ages/manager/apps/pci-savings-plan/src/components/TileTechnicalInfo/TileTechnicalInfo.tsx
@@ -53,8 +53,8 @@ export const TileTechnicalInfo: React.FC<TileTechnicalInfoProps> = ({
 }) => (
   <SimpleTile onClick={onClick} isActive={isActive}>
     <div className="flex flex-col items-center justify-center">
-      <OdsText preset="span" className="mb-5">
-        {name}
+      <OdsText className="mb-5">
+        <span className="font-bold">{name}</span>
       </OdsText>
       {technical && technical.bandwidth && (
         <DisplayTechnicalInfo technical={technical} />

diff --git a/packages/manager/apps/pci-savings-plan/src/index.tsx b/packages/manager/apps/pci-savings-plan/src/index.tsx
@@ -31,6 +31,11 @@ const init = async (appName: string) => {
     reloadOnLocaleChange: true,
     defaultNS: appName,
     ns: ['listing', 'renew', 'onboarding', 'create'],
+    options: {
+      react: {
+        useSuspense: false,
+      },
+    },
   });
 
   const region = context.environment.getRegion();

diff --git a/packages/manager/apps/pci-savings-plan/src/pages/listing/edit-name/index.tsx b/packages/manager/apps/pci-savings-plan/src/pages/listing/edit-name/index.tsx
@@ -1,37 +1,40 @@
-import React, { Suspense } from 'react';
+import React, { startTransition, Suspense } from 'react';
 import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { UpdateNameModal } from '@ovh-ux/manager-react-components';
 import { useSavingsPlan, useSavingsPlanEditName } from '@/hooks/useSavingsPlan';
 import { REGEX } from '@/utils/savingsPlan';
 
-const EditNamePage = () => {
-  const { t } = useTranslation('edit-name');
-  const { t: tCreate } = useTranslation('create');
-
+const EditNameChildren = () => {
   const navigate = useNavigate();
   const { savingsPlanId } = useParams();
 
   const { data: savingsPlan } = useSavingsPlan();
   const { mutate: editName } = useSavingsPlanEditName(savingsPlanId);
   const [searchParams] = useSearchParams();
 
-  const currentPlan = savingsPlan.find((plan) => plan.id === savingsPlanId);
+  const currentPlan = savingsPlan?.find((plan) => plan.id === savingsPlanId);
+
+  const { t } = useTranslation('edit-name');
+  const { t: tCreate } = useTranslation('create');
 
   return (
-    <Suspense fallback="">
+    <>
       {currentPlan ? (
         <UpdateNameModal
+          isOpen
           inputLabel=""
           closeModal={() =>
             navigate({ pathname: '..', search: searchParams.toString() })
           }
           defaultValue={currentPlan?.displayName || ''}
           updateDisplayName={(displayName) => {
-            editName({
-              displayName,
+            startTransition(() => {
+              editName({
+                displayName,
+              });
+              navigate({ pathname: '..', search: searchParams.toString() });
             });
-            navigate({ pathname: '..', search: searchParams.toString() });
           }}
           headline={t('title')}
           pattern={REGEX}
@@ -41,6 +44,13 @@ const EditNamePage = () => {
       ) : (
         <></>
       )}
+    </>
+  );
+};
+const EditNamePage = () => {
+  return (
+    <Suspense fallback="">
+      <EditNameChildren />
     </Suspense>
   );
 };