fix(mrc): add select all on visibility columns component

ghyenne · ghyenne · commit 397f2847080f · 2025-04-29T09:40:44.000+02:00
ref: #MANAGER-17733

Signed-off-by: Guillaume Hyenne &lt;guillaume.hyenne@ovhcloud.com&gt;
diff --git a/packages/manager-react-components/src/components/datagrid/datagrid-topbar.component.tsx b/packages/manager-react-components/src/components/datagrid/datagrid-topbar.component.tsx
@@ -43,6 +43,9 @@ export interface FilterProps {
 
 export interface DatagridTopbarProps {
   columnsVisibility?: ColumnsVisibility[];
+  toggleAllColumnsVisible?: (a: boolean) => void;
+  getIsAllColumnsVisible?: () => boolean;
+  getIsSomeColumnsVisible?: () => boolean;
   filtersColumns?: ColumnFilter[];
   isSearchable?: boolean;
   filters?: FilterProps;
@@ -52,6 +55,9 @@ export interface DatagridTopbarProps {
 
 export const DatagridTopbar = <T,>({
   columnsVisibility,
+  toggleAllColumnsVisible,
+  getIsAllColumnsVisible,
+  getIsSomeColumnsVisible,
   filters,
   filtersColumns,
   isSearchable,
@@ -142,7 +148,12 @@ export const DatagridTopbar = <T,>({
               )}
               {hasVisibilityFeature && (
                 <div className={filtersColumns?.length > 0 ? 'ml-[10px]' : ''}>
-                  <VisibilityManagement columnsVisibility={columnsVisibility} />
+                  <VisibilityManagement
+                    columnsVisibility={columnsVisibility}
+                    toggleAllColumnsVisible={toggleAllColumnsVisible}
+                    getIsAllColumnsVisible={getIsAllColumnsVisible}
+                    getIsSomeColumnsVisible={getIsSomeColumnsVisible}
+                  />
                 </div>
               )}
             </div>
diff --git a/packages/manager-react-components/src/components/datagrid/datagrid-topbar.spec.tsx b/packages/manager-react-components/src/components/datagrid/datagrid-topbar.spec.tsx
@@ -148,6 +148,9 @@ describe('datagrid topbar', () => {
             onChange: () => null,
           },
         ]}
+        toggleAllColumnsVisible={() => null}
+        getIsAllColumnsVisible={() => true}
+        getIsSomeColumnsVisible={() => true}
       />,
     );
 
diff --git a/packages/manager-react-components/src/components/datagrid/datagrid.component.tsx b/packages/manager-react-components/src/components/datagrid/datagrid.component.tsx
@@ -315,6 +315,9 @@ export const Datagrid = <T,>({
     <div>
       <DatagridTopbar
         columnsVisibility={columnsVisibility}
+        toggleAllColumnsVisible={table.toggleAllColumnsVisible}
+        getIsAllColumnsVisible={table.getIsAllColumnsVisible}
+        getIsSomeColumnsVisible={table.getIsSomeColumnsVisible}
         filtersColumns={filtersColumns}
         isSearchable={!!searchColumns}
         filters={filters}
diff --git a/packages/manager-react-components/src/components/datagrid/translations/Messages_fr_FR.json b/packages/manager-react-components/src/components/datagrid/translations/Messages_fr_FR.json
@@ -7,5 +7,6 @@
   "common_pagination_load_more": "Charger plus",
   "common_pagination_load_all": "Charger tout",
   "common_empty_text_cell": "Aucun",
-  "common_topbar_columns": "Colonnes"
+  "common_topbar_columns": "Colonnes",
+  "common_topbar_columns_select_all": "Sélectionner tout"
 }
diff --git a/packages/manager-react-components/src/components/datagrid/visibility/visibility-management.component.tsx b/packages/manager-react-components/src/components/datagrid/visibility/visibility-management.component.tsx
@@ -26,10 +26,16 @@ export type ColumnsVisibility = {
 
 export type ColumnsVisibilityProps = {
   columnsVisibility: ColumnsVisibility[];
+  toggleAllColumnsVisible: (a: boolean) => void;
+  getIsAllColumnsVisible: () => boolean;
+  getIsSomeColumnsVisible: () => boolean;
 };
 
 export function VisibilityManagement({
   columnsVisibility,
+  toggleAllColumnsVisible,
+  getIsAllColumnsVisible,
+  getIsSomeColumnsVisible,
 }: Readonly<ColumnsVisibilityProps>) {
   const { t } = useTranslation('datagrid');
   const visibilityPopoverRef = useRef(null);
@@ -41,6 +47,9 @@ export function VisibilityManagement({
     column.isVisible(),
   ).length;
 
+  const isAllColumnsVisible = getIsAllColumnsVisible();
+  const isSomeColumnsVisible = getIsSomeColumnsVisible();
+
   return (
     <>
       <OdsButton
@@ -63,9 +72,24 @@ export function VisibilityManagement({
         with-arrow
       >
         <div className="flex flex-col">
+          <div className="pr-5 flex flex-row items-center gap-x-2">
+            <OdsCheckbox
+              name={'toggle-all-columns-visibility'}
+              inputId={'toggle-all-columns-visibility'}
+              isChecked={isAllColumnsVisible}
+              onOdsChange={() => toggleAllColumnsVisible(!isAllColumnsVisible)}
+              ariaLabel={t('common_topbar_columns_select_all')}
+              isIndeterminate={!isAllColumnsVisible && isSomeColumnsVisible}
+            />
+            <label slot="label" htmlFor={'toggle-all-columns-visibility'}>
+              <OdsText preset={ODS_TEXT_PRESET.paragraph}>
+                {t('common_topbar_columns_select_all')}
+              </OdsText>
+            </label>
+          </div>
           {eligibleColumns.map((column) => (
             <OdsFormField key={column.id}>
-              <div className="flex flex-row items-center gap-x-2">
+              <div className="px-5 flex flex-row items-center gap-x-2">
                 <OdsCheckbox
                   name={column.id}
                   inputId={column.id}
diff --git a/packages/manager-react-components/src/components/datagrid/visibility/visibility-management.spec.tsx b/packages/manager-react-components/src/components/datagrid/visibility/visibility-management.spec.tsx
@@ -45,6 +45,9 @@ describe('visibility management button part', () => {
             onChange: () => null,
           },
         ]}
+        toggleAllColumnsVisible={() => null}
+        getIsAllColumnsVisible={() => false}
+        getIsSomeColumnsVisible={() => true}
       />,
     );
 
@@ -79,6 +82,9 @@ describe('visibility management button part', () => {
             onChange: () => null,
           },
         ]}
+        toggleAllColumnsVisible={() => null}
+        getIsAllColumnsVisible={() => false}
+        getIsSomeColumnsVisible={() => true}
       />,
     );
 
@@ -115,15 +121,18 @@ describe('visibility management dropdown part', () => {
             onChange: () => null,
           },
         ]}
+        toggleAllColumnsVisible={() => null}
+        getIsAllColumnsVisible={() => true}
+        getIsSomeColumnsVisible={() => true}
       />,
     );
 
     const checkboxElements = screen.queryAllByRole('checkbox');
-    expect(checkboxElements[0]).toHaveProperty('checked', true);
-    expect(checkboxElements[0]).toHaveProperty('disabled', false);
-
     expect(checkboxElements[1]).toHaveProperty('checked', true);
     expect(checkboxElements[1]).toHaveProperty('disabled', false);
+
+    expect(checkboxElements[2]).toHaveProperty('checked', true);
+    expect(checkboxElements[2]).toHaveProperty('disabled', false);
   });
 
   it('should display visibility column disabled', async () => {
@@ -148,15 +157,18 @@ describe('visibility management dropdown part', () => {
             onChange,
           },
         ]}
+        toggleAllColumnsVisible={() => null}
+        getIsAllColumnsVisible={() => false}
+        getIsSomeColumnsVisible={() => true}
       />,
     );
 
     const checkboxElements = screen.queryAllByRole('checkbox');
-    expect(checkboxElements[0]).toHaveProperty('checked', true);
-    expect(checkboxElements[0]).toHaveProperty('disabled', true);
+    expect(checkboxElements[1]).toHaveProperty('checked', true);
+    expect(checkboxElements[1]).toHaveProperty('disabled', true);
 
-    expect(checkboxElements[1]).toHaveProperty('checked', false);
-    expect(checkboxElements[1]).toHaveProperty('disabled', false);
+    expect(checkboxElements[2]).toHaveProperty('checked', false);
+    expect(checkboxElements[2]).toHaveProperty('disabled', false);
 
     await act(() => fireEvent.click(checkboxElements[1]));
     expect(onChange).toHaveBeenCalled();
diff --git a/yarn.lock b/yarn.lock
@@ -3320,7 +3320,7 @@
   resolved "https://registry.yarnpkg.com/@cucumber/tag-expressions/-/tag-expressions-6.1.0.tgz#cb7af908bdb43669b7574c606f71fa707196e962"
   integrity sha512-+3DwRumrCJG27AtzCIL37A/X+A/gSfxOPLg8pZaruh5SLumsTmpvilwroVWBT2fPzmno/tGXypeK5a7NHU4RzA==
 
-"@datatr-ux/ods-tailwind-config@1.0.3":
+"@datatr-ux/ods-tailwind-config@1.0.3", "@datatr-ux/ods-tailwind-config@^1.0.3":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@datatr-ux/ods-tailwind-config/-/ods-tailwind-config-1.0.3.tgz#f4fe4cf803d9a1d5fbf2d5356b0cc58b0572f7a7"
   integrity sha512-bQrlP+Qj1OC2oj/CmzqswG6D6j/RPvC21ZnRQrOuRLFo+CM+LhQi94EErf1abivJWeXMa2BZ/eID6s+iB4dPHw==
@@ -3332,6 +3332,11 @@
   resolved "https://registry.yarnpkg.com/@datatr-ux/ovhcloud-types/-/ovhcloud-types-1.0.8.tgz#0e6a8359cc8a52389f65c1aebfae57261ec8215a"
   integrity sha512-Fze56Qv4qkucB3/w5/bl1lNVCNKlOdSBKYDVLaHNCJhHs+JbHCtMR4Ki29dA+Lk8mti0r3g1fdMZ7Hb2YBZ8gA==
 
+"@datatr-ux/ovhcloud-types@^1.0.11":
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/@datatr-ux/ovhcloud-types/-/ovhcloud-types-1.0.11.tgz#bac1d9b460cc969a191967cd2b1d0858de713d78"
+  integrity sha512-NSqgUoIXKHxVRY5fnp5hV2kNQJxbX9/Om0naInG1tnztBvdkRuuhfzga9+ReYVqkktaSg/kb3CGZzyWi2tpvCg==
+
 "@datatr-ux/uxlib@0.0.10":
   version "0.0.10"
   resolved "https://registry.yarnpkg.com/@datatr-ux/uxlib/-/uxlib-0.0.10.tgz#0a66c5d3ad49b0e1effa1cd02c36167e3ac6eef1"
@@ -3383,6 +3388,57 @@
     tailwindcss-animate "^1.0.7"
     vaul "^1.1.2"
 
+"@datatr-ux/uxlib@^0.0.11-beta-8":
+  version "0.0.11-beta-8"
+  resolved "https://registry.yarnpkg.com/@datatr-ux/uxlib/-/uxlib-0.0.11-beta-8.tgz#e47edc3465d6ea8add18e81717193d3d543223c8"
+  integrity sha512-yAIPXaEVXtv0uxj7Z8A8GMIOUrtzuC06gG1Uw9proXtjCGSh6yBpnjaNIRhK0LWORtBQFxs9yVwy/M8CjkJkKw==
+  dependencies:
+    "@ovhcloud/ods-theme-blue-jeans" "^17.2.2"
+    "@ovhcloud/ods-themes" "^18.4.1"
+    "@radix-ui/react-accordion" "^1.2.2"
+    "@radix-ui/react-alert-dialog" "^1.1.4"
+    "@radix-ui/react-aspect-ratio" "^1.1.1"
+    "@radix-ui/react-avatar" "^1.1.2"
+    "@radix-ui/react-checkbox" "^1.1.3"
+    "@radix-ui/react-collapsible" "^1.1.2"
+    "@radix-ui/react-context-menu" "^2.2.4"
+    "@radix-ui/react-dialog" "^1.1.4"
+    "@radix-ui/react-dropdown-menu" "^2.1.4"
+    "@radix-ui/react-hover-card" "^1.1.4"
+    "@radix-ui/react-label" "^2.1.1"
+    "@radix-ui/react-menubar" "^1.1.4"
+    "@radix-ui/react-navigation-menu" "^1.2.3"
+    "@radix-ui/react-popover" "^1.1.4"
+    "@radix-ui/react-progress" "^1.1.1"
+    "@radix-ui/react-radio-group" "^1.2.2"
+    "@radix-ui/react-scroll-area" "^1.2.2"
+    "@radix-ui/react-select" "^2.1.4"
+    "@radix-ui/react-separator" "^1.1.1"
+    "@radix-ui/react-slider" "^1.2.2"
+    "@radix-ui/react-slot" "^1.1.1"
+    "@radix-ui/react-switch" "^1.1.2"
+    "@radix-ui/react-tabs" "^1.1.2"
+    "@radix-ui/react-toast" "^1.2.4"
+    "@radix-ui/react-toggle" "^1.1.1"
+    "@radix-ui/react-toggle-group" "^1.1.1"
+    "@radix-ui/react-tooltip" "^1.1.6"
+    class-variance-authority "^0.7.1"
+    clsx "^2.1.1"
+    cmdk "^1.0.0"
+    date-fns "^3.6.0"
+    embla-carousel-react "^8.5.1"
+    input-otp "^1.4.1"
+    lodash "^4.17.21"
+    lucide-react "^0.469.0"
+    next-themes "^0.4.4"
+    react-day-picker "^8.10.1"
+    react-resizable-panels "^2.1.7"
+    shiki "^3.2.1"
+    sonner "^1.7.1"
+    tailwind-merge "^2.6.0"
+    tailwindcss-animate "^1.0.7"
+    vaul "^1.1.2"
+
 "@discoveryjs/json-ext@^0.5.0":
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz#1d572bfbbe14b7704e0ba0f39b74815b84870d70"
@@ -27471,16 +27527,7 @@ string-length@^4.0.1:
     char-regex "^1.0.2"
     strip-ansi "^6.0.0"
 
-"string-width-cjs@npm:string-width@^4.2.0":
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
-"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.2, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.2, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -27652,14 +27699,7 @@ stringify-entities@^4.0.0:
     character-entities-html4 "^2.0.0"
     character-entities-legacy "^3.0.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
-strip-ansi@6.0.1, strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@6.0.1, strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -30525,7 +30565,7 @@ wordwrap@^1.0.0:
   resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
   integrity sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -30543,15 +30583,6 @@ wrap-ansi@^6.0.1, wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
-wrap-ansi@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
 wrap-ansi@^8.0.1, wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"

Original file line number	Diff line number	Diff line change
`@@ -7,5 +7,6 @@`
`7`	`7`	`"common_pagination_load_more": "Charger plus",`
`8`	`8`	`"common_pagination_load_all": "Charger tout",`
`9`	`9`	`"common_empty_text_cell": "Aucun",`
`10`		`- "common_topbar_columns": "Colonnes"`
	`10`	`+ "common_topbar_columns": "Colonnes",`
	`11`	`+ "common_topbar_columns_select_all": "Sélectionner tout"`
`11`	`12`	`}`