Merge pull request #12573 from influxdata/dashboard-save-as-overlay

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.test.tsx

@@ -4,7 +4,6 @@ import {shallow} from 'enzyme'
 
 // Components
 import SaveAsButton from 'src/dataExplorer/components/SaveAsButton'
-import SaveAsCellForm from 'src/dataExplorer/components/SaveAsCellForm'
 
 const setup = () => {
   const wrapper = shallow(<SaveAsButton />)
@@ -20,12 +19,4 @@ describe('SaveAsButton', () => {
       expect(wrapper).toMatchSnapshot()
     })
   })
-
-  describe('save as cell form', () => {
-    it('defaults to save as cell form', () => {
-      const saveAsCellForm = wrapper.find(SaveAsCellForm)
-
-      expect(saveAsCellForm.exists()).toBe(true)
-    })
-  })
 })

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 {
+class SaveAsButton extends PureComponent<WithRouterProps, {}> {
-  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,
-  }
-
   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.props.router.push(`${pathname}/save`)
-    this.setState({isOverlayVisible: false})
-  }
-
-  private handleSetSaveAsOption = (saveAsOption: SaveAsOption) => {
-    this.setState({saveAsOption})
   }
 }
 
-export default SaveAsButton
+export default withRouter<{}, {}>(SaveAsButton)

ui/src/dataExplorer/components/SaveAsOverlay.tsx

@@ -0,0 +1,92 @@
+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"
+                >
+                  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/dataExplorer/components/__snapshots__/SaveAsButton.test.tsx.snap

@@ -1,79 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`SaveAsButton rendering renders 1`] = `
+exports[`SaveAsButton rendering renders 1`] = `<SaveAsButton />`;
-<Fragment>
-  <t
-    active={false}
-    color="primary"
-    icon="export"
-    onClick={[Function]}
-    shape="none"
-    size="sm"
-    status="default"
-    testID="button"
-    text="Save As"
-    titleText="Save your query as a Dashboard Cell or a Task"
-    type="button"
-  />
-  <Overlay
-    visible={false}
-  >
-    <OverlayContainer
-      maxWidth={600}
-    >
-      <OverlayHeading
-        onDismiss={[Function]}
-        title="Save As"
-      />
-      <OverlayBody>
-        <div
-          className="save-as--options"
-        >
-          <Radio
-            color="primary"
-            shape="none"
-            size="sm"
-          >
-            <RadioButton
-              active={true}
-              data-testid="cell-radio-button"
-              disabled={false}
-              disabledTitleText="This option is disabled"
-              onClick={[Function]}
-              testID="radio-button"
-              value="dashboard"
-            >
-              Dashboard Cell
-            </RadioButton>
-            <RadioButton
-              active={false}
-              data-testid="task-radio-button"
-              disabled={false}
-              disabledTitleText="This option is disabled"
-              onClick={[Function]}
-              testID="radio-button"
-              value="task"
-            >
-              Task
-            </RadioButton>
-            <RadioButton
-              active={false}
-              data-testid="variable-radio-button"
-              disabled={false}
-              disabledTitleText="This option is disabled"
-              onClick={[Function]}
-              testID="radio-button"
-              value="variable"
-            >
-              Variable
-            </RadioButton>
-          </Radio>
-        </div>
-        <Connect(SaveAsCellForm)
-          dismiss={[Function]}
-        />
-      </OverlayBody>
-    </OverlayContainer>
-  </Overlay>
-</Fragment>
-`;

ui/src/index.tsx

@@ -32,6 +32,7 @@ import DashboardsIndex from 'src/dashboards/components/dashboard_index/Dashboard
 import DashboardExportOverlay from 'src/dashboards/components/DashboardExportOverlay'
 import DashboardImportOverlay from 'src/dashboards/components/DashboardImportOverlay'
 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'
@@ -171,7 +172,9 @@ class Root extends PureComponent {
                         <Route
                           path="data-explorer"
                           component={DataExplorerPage}
-                        />
+                        >
+                          <Route path="save" component={SaveAsOverlay} />
+                        </Route>
                         <Route path="dashboards">
                           <IndexRoute component={DashboardsIndex} />
                           <Route path=":dashboardID" component={DashboardPage}>

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
 }