Data Explorer save as overlay uses router

ui/src/dataExplorer/components/DataExplorerPage.tsx

@@ -8,9 +8,10 @@ import SaveAsButton from 'src/dataExplorer/components/SaveAsButton'
 import VisOptionsButton from 'src/timeMachine/components/VisOptionsButton'
 import ViewTypeDropdown from 'src/timeMachine/components/view_options/ViewTypeDropdown'
 
-const DataExplorerPage: SFC<{}> = () => {
+const DataExplorerPage: SFC = ({children}) => {
   return (
     <Page titleTag="Data Explorer">
+      {children}
       <Page.Header fullWidth={true}>
         <Page.Header.Left>
           <Page.Title title="Data Explorer" />

ui/src/dataExplorer/components/SaveAsButton.tsx

@@ -1,38 +1,15 @@
 // Libraries
 import React, {PureComponent} from 'react'
+import {withRouter, WithRouterProps} from 'react-router'
 
 // Components
-import SaveAsCellForm from 'src/dataExplorer/components/SaveAsCellForm'
-import SaveAsTaskForm from 'src/dataExplorer/components/SaveAsTaskForm'
-import SaveAsVariable from 'src/dataExplorer/components/SaveAsVariable'
 import {IconFont, Button, ComponentColor} from '@influxdata/clockface'
-import {Radio, Overlay} from 'src/clockface'
 
 // Styles
 import 'src/dataExplorer/components/SaveAsButton.scss'
 
-enum SaveAsOption {
-  Dashboard = 'dashboard',
-  Task = 'task',
-  Variable = 'variable',
-}
-
-interface Props {}
-
-interface State {
-  isOverlayVisible: boolean
-  saveAsOption: SaveAsOption
-}
-
-class SaveAsButton extends PureComponent<Props, State> {
-  public state: State = {
-    isOverlayVisible: false,
-    saveAsOption: SaveAsOption.Dashboard,
-  }
-
+class SaveAsButton extends PureComponent<WithRouterProps, {}> {
   public render() {
-    const {isOverlayVisible, saveAsOption} = this.state
-
     return (
       <>
         <Button
@@ -42,72 +19,17 @@ class SaveAsButton extends PureComponent<Props, State> {
           color={ComponentColor.Primary}
           titleText="Save your query as a Dashboard Cell or a Task"
         />
-        <Overlay visible={isOverlayVisible}>
-          <Overlay.Container maxWidth={600}>
-            <Overlay.Heading
-              title="Save As"
-              onDismiss={this.handleHideOverlay}
-            />
-            <Overlay.Body>
-              <div className="save-as--options">
-                <Radio>
-                  <Radio.Button
-                    active={saveAsOption === SaveAsOption.Dashboard}
-                    value={SaveAsOption.Dashboard}
-                    onClick={this.handleSetSaveAsOption}
-                    data-testid="cell-radio-button"
-                  >
-                    Dashboard Cell
-                  </Radio.Button>
-                  <Radio.Button
-                    active={saveAsOption === SaveAsOption.Task}
-                    value={SaveAsOption.Task}
-                    onClick={this.handleSetSaveAsOption}
-                    data-testid="task-radio-button"
-                  >
-                    Task
-                  </Radio.Button>
-                  <Radio.Button
-                    active={saveAsOption === SaveAsOption.Variable}
-                    value={SaveAsOption.Variable}
-                    onClick={this.handleSetSaveAsOption}
-                    data-testid="variable-radio-button"
-                  >
-                    Variable
-                  </Radio.Button>
-                </Radio>
-              </div>
-              {this.saveAsForm}
-            </Overlay.Body>
-          </Overlay.Container>
-        </Overlay>
       </>
     )
   }
 
-  private get saveAsForm(): JSX.Element {
-    const {saveAsOption} = this.state
-
-    if (saveAsOption === SaveAsOption.Dashboard) {
-      return <SaveAsCellForm dismiss={this.handleHideOverlay} />
-    } else if (saveAsOption === SaveAsOption.Task) {
-      return <SaveAsTaskForm dismiss={this.handleHideOverlay} />
-    } else if (saveAsOption === SaveAsOption.Variable) {
-      return <SaveAsVariable onHideOverlay={this.handleHideOverlay} />
-    }
-  }
-
   private handleShowOverlay = () => {
-    this.setState({isOverlayVisible: true})
-  }
+    const {
+      location: {pathname},
+    } = this.props
 
-  private handleHideOverlay = () => {
-    this.setState({isOverlayVisible: false})
-  }
-
-  private handleSetSaveAsOption = (saveAsOption: SaveAsOption) => {
-    this.setState({saveAsOption})
+    this.props.router.push(`${pathname}/save`)
   }
 }
 
-export default SaveAsButton
+export default withRouter<{}, {}>(SaveAsButton)

ui/src/dataExplorer/components/SaveAsOverlay.tsx

@@ -0,0 +1,90 @@
+import React, {PureComponent} from 'react'
+import {withRouter, WithRouterProps} from 'react-router'
+
+// Components
+import SaveAsCellForm from 'src/dataExplorer/components/SaveAsCellForm'
+import SaveAsTaskForm from 'src/dataExplorer/components/SaveAsTaskForm'
+import SaveAsVariable from 'src/dataExplorer/components/SaveAsVariable'
+import {Radio, Overlay} from 'src/clockface'
+
+// Styles
+import 'src/dataExplorer/components/SaveAsButton.scss'
+
+enum SaveAsOption {
+  Dashboard = 'dashboard',
+  Task = 'task',
+  Variable = 'variable',
+}
+
+interface State {
+  saveAsOption: SaveAsOption
+}
+
+class SaveAsOverlay extends PureComponent<WithRouterProps, State> {
+  public state: State = {
+    saveAsOption: SaveAsOption.Dashboard,
+  }
+
+  render() {
+    const {saveAsOption} = this.state
+
+    return (
+      <Overlay visible={true}>
+        <Overlay.Container maxWidth={600}>
+          <Overlay.Heading title="Save As" onDismiss={this.handleHideOverlay} />
+          <Overlay.Body>
+            <div className="save-as--options">
+              <Radio>
+                <Radio.Button
+                  active={saveAsOption === SaveAsOption.Dashboard}
+                  value={SaveAsOption.Dashboard}
+                  onClick={this.handleSetSaveAsOption}
+                  data-testid="cell-radio-button"
+                >
+                  Dashboard Cell
+                </Radio.Button>
+                <Radio.Button
+                  active={saveAsOption === SaveAsOption.Task}
+                  value={SaveAsOption.Task}
+                  onClick={this.handleSetSaveAsOption}
+                  data-testid="task-radio-button"
+                >
+                  Task
+                </Radio.Button>
+                <Radio.Button
+                  active={saveAsOption === SaveAsOption.Variable}
+                  value={SaveAsOption.Variable}
+                  onClick={this.handleSetSaveAsOption}
+                  data-testid="variable-radio-button"
+                />
+              </Radio>
+            </div>
+            {this.saveAsForm}
+          </Overlay.Body>
+        </Overlay.Container>
+      </Overlay>
+    )
+  }
+
+  private get saveAsForm(): JSX.Element {
+    const {saveAsOption} = this.state
+
+    if (saveAsOption === SaveAsOption.Dashboard) {
+      return <SaveAsCellForm dismiss={this.handleHideOverlay} />
+    } else if (saveAsOption === SaveAsOption.Task) {
+      return <SaveAsTaskForm dismiss={this.handleHideOverlay} />
+    } else if (saveAsOption === SaveAsOption.Variable) {
+      return <SaveAsVariable onHideOverlay={this.handleHideOverlay} />
+    }
+  }
+
+  private handleHideOverlay = () => {
+    this.props.router.goBack()
+  }
+
+  private handleSetSaveAsOption = (saveAsOption: SaveAsOption) => {
+    this.setState({saveAsOption})
+  }
+}
+
+export default withRouter<{}, {}>(SaveAsOverlay)

ui/src/index.tsx

@@ -31,6 +31,7 @@ import DashboardPage from 'src/dashboards/components/DashboardPage'
 import DashboardsIndex from 'src/dashboards/components/dashboard_index/DashboardsIndex'
 import DashboardExportOverlay from 'src/dashboards/components/DashboardExportOverlay'
 import DataExplorerPage from 'src/dataExplorer/components/DataExplorerPage'
+import SaveAsOverlay from 'src/dataExplorer/components/SaveAsOverlay'
 import {MePage, Account} from 'src/me'
 import NotFound from 'src/shared/components/NotFound'
 import GetLinks from 'src/shared/containers/GetLinks'
@@ -167,7 +168,9 @@ class Root extends PureComponent {
                         <Route
                           path="data-explorer"
                           component={DataExplorerPage}
-                        />
+                        >
+                          <Route path="save" component={SaveAsOverlay} />
+                        </Route>
                         <Route path="dashboards">
                           <IndexRoute component={DashboardsIndex} />
                           <Route

ui/src/pageLayout/components/Page.tsx

@@ -11,7 +11,6 @@ import PageContents from 'src/pageLayout/components/PageContents'
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
 interface Props {
-  children: JSX.Element | JSX.Element[]
   className?: string
   titleTag: string
 }