Fix issue with changing view types

Since the `id` was not preserved when switching view types, attempting
to save a view after changing its type would result in a new view being
created rather than the existing view being updated.

Also fixes an issue where a dygraph would not rerender when switching
from a step plot to line plot, or during similar conversions.

ui/src/shared/components/dygraph/Dygraph.tsx

@@ -359,6 +359,7 @@ class Dygraph extends Component<Props, State> {
       type,
       underlayCallback,
       isGraphFilled,
+      options: passedOptions,
     } = this.props
 
     const {
@@ -389,7 +390,11 @@ class Dygraph extends Component<Props, State> {
           valueRange: this.getYRange(timeSeries),
         },
       },
-      ...this.props.options,
+      ...passedOptions,
+      // The following options are explicitly coerced to booleans, since
+      // dygraphs will not update if they change from `true` to `undefined`
+      stepPlot: !!passedOptions.stepPlot,
+      stackedGraph: !!passedOptions.stackedGraph,
     }
 
     return options

ui/src/shared/utils/view.test.ts

@@ -1,7 +1,7 @@
 import {convertView, createView} from 'src/shared/utils/view'
 
 import {ViewType} from 'src/types/v2'
-import {LineView, InfluxLanguage} from 'src/types/v2/dashboards'
+import {View, LineView, InfluxLanguage} from 'src/types/v2/dashboards'
 
 describe('convertView', () => {
   test('should preserve view queries if they exist', () => {
@@ -25,4 +25,39 @@ describe('convertView', () => {
 
     expect(convertedView.properties.queries).toBeUndefined()
   })
+
+  test('should preserve the name if it exists', () => {
+    const name = 'foo'
+    const lineView = createView<LineView>(ViewType.Line)
+
+    lineView.name = name
+
+    const convertedView = convertView(lineView, ViewType.Bar)
+
+    expect(convertedView.name).toEqual(name)
+  })
+
+  test('should preserve the id if it exists', () => {
+    const lineView: View = {
+      ...createView<LineView>(ViewType.Line),
+      id: 'foo',
+      links: {self: '123'},
+    }
+
+    const convertedView = convertView(lineView, ViewType.Bar)
+
+    expect(convertedView.id).toEqual(lineView.id)
+  })
+
+  test('should preserve the links if they exists', () => {
+    const lineView: View = {
+      ...createView<LineView>(ViewType.Line),
+      id: 'foo',
+      links: {self: '123'},
+    }
+
+    const convertedView = convertView(lineView, ViewType.Bar)
+
+    expect(convertedView.links).toEqual(lineView.links)
+  })
 })

ui/src/shared/utils/view.ts

@@ -211,15 +211,15 @@ const VIEW_CONVERSIONS = {
 }
 
 export function convertView<T extends View | NewView>(
-  view: T,
+  oldView: T,
   outType: ViewType
 ): T {
-  const inType = view.properties.type
+  const inType = oldView.properties.type
 
-  let newView
+  let newView: any
 
   if (VIEW_CONVERSIONS[inType] && VIEW_CONVERSIONS[inType][outType]) {
-    newView = VIEW_CONVERSIONS[inType][outType](view)
+    newView = VIEW_CONVERSIONS[inType][outType](oldView)
   } else if (NEW_VIEW_CREATORS[outType]) {
     newView = NEW_VIEW_CREATORS[outType]()
   } else {
@@ -228,13 +228,17 @@ export function convertView<T extends View | NewView>(
     )
   }
 
-  const oldViewQueries = get(view, 'properties.queries')
+  const oldViewQueries = get(oldView, 'properties.queries')
   const newViewQueries = get(newView, 'properties.queries')
 
   if (oldViewQueries && newViewQueries) {
     newView.properties.queries = cloneDeep(oldViewQueries)
   }
 
+  newView.name = oldView.name
+  newView.id = (oldView as any).id
+  newView.links = (oldView as any).links
+
   return newView
 }