Add disabled styles for field, tag, and measurement items

ui/src/data_explorer/components/FieldListItem.tsx

@@ -48,7 +48,7 @@ class FieldListItem extends PureComponent<Props, State> {
   }
 
   public render() {
-    const {isKapacitorRule, isSelected, funcs} = this.props
+    const {isKapacitorRule, isSelected, funcs, isDisabled} = this.props
     const {isOpen} = this.state
     const fieldName = this.getFieldName()
 
@@ -70,6 +70,7 @@ class FieldListItem extends PureComponent<Props, State> {
         <div
           className={classnames('query-builder--list-item', {
             active: isSelected,
+            disabled: isDisabled,
           })}
           onClick={this.handleToggleField}
           data-test={`query-builder-list-item-field-${fieldName}`}
@@ -84,6 +85,7 @@ class FieldListItem extends PureComponent<Props, State> {
                 active: isOpen,
                 'btn-default': !num,
                 'btn-primary': num,
+                disabled: isDisabled,
               })}
               onClick={this.toggleFunctionsMenu}
               data-test={`query-builder-list-item-function-${fieldName}`}

ui/src/shared/components/MeasurementListItem.tsx

@@ -82,6 +82,7 @@ class MeasurementListItem extends PureComponent<Props, State> {
               <div
                 className={classnames('flip-toggle', {
                   flipped: areTagsAccepted,
+                  disabled: !isQuerySupportedByExplorer,
                 })}
                 onClick={this.handleAcceptReject}
               >

ui/src/shared/components/TagListItem.tsx

@@ -87,7 +87,11 @@ class TagListItem extends PureComponent<Props, State> {
   }
 
   public renderTagValues() {
-    const {tagValues, selectedTagValues} = this.props
+    const {
+      tagValues,
+      selectedTagValues,
+      isQuerySupportedByExplorer,
+    } = this.props
     if (!tagValues || !tagValues.length) {
       return <div>no tag values</div>
     }
@@ -114,6 +118,7 @@ class TagListItem extends PureComponent<Props, State> {
         {filtered.map(v => {
           const cx = classnames('query-builder--list-item', {
             active: selectedTagValues.indexOf(v) > -1,
+            disabled: !isQuerySupportedByExplorer,
           })
           return (
             <div
@@ -134,7 +139,12 @@ class TagListItem extends PureComponent<Props, State> {
   }
 
   public render() {
-    const {tagKey, tagValues, isUsingGroupBy} = this.props
+    const {
+      tagKey,
+      tagValues,
+      isUsingGroupBy,
+      isQuerySupportedByExplorer,
+    } = this.props
     const {isOpen} = this.state
     const tagItemLabel = `${tagKey} — ${tagValues.length}`
 
@@ -153,6 +163,7 @@ class TagListItem extends PureComponent<Props, State> {
             className={classnames('btn btn-xs group-by-tag', {
               'btn-default': !isUsingGroupBy,
               'btn-primary': isUsingGroupBy,
+              disabled: !isQuerySupportedByExplorer,
             })}
             onClick={this.handleGroupBy}
           >

ui/src/style/components/flip-toggle.scss

@@ -1,8 +1,8 @@
 /*
-    Flip Toggle
-    -------------------------------------------------------------
-    Toggles between 2 options using a 3D transition
-    Aesthetic and space conservative
+  Flip Toggle
+  ------------------------------------------------------------------------------
+  Toggles between 2 options using a 3D transition
+  Aesthetic and space conservative
 */
 
 $flip-toggle-text: $g11-sidewalk;
@@ -62,4 +62,20 @@ $flip-toggle-size: 28px;
 /* Flip Animation happens on class toggle */
 .flip-toggle.flipped .flip-toggle--container {
   transform: rotateY(180deg);
+}
+
+/*
+  Disabled State
+  ------------------------------------------------------------------------------
+*/
+
+.flip-toggle.disabled,
+.flip-toggle.disabled:hover {
+  .flip-toggle--front,
+  .flip-toggle--back {
+    cursor: not-allowed;
+    background-color: $g3-castle;
+    color: $g9-mountain;
+    border-color: $g5-pepper;
+  }
 }

ui/src/style/components/query-builder.scss

@@ -98,6 +98,20 @@
     white-space: nowrap;
     margin-right: 8px;
   }
+  /* Disabled State */
+  &.disabled {
+    font-style: italic;
+    color: $query-builder--list-item-text-disabled;
+
+    &:hover {
+      cursor: default;
+      background-color: $query-builder--list-item-bg;
+    }
+    
+    &.active {
+      background-color: $query-builder--list-item-bg-active;
+    }
+  }
 }
 /* Filter Element */
 .query-builder--filter {
@@ -156,6 +170,10 @@
     border-radius: 50%;
     transition: transform 0.25s ease, opacity 0.25s ease;
   }
+
+  .disabled &:after {
+    background-color: $g5-pepper;
+  }
 }
 .query-builder--list-item.active .query-builder--checkbox:after {
   opacity: 1;

ui/src/style/components/query-maker.scss

@@ -63,6 +63,7 @@ $query-builder--list-item-bg-hover: $g4-onyx;
 $query-builder--list-item-text-hover: $g15-platinum;
 $query-builder--list-item-bg-active: $g4-onyx;
 $query-builder--list-item-text-active: $g18-cloud;
+$query-builder--list-item-text-disabled: $g9-mountain;
 
 $query-builder--sub-list-gutter: 24px;
 $query-builder--sub-list-bg: $query-builder--list-item-bg-active;