Merge pull request #12757 from influxdata/move-create-org-overlay-router

Move create organization overlay to route

ui/src/index.tsx

@@ -52,6 +52,7 @@ import NoteEditorOverlay from 'src/dashboards/components/NoteEditorOverlay'
 import OrgTemplatesIndex from 'src/organizations/containers/OrgTemplatesIndex'
 import TemplateExportOverlay from 'src/templates/components/TemplateExportOverlay'
 import TemplateImportOverlay from 'src/templates/components/TemplateImportOverlay'
+import CreateOrgOverlay from './organizations/components/CreateOrgOverlay'
 
 import OnboardingWizardPage from 'src/onboarding/containers/OnboardingWizardPage'
 
@@ -117,8 +118,19 @@ class Root extends PureComponent {
                     <Route component={GetOrganizations}>
                       <Route component={App}>
                         <IndexRoute component={MePage} />
+
+                        <Route
+                          path="organizations"
+                          component={OrganizationsIndex}
+                        >
+                          <Route path="new" component={CreateOrgOverlay} />
+                        </Route>
+
                         <Route path="organizations">
                           <IndexRoute component={OrganizationsIndex} />
+                          <Route component={OrganizationsIndex}>
+                            <Route path="new" component={CreateOrgOverlay} />
+                          </Route>
                           <Route path=":orgID">
                             <Route path="buckets" component={OrgBucketIndex} />
                             <Route

ui/src/organizations/components/CreateOrgOverlay.tsx

@@ -1,5 +1,8 @@
 // Libraries
 import React, {PureComponent, ChangeEvent} from 'react'
+import {connect} from 'react-redux'
+import {WithRouterProps, withRouter} from 'react-router'
+
 import _ from 'lodash'
 
 // Components
@@ -13,21 +16,25 @@ import {Form, Overlay, Input} from 'src/clockface'
 
 // Types
 import {Organization} from '@influxdata/influx'
+
+// Actions
 import {createOrg} from 'src/organizations/actions/orgs'
 
-interface Props {
+interface OwnProps {}
-  link: string
+
-  onCreateOrg: typeof createOrg
+interface DispatchProps {
-  onCloseModal: () => void
+  createOrg: typeof createOrg
 }
 
+type Props = OwnProps & DispatchProps & WithRouterProps
+
 interface State {
   org: Organization
   nameInputStatus: ComponentStatus
   errorMessage: string
 }
 
-export default class CreateOrgOverlay extends PureComponent<Props, State> {
+class CreateOrgOverlay extends PureComponent<Props, State> {
   constructor(props) {
     super(props)
     this.state = {
@@ -38,41 +45,42 @@ export default class CreateOrgOverlay extends PureComponent<Props, State> {
   }
 
   public render() {
-    const {onCloseModal} = this.props
     const {org, nameInputStatus, errorMessage} = this.state
 
     return (
-      <Overlay.Container maxWidth={500}>
+      <Overlay visible={true}>
-        <Overlay.Heading
+        <Overlay.Container maxWidth={500}>
-          title="Create Organization"
+          <Overlay.Heading
-          onDismiss={this.props.onCloseModal}
+            title="Create Organization"
-        />
+            onDismiss={this.closeModal}
-        <Form onSubmit={this.handleCreateOrg}>
+          />
-          <Overlay.Body>
+          <Form onSubmit={this.handleCreateOrg}>
-            <Form.Element label="Name" errorMessage={errorMessage}>
+            <Overlay.Body>
-              <Input
+              <Form.Element label="Name" errorMessage={errorMessage}>
-                placeholder="Give your organization a name"
+                <Input
-                name="name"
+                  placeholder="Give your organization a name"
-                autoFocus={true}
+                  name="name"
-                value={org.name}
+                  autoFocus={true}
-                onChange={this.handleChangeInput}
+                  value={org.name}
-                status={nameInputStatus}
+                  onChange={this.handleChangeInput}
-                testID="create-org-name-input"
+                  status={nameInputStatus}
+                  testID="create-org-name-input"
+                />
+              </Form.Element>
+            </Overlay.Body>
+            <Overlay.Footer>
+              <Button text="Cancel" onClick={this.closeModal} />
+              <Button
+                text="Create"
+                type={ButtonType.Submit}
+                color={ComponentColor.Primary}
+                status={this.submitButtonStatus}
+                testID="create-org-submit-button"
               />
-            </Form.Element>
+            </Overlay.Footer>
-          </Overlay.Body>
+          </Form>
-          <Overlay.Footer>
+        </Overlay.Container>
-            <Button text="Cancel" onClick={onCloseModal} />
+      </Overlay>
-            <Button
-              text="Create"
-              type={ButtonType.Submit}
-              color={ComponentColor.Primary}
-              status={this.submitButtonStatus}
-              testID="create-org-submit-button"
-            />
-          </Overlay.Footer>
-        </Form>
-      </Overlay.Container>
     )
   }
 
@@ -88,9 +96,14 @@ export default class CreateOrgOverlay extends PureComponent<Props, State> {
 
   private handleCreateOrg = async () => {
     const {org} = this.state
-    const {onCreateOrg, onCloseModal} = this.props
+    const {createOrg} = this.props
-    await onCreateOrg(org)
+
-    onCloseModal()
+    await createOrg(org)
+    this.closeModal()
+  }
+
+  private closeModal = () => {
+    this.props.router.goBack()
   }
 
   private handleChangeInput = (e: ChangeEvent<HTMLInputElement>) => {
@@ -126,3 +139,14 @@ export default class CreateOrgOverlay extends PureComponent<Props, State> {
     return _.sample(messages)
   }
 }
+
+const mdtp = {
+  createOrg,
+}
+
+export default withRouter(
+  connect<{}, DispatchProps, OwnProps>(
+    null,
+    mdtp
+  )(CreateOrgOverlay)
+)

ui/src/organizations/containers/OrganizationsIndex.tsx

@@ -1,19 +1,17 @@
 // Libraries
 import React, {PureComponent} from 'react'
-import {WithRouterProps} from 'react-router'
+import {WithRouterProps, withRouter} from 'react-router'
 import {connect} from 'react-redux'
 import _ from 'lodash'
 
 // Components
 import {Page} from 'src/pageLayout'
-import CreateOrgOverlay from 'src/organizations/components/CreateOrgOverlay'
 import OrganizationsIndexContents from 'src/organizations/components/OrganizationsIndexContents'
 import SearchWidget from 'src/shared/components/search_widget/SearchWidget'
 import {Button, IconFont, ComponentColor} from '@influxdata/clockface'
-import {Overlay} from 'src/clockface'
 
 // Actions
-import {createOrg, deleteOrg} from 'src/organizations/actions/orgs'
+import {deleteOrg} from 'src/organizations/actions/orgs'
 
 // Types
 import {Organization, Links} from 'src/types/v2'
@@ -28,32 +26,24 @@ interface StateProps {
 }
 
 interface DispatchProps {
-  onCreateOrg: typeof createOrg
   onDeleteOrg: typeof deleteOrg
 }
 
 interface State {
-  modalState: ModalState
   searchTerm: string
 }
 
-enum ModalState {
-  Open = 'open',
-  Closed = 'closed',
-}
-
 type Props = StateProps & DispatchProps & WithRouterProps
 
 @ErrorHandling
 class OrganizationsIndex extends PureComponent<Props, State> {
   public state: State = {
-    modalState: ModalState.Closed,
     searchTerm: '',
   }
 
   public render() {
-    const {links, onCreateOrg, onDeleteOrg, orgs} = this.props
+    const {onDeleteOrg, orgs, children} = this.props
-    const {modalState, searchTerm} = this.state
+    const {searchTerm} = this.state
 
     return (
       <>
@@ -93,28 +83,18 @@ class OrganizationsIndex extends PureComponent<Props, State> {
             </FilterList>
           </Page.Contents>
         </Page>
-        <Overlay visible={modalState === ModalState.Open}>
+        {children}
-          <CreateOrgOverlay
-            link={links.orgs}
-            onCloseModal={this.handleCloseModal}
-            onCreateOrg={onCreateOrg}
-          />
-        </Overlay>
       </>
     )
   }
 
-  private handleOpenModal = (): void => {
-    this.setState({modalState: ModalState.Open})
-  }
-
-  private handleCloseModal = (): void => {
-    this.setState({modalState: ModalState.Closed})
-  }
-
   private handleChangeSearchTerm = (searchTerm: string): void => {
     this.setState({searchTerm})
   }
+
+  private handleOpenModal = () => {
+    this.props.router.push(`${this.props.location.pathname}/new`)
+  }
 }
 
 const mstp = (state): StateProps => {
@@ -127,11 +107,12 @@ const mstp = (state): StateProps => {
 }
 
 const mdtp: DispatchProps = {
-  onCreateOrg: createOrg,
   onDeleteOrg: deleteOrg,
 }
 
-export default connect<StateProps, DispatchProps>(
+export default withRouter(
-  mstp,
+  connect<StateProps, DispatchProps>(
-  mdtp
+    mstp,
-)(OrganizationsIndex)
+    mdtp
+  )(OrganizationsIndex)
+)