feat(ui): autofilling the organization in the client examples (#15983)

influxdata · Nov 19, 2019 · 388df3e · 388df3e
1 parent 4d5ac08
commit 388df3e
Show file tree

Hide file tree

Showing 5 changed files with 196 additions and 10 deletions.
diff --git a/ui/src/clientLibraries/components/ClientCSharpOverlay.tsx b/ui/src/clientLibraries/components/ClientCSharpOverlay.tsx
@@ -1,12 +1,24 @@
 // Libraries
 import React, {FunctionComponent} from 'react'
+import {connect} from 'react-redux'
+
 // Components
 import ClientLibraryOverlay from 'src/clientLibraries/components/ClientLibraryOverlay'
 import TemplatedCodeSnippet from 'src/shared/components/TemplatedCodeSnippet'
+
 // Constants
 import {clientCSharpLibrary} from 'src/clientLibraries/constants'
 
-const ClientCSharpOverlay: FunctionComponent<{}> = () => {
+// Types
+import {AppState} from 'src/types'
+
+interface StateProps {
+  org: string
+}
+
+type Props = StateProps
+
+const ClientCSharpOverlay: FunctionComponent<Props> = props => {
   const {
     name,
     url,
@@ -20,6 +32,9 @@ const ClientCSharpOverlay: FunctionComponent<{}> = () => {
     writingDataPocoCodeSnippet,
     pocoClassCodeSnippet,
   } = clientCSharpLibrary
+  const {org} = props
+  const server = window.location.origin
+
   return (
     <ClientLibraryOverlay title={`${name} Client Library`}>
       <p>
@@ -52,6 +67,9 @@ const ClientCSharpOverlay: FunctionComponent<{}> = () => {
           server: 'basepath',
           token: 'token',
         }}
+        values={{
+          server,
+        }}
       />
       <h5>Write Data</h5>
       <p>Option 1: Use InfluxDB Line Protocol to write data</p>
@@ -62,6 +80,9 @@ const ClientCSharpOverlay: FunctionComponent<{}> = () => {
           org: 'orgID',
           bucket: 'bucketID',
         }}
+        values={{
+          org,
+        }}
       />
       <p>Option 2: Use a Data Point to write data</p>
       <TemplatedCodeSnippet
@@ -71,6 +92,9 @@ const ClientCSharpOverlay: FunctionComponent<{}> = () => {
           org: 'orgID',
           bucket: 'bucketID',
         }}
+        values={{
+          org,
+        }}
       />
       <p>Option 3: Use POCO and corresponding Class to write data</p>
       <TemplatedCodeSnippet
@@ -80,6 +104,9 @@ const ClientCSharpOverlay: FunctionComponent<{}> = () => {
           org: 'orgID',
           bucket: 'bucketID',
         }}
+        values={{
+          org,
+        }}
       />
       <TemplatedCodeSnippet template={pocoClassCodeSnippet} label="C# Code" />
       <h5>Execute a Flux query</h5>
@@ -90,9 +117,24 @@ const ClientCSharpOverlay: FunctionComponent<{}> = () => {
           org: 'orgID',
           bucket: 'bucketID',
         }}
+        values={{
+          org,
+        }}
       />
     </ClientLibraryOverlay>
   )
 }
 
-export default ClientCSharpOverlay
+const mstp = (state: AppState): StateProps => {
+  const org = state.orgs.org.id
+
+  return {
+    org,
+  }
+}
+
+export {ClientCSharpOverlay}
+export default connect<StateProps, {}, Props>(
+  mstp,
+  null
+)(ClientCSharpOverlay)
diff --git a/ui/src/clientLibraries/components/ClientGoOverlay.tsx b/ui/src/clientLibraries/components/ClientGoOverlay.tsx
@@ -1,5 +1,6 @@
 // Libraries
 import React, {FunctionComponent} from 'react'
+import {connect} from 'react-redux'
 
 // Components
 import ClientLibraryOverlay from 'src/clientLibraries/components/ClientLibraryOverlay'
@@ -8,13 +9,25 @@ import TemplatedCodeSnippet from 'src/shared/components/TemplatedCodeSnippet'
 // Constants
 import {clientGoLibrary} from 'src/clientLibraries/constants'
 
-const ClientGoOverlay: FunctionComponent<{}> = () => {
+// Types
+import {AppState} from 'src/types'
+
+interface StateProps {
+  org: string
+}
+
+type Props = StateProps
+
+const ClientGoOverlay: FunctionComponent<Props> = props => {
   const {
     name,
     url,
     initializeClientCodeSnippet,
     writeDataCodeSnippet,
   } = clientGoLibrary
+  const {org} = props
+  const server = window.location.origin
+
   return (
     <ClientLibraryOverlay title={`${name} Client Library`}>
       <p>
@@ -31,6 +44,9 @@ const ClientGoOverlay: FunctionComponent<{}> = () => {
           token: 'myToken',
           server: 'myHTTPInfluxAddress',
         }}
+        values={{
+          server,
+        }}
       />
       <h5>Write Data</h5>
       <TemplatedCodeSnippet
@@ -40,9 +56,24 @@ const ClientGoOverlay: FunctionComponent<{}> = () => {
           bucket: 'my-awesome-bucket',
           org: 'my-very-awesome-org',
         }}
+        values={{
+          org,
+        }}
       />
     </ClientLibraryOverlay>
   )
 }
 
-export default ClientGoOverlay
+const mstp = (state: AppState): StateProps => {
+  const org = state.orgs.org.id
+
+  return {
+    org,
+  }
+}
+
+export {ClientGoOverlay}
+export default connect<StateProps, {}, Props>(
+  mstp,
+  null
+)(ClientGoOverlay)
diff --git a/ui/src/clientLibraries/components/ClientJSOverlay.tsx b/ui/src/clientLibraries/components/ClientJSOverlay.tsx
@@ -1,5 +1,6 @@
 // Libraries
 import React, {FunctionComponent} from 'react'
+import {connect} from 'react-redux'
 
 // Components
 import ClientLibraryOverlay from 'src/clientLibraries/components/ClientLibraryOverlay'
@@ -8,14 +9,25 @@ import TemplatedCodeSnippet from 'src/shared/components/TemplatedCodeSnippet'
 // Constants
 import {clientJSLibrary} from 'src/clientLibraries/constants'
 
-const ClientJSOverlay: FunctionComponent<{}> = () => {
+// Types
+import {AppState} from 'src/types'
+
+interface StateProps {
+  org: string
+}
+
+type Props = StateProps
+
+const ClientJSOverlay: FunctionComponent<Props> = props => {
   const {
     name,
     url,
     initializeClientCodeSnippet,
     executeQueryCodeSnippet,
     writingDataLineProtocolCodeSnippet,
   } = clientJSLibrary
+  const {org} = props
+  const server = window.location.origin
 
   return (
     <ClientLibraryOverlay title={`${name} Client Library`}>
@@ -34,6 +46,9 @@ const ClientJSOverlay: FunctionComponent<{}> = () => {
           server: 'server',
           token: 'token',
         }}
+        values={{
+          server,
+        }}
       />
       <h5>Write Data</h5>
       <TemplatedCodeSnippet
@@ -43,6 +58,9 @@ const ClientJSOverlay: FunctionComponent<{}> = () => {
           org: 'orgID',
           bucket: 'bucketID',
         }}
+        values={{
+          org,
+        }}
       />
       <h5>Execute a Flux query</h5>
       <TemplatedCodeSnippet
@@ -51,9 +69,24 @@ const ClientJSOverlay: FunctionComponent<{}> = () => {
         defaults={{
           org: 'orgID',
         }}
+        values={{
+          org,
+        }}
       />
     </ClientLibraryOverlay>
   )
 }
 
-export default ClientJSOverlay
+const mstp = (state: AppState): StateProps => {
+  const org = state.orgs.org.id
+
+  return {
+    org,
+  }
+}
+
+export {ClientJSOverlay}
+export default connect<StateProps, {}, Props>(
+  mstp,
+  null
+)(ClientJSOverlay)
diff --git a/ui/src/clientLibraries/components/ClientJavaOverlay.tsx b/ui/src/clientLibraries/components/ClientJavaOverlay.tsx
@@ -1,12 +1,24 @@
 // Libraries
 import React, {FunctionComponent} from 'react'
+import {connect} from 'react-redux'
+
 // Components
 import ClientLibraryOverlay from 'src/clientLibraries/components/ClientLibraryOverlay'
 import TemplatedCodeSnippet from 'src/shared/components/TemplatedCodeSnippet'
+
 // Constants
 import {clientJavaLibrary} from 'src/clientLibraries/constants'
 
-const ClientJavaOverlay: FunctionComponent<{}> = () => {
+// Types
+import {AppState} from 'src/types'
+
+interface StateProps {
+  org: string
+}
+
+type Props = StateProps
+
+const ClientJavaOverlay: FunctionComponent<Props> = props => {
   const {
     name,
     url,
@@ -19,6 +31,8 @@ const ClientJavaOverlay: FunctionComponent<{}> = () => {
     writingDataPojoCodeSnippet,
     pojoClassCodeSnippet,
   } = clientJavaLibrary
+  const {org} = props
+  const server = window.location.origin
 
   return (
     <ClientLibraryOverlay title={`${name} Client Library`}>
@@ -44,6 +58,9 @@ const ClientJavaOverlay: FunctionComponent<{}> = () => {
           server: 'serverUrl',
           token: 'token',
         }}
+        values={{
+          server,
+        }}
       />
       <h5>Write Data</h5>
       <p>Option 1: Use InfluxDB Line Protocol to write data</p>
@@ -54,6 +71,9 @@ const ClientJavaOverlay: FunctionComponent<{}> = () => {
           bucket: 'bucketID',
           org: 'orgID',
         }}
+        values={{
+          org,
+        }}
       />
       <p>Option 2: Use a Data Point to write data</p>
       <TemplatedCodeSnippet
@@ -63,6 +83,9 @@ const ClientJavaOverlay: FunctionComponent<{}> = () => {
           bucket: 'bucketID',
           org: 'orgID',
         }}
+        values={{
+          org,
+        }}
       />
       <p>Option 3: Use POJO and corresponding class to write data</p>
       <TemplatedCodeSnippet
@@ -72,6 +95,9 @@ const ClientJavaOverlay: FunctionComponent<{}> = () => {
           bucket: 'bucketID',
           org: 'orgID',
         }}
+        values={{
+          org,
+        }}
       />
       <TemplatedCodeSnippet template={pojoClassCodeSnippet} label="Java Code" />
       <h5>Execute a Flux query</h5>
@@ -82,9 +108,24 @@ const ClientJavaOverlay: FunctionComponent<{}> = () => {
           bucket: 'my_bucket',
           org: 'myorgid',
         }}
+        values={{
+          org,
+        }}
       />
     </ClientLibraryOverlay>
   )
 }
 
-export default ClientJavaOverlay
+const mstp = (state: AppState): StateProps => {
+  const org = state.orgs.org.id
+
+  return {
+    org,
+  }
+}
+
+export {ClientJavaOverlay}
+export default connect<StateProps, {}, Props>(
+  mstp,
+  null
+)(ClientJavaOverlay)