From 0f2b81f50311d96b41b72488f30dbc6ba22a931b Mon Sep 17 00:00:00 2001 From: Aniket Katkar <51777795+aniketkatkar97@users.noreply.github.com> Date: Tue, 6 Sep 2022 22:01:38 +0530 Subject: [PATCH] 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 --- .../resources/ui/src/axiosAPIs/webhookAPI.ts | 16 +++++-- .../BotListV1/BotListV1.component.tsx | 8 ++-- .../components/TeamDetails/TeamDetailsV1.tsx | 15 ++++--- .../ui/src/components/UserList/UserListV1.tsx | 6 +-- .../src/components/Webhooks/WebhookTable.tsx | 12 ++--- .../ui/src/components/Webhooks/WebhooksV1.tsx | 4 +- .../resources/ui/src/constants/constants.ts | 2 +- .../src/interface/teamsAndUsers.interface.ts | 1 + .../AddWebhookPage.component.tsx | 45 +++++++++++++------ .../MsTeamsPage/MsTeamsPage.component.tsx | 11 ++--- .../PoliciesListPage/PoliciesListPage.tsx | 9 ++-- .../RolesPage/RolesListPage/RolesListPage.tsx | 10 +++-- .../SlackSettingsPage.component.tsx | 33 +++----------- .../src/pages/TestSuitePage/TestSuitePage.tsx | 8 ++-- .../WebhooksPage/WebhooksPageV1.component.tsx | 3 +- .../ui/src/pages/teams/TeamsPage.tsx | 11 +++-- 16 files changed, 109 insertions(+), 85 deletions(-) diff --git a/openmetadata-ui/src/main/resources/ui/src/axiosAPIs/webhookAPI.ts b/openmetadata-ui/src/main/resources/ui/src/axiosAPIs/webhookAPI.ts index 5d27fc521c4..a1c757ddf49 100644 --- 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; diff --git 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 index 8117945e576..936072f1b43 100644 --- 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 = ({ /> - {paging.total > PAGE_SIZE && ( + {paging.total > PAGE_SIZE_MEDIUM && ( { - 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 && ( = ({ /> - {paging.total > PAGE_SIZE && ( + {paging.total > PAGE_SIZE_MEDIUM && ( = ({ onEdit, webhookList, onDelete }) => { title: 'Description', dataIndex: 'description', key: 'description', - render: (_, record) => ( - - ), + render: (value) => + value ? ( + + ) : ( + '--' + ), }, { title: 'Actions', diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Webhooks/WebhooksV1.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Webhooks/WebhooksV1.tsx index 2020babd06b..a805d096965 100644 --- 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 = ({ {Boolean(!isNil(paging.after) || !isNil(paging.before)) && ( Promise; handleTeamUsersSearchAction: (text: string) => void; updateTeamHandler: (data: Team) => Promise; + handleCurrentUserPage: (value?: number) => void; teamUserPaginHandler: ( cursorValue: string | number, activePage?: number diff --git 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 index 3a9a8b47e2e..6d529249b59 100644 --- 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,20 +49,37 @@ const AddWebhookPage: FunctionComponent = () => { const [status, setStatus] = useState('initial'); const goToWebhooks = () => { - if (webhookType === WebhookType.Slack) { - history.push( - getSettingPath( - GlobalSettingsMenuCategory.INTEGRATIONS, - GlobalSettingOptions.SLACK - ) - ); - } else { - history.push( - getSettingPath( - GlobalSettingsMenuCategory.INTEGRATIONS, - GlobalSettingOptions.WEBHOOK - ) - ); + switch (webhookType) { + case WebhookType.Slack: { + history.push( + getSettingPath( + GlobalSettingsMenuCategory.INTEGRATIONS, + GlobalSettingOptions.SLACK + ) + ); + + break; + } + + case WebhookType.Msteams: { + history.push( + getSettingPath( + GlobalSettingsMenuCategory.INTEGRATIONS, + GlobalSettingOptions.MSTEAMS + ) + ); + + break; + } + + default: { + history.push( + getSettingPath( + GlobalSettingsMenuCategory.INTEGRATIONS, + GlobalSettingOptions.WEBHOOK + ) + ); + } } }; diff --git 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 index 705fe722cb9..35a73f96add 100644 --- 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([]); diff --git 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 index 4e3da7eb41a..8b54c33a93c 100644 --- 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 = () => { - {paging && paging.total > PAGE_SIZE && ( + {paging && paging.total > PAGE_SIZE_MEDIUM && ( { 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 = () => { - {paging && paging.total > PAGE_SIZE && ( + {paging && paging.total > PAGE_SIZE_MEDIUM && ( { 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 ( diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/TestSuitePage/TestSuitePage.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/TestSuitePage/TestSuitePage.tsx index 0780275713e..5a494f91392 100644 --- 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" /> - {testSuites.length > PAGE_SIZE && ( + {testSuites.length > PAGE_SIZE_MEDIUM && ( { 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( diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/teams/TeamsPage.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/teams/TeamsPage.tsx index 007554d108b..c390cd1c713 100644 --- 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}