Merge pull request #12208 from influxdata/feat/dont-show-modal-if-script-same

Show confirmation modal only if script changed

ui/src/timeMachine/actions/index.ts

@@ -25,6 +25,7 @@ export type Action =
   | SetTimeRangeAction
   | SetTypeAction
   | SetActiveQueryText
+  | SetActiveQueryEdited
   | SubmitScriptAction
   | SetIsViewingRawDataAction
   | SetGeomAction
@@ -121,6 +122,18 @@ export const setType = (type: ViewType): SetTypeAction => ({
   payload: {type},
 })
 
+interface SetActiveQueryEdited {
+  type: 'SET_ACTIVE_QUERY_EDITED'
+  payload: {manuallyEdited: boolean}
+}
+
+export const setActiveQueryEdited = (
+  manuallyEdited: boolean
+): SetActiveQueryEdited => ({
+  type: 'SET_ACTIVE_QUERY_EDITED',
+  payload: {manuallyEdited},
+})
+
 interface SetActiveQueryText {
   type: 'SET_ACTIVE_QUERY_TEXT'
   payload: {text: string}

ui/src/timeMachine/components/QueriesSwitcher.tsx

@@ -29,6 +29,7 @@ import {AppState, QueryEditMode, SourceType} from 'src/types/v2'
 
 interface StateProps {
   editMode: QueryEditMode
+  manuallyEdited: boolean
 }
 
 interface DispatchProps {
@@ -108,6 +109,11 @@ class TimeMachineQueriesSwitcher extends PureComponent<Props, State> {
   }
 
   private handleShowOverlay = (): void => {
+    if (!this.props.manuallyEdited) {
+      this.props.onEditWithBuilder()
+      return
+    }
+
     this.setState({isOverlayVisible: true})
   }
 
@@ -124,8 +130,8 @@ class TimeMachineQueriesSwitcher extends PureComponent<Props, State> {
 }
 
 const mstp = (state: AppState) => {
-  const editMode = getActiveQuery(state).editMode
+  const {editMode, manuallyEdited} = getActiveQuery(state)
-  return {editMode, sourceType: SourceType.V2}
+  return {editMode, sourceType: SourceType.V2, manuallyEdited}
 }
 
 const mdtp = {

ui/src/timeMachine/components/TimeMachine.tsx

@@ -90,7 +90,7 @@ class TimeMachine extends Component<Props, State> {
     }
   }
 
-  private handleResizerChange = resizerHandlePosition => {
+  private handleResizerChange = (resizerHandlePosition: number[]): void => {
     this.setState({resizerHandlePosition})
   }
 

ui/src/timeMachine/components/TimeMachineFluxEditor.tsx

@@ -10,7 +10,11 @@ import VariablesToolbar from 'src/timeMachine/components/variableToolbar/Variabl
 import ToolbarTab from 'src/timeMachine/components/ToolbarTab'
 
 // Actions
-import {setActiveQueryText, submitScript} from 'src/timeMachine/actions'
+import {
+  setActiveQueryText,
+  submitScript,
+  setActiveQueryEdited,
+} from 'src/timeMachine/actions'
 
 // Utils
 import {getActiveQuery} from 'src/timeMachine/selectors'
@@ -31,6 +35,7 @@ interface StateProps {
 interface DispatchProps {
   onSetActiveQueryText: typeof setActiveQueryText
   onSubmitScript: typeof submitScript
+  onSetActiveQueryEdited: typeof setActiveQueryEdited
 }
 
 interface State {
@@ -40,7 +45,7 @@ interface State {
 type Props = StateProps & DispatchProps
 
 class TimeMachineFluxEditor extends PureComponent<Props, State> {
-  constructor(props) {
+  constructor(props: Props) {
     super(props)
 
     this.state = {
@@ -48,8 +53,16 @@ class TimeMachineFluxEditor extends PureComponent<Props, State> {
     }
   }
 
+  public componentDidMount() {
+    this.props.onSetActiveQueryEdited(false)
+  }
+
+  public componentWillUnmount() {
+    this.props.onSetActiveQueryEdited(false)
+  }
+
   public render() {
-    const {activeQueryText, onSetActiveQueryText, onSubmitScript} = this.props
+    const {activeQueryText, onSubmitScript} = this.props
 
     const divisions = [
       {
@@ -59,7 +72,7 @@ class TimeMachineFluxEditor extends PureComponent<Props, State> {
           <FluxEditor
             script={activeQueryText}
             status={{type: '', text: ''}}
-            onChangeScript={onSetActiveQueryText}
+            onChangeScript={this.handleChangeScript}
             onSubmitScript={onSubmitScript}
             suggestions={[]}
           />
@@ -97,6 +110,13 @@ class TimeMachineFluxEditor extends PureComponent<Props, State> {
     )
   }
 
+  private handleChangeScript = (script: string) => {
+    const {onSetActiveQueryText} = this.props
+    onSetActiveQueryText(script)
+
+    this.props.onSetActiveQueryEdited(true)
+  }
+
   private get rightDivision(): JSX.Element {
     const {displayFluxFunctions} = this.state
 
@@ -125,6 +145,7 @@ const mstp = (state: AppState) => {
 const mdtp = {
   onSetActiveQueryText: setActiveQueryText,
   onSubmitScript: submitScript,
+  onSetActiveQueryEdited: setActiveQueryEdited,
 }
 
 export default connect<StateProps, DispatchProps, {}>(

ui/src/timeMachine/reducers/index.test.ts

@@ -106,7 +106,9 @@ describe('timeMachinesReducer', () => {
     expect(nextTimeMachine.activeTab).toEqual(TimeMachineTab.Queries)
     expect(nextTimeMachine.activeQueryIndex).toEqual(0)
     expect(
-      _.map(nextTimeMachine.draftQueries, q => _.omit(q, ['hidden']))
+      _.map(nextTimeMachine.draftQueries, q =>
+        _.omit(q, ['hidden', 'manuallyEdited'])
+      )
     ).toEqual(view.properties.queries)
   })
 })
@@ -123,6 +125,7 @@ describe('timeMachineReducer', () => {
         editMode: QueryEditMode.Builder,
         builderConfig: {buckets: [], tags: [], functions: []},
         hidden: false,
+        manuallyEdited: false,
       }
 
       const queryB: DashboardQuery = {
@@ -135,8 +138,8 @@ describe('timeMachineReducer', () => {
 
       state.view.properties.queries = [queryA, queryB]
       state.draftQueries = [
-        {...queryA, text: 'baz', hidden: false},
+        {...queryA, text: 'baz', hidden: false, manuallyEdited: false},
-        {...queryB, text: 'buzz', hidden: false},
+        {...queryB, text: 'buzz', hidden: false, manuallyEdited: false},
       ]
 
       const actual = timeMachineReducer(state, submitScript()).view.properties
@@ -161,6 +164,7 @@ describe('timeMachineReducer', () => {
           editMode: QueryEditMode.Builder,
           builderConfig: {buckets: [], tags: [], functions: []},
           hidden: false,
+          manuallyEdited: false,
         },
         {
           text: 'bar',
@@ -169,6 +173,7 @@ describe('timeMachineReducer', () => {
           editMode: QueryEditMode.Advanced,
           builderConfig: {buckets: [], tags: [], functions: []},
           hidden: false,
+          manuallyEdited: false,
         },
       ]
 
@@ -183,6 +188,7 @@ describe('timeMachineReducer', () => {
           editMode: QueryEditMode.Builder,
           builderConfig: {buckets: [], tags: [], functions: []},
           hidden: false,
+          manuallyEdited: false,
         },
         {
           text: '',
@@ -191,6 +197,7 @@ describe('timeMachineReducer', () => {
           editMode: QueryEditMode.Builder,
           builderConfig: {buckets: [], tags: [], functions: []},
           hidden: false,
+          manuallyEdited: false,
         },
       ])
     })
@@ -209,6 +216,7 @@ describe('timeMachineReducer', () => {
           editMode: QueryEditMode.Advanced,
           builderConfig: {buckets: [], tags: [], functions: []},
           hidden: false,
+          manuallyEdited: false,
         },
         {
           text: 'bar',
@@ -217,6 +225,7 @@ describe('timeMachineReducer', () => {
           editMode: QueryEditMode.Builder,
           builderConfig: {buckets: [], tags: [], functions: []},
           hidden: false,
+          manuallyEdited: false,
         },
       ]
 
@@ -231,6 +240,7 @@ describe('timeMachineReducer', () => {
           editMode: QueryEditMode.Advanced,
           builderConfig: {buckets: [], tags: [], functions: []},
           hidden: false,
+          manuallyEdited: false,
         },
         {
           text: 'bar',
@@ -239,6 +249,7 @@ describe('timeMachineReducer', () => {
           editMode: QueryEditMode.Advanced,
           builderConfig: {buckets: [], tags: [], functions: []},
           hidden: false,
+          manuallyEdited: false,
         },
       ])
     })
@@ -257,6 +268,7 @@ describe('timeMachineReducer', () => {
           editMode: QueryEditMode.Advanced,
           builderConfig: {buckets: [], tags: [], functions: []},
           hidden: false,
+          manuallyEdited: false,
         },
         {
           text: 'bar',
@@ -265,6 +277,7 @@ describe('timeMachineReducer', () => {
           editMode: QueryEditMode.Builder,
           builderConfig: {buckets: [], tags: [], functions: []},
           hidden: false,
+          manuallyEdited: false,
         },
       ]
 
@@ -279,6 +292,7 @@ describe('timeMachineReducer', () => {
           editMode: QueryEditMode.Advanced,
           builderConfig: {buckets: [], tags: [], functions: []},
           hidden: false,
+          manuallyEdited: false,
         },
         {
           text: 'bar',
@@ -287,6 +301,7 @@ describe('timeMachineReducer', () => {
           editMode: QueryEditMode.Advanced,
           builderConfig: {buckets: [], tags: [], functions: []},
           hidden: false,
+          manuallyEdited: false,
         },
       ])
     })
@@ -387,6 +402,7 @@ describe('timeMachineReducer', () => {
           editMode: QueryEditMode.Advanced,
           builderConfig: {buckets: [], tags: [], functions: []},
           hidden: false,
+          manuallyEdited: false,
         },
       ]
 
@@ -401,6 +417,7 @@ describe('timeMachineReducer', () => {
           editMode: QueryEditMode.Advanced,
           builderConfig: {buckets: [], tags: [], functions: []},
           hidden: false,
+          manuallyEdited: false,
         },
         {
           text: '',
@@ -413,6 +430,7 @@ describe('timeMachineReducer', () => {
             functions: [],
           },
           hidden: false,
+          manuallyEdited: false,
         },
       ])
     })
@@ -430,6 +448,7 @@ describe('timeMachineReducer', () => {
           editMode: QueryEditMode.Builder,
           builderConfig: {buckets: [], tags: [], functions: []},
           hidden: false,
+          manuallyEdited: false,
         },
         {
           text: 'b',
@@ -438,6 +457,7 @@ describe('timeMachineReducer', () => {
           editMode: QueryEditMode.Builder,
           builderConfig: {buckets: [], tags: [], functions: []},
           hidden: false,
+          manuallyEdited: false,
         },
         {
           text: 'c',
@@ -446,6 +466,7 @@ describe('timeMachineReducer', () => {
           editMode: QueryEditMode.Advanced,
           builderConfig: {buckets: [], tags: [], functions: []},
           hidden: false,
+          manuallyEdited: false,
         },
       ]
     })
@@ -492,6 +513,7 @@ describe('timeMachineReducer', () => {
           editMode: QueryEditMode.Advanced,
           builderConfig,
           hidden: false,
+          manuallyEdited: false,
         },
         {
           text: 'bar',
@@ -500,6 +522,7 @@ describe('timeMachineReducer', () => {
           editMode: QueryEditMode.Builder,
           builderConfig,
           hidden: false,
+          manuallyEdited: false,
         },
       ]
 
@@ -516,6 +539,7 @@ describe('timeMachineReducer', () => {
           editMode: QueryEditMode.Advanced,
           builderConfig,
           hidden: false,
+          manuallyEdited: false,
         },
         {
           text: 'bar',
@@ -525,6 +549,7 @@ describe('timeMachineReducer', () => {
           name: 'test query',
           builderConfig,
           hidden: false,
+          manuallyEdited: false,
         },
       ])
     })

ui/src/timeMachine/reducers/index.ts

@@ -66,7 +66,7 @@ export interface TimeMachinesState {
 export const initialStateHelper = (): TimeMachineState => ({
   timeRange: {lower: 'now() - 1h'},
   view: createView(),
-  draftQueries: [{...defaultViewQuery(), hidden: false}],
+  draftQueries: [{...defaultViewQuery(), hidden: false, manuallyEdited: false}],
   isViewingRawData: false,
   activeTab: TimeMachineTab.Queries,
   activeQueryIndex: 0,
@@ -108,6 +108,7 @@ export const timeMachinesReducer = (
     const draftQueries = _.map(cloneDeep(view.properties.queries), q => ({
       ...q,
       hidden: false,
+      manuallyEdited: false,
     }))
     const queryBuilder = initialQueryBuilderState(draftQueries[0].builderConfig)
     const activeQueryIndex = 0
@@ -191,6 +192,18 @@ export const timeMachineReducer = (
       return {...state, draftQueries}
     }
 
+    case 'SET_ACTIVE_QUERY_EDITED': {
+      const {manuallyEdited} = action.payload
+      const draftQueries = [...state.draftQueries]
+
+      draftQueries[state.activeQueryIndex] = {
+        ...draftQueries[state.activeQueryIndex],
+        manuallyEdited,
+      }
+
+      return {...state, draftQueries}
+    }
+
     case 'SUBMIT_SCRIPT': {
       return produce(state, draftState => {
         submitQueries(draftState)
@@ -488,7 +501,7 @@ export const timeMachineReducer = (
       return produce(state, draftState => {
         draftState.draftQueries = [
           ...state.draftQueries,
-          {...defaultViewQuery(), hidden: false},
+          {...defaultViewQuery(), hidden: false, manuallyEdited: false},
         ]
         draftState.activeQueryIndex = draftState.draftQueries.length - 1
 

ui/src/timeMachine/selectors/index.ts

@@ -1,4 +1,5 @@
-import {AppState, DashboardQuery} from 'src/types/v2'
+import {AppState} from 'src/types/v2'
+import {DashboardDraftQuery} from 'src/types/v2/dashboards'
 
 export const getActiveTimeMachine = (state: AppState) => {
   const {activeTimeMachineID, timeMachines} = state.timeMachines
@@ -7,7 +8,7 @@ export const getActiveTimeMachine = (state: AppState) => {
   return timeMachine
 }
 
-export const getActiveQuery = (state: AppState): DashboardQuery => {
+export const getActiveQuery = (state: AppState): DashboardDraftQuery => {
   const {draftQueries, activeQueryIndex} = getActiveTimeMachine(state)
 
   return draftQueries[activeQueryIndex]

ui/src/types/v2/dashboards.ts

@@ -69,6 +69,7 @@ export interface DashboardQuery {
 
 export interface DashboardDraftQuery extends DashboardQuery {
   hidden: boolean
+  manuallyEdited: boolean
 }
 export interface Legend {
   type?: string