Web console: Column counter (#9334)

* Column counter

* more general test

web-console/src/components/table-column-selector/__snapshots__/table-column-selector.spec.tsx.snap

@@ -15,6 +15,11 @@ exports[`table column matches snapshot 1`] = `
         class="bp3-button-text"
       >
         Columns 
+        <span
+          class="counter"
+        >
+          (2/3)
+        </span>
       </span>
       <span
         class="bp3-icon bp3-icon-caret-down"

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

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);

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>
   );
 });