fix(3873/3874/3876): secrets in http alerts (#3912)

Author: wiedld

cypress/e2e/shared/flowsAlerts.test.ts

@@ -219,8 +219,9 @@ describe('flows alert panel', () => {
     cy.getByTestID('dropdown-item--http').click()
     cy.getByTestID('option--bearer').click()
     cy.getByTestID('input--url').clear()
-    cy.getByTestID('input--url').type(fakeUrl)
-    cy.getByTestID('input--token').type('fake-token')
+    cy.getByTestID('input--url').click()
+    cy.getByTestID('dropdown--token').click()
+    cy.getByTestID('dropdown-item--mySecret').click()
 
     cy.getByTestID('task-form-save').click()
     /* NOTE: we used to be able to test that the generated flux contained the the

src/flows/pipes/Notification/endpoints/HTTP/index.ts

@@ -8,26 +8,39 @@ export default register => {
     name: 'HTTP Post',
     data: {
       auth: 'none',
+      username: '',
+      password: '',
+      token: '',
       url: 'https://www.example.com/endpoint',
     },
     component: View,
     readOnlyComponent: ReadOnly,
     generateImports: () =>
-      ['http', 'json'].map(i => `import "${i}"`).join('\n'),
+      ['http', 'influxdata/influxdb/secrets', 'json']
+        .map(i => `import "${i}"`)
+        .join('\n'),
     generateTestImports: () =>
-      ['array', 'http', 'json'].map(i => `import "${i}"`).join('\n'),
+      ['array', 'http', 'influxdata/influxdb/secrets', 'json']
+        .map(i => `import "${i}"`)
+        .join('\n'),
     generateQuery: data => {
       const headers = [['"Content-Type"', '"application/json"']]
+      let prefixSecrets = ''
 
       if (data.auth === 'basic') {
-        headers.push([
-          'Authorization',
-          `http.basicAuth(u:"${data.username}", p:"${data.password}")`,
-        ])
+        headers.push(['Authorization', 'auth'])
+        prefixSecrets = `
+          username = secrets.get(key: "${data.username}")
+          password = secrets.get(key: "${data.password}")
+          auth = http.basicAuth(u: username, p: password)
+        `
       }
 
       if (data.auth === 'bearer') {
-        headers.push(['Authorization', `"Bearer ${data.token}"`])
+        headers.push(['Authorization', `"Bearer \${token}"`])
+        prefixSecrets = `
+          token = secrets.get(key: "${data.token}")
+        `
       }
 
       const _headers = headers
@@ -37,33 +50,42 @@ export default register => {
         }, [])
         .join(', ')
 
-      const out = `task_data
-	|> schema["fieldsAsCols"]()
-      |> set(key: "_notebook_link", value: "${window.location.href}")
-	|> monitor["check"](
-		data: check,
-		messageFn: messageFn,
-		crit: trigger,
-	)
-  |> monitor["notify"](data: notification, endpoint: http.endpoint(url: "${data.url}")(
-    mapFn: (r) => {
-        body = {r with _version: 1}
-        return {headers: {${_headers}}, data: json.encode(v: body)}
-  }))`
+      const out = `
+        ${prefixSecrets}
+        task_data
+          |> schema["fieldsAsCols"]()
+              |> set(key: "_notebook_link", value: "${window.location.href}")
+          |> monitor["check"](
+            data: check,
+            messageFn: messageFn,
+            crit: trigger,
+          )
+          |> monitor["notify"](data: notification, endpoint: http.endpoint(url: "${data.url}")(
+            mapFn: (r) => {
+                body = {r with _version: 1}
+                return {headers: {${_headers}}, data: json.encode(v: body)}
+          }))
+      `
       return out
     },
     generateTestQuery: data => {
       const headers = [['"Content-Type"', '"application/json"']]
+      let prefixSecrets = ''
 
       if (data.auth === 'basic') {
-        headers.push([
-          'Authorization',
-          `http.basicAuth(u:"${data.username}", p:"${data.password}")`,
-        ])
+        headers.push(['Authorization', 'auth'])
+        prefixSecrets = `
+          username = secrets.get(key: "${data.username}")
+          password = secrets.get(key: "${data.password}")
+          auth = http.basicAuth(u: username, p: password)
+        `
       }
 
       if (data.auth === 'bearer') {
-        headers.push(['Authorization', `"Bearer ${data.token}"`])
+        headers.push(['Authorization', `"Bearer \${token}"`])
+        prefixSecrets = `
+          token = secrets.get(key: "${data.token}")
+        `
       }
 
       const _headers = headers
@@ -73,14 +95,16 @@ export default register => {
         }, [])
         .join(', ')
 
-      return `http.post(
-        url: "${data.url}",
-        headers: {${_headers}},
-        data: json.encode(v: { msg: "${TEST_NOTIFICATION}"})
-      )
-
-  array.from(rows: [{value: 0}])
-	|> yield(name: "ignore")`
+      return `
+        ${prefixSecrets}
+        http.post(
+          url: "${data.url}",
+          headers:  {${_headers}},
+          data: json.encode(v: { msg: "${TEST_NOTIFICATION}"})
+        )
+        array.from(rows: [{value: 0}])
+        |> yield(name: "ignore")
+      `
     },
   })
 }

src/flows/pipes/Notification/endpoints/HTTP/view.tsx

@@ -10,10 +10,11 @@ import {
   AlignItems,
 } from '@influxdata/clockface'
 
+import SecretsDropdown from 'src/secrets/components/SecretsDropdown'
 import {PipeContext} from 'src/flows/context/pipe'
 import {EndpointProps} from 'src/types'
 
-const View: FC<EndpointProps> = () => {
+const View: FC<EndpointProps> = ({createSecret, secrets}) => {
   const {data, update} = useContext(PipeContext)
 
   const updater = (field, value) => {
@@ -33,16 +34,16 @@ const View: FC<EndpointProps> = () => {
     updater('auth', auth)
   }
 
-  const updateUsername = evt => {
-    updater('username', evt.target.value)
+  const updateUsername = val => {
+    updater('username', val)
   }
 
-  const updatePassword = evt => {
-    updater('password', evt.target.value)
+  const updatePassword = val => {
+    updater('password', val)
   }
 
-  const updateToken = evt => {
-    updater('token', evt.target.value)
+  const updateToken = val => {
+    updater('token', val)
   }
 
   let submenu
@@ -51,37 +52,34 @@ const View: FC<EndpointProps> = () => {
     submenu = (
       <>
         <Form.Element label="Username">
-          <Input
-            name="username"
-            testID="input--username"
-            type={InputType.Text}
-            value={data.endpointData.username}
-            onChange={updateUsername}
-            size={ComponentSize.Medium}
+          <SecretsDropdown
+            testID="username"
+            selected={data.endpointData.username}
+            secrets={secrets}
+            onCreate={createSecret}
+            onSelect={updateUsername}
           />
         </Form.Element>
         <Form.Element label="Password">
-          <Input
-            name="password"
-            testID="input--password"
-            type={InputType.Text}
-            value={data.endpointData.password}
-            onChange={updatePassword}
-            size={ComponentSize.Medium}
+          <SecretsDropdown
+            testID="password"
+            selected={data.endpointData.password}
+            secrets={secrets}
+            onCreate={createSecret}
+            onSelect={updatePassword}
           />
         </Form.Element>
       </>
     )
   } else if (data.endpointData.auth === 'bearer') {
     submenu = (
       <Form.Element label="Token">
-        <Input
-          name="token"
-          testID="input--token"
-          type={InputType.Text}
-          value={data.endpointData.token}
-          onChange={updateToken}
-          size={ComponentSize.Medium}
+        <SecretsDropdown
+          testID="token"
+          selected={data.endpointData.token}
+          secrets={secrets}
+          onCreate={createSecret}
+          onSelect={updateToken}
         />
       </Form.Element>
     )