[MM-57726] Convert AddIncomingWebhook from Class Component to Function Component (#26992)

* Convert AddIncomingWebhook from Class Component to Function Component

* Review fix

* Review fix

---------

Co-authored-by: Mattermost Build <build@mattermost.com>

webapp/channels/src/components/integrations/add_incoming_webhook/add_incoming_webhook.test.tsx

@@ -4,10 +4,47 @@
 import {shallow} from 'enzyme';
 import React from 'react';
 
+import type {ChannelType} from '@mattermost/types/channels';
+import type {DeepPartial} from '@mattermost/types/utilities';
+
 import AddIncomingWebhook from 'components/integrations/add_incoming_webhook/add_incoming_webhook';
 
+import {renderWithContext, userEvent} from 'tests/react_testing_utils';
 import {TestHelper} from 'utils/test_helper';
 
+import type {GlobalState} from 'types/store';
+
+const initialState = {
+    entities: {
+        channels: {
+            currentChannelId: 'current_channel_id',
+            channels: {
+                current_channel_id: TestHelper.getChannelMock({
+                    id: 'current_channel_id',
+                    team_id: 'current_team_id',
+                    type: 'O' as ChannelType,
+                    name: 'current_channel_id',
+                }),
+            },
+            myMembers: {
+                current_channel_id: TestHelper.getChannelMembershipMock({channel_id: 'current_channel_id'}),
+            },
+            channelsInTeam: {
+                current_team_id: new Set(['current_channel_id']),
+            },
+        },
+        teams: {
+            currentTeamId: 'current_team_id',
+            teams: {
+                current_team_id: TestHelper.getTeamMock({id: 'current_team_id'}),
+            },
+            myMembers: {
+                current_team_id: TestHelper.getTeamMembershipMock({roles: 'team_roles'}),
+            },
+        },
+    },
+} as DeepPartial<GlobalState>;
+
 describe('components/integrations/AddIncomingWebhook', () => {
     const createIncomingHook = jest.fn().mockResolvedValue({data: true});
     const props = {
@@ -27,15 +64,28 @@ describe('components/integrations/AddIncomingWebhook', () => {
 
     test('should have called createIncomingHook', () => {
         const hook = TestHelper.getIncomingWebhookMock({
-            channel_id: 'channel_id',
+            channel_id: 'current_channel_id',
             display_name: 'display_name',
             description: 'description',
             username: 'username',
             icon_url: 'icon_url',
+            create_at: 0,
+            delete_at: 0,
+            update_at: 0,
+            id: '',
         });
-        const wrapper = shallow<AddIncomingWebhook>(<AddIncomingWebhook {...props}/>);
+        const wrapper = renderWithContext(<AddIncomingWebhook {...props}/>, initialState as GlobalState);
-        wrapper.instance().addIncomingHook(hook);
+
+        userEvent.selectOptions(wrapper.getByRole('combobox'), [hook.channel_id]);
+        userEvent.type(wrapper.getByLabelText('Title'), hook.display_name);
+        userEvent.type(wrapper.getByLabelText('Description'), hook.description);
+        userEvent.type(wrapper.getByLabelText('Username'), hook.username);
+        userEvent.type(wrapper.getByLabelText('Profile Picture'), hook.icon_url);
+
+        userEvent.click(wrapper.getByText('Save'));
+
         expect(createIncomingHook).toHaveBeenCalledTimes(1);
-        expect(createIncomingHook).toBeCalledWith(hook);
+        const calledWith = createIncomingHook.mock.calls[0][0];
+        expect(calledWith).toEqual(hook);
     });
 });

webapp/channels/src/components/integrations/add_incoming_webhook/add_incoming_webhook.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React from 'react';
+import React, {memo, useCallback, useState} from 'react';
 
 import type {IncomingWebhook} from '@mattermost/types/integrations';
 import type {Team} from '@mattermost/types/teams';
@@ -43,45 +43,38 @@ type Props = {
     };
 };
 
-type State = {
+const AddIncomingWebhook = ({
-    serverError: string;
+    team,
-};
+    enablePostUsernameOverride,
+    enablePostIconOverride,
+    actions,
+}: Props) => {
+    const [serverError, setServerError] = useState('');
 
-export default class AddIncomingWebhook extends React.PureComponent<Props, State> {
+    const addIncomingHook = useCallback(async (hook: IncomingWebhook) => {
-    constructor(props: Props) {
+        setServerError('');
-        super(props);
 
-        this.state = {
+        const {data, error} = await actions.createIncomingHook(hook);
-            serverError: '',
-        };
-    }
-
-    addIncomingHook = async (hook: IncomingWebhook) => {
-        this.setState({serverError: ''});
-
-        const {data, error} = await this.props.actions.createIncomingHook(hook);
         if (data) {
-            getHistory().push(`/${this.props.team.name}/integrations/confirm?type=incoming_webhooks&id=${data.id}`);
+            getHistory().push(`/${team.name}/integrations/confirm?type=incoming_webhooks&id=${data.id}`);
             return;
         }
-
         if (error) {
-            this.setState({serverError: error.message});
+            setServerError(error.message);
         }
-    };
+    }, [actions, team.name]);
 
-    render() {
     return (
         <AbstractIncomingWebhook
-                team={this.props.team}
+            team={team}
             header={HEADER}
             footer={FOOTER}
             loading={LOADING}
-                enablePostUsernameOverride={this.props.enablePostUsernameOverride}
+            enablePostUsernameOverride={enablePostUsernameOverride}
-                enablePostIconOverride={this.props.enablePostIconOverride}
+            enablePostIconOverride={enablePostIconOverride}
-                action={this.addIncomingHook}
+            action={addIncomingHook}
-                serverError={this.state.serverError}
+            serverError={serverError}
         />
     );
-    }
+};
-}
+export default memo(AddIncomingWebhook);