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

12
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(
'tw-bg-gray-100': visible, 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,
}
)}>
<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" />

49
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,23 +422,23 @@ const BotsDetail: FC<BotsDetailProp> = ({
}, [botsData]); }, [botsData]);
return ( return (
<PageContainerV1 className="tw-py-4"> <PageLayout
<TitleBreadcrumb classes="tw-h-full tw-px-4"
className="tw-px-6" header={
titleLinks={[ <TitleBreadcrumb
{ className="tw-px-6"
name: 'Bots', titleLinks={[
url: ROUTES.BOTS, {
}, name: 'Bots',
{ name: botsData.name || '', url: '', activeTitle: true }, url: ROUTES.BOTS,
]} },
/> { name: botsData.name || '', url: '', activeTitle: true },
<PageLayout ]}
classes="tw-h-full tw-px-4" />
leftPanel={fetchLeftPanel()} }
rightPanel={fetchRightPanel()}> leftPanel={fetchLeftPanel()}
{getCenterLayout()} rightPanel={fetchRightPanel()}>
</PageLayout> {getCenterLayout()}
{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 = {

224
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,59 +375,55 @@ const Users = ({
)} )}
</div> </div>
}> }>
<Fragment> <div className="tw-mb-4">
<div> {isTeamsEdit ? (
{isTeamsEdit ? ( <div className="tw-flex tw-justify-between tw-items-center tw-gap-2">
<Fragment> <Select
<Select isClearable
isClearable isMulti
isMulti aria-label="Select teams"
aria-label="Select teams" className="tw-w-full"
className="tw-ml-1" 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), value: team.id,
value: team.id, }))}
}))} placeholder="Teams..."
placeholder="Teams..." styles={reactSingleSelectCustomStyle}
styles={reactSingleSelectCustomStyle} value={selectedTeams}
value={selectedTeams} onChange={handleOnTeamsChange}
onChange={handleOnTeamsChange} />
/> <div className="tw-flex tw-justify-end" data-testid="buttons">
<div <Button
className="tw-flex tw-justify-end tw-mt-2" className="tw-px-1 tw-py-1 tw-rounded tw-text-sm tw-mr-1"
data-testid="buttons"> data-testid="cancel-teams"
<Button size="custom"
className="tw-px-1 tw-py-1 tw-rounded tw-text-sm tw-mr-1" theme="primary"
data-testid="cancel-teams" variant="contained"
size="custom" onMouseDown={() => setIsTeamsEdit(false)}>
theme="primary" <FontAwesomeIcon
variant="contained" className="tw-w-3.5 tw-h-3.5"
onMouseDown={() => setIsTeamsEdit(false)}> icon="times"
<FontAwesomeIcon />
className="tw-w-3.5 tw-h-3.5" </Button>
icon="times" <Button
/> className="tw-px-1 tw-py-1 tw-rounded tw-text-sm"
</Button> data-testid="save-teams"
<Button size="custom"
className="tw-px-1 tw-py-1 tw-rounded tw-text-sm" theme="primary"
data-testid="save-teams" variant="contained"
size="custom" onClick={handleTeamsChange}>
theme="primary" <FontAwesomeIcon
variant="contained" className="tw-w-3.5 tw-h-3.5"
onClick={handleTeamsChange}> icon="check"
<FontAwesomeIcon />
className="tw-w-3.5 tw-h-3.5" </Button>
icon="check" </div>
/> </div>
</Button> ) : (
</div> teamsElement
</Fragment> )}
) : ( </div>
teamsElement
)}
</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,57 +504,53 @@ const Users = ({
)} )}
</div> </div>
}> }>
<Fragment> <div className="tw-mb-4">
<div className="tw-flex tw-items-center tw-justify-between"> {isRolesEdit ? (
{isRolesEdit ? ( <div className="tw-flex tw-items-center tw-justify-between tw-gap-2">
<Fragment> <Select
<Select isClearable
isClearable isMulti
isMulti aria-label="Select roles"
aria-label="Select roles" className="tw-w-full"
className="tw-ml-1" id="select-role"
id="select-role" isSearchable={false}
isSearchable={false} options={userRolesOption}
options={userRolesOption} placeholder="Roles..."
placeholder="Roles..." styles={reactSingleSelectCustomStyle}
styles={reactSingleSelectCustomStyle} value={selectedRoles}
value={selectedRoles} onChange={handleOnRolesChange}
onChange={handleOnRolesChange} />
/> <div className="tw-flex tw-justify-end" data-testid="buttons">
<div <Button
className="tw-flex tw-justify-end tw-mt-2" className="tw-px-1 tw-py-1 tw-rounded tw-text-sm tw-mr-1"
data-testid="buttons"> data-testid="cancel-roles"
<Button size="custom"
className="tw-px-1 tw-py-1 tw-rounded tw-text-sm tw-mr-1" theme="primary"
data-testid="cancel-roles" variant="contained"
size="custom" onMouseDown={() => setIsRolesEdit(false)}>
theme="primary" <FontAwesomeIcon
variant="contained" className="tw-w-3.5 tw-h-3.5"
onMouseDown={() => setIsRolesEdit(false)}> icon="times"
<FontAwesomeIcon />
className="tw-w-3.5 tw-h-3.5" </Button>
icon="times" <Button
/> className="tw-px-1 tw-py-1 tw-rounded tw-text-sm"
</Button> data-testid="save-roles"
<Button size="custom"
className="tw-px-1 tw-py-1 tw-rounded tw-text-sm" theme="primary"
data-testid="save-roles" variant="contained"
size="custom" onClick={handleRolesChange}>
theme="primary" <FontAwesomeIcon
variant="contained" className="tw-w-3.5 tw-h-3.5"
onClick={handleRolesChange}> icon="check"
<FontAwesomeIcon />
className="tw-w-3.5 tw-h-3.5" </Button>
icon="check" </div>
/> </div>
</Button> ) : (
</div> rolesElement
</Fragment> )}
) : ( </div>
rolesElement
)}
</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>
); );
}; };

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

@ -78,34 +78,32 @@ 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 tw-self-center"
className="tw-p-1 custom-checkbox" data-testid="checkboxAddUser"
data-testid="checkboxAddUser" type="checkbox"
type="checkbox" onChange={(e) => {
onChange={(e) => { setIsChecked(e.target.checked);
setIsChecked(e.target.checked); onSelect?.(item.id as string, e.target.checked);
onSelect?.(item.id as string, e.target.checked); }}
}} />
) : (
<span
className="tw-flex-none"
data-testid="remove"
onClick={() => onRemove?.(item.id as string)}>
<SVGIcons
alt="delete"
className="tw-text-gray-500 tw-cursor-pointer tw-opacity-0 hover:tw-text-gray-700 group-hover:tw-opacity-100"
icon="icon-delete"
title="Remove"
width="16px"
/> />
) : ( </span>
<span ))}
data-testid="remove"
onClick={() => onRemove?.(item.id as string)}>
<SVGIcons
alt="delete"
className="tw-text-gray-500 tw-cursor-pointer tw-opacity-0 hover:tw-text-gray-700 group-hover:tw-opacity-100"
icon="icon-delete"
title="Remove"
width="16px"
/>
</span>
)}
</div>
)}
</div> </div>
); );
}; };

33
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,18 +212,18 @@ const UserCard = ({
)} )}
</div> </div>
</div> </div>
{isActionVisible && ( {isActionVisible &&
<div className="tw-flex-none"> (isCheckBoxes ? (
{isCheckBoxes ? ( <input
<input className="tw-p-1 custom-checkbox tw-self-center"
className="tw-p-1 custom-checkbox" data-testid="checkboxAddUser"
data-testid="checkboxAddUser" type="checkbox"
type="checkbox" onChange={() => {
onChange={() => { onSelect?.(item.id as string);
onSelect?.(item.id as string); }}
}} />
/> ) : (
) : ( <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>
); );
}; };