feat(ui): Adding templating to code snippets (#15671)

influxdata · Oct 31, 2019 · e9e0dfc · e9e0dfc
1 parent 3b5d0a4
commit e9e0dfc
Show file tree

Hide file tree

Showing 8 changed files with 370 additions and 100 deletions.
diff --git a/ui/src/clientLibraries/components/ClientCSharpOverlay.tsx b/ui/src/clientLibraries/components/ClientCSharpOverlay.tsx
@@ -2,7 +2,7 @@
 import React, {FunctionComponent} from 'react'
 // Components
 import ClientLibraryOverlay from 'src/clientLibraries/components/ClientLibraryOverlay'
-import CodeSnippet from 'src/shared/components/CodeSnippet'
+import TemplatedCodeSnippet from 'src/shared/components/TemplatedCodeSnippet'
 // Constants
 import {clientCSharpLibrary} from 'src/clientLibraries/constants'
 
@@ -30,32 +30,67 @@ const ClientCSharpOverlay: FunctionComponent<{}> = () => {
       </p>
       <h5>Install Package</h5>
       <p>Package Manager</p>
-      <CodeSnippet
-        copyText={installingPackageManagerCodeSnippet}
+      <TemplatedCodeSnippet
+        template={installingPackageManagerCodeSnippet}
         label="Code"
       />
       <p>.NET CLI</p>
-      <CodeSnippet
-        copyText={installingPackageDotNetCLICodeSnippet}
+      <TemplatedCodeSnippet
+        template={installingPackageDotNetCLICodeSnippet}
         label="Code"
       />
       <p>Package Reference</p>
-      <CodeSnippet copyText={packageReferenceCodeSnippet} label="Code" />
+      <TemplatedCodeSnippet
+        template={packageReferenceCodeSnippet}
+        label="Code"
+      />
       <h5>Initialize the Client</h5>
-      <CodeSnippet copyText={initializeClientCodeSnippet} label="C# Code" />
+      <TemplatedCodeSnippet
+        template={initializeClientCodeSnippet}
+        label="C# Code"
+        defaults={{
+          server: 'basepath',
+          token: 'token',
+        }}
+      />
       <h5>Write Data</h5>
       <p>Option 1: Use InfluxDB Line Protocol to write data</p>
-      <CodeSnippet
-        copyText={writingDataLineProtocolCodeSnippet}
+      <TemplatedCodeSnippet
+        template={writingDataLineProtocolCodeSnippet}
         label="C# Code"
+        defaults={{
+          org: 'orgID',
+          bucket: 'bucketID',
+        }}
       />
       <p>Option 2: Use a Data Point to write data</p>
-      <CodeSnippet copyText={writingDataDataPointCodeSnippet} label="C# Code" />
+      <TemplatedCodeSnippet
+        template={writingDataDataPointCodeSnippet}
+        label="C# Code"
+        defaults={{
+          org: 'orgID',
+          bucket: 'bucketID',
+        }}
+      />
       <p>Option 3: Use POCO and corresponding Class to write data</p>
-      <CodeSnippet copyText={writingDataPocoCodeSnippet} label="C# Code" />
-      <CodeSnippet copyText={pocoClassCodeSnippet} label="C# Code" />
+      <TemplatedCodeSnippet
+        template={writingDataPocoCodeSnippet}
+        label="C# Code"
+        defaults={{
+          org: 'orgID',
+          bucket: 'bucketID',
+        }}
+      />
+      <TemplatedCodeSnippet template={pocoClassCodeSnippet} label="C# Code" />
       <h5>Execute a Flux query</h5>
-      <CodeSnippet copyText={executeQueryCodeSnippet} label="C# Code" />
+      <TemplatedCodeSnippet
+        template={executeQueryCodeSnippet}
+        label="C# Code"
+        defaults={{
+          org: 'orgID',
+          bucket: 'bucketID',
+        }}
+      />
     </ClientLibraryOverlay>
   )
 }

diff --git a/ui/src/clientLibraries/components/ClientGoOverlay.tsx b/ui/src/clientLibraries/components/ClientGoOverlay.tsx
@@ -3,7 +3,7 @@ import React, {FunctionComponent} from 'react'
 
 // Components
 import ClientLibraryOverlay from 'src/clientLibraries/components/ClientLibraryOverlay'
-import CodeSnippet from 'src/shared/components/CodeSnippet'
+import TemplatedCodeSnippet from 'src/shared/components/TemplatedCodeSnippet'
 
 // Constants
 import {clientGoLibrary} from 'src/clientLibraries/constants'
@@ -24,9 +24,23 @@ const ClientGoOverlay: FunctionComponent<{}> = () => {
         </a>
       </p>
       <h5>Initialize the Client</h5>
-      <CodeSnippet copyText={initializeClientCodeSnippet} label="Go Code" />
+      <TemplatedCodeSnippet
+        template={initializeClientCodeSnippet}
+        label="Go Code"
+        defaults={{
+          token: 'myToken',
+          server: 'myHTTPInfluxAddress',
+        }}
+      />
       <h5>Write Data</h5>
-      <CodeSnippet copyText={writeDataCodeSnippet} label="Go Code" />
+      <TemplatedCodeSnippet
+        template={writeDataCodeSnippet}
+        label="Go Code"
+        defaults={{
+          bucket: 'my-awesome-bucket',
+          org: 'my-very-awesome-org',
+        }}
+      />
     </ClientLibraryOverlay>
   )
 }

diff --git a/ui/src/clientLibraries/components/ClientJSOverlay.tsx b/ui/src/clientLibraries/components/ClientJSOverlay.tsx
@@ -3,7 +3,7 @@ import React, {FunctionComponent} from 'react'
 
 // Components
 import ClientLibraryOverlay from 'src/clientLibraries/components/ClientLibraryOverlay'
-import CodeSnippet from 'src/shared/components/CodeSnippet'
+import TemplatedCodeSnippet from 'src/shared/components/TemplatedCodeSnippet'
 
 // Constants
 import {clientJSLibrary} from 'src/clientLibraries/constants'
@@ -27,17 +27,31 @@ const ClientJSOverlay: FunctionComponent<{}> = () => {
       </p>
       <br />
       <h5>Initialize the Client</h5>
-      <CodeSnippet
-        copyText={initializeClientCodeSnippet}
+      <TemplatedCodeSnippet
+        template={initializeClientCodeSnippet}
         label="JavaScript Code"
+        defaults={{
+          server: 'server',
+          token: 'token',
+        }}
       />
       <h5>Write Data</h5>
-      <CodeSnippet
-        copyText={writingDataLineProtocolCodeSnippet}
+      <TemplatedCodeSnippet
+        template={writingDataLineProtocolCodeSnippet}
         label="JavaScript Code"
+        defaults={{
+          org: 'orgID',
+          bucket: 'bucketID',
+        }}
       />
       <h5>Execute a Flux query</h5>
-      <CodeSnippet copyText={executeQueryCodeSnippet} label="JavaScript Code" />
+      <TemplatedCodeSnippet
+        template={executeQueryCodeSnippet}
+        label="JavaScript Code"
+        defaults={{
+          org: 'orgID',
+        }}
+      />
     </ClientLibraryOverlay>
   )
 }

diff --git a/ui/src/clientLibraries/components/ClientJavaOverlay.tsx b/ui/src/clientLibraries/components/ClientJavaOverlay.tsx
@@ -2,7 +2,7 @@
 import React, {FunctionComponent} from 'react'
 // Components
 import ClientLibraryOverlay from 'src/clientLibraries/components/ClientLibraryOverlay'
-import CodeSnippet from 'src/shared/components/CodeSnippet'
+import TemplatedCodeSnippet from 'src/shared/components/TemplatedCodeSnippet'
 // Constants
 import {clientJavaLibrary} from 'src/clientLibraries/constants'
 
@@ -30,24 +30,59 @@ const ClientJavaOverlay: FunctionComponent<{}> = () => {
       </p>
       <h5>Add Dependency</h5>
       <p>Build with Maven</p>
-      <CodeSnippet copyText={buildWithMavenCodeSnippet} label="Code" />
+      <TemplatedCodeSnippet template={buildWithMavenCodeSnippet} label="Code" />
       <p>Build with Gradle</p>
-      <CodeSnippet copyText={buildWithGradleCodeSnippet} label="Code" />
+      <TemplatedCodeSnippet
+        template={buildWithGradleCodeSnippet}
+        label="Code"
+      />
       <h5>Initialize the Client</h5>
-      <CodeSnippet copyText={initializeClientCodeSnippet} label="Java Code" />
+      <TemplatedCodeSnippet
+        template={initializeClientCodeSnippet}
+        label="Java Code"
+        defaults={{
+          server: 'serverUrl',
+          token: 'token',
+        }}
+      />
       <h5>Write Data</h5>
       <p>Option 1: Use InfluxDB Line Protocol to write data</p>
-      <CodeSnippet
-        copyText={writingDataLineProtocolCodeSnippet}
+      <TemplatedCodeSnippet
+        template={writingDataLineProtocolCodeSnippet}
         label="Java Code"
+        defaults={{
+          bucket: 'bucketID',
+          org: 'orgID',
+        }}
       />
       <p>Option 2: Use a Data Point to write data</p>
-      <CodeSnippet copyText={writingDataPointCodeSnippet} label="Java Code" />
+      <TemplatedCodeSnippet
+        template={writingDataPointCodeSnippet}
+        label="Java Code"
+        defaults={{
+          bucket: 'bucketID',
+          org: 'orgID',
+        }}
+      />
       <p>Option 3: Use POJO and corresponding class to write data</p>
-      <CodeSnippet copyText={writingDataPojoCodeSnippet} label="Java Code" />
-      <CodeSnippet copyText={pojoClassCodeSnippet} label="Java Code" />
+      <TemplatedCodeSnippet
+        template={writingDataPojoCodeSnippet}
+        label="Java Code"
+        defaults={{
+          bucket: 'bucketID',
+          org: 'orgID',
+        }}
+      />
+      <TemplatedCodeSnippet template={pojoClassCodeSnippet} label="Java Code" />
       <h5>Execute a Flux query</h5>
-      <CodeSnippet copyText={executeQueryCodeSnippet} label="Java Code" />
+      <TemplatedCodeSnippet
+        template={executeQueryCodeSnippet}
+        label="Java Code"
+        defaults={{
+          bucket: 'my_bucket',
+          org: 'myorgid',
+        }}
+      />
     </ClientLibraryOverlay>
   )
 }

diff --git a/ui/src/clientLibraries/components/ClientPythonOverlay.tsx b/ui/src/clientLibraries/components/ClientPythonOverlay.tsx
@@ -3,7 +3,7 @@ import React, {FunctionComponent} from 'react'
 
 // Components
 import ClientLibraryOverlay from 'src/clientLibraries/components/ClientLibraryOverlay'
-import CodeSnippet from 'src/shared/components/CodeSnippet'
+import TemplatedCodeSnippet from 'src/shared/components/TemplatedCodeSnippet'
 
 // Constants
 import {clientPythonLibrary} from 'src/clientLibraries/constants'
@@ -29,21 +29,56 @@ const ClientPythonOverlay: FunctionComponent<{}> = () => {
         </a>
       </p>
       <h5>Install Package</h5>
-      <CodeSnippet copyText={initializePackageCodeSnippet} label="Code" />
+      <TemplatedCodeSnippet
+        template={initializePackageCodeSnippet}
+        label="Code"
+      />
       <h5>Initialize the Client</h5>
-      <CodeSnippet copyText={initializeClientCodeSnippet} label="Python Code" />
+      <TemplatedCodeSnippet
+        template={initializeClientCodeSnippet}
+        label="Python Code"
+        defaults={{
+          server: 'serverUrl',
+          token: 'token',
+        }}
+      />
       <h5>Write Data</h5>
       <p>Option 1: Use InfluxDB Line Protocol to write data</p>
-      <CodeSnippet
-        copyText={writingDataLineProtocolCodeSnippet}
+      <TemplatedCodeSnippet
+        template={writingDataLineProtocolCodeSnippet}
         label="Python Code"
+        defaults={{
+          bucket: 'bucketID',
+          org: 'orgID',
+        }}
       />
       <p>Option 2: Use a Data Point to write data</p>
-      <CodeSnippet copyText={writingDataPointCodeSnippet} label="Python Code" />
+      <TemplatedCodeSnippet
+        template={writingDataPointCodeSnippet}
+        label="Python Code"
+        defaults={{
+          bucket: 'bucketID',
+          org: 'orgID',
+        }}
+      />
       <p>Option 3: Use a Batch Sequence to write data</p>
-      <CodeSnippet copyText={writingDataBatchCodeSnippet} label="Python Code" />
+      <TemplatedCodeSnippet
+        template={writingDataBatchCodeSnippet}
+        label="Python Code"
+        defaults={{
+          bucket: 'bucketID',
+          org: 'orgID',
+        }}
+      />
       <h5>Execute a Flux query</h5>
-      <CodeSnippet copyText={executeQueryCodeSnippet} label="Python Code" />
+      <TemplatedCodeSnippet
+        template={executeQueryCodeSnippet}
+        label="Python Code"
+        defaults={{
+          bucket: 'my_bucket',
+          org: 'orgID',
+        }}
+      />
     </ClientLibraryOverlay>
   )
 }