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

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;

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}

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);
+    isGroupType && setCurrentTab(2);
-  }, [tabs]);
+  }, [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}

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}

openmetadata-ui/src/main/resources/ui/src/components/Webhooks/WebhookTable.tsx

@@ -126,12 +126,12 @@ const WebhookTable: FC<Props> = ({ onEdit, webhookList, onDelete }) => {
         title: 'Description',
         dataIndex: 'description',
         key: 'description',
-        render: (_, record) => (
+        render: (value) =>
-          <RichTextEditorPreviewer
+          value ? (
-            markdown={record?.description || ''}
+            <RichTextEditorPreviewer markdown={value || ''} maxLength={100} />
-            maxLength={100}
+          ) : (
-          />
+            '--'
-        ),
+          ),
       },
       {
         title: 'Actions',

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}

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;

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

openmetadata-ui/src/main/resources/ui/src/pages/AddWebhookPage/AddWebhookPage.component.tsx

@@ -49,20 +49,37 @@ const AddWebhookPage: FunctionComponent = () => {
   const [status, setStatus] = useState<LoadingState>('initial');
 
   const goToWebhooks = () => {
-    if (webhookType === WebhookType.Slack) {
+    switch (webhookType) {
-      history.push(
+      case WebhookType.Slack: {
-        getSettingPath(
+        history.push(
-          GlobalSettingsMenuCategory.INTEGRATIONS,
+          getSettingPath(
-          GlobalSettingOptions.SLACK
+            GlobalSettingsMenuCategory.INTEGRATIONS,
-        )
+            GlobalSettingOptions.SLACK
-      );
+          )
-    } else {
+        );
-      history.push(
+
-        getSettingPath(
+        break;
-          GlobalSettingsMenuCategory.INTEGRATIONS,
+      }
-          GlobalSettingOptions.WEBHOOK
+
-        )
+      case WebhookType.Msteams: {
-      );
+        history.push(
+          getSettingPath(
+            GlobalSettingsMenuCategory.INTEGRATIONS,
+            GlobalSettingOptions.MSTEAMS
+          )
+        );
+
+        break;
+      }
+
+      default: {
+        history.push(
+          getSettingPath(
+            GlobalSettingsMenuCategory.INTEGRATIONS,
+            GlobalSettingOptions.WEBHOOK
+          )
+        );
+      }
     }
   };
 

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(
+          setData(res.data);
-            (d) => d.webhookType === WebhookType.Msteams
-          );
-          setData(genericWebhooks);
           setPaging(res.paging);
         } else {
           setData([]);

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}

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}

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)
+          setData(response.data);
-          // 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);
           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 (

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}

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(

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}