Skip to content

A
amundsen_dev
Unverified Commit a87354bd authored by Tamika Tannis's avatar Tamika Tannis Committed by GitHub
Browse files
Options

fix: Miscellaneous UI Fixes (#469) 

* Fix dashboard preview modal title

* Improve vertical spacing in resource header

* Apply min-height to left panel metadata sections

* Update EditableSection rendering when missing optional props

* Update style for left panel metadata sections

* Fix resource detail height; Remove duplicate style

* Add hover effects on the service links

* Update EditableSection tests
parent 6da70150
Show whitespace changes
Inline Side-by-side
Showing with 117 additions and 67 deletions
amundsen_application/static/css/_layouts.scss
View file @ a87354bd
......@@ -2,13 +2,13 @@
$resource-header-height: 84px;
.resource-detail-layout {
height: calc(100% - #{$nav-bar-height} - #{$footer-height});
height: calc(100vh - #{$nav-bar-height} - #{$footer-height});
.resource-header {
display: flex;
height: $resource-header-height;
border-bottom: 2px solid $divider;
padding: 16px 24px 0;
padding: 16px 24px;
.icon-header {
......@@ -20,11 +20,13 @@ $resource-header-height: 84px;
.header-section {
&.header-title {
flex-grow: 1;
overflow: hidden;
.header-title-text {
display: inline-block;
max-width: calc(100% - 100px);
// Better align the header-title-text
// (84px header height - 32px vertical padding - 2px border - 20px subtitle line-height) = 30px
line-height: 30px;
}
}
......@@ -97,13 +99,20 @@ $resource-header-height: 84px;
.section-title {
color: $text-tertiary;
margin: 40px 0 8px;
margin-bottom: 8px;
}
.editable-section,
.metadata-section {
margin-top: 40px;
min-height: 70px;
display: inline-table;
}
.editable-text {
font-size: 16px;
.markdown-wrapper{
.markdown-wrapper {
font-size: 16px;
}
}
......
amundsen_application/static/js/components/DashboardPage/ImagePreview/index.tsx
View file @ a87354bd
......@@ -33,7 +33,7 @@ const PreviewModal = ({ imageSrc, onClose }: PreviewModalProps) => {
return (
<Modal show={show} onHide={handleClose} scrollable="true" className="dashboard-preview-modal">
<Modal.Header closeButton={true}>
<Modal.Title className="text-center">Constants.DASHBOARD_PREVIEW_MODAL_TITLE</Modal.Title>
<Modal.Title className="text-center">{Constants.DASHBOARD_PREVIEW_MODAL_TITLE}</Modal.Title>
</Modal.Header>
<Modal.Body>
<img
......
amundsen_application/static/js/components/DashboardPage/index.tsx
View file @ a87354bd
......@@ -207,6 +207,7 @@ export class DashboardPage extends React.Component<DashboardPageProps, Dashboard
</EditableSection>
<section className="column-layout-2">
<section className="left-panel">
<section className="metadata-section">
<div className="section-title title-3">Owners</div>
<div>
{
......@@ -229,19 +230,26 @@ export class DashboardPage extends React.Component<DashboardPageProps, Dashboard
/>
}
</div>
</section>
<section className="metadata-section">
<div className="section-title title-3">Created</div>
<div className="body-2 text-primary">
{ formatDateTimeShort({ epochTimestamp: dashboard.created_timestamp}) }
</div>
</section>
<section className="metadata-section">
<div className="section-title title-3">Last Updated</div>
<div className="body-2 text-primary">
{ formatDateTimeShort({ epochTimestamp: dashboard.updated_timestamp }) }
</div>
</section>
<section className="metadata-section">
<div className="section-title title-3">Recent View Count</div>
<div className="body-2 text-primary">
{ dashboard.recent_view_count }
</div>
</section>
</section>
<section className="right-panel">
<EditableSection title="Tags">
<TagInput
......@@ -249,10 +257,13 @@ export class DashboardPage extends React.Component<DashboardPageProps, Dashboard
uriKey={ this.props.dashboard.uri }
/>
</EditableSection>
<section className="metadata-section">
<div className="section-title title-3">Last Successful Run</div>
<div className="body-2 text-primary">
{ formatDateTimeShort({ epochTimestamp: dashboard.last_successful_run_timestamp }) }
</div>
</section>
<section className="metadata-section">
<div className="section-title title-3">Last Run</div>
<div>
<div className="body-2 text-primary">
......@@ -268,6 +279,7 @@ export class DashboardPage extends React.Component<DashboardPageProps, Dashboard
</div>
</section>
</section>
</section>
<ImagePreview uri={this.state.uri} redirectUrl={dashboard.url} />
</section>
<section className="right-panel">
......
amundsen_application/static/js/components/TableDetail/index.tsx
View file @ a87354bd
......@@ -155,37 +155,43 @@ class TableDetail extends React.Component<TableDetailProps & RouteComponentProps
</header>
<article className="column-layout-1">
<section className="left-panel">
{}
<EditableSection title="Description">
<TableDescEditableText
maxLength={ AppConfig.editableText.tableDescLength }
value={ data.description }
editable={ data.is_editable }
/>
</EditableSection>
<span>
{ notificationsEnabled() && <RequestDescriptionText/> }
</span>
{issueTrackingEnabled() && <TableIssues tableKey={ this.key } tableName={ this.getDisplayName()}/>}
</EditableSection>
{
issueTrackingEnabled() &&
<section className="metadata-section">
<TableIssues tableKey={ this.key } tableName={ this.getDisplayName()}/>
</section>
}
<section className="column-layout-2">
<section className="left-panel">
{
!data.is_view &&
<>
<section className="metadata-section">
<div className="section-title title-3">Date Range</div>
<WatermarkLabel watermarks={ data.watermarks }/>
</>
</section>
}
{
!!data.last_updated_timestamp &&
<>
<section className="metadata-section">
<div className="section-title title-3">Last Updated</div>
<div className="body-2">{ formatDateTimeShort({ epochTimestamp: data.last_updated_timestamp }) }</div>
</>
</section>
}
<section className="metadata-section">
<div className="section-title title-3">Frequent Users</div>
<FrequentUsers readers={ data.table_readers }/>
</section>
</section>
<section className="right-panel">
<EditableSection title="Tags">
<TagInput
......
amundsen_application/static/js/components/TableDetail/styles.scss
View file @ a87354bd
@import 'variables';
.table-detail {
height: calc(100% - #{$nav-bar-height} - #{$footer-height});
.column-layout-1 .left-panel {
.programmatic-title {
color: $text-primary;
......@@ -15,4 +13,13 @@
margin: 10px 0 4px;
}
}
.header-links {
.avatar-label {
&:focus,
&:hover {
color: $link-hover-color;
}
}
}
}
amundsen_application/static/js/components/common/EditableSection/index.spec.tsx
View file @ a87354bd
......@@ -88,5 +88,10 @@ describe("EditableSection", () => {
expect(wrapper.find(".edit-button").props().href).toBe(props.editUrl);
});
});
it("does not render button if readOnly=true and there is no external editUrl", () => {
const wrapper = setup({ readOnly: true }, <div/>).wrapper;
expect(wrapper.find(".edit-button").exists()).toBeFalsy();
});
});
});
amundsen_application/static/js/components/common/EditableSection/index.tsx
View file @ a87354bd
import * as React from 'react';
import { OverlayTrigger, Popover } from 'react-bootstrap';
import * as Constants from './constants';
import './styles.scss';
export interface EditableSectionProps {
......@@ -22,6 +24,10 @@ export interface EditableSectionChildProps {
}
export class EditableSection extends React.Component<EditableSectionProps, EditableSectionState> {
static defaultProps: Partial<EditableSectionProps> = {
editText: Constants.EDIT_TEXT,
};
constructor(props) {
super(props);
......@@ -53,6 +59,10 @@ export class EditableSection extends React.Component<EditableSectionProps, Edita
renderReadOnlyButton = (): React.ReactNode => {
const { editText, editUrl } = this.props;
const popoverHoverFocus = (<Popover id="popover-trigger-hover-focus">{ editText }</Popover>);
if (!editUrl) {
return null;
}
return (
<OverlayTrigger
trigger={["hover", "focus"]}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment