Merge pull request #11863 from influxdata/refactor/move-org-member-router

Use react router for members tab

ui/src/index.tsx

@@ -40,6 +40,7 @@ import GetMe from 'src/shared/containers/GetMe'
 import SourcesPage from 'src/sources/components/SourcesPage'
 import ConfigurationPage from 'src/configuration/components/ConfigurationPage'
 import OrgDashboardsIndex from 'src/organizations/containers/OrgDashboardsIndex'
+import OrgMembersIndex from 'src/organizations/containers/OrgMembersIndex'
 
 import OnboardingWizardPage from 'src/onboarding/containers/OnboardingWizardPage'
 
@@ -124,6 +125,10 @@ class Root extends PureComponent {
                                   path="dashboards_tab"
                                   component={OrgDashboardsIndex}
                                 />
+                                <Route
+                                  path="members_tab"
+                                  component={OrgMembersIndex}
+                                />
                                 <Route
                                   path=":tab"
                                   component={OrganizationView}

ui/src/organizations/containers/OrgMembersIndex.tsx

@@ -0,0 +1,100 @@
+import React, {Component} from 'react'
+import {withRouter, WithRouterProps} from 'react-router'
+import {connect} from 'react-redux'
+import {AppState} from 'src/types/v2'
+import {ResourceOwner} from '@influxdata/influx'
+
+// Components
+import OrganizationNavigation from 'src/organizations/components/OrganizationNavigation'
+import OrgHeader from 'src/organizations/containers/OrgHeader'
+import {Tabs} from 'src/clockface'
+import {Page} from 'src/pageLayout'
+import Members from 'src/organizations/components/Members'
+
+// Decorators
+import {ErrorHandling} from 'src/shared/decorators/errors'
+
+import {Organization} from '@influxdata/influx'
+
+// Components
+import {SpinnerContainer, TechnoSpinner} from 'src/clockface'
+import TabbedPageSection from 'src/shared/components/tabbed_page/TabbedPageSection'
+import GetOrgResources from 'src/organizations/components/GetOrgResources'
+
+import {client} from 'src/utils/api'
+
+interface RouterProps {
+  params: {
+    orgID: string
+  }
+}
+
+interface StateProps {
+  org: Organization
+}
+
+type Props = WithRouterProps & RouterProps & StateProps
+
+const getOwnersAndMembers = async (org: Organization) => {
+  const allMembers = await Promise.all([
+    client.organizations.owners(org.id),
+    client.organizations.members(org.id),
+  ])
+
+  return [].concat(...allMembers)
+}
+
+@ErrorHandling
+class OrgMembersIndex extends Component<Props> {
+  constructor(props) {
+    super(props)
+  }
+
+  public render() {
+    const {org} = this.props
+
+    return (
+      <Page titleTag={org.name}>
+        <OrgHeader orgID={org.id} />
+        <Page.Contents fullWidth={false} scrollable={true}>
+          <div className="col-xs-12">
+            <Tabs>
+              <OrganizationNavigation tab={'members_tab'} orgID={org.id} />
+              <Tabs.TabContents>
+                <TabbedPageSection
+                  id="org-view-tab--members"
+                  url="members_tab"
+                  title="Members"
+                >
+                  <GetOrgResources<ResourceOwner[]>
+                    organization={org}
+                    fetcher={getOwnersAndMembers}
+                  >
+                    {(members, loading) => (
+                      <SpinnerContainer
+                        loading={loading}
+                        spinnerComponent={<TechnoSpinner />}
+                      >
+                        <Members members={members} orgName={org.name} />
+                      </SpinnerContainer>
+                    )}
+                  </GetOrgResources>
+                </TabbedPageSection>
+              </Tabs.TabContents>
+            </Tabs>
+          </div>
+        </Page.Contents>
+      </Page>
+    )
+  }
+}
+
+const mstp = (state: AppState, props: Props) => {
+  const {orgs} = state
+  const org = orgs.find(o => o.id === props.params.orgID)
+  return {
+    org,
+  }
+}
+
+export default connect<StateProps>(mstp)(withRouter<{}>(OrgMembersIndex))

ui/src/organizations/containers/OrganizationView.tsx

@@ -5,7 +5,6 @@ import {connect} from 'react-redux'
 import _ from 'lodash'
 
 // APIs
-import {getDashboards} from 'src/organizations/apis'
 import {client} from 'src/utils/api'
 
 const getCollectors = async (org: Organization) => {
@@ -28,20 +27,17 @@ import * as notifyActions from 'src/shared/actions/notifications'
 import {Page} from 'src/pageLayout'
 import {SpinnerContainer, TechnoSpinner} from 'src/clockface'
 import TabbedPageSection from 'src/shared/components/tabbed_page/TabbedPageSection'
-import Members from 'src/organizations/components/Members'
 import Variables from 'src/organizations/components/Variables'
 import OrgTasksPage from 'src/organizations/components/OrgTasksPage'
 import Collectors from 'src/organizations/components/Collectors'
 import Scrapers from 'src/organizations/components/Scrapers'
 import GetOrgResources from 'src/organizations/components/GetOrgResources'
-import OrgDashboardIndex from 'src/organizations/components/Dashboards'
 import OrganizationTabs from 'src/organizations/components/OrganizationTabs'
 import OrgHeader from 'src/organizations/containers/OrgHeader'
 
 // Types
-import {AppState, Dashboard} from 'src/types/v2'
+import {AppState} from 'src/types/v2'
 import {
-  ResourceOwner,
   Bucket,
   Organization,
   Telegraf,
@@ -90,49 +86,6 @@ class OrganizationView extends PureComponent<Props> {
               activeTabUrl={params.tab}
               orgID={org.id}
             >
-              <TabbedPageSection
-                id="org-view-tab--members"
-                url="members_tab"
-                title="Members"
-              >
-                <GetOrgResources<ResourceOwner[]>
-                  organization={org}
-                  fetcher={this.getOwnersAndMembers}
-                >
-                  {(members, loading) => (
-                    <SpinnerContainer
-                      loading={loading}
-                      spinnerComponent={<TechnoSpinner />}
-                    >
-                      <Members members={members} orgName={org.name} />
-                    </SpinnerContainer>
-                  )}
-                </GetOrgResources>
-              </TabbedPageSection>
-              <TabbedPageSection
-                id="org-view-tab--dashboards"
-                url="dashboards_tab"
-                title="Dashboards"
-              >
-                <GetOrgResources<Dashboard[]>
-                  organization={org}
-                  fetcher={getDashboards}
-                >
-                  {(dashboards, loading, fetch) => (
-                    <SpinnerContainer
-                      loading={loading}
-                      spinnerComponent={<TechnoSpinner />}
-                    >
-                      <OrgDashboardIndex
-                        dashboards={dashboards}
-                        orgName={org.name}
-                        onChange={fetch}
-                        orgID={org.id}
-                      />
-                    </SpinnerContainer>
-                  )}
-                </GetOrgResources>
-              </TabbedPageSection>
               <TabbedPageSection
                 id="org-view-tab--tasks"
                 url="tasks_tab"
@@ -243,15 +196,6 @@ class OrganizationView extends PureComponent<Props> {
       </Page>
     )
   }
-
-  private getOwnersAndMembers = async (org: Organization) => {
-    const allMembers = await Promise.all([
-      client.organizations.owners(org.id),
-      client.organizations.members(org.id),
-    ])
-
-    return [].concat(...allMembers)
-  }
 }
 
 const mstp = (state: AppState, props: WithRouterProps) => {