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

This reverts commit 67857f2.

CHANGELOG.md

@@ -2,7 +2,6 @@
 
 ### 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/clientLibraries.test.ts

@@ -0,0 +1,68 @@
+describe('Client Libraries', () => {
+  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/client-libraries`)
+      })
+    })
+  })
+
+  it('open arduino popup', () => {
+    cy.getByTestID('client-libraries-cards--arduino').click()
+    cy.getByTestID('overlay--header').contains('Arduino Client Library')
+  })
+
+  it('open csharp popup', () => {
+    cy.getByTestID('client-libraries-cards--csharp').click()
+    cy.getByTestID('overlay--header').contains('C# Client Library')
+  })
+
+  it('open go popup', () => {
+    cy.getByTestID('client-libraries-cards--go').click()
+    cy.getByTestID('overlay--header').contains('GO Client Library')
+  })
+
+  it('open java popup', () => {
+    cy.getByTestID('client-libraries-cards--java').click()
+    cy.getByTestID('overlay--header').contains('Java Client Library')
+  })
+
+  it('open javascript popup', () => {
+    cy.getByTestID('client-libraries-cards--javascript-node').click()
+    cy.getByTestID('overlay--header').contains(
+      'JavaScript/Node.js Client Library'
+    )
+  })
+
+  it('open Kotlin popup', () => {
+    cy.getByTestID('client-libraries-cards--kotlin').click()
+    cy.getByTestID('overlay--header').contains('Kotlin Client Library')
+  })
+
+  it('open php popup', () => {
+    cy.getByTestID('client-libraries-cards--php').click()
+    cy.getByTestID('overlay--header').contains('PHP Client Library')
+  })
+
+  it('open python popup', () => {
+    cy.getByTestID('client-libraries-cards--python').click()
+    cy.getByTestID('overlay--header').contains('Python Client Library')
+  })
+
+  it('open ruby popup', () => {
+    cy.getByTestID('client-libraries-cards--ruby').click()
+    cy.getByTestID('overlay--header').contains('Ruby Client Library')
+  })
+
+  it('open scala popup', () => {
+    cy.getByTestID('client-libraries-cards--scala').click()
+    cy.getByTestID('overlay--header').contains('Scala Client Library')
+  })
+})

ui/cypress/e2e/explorer.test.ts

@@ -64,12 +64,7 @@ describe('DataExplorer', () => {
         cy.get('.view-lines').type(fluxCode)
       })
       cy.contains('Submit').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('nav-item-load-data').click()
       cy.getByTestID('bucket--card--name _tasks').click()
       cy.getByTestID('query-builder').should('exist')
     })

ui/global.d.ts

@@ -10,21 +10,11 @@ declare global {
   interface Window {
     monaco: MonacoType
   }
-  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
-  }
+declare module "*.png" {
+   const value: any;
+   export = value;
 }
 
 window.monaco = window.monaco || {}

ui/index.d.ts

@@ -1425,12 +1425,7 @@ declare module 'src/external/dygraph' {
 
 // Allow typescript to recognize json files
 
-declare module '*.json' {
-  const value: any
-  export default value
-}
-
-declare module '*.md' {
-  const value: string
-  export default value
+declare module "*.json" {
+    const value: any;
+    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.1",
+    "raw-loader": "^4.0.0",
     "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 maxWidth={830}>
+      <Overlay.Container>
         <Overlay.Header
           title={description}
           onDismiss={this.handleDismiss}

ui/src/authorizations/containers/TokensIndex.tsx

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

ui/src/buckets/containers/BucketsIndex.tsx

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