From 949a7875cdb2d2be212b6dc99a447eb2e32e6bb0 Mon Sep 17 00:00:00 2001
From: Austin DeNoble <119623786+austin-denoble@users.noreply.github.com>
Date: Thu, 20 Jul 2023 08:59:57 -0400
Subject: [PATCH] MM-47091 : Migrate
 "components/integrations/abstract_outgoing_webhook.jsx" and tests to
 TypeScript (#23977)

---
 ...> abstract_outgoing_webhook.test.tsx.snap} |  47 +++--
 .../abstract_incoming_hook.test.tsx           |   9 +-
 .../abstract_incoming_webhook.tsx             |   6 +-
 .../abstract_outgoing_webhook.test.jsx        |  42 ----
 .../abstract_outgoing_webhook.test.tsx        | 165 +++++++++++++++
 ...hook.jsx => abstract_outgoing_webhook.tsx} | 192 ++++++++++--------
 .../add_outgoing_webhook.tsx                  |   2 +-
 .../edit_outgoing_webhook.tsx                 |   2 +-
 8 files changed, 309 insertions(+), 156 deletions(-)
 rename webapp/channels/src/components/integrations/__snapshots__/{abstract_outgoing_webhook.test.jsx.snap => abstract_outgoing_webhook.test.tsx.snap} (92%)
 delete mode 100644 webapp/channels/src/components/integrations/abstract_outgoing_webhook.test.jsx
 create mode 100644 webapp/channels/src/components/integrations/abstract_outgoing_webhook.test.tsx
 rename webapp/channels/src/components/integrations/{abstract_outgoing_webhook.jsx => abstract_outgoing_webhook.tsx} (84%)

diff --git a/webapp/channels/src/components/integrations/__snapshots__/abstract_outgoing_webhook.test.jsx.snap b/webapp/channels/src/components/integrations/__snapshots__/abstract_outgoing_webhook.test.tsx.snap
similarity index 92%
rename from webapp/channels/src/components/integrations/__snapshots__/abstract_outgoing_webhook.test.jsx.snap
rename to webapp/channels/src/components/integrations/__snapshots__/abstract_outgoing_webhook.test.tsx.snap
index bba972e9de..ad4cdbde38 100644
--- a/webapp/channels/src/components/integrations/__snapshots__/abstract_outgoing_webhook.test.jsx.snap
+++ b/webapp/channels/src/components/integrations/__snapshots__/abstract_outgoing_webhook.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`components/integrations/AbstractOutgoingWebhook should match snapshot 1
 >
   <BackstageHeader>
     <Link
-      to="/test/integrations/outgoing_webhooks"
+      to="/team_name/integrations/outgoing_webhooks"
     >
       <MemoizedFormattedMessage
         defaultMessage="Outgoing Webhooks"
@@ -14,8 +14,8 @@ exports[`components/integrations/AbstractOutgoingWebhook should match snapshot 1
       />
     </Link>
     <MemoizedFormattedMessage
-      defaultMessage="add"
-      id="add"
+      defaultMessage="Header"
+      id="header_id"
     />
   </BackstageHeader>
   <div
@@ -43,10 +43,10 @@ exports[`components/integrations/AbstractOutgoingWebhook should match snapshot 1
           <input
             className="form-control"
             id="displayName"
-            maxLength="64"
+            maxLength={64}
             onChange={[Function]}
             type="text"
-            value=""
+            value="testOutgoingWebhook"
           />
           <div
             className="form__help"
@@ -76,10 +76,10 @@ exports[`components/integrations/AbstractOutgoingWebhook should match snapshot 1
           <input
             className="form-control"
             id="description"
-            maxLength="500"
+            maxLength={500}
             onChange={[Function]}
             type="text"
-            value=""
+            value="testing"
           />
           <div
             className="form__help"
@@ -109,7 +109,7 @@ exports[`components/integrations/AbstractOutgoingWebhook should match snapshot 1
           <select
             className="form-control"
             onChange={[Function]}
-            value="application/x-www-form-urlencoded"
+            value="test_content_type"
           >
             <option
               value="application/x-www-form-urlencoded"
@@ -164,10 +164,11 @@ exports[`components/integrations/AbstractOutgoingWebhook should match snapshot 1
           className="col-md-5 col-sm-8"
         >
           <Connect(ChannelSelect)
-            id="channelId"
             onChange={[Function]}
+            selectDm={false}
             selectOpen={true}
-            value=""
+            selectPrivate={false}
+            value="88cxd9wpzpbpfp8pad78xj75pr"
           />
           <div
             className="form__help"
@@ -197,10 +198,13 @@ exports[`components/integrations/AbstractOutgoingWebhook should match snapshot 1
           <textarea
             className="form-control"
             id="triggerWords"
-            maxLength="1000"
+            maxLength={1000}
             onChange={[Function]}
-            rows="3"
-            value=""
+            rows={3}
+            value="test
+trigger
+word
+"
           />
           <div
             className="form__help"
@@ -229,6 +233,7 @@ exports[`components/integrations/AbstractOutgoingWebhook should match snapshot 1
         >
           <select
             className="form-control"
+            id="triggerWhen"
             onChange={[Function]}
             value={0}
           >
@@ -271,10 +276,12 @@ exports[`components/integrations/AbstractOutgoingWebhook should match snapshot 1
           <textarea
             className="form-control"
             id="callbackUrls"
-            maxLength="1000"
+            maxLength={1000}
             onChange={[Function]}
-            rows="3"
-            value=""
+            rows={3}
+            value="callbackUrl1.com
+callbackUrl2.com
+"
           />
           <div
             className="form__help"
@@ -314,7 +321,7 @@ exports[`components/integrations/AbstractOutgoingWebhook should match snapshot 1
         />
         <Link
           className="btn btn-link btn-sm"
-          to="/test/integrations/outgoing_webhooks"
+          to="/team_name/integrations/outgoing_webhooks"
         >
           <MemoizedFormattedMessage
             defaultMessage="Cancel"
@@ -326,12 +333,12 @@ exports[`components/integrations/AbstractOutgoingWebhook should match snapshot 1
           id="saveWebhook"
           onClick={[Function]}
           spinning={false}
-          spinningText="loading"
+          spinningText="Loading"
           type="submit"
         >
           <MemoizedFormattedMessage
-            defaultMessage="save"
-            id="save"
+            defaultMessage="Footer"
+            id="footer_id"
           />
         </SpinnerButton>
       </div>
diff --git a/webapp/channels/src/components/integrations/abstract_incoming_hook.test.tsx b/webapp/channels/src/components/integrations/abstract_incoming_hook.test.tsx
index 514d2a0acc..3ab74467f5 100644
--- a/webapp/channels/src/components/integrations/abstract_incoming_hook.test.tsx
+++ b/webapp/channels/src/components/integrations/abstract_incoming_hook.test.tsx
@@ -9,6 +9,8 @@ import ChannelSelect from 'components/channel_select';
 import AbstractIncomingWebhook from 'components/integrations/abstract_incoming_webhook';
 import {Team} from '@mattermost/types/teams';
 
+type AbstractIncomingWebhookProps = React.ComponentProps<typeof AbstractIncomingWebhook>;
+
 describe('components/integrations/AbstractIncomingWebhook', () => {
     const team: Team = {id: 'team_id',
         create_at: 0,
@@ -55,7 +57,7 @@ describe('components/integrations/AbstractIncomingWebhook', () => {
         },
     );
 
-    const requiredProps = {
+    const requiredProps: AbstractIncomingWebhookProps = {
         team,
         header,
         footer,
@@ -80,10 +82,9 @@ describe('components/integrations/AbstractIncomingWebhook', () => {
     });
 
     test('should match snapshot, displays client error when no initial hook', () => {
-        const newInitialHook = {};
-        const props = {...requiredProps, initialHook: newInitialHook};
+        const props = {...requiredProps};
+        delete props.initialHook;
         const wrapper = shallow(<AbstractIncomingWebhook {...props}/>);
-
         wrapper.find('.btn-primary').simulate('click', {preventDefault() {
             return jest.fn();
         }});
diff --git a/webapp/channels/src/components/integrations/abstract_incoming_webhook.tsx b/webapp/channels/src/components/integrations/abstract_incoming_webhook.tsx
index cfeb445fff..6e3a2bc390 100644
--- a/webapp/channels/src/components/integrations/abstract_incoming_webhook.tsx
+++ b/webapp/channels/src/components/integrations/abstract_incoming_webhook.tsx
@@ -55,7 +55,7 @@ interface Props {
     /**
     * The hook used to set the initial state
     */
-    initialHook?: IncomingWebhook | Record<string, never>;
+    initialHook?: IncomingWebhook;
 
     /**
     * Whether to allow configuration of the default post username.
@@ -77,10 +77,10 @@ export default class AbstractIncomingWebhook extends PureComponent<Props, State>
     constructor(props: Props | Readonly<Props>) {
         super(props);
 
-        this.state = this.getStateFromHook(this.props.initialHook || {});
+        this.state = this.getStateFromHook(this.props.initialHook);
     }
 
-    getStateFromHook = (hook: IncomingWebhook | Record<string, never>) => {
+    getStateFromHook = (hook?: IncomingWebhook) => {
         return {
             displayName: hook?.display_name || '',
             description: hook?.description || '',
diff --git a/webapp/channels/src/components/integrations/abstract_outgoing_webhook.test.jsx b/webapp/channels/src/components/integrations/abstract_outgoing_webhook.test.jsx
deleted file mode 100644
index bbd11904db..0000000000
--- a/webapp/channels/src/components/integrations/abstract_outgoing_webhook.test.jsx
+++ /dev/null
@@ -1,42 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import React from 'react';
-import {shallow} from 'enzyme';
-
-import AbstractOutgoingWebhook from 'components/integrations/abstract_outgoing_webhook';
-
-describe('components/integrations/AbstractOutgoingWebhook', () => {
-    const emptyFunction = jest.fn();
-    const props = {
-        team: {
-            id: 'test-team-id',
-            name: 'test',
-        },
-        action: emptyFunction,
-        enablePostUsernameOverride: false,
-        enablePostIconOverride: false,
-        header: {id: 'add', defaultMessage: 'add'},
-        footer: {id: 'save', defaultMessage: 'save'},
-        loading: {id: 'loading', defaultMessage: 'loading'},
-        renderExtra: '',
-        serverError: '',
-    };
-
-    test('should match snapshot', () => {
-        const wrapper = shallow(<AbstractOutgoingWebhook {...props}/>);
-        expect(wrapper).toMatchSnapshot();
-    });
-
-    test('should render username in case of enablePostUsernameOverride is true ', () => {
-        const usernameTrueProps = {...props, enablePostUsernameOverride: true};
-        const wrapper = shallow(<AbstractOutgoingWebhook {...usernameTrueProps}/>);
-        expect(wrapper.find('#username')).toHaveLength(1);
-    });
-
-    test('should render username in case of enablePostUsernameOverride is true ', () => {
-        const iconUrlTrueProps = {...props, enablePostIconOverride: true};
-        const wrapper = shallow(<AbstractOutgoingWebhook {...iconUrlTrueProps}/>);
-        expect(wrapper.find('#iconURL')).toHaveLength(1);
-    });
-});
diff --git a/webapp/channels/src/components/integrations/abstract_outgoing_webhook.test.tsx b/webapp/channels/src/components/integrations/abstract_outgoing_webhook.test.tsx
new file mode 100644
index 0000000000..5370692752
--- /dev/null
+++ b/webapp/channels/src/components/integrations/abstract_outgoing_webhook.test.tsx
@@ -0,0 +1,165 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+import {shallow} from 'enzyme';
+
+import AbstractOutgoingWebhook from 'components/integrations/abstract_outgoing_webhook';
+import ChannelSelect from 'components/channel_select';
+import {Team} from '@mattermost/types/teams';
+
+describe('components/integrations/AbstractOutgoingWebhook', () => {
+    const team: Team = {
+        id: 'team_id',
+        create_at: 0,
+        update_at: 0,
+        delete_at: 0,
+        display_name: 'team_name',
+        name: 'team_name',
+        description: 'team_description',
+        email: 'team_email',
+        type: 'I',
+        company_name: 'team_company_name',
+        allowed_domains: 'team_allowed_domains',
+        invite_id: 'team_invite_id',
+        allow_open_invite: false,
+        scheme_id: 'team_scheme_id',
+        group_constrained: false,
+    };
+    const header = {id: 'header_id', defaultMessage: 'Header'};
+    const footer = {id: 'footer_id', defaultMessage: 'Footer'};
+    const loading = {id: 'loading_id', defaultMessage: 'Loading'};
+
+    const initialHook = {
+        display_name: 'testOutgoingWebhook',
+        channel_id: '88cxd9wpzpbpfp8pad78xj75pr',
+        creator_id: 'test_creator_id',
+        description: 'testing',
+        id: 'test_id',
+        team_id: 'test_team_id',
+        token: 'test_token',
+        trigger_words: ['test', 'trigger', 'word'],
+        trigger_when: 0,
+        callback_urls: ['callbackUrl1.com', 'callbackUrl2.com'],
+        content_type: 'test_content_type',
+        create_at: 0,
+        update_at: 0,
+        delete_at: 0,
+        user_id: 'test_user_id',
+        username: '',
+        icon_url: '',
+        channel_locked: false,
+    };
+
+    const action = jest.fn().mockImplementation(
+        () => {
+            return new Promise<void>((resolve) => {
+                process.nextTick(() => resolve());
+            });
+        },
+    );
+
+    const requiredProps = {
+        team,
+        header,
+        footer,
+        loading,
+        initialHook,
+        enablePostUsernameOverride: false,
+        enablePostIconOverride: false,
+        renderExtra: '',
+        serverError: '',
+        action,
+    };
+
+    test('should match snapshot', () => {
+        const wrapper = shallow(<AbstractOutgoingWebhook {...requiredProps}/>);
+        expect(wrapper).toMatchSnapshot();
+    });
+
+    test('should not render username in case of enablePostUsernameOverride is false ', () => {
+        const usernameTrueProps = {...requiredProps};
+        const wrapper = shallow(<AbstractOutgoingWebhook {...usernameTrueProps}/>);
+        expect(wrapper.find('#username')).toHaveLength(0);
+    });
+
+    test('should not render post icon override in case of enablePostIconOverride is false ', () => {
+        const iconUrlTrueProps = {...requiredProps};
+        const wrapper = shallow(<AbstractOutgoingWebhook {...iconUrlTrueProps}/>);
+        expect(wrapper.find('#iconURL')).toHaveLength(0);
+    });
+
+    test('should render username in case of enablePostUsernameOverride is true ', () => {
+        const usernameTrueProps = {...requiredProps, enablePostUsernameOverride: true};
+        const wrapper = shallow(<AbstractOutgoingWebhook {...usernameTrueProps}/>);
+        expect(wrapper.find('#username')).toHaveLength(1);
+    });
+
+    test('should render post icon override in case of enablePostIconOverride is true ', () => {
+        const iconUrlTrueProps = {...requiredProps, enablePostIconOverride: true};
+        const wrapper = shallow(<AbstractOutgoingWebhook {...iconUrlTrueProps}/>);
+        expect(wrapper.find('#iconURL')).toHaveLength(1);
+    });
+
+    test('should update state.channelId when on channel change', () => {
+        const newChannelId = 'new_channel_id';
+        const evt = {
+            preventDefault: jest.fn(),
+            target: {value: newChannelId},
+        };
+
+        const wrapper = shallow(<AbstractOutgoingWebhook {...requiredProps}/>);
+        wrapper.find(ChannelSelect).simulate('change', evt);
+
+        expect(wrapper.state('channelId')).toBe(newChannelId);
+    });
+
+    test('should update state.description when on description change', () => {
+        const newDescription = 'new_description';
+        const evt = {
+            preventDefault: jest.fn(),
+            target: {value: newDescription},
+        };
+
+        const wrapper = shallow(<AbstractOutgoingWebhook {...requiredProps}/>);
+        wrapper.find('#description').simulate('change', evt);
+
+        expect(wrapper.state('description')).toBe(newDescription);
+    });
+
+    test('should update state.username on post username change', () => {
+        const usernameTrueProps = {...requiredProps, enablePostUsernameOverride: true};
+        const newUsername = 'new_username';
+        const evt = {
+            preventDefault: jest.fn(),
+            target: {value: newUsername},
+        };
+
+        const wrapper = shallow(<AbstractOutgoingWebhook {...usernameTrueProps}/>);
+        wrapper.find('#username').simulate('change', evt);
+
+        expect(wrapper.state('username')).toBe(newUsername);
+    });
+
+    test('should update state.triggerWhen on selection change', () => {
+        const wrapper = shallow(<AbstractOutgoingWebhook {...requiredProps}/>);
+        expect(wrapper.state('triggerWhen')).toBe(0);
+
+        const selector = wrapper.find('#triggerWhen');
+        selector.simulate('change', {target: {value: 1}});
+        console.log('selector: ', selector.debug());
+        expect(wrapper.state('triggerWhen')).toBe(1);
+    });
+
+    test('should call action function', () => {
+        const wrapper = shallow(<AbstractOutgoingWebhook {...requiredProps}/>);
+
+        wrapper.find('#displayName').simulate('change', {target: {value: 'name'}});
+        wrapper.find('.btn-primary').simulate('click', {preventDefault() {
+            return jest.fn();
+        }});
+
+        expect(action).toBeCalled();
+        expect(action).toHaveBeenCalledTimes(1);
+    });
+});
diff --git a/webapp/channels/src/components/integrations/abstract_outgoing_webhook.jsx b/webapp/channels/src/components/integrations/abstract_outgoing_webhook.tsx
similarity index 84%
rename from webapp/channels/src/components/integrations/abstract_outgoing_webhook.jsx
rename to webapp/channels/src/components/integrations/abstract_outgoing_webhook.tsx
index 7627c6cc3e..5dd2cf50f5 100644
--- a/webapp/channels/src/components/integrations/abstract_outgoing_webhook.jsx
+++ b/webapp/channels/src/components/integrations/abstract_outgoing_webhook.tsx
@@ -1,83 +1,97 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import PropTypes from 'prop-types';
-import React from 'react';
-import {FormattedMessage} from 'react-intl';
+import React, {ChangeEventHandler, FormEvent, MouseEvent} from 'react';
+import {FormattedMessage, MessageDescriptor} from 'react-intl';
 import {Link} from 'react-router-dom';
 
 import {localizeMessage} from 'utils/utils';
-
+import {Team} from '@mattermost/types/teams';
 import BackstageHeader from 'components/backstage/components/backstage_header';
 import ChannelSelect from 'components/channel_select';
 import FormError from 'components/form_error';
 import SpinnerButton from 'components/spinner_button';
 import ExternalLink from 'components/external_link';
 import {DocLinks} from 'utils/constants';
+import {OutgoingWebhook} from '@mattermost/types/integrations';
 
-export default class AbstractOutgoingWebhook extends React.PureComponent {
-    static propTypes = {
+interface State {
+    callbackUrls: string;
+    channelId: string;
+    clientError: JSX.Element | null;
+    contentType: string;
+    description: string;
+    displayName: string;
+    iconURL: string;
+    saving: boolean;
+    triggerWhen: number;
+    triggerWords: string;
+    username: string;
+}
 
-        /**
-         * The current team
-         */
-        team: PropTypes.object.isRequired,
+interface Props {
 
-        /**
-         * The header text to render, has id and defaultMessage
-         */
-        header: PropTypes.object.isRequired,
+    /**
+     * The current team
+     */
+    team: Team;
 
-        /**
-         * The footer text to render, has id and defaultMessage
-         */
-        footer: PropTypes.object.isRequired,
+    /**
+     * The header text to render, has id and defaultMessage
+     */
+    header: MessageDescriptor;
 
-        /**
-        * The spinner loading text to render, has id and defaultMessage
-        */
-        loading: PropTypes.object.isRequired,
+    /**
+     * The footer text to render, has id and defaultMessage
+     */
+    footer: MessageDescriptor;
 
-        /**
-         * Any extra component/node to render
-         */
-        renderExtra: PropTypes.node.isRequired,
+    /**
+    * The spinner loading text to render, has id and defaultMessage
+    */
+    loading: MessageDescriptor;
 
-        /**
-         * The server error text after a failed action
-         */
-        serverError: PropTypes.string.isRequired,
+    /**
+     * Any extra component/node to render
+     */
+    renderExtra: React.ReactNode;
 
-        /**
-         * The hook used to set the initial state
-         */
-        initialHook: PropTypes.object,
+    /**
+     * The server error text after a failed action
+     */
+    serverError: string;
 
-        /**
-         * The async function to run when the action button is pressed
-         */
-        action: PropTypes.func.isRequired,
+    /**
+     * The hook used to set the initial state
+     */
+    initialHook?: OutgoingWebhook;
 
-        /**
-         * Whether to allow configuration of the default post username.
-         */
-        enablePostUsernameOverride: PropTypes.bool.isRequired,
+    /**
+     * The async function to run when the action button is pressed
+     */
+    action: (hook: OutgoingWebhook) => Promise<void>;
 
-        /**
-         * Whether to allow configuration of the default post icon.
-         */
-        enablePostIconOverride: PropTypes.bool.isRequired,
-    };
+    /**
+     * Whether to allow configuration of the default post username.
+     */
+    enablePostUsernameOverride: boolean;
 
-    constructor(props) {
+    /**
+     * Whether to allow configuration of the default post icon.
+     */
+    enablePostIconOverride: boolean;
+}
+
+export default class AbstractOutgoingWebhook extends React.PureComponent<Props, State> {
+    constructor(props: Props | Readonly<Props>) {
         super(props);
 
-        this.state = this.getStateFromHook(this.props.initialHook || {});
+        this.state = this.getStateFromHook(this.props.initialHook);
     }
 
-    getStateFromHook = (hook) => {
+    getStateFromHook = (hook?: OutgoingWebhook) => {
         let triggerWords = '';
-        if (hook.trigger_words) {
+        if (hook?.trigger_words) {
             let i = 0;
             for (i = 0; i < hook.trigger_words.length; i++) {
                 triggerWords += hook.trigger_words[i] + '\n';
@@ -85,7 +99,7 @@ export default class AbstractOutgoingWebhook extends React.PureComponent {
         }
 
         let callbackUrls = '';
-        if (hook.callback_urls) {
+        if (hook?.callback_urls) {
             let i = 0;
             for (i = 0; i < hook.callback_urls.length; i++) {
                 callbackUrls += hook.callback_urls[i] + '\n';
@@ -93,21 +107,21 @@ export default class AbstractOutgoingWebhook extends React.PureComponent {
         }
 
         return {
-            displayName: hook.display_name || '',
-            description: hook.description || '',
-            contentType: hook.content_type || 'application/x-www-form-urlencoded',
-            channelId: hook.channel_id || '',
+            displayName: hook?.display_name || '',
+            description: hook?.description || '',
+            contentType: hook?.content_type || 'application/x-www-form-urlencoded',
+            channelId: hook?.channel_id || '',
             triggerWords,
-            triggerWhen: hook.trigger_when || 0,
+            triggerWhen: hook?.trigger_when || 0,
             callbackUrls,
             saving: false,
             clientError: null,
-            username: hook.username || '',
-            iconURL: hook.icon_url || '',
+            username: hook?.username || '',
+            iconURL: hook?.icon_url || '',
         };
     };
 
-    handleSubmit = (e) => {
+    handleSubmit = (e: MouseEvent<HTMLElement> | FormEvent<HTMLFormElement>) => {
         e.preventDefault();
 
         if (this.state.saving) {
@@ -116,7 +130,7 @@ export default class AbstractOutgoingWebhook extends React.PureComponent {
 
         this.setState({
             saving: true,
-            clientError: '',
+            clientError: null,
         });
 
         const triggerWords = [];
@@ -171,67 +185,73 @@ export default class AbstractOutgoingWebhook extends React.PureComponent {
             team_id: this.props.team.id,
             channel_id: this.state.channelId,
             trigger_words: triggerWords,
-            trigger_when: parseInt(this.state.triggerWhen, 10),
+            trigger_when: this.state.triggerWhen,
             callback_urls: callbackUrls,
             display_name: this.state.displayName,
             content_type: this.state.contentType,
             description: this.state.description,
             username: this.state.username,
             icon_url: this.state.iconURL,
+            id: this.props.initialHook?.id || '',
+            create_at: this.props.initialHook?.create_at || 0,
+            update_at: this.props.initialHook?.update_at || 0,
+            delete_at: this.props.initialHook?.delete_at || 0,
+            creator_id: this.props.initialHook?.creator_id || '',
+            token: this.props.initialHook?.token || '',
         };
 
         this.props.action(hook).then(() => this.setState({saving: false}));
     };
 
-    updateDisplayName = (e) => {
+    updateDisplayName: ChangeEventHandler<HTMLInputElement> = (e) => {
         this.setState({
             displayName: e.target.value,
         });
     };
 
-    updateDescription = (e) => {
+    updateDescription: ChangeEventHandler<HTMLInputElement> = (e) => {
         this.setState({
             description: e.target.value,
         });
     };
 
-    updateContentType = (e) => {
+    updateContentType: ChangeEventHandler<HTMLSelectElement> = (e) => {
         this.setState({
             contentType: e.target.value,
         });
     };
 
-    updateChannelId = (e) => {
+    updateChannelId: ChangeEventHandler<HTMLSelectElement> = (e) => {
         this.setState({
             channelId: e.target.value,
         });
     };
 
-    updateTriggerWords = (e) => {
+    updateTriggerWords: ChangeEventHandler<HTMLTextAreaElement> = (e) => {
         this.setState({
             triggerWords: e.target.value,
         });
     };
 
-    updateTriggerWhen = (e) => {
+    updateTriggerWhen: ChangeEventHandler<HTMLSelectElement> = (e) => {
         this.setState({
-            triggerWhen: e.target.value,
+            triggerWhen: parseInt(e.target.value, 10),
         });
     };
 
-    updateCallbackUrls = (e) => {
+    updateCallbackUrls: ChangeEventHandler<HTMLTextAreaElement> = (e) => {
         this.setState({
             callbackUrls: e.target.value,
         });
     };
 
-    updateUsername = (e) => {
+    updateUsername: ChangeEventHandler<HTMLInputElement> = (e) => {
         this.setState({
             username: e.target.value,
         });
     };
 
-    updateIconURL = (e) => {
+    updateIconURL: ChangeEventHandler<HTMLInputElement> = (e) => {
         this.setState({
             iconURL: e.target.value,
         });
@@ -241,9 +261,9 @@ export default class AbstractOutgoingWebhook extends React.PureComponent {
         const contentTypeOption1 = 'application/x-www-form-urlencoded';
         const contentTypeOption2 = 'application/json';
 
-        var headerToRender = this.props.header;
-        var footerToRender = this.props.footer;
-        var renderExtra = this.props.renderExtra;
+        const headerToRender = this.props.header;
+        const footerToRender = this.props.footer;
+        const renderExtra = this.props.renderExtra;
 
         return (
             <div className='backstage-content'>
@@ -278,7 +298,7 @@ export default class AbstractOutgoingWebhook extends React.PureComponent {
                                 <input
                                     id='displayName'
                                     type='text'
-                                    maxLength='64'
+                                    maxLength={64}
                                     className='form-control'
                                     value={this.state.displayName}
                                     onChange={this.updateDisplayName}
@@ -305,7 +325,7 @@ export default class AbstractOutgoingWebhook extends React.PureComponent {
                                 <input
                                     id='description'
                                     type='text'
-                                    maxLength='500'
+                                    maxLength={500}
                                     className='form-control'
                                     value={this.state.description}
                                     onChange={this.updateDescription}
@@ -377,10 +397,11 @@ export default class AbstractOutgoingWebhook extends React.PureComponent {
                             </label>
                             <div className='col-md-5 col-sm-8'>
                                 <ChannelSelect
-                                    id='channelId'
                                     value={this.state.channelId}
                                     onChange={this.updateChannelId}
                                     selectOpen={true}
+                                    selectPrivate={false}
+                                    selectDm={false}
                                 />
                                 <div className='form__help'>
                                     <FormattedMessage
@@ -403,8 +424,8 @@ export default class AbstractOutgoingWebhook extends React.PureComponent {
                             <div className='col-md-5 col-sm-8'>
                                 <textarea
                                     id='triggerWords'
-                                    rows='3'
-                                    maxLength='1000'
+                                    rows={3}
+                                    maxLength={1000}
                                     className='form-control'
                                     value={this.state.triggerWords}
                                     onChange={this.updateTriggerWords}
@@ -429,6 +450,7 @@ export default class AbstractOutgoingWebhook extends React.PureComponent {
                             </label>
                             <div className='col-md-5 col-sm-8'>
                                 <select
+                                    id='triggerWhen'
                                     className='form-control'
                                     value={this.state.triggerWhen}
                                     onChange={this.updateTriggerWhen}
@@ -465,8 +487,8 @@ export default class AbstractOutgoingWebhook extends React.PureComponent {
                             <div className='col-md-5 col-sm-8'>
                                 <textarea
                                     id='callbackUrls'
-                                    rows='3'
-                                    maxLength='1000'
+                                    rows={3}
+                                    maxLength={1000}
                                     className='form-control'
                                     value={this.state.callbackUrls}
                                     onChange={this.updateCallbackUrls}
@@ -507,7 +529,7 @@ export default class AbstractOutgoingWebhook extends React.PureComponent {
                                     <input
                                         id='username'
                                         type='text'
-                                        maxLength='22'
+                                        maxLength={22}
                                         className='form-control'
                                         value={this.state.username}
                                         onChange={this.updateUsername}
@@ -536,7 +558,7 @@ export default class AbstractOutgoingWebhook extends React.PureComponent {
                                     <input
                                         id='iconURL'
                                         type='text'
-                                        maxLength='1024'
+                                        maxLength={1024}
                                         className='form-control'
                                         value={this.state.iconURL}
                                         onChange={this.updateIconURL}
@@ -568,7 +590,7 @@ export default class AbstractOutgoingWebhook extends React.PureComponent {
                                 className='btn btn-primary'
                                 type='submit'
                                 spinning={this.state.saving}
-                                spinningText={localizeMessage(this.props.loading.id, this.props.loading.defaultMessage)}
+                                spinningText={localizeMessage(this.props.loading.id as string, this.props.loading.defaultMessage as string)}
                                 onClick={this.handleSubmit}
                                 id='saveWebhook'
                             >
diff --git a/webapp/channels/src/components/integrations/add_outgoing_webhook/add_outgoing_webhook.tsx b/webapp/channels/src/components/integrations/add_outgoing_webhook/add_outgoing_webhook.tsx
index df6a911de5..c6dcc67f0f 100644
--- a/webapp/channels/src/components/integrations/add_outgoing_webhook/add_outgoing_webhook.tsx
+++ b/webapp/channels/src/components/integrations/add_outgoing_webhook/add_outgoing_webhook.tsx
@@ -6,7 +6,7 @@ import {useHistory} from 'react-router-dom';
 
 import {t} from 'utils/i18n';
 
-import AbstractOutgoingWebhook from 'components/integrations/abstract_outgoing_webhook.jsx';
+import AbstractOutgoingWebhook from 'components/integrations/abstract_outgoing_webhook';
 
 import {Team} from '@mattermost/types/teams';
 import {OutgoingWebhook} from '@mattermost/types/integrations';
diff --git a/webapp/channels/src/components/integrations/edit_outgoing_webhook/edit_outgoing_webhook.tsx b/webapp/channels/src/components/integrations/edit_outgoing_webhook/edit_outgoing_webhook.tsx
index 48ca4ef449..f0a0b36559 100644
--- a/webapp/channels/src/components/integrations/edit_outgoing_webhook/edit_outgoing_webhook.tsx
+++ b/webapp/channels/src/components/integrations/edit_outgoing_webhook/edit_outgoing_webhook.tsx
@@ -10,7 +10,7 @@ import {ServerError} from '@mattermost/types/errors';
 
 import {getHistory} from 'utils/browser_history';
 import ConfirmModal from 'components/confirm_modal';
-import AbstractOutgoingWebhook from 'components/integrations/abstract_outgoing_webhook.jsx';
+import AbstractOutgoingWebhook from 'components/integrations/abstract_outgoing_webhook';
 import LoadingScreen from 'components/loading_screen';
 
 const HEADER = {id: 'integrations.edit', defaultMessage: 'Edit'};