yujunjun/OpenMetadata
1
0
Fork 0
mirror of https://github.com/open-metadata/OpenMetadata.git synced 2025-11-07 05:53:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix: Flashy Popover, uneven UI for Tags, Teams and Services page (#2132)

Browse Source
This commit is contained in:
darth-coder00 2022-01-10 18:09:05 +05:30 committed by GitHub
parent d3b6c7cf27
commit 464181f074
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 201 additions and 202 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
openmetadata-ui/src/main/resources/ui/src/components/common/popover/PopOver.tsx
View File

@ -21,6 +21,8 @@ const PopOver: React.FC<PopOverProp> = ({
arrow = true,
children,
className = '',
delay = 500,
hideDelay = 0,
html,
position,
size = 'regular',
@ -32,6 +34,8 @@ const PopOver: React.FC<PopOverProp> = ({
<Tooltip
arrow={arrow}
className={className}
delay={delay}
hideDelay={hideDelay}
html={html}
position={position}
size={size}

2
openmetadata-ui/src/main/resources/ui/src/components/common/popover/PopOverTypes.ts
View File

@ -28,4 +28,6 @@ export type PopOverProp = {
trigger: Trigger;
children: ReactNode;
className?: string;
delay?: number;
hideDelay?: number;
};

132
openmetadata-ui/src/main/resources/ui/src/pages/services/index.tsx
View File

@ -58,7 +58,7 @@ import { MessagingService } from '../../generated/entity/services/messagingServi
import { PipelineService } from '../../generated/entity/services/pipelineService';
import { useAuth } from '../../hooks/authHooks';
import useToastContext from '../../hooks/useToastContext';
import { getCountBadge, getTabClasses } from '../../utils/CommonUtils';
import { getActiveCatClass, getCountBadge } from '../../utils/CommonUtils';
import { getFrequencyTime, serviceTypeLogo } from '../../utils/ServiceUtils';
import SVGIcons from '../../utils/SvgUtils';
@ -327,6 +327,41 @@ const ServicesPage = () => {
setServiceList(services[tabName] as unknown as Array<ServiceDataObj>);
};
const fetchLeftPanel = () => {
return (
<>
<div className="tw-flex tw-justify-between tw-items-center tw-mb-3 tw-border-b">
<h6 className="tw-heading tw-text-base">Services</h6>
</div>
{getServiceTabs()?.map((tab, index) => {
return (
<div
className={`tw-group tw-text-grey-body tw-cursor-pointer tw-text-body tw-mb-3 tw-flex tw-justify-between ${getActiveCatClass(
tab.name,
serviceName
)}`}
data-testid="tab"
key={index}
onClick={() => {
handleTabChange(tab.name);
}}>
<p className="tw-text-center tw-self-center label-category">
{tab.displayName}
</p>
{getCountBadge(
servicesCount[tab.name],
'',
tab.name === serviceName
)}
</div>
);
})}
</>
);
};
const getOptionalFields = (service: ServiceDataObj): JSX.Element => {
switch (serviceName) {
case ServiceCategory.DATABASE_SERVICES: {
@ -452,68 +487,35 @@ const ServicesPage = () => {
return (
<>
{!isLoading ? (
<PageContainerV1 className="tw-pt-1">
<PageLayout>
<PageContainerV1 className="tw-pt-4">
<PageLayout leftPanel={fetchLeftPanel()}>
<div data-testid="services-container">
<div className="tw-bg-transparent tw-mb-4">
<nav className="tw-flex tw-flex-row tw-gh-tabs-container">
{getServiceTabs().map((tab, index) => (
<button
className={getTabClasses(tab.name, serviceName)}
data-testid="tab"
key={index}
onClick={() => handleTabChange(tab.name)}>
{tab.displayName}
{getCountBadge(
servicesCount[tab.name],
'',
tab.name === serviceName
)}
</button>
))}
<div className="tw-self-end tw-ml-auto">
{serviceList.length > 0 ? (
<NonAdminAction
position="bottom"
title={TITLE_FOR_NON_ADMIN_ACTION}>
<Button
className={classNames('tw-h-8 tw-rounded tw-mb-2', {
'tw-opacity-40': !isAdminUser && !isAuthDisabled,
})}
data-testid="add-new-user-button"
size="small"
theme="primary"
variant="contained"
onClick={() => handleAddService()}>
Add New Service
</Button>
</NonAdminAction>
) : null}
</div>
</nav>
</div>
{/* <div className="tw-flex">
<div className="tw-w-8/12 tw-flex tw-justify-end">
{serviceList.length > 0 ? (
<NonAdminAction
position="bottom"
title={TITLE_FOR_NON_ADMIN_ACTION}>
<Button
className={classNames('tw-h-8 tw-rounded tw-mb-2', {
'tw-opacity-40': !isAdminUser && !isAuthDisabled,
})}
data-testid="add-new-user-button"
size="small"
theme="primary"
variant="contained"
onClick={() => handleAddService()}>
Add New Service
</Button>
</NonAdminAction>
) : null}
</div>
</div> */}
{serviceList.length ? (
<>
<div
className="tw-flex tw-justify-between"
data-testid="header">
<div
className="tw-heading tw-text-link tw-text-base"
data-testid="service-name">
{servicesDisplayName[serviceName]}
</div>
<NonAdminAction
position="bottom"
title={TITLE_FOR_NON_ADMIN_ACTION}>
<Button
className={classNames('tw-h-8 tw-rounded tw-mb-2', {
'tw-opacity-40': !isAdminUser && !isAuthDisabled,
})}
data-testid="add-new-user-button"
size="small"
theme="primary"
variant="contained"
onClick={() => handleAddService()}>
Add New Service
</Button>
</NonAdminAction>
</div>
<div
className="tw-grid tw-grid-cols-4 tw-gap-4 tw-mb-4"
data-testid="data-container">
@ -607,19 +609,13 @@ const ServicesPage = () => {
<div
className="tw-flex tw-justify-end"
data-testid="service-icon">
{/* {!isNull(serviceTypeLogo(service.serviceType)) && (
<img
alt=""
className="tw-h-10 tw-w-10"
src={serviceTypeLogo(service.serviceType)}
/>
)} */}
{getServiceLogo(service.serviceType || '')}
</div>
</div>
</div>
))}
</div>
</>
) : (
<div className="tw-flex tw-items-center tw-flex-col">
<div className="tw-mt-24">

35
openmetadata-ui/src/main/resources/ui/src/pages/tags/index.tsx
View File

@ -44,7 +44,11 @@ import {
} from '../../generated/api/tags/createTagCategory';
import { TagCategory, TagClass } from '../../generated/entity/tags/tagCategory';
import { useAuth } from '../../hooks/authHooks';
import { getCountBadge, isEven } from '../../utils/CommonUtils';
import {
getActiveCatClass,
getCountBadge,
isEven,
} from '../../utils/CommonUtils';
import SVGIcons from '../../utils/SvgUtils';
import { getTagCategories, getTaglist } from '../../utils/TagsUtils';
import Form from './Form';
@ -93,14 +97,6 @@ const TagsPage = () => {
}
};
const currentCategoryTab = (name: string) => {
if (currentCategory?.name === name) {
return 'activeCategory';
} else {
return '';
}
};
const createCategory = (data: CreateTagCategory) => {
createTagCategory(data).then((res: AxiosResponse) => {
if (res.data) {
@ -180,11 +176,11 @@ const TagsPage = () => {
const fetchLeftPanel = () => {
return (
<>
<div className="tw-flex tw-justify-between tw-items-baseline tw-mb-3 tw-border-b">
<h6 className="tw-heading">Tag Categories</h6>
<div className="tw-flex tw-justify-between tw-items-center tw-mb-3 tw-border-b">
<h6 className="tw-heading tw-text-base">Tag Categories</h6>
<NonAdminAction position="bottom" title={TITLE_FOR_NON_ADMIN_ACTION}>
<Button
className={classNames('tw-h-7 tw-px-2', {
className={classNames('tw-h-7 tw-px-2 tw-mb-4', {
'tw-opacity-40': !isAdminUser && !isAuthDisabled,
})}
data-testid="add-category"
@ -199,15 +195,16 @@ const TagsPage = () => {
{categories &&
categories.map((category: TagCategory) => (
<div
className={`tw-group tw-text-grey-body tw-cursor-pointer tw-text-body tw-mb-3 tw-flex tw-justify-between ${currentCategoryTab(
category.name
className={`tw-group tw-text-grey-body tw-cursor-pointer tw-text-body tw-mb-3 tw-flex tw-justify-between ${getActiveCatClass(
category.name,
currentCategory?.name
)}`}
data-testid="side-panel-category"
key={category.name}
onClick={() => {
fetchCurrentCategory(category.name);
}}>
<p className="tw-text-center tw-self-center tag-category">
<p className="tw-text-center tw-self-center tag-category label-category">
{category.name}
</p>
@ -235,7 +232,7 @@ const TagsPage = () => {
<div data-testid="tags-container">
{currentCategory && (
<div
className="tw-flex tw-justify-between tw-pl-1"
className="tw-flex tw-justify-between tw-items-center"
data-testid="header">
<div
className="tw-heading tw-text-link tw-text-base"
@ -246,7 +243,7 @@ const TagsPage = () => {
position="bottom"
title={TITLE_FOR_NON_ADMIN_ACTION}>
<Button
className={classNames('tw-h-8 tw-rounded tw-mb-2', {
className={classNames('tw-h-8 tw-rounded tw-mb-3', {
'tw-opacity-40': !isAdminUser && !isAuthDisabled,
})}
data-testid="add-new-tag-button"
@ -261,7 +258,9 @@ const TagsPage = () => {
</NonAdminAction>
</div>
)}
<div className="tw-mb-3" data-testid="description-container">
<div
className="tw-mb-3 tw--ml-5"
data-testid="description-container">
<Description
description={currentCategory?.description || ''}
entityName={currentCategory?.displayName}

28
openmetadata-ui/src/main/resources/ui/src/pages/teams/index.tsx
View File

@ -41,7 +41,7 @@ import { Team } from '../../generated/entity/teams/team';
import { User } from '../../generated/entity/teams/user';
import { useAuth } from '../../hooks/authHooks';
import { UserTeam } from '../../interface/team.interface';
import { getCountBadge } from '../../utils/CommonUtils';
import { getActiveCatClass, getCountBadge } from '../../utils/CommonUtils';
import AddUsersModal from './AddUsersModal';
import Form from './Form';
import UserCard from './UserCard';
@ -143,13 +143,6 @@ const TeamsPage = () => {
});
};
const getCurrentTeamClass = (name: string) => {
if (currentTeam?.name === name) {
return 'activeCategory';
} else {
return '';
}
};
const getActiveTabClass = (tab: number) => {
return tab === currentTab ? 'active' : '';
};
@ -276,11 +269,11 @@ const TeamsPage = () => {
const fetchLeftPanel = () => {
return (
<>
<div className="tw-flex tw-justify-between tw-items-baseline tw-mb-3 tw-border-b">
<h6 className="tw-heading">Teams</h6>
<div className="tw-flex tw-justify-between tw-items-center tw-mb-3 tw-border-b">
<h6 className="tw-heading tw-text-base">Teams</h6>
<NonAdminAction position="bottom" title={TITLE_FOR_NON_ADMIN_ACTION}>
<Button
className={classNames('tw-h-7 tw-px-2', {
className={classNames('tw-h-7 tw-px-2 tw-mb-4', {
'tw-opacity-40': !isAdminUser && !isAuthDisabled,
})}
data-testid="add-teams"
@ -295,14 +288,15 @@ const TeamsPage = () => {
{teams &&
teams.map((team: Team) => (
<div
className={`tw-group tw-text-grey-body tw-cursor-pointer tw-text-body tw-mb-3 tw-flex tw-justify-between ${getCurrentTeamClass(
team.name
className={`tw-group tw-text-grey-body tw-cursor-pointer tw-text-body tw-mb-3 tw-flex tw-justify-between ${getActiveCatClass(
team.name,
currentTeam?.name
)}`}
key={team.name}
onClick={() => {
changeCurrentTeam(team.name);
}}>
<p className="tw-text-center tag-category tw-self-center">
<p className="tw-text-center tag-category label-category tw-self-center">
{team.displayName}
</p>
</div>
@ -382,7 +376,7 @@ const TeamsPage = () => {
{teams.length > 0 ? (
<>
<div
className="tw-flex tw-justify-between tw-pl-1"
className="tw-flex tw-justify-between tw-items-center"
data-testid="header">
<div className="tw-heading tw-text-link tw-text-base">
{currentTeam?.displayName}
@ -391,7 +385,7 @@ const TeamsPage = () => {
position="bottom"
title={TITLE_FOR_NON_ADMIN_ACTION}>
<Button
className={classNames('tw-h-8 tw-rounded tw-mb-2', {
className={classNames('tw-h-8 tw-rounded tw-mb-3', {
'tw-opacity-40': !isAdminUser && !isAuthDisabled,
})}
data-testid="add-new-user-button"
@ -404,7 +398,7 @@ const TeamsPage = () => {
</NonAdminAction>
</div>
<div
className="tw-mb-3"
className="tw-mb-3 tw--ml-5"
data-testid="description-container">
<Description
description={currentTeam?.description || ''}

4
openmetadata-ui/src/main/resources/ui/src/styles/tailwind.css
View File

@ -232,8 +232,8 @@
@apply tw-border-b tw-border-separator;
}
.side-panel .activeCategory .tag-category {
@apply tw-text-primary tw-font-medium;
.activeCategory .label-category {
@apply tw-text-primary;
}
.custom-checkbox {

4
openmetadata-ui/src/main/resources/ui/src/utils/CommonUtils.tsx
View File

@ -274,3 +274,7 @@ export const getOwnerIds = (
return [getCurrentUserId()];
}
};
export const getActiveCatClass = (name: string, activeName = '') => {
return activeName === name ? 'activeCategory' : '';
};