Add tokens to former org view

ui/src/authorizations/actions/index.ts

@@ -81,7 +81,7 @@ export const getAuthorizations = () => async (dispatch: Dispatch<Action>) => {
   try {
     dispatch(setAuthorizations(RemoteDataState.Loading))
 
-    const authorizations = (await client.authorizations.getAll()) as Authorization[]
+    const authorizations = await client.authorizations.getAll()
 
     dispatch(setAuthorizations(RemoteDataState.Done, authorizations))
   } catch (e) {

ui/src/authorizations/components/TokenList.tsx

@@ -4,19 +4,15 @@ import React, {PureComponent} from 'react'
 // Components
 import {EmptyState} from '@influxdata/clockface'
 import {IndexList, Overlay} from 'src/clockface'
-import TokenRow from 'src/me/components/account/TokenRow'
+import TokenRow from 'src/authorizations/components/TokenRow'
+import ViewTokenOverlay from 'src/authorizations/components/ViewTokenOverlay'
 
 // Types
 import {Authorization} from '@influxdata/influx'
 import {ComponentSize} from '@influxdata/clockface'
-import ViewTokenOverlay from './ViewTokenOverlay'
-
-// Actions
-import {NotificationAction} from 'src/types'
 
 interface Props {
   auths: Authorization[]
-  onNotify: NotificationAction
   searchTerm: string
 }
 
@@ -35,7 +31,7 @@ export default class TokenList extends PureComponent<Props, State> {
   }
 
   public render() {
-    const {auths, onNotify} = this.props
+    const {auths} = this.props
     const {isTokenOverlayVisible, authInView} = this.state
 
     return (
@@ -59,7 +55,6 @@ export default class TokenList extends PureComponent<Props, State> {
         </IndexList>
         <Overlay visible={isTokenOverlayVisible}>
           <ViewTokenOverlay
-            onNotify={onNotify}
             auth={authInView}
             onDismissOverlay={this.handleDismissOverlay}
           />

ui/src/authorizations/components/TokensTab.tsx

@@ -4,37 +4,29 @@ import {connect} from 'react-redux'
 
 // Components
 import {Input} from '@influxdata/clockface'
-import TokenList from 'src/me/components/account/TokensList'
+import TokenList from 'src/authorizations/components/TokenList'
 import FilterList from 'src/shared/components/Filter'
 import TabbedPageHeader from 'src/shared/components/tabbed_page/TabbedPageHeader'
 
-// Actions
-import * as notifyActions from 'src/shared/actions/notifications'
-
 // Types
 import {Authorization} from '@influxdata/influx'
 import {IconFont} from '@influxdata/clockface'
-
+import {AppState} from 'src/types'
-interface State {
-  searchTerm: string
-}
 
 enum AuthSearchKeys {
   Description = 'description',
   Status = 'status',
 }
 
+interface State {
+  searchTerm: string
+}
+
 interface StateProps {
   tokens: Authorization[]
 }
 
-interface DispatchProps {
+class TokensTab extends PureComponent<StateProps, State> {
-  notify: typeof notifyActions.notify
-}
-
-type Props = StateProps & DispatchProps
-
-export class Tokens extends PureComponent<Props, State> {
   constructor(props) {
     super(props)
     this.state = {
@@ -44,7 +36,7 @@ export class Tokens extends PureComponent<Props, State> {
 
   public render() {
     const {searchTerm} = this.state
-    const {tokens, notify} = this.props
+    const {tokens} = this.props
 
     return (
       <>
@@ -63,11 +55,7 @@ export class Tokens extends PureComponent<Props, State> {
           searchKeys={this.searchKeys}
         >
           {filteredAuths => (
-            <TokenList
+            <TokenList auths={filteredAuths} searchTerm={searchTerm} />
-              onNotify={notify}
-              auths={filteredAuths}
-              searchTerm={searchTerm}
-            />
           )}
         </FilterList>
       </>
@@ -83,17 +71,9 @@ export class Tokens extends PureComponent<Props, State> {
   }
 }
 
-const mdtp = {
+const mstp = ({tokens}: AppState) => ({tokens: tokens.list})
-  notify: notifyActions.notify,
-}
 
-const mstp = ({tokens}) => {
+export default connect<StateProps, {}, {}>(
-  return {
-    tokens: tokens.list,
-  }
-}
-
-export default connect<StateProps, DispatchProps, {}>(
   mstp,
-  mdtp
+  null
-)(Tokens)
+)(TokensTab)

ui/src/authorizations/components/ViewTokenOverlay.test.tsx

@@ -3,7 +3,7 @@ import React from 'react'
 import {shallow} from 'enzyme'
 
 // Components
-import ViewTokenOverlay from 'src/me/components/account/ViewTokenOverlay'
+import ViewTokenOverlay from 'src/authorizations/components/ViewTokenOverlay'
 
 // Fixtures
 import {authorization as auth} from 'src/authorizations/apis/__mocks__/data'

ui/src/authorizations/components/ViewTokenOverlay.tsx

@@ -13,11 +13,7 @@ import CodeSnippet from 'src/shared/components/CodeSnippet'
 // Types
 import {Authorization, Permission} from '@influxdata/influx'
 
-// Actions
-import {NotificationAction} from 'src/types'
-
 interface Props {
-  onNotify: NotificationAction
   auth: Authorization
   onDismissOverlay: () => void
 }

ui/src/authorizations/containers/TokensIndex.tsx

@@ -0,0 +1,61 @@
+// Libraries
+import React, {Component} from 'react'
+import {connect} from 'react-redux'
+
+// Components
+import {ErrorHandling} from 'src/shared/decorators/errors'
+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 TabbedPageSection from 'src/shared/components/tabbed_page/TabbedPageSection'
+import GetResources, {
+  ResourceTypes,
+} from 'src/configuration/components/GetResources'
+import TokensTab from 'src/authorizations/components/TokensTab'
+
+// Types
+import {Organization} from '@influxdata/influx'
+import {AppState} from 'src/types'
+
+interface StateProps {
+  org: Organization
+}
+
+@ErrorHandling
+class TokensIndex extends Component<StateProps> {
+  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="tokens" orgID={org.id} />
+              <Tabs.TabContents>
+                <TabbedPageSection
+                  id="org-view-tab--buckets"
+                  url="buckets"
+                  title="Buckets"
+                >
+                  <GetResources resource={ResourceTypes.Authorizations}>
+                    <TokensTab />
+                  </GetResources>
+                </TabbedPageSection>
+              </Tabs.TabContents>
+            </Tabs>
+          </div>
+        </Page.Contents>
+      </Page>
+    )
+  }
+}
+
+const mstp = ({orgs: {org}}: AppState) => ({org})
+
+export default connect<StateProps, {}, {}>(
+  mstp,
+  null
+)(TokensIndex)

ui/src/configuration/components/ConfigurationPage.tsx

@@ -10,7 +10,6 @@ import GetResources, {
 import TabbedPageSection from 'src/shared/components/tabbed_page/TabbedPageSection'
 import TabbedPage from 'src/shared/components/tabbed_page/TabbedPage'
 import Settings from 'src/me/components/account/Settings'
-import Tokens from 'src/me/components/account/Tokens'
 import Telegrafs from 'src/configuration/components/Telegrafs'
 import Variables from 'src/configuration/components/Variables'
 import Scrapers from 'src/configuration/components/Scrapers'
@@ -81,13 +80,6 @@ class ConfigurationPage extends Component<Props> {
                       <Variables />
                     </GetResources>
                   </TabbedPageSection>
-                  <TabbedPageSection
-                    id="tokens_tab"
-                    url="tokens_tab"
-                    title="Tokens"
-                  >
-                    <Tokens />
-                  </TabbedPageSection>
                   <TabbedPageSection
                     id="settings_tab"
                     url="settings_tab"

ui/src/configuration/components/GetResources.tsx

@@ -16,7 +16,6 @@ import {AppState} from 'src/types'
 import {LabelsState} from 'src/labels/reducers'
 import {BucketsState} from 'src/buckets/reducers'
 import {TelegrafsState} from 'src/telegrafs/reducers'
-import {Organization} from '@influxdata/influx'
 import {ScrapersState} from 'src/scrapers/reducers'
 
 // Decorators
@@ -28,7 +27,6 @@ import {VariablesState} from 'src/variables/reducers'
 import {DashboardsState} from 'src/dashboards/reducers/dashboards'
 
 interface StateProps {
-  org: Organization
   labels: LabelsState
   buckets: BucketsState
   telegrafs: TelegrafsState
@@ -117,7 +115,6 @@ class GetResources extends PureComponent<Props, StateProps> {
 }
 
 const mstp = ({
-  orgs,
   labels,
   buckets,
   telegrafs,
@@ -126,8 +123,6 @@ const mstp = ({
   tokens,
   dashboards,
 }: AppState): StateProps => {
-  const org = orgs[0]
-
   return {
     labels,
     buckets,
@@ -136,7 +131,6 @@ const mstp = ({
     variables,
     scrapers,
     tokens,
-    org,
   }
 }
 

ui/src/index.tsx

@@ -52,6 +52,7 @@ import OrgScrapersIndex from 'src/organizations/containers/OrgScrapersIndex'
 import VariableImportOverlay from 'src/variables/components/VariableImportOverlay'
 import OrgVariableExportOverlay from 'src/organizations/components/OrgVariableExportOverlay'
 import SetOrg from 'src/shared/containers/SetOrg'
+import TokensIndex from 'src/authorizations/containers/TokensIndex'
 
 // Actions
 import {disablePresentationMode} from 'src/shared/actions/app'
@@ -178,6 +179,7 @@ class Root extends PureComponent {
                             <IndexRoute component={OrgMembersIndex} />
                           </Route>
                           <Route path="buckets" component={BucketsIndex} />
+                          <Route path="tokens" component={TokensIndex} />
                           <Route path="members" component={OrgMembersIndex} />
                           <Route
                             path="telegrafs"

ui/src/me/components/account/Account.tsx

@@ -7,7 +7,6 @@ import {Page} from 'src/pageLayout'
 import TabbedPage from 'src/shared/components/tabbed_page/TabbedPage'
 import TabbedPageSection from 'src/shared/components/tabbed_page/TabbedPageSection'
 import Settings from 'src/me/components/account/Settings'
-import Tokens from 'src/me/components/account/Tokens'
 
 export enum Tabs {
   Settings = 'settings',
@@ -38,13 +37,6 @@ export default class Account extends PureComponent<WithRouterProps> {
             >
               <Settings />
             </TabbedPageSection>
-            <TabbedPageSection
-              title="My Tokens"
-              id={Tabs.Tokens}
-              url={Tabs.Tokens}
-            >
-              <Tokens />
-            </TabbedPageSection>
           </TabbedPage>
         </Page.Contents>
       </Page>

ui/src/organizations/components/OrganizationNavigation.tsx

@@ -61,6 +61,12 @@ class OrganizationNavigation extends PureComponent<Props> {
           url={`${route}/templates`}
           active={'templates' === tab}
         />
+        <Tabs.Tab
+          title="Tokens"
+          id="tokens"
+          url={`${route}/tokens`}
+          active={'tokens' === tab}
+        />
       </Tabs.Nav>
     )
   }