feat(ui): redesign load data page

ui/global.d.ts

@@ -10,11 +10,21 @@ declare global {
   interface Window {
     monaco: MonacoType
   }
-}
+  declare module '*.png' {
+    const value: any
+    export = value
+  }
 
-declare module "*.png" {
-   const value: any;
-   export = value;
+  declare module '*.md' {
+    const value: string
+    export default value
+  }
+
+  declare module '*.svg' {
+    export const ReactComponent: SFC<SVGProps<SVGSVGElement>>
+    const src: string
+    export default src
+  }
 }
 
 window.monaco = window.monaco || {}

ui/index.d.ts

@@ -1425,7 +1425,12 @@ declare module 'src/external/dygraph' {
 
 // Allow typescript to recognize json files
 
-declare module "*.json" {
-    const value: any;
-    export default value;
+declare module '*.json' {
+  const value: any
+  export default value
+}
+
+declare module '*.md' {
+  const value: string
+  export default value
 }

ui/package.json

@@ -115,7 +115,7 @@
     "mutation-observer": "^1.0.3",
     "optimize-css-assets-webpack-plugin": "^5.0.3",
     "prettier": "^1.19.1",
-    "raw-loader": "^4.0.0",
+    "raw-loader": "^4.0.1",
     "sass": "^1.22.7",
     "sass-loader": "^7.1.0",
     "source-map-loader": "^0.2.4",

ui/src/authorizations/components/ViewTokenOverlay.tsx

@@ -37,7 +37,7 @@ export default class ViewTokenOverlay extends PureComponent<Props> {
     }
 
     return (
-      <Overlay.Container>
+      <Overlay.Container maxWidth={830}>
         <Overlay.Header
           title={description}
           onDismiss={this.handleDismiss}

ui/src/authorizations/containers/TokensIndex.tsx

@@ -1,6 +1,5 @@
 // Libraries
 import React, {Component} from 'react'
-import {connect, ConnectedProps} from 'react-redux'
 import {Switch, Route} from 'react-router-dom'
 
 // Components
@@ -17,28 +16,22 @@ import {
 
 // Utils
 import {pageTitleSuffixer} from 'src/shared/utils/pageTitles'
-import {getOrg} from 'src/organizations/selectors'
 
 // Types
-import {AppState, ResourceType} from 'src/types'
+import {ResourceType} from 'src/types'
 
 import {ORGS, ORG_ID, TOKENS} from 'src/shared/constants/routes'
 
 const tokensPath = `/${ORGS}/${ORG_ID}/load-data/${TOKENS}/generate`
 
-type ReduxProps = ConnectedProps<typeof connector>
-type Props = ReduxProps
-
 @ErrorHandling
-class TokensIndex extends Component<Props> {
+class TokensIndex extends Component {
   public render() {
-    const {org} = this.props
-
     return (
       <>
         <Page titleTag={pageTitleSuffixer(['Tokens', 'Load Data'])}>
           <LoadDataHeader />
-          <LoadDataTabbedPage activeTab="tokens" orgID={org.id}>
+          <LoadDataTabbedPage activeTab="tokens">
             <GetResources resources={[ResourceType.Authorizations]}>
               <TokensTab />
             </GetResources>
@@ -59,8 +52,4 @@ class TokensIndex extends Component<Props> {
   }
 }
 
-const mstp = (state: AppState) => ({org: getOrg(state)})
-
-const connector = connect(mstp)
-
-export default connector(TokensIndex)
+export default TokensIndex

ui/src/buckets/containers/BucketsIndex.tsx

@@ -1,6 +1,5 @@
 // Libraries
 import React, {Component} from 'react'
-import {connect} from 'react-redux'
 import {Switch, Route} from 'react-router-dom'
 
 // Components
@@ -21,31 +20,24 @@ import {Page} from '@influxdata/clockface'
 
 // Utils
 import {pageTitleSuffixer} from 'src/shared/utils/pageTitles'
-import {getOrg} from 'src/organizations/selectors'
 
 // Constants
 import {ORGS, ORG_ID, BUCKETS, BUCKET_ID} from 'src/shared/constants/routes'
 
 // Types
-import {AppState, Organization, ResourceType} from 'src/types'
-
-interface StateProps {
-  org: Organization
-}
+import {ResourceType} from 'src/types'
 
 const bucketsPath = `/${ORGS}/${ORG_ID}/load-data/${BUCKETS}/${BUCKET_ID}`
 
 @ErrorHandling
-class BucketsIndex extends Component<StateProps> {
+class BucketsIndex extends Component {
   public render() {
-    const {org} = this.props
-
     return (
       <>
         <Page titleTag={pageTitleSuffixer(['Buckets', 'Load Data'])}>
           <LimitChecker>
             <LoadDataHeader />
-            <LoadDataTabbedPage activeTab="buckets" orgID={org.id}>
+            <LoadDataTabbedPage activeTab="buckets">
               <GetResources
                 resources={[
                   ResourceType.Buckets,
@@ -88,10 +80,4 @@ class BucketsIndex extends Component<StateProps> {
   }
 }
 
-const mstp = (state: AppState) => {
-  const org = getOrg(state)
-
-  return {org}
-}
-
-export default connect<StateProps, {}, {}>(mstp, null)(BucketsIndex)
+export default BucketsIndex