fix(ui): Hooks create page fix

PulseBindings component was expecting non-empty autocompletion list.
That was only passed on the Pulse Exchanges page but not on the Hooks
Create/Edit page.

Author: lotas

changelog/bnW-iDD1R0-0D7rBUNF0Zw.md

@@ -0,0 +1,5 @@
+audience: users
+level: patch
+---
+
+Fixes UI bug with hooks creation form, where changing Exchange input resulted in error message.

ui/src/components/HookForm/index.jsx

@@ -1,5 +1,13 @@
 import React, { Component, Fragment } from 'react';
-import { func, string, bool, oneOfType, object, array } from 'prop-types';
+import {
+  func,
+  string,
+  bool,
+  oneOfType,
+  object,
+  array,
+  arrayOf,
+} from 'prop-types';
 import classNames from 'classnames';
 import { equals, assocPath } from 'ramda';
 import cloneDeep from 'lodash.clonedeep';
@@ -194,6 +202,8 @@ export default class HookForm extends Component {
      * onComplete handler after successfully deleting a hook.
      * */
     onDialogActionDeleteComplete: func,
+    /** Autocomplete values for exchanges input */
+    exchangesDictionary: arrayOf(string),
   };
 
   static defaultProps = {
@@ -210,6 +220,7 @@ export default class HookForm extends Component {
     onDialogDeleteHook: null,
     deleteDialogOpen: null,
     onDialogActionDeleteComplete: null,
+    exchangesDictionary: [],
   };
 
   state = {
@@ -536,6 +547,7 @@ export default class HookForm extends Component {
       onDialogActionDeleteComplete,
       onDialogDeleteHook,
       onDialogOpen,
+      exchangesDictionary,
     } = this.props;
     const {
       routingKeyPattern,
@@ -719,6 +731,7 @@ export default class HookForm extends Component {
                   onPulseExchangeChange={this.handlePulseExchangeChange}
                   pulseExchange={pulseExchange}
                   pattern={routingKeyPattern}
+                  exchangesDictionary={exchangesDictionary}
                 />
               }
             />

ui/src/components/PulseBindings/index.jsx

@@ -76,7 +76,7 @@ export default class PulseBindings extends Component {
           <div className={classes.inputList}>
             <Autocomplete
               freeSolo
-              options={exchangesDictionary}
+              options={exchangesDictionary || []}
               inputValue={pulseExchange}
               onInputChange={(event, newValue) =>
                 onPulseExchangeChange({

ui/src/views/Hooks/ViewHook/index.jsx

@@ -10,6 +10,7 @@ import createHookQuery from './createHook.graphql';
 import deleteHookQuery from './deleteHook.graphql';
 import updateHookQuery from './updateHook.graphql';
 import triggerHookQuery from './triggerHook.graphql';
+import exchangesList from '../../../utils/exchangesList';
 
 @withApollo
 @graphql(hookQuery, {
@@ -34,8 +35,15 @@ export default class ViewHook extends Component {
       variant: 'success',
       open: false,
     },
+    exchangesDictionary: null,
   };
 
+  async componentDidMount() {
+    this.setState({
+      exchangesDictionary: await exchangesList(),
+    });
+  }
+
   preRunningAction = () => {
     this.setState({ dialogError: null, actionLoading: true });
   };
@@ -164,6 +172,7 @@ export default class ViewHook extends Component {
       deleteDialogOpen,
       dialogOpen,
       snackbar,
+      exchangesDictionary,
     } = this.state;
     const error = (data && data.error) || err;
     const hookLastFires =
@@ -183,6 +192,7 @@ export default class ViewHook extends Component {
               dialogError={dialogError}
               actionLoading={actionLoading}
               onCreateHook={this.handleCreateHook}
+              exchangesDictionary={exchangesDictionary}
             />
           </Fragment>
         ) : (
@@ -206,6 +216,7 @@ export default class ViewHook extends Component {
                 onDialogActionError={this.handleDialogActionError}
                 onDialogOpen={this.handleDialogOpen}
                 onDialogDeleteHook={this.handleDeleteDialogHook}
+                exchangesDictionary={exchangesDictionary}
               />
             )}
           </Fragment>