Use blueprint "disable" property to indicate disabled buttons (#1197)

* Use blueprint "disable" property to indicate that colorby disabled

* Disable subset and reset buttons when action is not possible

client/src/components/categorical/category.js

@@ -241,11 +241,10 @@ class Category extends React.Component {
             <Button
               data-testclass="colorby"
               data-testid={`colorby-${metadataField}`}
-              onClick={() => {
+              onClick={this.handleColorChange}
-                if (!isTruncated) this.handleColorChange();
+              active={colorAccessor === metadataField}
-              }}
+              intent={colorAccessor === metadataField ? "primary" : "none"}
-              active={colorAccessor === metadataField || isTruncated}
+              disabled={isTruncated}
-              intent={colorAccessor === metadataField && !isTruncated ? "primary" : "none"}
               icon="tint"
             />
           </Tooltip>

client/src/components/menubar/subset.js

@@ -20,11 +20,9 @@ function Subset(props) {
       >
         <AnchorButton
           data-testid="subset-button"
-          active={!subsetPossible}
+          disabled={!subsetPossible}
           icon="pie-chart"
-          onClick={() => {
+          onClick={handleSubset}
-            if (subsetPossible) handleSubset();
-          }}
         />
       </Tooltip>
       <Tooltip
@@ -34,11 +32,9 @@ function Subset(props) {
       >
         <AnchorButton
           data-testid="reset-subset-button"
-          active={!subsetResetPossible}
+          disabled={!subsetResetPossible}
           icon="full-circle"
-          onClick={() => {
+          onClick={handleSubsetReset}
-            if (subsetResetPossible) handleSubsetReset();
-          }}
         />
       </Tooltip>
     </ButtonGroup>