Fix inability to rename a dashboard cell

Also removes redundant query config building in CEO.

ui/src/dashboards/actions/cellEditorOverlay.ts

@@ -8,27 +8,15 @@ export interface State {
 
 export enum ActionType {
   ClearCEO = 'CLEAR_CEO',
-  RenameCell = 'RENAME_CELL',
   UpdateEditorTimeRange = 'UPDATE_EDITOR_TIME_RANGE',
-  UpdateFieldOptions = 'UPDATE_FIELD_OPTIONS',
 }
 
-export type Action =
-  | ClearCEOAction
-  | RenameCellAction
-  | UpdateEditorTimeRangeAction
+export type Action = ClearCEOAction | UpdateEditorTimeRangeAction
 
 export interface ClearCEOAction {
   type: ActionType.ClearCEO
 }
 
-export interface RenameCellAction {
-  type: ActionType.RenameCell
-  payload: {
-    cellName: string
-  }
-}
-
 export interface UpdateEditorTimeRangeAction {
   type: ActionType.UpdateEditorTimeRange
   payload: {
@@ -39,10 +27,3 @@ export interface UpdateEditorTimeRangeAction {
 export const clearCEO = (): ClearCEOAction => ({
   type: ActionType.ClearCEO,
 })
-
-export const renameCell = (cellName: string): RenameCellAction => ({
-  type: ActionType.RenameCell,
-  payload: {
-    cellName,
-  },
-})

ui/src/dashboards/components/CellEditorOverlay.tsx

@@ -10,8 +10,6 @@ import CEOHeader from 'src/dashboards/components/CEOHeader'
 
 // Utils
 import {getDeep} from 'src/utils/wrappers'
-import {buildQuery} from 'src/utils/influxql'
-import {getTimeRange} from 'src/dashboards/utils/cellGetters'
 import {TimeMachineContainer} from 'src/shared/utils/TimeMachineContainer'
 import {intialStateFromCell} from 'src/shared/utils/timeMachine'
 
@@ -19,7 +17,6 @@ import {intialStateFromCell} from 'src/shared/utils/timeMachine'
 import {editCellQueryStatus} from 'src/dashboards/actions'
 
 // Constants
-import {TYPE_QUERY_CONFIG} from 'src/dashboards/constants'
 import {getCellTypeColors} from 'src/dashboards/constants/cellEditor'
 import {IS_STATIC_LEGEND} from 'src/shared/constants'
 import {STATIC_LEGEND} from 'src/dashboards/constants/cellEditor'
@@ -50,13 +47,13 @@ interface Props {
   queryStatus: QueriesModels.QueryStatus
   templates: Template[]
   cell: Cell | NewDefaultCell
-  renameCell: (name: string) => void
   dashboardTimeRange: TimeRange
 }
 
 interface State {
   isStaticLegend: boolean
   status: ScriptStatus
+  draftCellName: string
 }
 
 @ErrorHandling
@@ -77,6 +74,7 @@ class CellEditorOverlay extends Component<Props, State> {
     this.state = {
       isStaticLegend: IS_STATIC_LEGEND(legend),
       status: {type: 'none', text: ''},
+      draftCellName: props.cell.name,
     }
   }
 
@@ -91,7 +89,6 @@ class CellEditorOverlay extends Component<Props, State> {
       fluxLinks,
       notify,
       onCancel,
-      renameCell,
       source,
       sources,
       templates,
@@ -125,7 +122,7 @@ class CellEditorOverlay extends Component<Props, State> {
             {(activeEditorTab, onSetActiveEditorTab) => (
               <CEOHeader
                 title={_.get(cell, 'name', '')}
-                renameCell={renameCell}
+                renameCell={this.handleRenameCell}
                 onSave={this.handleSaveCell}
                 onCancel={onCancel}
                 activeEditorTab={activeEditorTab}
@@ -176,8 +173,13 @@ class CellEditorOverlay extends Component<Props, State> {
     this.setState({status})
   }
 
+  private handleRenameCell = (draftCellName: string): void => {
+    this.setState({draftCellName})
+  }
+
   private collectCell = (): Cell | NewDefaultCell => {
     const {cell} = this.props
+    const {isStaticLegend, draftCellName} = this.state
     const {
       script,
       queryDrafts,
@@ -193,9 +195,8 @@ class CellEditorOverlay extends Component<Props, State> {
       gaugeColors,
       lineColors,
     } = this.timeMachineContainer.state
-    const {isStaticLegend} = this.state
 
-    let queries: CellQuery[]
+    let queries: CellQuery[] = queryDrafts
 
     if (this.isFluxSource) {
       queries = [
@@ -206,25 +207,6 @@ class CellEditorOverlay extends Component<Props, State> {
           type: QueryType.Flux,
         },
       ]
-    } else {
-      queries = queryDrafts.map(q => {
-        const queryConfig = getDeep<QueriesModels.QueryConfig | null>(
-          q,
-          'queryConfig',
-          null
-        )
-        const timeRange = getTimeRange(queryConfig)
-        const source = getDeep<string>(q, 'source', '')
-
-        return {
-          ...q,
-          query:
-            queryConfig.rawText ||
-            buildQuery(TYPE_QUERY_CONFIG, timeRange, queryConfig),
-          source,
-          type: QueryType.InfluxQL,
-        }
-      })
     }
 
     const colors = getCellTypeColors({
@@ -236,6 +218,7 @@ class CellEditorOverlay extends Component<Props, State> {
 
     const newCell = {
       ...cell,
+      name: draftCellName,
       queries,
       colors,
       axes,

ui/src/dashboards/containers/DashboardPage.tsx

@@ -73,7 +73,6 @@ interface Props extends ManualRefreshProps, WithRouterProps {
     sourceID: string
     dashboardID: string
   }
-  renameCell: (name: string) => void
   location: Location
   dashboardID: number
   dashboard: DashboardsModels.Dashboard
@@ -209,7 +208,6 @@ class DashboardPage extends Component<Props, State> {
       sources,
       timeRange,
       timeRange: {lower, upper},
-      renameCell,
       zoomedTimeRange,
       zoomedTimeRange: {lower: zoomedLower, upper: zoomedUpper},
       dashboard,
@@ -292,7 +290,6 @@ class DashboardPage extends Component<Props, State> {
             onCancel={this.handleHideCellEditorOverlay}
             templates={templatesIncludingDashTime}
             editQueryStatus={this.props.editCellQueryStatus}
-            renameCell={renameCell}
             dashboardTimeRange={timeRange}
           />
         </OverlayTechnology>
@@ -621,7 +618,6 @@ const mdtp = {
   handleClearCEO: cellEditorOverlayActions.clearCEO,
   onGetAnnotationsAsync: getAnnotationsAsync,
   handleDismissEditingAnnotation: dismissEditingAnnotation,
-  renameCell: cellEditorOverlayActions.renameCell,
 }
 
 export default connect(mstp, mdtp)(

ui/src/dashboards/reducers/cellEditorOverlay.ts

@@ -4,8 +4,6 @@ import _ from 'lodash'
 // actions
 import {Action, ActionType} from 'src/dashboards/actions/cellEditorOverlay'
 
-// constants
-
 // types
 import {Cell, TimeRange} from 'src/types'
 import {NewDefaultCell} from 'src/types/dashboards'
@@ -29,13 +27,6 @@ export default (state = initialState, action: Action): CEOInitialState => {
       return {...state, cell, timeRange}
     }
 
-    case ActionType.RenameCell: {
-      const {cellName} = action.payload
-      const cell = {...state.cell, name: cellName}
-
-      return {...state, cell}
-    }
-
     case ActionType.UpdateEditorTimeRange: {
       const {timeRange} = action.payload
 

ui/src/shared/actions/visualizations.ts

@@ -1,20 +0,0 @@
-import {ActionType as CEOActionType} from 'src/dashboards/actions/cellEditorOverlay'
-import {FieldOption} from 'src/types/dashboards'
-
-export interface UpdateFieldOptionsAction {
-  type: CEOActionType.UpdateFieldOptions
-  payload: {
-    fieldOptions: FieldOption[]
-  }
-}
-
-export const updateFieldOptions = (
-  fieldOptions: FieldOption[]
-): UpdateFieldOptionsAction => {
-  return {
-    type: CEOActionType.UpdateFieldOptions,
-    payload: {
-      fieldOptions,
-    },
-  } as UpdateFieldOptionsAction
-}

ui/test/dashboards/reducers/cellEditorOverlay.test.ts

@@ -2,14 +2,7 @@
 import reducer, {initialState} from 'src/dashboards/reducers/cellEditorOverlay'
 
 // Actions
-import {clearCEO, renameCell} from 'src/dashboards/actions/cellEditorOverlay'
-
-// Fixtures
-import {cell} from 'test/fixtures'
-
-const defaultCell = {
-  ...cell,
-}
+import {clearCEO} from 'src/dashboards/actions/cellEditorOverlay'
 
 describe('Dashboards.Reducers.cellEditorOverlay', () => {
   it('should hide cell editor overlay', () => {
@@ -19,11 +12,4 @@ describe('Dashboards.Reducers.cellEditorOverlay', () => {
     expect(actual.cell).toBe(expected)
     expect(actual.timeRange).toBe(expected)
   })
-
-  it('should change the name of the cell', () => {
-    const actual = reducer(initialState, renameCell(defaultCell.name))
-    const expected = defaultCell.name
-
-    expect(actual.cell.name).toBe(expected)
-  })
 })