UI: Changed default page size for tables from 10 to 15 (#7256)

* - Default page size for tables changed from 10 to 15 - Code optimization and bug fixes * worked on comments
2025-08-31 20:51:26 +00:00 · 2022-09-06 22:01:38 +05:30 · 2022-09-06 22:01:38 +05:30 · 0f2b81f503
commit 0f2b81f503
parent be553eb017
16 changed files with 109 additions and 85 deletions
--- a/openmetadata-ui/src/main/resources/ui/src/axiosAPIs/webhookAPI.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/axiosAPIs/webhookAPI.ts
@ -11,13 +11,20 @@
 *  limitations under the License.
 */

-import { CreateWebhook } from '../generated/api/events/createWebhook';
+import {
+  CreateWebhook,
+  WebhookType,
+} from '../generated/api/events/createWebhook';
 import { Webhook } from '../generated/entity/events/webhook';
 import { Paging } from '../generated/type/paging';
 import { getURLWithQueryFields } from '../utils/APIUtils';
 import APIClient from './index';

-export const getWebhooks = async (paging?: string, arrQueryFields?: string) => {
+export const getWebhooks = async (
+  paging?: string,
+  arrQueryFields?: string,
+  params?: { limit: number; webhookType?: WebhookType }
+) => {
  const url = getURLWithQueryFields(
    '/webhook',
    arrQueryFields,
@ -25,7 +32,10 @@ export const getWebhooks = async (paging?: string, arrQueryFields?: string) => {
  );

  const response = await APIClient.get<{ data: Webhook[]; paging: Paging }>(
-    url
+    url,
+    {
+      params,
+    }
  );

  return response.data;
--- a/openmetadata-ui/src/main/resources/ui/src/components/BotListV1/BotListV1.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/BotListV1/BotListV1.component.tsx
@ -21,7 +21,7 @@ import { getBots } from '../../axiosAPIs/botsAPI';
 import {
  getBotsPath,
  INITIAL_PAGING_VALUE,
-  PAGE_SIZE,
+  PAGE_SIZE_MEDIUM,
 } from '../../constants/constants';
 import { BOTS_DOCS } from '../../constants/docs.constants';
 import { NO_PERMISSION_FOR_ACTION } from '../../constants/HelperTextUtil';
@ -76,7 +76,7 @@ const BotListV1 = ({
      setLoading(true);
      const { data, paging } = await getBots({
        after,
-        limit: PAGE_SIZE,
+        limit: PAGE_SIZE_MEDIUM,
        include: showDeleted ? Include.Deleted : Include.NonDeleted,
      });
      setPaging(paging);
@ -232,10 +232,10 @@ const BotListV1 = ({
            />
          </Col>
          <Col span={24}>
-            {paging.total > PAGE_SIZE && (
+            {paging.total > PAGE_SIZE_MEDIUM && (
              <NextPrevious
                currentPage={currentPage}
-                pageSize={PAGE_SIZE}
+                pageSize={PAGE_SIZE_MEDIUM}
                paging={paging}
                pagingHandler={handlePageChange}
                totalCount={paging.total}
--- a/openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/TeamDetailsV1.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/TeamDetailsV1.tsx
@ -37,7 +37,7 @@ import AppState from '../../AppState';
 import {
  getTeamAndUserDetailsPath,
  getUserPath,
-  PAGE_SIZE,
+  PAGE_SIZE_MEDIUM,
 } from '../../constants/constants';
 import { TEAMS_DOCS } from '../../constants/docs.constants';
 import {
@ -114,6 +114,7 @@ const TeamDetailsV1 = ({
  onDescriptionUpdate,
  descriptionHandler,
  handleTeamUsersSearchAction,
+  handleCurrentUserPage,
  teamUserPaginHandler,
  handleJoinTeamClick,
  handleLeaveTeamClick,
@ -483,8 +484,12 @@ const TeamDetailsV1 = ({
  }, [currentTeam, AppState.userDetails, AppState.nonSecureUserDetails]);

  useEffect(() => {
-    setCurrentTab(tabs[0].position);
-  }, [tabs]);
+    isGroupType && setCurrentTab(2);
+  }, [isGroupType]);
+
+  useEffect(() => {
+    handleCurrentUserPage();
+  }, []);

  const removeUserBodyText = (leave: boolean) => {
    const text = leave
@ -621,11 +626,11 @@ const TeamDetailsV1 = ({
                  pagination={false}
                  size="small"
                />
-                {teamUserPagin.total > PAGE_SIZE && (
+                {teamUserPagin.total > PAGE_SIZE_MEDIUM && (
                  <NextPrevious
                    currentPage={currentTeamUserPage}
                    isNumberBased={Boolean(teamUsersSearchText)}
-                    pageSize={PAGE_SIZE}
+                    pageSize={PAGE_SIZE_MEDIUM}
                    paging={teamUserPagin}
                    pagingHandler={teamUserPaginHandler}
                    totalCount={teamUserPagin.total}
--- a/openmetadata-ui/src/main/resources/ui/src/components/UserList/UserListV1.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/UserList/UserListV1.tsx
@ -18,7 +18,7 @@ import { isUndefined } from 'lodash';
 import React, { FC, useMemo, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import { updateUser } from '../../axiosAPIs/userAPI';
-import { PAGE_SIZE, ROUTES } from '../../constants/constants';
+import { PAGE_SIZE_MEDIUM, ROUTES } from '../../constants/constants';
 import { NO_PERMISSION_FOR_ACTION } from '../../constants/HelperTextUtil';
 import { CreateUser } from '../../generated/api/teams/createUser';
 import { Operation } from '../../generated/entity/policies/policy';
@ -225,11 +225,11 @@ const UserListV1: FC<UserListV1Props> = ({
        />
      </Col>
      <Col span={24}>
-        {paging.total > PAGE_SIZE && (
+        {paging.total > PAGE_SIZE_MEDIUM && (
          <NextPrevious
            currentPage={currentPage}
            isNumberBased={Boolean(searchTerm)}
-            pageSize={PAGE_SIZE}
+            pageSize={PAGE_SIZE_MEDIUM}
            paging={paging}
            pagingHandler={onPagingChange}
            totalCount={paging.total}
--- a/openmetadata-ui/src/main/resources/ui/src/components/Webhooks/WebhookTable.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Webhooks/WebhookTable.tsx
@ -126,11 +126,11 @@ const WebhookTable: FC<Props> = ({ onEdit, webhookList, onDelete }) => {
        title: 'Description',
        dataIndex: 'description',
        key: 'description',
-        render: (_, record) => (
-          <RichTextEditorPreviewer
-            markdown={record?.description || ''}
-            maxLength={100}
-          />
+        render: (value) =>
+          value ? (
+            <RichTextEditorPreviewer markdown={value || ''} maxLength={100} />
+          ) : (
+            '--'
          ),
      },
      {
--- a/openmetadata-ui/src/main/resources/ui/src/components/Webhooks/WebhooksV1.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Webhooks/WebhooksV1.tsx
@ -17,7 +17,7 @@ import classNames from 'classnames';
 import { isEmpty, isNil } from 'lodash';
 import React, { FC, useEffect, useMemo, useState } from 'react';
 import { deleteWebhook } from '../../axiosAPIs/webhookAPI';
-import { PAGE_SIZE } from '../../constants/constants';
+import { PAGE_SIZE_MEDIUM } from '../../constants/constants';
 import { WEBHOOK_DOCS } from '../../constants/docs.constants';
 import { NO_PERMISSION_FOR_ACTION } from '../../constants/HelperTextUtil';
 import { WebhookType } from '../../generated/api/events/createWebhook';
@ -175,7 +175,7 @@ const WebhooksV1: FC<WebhooksV1Props> = ({
          {Boolean(!isNil(paging.after) || !isNil(paging.before)) && (
            <NextPrevious
              currentPage={currentPage}
-              pageSize={PAGE_SIZE}
+              pageSize={PAGE_SIZE_MEDIUM}
              paging={paging}
              pagingHandler={onPageChange}
              totalCount={paging.total}
--- a/openmetadata-ui/src/main/resources/ui/src/constants/constants.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/constants/constants.ts
@ -33,7 +33,7 @@ export const INITIAL_PAGING_VALUE = 1;
 export const JSON_TAB_SIZE = 2;
 export const PAGE_SIZE = 10;
 export const PAGE_SIZE_BASE = 12;
-export const PAGE_SIZE_MEDIUM = 16;
+export const PAGE_SIZE_MEDIUM = 15;
 export const API_RES_MAX_SIZE = 100000;
 export const LIST_SIZE = 5;
 export const SIDEBAR_WIDTH_COLLAPSED = 290;
--- a/openmetadata-ui/src/main/resources/ui/src/interface/teamsAndUsers.interface.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/interface/teamsAndUsers.interface.ts
@ -102,6 +102,7 @@ export interface TeamDetailsProp {
  onDescriptionUpdate: (value: string) => Promise<void>;
  handleTeamUsersSearchAction: (text: string) => void;
  updateTeamHandler: (data: Team) => Promise<void>;
+  handleCurrentUserPage: (value?: number) => void;
  teamUserPaginHandler: (
    cursorValue: string | number,
    activePage?: number
--- a/openmetadata-ui/src/main/resources/ui/src/pages/AddWebhookPage/AddWebhookPage.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/AddWebhookPage/AddWebhookPage.component.tsx
@ -49,14 +49,30 @@ const AddWebhookPage: FunctionComponent = () => {
  const [status, setStatus] = useState<LoadingState>('initial');

  const goToWebhooks = () => {
-    if (webhookType === WebhookType.Slack) {
+    switch (webhookType) {
+      case WebhookType.Slack: {
        history.push(
          getSettingPath(
            GlobalSettingsMenuCategory.INTEGRATIONS,
            GlobalSettingOptions.SLACK
          )
        );
-    } else {
+
+        break;
+      }
+
+      case WebhookType.Msteams: {
+        history.push(
+          getSettingPath(
+            GlobalSettingsMenuCategory.INTEGRATIONS,
+            GlobalSettingOptions.MSTEAMS
+          )
+        );
+
+        break;
+      }
+
+      default: {
        history.push(
          getSettingPath(
            GlobalSettingsMenuCategory.INTEGRATIONS,
@ -64,6 +80,7 @@ const AddWebhookPage: FunctionComponent = () => {
          )
        );
      }
+    }
  };

  const handleCancel = () => {
--- a/openmetadata-ui/src/main/resources/ui/src/pages/MsTeamsPage/MsTeamsPage.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/MsTeamsPage/MsTeamsPage.component.tsx
@ -21,6 +21,7 @@ import WebhooksV1 from '../../components/Webhooks/WebhooksV1';
 import {
  getAddWebhookPath,
  getEditWebhookPath,
+  PAGE_SIZE_MEDIUM,
  pagingObject,
 } from '../../constants/constants';
 import {
@ -42,13 +43,13 @@ const MsTeamsPage = () => {

  const fetchData = (paging?: string) => {
    setIsLoading(true);
-    getWebhooks(paging)
+    getWebhooks(paging, undefined, {
+      limit: PAGE_SIZE_MEDIUM,
+      webhookType: WebhookType.Msteams,
+    })
      .then((res) => {
        if (res.data) {
-          const genericWebhooks = res.data.filter(
-            (d) => d.webhookType === WebhookType.Msteams
-          );
-          setData(genericWebhooks);
+          setData(res.data);
          setPaging(res.paging);
        } else {
          setData([]);
--- a/openmetadata-ui/src/main/resources/ui/src/pages/PoliciesPage/PoliciesListPage/PoliciesListPage.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/PoliciesPage/PoliciesListPage/PoliciesListPage.tsx
@ -23,7 +23,7 @@ import { usePermissionProvider } from '../../../components/PermissionProvider/Pe
 import { ResourceEntity } from '../../../components/PermissionProvider/PermissionProvider.interface';
 import {
  INITIAL_PAGING_VALUE,
-  PAGE_SIZE,
+  PAGE_SIZE_MEDIUM,
  ROUTES,
 } from '../../../constants/constants';
 import { NO_PERMISSION_FOR_ACTION } from '../../../constants/HelperTextUtil';
@ -56,7 +56,8 @@ const PoliciesListPage = () => {
      const data = await getPolicies(
        'owner,location,roles,teams',
        paging?.after,
-        paging?.before
+        paging?.before,
+        PAGE_SIZE_MEDIUM
      );

      setPolicies(data.data || []);
@ -106,10 +107,10 @@ const PoliciesListPage = () => {
        <PoliciesList fetchPolicies={fetchPolicies} policies={policies} />
      </Col>
      <Col span={24}>
-        {paging && paging.total > PAGE_SIZE && (
+        {paging && paging.total > PAGE_SIZE_MEDIUM && (
          <NextPrevious
            currentPage={currentPage}
-            pageSize={PAGE_SIZE}
+            pageSize={PAGE_SIZE_MEDIUM}
            paging={paging}
            pagingHandler={handlePaging}
            totalCount={paging.total}
--- a/openmetadata-ui/src/main/resources/ui/src/pages/RolesPage/RolesListPage/RolesListPage.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/RolesPage/RolesListPage/RolesListPage.tsx
@ -23,7 +23,7 @@ import { usePermissionProvider } from '../../../components/PermissionProvider/Pe
 import { ResourceEntity } from '../../../components/PermissionProvider/PermissionProvider.interface';
 import {
  INITIAL_PAGING_VALUE,
-  PAGE_SIZE,
+  PAGE_SIZE_MEDIUM,
  ROUTES,
 } from '../../../constants/constants';
 import { NO_PERMISSION_FOR_ACTION } from '../../../constants/HelperTextUtil';
@ -58,7 +58,9 @@ const RolesListPage = () => {
      const data = await getRoles(
        'policies,teams,users',
        paging?.after,
-        paging?.before
+        paging?.before,
+        undefined,
+        PAGE_SIZE_MEDIUM
      );

      setRoles(data.data || []);
@ -109,10 +111,10 @@ const RolesListPage = () => {
        <RolesList fetchRoles={fetchRoles} roles={roles} />
      </Col>
      <Col span={24}>
-        {paging && paging.total > PAGE_SIZE && (
+        {paging && paging.total > PAGE_SIZE_MEDIUM && (
          <NextPrevious
            currentPage={currentPage}
-            pageSize={PAGE_SIZE}
+            pageSize={PAGE_SIZE_MEDIUM}
            paging={paging}
            pagingHandler={handlePaging}
            totalCount={paging.total}
--- a/openmetadata-ui/src/main/resources/ui/src/pages/SlackSettingsPage/SlackSettingsPage.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/SlackSettingsPage/SlackSettingsPage.component.tsx
@ -21,6 +21,7 @@ import WebhooksV1 from '../../components/Webhooks/WebhooksV1';
 import {
  getAddWebhookPath,
  getEditWebhookPath,
+  PAGE_SIZE_MEDIUM,
 } from '../../constants/constants';
 import { WebhookType } from '../../generated/api/events/createWebhook';
 import { Status, Webhook } from '../../generated/entity/events/webhook';
@ -40,16 +41,13 @@ export const SlackSettingsPage = () => {

  const fetchData = (paging?: string) => {
    setIsLoading(true);
-    getWebhooks(paging)
+    getWebhooks(paging, undefined, {
+      limit: PAGE_SIZE_MEDIUM,
+      webhookType: WebhookType.Slack,
+    })
      .then((response) => {
        if (response.data) {
-          // TODO: We are expecting filter support from BE (backend)
-          // Once we got it remove below lines and provide filter API calls
-          const slackData = response.data.filter(
-            (res) => res.webhookType === 'slack'
-          );
-          setData(slackData);
-          setData(slackData);
+          setData(response.data);
          setPaging(response.paging);
        } else {
          setData([]);
@ -92,25 +90,8 @@ export const SlackSettingsPage = () => {
    history.push(getAddWebhookPath(WebhookType.Slack));
  };

-  const fetchSlackData = async () => {
-    try {
-      const response = await getWebhooks();
-
-      if (response.data) {
-        const slackData = response.data.filter(
-          (res) => res.webhookType === 'slack'
-        );
-        setData(slackData);
-      }
-      setIsLoading(false);
-    } catch (error) {
-      setData([]);
-      setIsLoading(false);
-    }
-  };
-
  useEffect(() => {
-    fetchSlackData();
+    fetchData();
  }, []);

  return (
--- a/openmetadata-ui/src/main/resources/ui/src/pages/TestSuitePage/TestSuitePage.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/TestSuitePage/TestSuitePage.tsx
@ -20,7 +20,7 @@ import Ellipses from '../../components/common/Ellipses/Ellipses';
 import NextPrevious from '../../components/common/next-previous/NextPrevious';
 import {
  INITIAL_PAGING_VALUE,
-  PAGE_SIZE,
+  PAGE_SIZE_MEDIUM,
  pagingObject,
 } from '../../constants/constants';
 import { TestSuite } from '../../generated/tests/testSuite';
@ -39,7 +39,7 @@ const TestSuitePage = () => {
      setIsLoading(true);
      const response = await getListTestSuites({
        fields: 'owner,tests',
-        limit: PAGE_SIZE,
+        limit: PAGE_SIZE_MEDIUM,
        before: param && param.before,
        after: param && param.after,
      });
@ -116,11 +116,11 @@ const TestSuitePage = () => {
          size="small"
        />
      </Col>
-      {testSuites.length > PAGE_SIZE && (
+      {testSuites.length > PAGE_SIZE_MEDIUM && (
        <Col span={24}>
          <NextPrevious
            currentPage={testSuitePage}
-            pageSize={PAGE_SIZE}
+            pageSize={PAGE_SIZE_MEDIUM}
            paging={testSuitePaging}
            pagingHandler={testSuitePagingHandler}
            totalCount={testSuitePaging.total}
--- a/openmetadata-ui/src/main/resources/ui/src/pages/WebhooksPage/WebhooksPageV1.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/WebhooksPage/WebhooksPageV1.component.tsx
@ -19,6 +19,7 @@ import Loader from '../../components/Loader/Loader';
 import WebhooksV1 from '../../components/Webhooks/WebhooksV1';
 import {
  getEditWebhookPath,
+  PAGE_SIZE_MEDIUM,
  pagingObject,
  ROUTES,
 } from '../../constants/constants';
@ -41,7 +42,7 @@ const WebhooksPageV1 = () => {

  const fetchData = (paging?: string) => {
    setIsLoading(true);
-    getWebhooks(paging)
+    getWebhooks(paging, undefined, { limit: PAGE_SIZE_MEDIUM })
      .then((res) => {
        if (res.data) {
          const genericWebhooks = res.data.filter(
--- a/openmetadata-ui/src/main/resources/ui/src/pages/teams/TeamsPage.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/teams/TeamsPage.tsx
@ -32,7 +32,7 @@ import TeamDetailsV1 from '../../components/TeamDetails/TeamDetailsV1';
 import Teams from '../../components/TeamDetails/Teams';
 import {
  INITIAL_PAGING_VALUE,
-  PAGE_SIZE,
+  PAGE_SIZE_MEDIUM,
  pagingObject,
 } from '../../constants/constants';
 import { SearchIndex } from '../../enums/search.enum';
@ -169,7 +169,7 @@ const TeamsPage = () => {
    paging = {} as { [key: string]: string }
  ) => {
    setIsDataLoading(true);
-    getUsers('teams,roles', PAGE_SIZE, { team, ...paging })
+    getUsers('teams,roles', PAGE_SIZE_MEDIUM, { team, ...paging })
      .then((res) => {
        if (res.data) {
          setUsers(res.data);
@ -220,7 +220,7 @@ const TeamsPage = () => {
    searchData(
      text,
      currentPage,
-      PAGE_SIZE,
+      PAGE_SIZE_MEDIUM,
      `(teams.id:${selectedTeam?.id})`,
      '',
      '',
@ -393,6 +393,10 @@ const TeamsPage = () => {
    });
  };

+  const handleCurrentUserPage = (value?: number) => {
+    setCurrentUserPage(value ?? INITIAL_PAGING_VALUE);
+  };
+
  const handleUsersSearchAction = (text: string) => {
    setUserSearchValue(text);
    setCurrentUserPage(INITIAL_PAGING_VALUE);
@ -463,6 +467,7 @@ const TeamsPage = () => {
          descriptionHandler={descriptionHandler}
          handleAddTeam={handleAddTeam}
          handleAddUser={handleAddUsers}
+          handleCurrentUserPage={handleCurrentUserPage}
          handleJoinTeamClick={handleJoinTeamClick}
          handleLeaveTeamClick={handleLeaveTeamClick}
          handleTeamUsersSearchAction={handleUsersSearchAction}