In webhooks UI handle error if channel can't be found, also use display name over url name, plus warning fixes

3 files changed, 62 insertions, 26 deletions

diff --git a/web/react/components/user_settings/manage_incoming_hooks.jsx b/web/react/components/user_settings/manage_incoming_hooks.jsx
index f5a2774a0..812169be4 100644
--- a/web/react/components/user_settings/manage_incoming_hooks.jsx
+++ b/web/react/components/user_settings/manage_incoming_hooks.jsx
@@ -96,7 +96,14 @@ export default class ManageIncomingHooks extends React.Component {
         const options = [];
         channels.forEach((channel) => {
             if (channel.type !== Constants.DM_CHANNEL) {
-                options.push(<option value={channel.id}>{channel.name}</option>);
+                options.push(
+                    <option
+                        key={'incoming-hook' + channel.id}
+                        value={channel.id}
+                    >
+                        {channel.display_name}
+                    </option>
+                );
             }
         });
 
@@ -108,26 +115,31 @@ export default class ManageIncomingHooks extends React.Component {
         const hooks = [];
         this.state.hooks.forEach((hook) => {
             const c = ChannelStore.get(hook.channel_id);
-            hooks.push(
-                <div className='font--small'>
-                    <div className='padding-top x2 divider-light'></div>
-                    <div className='padding-top x2'>
-                        <strong>{'URL: '}</strong><span className='word-break--all'>{Utils.getWindowLocationOrigin() + '/hooks/' + hook.id}</span>
-                    </div>
-                    <div className='padding-top'>
-                        <strong>{'Channel: '}</strong>{c.name}
-                    </div>
-                    <div className='padding-top'>
-                        <a
-                            className={'text-danger'}
-                            href='#'
-                            onClick={this.removeHook.bind(this, hook.id)}
-                        >
-                            {'Remove'}
-                        </a>
+            if (c) {
+                hooks.push(
+                    <div
+                        key={hook.id}
+                        className='font--small'
+                    >
+                        <div className='padding-top x2 divider-light'></div>
+                        <div className='padding-top x2'>
+                            <strong>{'URL: '}</strong><span className='word-break--all'>{Utils.getWindowLocationOrigin() + '/hooks/' + hook.id}</span>
+                        </div>
+                        <div className='padding-top'>
+                            <strong>{'Channel: '}</strong>{c.display_name}
+                        </div>
+                        <div className='padding-top'>
+                            <a
+                                className={'text-danger'}
+                                href='#'
+                                onClick={this.removeHook.bind(this, hook.id)}
+                            >
+                                {'Remove'}
+                            </a>
+                        </div>
                     </div>
-                </div>
-            );
+                );
+            }
         });
 
         let displayHooks;
diff --git a/web/react/components/user_settings/manage_outgoing_hooks.jsx b/web/react/components/user_settings/manage_outgoing_hooks.jsx
index e83ae3bd6..f6d6b515b 100644
--- a/web/react/components/user_settings/manage_outgoing_hooks.jsx
+++ b/web/react/components/user_settings/manage_outgoing_hooks.jsx
@@ -128,21 +128,42 @@ export default class ManageOutgoingHooks extends React.Component {
         }
 
         const channels = ChannelStore.getAll();
-        const options = [<option value=''>{'--- Select a channel ---'}</option>];
+        const options = [];
+        options.push(
+            <option
+                key='select-channel'
+                value=''
+            >
+                {'--- Select a channel ---'}
+            </option>
+        );
+
         channels.forEach((channel) => {
             if (channel.type === Constants.OPEN_CHANNEL) {
-                options.push(<option value={channel.id}>{channel.name}</option>);
+                options.push(
+                    <option
+                        key={'outgoing-hook' + channel.id}
+                        value={channel.id}
+                    >
+                        {channel.display_name}
+                    </option>
+                );
             }
         });
 
         const hooks = [];
         this.state.hooks.forEach((hook) => {
             const c = ChannelStore.get(hook.channel_id);
+
+            if (!c && hook.channel_id && hook.channel_id.length !== 0) {
+                return;
+            }
+
             let channelDiv;
             if (c) {
                 channelDiv = (
                     <div className='padding-top'>
-                        <strong>{'Channel: '}</strong>{c.name}
+                        <strong>{'Channel: '}</strong>{c.display_name}
                     </div>
                 );
             }
@@ -157,7 +178,10 @@ export default class ManageOutgoingHooks extends React.Component {
             }
 
             hooks.push(
-                <div className='font--small'>
+                <div
+                    key={hook.id}
+                    className='font--small'
+                >
                     <div className='padding-top x2 divider-light'></div>
                     <div className='padding-top x2'>
                         <strong>{'URLs: '}</strong><span className='word-break--all'>{hook.callback_urls.join(', ')}</span>
diff --git a/web/react/components/user_settings/user_settings_integrations.jsx b/web/react/components/user_settings/user_settings_integrations.jsx
index 231580cc3..1845ca28c 100644
--- a/web/react/components/user_settings/user_settings_integrations.jsx
+++ b/web/react/components/user_settings/user_settings_integrations.jsx
@@ -37,7 +37,7 @@ export default class UserSettingsIntegrationsTab extends React.Component {
         if (global.window.config.EnableIncomingWebhooks === 'true') {
             if (this.props.activeSection === 'incoming-hooks') {
                 inputs.push(
-                    <ManageIncomingHooks />
+                    <ManageIncomingHooks key='incoming-hook-ui' />
                 );
 
                 incomingHooksSection = (
@@ -68,7 +68,7 @@ export default class UserSettingsIntegrationsTab extends React.Component {
         if (global.window.config.EnableOutgoingWebhooks === 'true') {
             if (this.props.activeSection === 'outgoing-hooks') {
                 inputs.push(
-                    <ManageOutgoingHooks />
+                    <ManageOutgoingHooks key='outgoing-hook-ui' />
                 );
 
                 outgoingHooksSection = (