fix(ui): fix telegraf setup link

ui/cypress/e2e/collectors.test.ts

@@ -80,7 +80,7 @@ describe('Collectors', () => {
       cy.getByTestID('collector-card--name').should('contain', newConfigName)
     })
 
-    it.skip('can delete a telegraf config', () => {
+    it('can delete a telegraf config', () => {
       const telegrafConfigName = 'New Config'
       const description = 'Config Description'
 
@@ -89,13 +89,38 @@ describe('Collectors', () => {
         cy.createTelegraf(telegrafConfigName, description, id)
       })
 
-      cy.getByTestID('table-row').should('have.length', 2)
+      cy.getByTestID('resource-card').should('have.length', 2)
 
-      cy.getByTestID('confirmation-button')
+      cy.getByTestID('context-menu')
         .last()
         .click({force: true})
 
-      cy.getByTestID('table-row').should('have.length', 1)
+      cy.getByTestID('context-menu-item')
+        .last()
+        .click({force: true})
+
+      cy.getByTestID('resource-card').should('have.length', 1)
+    })
+
+    it('can view setup instructions for a config', () => {
+      const telegrafConfigName = 'New Config'
+      const description = 'Config Description'
+
+      cy.get<Organization>('@org').then(({id}) => {
+        cy.createTelegraf(telegrafConfigName, description, id)
+      })
+
+      cy.getByTestID('resource-card').should('have.length', 1)
+
+      cy.getByTestID('setup-instructions-link').click()
+
+      cy.getByTestID('setup-instructions').should('exist')
+
+      cy.getByTestID('overlay--header')
+        .find('button')
+        .click()
+
+      cy.getByTestID('setup-instructions').should('not.exist')
     })
   })
 })

ui/src/dataLoaders/components/verifyStep/TelegrafInstructions.tsx

@@ -22,7 +22,7 @@ class TelegrafInstructions extends PureComponent<Props> {
       this.origin
     }/api/v2/telegrafs/${configID || ''}`
     return (
-      <div className="wizard-step--body">
+      <div className="wizard-step--body" data-testid="setup-instructions">
         <h6>1. Install the Latest Telegraf</h6>
         <p>
           You can install the latest Telegraf by visiting the{' '}

ui/src/dataLoaders/components/verifyStep/__snapshots__/TelegrafInstructions.test.tsx.snap

@@ -3,6 +3,7 @@
 exports[`TelegrafInstructions matches snapshot 1`] = `
 <div
   className="wizard-step--body"
+  data-testid="setup-instructions"
 >
   <h6>
     1. Install the Latest Telegraf

ui/src/telegrafs/components/CollectorCard.tsx

@@ -77,7 +77,12 @@ class CollectorRow extends PureComponent<Props & WithRouterProps> {
         metaData={[
           <>Bucket: {bucket}</>,
           <>
-            <Link to={`/orgs/${org.id}/telegrafs/${collector.id}/instructions`}>
+            <Link
+              to={`/orgs/${org.id}/load-data/telegrafs/${
+                collector.id
+              }/instructions`}
+              data-testid="setup-instructions-link"
+            >
               Setup Instructions
             </Link>
           </>,

ui/src/telegrafs/components/TelegrafInstructionsOverlay.tsx

@@ -83,7 +83,7 @@ export class TelegrafInstructionsOverlay extends PureComponent<
       collectorID: null,
     })
 
-    router.push(`/orgs/${orgID}/telegrafs/`)
+    router.push(`/orgs/${orgID}/load-data/telegrafs/`)
   }
 }