yujunjun/OpenMetadata
1
0
Fork 0
mirror of https://github.com/open-metadata/OpenMetadata.git synced 2025-08-23 08:28:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fixed: UI styling of the app (#5746)

Browse Source 
* Fixed ui styling

* addressing comment
This commit is contained in:
Shailesh Parmar 2022-06-29 19:24:58 +05:30 committed by GitHub
parent d7cf1289d4
commit 703e420f7d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 190 additions and 199 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCard/ActivityFeedCard.tsx
View File

@ -121,9 +121,13 @@ const ActivityFeedCard: FC<ActivityFeedCardProp> = ({
return ( return (
<div <div
className={classNames(className, 'hover:tw-bg-gray-100', { className={classNames(
className,
'hover:tw-bg-gray-100 tw--mx-2.5 tw-px-2.5 tw--mt-1 tw-py-1 tw-mb-1 tw-rounded',
{
'tw-bg-gray-100': visible, 'tw-bg-gray-100': visible,
})}> }
)}>
<Popover <Popover
destroyTooltipOnHide destroyTooltipOnHide
align={{ targetOffset: [0, -35] }} align={{ targetOffset: [0, -35] }}
@ -147,7 +151,7 @@ const ActivityFeedCard: FC<ActivityFeedCardProp> = ({
visible={visible} visible={visible}
zIndex={9999} zIndex={9999}
onVisibleChange={handleVisibleChange}> onVisibleChange={handleVisibleChange}>
<div className="tw-flex tw-p-2 tw-mb-1"> <div className="tw-flex tw-mb-1">
<UserPopOverCard userName={feedDetail.from}> <UserPopOverCard userName={feedDetail.from}>
<span className="tw-cursor-pointer" data-testid="authorAvatar"> <span className="tw-cursor-pointer" data-testid="authorAvatar">
<ProfilePicture id="" name={feedDetail.from} width="32" /> <ProfilePicture id="" name={feedDetail.from} width="32" />

23
openmetadata-ui/src/main/resources/ui/src/components/BotsDetail/BotsDetail.component.tsx
View File

@ -37,7 +37,6 @@ import CopyToClipboardButton from '../buttons/CopyToClipboardButton/CopyToClipbo
import Description from '../common/description/Description'; import Description from '../common/description/Description';
import { reactSingleSelectCustomStyle } from '../common/react-select-component/reactSelectCustomStyle'; import { reactSingleSelectCustomStyle } from '../common/react-select-component/reactSelectCustomStyle';
import TitleBreadcrumb from '../common/title-breadcrumb/title-breadcrumb.component'; import TitleBreadcrumb from '../common/title-breadcrumb/title-breadcrumb.component';
import PageContainerV1 from '../containers/PageContainerV1';
import PageLayout, { leftPanelAntCardStyle } from '../containers/PageLayout'; import PageLayout, { leftPanelAntCardStyle } from '../containers/PageLayout';
import ConfirmationModal from '../Modals/ConfirmationModal/ConfirmationModal'; import ConfirmationModal from '../Modals/ConfirmationModal/ConfirmationModal';
import { UserDetails } from '../Users/Users.interface'; import { UserDetails } from '../Users/Users.interface';
@ -161,11 +160,11 @@ const BotsDetail: FC<BotsDetailProp> = ({
const getDisplayNameComponent = () => { const getDisplayNameComponent = () => {
return ( return (
<div className="tw-mt-4 tw-w-full tw-flex tw-items-center tw-justify-between"> <div className="tw-mt-4 tw-w-full">
{isDisplayNameEdit ? ( {isDisplayNameEdit ? (
<div className="tw-flex tw-items-center tw-gap-1"> <div className="tw-flex tw-items-center tw-gap-2">
<input <input
className="tw-form-inputs tw-form-inputs-padding tw-py-0.5 tw-w-64" className="tw-form-inputs tw-form-inputs-padding tw-py-0.5 tw-w-full"
data-testid="displayName" data-testid="displayName"
id="displayName" id="displayName"
name="displayName" name="displayName"
@ -241,7 +240,7 @@ const BotsDetail: FC<BotsDetailProp> = ({
className="ant-card-feed" className="ant-card-feed"
style={{ style={{
...leftPanelAntCardStyle, ...leftPanelAntCardStyle,
marginTop: '20px', marginTop: '16px',
}}> }}>
<div data-testid="left-panel"> <div data-testid="left-panel">
<div className="tw-flex tw-flex-col"> <div className="tw-flex tw-flex-col">
@ -267,7 +266,7 @@ const BotsDetail: FC<BotsDetailProp> = ({
className="ant-card-feed" className="ant-card-feed"
style={{ style={{
...leftPanelAntCardStyle, ...leftPanelAntCardStyle,
marginTop: '20px', marginTop: '16px',
}}> }}>
<div data-testid="right-panel"> <div data-testid="right-panel">
<div className="tw-flex tw-flex-col"> <div className="tw-flex tw-flex-col">
@ -377,7 +376,7 @@ const BotsDetail: FC<BotsDetailProp> = ({
const getCenterLayout = () => { const getCenterLayout = () => {
return ( return (
<div <div
className="tw-w-full tw-bg-white tw-shadow tw-rounded tw-p-4" className="tw-w-full tw-bg-white tw-shadow tw-rounded tw-p-4 tw-mt-4"
data-testid="center-panel"> data-testid="center-panel">
<div className="tw-flex tw-justify-between tw-items-center"> <div className="tw-flex tw-justify-between tw-items-center">
<h6 className="tw-mb-2 tw-self-center"> <h6 className="tw-mb-2 tw-self-center">
@ -423,7 +422,9 @@ const BotsDetail: FC<BotsDetailProp> = ({
}, [botsData]); }, [botsData]);
return ( return (
<PageContainerV1 className="tw-py-4"> <PageLayout
classes="tw-h-full tw-px-4"
header={
<TitleBreadcrumb <TitleBreadcrumb
className="tw-px-6" className="tw-px-6"
titleLinks={[ titleLinks={[
@ -434,12 +435,10 @@ const BotsDetail: FC<BotsDetailProp> = ({
{ name: botsData.name || '', url: '', activeTitle: true }, { name: botsData.name || '', url: '', activeTitle: true },
]} ]}
/> />
<PageLayout }
classes="tw-h-full tw-px-4"
leftPanel={fetchLeftPanel()} leftPanel={fetchLeftPanel()}
rightPanel={fetchRightPanel()}> rightPanel={fetchRightPanel()}>
{getCenterLayout()} {getCenterLayout()}
</PageLayout>
{isRevokingToken ? ( {isRevokingToken ? (
<ConfirmationModal <ConfirmationModal
bodyText="Are you sure you want to revoke access for JWT token?" bodyText="Are you sure you want to revoke access for JWT token?"
@ -466,7 +465,7 @@ const BotsDetail: FC<BotsDetailProp> = ({
}} }}
/> />
) : null} ) : null}
</PageContainerV1> </PageLayout>
); );
}; };

4
openmetadata-ui/src/main/resources/ui/src/components/Reactions/Emoji.jsx
View File

@ -92,7 +92,9 @@ const Emoji = ({ reaction, reactionList, onReactionSelect }) => {
fallback-src={image}> fallback-src={image}>
{reactionObject.emoji} {reactionObject.emoji}
</g-emoji> </g-emoji>
<span data-testid="emoji-count">{reactionList.length}</span> <span className="tw-text-sm tw-ml-1" data-testid="emoji-count">
{reactionList.length}
</span>
</Button> </Button>
</Popover> </Popover>
); );

2
openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/TeamDetails.tsx
View File

@ -365,7 +365,7 @@ const TeamDetails = ({
) : ( ) : (
<Fragment> <Fragment>
<div <div
className="tw-grid xxl:tw-grid-cols-4 lg:tw-grid-cols-3 md:tw-grid-cols-2 tw-gap-4" className="tw-grid lg:tw-grid-cols-4 md:tw-grid-cols-2 tw-gap-4"
data-testid="user-data-container"> data-testid="user-data-container">
{sortedUser.map((user, index) => { {sortedUser.map((user, index) => {
const User = { const User = {

52
openmetadata-ui/src/main/resources/ui/src/components/Users/Users.component.tsx
View File

@ -225,11 +225,11 @@ const Users = ({
const getDisplayNameComponent = () => { const getDisplayNameComponent = () => {
if (isAdminUser || isLoggedinUser || isAuthDisabled) { if (isAdminUser || isLoggedinUser || isAuthDisabled) {
return ( return (
<div className="tw-mt-4 tw-w-full tw-flex tw-items-center tw-justify-between tw-px-3"> <div className="tw-mt-4 tw-w-full tw-px-3">
{isDisplayNameEdit ? ( {isDisplayNameEdit ? (
<div className="tw-flex tw-items-center tw-gap-1 "> <div className="tw-flex tw-justify-between tw-items-center tw-gap-2">
<input <input
className="tw-form-inputs tw-form-inputs-padding tw-py-0.5 tw-w-64" className="tw-form-inputs tw-form-inputs-padding tw-py-0.5 tw-w-full"
data-testid="displayName" data-testid="displayName"
id="displayName" id="displayName"
name="displayName" name="displayName"
@ -281,7 +281,7 @@ const Users = ({
); );
} else { } else {
return ( return (
<p className="tw-mt-2"> <p className="tw-mt-2 tw-px-3">
{getEntityName(userData as unknown as EntityReference)} {getEntityName(userData as unknown as EntityReference)}
</p> </p>
); );
@ -305,7 +305,7 @@ const Users = ({
); );
} else { } else {
return ( return (
<div className="tw--ml-2"> <div className="tw--ml-2 tw-px-3">
<p className="tw-mt-2"> <p className="tw-mt-2">
{userData.description || ( {userData.description || (
<span className="tw-no-description tw-p-2">No description </span> <span className="tw-no-description tw-p-2">No description </span>
@ -335,7 +335,7 @@ const Users = ({
return ( return (
<Card <Card
className="ant-card-feed tw-relative" className="ant-card-feed tw-relative"
key="inherited-roles-card" key="teams-card"
style={{ style={{
...leftPanelAntCardStyle, ...leftPanelAntCardStyle,
marginTop: '20px', marginTop: '20px',
@ -345,14 +345,14 @@ const Users = ({
<h6 className="tw-heading tw-mb-0">Teams</h6> <h6 className="tw-heading tw-mb-0">Teams</h6>
</div> </div>
}> }>
<div>{teamsElement}</div> <div className="tw-mb-4">{teamsElement}</div>
</Card> </Card>
); );
} else { } else {
return ( return (
<Card <Card
className="ant-card-feed tw-relative" className="ant-card-feed tw-relative"
key="inherited-roles-card" key="teams-card"
style={{ style={{
...leftPanelAntCardStyle, ...leftPanelAntCardStyle,
marginTop: '20px', marginTop: '20px',
@ -375,15 +375,14 @@ const Users = ({
)} )}
</div> </div>
}> }>
<Fragment> <div className="tw-mb-4">
<div>
{isTeamsEdit ? ( {isTeamsEdit ? (
<Fragment> <div className="tw-flex tw-justify-between tw-items-center tw-gap-2">
<Select <Select
isClearable isClearable
isMulti isMulti
aria-label="Select teams" aria-label="Select teams"
className="tw-ml-1" className="tw-w-full"
isSearchable={false} isSearchable={false}
options={teams?.map((team) => ({ options={teams?.map((team) => ({
label: getEntityName(team as unknown as EntityReference), label: getEntityName(team as unknown as EntityReference),
@ -394,9 +393,7 @@ const Users = ({
value={selectedTeams} value={selectedTeams}
onChange={handleOnTeamsChange} onChange={handleOnTeamsChange}
/> />
<div <div className="tw-flex tw-justify-end" data-testid="buttons">
className="tw-flex tw-justify-end tw-mt-2"
data-testid="buttons">
<Button <Button
className="tw-px-1 tw-py-1 tw-rounded tw-text-sm tw-mr-1" className="tw-px-1 tw-py-1 tw-rounded tw-text-sm tw-mr-1"
data-testid="cancel-teams" data-testid="cancel-teams"
@ -422,12 +419,11 @@ const Users = ({
/> />
</Button> </Button>
</div> </div>
</Fragment> </div>
) : ( ) : (
teamsElement teamsElement
)} )}
</div> </div>
</Fragment>
</Card> </Card>
); );
} }
@ -466,7 +462,7 @@ const Users = ({
return ( return (
<Card <Card
className="ant-card-feed tw-relative" className="ant-card-feed tw-relative"
key="inherited-roles-card" key="roles-card"
style={{ style={{
...leftPanelAntCardStyle, ...leftPanelAntCardStyle,
marginTop: '20px', marginTop: '20px',
@ -476,7 +472,7 @@ const Users = ({
<h6 className="tw-heading tw-mb-0">Roles</h6> <h6 className="tw-heading tw-mb-0">Roles</h6>
</div> </div>
}> }>
<div className="tw-flex tw-items-center tw-justify-between"> <div className="tw-flex tw-items-center tw-justify-between tw-mb-4">
{rolesElement} {rolesElement}
</div> </div>
</Card> </Card>
@ -485,7 +481,7 @@ const Users = ({
return ( return (
<Card <Card
className="ant-card-feed tw-relative" className="ant-card-feed tw-relative"
key="inherited-roles-card" key="roles-card"
style={{ style={{
...leftPanelAntCardStyle, ...leftPanelAntCardStyle,
marginTop: '20px', marginTop: '20px',
@ -508,15 +504,14 @@ const Users = ({
)} )}
</div> </div>
}> }>
<Fragment> <div className="tw-mb-4">
<div className="tw-flex tw-items-center tw-justify-between">
{isRolesEdit ? ( {isRolesEdit ? (
<Fragment> <div className="tw-flex tw-items-center tw-justify-between tw-gap-2">
<Select <Select
isClearable isClearable
isMulti isMulti
aria-label="Select roles" aria-label="Select roles"
className="tw-ml-1" className="tw-w-full"
id="select-role" id="select-role"
isSearchable={false} isSearchable={false}
options={userRolesOption} options={userRolesOption}
@ -525,9 +520,7 @@ const Users = ({
value={selectedRoles} value={selectedRoles}
onChange={handleOnRolesChange} onChange={handleOnRolesChange}
/> />
<div <div className="tw-flex tw-justify-end" data-testid="buttons">
className="tw-flex tw-justify-end tw-mt-2"
data-testid="buttons">
<Button <Button
className="tw-px-1 tw-py-1 tw-rounded tw-text-sm tw-mr-1" className="tw-px-1 tw-py-1 tw-rounded tw-text-sm tw-mr-1"
data-testid="cancel-roles" data-testid="cancel-roles"
@ -553,12 +546,11 @@ const Users = ({
/> />
</Button> </Button>
</div> </div>
</Fragment> </div>
) : ( ) : (
rolesElement rolesElement
)} )}
</div> </div>
</Fragment>
</Card> </Card>
); );
} }
@ -605,7 +597,7 @@ const Users = ({
<div className="user-profile-antd-card" data-testid="left-panel"> <div className="user-profile-antd-card" data-testid="left-panel">
<Card <Card
className="ant-card-feed tw-relative" className="ant-card-feed tw-relative"
key="inherited-roles-card" key="left-panel"
style={{ style={{
...leftPanelAntCardStyle, ...leftPanelAntCardStyle,
marginTop: '12px', marginTop: '12px',

13
openmetadata-ui/src/main/resources/ui/src/pages/BotsPage/BotsPage.component.tsx
View File

@ -13,7 +13,7 @@
import { AxiosError, AxiosResponse } from 'axios'; import { AxiosError, AxiosResponse } from 'axios';
import { compare } from 'fast-json-patch'; import { compare } from 'fast-json-patch';
import React, { Fragment, useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom'; import { useParams } from 'react-router-dom';
import { import {
getUserByName, getUserByName,
@ -21,6 +21,7 @@ import {
updateUserDetail, updateUserDetail,
} from '../../axiosAPIs/userAPI'; } from '../../axiosAPIs/userAPI';
import BotsDetail from '../../components/BotsDetail/BotsDetail.component'; import BotsDetail from '../../components/BotsDetail/BotsDetail.component';
import PageContainerV1 from '../../components/containers/PageContainerV1';
import Loader from '../../components/Loader/Loader'; import Loader from '../../components/Loader/Loader';
import { UserDetails } from '../../components/Users/Users.interface'; import { UserDetails } from '../../components/Users/Users.interface';
import { User } from '../../generated/entity/teams/user'; import { User } from '../../generated/entity/teams/user';
@ -114,13 +115,9 @@ const BotsPage = () => {
}, [botsName]); }, [botsName]);
return ( return (
<Fragment> <PageContainerV1 className="tw-py-4">
{isLoading ? ( {isLoading ? <Loader /> : getBotsDetailComponent()}
<Loader /> </PageContainerV1>
) : (
<div className="tw-self-center">{getBotsDetailComponent()}</div>
)}
</Fragment>
); );
}; };

12
openmetadata-ui/src/main/resources/ui/src/pages/teams/CheckboxUserCard.tsx
View File

@ -78,12 +78,11 @@ const CheckboxUserCard = ({
)} )}
</> </>
</div> </div>
{isActionVisible && ( {isActionVisible &&
<div className="tw-flex-none"> (isCheckBoxes ? (
{isCheckBoxes ? (
<input <input
checked={isChecked} checked={isChecked}
className="tw-p-1 custom-checkbox" className="tw-p-1 custom-checkbox tw-self-center"
data-testid="checkboxAddUser" data-testid="checkboxAddUser"
type="checkbox" type="checkbox"
onChange={(e) => { onChange={(e) => {
@ -93,6 +92,7 @@ const CheckboxUserCard = ({
/> />
) : ( ) : (
<span <span
className="tw-flex-none"
data-testid="remove" data-testid="remove"
onClick={() => onRemove?.(item.id as string)}> onClick={() => onRemove?.(item.id as string)}>
<SVGIcons <SVGIcons
@ -103,9 +103,7 @@ const CheckboxUserCard = ({
width="16px" width="16px"
/> />
</span> </span>
)} ))}
</div>
)}
</div> </div>
); );
}; };

15
openmetadata-ui/src/main/resources/ui/src/pages/teams/UserCard.tsx
View File

@ -186,7 +186,7 @@ const UserCard = ({
<Fragment> <Fragment>
<span <span
className={classNames( className={classNames(
'tw-font-normal tw-my-1', 'tw-font-normal',
isActionVisible ? 'tw-truncate tw-w-32' : null, isActionVisible ? 'tw-truncate tw-w-32' : null,
{ {
'tw-cursor-pointer hover:tw-underline': 'tw-cursor-pointer hover:tw-underline':
@ -202,7 +202,7 @@ const UserCard = ({
{item.name && item.name !== item.displayName && ( {item.name && item.name !== item.displayName && (
<span <span
className={classNames( className={classNames(
isActionVisible ? 'tw-truncate tw-w-32 tw-my-1' : null isActionVisible ? 'tw-truncate tw-w-32' : null
)} )}
title={isIconVisible ? item.name : capitalize(item.name)}> title={isIconVisible ? item.name : capitalize(item.name)}>
{isIconVisible ? item.name : capitalize(item.name)} {isIconVisible ? item.name : capitalize(item.name)}
@ -212,11 +212,10 @@ const UserCard = ({
)} )}
</div> </div>
</div> </div>
{isActionVisible && ( {isActionVisible &&
<div className="tw-flex-none"> (isCheckBoxes ? (
{isCheckBoxes ? (
<input <input
className="tw-p-1 custom-checkbox" className="tw-p-1 custom-checkbox tw-self-center"
data-testid="checkboxAddUser" data-testid="checkboxAddUser"
type="checkbox" type="checkbox"
onChange={() => { onChange={() => {
@ -224,6 +223,7 @@ const UserCard = ({
}} }}
/> />
) : ( ) : (
<div className="tw-flex-none">
<NonAdminAction <NonAdminAction
html={<>You do not have permission to update the team.</>} html={<>You do not have permission to update the team.</>}
isOwner={isOwner} isOwner={isOwner}
@ -245,9 +245,8 @@ const UserCard = ({
/> />
</span> </span>
</NonAdminAction> </NonAdminAction>
)}
</div> </div>
)} ))}
</div> </div>
); );
}; };