feat(ui): tweak telegraf nginx and redis flows

CHANGELOG.md

@@ -8,6 +8,7 @@
 ### UI Improvements
 1. [15503](https://github.com/influxdata/influxdb/pull/15503): Redesign page headers to be more space efficient
 1. [15426](https://github.com/influxdata/influxdb/pull/15426): Add 403 handler that redirects back to the sign-in page on oats-generated routes.
+1. [15710](https://github.com/influxdata/influxdb/pull/15710): Add button to nginx and redis configuration sections to make interaction more clear
 
 ### Bug Fixes
 

ui/cypress/e2e/collectors.test.ts

@@ -253,4 +253,121 @@ describe('Collectors', () => {
       })
     })
   })
+
+  describe('configuring plugins', () => {
+    // fix for https://github.com/influxdata/influxdb/issues/15500
+    describe('configuring nginx', () => {
+      beforeEach(() => {
+        // These clicks launch move through configuration modals rather than navigate to new pages
+        cy.contains('Create Configuration')
+          .click()
+          .then(() => {
+            cy.contains('NGINX')
+              .click()
+              .then(() => {
+                cy.contains('Continue')
+                  .click()
+                  .then(() => {
+                    cy.contains('nginx').click()
+                  })
+              })
+          })
+      })
+
+      it('can add and delete urls', () => {
+        cy.getByTestID('input-field').type('http://localhost:9999')
+        cy.contains('Add').click()
+
+        cy.contains('http://localhost:9999').should('exist', () => {
+          cy.getByTestID('input-field').type('http://example.com')
+          cy.contains('Add').click()
+
+          cy.contains('http://example.com')
+            .should('exist')
+            .then($example => {
+              $example.contains('Delete').click()
+              $example.contains('Confirm').click()
+
+              cy.contains('http://example').should('not.exist')
+
+              cy.contains('Done')
+                .click()
+                .then(() => {
+                  cy.get('.icon.checkmark').should('exist')
+                })
+            })
+        })
+      })
+
+      it('handles busted input', () => {
+        // do nothing when clicking done with no urls
+        cy.contains('Done').click()
+        cy.contains('Done').should('exist')
+        cy.contains('Nginx').should('exist')
+
+        cy.getByTestID('input-field').type('youre mom')
+        cy.contains('Add').click()
+
+        cy.contains('youre mom')
+          .should('exist')
+          .then(() => {
+            cy.contains('Done')
+              .click()
+              .then(() => {
+                cy.get('.icon.remove').should('exist')
+              })
+          })
+      })
+    })
+
+    // redis was affected by the change that was written to address https://github.com/influxdata/influxdb/issues/15500
+    describe('configuring redis', () => {
+      beforeEach(() => {
+        // These clicks launch move through configuration modals rather than navigate to new pages
+        cy.contains('Create Configuration')
+          .click()
+          .then(() => {
+            cy.contains('Redis')
+              .click()
+              .then(() => {
+                cy.contains('Continue')
+                  .click()
+                  .then(() => {
+                    cy.contains('redis').click()
+                  })
+              })
+          })
+      })
+
+      it('can add and delete urls', () => {
+        cy.get('input[title="servers"]').type('michael collins')
+        cy.contains('Add').click()
+
+        cy.contains('michael collins').should('exist', () => {
+          cy.get('input[title="servers"]').type('alan bean')
+          cy.contains('Add').click()
+
+          cy.contains('alan bean')
+            .should('exist')
+            .then($server => {
+              $server.contains('Delete').click()
+              $server.contains('Confirm').click()
+              cy.contains('alan bean').should('not.exist')
+
+              cy.contains('Done').click()
+              cy.get('.icon.checkmark').should('exist')
+            })
+        })
+      })
+
+      it('does nothing when clicking done with no urls', () => {
+        cy.contains('Done')
+          .click()
+          .then(() => {
+            cy.contains('Done').should('exist')
+            cy.contains('Redis').should('exist')
+          })
+      })
+    })
+  })
 })

ui/src/clockface/components/inputs/multipleInput/MultipleInput.tsx

@@ -3,7 +3,7 @@ import React, {PureComponent, ChangeEvent} from 'react'
 import _ from 'lodash'
 
 // Components
-import {Form, Input, Grid} from '@influxdata/clockface'
+import {Button, Form, Input, Grid} from '@influxdata/clockface'
 import Rows from 'src/clockface/components/inputs/multipleInput/MultipleRows'
 
 // Utils
@@ -11,11 +11,12 @@ import {validateURI} from 'src/shared/utils/validateURI'
 
 // Types
 import {
-  Columns,
-  InputType,
   AutoComplete,
+  Columns,
+  ComponentColor,
   ComponentSize,
   ComponentStatus,
+  InputType,
 } from '@influxdata/clockface'
 
 // Decorators
@@ -53,11 +54,14 @@ interface State {
 @ErrorHandling
 class MultipleInput extends PureComponent<Props, State> {
   private debouncedValidate: (value: string) => void
+  private inputRef
 
   constructor(props: Props) {
     super(props)
     this.state = {editingText: '', status: ComponentStatus.Default}
 
+    this.inputRef = React.createRef()
+
     this.debouncedValidate = _.debounce(
       this.handleValidateURI,
       VALIDATE_DEBOUNCE_MS
@@ -71,7 +75,7 @@ class MultipleInput extends PureComponent<Props, State> {
     return (
       <Grid>
         <Grid.Row>
-          <Grid.Column widthXS={Columns.Ten} offsetXS={Columns.One}>
+          <Grid.Column widthXS={Columns.Eight} offsetXS={Columns.One}>
             <Form.Element label={title} key={title} helpText={helpText}>
               <Input
                 placeholder={`Type and hit 'Enter' to add to list of ${title}`}
@@ -84,8 +88,28 @@ class MultipleInput extends PureComponent<Props, State> {
                 onChange={this.handleInputChange}
                 size={ComponentSize.Medium}
                 titleText={title}
+                ref={this.inputRef}
               />
             </Form.Element>
+          </Grid.Column>
+          <Grid.Column widthXS={Columns.Two}>
+            <Form.Element
+              key="submit"
+              label="&nbsp;"
+              style={{minHeight: '15px'}}
+            >
+              <Button
+                color={ComponentColor.Secondary}
+                onClick={this.handleSubmit}
+                size={ComponentSize.Medium}
+                text="Add"
+                titleText={`Add to list of ${title}`}
+              />
+            </Form.Element>
+          </Grid.Column>
+        </Grid.Row>
+        <Grid.Row>
+          <Grid.Column widthXS={Columns.Ten} offsetXS={Columns.One}>
             <Rows
               tags={tags}
               onDeleteTag={this.handleDeleteRow}
@@ -107,6 +131,17 @@ class MultipleInput extends PureComponent<Props, State> {
     }
   }
 
+  private handleSubmit = e => {
+    e.preventDefault()
+    const newItem = this.inputRef.current.value.trim()
+    const {tags, onAddRow} = this.props
+    if (!this.shouldAddToList(newItem, tags)) {
+      return
+    }
+    this.setState({editingText: ''})
+    onAddRow(this.inputRef.current.value)
+  }
+
   private handleKeyDown = e => {
     if (e.key === 'Enter') {
       e.preventDefault()

ui/src/dataLoaders/components/collectorsWizard/configure/PluginConfigForm.tsx

@@ -89,6 +89,9 @@ export class PluginConfigForm extends PureComponent<Props> {
 
     const activeTelegrafPlugin = telegrafPlugins.find(tp => tp.active)
     if (!!activeTelegrafPlugin) {
+      if (!activeTelegrafPlugin.hasOwnProperty('plugin')) {
+        return
+      }
       onSetPluginConfiguration(activeTelegrafPlugin.name)
     }
 

ui/src/dataLoaders/components/configureStep/streaming/ConfigFieldSwitcher.test.tsx

@@ -77,7 +77,7 @@ describe('Onboarding.Components.ConfigureStep.Streaming.ConfigFieldSwitcher', ()
       const {wrapper} = setup({fieldName, fieldType, value}, true)
 
       const input = wrapper.find(ArrayFormElement)
-      const formElement = wrapper.find(FormElement)
+      const formElement = wrapper.find(FormElement).first()
 
       expect(input.exists()).toBe(true)
       expect(formElement.prop('helpText')).toBe('')
@@ -93,7 +93,7 @@ describe('Onboarding.Components.ConfigureStep.Streaming.ConfigFieldSwitcher', ()
       )
 
       const input = wrapper.find(ArrayFormElement)
-      const formElement = wrapper.find(FormElement)
+      const formElement = wrapper.find(FormElement).first()
 
       expect(wrapper.exists()).toBe(true)
       expect(input.exists()).toBe(true)