feat: syntax highlighting for firstmile (#4450)

ChitlangeSahas · web-flow · commit d7d97e2ab48c · 2022-05-16T08:49:49.000-07:00
diff --git a/package.json b/package.json
@@ -212,6 +212,7 @@
     "react-redux": "^7.2.0",
     "react-router-dom": "^5.2.0",
     "react-select": "^5.2.2",
+    "react-syntax-highlighter": "^15.5.0",
     "react-virtualized": "^9.18.5",
     "redux": "^4.0.0",
     "redux-thunk": "^2.3.0",
diff --git a/src/homepageExperience/components/steps/Tokens.tsx b/src/homepageExperience/components/steps/Tokens.tsx
@@ -115,7 +115,11 @@ export const Tokens: FC<OwnProps> = ({
         Run this command in your terminal to save your token as an environment
         variable:
       </p>
-      <CodeSnippet text={tokenTextboxText} onCopy={logCopyCodeSnippet} />
+      <CodeSnippet
+        text={tokenTextboxText}
+        onCopy={logCopyCodeSnippet}
+        language="properties"
+      />
       <FlexBox margin={ComponentSize.Large} alignItems={AlignItems.Center}>
         <Icon glyph={IconFont.Info_New} style={{fontSize: '30px'}} />
         <p>
diff --git a/src/homepageExperience/components/steps/go/ExecuteAggregateQuery.tsx b/src/homepageExperience/components/steps/go/ExecuteAggregateQuery.tsx
@@ -23,8 +23,7 @@ export const ExecuteAggregateQuery = (props: OwnProps) => {
   |> range(start: -10m) # find data points in last 10 minutes
   |> mean()`
 
-  const query = `
-query = \`from(bucket: "${bucket}")
+  const query = `query = \`from(bucket: "${bucket}")
               |> range(start: -10m)
               |> filter(fn: (r) => r._measurement == "measurement1")
               |> mean()\`
@@ -57,6 +56,7 @@ if err := results.Err(); err != nil {
         text={fromBucketSnippet}
         showCopyControl={false}
         onCopy={logCopyCodeSnippet}
+        language="properties"
       />
       <p>
         In this example, we use the{' '}
@@ -66,7 +66,7 @@ if err := results.Err(); err != nil {
         <br />
         Add the following to your <code>main</code> function:
       </p>
-      <CodeSnippet text={query} onCopy={logCopyCodeSnippet} />
+      <CodeSnippet text={query} onCopy={logCopyCodeSnippet} language="go" />
       <p style={{marginTop: '20px'}}>
         This will return the mean of the five values. ( (0+1+2+3+4) / 5 = 2 )
       </p>
diff --git a/src/homepageExperience/components/steps/go/ExecuteQuery.tsx b/src/homepageExperience/components/steps/go/ExecuteQuery.tsx
@@ -47,6 +47,7 @@ if err := results.Err(); err != nil {
         text={fromBucketSnippet}
         showCopyControl={false}
         onCopy={logCopyCodeSnippet}
+        language="properties"
       />
       <p>
         In this query, we are looking for data points within the last 10 minutes
@@ -58,7 +59,7 @@ if err := results.Err(); err != nil {
         <br />
         Add the following to your <code>main</code> function:
       </p>
-      <CodeSnippet text={query} onCopy={logCopyCodeSnippet} />
+      <CodeSnippet text={query} onCopy={logCopyCodeSnippet} language="go" />
     </>
   )
 }
diff --git a/src/homepageExperience/components/steps/go/InitalizeClient.tsx b/src/homepageExperience/components/steps/go/InitalizeClient.tsx
@@ -38,7 +38,11 @@ func main() {
       <p style={{marginTop: '40px'}}>
         Paste following code in your <code>main.go</code> file:
       </p>
-      <CodeSnippet text={codeSnippet} onCopy={logCopyCodeSnippet} />
+      <CodeSnippet
+        text={codeSnippet}
+        onCopy={logCopyCodeSnippet}
+        language="go"
+      />
       <p style={{marginTop: '42px'}}>
         Here, we initialize the token, organization info, and server url that
         are needed to set up the initial connection to InfluxDB. The client
diff --git a/src/homepageExperience/components/steps/go/InstallDependencies.tsx b/src/homepageExperience/components/steps/go/InstallDependencies.tsx
@@ -29,6 +29,7 @@ export class InstallDependencies extends PureComponent {
         <CodeSnippet
           text={goModuleSnippet}
           onCopy={this.logCopyInitializeModuleSnippet}
+          language="properties"
         />
         <p style={{marginTop: '40px'}}>
           Then, install the{' '}
@@ -40,6 +41,7 @@ export class InstallDependencies extends PureComponent {
         <CodeSnippet
           text="go get github.com/influxdata/influxdb-client-go/v2"
           onCopy={this.logCopyInstallCodeSnippet}
+          language="properties"
         />
         <p style={{fontStyle: 'italic'}}>
           You’ll need to have{' '}
diff --git a/src/homepageExperience/components/steps/go/WriteData.tsx b/src/homepageExperience/components/steps/go/WriteData.tsx
@@ -48,8 +48,7 @@ export const WriteDataComponent = (props: OwnProps) => {
     onSelectBucket(bucket.name)
   }, [bucket])
 
-  const codeSnippet = `
-org := "${org.name}"
+  const codeSnippet = `org := "${org.name}"
 bucket := "${bucket.name}"
 writeAPI := client.WriteAPIBlocking(org, bucket)
 for value := 0; value < 5; value++ {
@@ -95,7 +94,11 @@ for value := 0; value < 5; value++ {
       <p>
         Add the following to your <code>main</code> function:
       </p>
-      <CodeSnippet text={codeSnippet} onCopy={logCopyCodeSnippet} />
+      <CodeSnippet
+        text={codeSnippet}
+        onCopy={logCopyCodeSnippet}
+        language="go"
+      />
       <p style={{marginTop: '20px'}}>
         In the above code snippet, we define five data points and write each one
         to InfluxDB. Each of the 5 points we write has a{' '}
diff --git a/src/homepageExperience/components/steps/nodejs/ExecuteAggregateQuery.tsx b/src/homepageExperience/components/steps/nodejs/ExecuteAggregateQuery.tsx
@@ -60,6 +60,7 @@ queryClient.queryRows(fluxQuery, {
         text={fromBucketSnippet}
         showCopyControl={false}
         onCopy={logCopyCodeSnippet}
+        language="properties"
       />
       <p>
         In this example, we use the{' '}
@@ -69,7 +70,11 @@ queryClient.queryRows(fluxQuery, {
         <br />
         Run the following:
       </p>
-      <CodeSnippet text={query} onCopy={logCopyCodeSnippet} />
+      <CodeSnippet
+        text={query}
+        onCopy={logCopyCodeSnippet}
+        language="javascript"
+      />
       <p style={{marginTop: '20px'}}>
         This will return the mean of the five values. ( (0+1+2+3+4) / 5 = 2 )
       </p>
diff --git a/src/homepageExperience/components/steps/nodejs/ExecuteQuery.tsx b/src/homepageExperience/components/steps/nodejs/ExecuteQuery.tsx
@@ -50,6 +50,7 @@ queryClient.queryRows(fluxQuery, {
         text={fromBucketSnippet}
         showCopyControl={false}
         onCopy={logCopyCodeSnippet}
+        language="properties"
       />
       <p>
         In this query, we are looking for data points within the last 10 minutes
@@ -61,7 +62,11 @@ queryClient.queryRows(fluxQuery, {
         <br />
         Run the following:
       </p>
-      <CodeSnippet text={query} onCopy={logCopyCodeSnippet} />
+      <CodeSnippet
+        text={query}
+        onCopy={logCopyCodeSnippet}
+        language="javascript"
+      />
     </>
   )
 }
diff --git a/src/homepageExperience/components/steps/nodejs/InitalizeClient.tsx b/src/homepageExperience/components/steps/nodejs/InitalizeClient.tsx
@@ -31,11 +31,15 @@ const client = new InfluxDB({url, token})`
       <p>
         Run this command in your terminal to open the interactive Nodejs shell:
       </p>
-      <CodeSnippet text="node" />
+      <CodeSnippet text="node" language="properties" />
       <p style={{marginTop: '40px'}}>
         Paste the following code after the prompt (>) and press Enter.
       </p>
-      <CodeSnippet text={codeSnippet} onCopy={logCopyCodeSnippet} />
+      <CodeSnippet
+        text={codeSnippet}
+        onCopy={logCopyCodeSnippet}
+        language="javascript"
+      />
       <p style={{marginTop: '42px'}}>
         Here, we initialize the token, organization info, and server url that
         are needed to set up the initial connection to InfluxDB. The client
diff --git a/src/homepageExperience/components/steps/nodejs/InstallDependencies.tsx b/src/homepageExperience/components/steps/nodejs/InstallDependencies.tsx
@@ -22,6 +22,7 @@ export class InstallDependencies extends PureComponent {
         <CodeSnippet
           text="npm install --save @influxdata/influxdb-client"
           onCopy={this.logCopyCodeSnippet}
+          language="properties"
         />
         <p style={{fontStyle: 'italic'}}>
           You’ll need to have{' '}
diff --git a/src/homepageExperience/components/steps/nodejs/WriteData.tsx b/src/homepageExperience/components/steps/nodejs/WriteData.tsx
@@ -48,8 +48,7 @@ export const WriteDataComponent = (props: OwnProps) => {
     onSelectBucket(bucket.name)
   }, [bucket])
 
-  const codeSnippet = `
-let org = \`${org.name}\`
+  const codeSnippet = `let org = \`${org.name}\`
 let bucket = \`${bucket.name}\`
 
 let writeClient = client.getWriteApi(org, bucket, 'ns')
@@ -94,7 +93,11 @@ for (let i = 0; i < 5; i++) {
         </Panel.Body>
       </Panel>
       <p>Run the following code in your Nodejs shell:</p>
-      <CodeSnippet text={codeSnippet} onCopy={logCopyCodeSnippet} />
+      <CodeSnippet
+        text={codeSnippet}
+        onCopy={logCopyCodeSnippet}
+        language="javascript"
+      />
       <p style={{marginTop: '20px'}}>
         In the above code snippet, we define five data points and write each one
         to InfluxDB. Each of the 5 points we write has a{' '}
diff --git a/src/homepageExperience/components/steps/python/ExecuteAggregateQuery.tsx b/src/homepageExperience/components/steps/python/ExecuteAggregateQuery.tsx
@@ -57,6 +57,7 @@ for table in tables:
         text={fromBucketSnippet}
         showCopyControl={false}
         onCopy={logCopyCodeSnippet}
+        language="properties"
       />
       <p>
         In this example, we use the{' '}
@@ -66,7 +67,11 @@ for table in tables:
         <br />
         Run the following:
       </p>
-      <CodeSnippet text={codeSnippet} onCopy={logCopyCodeSnippet} />
+      <CodeSnippet
+        text={codeSnippet}
+        onCopy={logCopyCodeSnippet}
+        language="python"
+      />
       <p style={{marginTop: '20px'}}>
         This will return the mean of the five values. ( (0+1+2+3+4) / 5 = 2 )
       </p>
diff --git a/src/homepageExperience/components/steps/python/ExecuteQuery.tsx b/src/homepageExperience/components/steps/python/ExecuteQuery.tsx
@@ -46,6 +46,7 @@ for table in tables:
         text={fromBucketSnippet}
         showCopyControl={false}
         onCopy={logCopyCodeSnippet}
+        language="properties"
       />
       <p>
         In this query, we are looking for data points within the last 10 minutes
@@ -57,7 +58,7 @@ for table in tables:
         <br />
         Run the following:
       </p>
-      <CodeSnippet text={query} onCopy={logCopyCodeSnippet} />
+      <CodeSnippet text={query} onCopy={logCopyCodeSnippet} language="python" />
     </>
   )
 }
diff --git a/src/homepageExperience/components/steps/python/InitalizeClient.tsx b/src/homepageExperience/components/steps/python/InitalizeClient.tsx
@@ -35,11 +35,15 @@ client = influxdb_client.InfluxDBClient(url=url, token=token, org=org)
       <p>
         Run this command in your terminal to open the interactive Python shell:
       </p>
-      <CodeSnippet text="python3" />
+      <CodeSnippet text="python3" language="properties" />
       <p style={{marginTop: '40px'}}>
         Paste the following code after the prompt (>>>) and press Enter.
       </p>
-      <CodeSnippet text={pythonCode} onCopy={logCopyCodeSnippet} />
+      <CodeSnippet
+        text={pythonCode}
+        onCopy={logCopyCodeSnippet}
+        language="python"
+      />
       <p style={{marginTop: '42px'}}>
         Here, we initialize the token, organization info, and server url that
         are needed to set up the initial connection to InfluxDB. The client
diff --git a/src/homepageExperience/components/steps/python/InstallDependencies.tsx b/src/homepageExperience/components/steps/python/InstallDependencies.tsx
@@ -22,6 +22,7 @@ export class InstallDependencies extends PureComponent {
         <CodeSnippet
           text="pip3 install influxdb-client"
           onCopy={this.logCopyCodeSnippet}
+          language="properties"
         />
         <p style={{fontStyle: 'italic'}}>
           You’ll need to have{' '}
diff --git a/src/homepageExperience/components/steps/python/WriteData.tsx b/src/homepageExperience/components/steps/python/WriteData.tsx
@@ -89,7 +89,11 @@ for value in range(5):
         </Panel.Body>
       </Panel>
       <p>Run the following code in your Python shell:</p>
-      <CodeSnippet text={codeSnippet} onCopy={logCopyCodeSnippet} />
+      <CodeSnippet
+        text={codeSnippet}
+        onCopy={logCopyCodeSnippet}
+        language="python"
+      />
       <p style={{marginTop: '20px'}}>
         In the above code snippet, we define five data points and write each one
         to InfluxDB. Each of the 5 points we write has a{' '}
diff --git a/src/shared/components/CodeSnippet.scss b/src/shared/components/CodeSnippet.scss
@@ -21,7 +21,6 @@
 .code-snippet--text {
   font-size: $cf-form-md-font;
   color: $c-potassium;
-  font-weight: $cf-font-weight--bold;
   font-family: $cf-code-font;
   border-radius: $cf-radius;
   background-color: $cf-grey-5;
diff --git a/src/shared/components/CodeSnippet.tsx b/src/shared/components/CodeSnippet.tsx
@@ -2,8 +2,11 @@
 import React, {FC, createContext, useContext, useEffect, useState} from 'react'
 import {useDispatch} from 'react-redux'
 
+import {Prism as SyntaxHighlighter} from 'react-syntax-highlighter'
+import {darcula} from 'react-syntax-highlighter/dist/cjs/styles/prism'
+
 // Components
-import {DapperScrollbars} from '@influxdata/clockface'
+import {DapperScrollbars, InfluxColors} from '@influxdata/clockface'
 import CopyButton from 'src/shared/components/CopyButton'
 
 // Constants
@@ -74,6 +77,7 @@ interface Props {
   onCopy?: () => void
   type?: string
   showCopyControl?: boolean
+  language?: string
 }
 
 const CodeSnippet: FC<Props> = ({
@@ -83,6 +87,7 @@ const CodeSnippet: FC<Props> = ({
   type,
   onCopy,
   showCopyControl = true,
+  language = null,
 }) => {
   const {transform} = useContext(Context)
   const dispatch = useDispatch()
@@ -109,9 +114,20 @@ const CodeSnippet: FC<Props> = ({
         className="code-snippet--scroll"
       >
         <div className="code-snippet--text">
-          <pre>
-            <code>{_text}</code>
-          </pre>
+          {language === null ? (
+            <pre>
+              <code>{_text}</code>
+            </pre>
+          ) : (
+            <SyntaxHighlighter
+              language={language}
+              style={darcula}
+              customStyle={{backgroundColor: InfluxColors.Grey5}}
+              codeTagProps={{style: {fontFamily: '"IBMPlexMono", monospace'}}}
+            >
+              {_text}
+            </SyntaxHighlighter>
+          )}
         </div>
       </DapperScrollbars>
       <div className="code-snippet--footer">
diff --git a/yarn.lock b/yarn.lock
