From c294e0b7c6d35d866033ac9575a024d5e4887ded Mon Sep 17 00:00:00 2001
From: Vadim Ogievetsky <vadim@ogievetsky.com>
Date: Thu, 27 Feb 2020 12:04:27 -0800
Subject: [PATCH] Web console: Column counter (#9334)

* Column counter

* more general test
---
 .../__snapshots__/table-column-selector.spec.tsx.snap |  7 ++++++-
 .../table-column-selector/table-column-selector.scss  |  4 ++++
 .../table-column-selector.spec.tsx                    |  2 +-
 .../table-column-selector/table-column-selector.tsx   | 11 +++++++++--
 4 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/web-console/src/components/table-column-selector/__snapshots__/table-column-selector.spec.tsx.snap b/web-console/src/components/table-column-selector/__snapshots__/table-column-selector.spec.tsx.snap
index a88ebd5750c..60d731bf7a7 100644
--- a/web-console/src/components/table-column-selector/__snapshots__/table-column-selector.spec.tsx.snap
+++ b/web-console/src/components/table-column-selector/__snapshots__/table-column-selector.spec.tsx.snap
@@ -14,7 +14,12 @@ exports[`table column matches snapshot 1`] = `
       <span
         class="bp3-button-text"
       >
-        Columns
+        Columns 
+        <span
+          class="counter"
+        >
+          (2/3)
+        </span>
       </span>
       <span
         class="bp3-icon bp3-icon-caret-down"
diff --git a/web-console/src/components/table-column-selector/table-column-selector.scss b/web-console/src/components/table-column-selector/table-column-selector.scss
index 7c06435a965..4cefabf9000 100644
--- a/web-console/src/components/table-column-selector/table-column-selector.scss
+++ b/web-console/src/components/table-column-selector/table-column-selector.scss
@@ -20,6 +20,10 @@
   position: absolute;
   right: 0;
   margin: 0;
+
+  .counter {
+    opacity: 0.5;
+  }
 }
 
 // This will be mounted in a portal
diff --git a/web-console/src/components/table-column-selector/table-column-selector.spec.tsx b/web-console/src/components/table-column-selector/table-column-selector.spec.tsx
index 4834ce41d8d..24ea5e4b333 100644
--- a/web-console/src/components/table-column-selector/table-column-selector.spec.tsx
+++ b/web-console/src/components/table-column-selector/table-column-selector.spec.tsx
@@ -27,7 +27,7 @@ describe('table column', () => {
       <TableColumnSelector
         columns={['a', 'b', 'c']}
         onChange={() => {}}
-        tableColumnsHidden={['a', 'b', 'c']}
+        tableColumnsHidden={['b']}
       />
     );
     const { container } = render(tableColumn);
diff --git a/web-console/src/components/table-column-selector/table-column-selector.tsx b/web-console/src/components/table-column-selector/table-column-selector.tsx
index 1602afa9538..fc5359e3e70 100644
--- a/web-console/src/components/table-column-selector/table-column-selector.tsx
+++ b/web-console/src/components/table-column-selector/table-column-selector.tsx
@@ -34,26 +34,33 @@ export const TableColumnSelector = React.memo(function TableColumnSelector(
   props: TableColumnSelectorProps,
 ) {
   const { columns, onChange, tableColumnsHidden } = props;
+
+  const isColumnShown = (column: string) => !tableColumnsHidden.includes(column);
+
   const checkboxes = (
     <Menu className="table-column-selector-menu">
       {columns.map(column => (
         <MenuCheckbox
           label={column}
           key={column}
-          checked={!tableColumnsHidden.includes(column)}
+          checked={isColumnShown(column)}
           onChange={() => onChange(column)}
         />
       ))}
     </Menu>
   );
 
+  const counterText = `(${columns.filter(isColumnShown).length}/${columns.length})`;
+
   return (
     <Popover
       className="table-column-selector"
       content={checkboxes}
       position={Position.BOTTOM_RIGHT}
     >
-      <Button rightIcon={IconNames.CARET_DOWN} text="Columns" />
+      <Button rightIcon={IconNames.CARET_DOWN}>
+        Columns <span className="counter">{counterText}</span>
+      </Button>
     </Popover>
   );
 });