fix(firstMile): create token once per session; allow feedback selection once (#4472)

Author: ChitlangeSahas

src/homepageExperience/components/FeedbackBar.tsx

@@ -33,13 +33,18 @@ export default class FeedbackBar extends React.Component<OwnProps, State> {
     }
   }
 
+  // for now, we're only registering the first feedback user selects.
   private handleThumbsUpClick = () => {
-    event(`firstMile.${this.props.wizardEventName}.thumbsUp.clicked`)
-    this.setState({selectedFeedback: feedbackValue.THUMBS_UP})
+    if (this.state.selectedFeedback === null) {
+      event(`firstMile.${this.props.wizardEventName}.thumbsUp.clicked`)
+      this.setState({selectedFeedback: feedbackValue.THUMBS_UP})
+    }
   }
   private handleThumbsDownClick = () => {
-    event(`firstMile.${this.props.wizardEventName}.thumbsDown.clicked`)
-    this.setState({selectedFeedback: feedbackValue.THUMBS_DOWN})
+    if (this.state.selectedFeedback === null) {
+      event(`firstMile.${this.props.wizardEventName}.thumbsDown.clicked`)
+      this.setState({selectedFeedback: feedbackValue.THUMBS_DOWN})
+    }
   }
 
   render() {

src/homepageExperience/components/steps/CreateToken.tsx

@@ -33,11 +33,17 @@ import {
 
 type OwnProps = {
   wizardEventName: string
+  setTokenValue: (tokenValue: string) => void
+  tokenValue: string
 }
 
 const collator = new Intl.Collator(navigator.language || 'en-US')
 
-export const CreateToken: FC<OwnProps> = ({wizardEventName}) => {
+export const CreateToken: FC<OwnProps> = ({
+  wizardEventName,
+  setTokenValue,
+  tokenValue,
+}) => {
   const org = useSelector(getOrg)
   const me = useSelector(getMe)
   const allPermissionTypes = useSelector(getAllTokensResources)
@@ -63,7 +69,7 @@ export const CreateToken: FC<OwnProps> = ({wizardEventName}) => {
   }, [])
 
   useEffect(() => {
-    if (sortedPermissionTypes.length) {
+    if (sortedPermissionTypes.length && tokenValue === null) {
       const authorization: Authorization = {
         orgID: org.id,
         description: `onboarding-${wizardEventName}-token-${Date.now()}`,
@@ -75,12 +81,20 @@ export const CreateToken: FC<OwnProps> = ({wizardEventName}) => {
     }
   }, [sortedPermissionTypes.length])
 
+  // when token generated, save it to the parent component
   useEffect(() => {
     if (currentAuth.token) {
-      setTokenTextboxText(`export INFLUXDB_TOKEN=${currentAuth.token}`)
+      setTokenValue(currentAuth.token)
     }
   }, [currentAuth.token])
 
+  // when tokenValue in the parent component is not null, set text box value to tokenValue
+  useEffect(() => {
+    if (tokenValue !== null) {
+      setTokenTextboxText(`export INFLUXDB_TOKEN=${tokenValue}`)
+    }
+  }, [tokenValue])
+
   // Events log handling
   const logCopyCodeSnippet = () => {
     event(`firstMile.${wizardEventName}.createToken.code.copied`)

src/homepageExperience/containers/GoWizard.tsx

@@ -31,13 +31,15 @@ interface State {
   currentStep: number
   selectedBucket: string
   finishStepCompleted: boolean
+  tokenValue: string
 }
 
 export class GoWizard extends PureComponent<null, State> {
   state = {
     currentStep: 1,
     selectedBucket: 'my-bucket',
     finishStepCompleted: false,
+    tokenValue: null,
   }
 
   private handleSelectBucket = (bucketName: string) => {
@@ -48,6 +50,10 @@ export class GoWizard extends PureComponent<null, State> {
     this.setState({finishStepCompleted: true})
   }
 
+  private setTokenValue = (tokenValue: string) => {
+    this.setState({tokenValue})
+  }
+
   handleNextClick = () => {
     this.setState(
       {
@@ -84,7 +90,13 @@ export class GoWizard extends PureComponent<null, State> {
         return <InstallDependencies />
       }
       case 3: {
-        return <CreateToken wizardEventName="goWizard" />
+        return (
+          <CreateToken
+            wizardEventName="goWizard"
+            setTokenValue={this.setTokenValue}
+            tokenValue={this.state.tokenValue}
+          />
+        )
       }
       case 4: {
         return <InitalizeClient />

src/homepageExperience/containers/NodejsWizard.tsx

@@ -31,13 +31,15 @@ interface State {
   currentStep: number
   selectedBucket: string
   finishStepCompleted: boolean
+  tokenValue: string
 }
 
 export class NodejsWizard extends PureComponent<null, State> {
   state = {
     currentStep: 1,
     selectedBucket: 'my-bucket',
     finishStepCompleted: false,
+    tokenValue: null,
   }
 
   private handleSelectBucket = (bucketName: string) => {
@@ -48,6 +50,10 @@ export class NodejsWizard extends PureComponent<null, State> {
     this.setState({finishStepCompleted: true})
   }
 
+  private setTokenValue = (tokenValue: string) => {
+    this.setState({tokenValue})
+  }
+
   handleNextClick = () => {
     this.setState(
       {
@@ -84,7 +90,13 @@ export class NodejsWizard extends PureComponent<null, State> {
         return <InstallDependencies />
       }
       case 3: {
-        return <CreateToken wizardEventName="nodejsWizard" />
+        return (
+          <CreateToken
+            wizardEventName="nodejsWizard"
+            setTokenValue={this.setTokenValue}
+            tokenValue={this.state.tokenValue}
+          />
+        )
       }
       case 4: {
         return <InitalizeClient />

src/homepageExperience/containers/PythonWizard.tsx

@@ -31,13 +31,15 @@ interface State {
   currentStep: number
   selectedBucket: string
   finishStepCompleted: boolean
+  tokenValue: string
 }
 
 export class PythonWizard extends PureComponent<null, State> {
   state = {
     currentStep: 1,
     selectedBucket: 'my-bucket',
     finishStepCompleted: false,
+    tokenValue: null,
   }
 
   private handleSelectBucket = (bucketName: string) => {
@@ -48,6 +50,10 @@ export class PythonWizard extends PureComponent<null, State> {
     this.setState({finishStepCompleted: true})
   }
 
+  private setTokenValue = (tokenValue: string) => {
+    this.setState({tokenValue})
+  }
+
   handleNextClick = () => {
     this.setState(
       {
@@ -84,7 +90,13 @@ export class PythonWizard extends PureComponent<null, State> {
         return <InstallDependencies />
       }
       case 3: {
-        return <CreateToken wizardEventName="pythonWizard" />
+        return (
+          <CreateToken
+            wizardEventName="pythonWizard"
+            setTokenValue={this.setTokenValue}
+            tokenValue={this.state.tokenValue}
+          />
+        )
       }
       case 4: {
         return <InitalizeClient />