fix(pci-load-balancer): uix fixes and refacto

Signed-off-by: LIDRISSI Hamid <[email protected]>
ovh · Oct 10, 2024 · c220a32 · c220a32
1 parent d2dbe0e
commit c220a32
Show file tree

Hide file tree

Showing 14 changed files with 97 additions and 169 deletions.
diff --git a/...ages/manager/apps/pci-load-balancer/src/components/detail/listeners/ListenerForm.page.tsx b/...ages/manager/apps/pci-load-balancer/src/components/detail/listeners/ListenerForm.page.tsx
@@ -27,6 +27,7 @@ import {
 import { TLoadBalancerListener, TProtocol } from '@/api/data/load-balancer';
 import Popover from './Popover';
 import { TLoadBalancerPool } from '@/api/data/pool';
+import LabelComponent from '@/components/form/Label.component';
 
 export type TFormState = {
   name: string;
@@ -158,19 +159,11 @@ export default function ListenerForm({
         className="my-8"
         error={isNameRequired ? tCommon('common_field_error_required') : ''}
       >
-        <OsdsText
-          level={ODS_TEXT_LEVEL.caption}
-          size={ODS_THEME_TYPOGRAPHY_SIZE._100}
-          color={
-            isNameRequired
-              ? ODS_THEME_COLOR_INTENT.error
-              : ODS_THEME_COLOR_INTENT.text
-          }
-          className="font-bold"
-          slot="label"
-        >
-          {t('octavia_load_balancer_listeners_create_name')}
-        </OsdsText>
+        <LabelComponent
+          text={t('octavia_load_balancer_listeners_create_name')}
+          hasError={isNameRequired}
+        />
+
         <OsdsInput
           type={ODS_INPUT_TYPE.text}
           value={formState.name}
@@ -188,16 +181,9 @@ export default function ListenerForm({
 
       <OsdsFormField className="my-8">
         <div slot="label" className="flex items-center gap-3">
-          <OsdsText
-            level={ODS_TEXT_LEVEL.caption}
-            size={ODS_THEME_TYPOGRAPHY_SIZE._100}
-            color={ODS_THEME_COLOR_INTENT.text}
-            className="font-bold"
-          >
-            {t('octavia_load_balancer_listeners_create_protocol')}
-          </OsdsText>
-          <Popover
-            content={tListeners(
+          <LabelComponent
+            text={t('octavia_load_balancer_listeners_create_protocol')}
+            helpText={tListeners(
               'octavia_load_balancer_listeners_protocol_helper',
             )}
           />
@@ -221,19 +207,10 @@ export default function ListenerForm({
       </OsdsFormField>
 
       <OsdsFormField className="my-8" error={portError}>
-        <OsdsText
-          level={ODS_TEXT_LEVEL.caption}
-          size={ODS_THEME_TYPOGRAPHY_SIZE._100}
-          color={
-            portError
-              ? ODS_THEME_COLOR_INTENT.error
-              : ODS_THEME_COLOR_INTENT.text
-          }
-          className="font-bold"
-          slot="label"
-        >
-          {t('octavia_load_balancer_listeners_create_port')}
-        </OsdsText>
+        <LabelComponent
+          text={t('octavia_load_balancer_listeners_create_port')}
+          hasError={!!portError}
+        />
 
         <OsdsInput
           type={ODS_INPUT_TYPE.number}
@@ -254,15 +231,9 @@ export default function ListenerForm({
       </OsdsFormField>
 
       <OsdsFormField className="my-8">
-        <OsdsText
-          level={ODS_TEXT_LEVEL.caption}
-          size={ODS_THEME_TYPOGRAPHY_SIZE._100}
-          color={ODS_THEME_COLOR_INTENT.text}
-          className="font-bold"
-          slot="label"
-        >
-          {t('octavia_load_balancer_listeners_create_pool')}
-        </OsdsText>
+        <LabelComponent
+          text={t('octavia_load_balancer_listeners_create_pool')}
+        />
 
         <OsdsSelect
           value={formState.pool?.id}

diff --git a/packages/manager/apps/pci-load-balancer/src/components/detail/listeners/Popover.tsx b/packages/manager/apps/pci-load-balancer/src/components/detail/listeners/Popover.tsx
diff --git a/...anager/apps/pci-load-balancer/src/components/detail/listeners/l7/PolicyForm.component.tsx b/...anager/apps/pci-load-balancer/src/components/detail/listeners/l7/PolicyForm.component.tsx
@@ -150,7 +150,7 @@ export default function PolicyForm({
     }
   }, [policy]);
   return (
-    <>
+    <div className="w-[20rem]">
       <OsdsFormField
         error={hasErrorName ? tPciCommon('common_field_error_required') : ''}
       >
@@ -385,6 +385,6 @@ export default function PolicyForm({
             t('octavia_load_balancer_create_l7_policy_submit')}
         </OsdsButton>
       </div>
-    </>
+    </div>
   );
 }
diff --git a/packages/manager/apps/pci-load-balancer/src/components/form/Label.component.tsx b/packages/manager/apps/pci-load-balancer/src/components/form/Label.component.tsx
@@ -24,28 +24,29 @@ export default function LabelComponent({
   text,
   helpText,
   hasError,
-  slot,
+  slot = 'label',
   className = '',
 }: Readonly<TLabelProps>): JSX.Element {
   return (
-    <div slot={slot} className={`border border-black ${className}`.trim()}>
+    <div slot={slot} className={`flex gap-2 items-center ${className}`.trim()}>
       <OsdsText
         color={
           hasError ? ODS_THEME_COLOR_INTENT.error : ODS_THEME_COLOR_INTENT.text
         }
-        className="align-super"
+        className="font-bold"
         size={ODS_TEXT_SIZE._100}
-        level={ODS_TEXT_LEVEL.subheading}
+        level={ODS_TEXT_LEVEL.caption}
       >
         {text}
       </OsdsText>
+
       {helpText && (
-        <OsdsPopover>
+        <OsdsPopover className="w-4 h-4">
           <span slot="popover-trigger">
             <OsdsIcon
               name={ODS_ICON_NAME.HELP}
-              size={ODS_ICON_SIZE.xs}
-              className="cursor-help ml-3 mt-3 w-7"
+              size={ODS_ICON_SIZE.xxs}
+              className="cursor-help"
               color={ODS_THEME_COLOR_INTENT.text}
             ></OsdsIcon>
           </span>

diff --git a/packages/manager/apps/pci-load-balancer/src/components/form/PoolForm.component.tsx b/packages/manager/apps/pci-load-balancer/src/components/form/PoolForm.component.tsx
@@ -221,7 +221,6 @@ export const PoolFormComponent = ({
         <LabelComponent
           text={t('octavia_load_balancer_pools_create_name')}
           hasError={state.name.isTouched && state.name.value === ''}
-          slot="label"
         />
         <OsdsInput
           value={state.name.value}
@@ -241,7 +240,7 @@ export const PoolFormComponent = ({
           }
           type={ODS_INPUT_TYPE.text}
           error={state.name.isTouched && state.name.value === ''}
-          className="border"
+          className="border w-[20rem]"
         />
       </OsdsFormField>
 
@@ -264,10 +263,8 @@ export const PoolFormComponent = ({
           text={t('octavia_load_balancer_pools_create_algorithm')}
           helpText={t('octavia_load_balancer_pools_create_algorithm_tooltip')}
           hasError={error.algorithm}
-          slot="label"
-        ></LabelComponent>
+        />
         <OsdsSelect
-          className="w-[20rem]"
           value={state.algorithm.value}
           error={error.algorithm}
           onOdsBlur={() => {
@@ -289,6 +286,7 @@ export const PoolFormComponent = ({
             }));
           }}
           inline
+          className="w-[20rem]"
         >
           {state.algorithms.map((alg) => (
             <OsdsSelectOption value={alg} key={alg}>
@@ -306,11 +304,9 @@ export const PoolFormComponent = ({
         <LabelComponent
           text={t('octavia_load_balancer_pools_create_protocol')}
           helpText={t('octavia_load_balancer_pools_create_protocol_tooltip')}
-          slot="label"
           hasError={error.protocol}
         />
         <OsdsSelect
-          className="w-[20rem] ml-4"
           value={state.protocol.value}
           error={error.protocol}
           onOdsBlur={() => {
@@ -333,6 +329,7 @@ export const PoolFormComponent = ({
           }}
           {...(!isEditMode ? {} : { disabled: true })}
           inline
+          className="w-[20rem]"
         >
           <OsdsText
             color={ODS_THEME_COLOR_INTENT.text}
@@ -370,6 +367,7 @@ export const PoolFormComponent = ({
           className="mr-6"
         />
       </OsdsToggle>
+
       {state.permanentSession.isEnabled && (
         <>
           <OsdsFormField
@@ -379,20 +377,19 @@ export const PoolFormComponent = ({
           >
             <LabelComponent
               text={t('octavia_load_balancer_pools_create_persistent_session')}
-              slot="label"
               hasError={error.sessionType}
             />
             <OsdsText
               color={ODS_THEME_COLOR_INTENT.text}
-              size={ODS_TEXT_SIZE._200}
+              size={ODS_TEXT_SIZE._100}
+              level={ODS_TEXT_LEVEL.caption}
               slot="helper"
             >
               {t(
                 `octavia_load_balancer_pools_create_persistent_session_${state.permanentSession.type.value}`,
               )}
             </OsdsText>
             <OsdsSelect
-              className="w-[20rem]"
               value={state.permanentSession.type.value}
               error={error.algorithm}
               onOdsBlur={() =>
@@ -420,6 +417,7 @@ export const PoolFormComponent = ({
                 }))
               }
               inline
+              className="w-[20rem]"
             >
               {state.sessionTypes.map((sType) => (
                 <OsdsSelectOption value={sType} key={sType}>
@@ -441,7 +439,6 @@ export const PoolFormComponent = ({
                 text={t(
                   'octavia_load_balancer_pools_create_persistent_session_cookie_name',
                 )}
-                slot="label"
                 hasError={error.cookieName}
               />
               <OsdsInput
@@ -474,7 +471,7 @@ export const PoolFormComponent = ({
                 )}
                 type={ODS_INPUT_TYPE.text}
                 error={error.cookieName}
-                className="border"
+                className="border w-[20rem]"
               />
             </OsdsFormField>
           )}

diff --git a/packages/manager/apps/pci-load-balancer/src/pages/detail/edit/Edit.page.tsx b/packages/manager/apps/pci-load-balancer/src/pages/detail/edit/Edit.page.tsx
@@ -1,15 +1,7 @@
 import { PciModal } from '@ovh-ux/manager-pci-common';
 import { Translation, useTranslation } from 'react-i18next';
-import {
-  OsdsFormField,
-  OsdsInput,
-  OsdsText,
-} from '@ovhcloud/ods-components/react';
-import {
-  ODS_THEME_COLOR_INTENT,
-  ODS_THEME_TYPOGRAPHY_LEVEL,
-  ODS_THEME_TYPOGRAPHY_SIZE,
-} from '@ovhcloud/ods-common-theming';
+import { OsdsFormField, OsdsInput } from '@ovhcloud/ods-components/react';
+import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
 import { ODS_INPUT_TYPE } from '@ovhcloud/ods-components';
 import { useNavigate, useParams } from 'react-router-dom';
 import { useState } from 'react';
@@ -19,6 +11,7 @@ import {
   useLoadBalancer,
   useRenameLoadBalancer,
 } from '@/api/hook/useLoadBalancer';
+import LabelComponent from '@/components/form/Label.component';
 
 export default function Edit() {
   const { addSuccess, addError } = useNotifications();
@@ -87,14 +80,9 @@ export default function Edit() {
       cancelText={tEditName('octavia_load_balancer_edit_name_cancel')}
     >
       <OsdsFormField>
-        <OsdsText
-          level={ODS_THEME_TYPOGRAPHY_LEVEL.body}
-          size={ODS_THEME_TYPOGRAPHY_SIZE._400}
-          color={ODS_THEME_COLOR_INTENT.text}
-          slot="label"
-        >
-          {tEditName('octavia_load_balancer_edit_name_label')}
-        </OsdsText>
+        <LabelComponent
+          text={tEditName('octavia_load_balancer_edit_name_label')}
+        />
         <OsdsInput
           value={loadBalancerName}
           onOdsValueChange={(event) => setLoadBalancerName(event.detail.value)}