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

ghyenne · ovh-cds · jloizelovh · commit dd9cc056f289 · 2025-05-20T10:29:11.000+02:00
ref: #MANAGER-17733

Signed-off-by: Guillaume Hyenne &lt;guillaume.hyenne@ovhcloud.com&gt;
Co-authored-by: CDS Translator Agent &lt;opensource@ovh.net&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
@@ -318,6 +318,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_de_DE.json b/packages/manager-react-components/src/components/datagrid/translations/Messages_de_DE.json
@@ -7,5 +7,6 @@
   "common_pagination_load_more": "Mehr laden",
   "common_empty_text_cell": "Keine",
   "common_topbar_columns": "Spalten",
-  "common_pagination_load_all": "Alle laden"
+  "common_pagination_load_all": "Alle laden",
+  "common_topbar_columns_select_all": "Alles auswählen"
 }
diff --git a/packages/manager-react-components/src/components/datagrid/translations/Messages_en_GB.json b/packages/manager-react-components/src/components/datagrid/translations/Messages_en_GB.json
@@ -7,5 +7,6 @@
   "common_pagination_load_more": "Load more",
   "common_empty_text_cell": "None",
   "common_topbar_columns": "Columns",
-  "common_pagination_load_all": "Load all"
+  "common_pagination_load_all": "Load all",
+  "common_topbar_columns_select_all": "Select all"
 }
diff --git a/packages/manager-react-components/src/components/datagrid/translations/Messages_es_ES.json b/packages/manager-react-components/src/components/datagrid/translations/Messages_es_ES.json
@@ -7,5 +7,6 @@
   "common_pagination_load_more": "Cargar más",
   "common_empty_text_cell": "Ninguno/a",
   "common_topbar_columns": "Columnas",
-  "common_pagination_load_all": "Cargar todo"
+  "common_pagination_load_all": "Cargar todo",
+  "common_topbar_columns_select_all": "Seleccionar todo"
 }
diff --git a/packages/manager-react-components/src/components/datagrid/translations/Messages_fr_CA.json b/packages/manager-react-components/src/components/datagrid/translations/Messages_fr_CA.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/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/translations/Messages_it_IT.json b/packages/manager-react-components/src/components/datagrid/translations/Messages_it_IT.json
@@ -7,5 +7,6 @@
   "common_pagination_load_more": "Caricare altro",
   "common_empty_text_cell": "Nessuna",
   "common_topbar_columns": "Colonne",
-  "common_pagination_load_all": "Caricare tutto"
+  "common_pagination_load_all": "Caricare tutto",
+  "common_topbar_columns_select_all": "Seleziona tutto"
 }
diff --git a/packages/manager-react-components/src/components/datagrid/translations/Messages_pl_PL.json b/packages/manager-react-components/src/components/datagrid/translations/Messages_pl_PL.json
@@ -7,5 +7,6 @@
   "common_pagination_load_more": "Załaduj więcej",
   "common_empty_text_cell": "Brak",
   "common_topbar_columns": "Kolumny",
-  "common_pagination_load_all": "Załaduj wszystko"
+  "common_pagination_load_all": "Załaduj wszystko",
+  "common_topbar_columns_select_all": "Wybierz wszystko"
 }
diff --git a/packages/manager-react-components/src/components/datagrid/translations/Messages_pt_PT.json b/packages/manager-react-components/src/components/datagrid/translations/Messages_pt_PT.json
@@ -7,5 +7,6 @@
   "common_pagination_load_more": "Carregar mais",
   "common_empty_text_cell": "Nenhum",
   "common_topbar_columns": "Colunas",
-  "common_pagination_load_all": "Carregar tudo"
+  "common_pagination_load_all": "Carregar tudo",
+  "common_topbar_columns_select_all": "Selecionar tudo"
 }
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();

Original file line number	Diff line number	Diff line change
`@@ -7,5 +7,6 @@`
`7`	`7`	`"common_pagination_load_more": "Mehr laden",`
`8`	`8`	`"common_empty_text_cell": "Keine",`
`9`	`9`	`"common_topbar_columns": "Spalten",`
`10`		`- "common_pagination_load_all": "Alle laden"`
	`10`	`+ "common_pagination_load_all": "Alle laden",`
	`11`	`+ "common_topbar_columns_select_all": "Alles auswählen"`
`11`	`12`	`}`
Original file line number	Diff line number	Diff line change
`@@ -7,5 +7,6 @@`
`7`	`7`	`"common_pagination_load_more": "Load more",`
`8`	`8`	`"common_empty_text_cell": "None",`
`9`	`9`	`"common_topbar_columns": "Columns",`
`10`		`- "common_pagination_load_all": "Load all"`
	`10`	`+ "common_pagination_load_all": "Load all",`
	`11`	`+ "common_topbar_columns_select_all": "Select all"`
`11`	`12`	`}`
Original file line number	Diff line number	Diff line change
`@@ -7,5 +7,6 @@`
`7`	`7`	`"common_pagination_load_more": "Cargar más",`
`8`	`8`	`"common_empty_text_cell": "Ninguno/a",`
`9`	`9`	`"common_topbar_columns": "Columnas",`
`10`		`- "common_pagination_load_all": "Cargar todo"`
	`10`	`+ "common_pagination_load_all": "Cargar todo",`
	`11`	`+ "common_topbar_columns_select_all": "Seleccionar todo"`
`11`	`12`	`}`
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`	`}`
Original file line number	Diff line number	Diff line change
`@@ -7,5 +7,6 @@`
`7`	`7`	`"common_pagination_load_more": "Caricare altro",`
`8`	`8`	`"common_empty_text_cell": "Nessuna",`
`9`	`9`	`"common_topbar_columns": "Colonne",`
`10`		`- "common_pagination_load_all": "Caricare tutto"`
	`10`	`+ "common_pagination_load_all": "Caricare tutto",`
	`11`	`+ "common_topbar_columns_select_all": "Seleziona tutto"`
`11`	`12`	`}`
Original file line number	Diff line number	Diff line change
`@@ -7,5 +7,6 @@`
`7`	`7`	`"common_pagination_load_more": "Załaduj więcej",`
`8`	`8`	`"common_empty_text_cell": "Brak",`
`9`	`9`	`"common_topbar_columns": "Kolumny",`
`10`		`- "common_pagination_load_all": "Załaduj wszystko"`
	`10`	`+ "common_pagination_load_all": "Załaduj wszystko",`
	`11`	`+ "common_topbar_columns_select_all": "Wybierz wszystko"`
`11`	`12`	`}`