feat(web-office): correcting after demo

ref:MANAGER-17162 Signed-off-by: stif59100 <[email protected]>
ovh · Feb 21, 2025 · 9710f2e · 9710f2e
1 parent 8168493
commit 9710f2e
Show file tree

Hide file tree

Showing 11 changed files with 146 additions and 155 deletions.
diff --git a/packages/manager/apps/web-office/package.json b/packages/manager/apps/web-office/package.json
@@ -25,12 +25,12 @@
     "@ovh-ux/manager-core-api": "^0.10.0",
     "@ovh-ux/manager-core-utils": "^0.3.0",
     "@ovh-ux/manager-module-order": "^0.9.4",
-    "@ovh-ux/manager-react-components": "^2.9.0",
-    "@ovh-ux/manager-react-core-application": "^0.11.8",
+    "@ovh-ux/manager-react-components": "^2.11.0",
+    "@ovh-ux/manager-react-core-application": "^0.11.9",
     "@ovh-ux/manager-react-shell-client": "^0.8.5",
     "@ovh-ux/manager-tailwind-config": "^0.2.1",
     "@ovh-ux/request-tagger": "^0.4.0",
-    "@ovh-ux/shell": "^4.1.5",
+    "@ovh-ux/shell": "^4.1.6",
     "@ovhcloud/ods-components": "^18.5.1",
     "@ovhcloud/ods-themes": "^18.5.1",
     "@tanstack/react-query": "^5.51.21",
@@ -63,7 +63,7 @@
     "@vitest/coverage-v8": "^2.1.2",
     "typescript": "^4.3.2",
     "vite": "^6.0.7",
-    "vitest": "^2.1.2"
+    "vitest": "^2.1.9"
   },
   "regions": [
     "EU"

diff --git a/packages/manager/apps/web-office/src/components/Modals/Modal.tsx b/packages/manager/apps/web-office/src/components/Modals/Modal.tsx
@@ -58,7 +58,7 @@ const Modal: React.FC<ModalProps> = ({
       onOdsClose={onClose}
       isOpen={isOpen}
     >
-      <OdsText className="mb-4" preset={ODS_TEXT_PRESET.heading4}>
+      <OdsText className="mb-8" preset={ODS_TEXT_PRESET.heading4}>
         {title}
       </OdsText>
       {!isLoading && <div className="flex flex-col text-left">{children}</div>}

diff --git a/packages/manager/apps/web-office/src/index.scss b/packages/manager/apps/web-office/src/index.scss
@@ -1,6 +1,7 @@
 @tailwind utilities;
 
 @import '@ovhcloud/ods-themes/default';
+@import '@ovh-ux/manager-react-components/dist/style.css';
 
 html {
   font-family: var(--ods-font-family-default);

diff --git a/packages/manager/apps/web-office/src/pages/dashboard/consumption/Consumption.tsx b/packages/manager/apps/web-office/src/pages/dashboard/consumption/Consumption.tsx
@@ -3,7 +3,7 @@ import {
   OdsCheckbox,
   OdsFormField,
   OdsSelect,
-  OdsText,
+  OdsBadge,
 } from '@ovhcloud/ods-components/react';
 import {
   Area,
@@ -20,7 +20,7 @@ import { useParams } from 'react-router-dom';
 import { useQuery } from '@tanstack/react-query';
 
 import { useTranslation } from 'react-i18next';
-import { ODS_TEXT_PRESET } from '@ovhcloud/ods-components';
+import { ODS_BADGE_COLOR } from '@ovhcloud/ods-components';
 import {
   getOfficeTenantUsageStatisticsQueryKey,
   getOfficeUsageStatistics,
@@ -132,7 +132,41 @@ export default function Consumption() {
         return chartItem;
       },
     ) || [];
+  const handleCheckboxChange = (entry: any, e: any) => {
+    setLineChartShow((old) => ({
+      ...old,
+      [entry.dataKey]: e.detail.checked,
+    }));
+  };
 
+  const renderLegend = ({ payload }: { payload: any[] }) => {
+    return (
+      <div className="flex justify-center flex-wrap mt-12">
+        {payload.map((entry) => (
+          <div key={entry.value} className="flex items-center mx-4">
+            <OdsCheckbox
+              name={entry.value}
+              inputId={entry.value}
+              isChecked={
+                lineChartShow[entry.dataKey as keyof typeof lineChartShow]
+              }
+              onOdsChange={(e) => handleCheckboxChange(entry, e)}
+            />
+            <label htmlFor={entry.value} className="ml-2 flex items-center">
+              <OdsBadge
+                label={entry.value}
+                color={
+                  entry.value === t('officeBusiness_serie_name')
+                    ? ODS_BADGE_COLOR.success
+                    : ODS_BADGE_COLOR.information
+                }
+              />
+            </label>
+          </div>
+        ))}
+      </div>
+    );
+  };
   return (
     <>
       <OdsFormField className="w-1/4">
@@ -154,47 +188,9 @@ export default function Consumption() {
           ))}
         </OdsSelect>
       </OdsFormField>
-      <div>
-        <div className="mb-4 mt-6">
-          <OdsCheckbox
-            name="officeBusiness"
-            inputId="officeBusiness"
-            isChecked={lineChartShow.officeBusiness}
-            onOdsChange={(e) =>
-              setLineChartShow((prev) => ({
-                ...prev,
-                officeBusiness: e.detail.checked,
-              }))
-            }
-            data-testid="officeBusiness"
-          />
-          <label htmlFor="officeBusiness" className="ml-4">
-            <OdsText preset={ODS_TEXT_PRESET.paragraph}>
-              {t('officeBusiness_serie_name')}
-            </OdsText>
-          </label>
-        </div>
-        <OdsCheckbox
-          name="officeProPlus"
-          inputId="officeProPlus"
-          isChecked={lineChartShow.officeProPlus}
-          onOdsChange={(e) =>
-            setLineChartShow((prev) => ({
-              ...prev,
-              officeProPlus: e.detail.checked,
-            }))
-          }
-          data-testid="officeProPlus"
-        />
-        <label htmlFor="officeProPlus" className="ml-4">
-          <OdsText preset={ODS_TEXT_PRESET.paragraph}>
-            {t('officeProPlus_serie_name')}
-          </OdsText>
-        </label>
-      </div>
       <div className="mt-12">
         <ResponsiveContainer width="100%" height={400}>
-          <AreaChart data={chartData}>
+          <AreaChart data={chartData} accessibilityLayer>
             <defs>
               <linearGradient id="colorBusiness" x1="0" y1="0" x2="0" y2="1">
                 <stop
@@ -233,27 +229,7 @@ export default function Consumption() {
             <Tooltip content={<CustomTooltip locale={locale} />} />
             <Legend
               aria-labelledby="legend-title"
-              onClick={(payload) => {
-                if (payload.dataKey === 'officeBusiness') {
-                  setLineChartShow((prev) => ({
-                    ...prev,
-                    officeBusiness: !prev.officeBusiness,
-                  }));
-                }
-                if (payload.dataKey === 'officeProPlus') {
-                  setLineChartShow((prev) => ({
-                    ...prev,
-                    officeProPlus: !prev.officeProPlus,
-                  }));
-                }
-              }}
-              onMouseEnter={(_payload, _index, event) => {
-                const { target } = event;
-
-                if (target instanceof HTMLSpanElement) {
-                  target.style.cursor = 'pointer';
-                }
-              }}
+              content={renderLegend}
               payload={[
                 {
                   id: 'officeBusiness',

diff --git a/packages/manager/apps/web-office/src/pages/dashboard/consumption/_test_/Consumption.spec.tsx b/packages/manager/apps/web-office/src/pages/dashboard/consumption/_test_/Consumption.spec.tsx
@@ -31,8 +31,6 @@ describe('Consumption Component', () => {
   it('should render the component correctly', async () => {
     const { getByTestId } = render(<Consumption />);
     expect(getByTestId('period-select')).toBeInTheDocument();
-    expect(getByTestId('officeBusiness')).toBeInTheDocument();
-    expect(getByTestId('officeProPlus')).toBeInTheDocument();
   });
 
   it('should render the responsive chart container', async () => {

diff --git a/.../manager/apps/web-office/src/pages/dashboard/users/ModalChangePasswordUsers.component.tsx b/.../manager/apps/web-office/src/pages/dashboard/users/ModalChangePasswordUsers.component.tsx
@@ -118,6 +118,9 @@ export default function ModalChangePasswordUsers() {
       }}
     >
       <form className="flex flex-col" onSubmit={handleSubmit(handleSaveClick)}>
+        <OdsText preset={ODS_TEXT_PRESET.paragraph} className="mb-4">
+          {t('common:common_field_label_mandatory')}
+        </OdsText>
         <OdsFormField>
           <span>
             <OdsRadio
@@ -245,9 +248,6 @@ export default function ModalChangePasswordUsers() {
             </OdsFormField>
           )}
         />
-        <OdsText preset={ODS_TEXT_PRESET.caption}>
-          {t('common:common_field_label_mandatory')}
-        </OdsText>
       </form>
     </Modal>
   );

diff --git a/packages/manager/apps/web-office/src/pages/dashboard/users/ModalEditUsers.component.tsx b/packages/manager/apps/web-office/src/pages/dashboard/users/ModalEditUsers.component.tsx
@@ -163,47 +163,54 @@ export default function ModalEditUsers() {
         <OdsText preset={ODS_TEXT_PRESET.paragraph}>
           {t('common:common_field_label_mandatory')}
         </OdsText>
+        <div className="flex flex-wrap sm:flex-nowrap gap-5">
+          <Controller
+            control={control}
+            name="firstname"
+            rules={{ required: true }}
+            render={({ field: { name, value, onBlur, onChange } }) => (
+              <OdsFormField
+                error={errors?.firstname?.message as string}
+                className="w-full"
+              >
+                <label slot="label">{t('common:firstname')}*</label>
 
-        <Controller
-          control={control}
-          name="firstname"
-          rules={{ required: true }}
-          render={({ field: { name, value, onBlur, onChange } }) => (
-            <OdsFormField error={errors?.firstname?.message as string}>
-              <label slot="label">{t('common:firstname')}*</label>
-
-              <OdsInput
-                type={ODS_INPUT_TYPE.text}
-                name={name}
-                value={value}
-                data-testid="input-firstname"
-                hasError={!!errors.firstname}
-                onOdsBlur={onBlur}
-                onOdsChange={onChange}
-              ></OdsInput>
-            </OdsFormField>
-          )}
-        />
-        <Controller
-          control={control}
-          name="lastname"
-          rules={{ required: true }}
-          render={({ field: { name, value, onBlur, onChange } }) => (
-            <OdsFormField error={errors?.lastname?.message as string}>
-              <label slot="label">{t('common:lastname')}*</label>
+                <OdsInput
+                  type={ODS_INPUT_TYPE.text}
+                  name={name}
+                  value={value}
+                  data-testid="input-firstname"
+                  hasError={!!errors.firstname}
+                  onOdsBlur={onBlur}
+                  onOdsChange={onChange}
+                ></OdsInput>
+              </OdsFormField>
+            )}
+          />
+          <Controller
+            control={control}
+            name="lastname"
+            rules={{ required: true }}
+            render={({ field: { name, value, onBlur, onChange } }) => (
+              <OdsFormField
+                error={errors?.lastname?.message as string}
+                className="w-full"
+              >
+                <label slot="label">{t('common:lastname')}*</label>
 
-              <OdsInput
-                type={ODS_INPUT_TYPE.text}
-                name={name}
-                value={value}
-                data-testid="input-lastname"
-                hasError={!!errors.lastname}
-                onOdsBlur={onBlur}
-                onOdsChange={onChange}
-              ></OdsInput>
-            </OdsFormField>
-          )}
-        />
+                <OdsInput
+                  type={ODS_INPUT_TYPE.text}
+                  name={name}
+                  value={value}
+                  data-testid="input-lastname"
+                  hasError={!!errors.lastname}
+                  onOdsBlur={onBlur}
+                  onOdsChange={onChange}
+                ></OdsInput>
+              </OdsFormField>
+            )}
+          />
+        </div>
         <Controller
           control={control}
           name="login"
@@ -213,7 +220,7 @@ export default function ModalEditUsers() {
               <label htmlFor="label" slot="label">
                 {t('common:login')}*
               </label>
-              <div className="flex">
+              <div className="flex flex-wrap sm:flex-nowrap gap-5">
                 <OdsInput
                   type={ODS_INPUT_TYPE.text}
                   name={name}
@@ -222,7 +229,7 @@ export default function ModalEditUsers() {
                   hasError={!!errors.login}
                   onOdsBlur={onBlur}
                   onOdsChange={onChange}
-                  className="w-full mr-6"
+                  className="w-full"
                 ></OdsInput>
                 <OdsInput
                   type={ODS_INPUT_TYPE.text}

diff --git a/packages/manager/apps/web-office/src/pages/dashboard/users/ModalOrderLicenses.component.tsx b/packages/manager/apps/web-office/src/pages/dashboard/users/ModalOrderLicenses.component.tsx
@@ -93,8 +93,8 @@ export default function ModalOrderLicenses() {
       }}
     >
       <form onSubmit={handleSubmit(onSubmit)}>
-        <div className="flex flex-wrap">
-          <OdsFormField className="w-3/5 mr-8">
+        <div className="flex flex-wrap justify-between">
+          <OdsFormField className="w-full md:w-3/5">
             <label slot="label" htmlFor="form-product-type">
               {t('dashboard_users_order_licences_type')}
             </label>
@@ -139,7 +139,6 @@ export default function ModalOrderLicenses() {
                   }
                   max={300}
                   min={1}
-                  className="ml-10"
                 />
               )}
             />