feat: add the new telegraf refresh ui path from buckets card (#3203)

Author: ChitlangeSahas

cypress/e2e/shared/buckets.test.ts

@@ -132,7 +132,12 @@ describe('Buckets', () => {
   })
 
   describe('add data', function() {
+    const TELEGRAF_SYSTEMS_PLUGINS_ORIGINAL_COUNT = 5
+
     it('configure telegraf agent', () => {
+      cy.setFeatureFlags({
+        telegrafUiRefresh: true,
+      })
       // click "add data" and choose Configure Telegraf Agent
       cy.getByTestID('add-data--button').click()
       cy.get('.bucket-add-data--option')
@@ -147,32 +152,45 @@ describe('Buckets', () => {
         )
       })
 
-      // filter plugins and choose system
+      // many plugins with "sys" in their names have been added
       cy.getByTestID('input-field').type('sys')
-      cy.getByTestID('square-grid--card').should('have.length', 1)
+      cy.getByTestID('square-grid--card').should('have.length.greaterThan', 1)
       cy.getByTestID('input-field').clear()
-      cy.getByTestID('square-grid--card').should('have.length', 5)
+
+      // total plugins should be greater than just the original Systems plugins
+      cy.getByTestID('square-grid--card').should(
+        'have.length.greaterThan',
+        TELEGRAF_SYSTEMS_PLUGINS_ORIGINAL_COUNT
+      )
       cy.getByTestID('telegraf-plugins--System').click()
-      cy.getByTestID('next').click()
+      cy.getByTestID('plugin-create-configuration-continue-configuring').click()
+
+      // cancel mid-flow and redo steps, ensuring user is still at Load Data > Buckets
+      cy.get('button.cf-overlay--dismiss').click()
+      cy.getByTestID('add-data--button').click()
+      cy.get('.bucket-add-data--option')
+        .contains('Configure Telegraf Agent')
+        .click()
+      cy.get<string>('@defaultBucket').then((defaultBucket: string) => {
+        cy.getByTestID('bucket-dropdown--button').should(
+          'contain',
+          defaultBucket
+        )
+      })
+      cy.getByTestID('telegraf-plugins--System').click()
+      cy.getByTestID('plugin-create-configuration-continue-configuring').click()
 
       // add telegraf name and description
-      cy.getByTitle('Telegraf Configuration Name')
+      cy.getByTestID('plugin-create-configuration-customize-input--name')
         .clear()
         .type('Telegraf from bucket')
-      cy.getByTitle('Telegraf Configuration Description')
+      cy.getByTestID('plugin-create-configuration-customize-input--description')
         .clear()
         .type('This is a telegraf description')
-      cy.getByTestID('next').click()
+      cy.getByTestID('plugin-create-configuration-save-and-test').click()
+
+      cy.getByTestID('notification-success').should('be.visible')
 
-      // assert notifications
-      cy.getByTestID('notification-success').should(
-        'contain',
-        'Your configurations have been saved'
-      )
-      cy.getByTestID('notification-success').should(
-        'contain',
-        'Successfully created dashboards for telegraf plugin: system.'
-      )
       cy.getByTestID('next').click()
 
       // assert telegraf card parameters

src/buckets/components/BucketCardActions.tsx

@@ -16,7 +16,10 @@ import InlineLabels from 'src/shared/components/inlineLabels/InlineLabels'
 // Actions
 import {addBucketLabel, deleteBucketLabel} from 'src/buckets/actions/thunks'
 import {setBucketInfo} from 'src/dataLoaders/actions/steps'
-import {setDataLoadersType} from 'src/dataLoaders/actions/dataLoaders'
+import {
+  setDataLoadersType,
+  setLocationOnDismiss,
+} from 'src/dataLoaders/actions/dataLoaders'
 import {event} from 'src/cloud/utils/reporting'
 
 // Types
@@ -48,6 +51,7 @@ const BucketCardActions: FC<Props> = ({
   history,
   onSetDataLoadersBucket,
   onSetDataLoadersType,
+  setLocationOnDismiss,
 }) => {
   if (bucketType === 'system') {
     return null
@@ -76,7 +80,8 @@ const BucketCardActions: FC<Props> = ({
     onSetDataLoadersBucket(orgID, bucket.name, bucket.id)
 
     onSetDataLoadersType(DataLoaderType.Streaming)
-    history.push(`/orgs/${orgID}/load-data/buckets/${bucket.id}/telegrafs/new`)
+    setLocationOnDismiss(`/orgs/${orgID}/load-data/buckets`)
+    history.push(`/orgs/${orgID}/load-data/telegrafs/new`)
   }
 
   const handleAddLineProtocol = () => {
@@ -153,6 +158,7 @@ const mdtp = {
   onDeleteBucketLabel: deleteBucketLabel,
   onSetDataLoadersBucket: setBucketInfo,
   onSetDataLoadersType: setDataLoadersType,
+  setLocationOnDismiss,
 }
 
 const connector = connect(null, mdtp)

src/dataLoaders/actions/dataLoaders.ts

@@ -88,6 +88,7 @@ export type Action =
   | SetTelegrafConfigName
   | SetTelegrafConfigDescription
   | SetToken
+  | SetLocationOnDismiss
 
 interface SetDataLoadersType {
   type: 'SET_DATA_LOADERS_TYPE'
@@ -669,3 +670,14 @@ export const saveScraperTarget = () => async (
     console.error()
   }
 }
+
+interface SetLocationOnDismiss {
+  type: 'SET_LOCATION_ON_DISMISS'
+  payload: {locationOnDismiss: string}
+}
+export const setLocationOnDismiss = (
+  locationOnDismiss: string
+): SetLocationOnDismiss => ({
+  type: 'SET_LOCATION_ON_DISMISS',
+  payload: {locationOnDismiss},
+})

src/dataLoaders/components/collectorsWizard/TelegrafUIRefreshWizard.tsx

@@ -26,7 +26,6 @@ import {
   clearSteps,
   decrementCurrentStepIndex,
   incrementCurrentStepIndex,
-  setBucketInfo,
   setCurrentStepIndex,
   setSubstepIndex,
 } from 'src/dataLoaders/actions/steps'
@@ -60,10 +59,8 @@ class TelegrafUIRefreshWizard extends PureComponent<Props> {
   }
 
   public componentDidMount() {
-    this.props.clearDataLoaders()
     this.props.onSetCurrentStepIndex(0)
     this.props.onSetSubstepIndex(0, 0)
-    this.props.setBucketInfo('', '', '')
   }
 
   public render() {
@@ -99,12 +96,15 @@ class TelegrafUIRefreshWizard extends PureComponent<Props> {
   }
 
   private handleDismiss = () => {
-    const {history, org} = this.props
+    const {history, locationOnDismiss, org} = this.props
     const {clearDataLoaders, onClearSteps} = this.props
     clearDataLoaders()
     onClearSteps()
     this.setState({isVisible: false})
-    history.push(`/orgs/${org.id}/load-data/telegrafs`)
+    const location = locationOnDismiss
+      ? locationOnDismiss
+      : `/orgs/${org.id}/load-data/telegrafs`
+    history.push(location)
   }
 
   private handleSetIsValidConfiguration = (isValid: boolean) => {
@@ -150,7 +150,7 @@ class TelegrafUIRefreshWizard extends PureComponent<Props> {
 const mstp = (state: AppState) => {
   const {
     dataLoading: {
-      dataLoaders: {telegrafPlugins},
+      dataLoaders: {locationOnDismiss, telegrafPlugins},
       steps: {currentStep, substep = 0, bucket},
     },
     me: {name},
@@ -166,14 +166,15 @@ const mstp = (state: AppState) => {
   const org = getOrg(state)
 
   return {
-    telegrafPlugins,
-    text: telegrafEditor.text,
-    currentStepIndex: currentStep,
-    substepIndex: typeof substep === 'number' ? substep : 0,
-    username: name,
     bucket,
     buckets: nonSystemBuckets,
+    currentStepIndex: currentStep,
+    locationOnDismiss,
     org,
+    substepIndex: typeof substep === 'number' ? substep : 0,
+    telegrafPlugins,
+    text: telegrafEditor.text,
+    username: name,
   }
 }
 
@@ -185,7 +186,6 @@ const mdtp = {
   onIncrementCurrentStepIndex: incrementCurrentStepIndex,
   onSetCurrentStepIndex: setCurrentStepIndex,
   onSetSubstepIndex: setSubstepIndex,
-  setBucketInfo,
 }
 
 const connector = connect(mstp, mdtp)

src/dataLoaders/components/collectorsWizard/select/TelegrafUIRefreshCollectorsStep.tsx

@@ -37,7 +37,14 @@ type Props = OwnProps & ReduxProps
 
 @ErrorHandling
 export class SelectCollectorsStep extends PureComponent<Props, State> {
-  state = {selectedBucketName: ''}
+  constructor(props: Props) {
+    super(props)
+    const {bucketID, buckets} = this.props
+
+    const selectedBucketName =
+      buckets.find(bucket => bucket.id === bucketID)?.name ?? ''
+    this.state = {selectedBucketName}
+  }
 
   public componentDidUpdate() {
     const {setIsValidConfiguration} = this.props

src/dataLoaders/reducers/dataLoaders.ts

@@ -36,6 +36,7 @@ export const INITIAL_STATE: DataLoadersState = {
   telegrafConfigName: 'Name this Configuration',
   telegrafConfigDescription: '',
   token: '',
+  locationOnDismiss: '',
 }
 
 export default (state = INITIAL_STATE, action: Action): DataLoadersState => {
@@ -316,6 +317,12 @@ export default (state = INITIAL_STATE, action: Action): DataLoadersState => {
         ...state,
         token: action.payload.token,
       }
+
+    case 'SET_LOCATION_ON_DISMISS':
+      return {
+        ...state,
+        locationOnDismiss: action.payload.locationOnDismiss,
+      }
     default:
       return state
   }

src/types/dataLoaders.ts

@@ -24,14 +24,15 @@ interface ScraperTarget {
 }
 
 export interface DataLoadersState {
-  telegrafPlugins: TelegrafPlugin[]
+  locationOnDismiss: string
   pluginBundles: BundleName[]
-  type: DataLoaderType
-  telegrafConfigID: string
   scraperTarget: ScraperTarget
-  telegrafConfigName: string
   telegrafConfigDescription: string
+  telegrafConfigID: string
+  telegrafConfigName: string
+  telegrafPlugins: TelegrafPlugin[]
   token: string
+  type: DataLoaderType
 }
 
 export enum ConfigurationState {

src/writeData/components/PluginCreateConfiguration/Footer.tsx

@@ -11,15 +11,18 @@ import {
 } from '@influxdata/clockface'
 
 // Actions
-import {createOrUpdateTelegrafConfigAsync} from 'src/dataLoaders/actions/dataLoaders'
+import {
+  createOrUpdateTelegrafConfigAsync,
+  setLocationOnDismiss,
+} from 'src/dataLoaders/actions/dataLoaders'
+import {setBucketInfo} from 'src/dataLoaders/actions/steps'
 import {updateTelegraf} from 'src/telegrafs/actions/thunks'
 
 // Types
 import {AppState, ResourceType, Telegraf} from 'src/types'
 import {PluginConfigurationStepProps} from 'src/writeData/components/AddPluginToConfiguration'
 
 // Selectors
-import {getDataLoaders} from 'src/dataLoaders/selectors'
 import {getAll} from 'src/resources/selectors'
 import {getQuartzMe} from 'src/me/selectors'
 
@@ -47,9 +50,12 @@ const FooterComponent: FC<Props> = props => {
     onIncrementCurrentStepIndex,
     onSaveTelegrafConfig,
     onUpdateTelegraf,
+    orgID,
     pluginConfig,
     pluginConfigName,
+    setBucketInfo,
     setIsValidConfiguration,
+    setLocationOnDismiss,
     substepIndex,
     telegrafConfig,
   } = props
@@ -86,6 +92,8 @@ const FooterComponent: FC<Props> = props => {
 
   const handleSaveAndTest = () => {
     onSaveTelegrafConfig()
+    setBucketInfo('', '', '')
+    setLocationOnDismiss(`/orgs/${orgID}/load-data/telegrafs`)
     onIncrementCurrentStepIndex()
   }
 
@@ -149,7 +157,12 @@ const FooterComponent: FC<Props> = props => {
 }
 
 const mstp = (state: AppState) => {
-  const {telegrafConfigID} = getDataLoaders(state)
+  const {
+    dataLoading: {
+      dataLoaders: {telegrafConfigID},
+      steps: {orgID},
+    },
+  } = state
   const accountType = getQuartzMe(state)?.accountType ?? 'free'
   let telegrafConfig = null
   if (telegrafConfigID) {
@@ -158,12 +171,14 @@ const mstp = (state: AppState) => {
       telegraf => telegraf.id === telegrafConfigID
     )
   }
-  return {accountType, telegrafConfig}
+  return {accountType, orgID, telegrafConfig}
 }
 
 const mdtp = {
   onSaveTelegrafConfig: createOrUpdateTelegrafConfigAsync,
   onUpdateTelegraf: updateTelegraf,
+  setBucketInfo,
+  setLocationOnDismiss,
 }
 
 const connector = connect(mstp, mdtp)