fix: fixes most of the windows commands (#5391)

* fix: fixes most of the windows commands

Author: david-rusnak

src/homepageExperience/components/steps/cli/ExecuteAggregateQuery.tsx

@@ -8,7 +8,11 @@ import {DEFAULT_BUCKET} from 'src/writeData/components/WriteDataDetailsContext'
 // Utils
 import {SafeBlankLink} from 'src/utils/SafeBlankLink'
 import {event} from 'src/cloud/utils/reporting'
-import {keyboardCopyTriggered, userSelection} from 'src/utils/crossPlatform'
+import {
+  isUsingWindows,
+  keyboardCopyTriggered,
+  userSelection,
+} from 'src/utils/crossPlatform'
 
 const logCopyCodeSnippet = () => {
   event('firstMile.cliWizard.executeAggregateQuery.code.copied')
@@ -30,7 +34,8 @@ export const ExecuteAggregateQuery = (props: OwnProps) => {
   |> filter(fn: (r) => r.measurement == "temperature")
   |> mean()`
 
-  const codeSnippet = `influx query 'from(bucket:"${bucketName}") |> range(start:-30m) |> mean()' --raw`
+  const codeSnippetMac = `influx query 'from(bucket:"${bucketName}") |> range(start:-30m) |> mean()' --raw`
+  const codeSnippetWindows = `.\\influx query 'from(bucket:"${bucketName}") |> range(start:-30m) |> mean()' --raw`
 
   useEffect(() => {
     const fireKeyboardCopyEvent = event => {
@@ -71,7 +76,7 @@ export const ExecuteAggregateQuery = (props: OwnProps) => {
       />
       <p>In the InfluxDB CLI, run the following:</p>
       <CodeSnippet
-        text={codeSnippet}
+        text={isUsingWindows() ? codeSnippetWindows : codeSnippetMac}
         onCopy={logCopyCodeSnippet}
         language="properties"
       />

src/homepageExperience/components/steps/cli/ExecuteQuery.tsx

@@ -10,7 +10,11 @@ import {DEFAULT_BUCKET} from 'src/writeData/components/WriteDataDetailsContext'
 // Utils
 import {event} from 'src/cloud/utils/reporting'
 import {SafeBlankLink} from 'src/utils/SafeBlankLink'
-import {keyboardCopyTriggered, userSelection} from 'src/utils/crossPlatform'
+import {
+  isUsingWindows,
+  keyboardCopyTriggered,
+  userSelection,
+} from 'src/utils/crossPlatform'
 
 const logCopyCodeSnippet = () => {
   event('firstMile.cliWizard.executeQuery.code.copied')
@@ -23,7 +27,8 @@ type OwnProps = {
 export const ExecuteQuery = (props: OwnProps) => {
   const {bucket} = props
   const bucketName = bucket === DEFAULT_BUCKET ? 'sample-bucket' : bucket
-  const query = `influx query 'from(bucket:"${bucketName}") |> range(start:-30m)' --raw`
+  const queryMac = `influx query 'from(bucket:"${bucketName}") |> range(start:-30m)' --raw`
+  const queryWindows = `.\\influx query 'from(bucket:"${bucketName}") |> range(start:-30m)' --raw`
 
   const fluxExample = `from(bucket: “weather-data”)
   |> range(start: -10m)
@@ -72,7 +77,7 @@ export const ExecuteQuery = (props: OwnProps) => {
         the InfluxDB CLI.
       </p>
       <CodeSnippet
-        text={query}
+        text={isUsingWindows() ? queryWindows : queryMac}
         onCopy={logCopyCodeSnippet}
         language="properties"
       />

src/homepageExperience/components/steps/cli/InitializeClient.tsx

@@ -31,7 +31,11 @@ import {WriteDataDetailsContext} from 'src/writeData/components/WriteDataDetails
 // Utils
 import {allAccessPermissions} from 'src/authorizations/utils/permissions'
 import {event} from 'src/cloud/utils/reporting'
-import {keyboardCopyTriggered, userSelection} from 'src/utils/crossPlatform'
+import {
+  isUsingWindows,
+  keyboardCopyTriggered,
+  userSelection,
+} from 'src/utils/crossPlatform'
 
 // Types
 import {AppState, Authorization} from 'src/types'
@@ -63,13 +67,21 @@ export const InitializeClient: FC<OwnProps> = ({
   })
   const token = currentAuth.token
 
-  const codeSnippet = `influx config create --config-name onboarding \\
+  const codeSnippetMac = `influx config create --config-name onboarding \\
     --host-url "${url}" \\
     --org "${org.id}" \\
     --token "${token}" \\
     --active`
 
-  const bucketSnippet = `influx bucket create --name sample-bucket -c onboarding`
+  const bucketSnippetMac = `influx bucket create --name sample-bucket -c onboarding`
+
+  const codeSnippetWindows = `.\\influx config create --config-name onboarding \`
+  --host-url "${url}" \`
+  --org "${org.id}" \`
+  --token "${token}" \`
+  --active`
+
+  const bucketSnippetWindows = `.\\influx bucket create --name sample-bucket -c onboarding`
 
   const sortedPermissionTypes = useMemo(
     () => allPermissionTypes.sort((a, b) => collator.compare(a, b)),
@@ -142,7 +154,7 @@ export const InitializeClient: FC<OwnProps> = ({
         profile using a different token for working with your own data.
       </p>
       <CodeSnippet
-        text={codeSnippet}
+        text={isUsingWindows() ? codeSnippetWindows : codeSnippetMac}
         onCopy={logCopyCodeSnippet}
         language="properties"
       />
@@ -174,7 +186,7 @@ export const InitializeClient: FC<OwnProps> = ({
         skip this step and proceed to the next.
       </p>
       <CodeSnippet
-        text={bucketSnippet}
+        text={isUsingWindows() ? bucketSnippetWindows : bucketSnippetMac}
         onCopy={logCopyCodeSnippet}
         language="properties"
       />

src/homepageExperience/components/steps/cli/InstallDependencies.tsx

@@ -218,9 +218,10 @@ sudo cp influxdb2-client-latest-linux-arm64/influx /usr/local/bin/
           <p>2. Click Allow access</p>
           <h2 style={headingWithMargin}>Useful InfluxDB CLI commands</h2>
           <p>
-            To invoke a command, use the following format in the command line:
+            To invoke a command, move into the directory where the CLI package
+            is installed and use the following format in the command line:
           </p>
-          <p style={{marginLeft: '40px'}}>influx [command]</p>
+          <p style={{marginLeft: '40px'}}>.\influx [command]</p>
           <Table borders={BorderType.All}>
             <Table.Body>
               <Table.Row>

src/homepageExperience/components/steps/cli/WriteData.tsx

@@ -12,7 +12,11 @@ import {DEFAULT_BUCKET} from 'src/writeData/components/WriteDataDetailsContext'
 
 // Utils
 import {event} from 'src/cloud/utils/reporting'
-import {keyboardCopyTriggered, userSelection} from 'src/utils/crossPlatform'
+import {
+  isUsingWindows,
+  keyboardCopyTriggered,
+  userSelection,
+} from 'src/utils/crossPlatform'
 
 // Assets
 import sampleCsv from 'assets/images/sample-csv.png'
@@ -36,8 +40,10 @@ export const WriteDataComponent = (props: OwnProps) => {
 
   const sampleDataUrl =
     'https://influx-testdata.s3.amazonaws.com/air-sensor-data-annotated.csv'
-  const writeDataCodeCsv = `influx write --bucket ${bucketName} --file downloads/air-sensor-data-annotated.csv`
-  const writeDataCodeUrl = `influx write --bucket ${bucketName} --url ${sampleDataUrl}`
+  const writeDataCodeCsvMac = `influx write --bucket ${bucketName} --file downloads/air-sensor-data-annotated.csv`
+  const writeDataCodeCsvWindows = `.\\influx write --bucket ${bucketName} --file <YOUR_PATH>/air-sensor-data-annotated.csv`
+  const writeDataCodeUrlMac = `influx write --bucket ${bucketName} --url ${sampleDataUrl}`
+  const writeDataCodeUrlWindows = `.\\influx write --bucket ${bucketName} --url ${sampleDataUrl}`
 
   const [currentDataSelection, setCurrentDataSelection] = useState<
     CurrentDataSelection
@@ -118,7 +124,9 @@ export const WriteDataComponent = (props: OwnProps) => {
             bucket.
           </p>
           <CodeSnippet
-            text={writeDataCodeCsv}
+            text={
+              isUsingWindows() ? writeDataCodeCsvWindows : writeDataCodeCsvMac
+            }
             onCopy={logCopyCodeSnippet}
             language="properties"
           />
@@ -179,7 +187,9 @@ export const WriteDataComponent = (props: OwnProps) => {
             bucket.
           </p>
           <CodeSnippet
-            text={writeDataCodeUrl}
+            text={
+              isUsingWindows() ? writeDataCodeUrlWindows : writeDataCodeUrlMac
+            }
             onCopy={logCopyCodeSnippet}
             language="properties"
           />

src/utils/crossPlatform.test.ts

@@ -2,6 +2,9 @@ import {
   shouldOpenLinkInNewTab,
   keyboardCopyTriggered,
   userSelection,
+  isUsingWindows,
+  isUsingMac,
+  isUsingLinux,
 } from 'src/utils/crossPlatform'
 
 let userAgentGetter
@@ -196,3 +199,33 @@ describe('checking whether a link should be opened in a new tab', () => {
     })
   })
 })
+
+describe('which operating system', () => {
+  beforeEach(() => {
+    userAgentGetter = jest.spyOn(global.window.navigator, 'userAgent', 'get')
+  })
+  it('is windows', () => {
+    userAgentGetter.mockReturnValue('5.0 Windows')
+    expect(isUsingWindows()).toBeTruthy()
+  })
+  it('is mac', () => {
+    userAgentGetter.mockReturnValue('5.0 Macintosh')
+    expect(isUsingMac()).toBeTruthy()
+  })
+  it('is linux', () => {
+    userAgentGetter.mockReturnValue('5.0 Linux')
+    expect(isUsingLinux()).toBeTruthy()
+  })
+  it('is not windows', () => {
+    userAgentGetter.mockReturnValue('5.0 Macintosh')
+    expect(isUsingWindows()).toBeFalsy()
+  })
+  it('is not mac', () => {
+    userAgentGetter.mockReturnValue('5.0 Windows')
+    expect(isUsingMac()).toBeFalsy()
+  })
+  it('is not linux', () => {
+    userAgentGetter.mockReturnValue('5.0 Macintosh')
+    expect(isUsingLinux()).toBeFalsy()
+  })
+})

src/utils/crossPlatform.ts

@@ -70,3 +70,24 @@ export const keyboardCopyTriggered = (
 export const userSelection = () => {
   return window.getSelection().toString()
 }
+
+export const isUsingWindows = () => {
+  if (window?.navigator?.userAgent.includes('Windows')) {
+    return true
+  }
+  return false
+}
+
+export const isUsingMac = () => {
+  if (window?.navigator?.userAgent.includes('Mac')) {
+    return true
+  }
+  return false
+}
+
+export const isUsingLinux = () => {
+  if (window?.navigator?.userAgent.includes('Linux')) {
+    return true
+  }
+  return false
+}