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

UI : Remove tailwind css dependency from Roles and Basic signup form (#9517)

Browse Source 
* Remove tailwind css dependicy from Roles and Basic signup form

* change flex class to d-flex
This commit is contained in:
Ashish Gupta 2022-12-28 19:13:05 +05:30 committed by GitHub
parent c08e805090
commit 4b43a56c43
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
29 changed files with 148 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
openmetadata-ui/src/main/resources/ui/src/components/BotDetails/BotDetails.component.tsx
View File

@ -202,7 +202,7 @@ const BotDetails: FC<BotsDetailProps> = ({
<Col span={24}>
<Card className="page-layout-v1-left-panel mt-2">
<div data-testid="left-panel">
<div className="flex flex-col">
<div className="d-flex flex-col">
<SVGIcons
alt="bot-profile"
icon={Icons.BOT_PROFILE}
@ -286,7 +286,7 @@ const BotDetails: FC<BotsDetailProps> = ({
rightPanel={
<Card className="page-layout-v1-left-panel mt-2">
<div data-testid="right-panel">
<div className="flex flex-col">
<div className="d-flex flex-col">
<Typography.Text className="mb-2 text-lg">
{t('label.token-security')}
</Typography.Text>

2
openmetadata-ui/src/main/resources/ui/src/components/BotDetails/DisplayNameComponent/DisplayNameComponent.component.tsx
View File

@ -31,7 +31,7 @@ const DisplayNameComponent = ({
const { t } = useTranslation();
return (
<div className="mt-4 w-full flex">
<div className="mt-4 w-full d-flex">
{isDisplayNameEdit ? (
<div className="flex items-center gap-2">
<Input

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

@ -307,7 +307,7 @@ const Ingestion: React.FC<IngestionProps> = ({
return (
<Fragment>
<Button
className={classNames('h-8 rounded-4 m-b-xs flex items-center')}
className={classNames('h-8 rounded-4 m-b-xs d-flex items-center')}
data-testid="add-new-ingestion-button"
disabled={!permissions.Create}
size="small"

4
openmetadata-ui/src/main/resources/ui/src/components/MlModelDetail/MlModelDetail.component.tsx
View File

@ -433,7 +433,7 @@ const MlModelDetail: FC<MlModelDetailProp> = ({
const getMlHyperParameters = () => {
return (
<div className="flex flex-col m-t-xs">
<div className="d-flex flex-col m-t-xs">
<h6 className="font-medium text-base">
{t('label.hyper-parameters')}{' '}
</h6>
@ -458,7 +458,7 @@ const MlModelDetail: FC<MlModelDetailProp> = ({
const getMlModelStore = () => {
return (
<div className="flex flex-col m-t-xs">
<div className="d-flex flex-col m-t-xs">
<h6 className="font-medium text-base">{t('label.model-store')}</h6>
{mlModelDetail.mlStore ? (
<div className="m-t-xs tw-table-container">

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

@ -41,7 +41,7 @@ const DeployIngestionLoaderModal = ({
data-testid="deploy-modal"
footer={null}
visible={visible}>
<div className="p-y-lg flex flex-col" data-testid="body-text">
<div className="p-y-lg d-flex flex-col" data-testid="body-text">
<div className={classNames('ingestion-content relative', className)}>
<Fragment>
<Typography.Text

2
openmetadata-ui/src/main/resources/ui/src/components/Modals/WhatsNewModal/index.tsx
View File

@ -86,7 +86,7 @@ export const WhatsNewModal: FunctionComponent<WhatsNewModalProps> = ({
<div
className="border-r-2 p-x-md p-y-md border-separate"
style={{ width: '14%' }}>
<div className="flex flex-col-reverse">
<div className="d-flex flex-col-reverse">
{WHATS_NEW.map((d) => (
<div className="flex items-center justify-end mb-2.5" key={d.id}>
<VersionIndicatorIcon

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

@ -104,7 +104,7 @@ const Emoji: FC<EmojiProps> = ({
zIndex={9999}
onVisibleChange={setVisible}>
<Button
className={classNames('ant-btn-reaction tw-mr-1 flex', {
className={classNames('ant-btn-reaction tw-mr-1 d-flex', {
'ant-btn-isReacted': isReacted,
})}
data-testid="emoji-button"

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

@ -429,7 +429,7 @@ const TableProfilerV1: FC<TableProfilerProps> = ({ permissions }) => {
: t('message.no-permission-for-action')
}>
<Button
className="rounded-4 tw-w-8 flex justify-center manage-dropdown-button"
className="rounded-4 tw-w-8 d-flex justify-center manage-dropdown-button"
data-testid="profiler-setting-btn"
disabled={!editTest}
type="primary"

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

@ -781,7 +781,7 @@ const Users = ({
const getFeedTabData = () => {
return (
<Fragment>
<div className="px-1.5 flex justify-between">
<div className="px-1.5 d-flex justify-between">
<div className="tw-relative">
<AntDButton
className="flex items-center p-0"

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

@ -90,7 +90,7 @@ const VersionTable = ({ columnName, columns, joins }: VersionTableProps) => {
accessor: 'tags',
width: 272,
render: (tags: Column['tags']) => (
<div className="flex flex-wrap">
<div className="d-flex flex-wrap">
<TagsViewer sizeCap={-1} tags={tags || []} />
</div>
),

6
openmetadata-ui/src/main/resources/ui/src/components/common/FilterPattern/FilterPattern.tsx
View File

@ -60,7 +60,7 @@ const FilterPattern = ({
onChange={(e) => handleChecked(e.target.checked)}
/>
</Col>
<Col className="flex flex-col">
<Col className="d-flex flex-col">
<label htmlFor={`${type}FilterPatternCheckbox`}>{`${capitalize(
type
)} Filter Pattern`}</label>
@ -87,7 +87,7 @@ const FilterPattern = ({
{checked && (
<div data-testid="field-container">
<Field>
<label className="flex flex-col">{t('label.include')}:</label>
<label className="d-flex flex-col">{t('label.include')}:</label>
<Typography.Text
className="text-grey-muted m-t-xss m-b-xss"
data-testid="filter-pattern-include-info">
@ -106,7 +106,7 @@ const FilterPattern = ({
/>
</Field>
<Field>
<label className="flex flex-col">{t('label.exclude')}:</label>
<label className="d-flex flex-col">{t('label.exclude')}:</label>
<Typography.Text
className="text-grey-muted m-t-xss m-b-xss"
data-testid="filter-pattern-exclude-info">

4
openmetadata-ui/src/main/resources/ui/src/components/common/InheritedRolesCard/InheritedRolesCard.component.tsx
View File

@ -42,9 +42,9 @@ const InheritedRolesCard = ({ userData }: InheritedRolesCardProps) => {
</span>
</div>
) : (
<div className="flex justify-between flex-col">
<div className="d-flex justify-between flex-col">
{userData.inheritedRoles?.map((inheritedRole, i) => (
<div className="mb-2 flex items-center gap-2" key={i}>
<div className="mb-2 d-flex items-center gap-2" key={i}>
<SVGIcons alt="icon" className="w-4" icon={Icons.USERS} />
<Typography.Text

2
openmetadata-ui/src/main/resources/ui/src/components/common/PopOverCard/EntityPopOverCard.tsx
View File

@ -218,7 +218,7 @@ const EntityPopOverCard: FC<Props> = ({ children, entityType, entityFQN }) => {
{entityTags.length ? (
<>
<Divider className="m-b-xs m-t-sm" />
<div className="flex flex-start">
<div className="d-flex flex-start">
<span className="w-5 m-r-xs">
<SVGIcons alt="icon-tag" icon="icon-tag-grey" width="14" />
</span>

4
openmetadata-ui/src/main/resources/ui/src/components/common/RolesElement/RolesElement.component.tsx
View File

@ -27,13 +27,13 @@ const RolesElement = ({ userData }: RolesElementProps) => {
return (
<Fragment>
{userData.isAdmin && (
<div className="mb-2 flex items-center gap-2">
<div className="mb-2 d-flex items-center gap-2">
<SVGIcons alt="icon" className="w-4" icon={Icons.USERS} />
<span>{TERM_ADMIN}</span>
</div>
)}
{userData?.roles?.map((role, i) => (
<div className="mb-2 flex items-center gap-2" key={i}>
<div className="mb-2 d-flex items-center gap-2" key={i}>
<SVGIcons alt="icon" className="w-4" icon={Icons.USERS} />
<Typography.Text
className="ant-typography-ellipsis-custom w-48"

2
openmetadata-ui/src/main/resources/ui/src/components/common/facetfilter/FacetFilter.tsx
View File

@ -143,7 +143,7 @@ const FacetFilter: React.FC<FacetFilterProps> = ({
{ length: aggregationsLength }
) => (
<div data-testid={`filter-heading-${aggregationKey}`} key={index}>
<div className="flex justify-between flex-col">
<div className="d-flex justify-between flex-col">
<h6 className="font-medium text-grey-body m-b-sm m-y-xs">
{translateAggregationKeyToTitle(aggregationKey)}
</h6>

6
openmetadata-ui/src/main/resources/ui/src/components/dropdown/DropDownList.tsx
View File

@ -137,7 +137,7 @@ const DropDownList: FunctionComponent<DropDownListProp> = ({
<div
aria-disabled={item.disabled as boolean}
className={classNames(
'text-body flex px-4 py-2 text-sm hover:tw-bg-body-hover',
'text-body d-flex px-4 py-2 text-sm hover:tw-bg-body-hover',
!isNil(value) && item.value === value ? 'tw-bg-primary-lite' : null,
{
'opacity-60 cursor-not-allowed': item.disabled,
@ -152,7 +152,7 @@ const DropDownList: FunctionComponent<DropDownListProp> = ({
!item.disabled && item.value !== value && onSelect?.(e, item.value)
}>
{item.type === 'user' ? (
<div className="w-full flex justify-between items-center">
<div className="w-full d-flex justify-between items-center">
<UserTag id={item.value as string} name={item.name as string} />
{removeOwnerButton(item)}
@ -162,7 +162,7 @@ const DropDownList: FunctionComponent<DropDownListProp> = ({
{item.icon}
<div
className={classNames(
'tw-truncate flex items-center justify-between',
'tw-truncate d-flex items-center justify-between',
widthClass
)}
title={item.name as string}>

12
openmetadata-ui/src/main/resources/ui/src/pages/RolesPage/AddRolePage/AddRolePage.tsx
View File

@ -108,15 +108,13 @@ const AddRolePage = () => {
return (
<Row
className="tw-bg-body-main tw-h-full"
className="bg-body-main h-full"
data-testid="add-role-container"
gutter={[16, 16]}>
<Col offset={4} span={12}>
<TitleBreadcrumb className="m-y-md" titleLinks={breadcrumb} />
<Card>
<Typography.Paragraph
className="tw-text-base"
data-testid="form-title">
<Typography.Paragraph className="text-base" data-testid="form-title">
{t('label.add-new-role')}
</Typography.Paragraph>
<Form
@ -177,7 +175,7 @@ const AddRolePage = () => {
</Select>
</Form.Item>
<Space align="center" className="tw-w-full tw-justify-end">
<Space align="center" className="w-full justify-end">
<Button
data-testid="cancel-btn"
type="link"
@ -195,8 +193,8 @@ const AddRolePage = () => {
</Form>
</Card>
</Col>
<Col className="tw-mt-4" span={4}>
<Typography.Paragraph className="tw-text-base tw-font-medium">
<Col className="m-t-md" span={4}>
<Typography.Paragraph className="text-base font-medium">
{t('label.add-role')}
</Typography.Paragraph>
<Typography.Text>{t('message.add-role-message')}</Typography.Text>

7
openmetadata-ui/src/main/resources/ui/src/pages/RolesPage/RolesDetailPage/RolesDetail.less
View File

@ -24,3 +24,10 @@
}
}
}
.link-hover {
&:hover {
text-decoration: underline;
cursor: pointer;
}
}

2
openmetadata-ui/src/main/resources/ui/src/pages/RolesPage/RolesDetailPage/RolesDetailPage.tsx
View File

@ -288,7 +288,7 @@ const RolesDetailPage = () => {
<Tabs data-testid="tabs" defaultActiveKey="policies">
<TabPane key="policies" tab={t('label.policies')}>
<Space className="tw-w-full" direction="vertical">
<Space className="w-full" direction="vertical">
<Tooltip
title={
rolePermission.EditAll

5
openmetadata-ui/src/main/resources/ui/src/pages/RolesPage/RolesDetailPage/RolesDetailPageList.component.tsx
View File

@ -66,10 +66,7 @@ const RolesDetailPageList = ({
}
return (
<Link
className="hover:tw-underline tw-cursor-pointer"
data-testid="entity-name"
to={link}>
<Link className="link-hover" data-testid="entity-name" to={link}>
{getEntityName(record)}
</Link>
);

8
openmetadata-ui/src/main/resources/ui/src/pages/RolesPage/RolesListPage/RolesList.tsx
View File

@ -73,7 +73,7 @@ const RolesList: FC<RolesListProps> = ({ roles, fetchRoles }) => {
key: 'name',
render: (_, record) => (
<Link
className="hover:tw-underline tw-cursor-pointer"
className="link-hover"
data-testid="role-name"
to={getRoleWithFqnPath(record.fullyQualifiedName || '')}>
{getEntityName(record)}
@ -114,7 +114,7 @@ const RolesList: FC<RolesListProps> = ({ roles, fetchRoles }) => {
)}
{hasMore && (
<Popover
className="tw-cursor-pointer"
className="cursor-pointer"
content={
<Space wrap size={4}>
{record.policies.slice(LIST_CAP).map((policy) =>
@ -136,9 +136,9 @@ const RolesList: FC<RolesListProps> = ({ roles, fetchRoles }) => {
)}
</Space>
}
overlayClassName="tw-w-40 tw-text-center"
overlayClassName="w-40 text-center"
trigger="click">
<Tag className="tw-ml-1" data-testid="plus-more-count">{`+${
<Tag className="m-l-xss" data-testid="plus-more-count">{`+${
listLength - LIST_CAP
} more`}</Tag>
</Popover>

6
openmetadata-ui/src/main/resources/ui/src/pages/login/index.tsx
View File

@ -181,7 +181,7 @@ const SigninPage = () => {
const onClickForgotPassword = () => history.push(ROUTES.FORGOT_PASSWORD);
return (
<div className="flex flex-col h-full">
<div className="d-flex flex-col h-full">
<Row className="flex bg-body-main flex-grow" data-testid="signin-page">
<Col span={10}>
<div
@ -240,7 +240,7 @@ const SigninPage = () => {
</Form>
{loginError && (
<div
className="flex flex-col m-y-md"
className="d-flex flex-col m-y-md"
data-testid="login-error-container">
<div className="flex border-1 border-main rounded-4 p-sm error-alert ">
<div className="m-r-xs">
@ -271,7 +271,7 @@ const SigninPage = () => {
</Typography.Text>
</Divider>
<div className="mt-4 flex flex-center">
<div className="mt-4 d-flex flex-center">
<Typography.Text className="mr-4">
{t('label.new-to-the-platform')}
</Typography.Text>

8
openmetadata-ui/src/main/resources/ui/src/pages/service/index.tsx
View File

@ -933,9 +933,7 @@ const ServicePage: FunctionComponent = () => {
!isUndefined(description) && description.trim() ? (
<RichTextEditorPreviewer markdown={description} />
) : (
<span className="tw-no-description">
{t('label.no-description')}
</span>
<span className="text-grey-muted">{t('label.no-description')}</span>
),
},
{
@ -1004,7 +1002,7 @@ const ServicePage: FunctionComponent = () => {
variant="outlined"
onClick={handleDelete}>
<IcDeleteColored
className="tw-mr-1.5"
className="m-r-xs"
height={14}
viewBox="0 0 24 24"
width={14}
@ -1083,7 +1081,7 @@ const ServicePage: FunctionComponent = () => {
<Col span={24}>
<TabsPane
activeTab={activeTab}
className="tw-flex-initial"
className="flex-initial"
setActiveTab={activeTabHandler}
tabs={tabs}
/>

24
openmetadata-ui/src/main/resources/ui/src/pages/signup/basic-signup.component.tsx
View File

@ -69,14 +69,12 @@ const BasicSignUp = () => {
};
return (
<div className="tw-flex tw-flex-col tw-h-full">
<div
className="tw-flex tw-bg-body-main tw-flex-grow"
data-testid="signin-page">
<div className="tw-w-5/12">
<div className="mt-4 tw-text-center flex-center flex-col">
<div className="d-flex flex-col h-full">
<div className="d-flex bg-body-main flex-grow" data-testid="signin-page">
<div className="w-5/12">
<div className="mt-4 text-center flex-center flex-col">
<SVGIcons alt="OpenMetadata Logo" icon={Icons.LOGO} width="152" />
<Typography.Text className="mt-8 w-80 tw-text-xl font-medium tw-text-grey-muted">
<Typography.Text className="mt-8 w-80 text-xl font-medium text-grey-muted">
Centralized Metadata Store, Discover, Collaborate and get your
Data Right
</Typography.Text>
@ -160,7 +158,7 @@ const BasicSignUp = () => {
<Typography.Text type="secondary">or</Typography.Text>
</Divider>
<div className="mt-4 flex flex-center">
<div className="mt-4 d-flex flex-center">
<Typography.Text className="mr-4">
Already a user?
</Typography.Text>
@ -180,17 +178,17 @@ const BasicSignUp = () => {
) : null}
</div>
</div>
<div className="tw-w-7/12 tw-relative">
<div className="tw-absolute tw-inset-0">
<div className="w-7/12 relative">
<div className="absolute inset-0">
<img
alt="bg-image"
className="tw-w-full tw-h-full"
className="w-full h-full"
data-testid="bg-image"
src={loginBG}
/>
</div>
<div className="tw-relative">
<div className="tw-flex tw-justify-center tw-mt-44 tw-mb-10">
<div className="relative">
<div className="d-flex justify-center mt-44 mb-10">
<LoginCarousel />
</div>
</div>

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

@ -570,7 +570,7 @@ const TagsPage = () => {
key: 'description',
render: (text: string, record: Tag) => (
<div className="tw-group tableBody-cell">
<div className="cursor-pointer flex">
<div className="cursor-pointer d-flex">
<div>
{text ? (
<RichTextEditorPreviewer markdown={text} />

44
openmetadata-ui/src/main/resources/ui/src/styles/app.less
View File

@ -18,7 +18,6 @@
@primary-hover-light: rgba(219, 209, 249);
@white: #fff;
@gray: #dde3ea;
@grey-body: rgb(55, 53, 47);
@trigger-btn-hover-bg: #efefef;
//font weight
@ -69,6 +68,9 @@
.text-grey-muted {
color: #6b7280;
}
.text-grey-body {
color: @text-color-secondary;
}
.text-body {
color: @text-color-secondary;
}
@ -129,46 +131,6 @@
border-radius: 6px;
}
// flex
.flex {
display: flex;
}
.item-start {
align-items: flex-start;
}
.items-center {
align-items: center;
}
.justify-end {
justify-content: flex-end;
}
.justify-between {
justify-content: space-between;
}
.justify-center {
justify-content: center;
}
.self-center {
align-self: center;
}
.flex-col {
flex-direction: column;
}
.flex-initial {
flex: 0 1 auto;
}
.flex-center {
display: flex;
align-items: center;
justify-content: center;
}
.flex-wrap {
flex-wrap: wrap;
}
.flex-grow {
flex-grow: 1;
}
.break-word {
word-break: break-word;
}

12
openmetadata-ui/src/main/resources/ui/src/styles/components/size.less
View File

@ -80,6 +80,12 @@
.w-3\/5 {
width: 60%;
}
.w-5\/12 {
width: 41.666667%;
}
.w-7\/12 {
width: 58.333333%;
}
.w-9\/10 {
width: 90%;
}
@ -103,6 +109,9 @@
}
//Height
.h-3 {
height: 12px;
}
.h-4 {
height: 16px;
}
@ -118,6 +127,9 @@
.h-9 {
height: 36px;
}
.h-10 {
height: 2.5rem /* 40px */;
}
.h-100 {
height: 400px;
}

51
openmetadata-ui/src/main/resources/ui/src/styles/position.less
View File

@ -23,15 +23,21 @@
.align-start {
align-items: start;
}
.items-center {
align-items: center;
}
.item-start {
align-items: flex-start;
}
// Display
.d-flex {
display: flex;
}
//flex class will be removed once all the element using this class change to d-flex
.flex {
display: flex;
}
.d-inline-flex {
display: inline-flex;
}
@ -79,8 +85,8 @@
bottom: 100%;
}
.flex-shrink {
flex-shrink: 0;
.gap-1 {
gap: 16px;
}
.align-middle {
@ -92,13 +98,42 @@
.flex-none {
flex: none;
}
.justify-center {
justify-content: center;
}
.flex-col-reverse {
flex-direction: column-reverse;
}
.gap-1 {
gap: 16px;
// Justify Items
.justify-center {
justify-content: center;
}
.justify-self-end {
justify-self: end;
}
.justify-end {
justify-content: flex-end;
}
.justify-between {
justify-content: space-between;
}
// Flex Direction
.flex-col {
flex-direction: column;
}
.flex-initial {
flex: 0 1 auto;
}
.flex-center {
display: flex;
align-items: center;
justify-content: center;
}
.flex-wrap {
flex-wrap: wrap;
}
.flex-grow {
flex-grow: 1;
}
.flex-shrink {
flex-shrink: 0;
}

33
openmetadata-ui/src/main/resources/ui/src/styles/spacing.less
View File

@ -74,6 +74,12 @@
margin-top: @margin-lg;
margin-bottom: @margin-lg;
}
.m-y-xlg {
margin-top: @margin-xlg;
margin-bottom: @margin-lg;
}
.m--r-7 {
margin-right: -28px;
}
@ -220,6 +226,9 @@
.mr-8 {
margin-right: 2rem;
}
.mb-0 {
margin-bottom: 0;
}
.mb-2 {
margin-bottom: 0.5rem;
}
@ -229,6 +238,9 @@
.mb-5 {
margin-bottom: 1.25rem /* 20px */;
}
.mb-7 {
margin-bottom: 28px;
}
.mb-8 {
margin-bottom: 2rem;
}
@ -241,15 +253,15 @@
.m-16 {
margin: 4rem;
}
.mb-0 {
margin-bottom: 0;
}
.mt-2\.5 {
margin-top: 2.5rem;
}
.mt-12 {
margin-top: 3rem;
}
.mb-10 {
margin-bottom: 2.5rem;
}
.mb-12 {
margin-bottom: 3rem;
}
@ -274,6 +286,11 @@
margin-bottom: 1rem;
}
.my-7 {
margin-top: 1.75rem /* 28px */;
margin-bottom: 1.75rem /* 28px */;
}
// padding
.p-16 {
padding: 4rem;
@ -446,10 +463,20 @@
.w-80 {
width: 80%;
}
.px-8 {
padding-left: 2rem /* 32px */;
padding-right: 2rem /* 32px */;
}
.px-10 {
padding-left: 2.5rem; /* 40px */
padding-right: 2.5rem;
}
.p-y-36 {
padding-top: 9rem /* 144px */;
padding-bottom: 9rem /* 144px */;
}
.mr-1 {
margin-right: 0.25rem;
}