From 8eb7277ffd6d13082d6a45030efcf9a2ca0528e8 Mon Sep 17 00:00:00 2001
From: Julia Rechkunova <julia.rechkunova@elastic.co>
Date: Wed, 15 Nov 2023 17:36:43 +0100
Subject: [PATCH] Don't highlight active controls and update label for hidden
 columns

---
 .../toolbar/render_custom_toolbar.tsx         |  2 +-
 .../column_sorting.test.tsx.snap              |  6 ++--
 .../controls/column_selector.test.tsx         |  6 ++--
 .../datagrid/controls/column_selector.tsx     | 29 +++++--------------
 .../datagrid/controls/column_sorting.tsx      |  3 +-
 .../data_grid_toolbar_control.test.tsx        |  4 +--
 .../controls/data_grid_toolbar_control.tsx    | 12 +++-----
 src/components/datagrid/data_grid_types.ts    |  3 +-
 8 files changed, 23 insertions(+), 42 deletions(-)

diff --git a/src-docs/src/views/datagrid/toolbar/render_custom_toolbar.tsx b/src-docs/src/views/datagrid/toolbar/render_custom_toolbar.tsx
index 4719fc1b8e3..d3086fed78c 100644
--- a/src-docs/src/views/datagrid/toolbar/render_custom_toolbar.tsx
+++ b/src-docs/src/views/datagrid/toolbar/render_custom_toolbar.tsx
@@ -61,7 +61,7 @@ const renderCustomToolbar: EuiDataGridToolbarProps['renderCustomToolbar'] = ({
         {hasRoomForGridControls && (
           <EuiDataGridToolbarControl
             iconType="brush"
-            badgeCount={10}
+            badgeContent={10}
             onClick={() => {}}
           >
             Custom left side
diff --git a/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap b/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap
index 64819fb0354..9fda512654c 100644
--- a/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap
+++ b/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`useDataGridColumnSorting columnSorting [React 16] renders a toolbar but
   data-test-subj="dataGridColumnSortingPopover"
 >
   <button
-    class="euiButtonEmpty euiDataGrid__controlBtn euiDataGrid__controlBtn--active emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-text"
+    class="euiButtonEmpty euiDataGrid__controlBtn emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-text"
     data-test-subj="dataGridColumnSortingButton"
     type="button"
   >
@@ -288,7 +288,7 @@ exports[`useDataGridColumnSorting columnSorting [React 17] renders a toolbar but
   data-test-subj="dataGridColumnSortingPopover"
 >
   <button
-    class="euiButtonEmpty euiDataGrid__controlBtn euiDataGrid__controlBtn--active emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-text"
+    class="euiButtonEmpty euiDataGrid__controlBtn emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-text"
     data-test-subj="dataGridColumnSortingButton"
     type="button"
   >
@@ -570,7 +570,7 @@ exports[`useDataGridColumnSorting columnSorting [React 18] renders a toolbar but
   data-test-subj="dataGridColumnSortingPopover"
 >
   <button
-    class="euiButtonEmpty euiDataGrid__controlBtn euiDataGrid__controlBtn--active emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-text"
+    class="euiButtonEmpty euiDataGrid__controlBtn emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-text"
     data-test-subj="dataGridColumnSortingButton"
     type="button"
   >
diff --git a/src/components/datagrid/controls/column_selector.test.tsx b/src/components/datagrid/controls/column_selector.test.tsx
index 267da579ca2..f76f88dc6be 100644
--- a/src/components/datagrid/controls/column_selector.test.tsx
+++ b/src/components/datagrid/controls/column_selector.test.tsx
@@ -192,7 +192,7 @@ describe('useDataGridColumnSelector', () => {
           />
         );
 
-        expect(component.text()).toEqual('2 columns hidden');
+        expect(component.text()).toEqual('Columns0/2');
       });
 
       it('toggles column visibility on switch interaction', () => {
@@ -207,7 +207,7 @@ describe('useDataGridColumnSelector', () => {
         ).simulate('click');
         forceUpdate(component);
 
-        expect(component.text()).toEqual('1 column hidden1');
+        expect(component.text()).toEqual('Columns1/2');
 
         findTestSubject(
           component,
@@ -230,7 +230,7 @@ describe('useDataGridColumnSelector', () => {
         ).simulate('click');
         forceUpdate(component);
 
-        expect(component.text()).toEqual('2 columns hidden');
+        expect(component.text()).toEqual('Columns0/2');
 
         findTestSubject(
           component,
diff --git a/src/components/datagrid/controls/column_selector.tsx b/src/components/datagrid/controls/column_selector.tsx
index 00a5dfab43a..c8ba621cbac 100644
--- a/src/components/datagrid/controls/column_selector.tsx
+++ b/src/components/datagrid/controls/column_selector.tsx
@@ -119,28 +119,10 @@ export const useDataGridColumnSelector = (
     'Drag handle'
   );
 
-  let buttonText = (
+  const buttonText = (
     <EuiI18n token="euiColumnSelector.button" default="Columns" />
   );
 
-  if (numberOfHiddenFields === 1) {
-    buttonText = (
-      <EuiI18n
-        token="euiColumnSelector.buttonActiveSingular"
-        default="{numberOfHiddenFields} column hidden"
-        values={{ numberOfHiddenFields }}
-      />
-    );
-  } else if (numberOfHiddenFields > 1) {
-    buttonText = (
-      <EuiI18n
-        token="euiColumnSelector.buttonActivePlural"
-        default="{numberOfHiddenFields} columns hidden"
-        values={{ numberOfHiddenFields }}
-      />
-    );
-  }
-
   const orderedVisibleColumns = useMemo(
     () =>
       visibleColumns
@@ -165,8 +147,13 @@ export const useDataGridColumnSelector = (
         hasDragDrop
         button={
           <EuiDataGridToolbarControl
-            badgeCount={orderedVisibleColumns.length}
-            isActive={numberOfHiddenFields > 0}
+            badgeContent={
+              numberOfHiddenFields > 0
+                ? `${orderedVisibleColumns.length}/${
+                    numberOfHiddenFields + orderedVisibleColumns.length
+                  }`
+                : orderedVisibleColumns.length
+            }
             iconType="tableDensityNormal"
             data-test-subj="dataGridColumnSelectorButton"
             onClick={() => setIsOpen(!isOpen)}
diff --git a/src/components/datagrid/controls/column_sorting.tsx b/src/components/datagrid/controls/column_sorting.tsx
index 41546a8dedd..e2beb1845cb 100644
--- a/src/components/datagrid/controls/column_sorting.tsx
+++ b/src/components/datagrid/controls/column_sorting.tsx
@@ -129,8 +129,7 @@ export const useDataGridColumnSorting = (
       hasDragDrop
       button={
         <EuiDataGridToolbarControl
-          badgeCount={sorting.columns.length}
-          isActive={sorting.columns.length > 0}
+          badgeContent={sorting.columns.length}
           iconType="sortable"
           data-test-subj="dataGridColumnSortingButton"
           onClick={() => setIsOpen(!isOpen)}
diff --git a/src/components/datagrid/controls/data_grid_toolbar_control.test.tsx b/src/components/datagrid/controls/data_grid_toolbar_control.test.tsx
index 2d81ec857e4..6ae1d86b000 100644
--- a/src/components/datagrid/controls/data_grid_toolbar_control.test.tsx
+++ b/src/components/datagrid/controls/data_grid_toolbar_control.test.tsx
@@ -17,7 +17,7 @@ describe('euiDataGridToolbarControl', () => {
 
     const { container } = render(
       <EuiDataGridToolbarControl
-        badgeCount={5}
+        badgeContent={5}
         size="xs"
         iconType="sortable"
         color="text"
@@ -35,7 +35,7 @@ describe('euiDataGridToolbarControl', () => {
 
     const { container } = render(
       <EuiDataGridToolbarControl
-        badgeCount={undefined}
+        badgeContent={undefined}
         size="xs"
         iconType="sortable"
         color="text"
diff --git a/src/components/datagrid/controls/data_grid_toolbar_control.tsx b/src/components/datagrid/controls/data_grid_toolbar_control.tsx
index a4eb5775586..30d43e6fc52 100644
--- a/src/components/datagrid/controls/data_grid_toolbar_control.tsx
+++ b/src/components/datagrid/controls/data_grid_toolbar_control.tsx
@@ -16,21 +16,17 @@ import { EuiDataGridToolbarControlProps } from '../data_grid_types';
 
 export const EuiDataGridToolbarControl = ({
   children,
-  badgeCount,
-  isActive,
+  badgeContent,
   ...buttonProps
 }: EuiDataGridToolbarControlProps) => {
   const badgeAriaLabel = useEuiI18n(
     'euiDataGridToolbarControl.badgeAriaLabel',
     'Current count: {count}',
-    { count: badgeCount }
+    { count: badgeContent }
   );
 
   const controlBtnClasses = classNames(
     'euiDataGrid__controlBtn',
-    {
-      'euiDataGrid__controlBtn--active': isActive,
-    },
     buttonProps.className
   );
 
@@ -48,14 +44,14 @@ export const EuiDataGridToolbarControl = ({
         gutterSize="s"
       >
         <EuiFlexItem grow={false}>{children}</EuiFlexItem>
-        {typeof badgeCount === 'number' && badgeCount > 0 && (
+        {Boolean(badgeContent) && (
           <EuiFlexItem grow={false}>
             <EuiNotificationBadge
               color="subdued"
               aria-label={badgeAriaLabel}
               role="marquee" // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/marquee_role
             >
-              {badgeCount}
+              {badgeContent}
             </EuiNotificationBadge>
           </EuiFlexItem>
         )}
diff --git a/src/components/datagrid/data_grid_types.ts b/src/components/datagrid/data_grid_types.ts
index bb7442a68b0..57fe63da5ad 100644
--- a/src/components/datagrid/data_grid_types.ts
+++ b/src/components/datagrid/data_grid_types.ts
@@ -63,8 +63,7 @@ export interface EuiDataGridCustomToolbarProps {
 }
 
 export type EuiDataGridToolbarControlProps = EuiButtonEmptyProps & {
-  badgeCount?: number;
-  isActive?: boolean;
+  badgeContent?: number | string;
 };
 
 export interface EuiDataGridPaginationRendererProps