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

MINOR : fix side spacing in setting and other pages (#14957)

Browse Source 
* fix side spacing in setting and other pages

* minor fix
This commit is contained in:
Ashish Gupta 2024-01-30 21:05:09 +05:30 committed by GitHub
parent e2db70c389
commit 7849313f84
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
23 changed files with 140 additions and 141 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

212
openmetadata-ui/src/main/resources/ui/src/components/Applications/AppDetails/AppDetails.component.tsx
View File

@ -317,7 +317,7 @@ const AppDetails = () => {
), ),
key: ApplicationTabs.CONFIGURATION, key: ApplicationTabs.CONFIGURATION,
children: ( children: (
<div> <div className="p-lg">
<FormBuilder <FormBuilder
useSelectWidget useSelectWidget
cancelText={t('label.back')} cancelText={t('label.back')}
@ -342,7 +342,7 @@ const AppDetails = () => {
), ),
key: ApplicationTabs.SCHEDULE, key: ApplicationTabs.SCHEDULE,
children: ( children: (
<div className="p-y-md"> <div className="p-lg">
{appData && ( {appData && (
<AppSchedule <AppSchedule
appData={appData} appData={appData}
@ -367,7 +367,7 @@ const AppDetails = () => {
), ),
key: ApplicationTabs.HISTORY, key: ApplicationTabs.HISTORY,
children: ( children: (
<div className="p-y-md"> <div className="p-lg">
<AppRunsHistory appData={appData} /> <AppRunsHistory appData={appData} />
</div> </div>
), ),
@ -400,117 +400,115 @@ const AppDetails = () => {
return ( return (
<PageLayoutV1 <PageLayoutV1
className="app-details-page-layout p-0" className="app-details-page-layout"
pageTitle={t('label.application-plural')}> pageTitle={t('label.application-plural')}>
<div className="page-container"> <Row className="page-container">
<Row> <Col className="d-flex" flex="auto">
<Col className="d-flex" flex="auto"> <Button
<Button className="p-0"
className="p-0" icon={<LeftOutlined />}
icon={<LeftOutlined />} size="small"
size="small" type="text"
type="text" onClick={onBrowseAppsClick}>
onClick={onBrowseAppsClick}> <Typography.Text className="font-medium">
<Typography.Text className="font-medium"> {t('label.browse-app-plural')}
{t('label.browse-app-plural')} </Typography.Text>
</Typography.Text> </Button>
</Button> </Col>
</Col> <Col flex="360px">
<Col flex="360px"> <div className="d-flex gap-2 justify-end">
<div className="d-flex gap-2 justify-end"> <Dropdown
<Dropdown align={{ targetOffset: [-12, 0] }}
align={{ targetOffset: [-12, 0] }} className="m-l-xs"
className="m-l-xs" menu={{
menu={{ items: manageButtonContent,
items: manageButtonContent, }}
}} open={showActions}
open={showActions} overlayClassName="glossary-manage-dropdown-list-container"
overlayClassName="glossary-manage-dropdown-list-container" overlayStyle={{ width: '350px' }}
overlayStyle={{ width: '350px' }} placement="bottomRight"
placement="bottomRight" trigger={['click']}
trigger={['click']} onOpenChange={setShowActions}>
onOpenChange={setShowActions}> <Tooltip placement="right">
<Tooltip placement="right"> <Button
<Button className="glossary-manage-dropdown-button p-x-xs"
className="glossary-manage-dropdown-button p-x-xs" data-testid="manage-button"
data-testid="manage-button" icon={
icon={ <IconDropdown className="vertical-align-inherit manage-dropdown-icon" />
<IconDropdown className="vertical-align-inherit manage-dropdown-icon" /> }
} onClick={() => setShowActions(true)}
onClick={() => setShowActions(true)} />
/> </Tooltip>
</Tooltip> </Dropdown>
</Dropdown> </div>
</div> </Col>
</Col> </Row>
</Row> <Row>
<Row> <Col className="page-container" span={24}>
<Col span={24}> <Space className="app-details-header w-full m-t-md" size={24}>
<Space className="app-details-header w-full m-t-md" size={24}> <AppLogo appName={appData?.fullyQualifiedName ?? ''} />
<AppLogo appName={appData?.fullyQualifiedName ?? ''} />
<div className="w-full"> <div className="w-full">
<Typography.Title level={4}> <Typography.Title level={4}>
{getEntityName(appData)} {getEntityName(appData)}
</Typography.Title> </Typography.Title>
<div className="d-flex items-center flex-wrap gap-6"> <div className="d-flex items-center flex-wrap gap-6">
<Space size={8}> <Space size={8}>
<ClockCircleOutlined /> <ClockCircleOutlined />
<Typography.Text className="text-xs text-grey-muted"> <Typography.Text className="text-xs text-grey-muted">
{`${t('label.installed')} ${getRelativeTime( {`${t('label.installed')} ${getRelativeTime(
appData?.updatedAt appData?.updatedAt
)}`} )}`}
</Typography.Text> </Typography.Text>
</Space> </Space>
<Space size={8}> <Space size={8}>
<UserOutlined /> <UserOutlined />
<Typography.Text className="text-xs text-grey-muted"> <Typography.Text className="text-xs text-grey-muted">
{t('label.developed-by-developer', { {t('label.developed-by-developer', {
developer: appData?.developer, developer: appData?.developer,
})} })}
</Typography.Text> </Typography.Text>
</Space> </Space>
{appData?.developerUrl && ( {appData?.developerUrl && (
<div className="flex-center gap-2"> <div className="flex-center gap-2">
<IconExternalLink width={12} /> <IconExternalLink width={12} />
<Typography.Link <Typography.Link
className="text-xs" className="text-xs"
href={appData?.developerUrl} href={appData?.developerUrl}
target="_blank"> target="_blank">
<Space>{t('label.visit-developer-website')}</Space> <Space>{t('label.visit-developer-website')}</Space>
</Typography.Link> </Typography.Link>
</div> </div>
)} )}
</div>
</div> </div>
</Space> </div>
</Col> </Space>
<Col span={24}> </Col>
<Tabs <Col className="p-0" span={24}>
destroyInactiveTabPane <Tabs
className="app-details-page-tabs" destroyInactiveTabPane
data-testid="tabs" className="app-details-page-tabs entity-details-page-tabs"
items={tabs} data-testid="tabs"
/> items={tabs}
</Col> />
</Row> </Col>
</Row>
<ConfirmationModal <ConfirmationModal
bodyText={t('message.are-you-sure-action-property', { bodyText={t('message.are-you-sure-action-property', {
action: actionText, action: actionText,
propertyName: getEntityName(appData), propertyName: getEntityName(appData),
})} })}
cancelText={t('label.cancel')} cancelText={t('label.cancel')}
confirmText={t('label.ok')} confirmText={t('label.ok')}
header={t('message.are-you-sure')} header={t('message.are-you-sure')}
visible={showDeleteModel} visible={showDeleteModel}
onCancel={() => setShowDeleteModel(false)} onCancel={() => setShowDeleteModel(false)}
onConfirm={onConfirmAction} onConfirm={onConfirmAction}
/> />
</div>
</PageLayoutV1> </PageLayoutV1>
); );
}; };

3
openmetadata-ui/src/main/resources/ui/src/components/Applications/AppDetails/app-details.less
View File

@ -35,9 +35,6 @@
} }
.app-details-page-layout { .app-details-page-layout {
.page-layout-v1-center {
padding: 0;
}
// **** Lazy Logs **** // **** Lazy Logs ****
.lazy-log-container { .lazy-log-container {

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

@ -243,7 +243,7 @@ const BotListV1 = ({
</Col> </Col>
</Row> </Row>
) : ( ) : (
<Row className="page-container" gutter={[16, 16]}> <Row className="page-container" gutter={[0, 16]}>
<Col span={24}> <Col span={24}>
<TitleBreadcrumb titleLinks={breadcrumbs} /> <TitleBreadcrumb titleLinks={breadcrumbs} />
</Col> </Col>

14
openmetadata-ui/src/main/resources/ui/src/components/Team/TeamDetails/TeamDetailsV1.tsx
View File

@ -654,7 +654,7 @@ const TeamDetailsV1 = ({
) : ( ) : (
<Row <Row
className="team-list-container" className="team-list-container"
gutter={[8, 16]} gutter={[0, 16]}
justify="space-between"> justify="space-between">
<Col span={8}> <Col span={8}>
<Searchbar <Searchbar
@ -789,7 +789,7 @@ const TeamDetailsV1 = ({
), ),
}) })
) : ( ) : (
<Row className="roles-and-policy p-md" gutter={[0, 10]}> <Row className="roles-and-policy p-y-md" gutter={[0, 10]}>
{entityPermissions.EditAll && !isTeamDeleted && ( {entityPermissions.EditAll && !isTeamDeleted && (
<Col className="d-flex justify-end" span={24}> <Col className="d-flex justify-end" span={24}>
<Button <Button
@ -860,7 +860,7 @@ const TeamDetailsV1 = ({
), ),
}) })
) : ( ) : (
<Row className="roles-and-policy p-md" gutter={[0, 10]}> <Row className="roles-and-policy p-y-md" gutter={[0, 10]}>
{entityPermissions.EditAll && !isTeamDeleted && ( {entityPermissions.EditAll && !isTeamDeleted && (
<Col className="d-flex justify-end" span={24}> <Col className="d-flex justify-end" span={24}>
<Button <Button
@ -1035,7 +1035,7 @@ const TeamDetailsV1 = ({
const tabsChildrenRender = useCallback( const tabsChildrenRender = useCallback(
(key: TeamsPageTab) => ( (key: TeamsPageTab) => (
<Row className="teams-tabs-content-container"> <Row className="teams-tabs-content-container p-x-lg">
<Col className="teams-scroll-component" span={previewAsset ? 18 : 24}> <Col className="teams-scroll-component" span={previewAsset ? 18 : 24}>
{isFetchingAdvancedDetails ? <Loader /> : getTabChildren(key)} {isFetchingAdvancedDetails ? <Loader /> : getTabChildren(key)}
</Col> </Col>
@ -1104,16 +1104,16 @@ const TeamDetailsV1 = ({
} }
return ( return (
<div className="teams-layout page-container"> <div className="teams-layout">
<Row className="h-full" data-testid="team-details-container"> <Row className="h-full" data-testid="team-details-container">
{isOrganization && ( {isOrganization && (
<Col className="p-x-md p-y-sm" span={24}> <Col className="p-x-lg p-y-sm" span={24}>
<TitleBreadcrumb titleLinks={breadcrumbs} /> <TitleBreadcrumb titleLinks={breadcrumbs} />
</Col> </Col>
)} )}
<Col <Col
className="teams-profile-container" className="teams-profile-container p-x-lg"
data-testid="team-detail-header" data-testid="team-detail-header"
span={24}> span={24}>
<Collapse <Collapse

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

@ -339,7 +339,7 @@ export const UserTab = ({
} }
return ( return (
<Row className="p-md" gutter={[16, 16]}> <Row className="p-y-md" gutter={[0, 16]}>
<Col span={24}> <Col span={24}>
<Row justify="space-between"> <Row justify="space-between">
<Col span={8}> <Col span={8}>

8
openmetadata-ui/src/main/resources/ui/src/components/Team/TeamDetails/teams.less
View File

@ -14,7 +14,7 @@
@import url('../../../styles/variables.less'); @import url('../../../styles/variables.less');
.team-list-container { .team-list-container {
padding: 20px; padding: 20px 0;
.ant-btn { .ant-btn {
border-radius: 4px; border-radius: 4px;
} }
@ -78,7 +78,7 @@
} }
.teams-layout { .teams-layout {
margin: -16px -16px 0 -16px; margin: -12px 0;
.ant-card-head-title { .ant-card-head-title {
padding-top: 0; padding-top: 0;
@ -96,6 +96,10 @@
background: none; background: none;
} }
.ant-collapse-header {
padding-left: 0;
}
.ant-collapse-arrow { .ant-collapse-arrow {
top: 35px !important; // overriding from antd top: 35px !important; // overriding from antd
} }

6
openmetadata-ui/src/main/resources/ui/src/pages/Application/ApplicationPage.tsx
View File

@ -133,7 +133,7 @@ const ApplicationPage = () => {
return ( return (
<PageLayoutV1 pageTitle={t('label.application-plural')}> <PageLayoutV1 pageTitle={t('label.application-plural')}>
<Row className="page-container" gutter={[16, 16]}> <Row className="page-container" gutter={[0, 16]}>
<Col span={24}> <Col span={24}>
<TitleBreadcrumb titleLinks={breadcrumbs} /> <TitleBreadcrumb titleLinks={breadcrumbs} />
</Col> </Col>
@ -141,7 +141,7 @@ const ApplicationPage = () => {
<PageHeader data={PAGE_HEADERS.APPLICATION} /> <PageHeader data={PAGE_HEADERS.APPLICATION} />
</Col> </Col>
<Col className="d-flex justify-end" span={8}> <Col className="d-flex justify-end" span={8}>
<Space> <Space size="middle">
<div> <div>
<Switch <Switch
checked={showDisabled} checked={showDisabled}
@ -161,7 +161,7 @@ const ApplicationPage = () => {
</Space> </Space>
</Col> </Col>
</Row> </Row>
<Row className="m-t-lg"> <Row className="page-container m-t-lg">
{isLoading && {isLoading &&
[1, 2].map((key) => ( [1, 2].map((key) => (
<Col key={key} span={12}> <Col key={key} span={12}>

2
openmetadata-ui/src/main/resources/ui/src/pages/Configuration/LoginConfigurationDetails/LoginConfigurationPage.tsx
View File

@ -89,7 +89,7 @@ const LoginConfigurationPage = () => {
return ( return (
<PageLayoutV1 pageTitle={t('label.login')}> <PageLayoutV1 pageTitle={t('label.login')}>
<Row className="page-container" gutter={[16, 16]}> <Row className="page-container" gutter={[0, 16]}>
<Col span={24}> <Col span={24}>
<TitleBreadcrumb titleLinks={breadcrumbs} /> <TitleBreadcrumb titleLinks={breadcrumbs} />
</Col> </Col>

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

@ -96,7 +96,7 @@ const CustomLogoConfigSettingsPage = () => {
return ( return (
<PageLayoutV1 pageTitle={t('label.custom-logo')}> <PageLayoutV1 pageTitle={t('label.custom-logo')}>
<Row align="middle" className="page-container" gutter={[16, 16]}> <Row align="middle" className="page-container" gutter={[0, 16]}>
<Col span={24}> <Col span={24}>
<TitleBreadcrumb titleLinks={breadcrumbs} /> <TitleBreadcrumb titleLinks={breadcrumbs} />
</Col> </Col>

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

@ -155,7 +155,7 @@ export const CustomPageSettings = () => {
<Row <Row
className="customize-landing-page user-listing p-b-md page-container" className="customize-landing-page user-listing p-b-md page-container"
data-testid="custom-page-setting-component" data-testid="custom-page-setting-component"
gutter={[16, 16]}> gutter={[0, 16]}>
<Col span={24}> <Col span={24}>
<TitleBreadcrumb titleLinks={breadcrumbs} /> <TitleBreadcrumb titleLinks={breadcrumbs} />
</Col> </Col>

4
openmetadata-ui/src/main/resources/ui/src/pages/CustomPropertiesPageV1/CustomPropertiesPageV1.tsx
View File

@ -269,9 +269,9 @@ const CustomEntityDetailV1 = () => {
return ( return (
<PageLayoutV1 pageTitle={t('label.custom-property')}> <PageLayoutV1 pageTitle={t('label.custom-property')}>
<Row <Row
className="m-y-xs page-container" className="page-container"
data-testid="custom-entity-container" data-testid="custom-entity-container"
gutter={[16, 16]}> gutter={[0, 16]}>
<Col span={24}> <Col span={24}>
<TitleBreadcrumb titleLinks={breadcrumbs} /> <TitleBreadcrumb titleLinks={breadcrumbs} />
</Col> </Col>

2
openmetadata-ui/src/main/resources/ui/src/pages/EmailConfigSettingsPage/EmailConfigSettingsPage.component.tsx
View File

@ -157,7 +157,7 @@ function EmailConfigSettingsPage() {
return ( return (
<PageLayoutV1 pageTitle={t('label.email')}> <PageLayoutV1 pageTitle={t('label.email')}>
<Row align="middle" className="page-container" gutter={[16, 16]}> <Row align="middle" className="page-container" gutter={[0, 16]}>
<Col span={24}> <Col span={24}>
<TitleBreadcrumb titleLinks={breadcrumbs} /> <TitleBreadcrumb titleLinks={breadcrumbs} />
</Col> </Col>

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

@ -211,7 +211,7 @@ const NotificationListPage = () => {
return ( return (
<PageLayoutV1 pageTitle={t('label.alert-plural')}> <PageLayoutV1 pageTitle={t('label.alert-plural')}>
<Row className="page-container" gutter={[16, 16]}> <Row className="page-container" gutter={[0, 16]}>
<Col span={24}> <Col span={24}>
<TitleBreadcrumb titleLinks={breadcrumbs} /> <TitleBreadcrumb titleLinks={breadcrumbs} />
</Col> </Col>

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

@ -312,7 +312,7 @@ function ObservabilityAlertDetailsPage({
data-testid="alert-details-container"> data-testid="alert-details-container">
<Row <Row
className="add-notification-container p-x-lg p-t-md" className="add-notification-container p-x-lg p-t-md"
gutter={[16, 16]}> gutter={[0, 16]}>
<Col span={24}> <Col span={24}>
<TitleBreadcrumb titleLinks={breadcrumb} /> <TitleBreadcrumb titleLinks={breadcrumb} />
</Col> </Col>

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

@ -196,7 +196,7 @@ const ObservabilityAlertsPage = () => {
return ( return (
<PageLayoutV1 pageTitle={t('label.alert-plural')}> <PageLayoutV1 pageTitle={t('label.alert-plural')}>
<Row className="p-x-lg p-t-md" gutter={[16, 16]}> <Row className="p-x-lg p-t-md" gutter={[0, 16]}>
<Col span={24}> <Col span={24}>
<div className="d-flex justify-between"> <div className="d-flex justify-between">
<PageHeader data={pageHeaderData} /> <PageHeader data={pageHeaderData} />

2
openmetadata-ui/src/main/resources/ui/src/pages/Persona/PersonaDetailsPage/PersonaDetailsPage.tsx
View File

@ -173,7 +173,7 @@ export const PersonaDetailsPage = () => {
return ( return (
<PageLayoutV1 pageTitle={personaDetails.name}> <PageLayoutV1 pageTitle={personaDetails.name}>
<Row className="m-b-md page-container" gutter={[16, 16]}> <Row className="m-b-md page-container" gutter={[0, 16]}>
<Col span={24}> <Col span={24}>
<div className="d-flex justify-between items-start"> <div className="d-flex justify-between items-start">
<PageHeader <PageHeader

2
openmetadata-ui/src/main/resources/ui/src/pages/Persona/PersonaListPage/PersonaPage.tsx
View File

@ -132,7 +132,7 @@ export const PersonaPage = () => {
<Row <Row
className="user-listing page-container p-b-md" className="user-listing page-container p-b-md"
data-testid="user-list-v1-component" data-testid="user-list-v1-component"
gutter={[16, 16]}> gutter={[0, 16]}>
<Col span={24}> <Col span={24}>
<TitleBreadcrumb titleLinks={breadcrumbs} /> <TitleBreadcrumb titleLinks={breadcrumbs} />
</Col> </Col>

2
openmetadata-ui/src/main/resources/ui/src/pages/PoliciesPage/PoliciesListPage/PoliciesListPage.tsx
View File

@ -265,7 +265,7 @@ const PoliciesListPage = () => {
<Row <Row
className="policies-list-container page-container" className="policies-list-container page-container"
data-testid="policies-list-container" data-testid="policies-list-container"
gutter={[16, 16]}> gutter={[0, 16]}>
<Col span={24}> <Col span={24}>
<TitleBreadcrumb titleLinks={breadcrumbs} /> <TitleBreadcrumb titleLinks={breadcrumbs} />
</Col> </Col>

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

@ -263,7 +263,7 @@ const RolesListPage = () => {
<Row <Row
className="roles-list-container page-container" className="roles-list-container page-container"
data-testid="roles-list-container" data-testid="roles-list-container"
gutter={[16, 16]}> gutter={[0, 16]}>
<Col span={24}> <Col span={24}>
<TitleBreadcrumb titleLinks={breadcrumbs} /> <TitleBreadcrumb titleLinks={breadcrumbs} />
</Col> </Col>

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

@ -71,7 +71,7 @@ const ServicesPage = () => {
return viewAllPermission ? ( return viewAllPermission ? (
<PageLayoutV1 pageTitle={serviceName}> <PageLayoutV1 pageTitle={serviceName}>
<Row className="page-container" gutter={[16, 16]}> <Row className="page-container" gutter={[0, 16]}>
<Col span={24}> <Col span={24}>
<TitleBreadcrumb titleLinks={breadcrumbs} /> <TitleBreadcrumb titleLinks={breadcrumbs} />
</Col> </Col>

2
openmetadata-ui/src/main/resources/ui/src/pages/TestSuiteDetailsPage/TestSuiteDetailsPage.component.tsx
View File

@ -332,7 +332,7 @@ const TestSuiteDetailsPage = () => {
pageTitle={t('label.entity-detail-plural', { pageTitle={t('label.entity-detail-plural', {
entity: getEntityName(testSuite), entity: getEntityName(testSuite),
})}> })}>
<Row className="page-container" gutter={[16, 32]}> <Row className="page-container" gutter={[0, 32]}>
<Col span={24}> <Col span={24}>
<Space align="center" className="justify-between w-full"> <Space align="center" className="justify-between w-full">
<TitleBreadcrumb <TitleBreadcrumb

2
openmetadata-ui/src/main/resources/ui/src/pages/UserListPage/UserListPageV1.tsx
View File

@ -395,7 +395,7 @@ const UserListPageV1 = () => {
<Row <Row
className="user-listing p-b-md page-container" className="user-listing p-b-md page-container"
data-testid="user-list-v1-component" data-testid="user-list-v1-component"
gutter={[16, 16]}> gutter={[0, 16]}>
<Col span={24}> <Col span={24}>
<TitleBreadcrumb titleLinks={breadcrumbs} /> <TitleBreadcrumb titleLinks={breadcrumbs} />
</Col> </Col>

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

@ -81,7 +81,7 @@ p {
} }
.page-container { .page-container {
padding: 4px 16px 16px; padding: 0 24px;
} }
a, a,