feat(ui): new load data page (#19351)

* Revert "Revert "feat(ui): redesign load data page (#19246)" (#19336)"

This reverts commit 0111f02.

* fix: guard against no tokens or buckets

* fix: typo

* refactor: name sources page titles properly

* fix: avoid referencing image asset inline

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ### Features
 
+1. [19246](https://github.com/influxdata/influxdb/pull/19246): Redesign load data page to increase discovery and ease of use
 1. [19334](https://github.com/influxdata/influxdb/pull/19334): Add --active-config flag to influx to set config for single command
 
 ### Bug Fixes

ui/cypress/e2e/explorer.test.ts

@@ -64,7 +64,12 @@ describe('DataExplorer', () => {
         cy.get('.view-lines').type(fluxCode)
       })
       cy.contains('Submit').click()
-      cy.getByTestID('nav-item-load-data').click()
+      cy.get('.cf-tree-nav--toggle').click()
+      // Can't use the testID to select this nav item because Clockface is silly and uses the same testID twice
+      // Issue: https://github.com/influxdata/clockface/issues/539
+      cy.get('.cf-tree-nav--sub-item-label')
+        .contains('Buckets')
+        .click()
       cy.getByTestID('bucket--card--name _tasks').click()
       cy.getByTestID('query-builder').should('exist')
     })

ui/cypress/e2e/loadDataSources.test.ts

@@ -0,0 +1,50 @@
+describe('Load Data Sources', () => {
+  beforeEach(() => {
+    cy.flush()
+
+    cy.signin().then(({body}) => {
+      const {
+        org: {id},
+      } = body
+      cy.wrap(body.org).as('org')
+
+      cy.fixture('routes').then(({orgs}) => {
+        cy.visit(`${orgs}/${id}/load-data/sources`)
+      })
+    })
+  })
+
+  it('navigate to Client Library details view and render it with essentials', () => {
+    cy.getByTestID('write-data--section client-libraries').within(() => {
+      cy.getByTestID('square-grid').within(() => {
+        cy.getByTestIDSubStr('load-data-item')
+          .first()
+          .click()
+      })
+    })
+
+    const contentContainer = cy.getByTestID('load-data-details-content')
+    contentContainer.should('exist')
+    contentContainer.children().should('exist')
+
+    const logoElement = cy.getByTestID('load-data-details-thumb')
+    logoElement.should('exist')
+  })
+
+  it('navigate to Telegraf Plugin details view and render it with essentials', () => {
+    cy.getByTestID('write-data--section telegraf-plugins').within(() => {
+      cy.getByTestID('square-grid').within(() => {
+        cy.getByTestIDSubStr('load-data-item')
+          .first()
+          .click()
+      })
+    })
+
+    const contentContainer = cy.getByTestID('load-data-details-content')
+    contentContainer.should('exist')
+    contentContainer.children().should('exist')
+
+    const logoElement = cy.getByTestID('load-data-details-thumb')
+    logoElement.should('exist')
+  })
+})

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