feat: Create Token and Initialize Client pages for first mile experience (#4033)

* feat: Create Token page for first mile experience

* feat: Initialize Client page for first mile experience

* chore: imports

* chore: prettier

* fix: address PR comments

* chore: prettier

Author: ChitlangeSahas

src/homepageExperience/components/steps/CreateToken.tsx

@@ -0,0 +1,72 @@
+// Libraries
+import React, {FC} from 'react'
+import CodeSnippet from 'src/shared/components/CodeSnippet'
+import {Button, ComponentColor, ComponentSize} from '@influxdata/clockface'
+import {connect, ConnectedProps, useDispatch, useSelector} from 'react-redux'
+import {RouteComponentProps, withRouter} from 'react-router-dom'
+
+// Selectors
+import {notify} from 'src/shared/actions/notifications'
+import {getResourcesTokensFailure} from 'src/shared/copy/notifications'
+import {getAllResources} from 'src/authorizations/actions/thunks'
+import {dismissOverlay, showOverlay} from 'src/overlays/actions/overlays'
+import {getOrg} from 'src/organizations/selectors'
+
+// Helper Components
+import {SafeBlankLink} from 'src/utils/SafeBlankLink'
+
+type ReduxProps = ConnectedProps<typeof connector>
+
+const CreateTokenComponent: FC<ReduxProps & RouteComponentProps> = ({
+  showOverlay,
+  dismissOverlay,
+  getAllResources,
+}) => {
+  const org = useSelector(getOrg)
+  const dispatch = useDispatch()
+  const handleAllAccess = async () => {
+    try {
+      await getAllResources()
+      showOverlay('add-master-token', null, dismissOverlay)
+    } catch {
+      dispatch(notify(getResourcesTokensFailure('all access token')))
+    }
+  }
+
+  return (
+    <>
+      <h1>Create a Token</h1>
+      <p>
+        InfluxDB Cloud uses Tokens to authenticate API access. Click below to
+        create an all-access token.
+      </p>
+      <Button
+        text="Generate Token"
+        onClick={handleAllAccess}
+        color={ComponentColor.Primary}
+        size={ComponentSize.Medium}
+      />
+      <p style={{marginTop: '51px'}}>
+        Save your token as an environment variable; you’ll use it soon. Run this
+        command in your terminal:
+      </p>
+      <CodeSnippet text="export INFLUXDB_TOKEN=<your token here>" />
+      <p style={{marginTop: '46px'}}>
+        You can create tokens in the future in the{' '}
+        <SafeBlankLink href={`orgs/${org.id}/load-data/tokens`}>
+          Token page
+        </SafeBlankLink>
+        .
+      </p>
+    </>
+  )
+}
+
+const mdtp = {
+  showOverlay,
+  dismissOverlay,
+  getAllResources,
+}
+
+const connector = connect(null, mdtp)
+export const CreateToken = connector(withRouter(CreateTokenComponent))

src/homepageExperience/components/steps/InitalizeClient.tsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import CodeSnippet from 'src/shared/components/CodeSnippet'
+
+export const InitalizeClient = () => {
+  const pythonCode = `import os
+from datetime import datetime
+
+from influxdb_client import InfluxDBClient, Point, WritePrecision
+from influxdb_client.client import SYNCHRONOUS
+
+token = os.environ.get("INFLUXDB_TOKEN")
+org = "<user>@influxdata.com"
+url = "https://us-west-2-1.aws.cloud2.influxdata.com/"
+
+client = influxdb_client.InfluxDBClient(url=url, token=token, org=org)
+write_api = client.write_api(write_options=SYNCHRONOUS)`
+
+  return (
+    <>
+      <h1>Initalize Client</h1>
+      <p>
+        Run this command in your terminal to open the interactive Python shell:
+      </p>
+      <CodeSnippet text="python3" />
+      <p style={{marginTop: '40px'}}>
+        Paste the following code after the prompt (>>>) and press Enter.
+      </p>
+      <CodeSnippet text={pythonCode} />
+      <p style={{marginTop: '42px'}}>
+        Here, we initialize the token, organization info, and server url that is
+        needed to set up the initial connection to InfluxDB. The client
+        connection is then established with InfluxDBClient initialization.
+      </p>
+    </>
+  )
+}

src/homepageExperience/containers/HomepagePythonWizard.tsx

@@ -6,6 +6,8 @@ import {Button, ComponentColor, ComponentSize} from '@influxdata/clockface'
 import {InstallDependencies} from 'src/homepageExperience/components/steps/InstallDependencies'
 import {Overview} from 'src/homepageExperience/components/steps/Overview'
 import {Navigation} from 'src/homepageExperience/components/Navigation'
+import {CreateToken} from 'src/homepageExperience/components/steps/CreateToken'
+import {InitalizeClient} from 'src/homepageExperience/components/steps/InitalizeClient'
 
 import {HOMEPAGE_NAVIGATION_STEPS} from 'src/homepageExperience/utils'
 
@@ -39,6 +41,12 @@ export class HomepagePythonWizard extends PureComponent<null, State> {
       case 2: {
         return <InstallDependencies />
       }
+      case 3: {
+        return <CreateToken />
+      }
+      case 4: {
+        return <InitalizeClient />
+      }
       default: {
         return <Overview />
       }