[GH-26715] Added Pagination Support for IncomingWebHooks (#27502)

* Added Pagination Support for IncomingWebHooks * Incorporated feedback from reviews * Removed trailing spaces * Restored deleted server en.json entries, fixed order in webapp en.json --------- Co-authored-by: Mattermost Build <build@mattermost.com>
2024-08-09 22:44:22 +02:00
--- a/webapp/channels/src/actions/integration_actions.tsx
+++ b/webapp/channels/src/actions/integration_actions.tsx
@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.

-import type {IncomingWebhook, OutgoingWebhook, Command, OAuthApp, OutgoingOAuthConnection} from '@mattermost/types/integrations';
+import type {IncomingWebhook, IncomingWebhooksWithCount, OutgoingWebhook, Command, OAuthApp, OutgoingOAuthConnection} from '@mattermost/types/integrations';

 import * as IntegrationActions from 'mattermost-redux/actions/integrations';
 import {getProfilesByIds} from 'mattermost-redux/actions/users';
@@ -11,11 +11,13 @@ import type {ActionFuncAsync} from 'mattermost-redux/types/actions';

 const DEFAULT_PAGE_SIZE = 100;

-export function loadIncomingHooksAndProfilesForTeam(teamId: string, page = 0, perPage = DEFAULT_PAGE_SIZE): ActionFuncAsync<IncomingWebhook[]> {
+export function loadIncomingHooksAndProfilesForTeam(teamId: string, page = 0, perPage = DEFAULT_PAGE_SIZE, includeTotalCount = false): ActionFuncAsync<IncomingWebhook[] | IncomingWebhooksWithCount> {
    return async (dispatch) => {
-        const {data} = await dispatch(IntegrationActions.getIncomingHooks(teamId, page, perPage));
+        const {data} = await dispatch(IntegrationActions.getIncomingHooks(teamId, page, perPage, includeTotalCount));
        if (data) {
-            dispatch(loadProfilesForIncomingHooks(data));
+            const isWebhooksWithCount = IntegrationActions.isIncomingWebhooksWithCount(data);
+            const hooks = isWebhooksWithCount ? (data as IncomingWebhooksWithCount).incoming_webhooks : data;
+            dispatch(loadProfilesForIncomingHooks(hooks as IncomingWebhook[]));
        }
        return {data};
    };
--- a/webapp/channels/src/components/backstage/components/backstage_list.scss
+++ b/webapp/channels/src/components/backstage/components/backstage_list.scss
@@ -0,0 +1,25 @@
+@use 'sass:color';
+
+@import 'utils/variables';
+
+#searchInput {
+    flex: none;
+}
+
+.backstage-footer {
+    display: flex;
+    height: auto;
+    flex-direction: row;
+    padding: 8px;
+    border: 1px solid $light-gray;
+    border-top: none;
+    background: $white;
+    color: rgba(0, 0, 0, 0.5);
+    font-size: 1.1em;
+    text-align: right;
+
+    .backstage-footer__cell {
+        width: 100%;
+        text-align: right;
+    }
+}
--- a/webapp/channels/src/components/backstage/components/backstage_list.tsx
+++ b/webapp/channels/src/components/backstage/components/backstage_list.tsx
@@ -3,15 +3,20 @@

 import React, {useState} from 'react';
 import type {ChangeEvent, ReactNode} from 'react';
+import {FormattedMessage, useIntl} from 'react-intl';
 import {Link} from 'react-router-dom';

 import LoadingScreen from 'components/loading_screen';
+import NextIcon from 'components/widgets/icons/fa_next_icon';
+import PreviousIcon from 'components/widgets/icons/fa_previous_icon';
 import SearchIcon from 'components/widgets/icons/fa_search_icon';

 import {localizeMessage} from 'utils/utils';

+import './backstage_list.scss';
+
 type Props = {
-    children?: ReactNode | ((filter: string) => void);
+    children?: JSX.Element[] | ((filter: string) => [JSX.Element[], boolean]);
    header: ReactNode;
    addLink?: string;
    addText?: ReactNode;
@@ -21,23 +26,52 @@ type Props = {
    helpText?: ReactNode;
    loading: boolean;
    searchPlaceholder?: string;
+    nextPage?: () => void;
+    previousPage?: () => void;
+    page?: number;
+    pageSize?: number;
+    total?: number;
+};
+
+const getPaging = (remainingProps: Props, childCount: number, hasFilter: boolean) => {
+    const page = (hasFilter || !remainingProps.page) ? 0 : remainingProps.page;
+    const pageSize = (hasFilter || !remainingProps.pageSize) ? childCount : remainingProps.pageSize;
+    const total = (hasFilter || !remainingProps.total) ? childCount : remainingProps.total;
+
+    let startCount = (page * pageSize) + 1;
+    let endCount = (page + 1) * pageSize;
+    endCount = endCount > total ? total : endCount;
+    if (endCount === 0) {
+        startCount = 0;
+    }
+
+    const isFirstPage = startCount <= 1;
+    const isLastPage = endCount >= total;
+
+    return {startCount, endCount, total, isFirstPage, isLastPage};
 };

 const BackstageList = ({searchPlaceholder = localizeMessage('backstage_list.search', 'Search'), ...remainingProps}: Props) => {
+    const {formatMessage} = useIntl();
+
    const [filter, setFilter] = useState('');
-
    const updateFilter = (e: ChangeEvent<HTMLInputElement>) => setFilter(e.target.value);
-
    const filterLowered = filter.toLowerCase();

-    let children;
+    let children = [];
+    let childCount = 0;
    if (remainingProps.loading) {
-        children = <LoadingScreen/>;
+        children = [
+            <LoadingScreen
+                key='loading'
+            />,
+        ];
    } else {
-        children = remainingProps.children;
        let hasChildren = true;
-        if (typeof children === 'function') {
-            [children, hasChildren] = children(filterLowered);
+        if (typeof remainingProps.children === 'function') {
+            [children, hasChildren] = remainingProps.children(filterLowered);
+        } else {
+            children = remainingProps.children as JSX.Element[];
        }
        children = React.Children.map(children, (child) => {
            return React.cloneElement(child, {filterLowered});
@@ -45,22 +79,28 @@ const BackstageList = ({searchPlaceholder = localizeMessage('backstage_list.sear
        if (children.length === 0 || !hasChildren) {
            if (!filterLowered) {
                if (remainingProps.emptyText) {
-                    children = (
-                        <div className='backstage-list__item backstage-list__empty'>
+                    children = [(
+                        <div
+                            className='backstage-list__item backstage-list__empty'
+                            key='emptyText'
+                        >
                            {remainingProps.emptyText}
                        </div>
-                    );
+                    )];
                }
            } else if (remainingProps.emptyTextSearch) {
-                children = (
+                children = [(
                    <div
                        className='backstage-list__item backstage-list__empty'
                        id='emptySearchResultsMessage'
+                        key='emptyTextSearch'
                    >
                        {React.cloneElement(remainingProps.emptyTextSearch, {values: {searchTerm: filterLowered}})}
                    </div>
-                );
+                )];
            }
+        } else {
+            childCount = children.length;
        }
    }

@@ -85,6 +125,19 @@ const BackstageList = ({searchPlaceholder = localizeMessage('backstage_list.sear
        );
    }

+    const hasFilter = filter.length > 0;
+    const {startCount, endCount, total, isFirstPage, isLastPage} = getPaging(remainingProps, childCount, hasFilter);
+    const childrenToDisplay = childCount > 0 ? children.slice(startCount - 1, endCount) : children;
+
+    let previousPageFn = remainingProps.previousPage;
+    let nextPageFn = remainingProps.nextPage;
+    if (isFirstPage) {
+        previousPageFn = () => {};
+    }
+    if (isLastPage) {
+        nextPageFn = () => {};
+    }
+
    return (
        <div className='backstage-content'>
            <div className='backstage-header'>
@@ -102,7 +155,6 @@ const BackstageList = ({searchPlaceholder = localizeMessage('backstage_list.sear
                        placeholder={searchPlaceholder}
                        value={filter}
                        onChange={updateFilter}
-                        style={style.search}
                        id='searchInput'
                    />
                </div>
@@ -111,14 +163,39 @@ const BackstageList = ({searchPlaceholder = localizeMessage('backstage_list.sear
                {remainingProps.helpText}
            </span>
            <div className='backstage-list'>
-                {children}
+                {childrenToDisplay}
+            </div>
+            <div className='backstage-footer'>
+                <div className='backstage-footer__cell'>
+                    <FormattedMessage
+                        id='backstage_list.paginatorCount'
+                        defaultMessage='{startCount, number} - {endCount, number} of {total, number}'
+                        values={{
+                            startCount,
+                            endCount,
+                            total,
+                        }}
+                    />
+                    <button
+                        type='button'
+                        className={'btn btn-quaternary btn-icon btn-sm ml-2 prev ' + (isFirstPage ? 'disabled' : '')}
+                        onClick={previousPageFn}
+                        aria-label={formatMessage({id: 'backstage_list.previousButton.ariaLabel', defaultMessage: 'Previous'})}
+                    >
+                        <PreviousIcon/>
+                    </button>
+                    <button
+                        type='button'
+                        className={'btn btn-quaternary btn-icon btn-sm next ' + (isLastPage ? 'disabled' : '')}
+                        onClick={nextPageFn}
+                        aria-label={formatMessage({id: 'backstage_list.nextButton.ariaLabel', defaultMessage: 'Next'})}
+                    >
+                        <NextIcon/>
+                    </button>
+                </div>
            </div>
        </div>
    );
 };

-const style = {
-    search: {flexGrow: 0, flexShrink: 0},
-};
-
 export default BackstageList;
--- a/webapp/channels/src/components/integrations/bots/bots.tsx
+++ b/webapp/channels/src/components/integrations/bots/bots.tsx
@@ -192,12 +192,12 @@ export default class Bots extends React.PureComponent<Props, State> {
        );
    };

-    bots = (filter?: string): Array<boolean | JSX.Element> => {
+    bots = (filter?: string): [JSX.Element[], boolean] => {
        const bots = Object.values(this.props.bots).sort((a, b) => a.username.localeCompare(b.username));
        const match = (bot: BotType) => matchesFilter(bot, filter, this.props.owners[bot.user_id]);
        const enabledBots = bots.filter((bot) => bot.delete_at === 0).filter(match).map(this.botToJSX);
        const disabledBots = bots.filter((bot) => bot.delete_at > 0).filter(match).map(this.botToJSX);
-        const sections = (
+        const sections = [(
            <div key='sections'>
                <this.EnabledSection
                    enabledBots={enabledBots}
@@ -207,7 +207,7 @@ export default class Bots extends React.PureComponent<Props, State> {
                    disabledBots={disabledBots}
                />
            </div>
-        );
+        )];

        return [sections, enabledBots.length > 0 || disabledBots.length > 0];
    };
--- a/webapp/channels/src/components/integrations/installed_incoming_webhooks/index.ts
+++ b/webapp/channels/src/components/integrations/installed_incoming_webhooks/index.ts
@@ -11,7 +11,7 @@ import {removeIncomingHook} from 'mattermost-redux/actions/integrations';
 import {Permissions} from 'mattermost-redux/constants';
 import {getAllChannels} from 'mattermost-redux/selectors/entities/channels';
 import {getConfig} from 'mattermost-redux/selectors/entities/general';
-import {getIncomingHooks} from 'mattermost-redux/selectors/entities/integrations';
+import {getFilteredIncomingHooks, getIncomingHooksTotalCount} from 'mattermost-redux/selectors/entities/integrations';
 import {haveITeamPermission} from 'mattermost-redux/selectors/entities/roles';
 import {getCurrentTeamId} from 'mattermost-redux/selectors/entities/teams';
 import {getUsers} from 'mattermost-redux/selectors/entities/users';
@@ -21,17 +21,16 @@ import {loadIncomingHooksAndProfilesForTeam} from 'actions/integration_actions';
 import InstalledIncomingWebhooks from './installed_incoming_webhooks';

 function mapStateToProps(state: GlobalState) {
-    const config = getConfig(state);
    const teamId = getCurrentTeamId(state);
+    const incomingHooks = getFilteredIncomingHooks(state);
+    const incomingHooksTotalCount = getIncomingHooksTotalCount(state);
+    const config = getConfig(state);
    const canManageOthersWebhooks = haveITeamPermission(state, teamId, Permissions.MANAGE_OTHERS_INCOMING_WEBHOOKS);
-    const incomingHooks = getIncomingHooks(state);
-    const incomingWebhooks = Object.keys(incomingHooks).
-        map((key) => incomingHooks[key]).
-        filter((incomingWebhook) => incomingWebhook.team_id === teamId);
    const enableIncomingWebhooks = config.EnableIncomingWebhooks === 'true';

    return {
-        incomingWebhooks,
+        incomingHooks,
+        incomingHooksTotalCount,
        channels: getAllChannels(state),
        users: getUsers(state),
        canManageOthersWebhooks,
--- a/webapp/channels/src/components/integrations/installed_incoming_webhooks/installed_incoming_webhooks.tsx
+++ b/webapp/channels/src/components/integrations/installed_incoming_webhooks/installed_incoming_webhooks.tsx
@@ -5,7 +5,7 @@ import React from 'react';
 import {FormattedMessage} from 'react-intl';

 import type {Channel} from '@mattermost/types/channels';
-import type {IncomingWebhook} from '@mattermost/types/integrations';
+import type {IncomingWebhook, IncomingWebhooksWithCount} from '@mattermost/types/integrations';
 import type {Team} from '@mattermost/types/teams';
 import type {UserProfile} from '@mattermost/types/users';
 import type {IDMappedObjects} from '@mattermost/types/utilities';
@@ -17,25 +17,29 @@ import ExternalLink from 'components/external_link';
 import FormattedMarkdownMessage from 'components/formatted_markdown_message';
 import InstalledIncomingWebhook, {matchesFilter} from 'components/integrations/installed_incoming_webhook';

-import {Constants, DeveloperLinks} from 'utils/constants';
+import {DeveloperLinks} from 'utils/constants';
 import * as Utils from 'utils/utils';

+const PAGE_SIZE = 200;
+
 type Props = {
    team: Team;
    user: UserProfile;
-    canManageOthersWebhooks: boolean;
-    incomingWebhooks: IncomingWebhook[];
+    incomingHooks: IncomingWebhook[];
+    incomingHooksTotalCount: number;
    channels: IDMappedObjects<Channel>;
    users: IDMappedObjects<UserProfile>;
+    canManageOthersWebhooks: boolean;
    enableIncomingWebhooks: boolean;
    actions: {
        removeIncomingHook: (hookId: string) => Promise<ActionResult>;
        loadIncomingHooksAndProfilesForTeam: (teamId: string, startPageNumber: number,
-            pageSize: number) => Promise<ActionResult>;
+            pageSize: number, includeTotalCount: boolean) => Promise<ActionResult<IncomingWebhook[] | IncomingWebhooksWithCount>>;
    };
 }

 type State = {
+    page: number;
    loading: boolean;
 }

@@ -44,26 +48,43 @@ export default class InstalledIncomingWebhooks extends React.PureComponent<Props
        super(props);

        this.state = {
+            page: 0,
            loading: true,
        };
    }

    componentDidMount() {
-        if (this.props.enableIncomingWebhooks) {
-            this.props.actions.loadIncomingHooksAndProfilesForTeam(
-                this.props.team.id,
-                Constants.Integrations.START_PAGE_NUM,
-                Constants.Integrations.PAGE_SIZE,
-            ).then(
-                () => this.setState({loading: false}),
-            );
-        }
+        this.loadPage(0);
    }

    deleteIncomingWebhook = (incomingWebhook: IncomingWebhook) => {
        this.props.actions.removeIncomingHook(incomingWebhook.id);
    };

+    loadPage = async (pageToLoad: number) => {
+        if (this.props.enableIncomingWebhooks) {
+            this.setState({loading: true},
+                async () => {
+                    await this.props.actions.loadIncomingHooksAndProfilesForTeam(
+                        this.props.team.id,
+                        pageToLoad,
+                        PAGE_SIZE,
+                        true,
+                    );
+                    this.setState({page: pageToLoad, loading: false});
+                },
+            );
+        }
+    };
+
+    nextPage = () => {
+        this.loadPage(this.state.page + 1);
+    };
+
+    previousPage = () => {
+        this.loadPage(this.state.page - 1);
+    };
+
    incomingWebhookCompare = (a: IncomingWebhook, b: IncomingWebhook) => {
        let displayNameA = a.display_name;
        if (!displayNameA) {
@@ -76,11 +97,10 @@ export default class InstalledIncomingWebhooks extends React.PureComponent<Props
        }

        const displayNameB = b.display_name;
-
        return displayNameA.localeCompare(displayNameB);
    };

-    incomingWebhooks = (filter: string) => this.props.incomingWebhooks.
+    incomingWebhooks = (filter: string) => this.props.incomingHooks.
        sort(this.incomingWebhookCompare).
        filter((incomingWebhook: IncomingWebhook) => matchesFilter(incomingWebhook, this.props.channels[incomingWebhook.channel_id], filter)).
        map((incomingWebhook: IncomingWebhook) => {
@@ -160,6 +180,11 @@ export default class InstalledIncomingWebhooks extends React.PureComponent<Props
                }
                searchPlaceholder={Utils.localizeMessage('installed_incoming_webhooks.search', 'Search Incoming Webhooks')}
                loading={this.state.loading}
+                nextPage={this.nextPage}
+                previousPage={this.previousPage}
+                page={this.state.page}
+                pageSize={PAGE_SIZE}
+                total={this.props.incomingHooksTotalCount}
            >
                {(filter: string) => {
                    const children = this.incomingWebhooks(filter);
--- a/webapp/channels/src/components/integrations/outgoing_oauth_connections/snapshots/installed_outgoing_oauth_connections.test.tsx.snap
+++ b/webapp/channels/src/components/integrations/outgoing_oauth_connections/snapshots/installed_outgoing_oauth_connections.test.tsx.snap
@@ -161,12 +161,6 @@ exports[`components/integrations/InstalledOutgoingOAuthConnections should match
                  id="searchInput"
                  onChange={[Function]}
                  placeholder="Search Outgoing OAuth Connections"
-                  style={
-                    Object {
-                      "flexGrow": 0,
-                      "flexShrink": 0,
-                    }
-                  }
                  type="search"
                  value=""
                />
@@ -223,7 +217,9 @@ exports[`components/integrations/InstalledOutgoingOAuthConnections should match
            <div
              className="backstage-list"
            >
-              <LoadingScreen>
+              <LoadingScreen
+                key="loading"
+              >
                <div
                  className="loading-screen"
                  style={
@@ -251,6 +247,55 @@ exports[`components/integrations/InstalledOutgoingOAuthConnections should match
                </div>
              </LoadingScreen>
            </div>
+            <div
+              className="backstage-footer"
+            >
+              <div
+                className="backstage-footer__cell"
+              >
+                <FormattedMessage
+                  defaultMessage="{startCount, number} - {endCount, number} of {total, number}"
+                  id="backstage_list.paginatorCount"
+                  values={
+                    Object {
+                      "endCount": 0,
+                      "startCount": 0,
+                      "total": 0,
+                    }
+                  }
+                >
+                  <span>
+                    0 - 0 of 0
+                  </span>
+                </FormattedMessage>
+                <button
+                  aria-label="Previous"
+                  className="btn btn-quaternary btn-icon btn-sm ml-2 prev disabled"
+                  onClick={[Function]}
+                  type="button"
+                >
+                  <Memo(PreviousIcon)>
+                    <i
+                      className="icon icon-chevron-left"
+                      title="Previous Icon"
+                    />
+                  </Memo(PreviousIcon)>
+                </button>
+                <button
+                  aria-label="Next"
+                  className="btn btn-quaternary btn-icon btn-sm next disabled"
+                  onClick={[Function]}
+                  type="button"
+                >
+                  <Memo(NextIcon)>
+                    <i
+                      className="icon icon-chevron-right"
+                      title="Next Icon"
+                    />
+                  </Memo(NextIcon)>
+                </button>
+              </div>
+            </div>
          </div>
        </BackstageList>
      </InstalledOutgoingOAuthConnections>
--- a/webapp/channels/src/i18n/en.json
+++ b/webapp/channels/src/i18n/en.json
@@ -2961,6 +2961,9 @@
  "avatar.alt": "{username} profile image",
  "avatars.overflowUnnamedOnly": "{overflowUnnamedCount, plural, =1 {one other} other {# others}}",
  "avatars.overflowUsers": "{overflowUnnamedCount, plural, =0 {{names}} =1 {{names} and one other} other {{names} and # others}}",
+  "backstage_list.nextButton.ariaLabel": "Next",
+  "backstage_list.paginatorCount": "{startCount, number} - {endCount, number} of {total, number}",
+  "backstage_list.previousButton.ariaLabel": "Previous",
  "backstage_list.search": "Search",
  "backstage_navbar.back": "Back",
  "backstage_navbar.backToMattermost": "Back to {siteName}",
--- a/webapp/channels/src/packages/mattermost-redux/src/action_types/integrations.ts
+++ b/webapp/channels/src/packages/mattermost-redux/src/action_types/integrations.ts
@@ -7,6 +7,7 @@ export default keyMirror({

    RECEIVED_INCOMING_HOOK: null,
    RECEIVED_INCOMING_HOOKS: null,
+    RECEIVED_INCOMING_HOOKS_TOTAL_COUNT: null,
    DELETED_INCOMING_HOOK: null,
    RECEIVED_OUTGOING_HOOK: null,
    RECEIVED_OUTGOING_HOOKS: null,
--- a/webapp/channels/src/packages/mattermost-redux/src/actions/integrations.test.ts
+++ b/webapp/channels/src/packages/mattermost-redux/src/actions/integrations.test.ts
@@ -86,17 +86,31 @@ describe('Actions.Integrations', () => {
            } as IncomingWebhook,
        ));

+        /* Test with include_total_count being set to false */
        nock(Client4.getBaseRoute()).
            get('/hooks/incoming').
            query(true).
            reply(200, [created]);

-        await store.dispatch(Actions.getIncomingHooks(TestHelper.basicTeam!.id));
-        const state = store.getState();
+        const response = await store.dispatch(Actions.getIncomingHooks(TestHelper.basicTeam!.id));
+        expect(response.data).toBeTruthy();
+        expect(response.data[0].id === created.id).toBeTruthy();

+        const state = store.getState();
        const hooks = state.entities.integrations.incomingHooks;
        expect(hooks).toBeTruthy();
        expect(hooks[created.id]).toBeTruthy();
+
+        /* Test with include_total_count being set to true */
+        nock(Client4.getBaseRoute()).
+            get('/hooks/incoming').
+            query(true).
+            reply(200, {incoming_webhooks: [created], total_count: 1});
+
+        const responseWithCount = await store.dispatch(Actions.getIncomingHooks(TestHelper.basicTeam!.id, 0, 10, true));
+        expect(responseWithCount.data.incoming_webhooks).toBeTruthy();
+        expect(responseWithCount.data.incoming_webhooks[0].id === created.id).toBeTruthy();
+        expect(responseWithCount.data.total_count === 1).toBeTruthy();
    });

    it('removeIncomingHook', async () => {
--- a/webapp/channels/src/packages/mattermost-redux/src/actions/integrations.ts
+++ b/webapp/channels/src/packages/mattermost-redux/src/actions/integrations.ts
@@ -1,9 +1,10 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.

+import type {AnyAction} from 'redux';
 import {batchActions} from 'redux-batched-actions';

-import type {Command, CommandArgs, DialogSubmission, IncomingWebhook, OAuthApp, OutgoingOAuthConnection, OutgoingWebhook, SubmitDialogResponse} from '@mattermost/types/integrations';
+import type {Command, CommandArgs, DialogSubmission, IncomingWebhook, IncomingWebhooksWithCount, OAuthApp, OutgoingOAuthConnection, OutgoingWebhook, SubmitDialogResponse} from '@mattermost/types/integrations';

 import {IntegrationTypes} from 'mattermost-redux/action_types';
 import {Client4} from 'mattermost-redux/client';
@@ -37,16 +38,41 @@ export function getIncomingHook(hookId: string) {
    });
 }

-export function getIncomingHooks(teamId = '', page = 0, perPage: number = General.PAGE_SIZE_DEFAULT) {
-    return bindClientFunc({
-        clientFunc: Client4.getIncomingWebhooks,
-        onSuccess: [IntegrationTypes.RECEIVED_INCOMING_HOOKS],
-        params: [
-            teamId,
-            page,
-            perPage,
-        ],
-    });
+export function getIncomingHooks(teamId = '', page = 0, perPage: number = General.PAGE_SIZE_DEFAULT, includeTotalCount = false): ActionFuncAsync<IncomingWebhook[] | IncomingWebhooksWithCount> {
+    return async (dispatch, getState) => {
+        let data;
+
+        try {
+            data = await Client4.getIncomingWebhooks(teamId, page, perPage, includeTotalCount);
+        } catch (error) {
+            forceLogoutIfNecessary(error, dispatch, getState);
+            dispatch(logError(error));
+            return {error};
+        }
+
+        const isWebhooksWithCount = isIncomingWebhooksWithCount(data);
+
+        const actions: AnyAction[] = [{
+            type: IntegrationTypes.RECEIVED_INCOMING_HOOKS,
+            data: isWebhooksWithCount ? (data as IncomingWebhooksWithCount).incoming_webhooks : data,
+        }];
+
+        if (isWebhooksWithCount) {
+            actions.push({
+                type: IntegrationTypes.RECEIVED_INCOMING_HOOKS_TOTAL_COUNT,
+                data: (data as IncomingWebhooksWithCount).total_count,
+            });
+        }
+
+        dispatch(batchActions(actions));
+        return {data};
+    };
+}
+
+export function isIncomingWebhooksWithCount(data: any): data is IncomingWebhooksWithCount {
+    return typeof data.incoming_webhooks !== 'undefined' &&
+        Array.isArray(data.incoming_webhooks) &&
+        typeof data.total_count === 'number';
 }

 export function removeIncomingHook(hookId: string): ActionFuncAsync {
--- a/webapp/channels/src/packages/mattermost-redux/src/reducers/entities/integrations.ts
+++ b/webapp/channels/src/packages/mattermost-redux/src/reducers/entities/integrations.ts
@@ -52,6 +52,19 @@ function incomingHooks(state: IDMappedObjects<IncomingWebhook> = {}, action: Any
    }
 }

+function incomingHooksTotalCount(state: number = 0, action: AnyAction) {
+    switch (action.type) {
+    case IntegrationTypes.RECEIVED_INCOMING_HOOKS_TOTAL_COUNT: {
+        return action.data;
+    }
+    case IntegrationTypes.DELETED_INCOMING_HOOK: {
+        return Math.max(state - 1, 0);
+    }
+    default:
+        return state;
+    }
+}
+
 function outgoingHooks(state: IDMappedObjects<OutgoingWebhook> = {}, action: AnyAction) {
    switch (action.type) {
    case IntegrationTypes.RECEIVED_OUTGOING_HOOK: {
@@ -306,6 +319,9 @@ export default combineReducers({
    // object where every key is the hook id and has an object with the incoming hook details
    incomingHooks,

+    // object to represent total amount of incoming hooks
+    incomingHooksTotalCount,
+
    // object where every key is the hook id and has an object with the outgoing hook details
    outgoingHooks,

--- a/webapp/channels/src/packages/mattermost-redux/src/selectors/entities/integrations.ts
+++ b/webapp/channels/src/packages/mattermost-redux/src/selectors/entities/integrations.ts
@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.

-import type {OutgoingWebhook, Command} from '@mattermost/types/integrations';
+import type {IncomingWebhook, OutgoingWebhook, Command} from '@mattermost/types/integrations';
 import type {GlobalState} from '@mattermost/types/store';
 import type {IDMappedObjects} from '@mattermost/types/utilities';

@@ -14,6 +14,10 @@ export function getIncomingHooks(state: GlobalState) {
    return state.entities.integrations.incomingHooks;
 }

+export function getIncomingHooksTotalCount(state: GlobalState) {
+    return state.entities.integrations.incomingHooksTotalCount;
+}
+
 export function getOutgoingHooks(state: GlobalState) {
    return state.entities.integrations.outgoingHooks;
 }
@@ -30,6 +34,17 @@ export function getOutgoingOAuthConnections(state: GlobalState) {
    return state.entities.integrations.outgoingOAuthConnections;
 }

+export const getFilteredIncomingHooks: (state: GlobalState) => IncomingWebhook[] = createSelector(
+    'getFilteredIncomingHooks',
+    getCurrentTeamId,
+    getIncomingHooks,
+    (teamId, hooks) => {
+        return Object.keys(hooks).
+            map((key) => hooks[key]).
+            filter((incomingHook) => incomingHook.team_id === teamId);
+    },
+);
+
 export const getAppsOAuthAppIDs: (state: GlobalState) => string[] = createSelector(
    'getAppsOAuthAppIDs',
    appsEnabled,
--- a/webapp/channels/src/packages/mattermost-redux/src/store/initial_state.ts
+++ b/webapp/channels/src/packages/mattermost-redux/src/store/initial_state.ts
@@ -125,6 +125,7 @@ const state: GlobalState = {
        },
        integrations: {
            incomingHooks: {},
+            incomingHooksTotalCount: 0,
            outgoingHooks: {},
            oauthApps: {},
            systemCommands: {},