fix(ui): disabled group functionality for check query builder (#17110)

fix(ui): disabled group functionality for check query builder

CHANGELOG.md

@@ -1,6 +1,7 @@
 ## v2.0.0-beta.6 [unreleased]
 
 ### Features
+
 1. [17085](https://github.com/influxdata/influxdb/pull/17085): Clicking on bucket name takes user to Data Explorer with bucket selected
 1. [17095](https://github.com/influxdata/influxdb/pull/17095): Extend pkger dashboards with table view support
 
@@ -13,6 +14,7 @@
 1. [17072](https://github.com/influxdata/influxdb/pull/17072): Fixed issue where creating a variable of type map was piping the incorrect value when map variables were used in queries
 1. [17050](https://github.com/influxdata/influxdb/pull/17050): Added missing user names to auth CLI commands
 1. [17091](https://github.com/influxdata/influxdb/pull/17091): Require Content-Type for query endpoint
+1. [17110](https://github.com/influxdata/influxdb/pull/17110): Disabled group functionality for check query builder
 
 ## v2.0.0-beta.5 [2020-02-27]
 

ui/cypress/e2e/checks.test.ts

@@ -28,7 +28,11 @@ describe('Checks', () => {
     cy.getByTestID('create-check').click()
 
     cy.getByTestID('create-threshold-check').click()
-
+    // added test to disable group on check query builder
+    cy.getByTestID('dropdown--button')
+      .should('be.disabled')
+      .and('not.contain', 'Group')
+      .contains('Filter')
     cy.getByTestID(`selector-list ${measurement}`).click()
 
     cy.getByTestID('save-cell--button').should('be.disabled')

ui/src/timeMachine/components/TagSelector.tsx

@@ -105,11 +105,15 @@ class TagSelector extends PureComponent<Props> {
   }
 
   private get header() {
-    const {aggregateFunctionType, index} = this.props
+    const {aggregateFunctionType, index, isInCheckOverlay} = this.props
+    let options = ['filter', 'group']
+    if (isInCheckOverlay) {
+      options = ['filter']
+    }
 
     return (
       <BuilderCard.DropdownHeader
-        options={['filter', 'group']}
+        options={options}
         selectedOption={this.renderAggregateFunctionType(aggregateFunctionType)}
         onDelete={index !== 0 && this.handleRemoveTagSelector}
         onSelect={this.handleAggregateFunctionSelect}

ui/src/timeMachine/components/builderCard/BuilderCardDropdownHeader.tsx

@@ -1,7 +1,7 @@
 // Libraries
 import React, {PureComponent} from 'react'
 
-import {SelectDropdown} from '@influxdata/clockface'
+import {ComponentStatus, Dropdown, SelectDropdown} from '@influxdata/clockface'
 import {BuilderAggregateFunctionType} from 'src/types'
 
 interface Props {
@@ -21,15 +21,30 @@ export default class BuilderCardDropdownHeader extends PureComponent<Props> {
 
   public render() {
     const {children, options, onSelect, selectedOption, testID} = this.props
+    const button = () => (
+      <Dropdown.Button status={ComponentStatus.Disabled} onClick={() => {}}>
+        {selectedOption}
+      </Dropdown.Button>
+    )
 
+    const menu = () => null
     return (
       <div className="builder-card--header" data-testid={testID}>
-        <SelectDropdown
-          options={options}
-          selectedOption={selectedOption}
-          testID="select-option-dropdown"
-          onSelect={onSelect ? onSelect : emptyFunction}
-        />
+        {options.length === 1 && (
+          <Dropdown
+            button={button}
+            menu={menu}
+            testID="disabled--filter-dropdown"
+          />
+        )}
+        {options.length !== 1 && (
+          <SelectDropdown
+            options={options}
+            selectedOption={selectedOption}
+            testID="select-option-dropdown"
+            onSelect={onSelect ? onSelect : emptyFunction}
+          />
+        )}
 
         {children}
         {this.deleteButton}