fix: design issue after bump ods18 (#14741)

ref: TAPC-2456 Signed-off-by: Lionel Bueno <[email protected]> Co-authored-by: Lionel Bueno <[email protected]>
ovh · Jan 7, 2025 · d254fd0 · d254fd0
1 parent 5692b11
commit d254fd0
Show file tree

Hide file tree

Showing 9 changed files with 86 additions and 67 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.tsx b/packages/manager/apps/pci-savings-plan/src/components/Commitment/Commitment.tsx
@@ -40,19 +40,20 @@ const Commitment = ({
     <OdsCard
       className={`flex flex-row items-center mr-5 my-4 p-5 justify-between w-full cursor-pointer ${
         isActive
-          ? 'bg-[--ods-color-blue-100] border-[--ods-color-blue-600]'
+          ? 'bg-[--ods-color-primary-050] border-[--ods-color-primary-500] border-2'
           : ''
       }`}
       onClick={onClick}
     >
       <span className="flex flex-row items-center justify-center">
         <OdsText>{t('commitment_month', { value: duration })}</OdsText>
-        <OdsText
-          className="ml-3 text-[#AC246F] text-[16px]"
-          style={{ '--ods-text-color': '#AC246F' } as React.CSSProperties}
-        >
-          {diffInPercent ? `- ${diffInPercent} %` : ''}
-        </OdsText>
+        {diffInPercent && (
+          <OdsText className="ml-3  text-[16px]">
+            <span className="text-[#AC246F] font-bold">
+              {`- ${diffInPercent} %`}
+            </span>
+          </OdsText>
+        )}
       </span>
       <span className="flex flex-col items-end justify-center">
         <div className="flex flex-row items-center justify-center">
@@ -61,8 +62,10 @@ const Commitment = ({
               {`~ ${getTextPrice(priceByMonthWithoutCommitment * CENTS_PRICE)}`}
             </OdsText>
           )}
-          <OdsText className="ml-3 text-[#AC246F] text-[16px]">
-            {getTextPrice(priceNumber * CENTS_PRICE)}
+          <OdsText className="ml-3  text-[16px]">
+            <span className="text-[#AC246F] font-bold">
+              {getTextPrice(priceNumber * CENTS_PRICE)}
+            </span>
           </OdsText>
         </div>
         <OdsText>{t('commitment_price_month')}</OdsText>

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
@@ -49,6 +49,7 @@ import { isValidSavingsPlanName } from '../../utils/savingsPlan';
 import Commitment from '../Commitment/Commitment';
 import SimpleTile from '../SimpleTile/SimpleTile';
 import { TileTechnicalInfo } from '../TileTechnicalInfo/TileTechnicalInfo';
+import LegalLinks from '../LegalLinks/LegalLinks';
 
 const COMMON_SPACING = 'my-4';
 
@@ -251,6 +252,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)}
@@ -320,7 +322,7 @@ const CreatePlanForm: FC<CreatePlanFormProps> = ({
             name="quantity"
           />
         </OdsCard>
-        <OdsMessage className="my-4">
+        <OdsMessage className="my-4" isDismissible={false}>
           <OdsText className="inline-block">
             {t(
               isInstance
@@ -392,6 +394,7 @@ const CreatePlanForm: FC<CreatePlanFormProps> = ({
         <label htmlFor="checkbox-label">
           <OdsText>{t('legal_checkbox')}</OdsText>
         </label>
+        <LegalLinks />
       </Block>
       <div className="flex mt-8">
         <OdsButton

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
@@ -17,36 +17,30 @@ export default function RenewModal({
 }: Readonly<TRenewModal>) {
   const { t } = useTranslation('renew');
 
+  const isReactivate =
+    periodEndAction === SavingsPlanPlanedChangeStatus.REACTIVATE;
   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(isReactivate ? '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(isReactivate ? '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-primary-050] border-[--ods-color-primary-500] 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,14 +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}
-        label="action-menu"
-      />
+      <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
@@ -3,7 +3,6 @@ import {
   initI18n,
   initShellContext,
 } from '@ovh-ux/manager-react-shell-client';
-import '@ovhcloud/ods-themes/default';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';

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>
   );
 };