BIG-5: feat switching between compact and medium table row size.

src/components/Dashboard/DashboardRowsHeightButton.js

@@ -1,36 +0,0 @@
-import React from 'react';
-import {
-  Button,
-  PopoverInteractionKind,
-  Popover,
-  Menu,
-  MenuItem,
-  MenuDivider,
-  Classes
-} from '@blueprintjs/core';
-import { Icon } from 'components';
-
-export function DashboardRowsHeightButton() {
-  return (
-    <Popover
-      minimal={true}
-      content={
-        <Menu>
-          <MenuDivider title={'Rows height'} />
-          <MenuItem text="Compact" />
-          <MenuItem text="Medium" />
-        </Menu>
-      }
-      placement="bottom-start"
-      modifiers={{
-        offset: { offset: '0, 4' },
-      }}
-      interactionKind={PopoverInteractionKind.CLICK}
-    >
-      <Button
-        className={Classes.MINIMAL}
-        icon={<Icon icon="rows-height" iconSize={16} />}
-      />
-    </Popover>
-  );
-}

src/components/Dashboard/DashboardRowsHeightButton/index.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import {
+  Button,
+  PopoverInteractionKind,
+  Popover,
+  Menu,
+  MenuItem,
+  MenuDivider,
+  Classes,
+  Tooltip,
+  Position,
+} from '@blueprintjs/core';
+import clsx from 'classnames';
+import { Icon, T } from 'components';
+
+import Style from './style.module.scss';
+
+/**
+ * Dashboard rows height button control.
+ */
+export function DashboardRowsHeightButton({ initialValue, value, onChange }) {
+  const [localSize, setLocalSize] = React.useState(initialValue);
+
+  // Handle menu item click.
+  const handleItemClick = (size) => (event) => {
+    setLocalSize(size);
+    onChange && onChange(size, event);
+  };
+  // Button icon name.
+  const btnIcon = `table-row-${localSize}`;
+
+  return (
+    <Popover
+      minimal={true}
+      content={
+        <Menu className={Style.menu}>
+          <MenuDivider title={<T id={'dashboard.rows_height'} />} />
+          <MenuItem
+            onClick={handleItemClick('small')}
+            text={<T id={'dashboard.row_small'} />}
+          />
+          <MenuItem
+            onClick={handleItemClick('medium')}
+            text={<T id={'dashboard.row_medium'} />}
+          />
+        </Menu>
+      }
+      placement="bottom-start"
+      modifiers={{
+        offset: { offset: '0, 4' },
+      }}
+      interactionKind={PopoverInteractionKind.CLICK}
+    >
+      <Tooltip
+        content={<T id={'dashboard.rows_height'} />}
+        minimal={true}
+        position={Position.BOTTOM}
+      >
+        <Button
+          className={clsx(Classes.MINIMAL, Style.button)}
+          icon={<Icon icon={btnIcon} iconSize={16} />}
+        />
+      </Tooltip>
+    </Popover>
+  );
+}
+
+DashboardRowsHeightButton.defaultProps = {
+  initialValue: 'medium',
+};

src/components/Dashboard/DashboardRowsHeightButton/style.module.scss

@@ -0,0 +1,12 @@
+
+.menu{
+  :global .bp3-heading{
+    font-weight: 400;
+    opacity: 0.5;
+    font-size: 12px;
+  }
+}
+
+.button{
+  min-width: 34px;
+}

src/components/DataTable.js

@@ -196,6 +196,7 @@ export default function DataTable(props) {
 
 DataTable.defaultProps = {
   pagination: false,
+  size: 'medium',
   spinnerProps: { size: 30 },
 
   expandToggleColumn: 1,

src/components/Datatable/TableWrapper.js

@@ -9,7 +9,15 @@ import TableContext from './TableContext';
 export default function TableWrapper({ children }) {
   const {
     table: { getTableProps },
-    props: { sticky, pagination, loading, expandable, virtualizedRows, className },
+    props: {
+      sticky,
+      pagination,
+      loading,
+      expandable,
+      virtualizedRows,
+      className,
+      size,
+    },
   } = useContext(TableContext);
 
   return (
@@ -20,6 +28,7 @@ export default function TableWrapper({ children }) {
         'is-expandable': expandable,
         'is-loading': loading,
         'has-virtualized-rows': virtualizedRows,
+        [`table-size--${size}`]: size,
       })}
     >
       <ScrollSync>