Skip to content

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

chore: Update order of table metadata on TableDetailPage (#652) 

* Update metadata order
Signed-off-by: 's avatarTamika Tannis <ttannis@lyft.com>

* Code cleanup
Signed-off-by: 's avatarTamika Tannis <ttannis@lyft.com>

* Lint fix
Signed-off-by: 's avatarTamika Tannis <ttannis@lyft.com>

* Betterer update
Signed-off-by: 's avatarTamika Tannis <ttannis@lyft.com>
parent 8e498147
Hide whitespace changes
Inline Side-by-side
Showing with 44 additions and 28 deletions
amundsen_application/static/.betterer.results
View file @ e775cd83
...@@ -319,8 +319,8 @@ exports[`strict null compilation`] = { ...@@ -319,8 +319,8 @@ exports[`strict null compilation`] = {
[293, 14, 40, "No overload matches this call.\\n Overload 1 of 3, \'(node: ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)>, options?: ShallowRendererProps | undefined): ShallowWrapper<...>\', gave the following error.\\n Argument of type \'Element | null\' is not assignable to parameter of type \'ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)>\'.\\n Type \'null\' is not assignable to type \'ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)>\'.\\n Overload 2 of 3, \'(node: ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)>, options?: ShallowRendererProps | undefined): ShallowWrapper<...>\', gave the following error.\\n Argument of type \'Element | null\' is not assignable to parameter of type \'ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)>\'.\\n Type \'null\' is not assignable to type \'ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)>\'.\\n Overload 3 of 3, \'(node: ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)>, options?: ShallowRendererProps | undefined): ShallowWrapper<...>\', gave the following error.\\n Argument of type \'Element | null\' is not assignable to parameter of type \'ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)>\'.\\n Type \'null\' is not assignable to type \'ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)>\'.", "1257093057"], [293, 14, 40, "No overload matches this call.\\n Overload 1 of 3, \'(node: ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)>, options?: ShallowRendererProps | undefined): ShallowWrapper<...>\', gave the following error.\\n Argument of type \'Element | null\' is not assignable to parameter of type \'ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)>\'.\\n Type \'null\' is not assignable to type \'ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)>\'.\\n Overload 2 of 3, \'(node: ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)>, options?: ShallowRendererProps | undefined): ShallowWrapper<...>\', gave the following error.\\n Argument of type \'Element | null\' is not assignable to parameter of type \'ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)>\'.\\n Type \'null\' is not assignable to type \'ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)>\'.\\n Overload 3 of 3, \'(node: ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)>, options?: ShallowRendererProps | undefined): ShallowWrapper<...>\', gave the following error.\\n Argument of type \'Element | null\' is not assignable to parameter of type \'ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)>\'.\\n Type \'null\' is not assignable to type \'ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)>\'.", "1257093057"],
[302, 8, 8, "Type \'null\' is not assignable to type \'ResourceType | undefined\'.", "2131237679"] [302, 8, 8, "Type \'null\' is not assignable to type \'ResourceType | undefined\'.", "2131237679"]
], ],
"js/pages/SearchPage/index.tsx:4000484656": [ "js/pages/SearchPage/index.tsx:3158270092": [
[174, 11, 12, "Property \'filterSections\' is missing in type \'{}\' but required in type \'Readonly<Pick<StateFromProps, \\"filterSections\\">>\'.", "250899467"] [176, 11, 12, "Property \'filterSections\' is missing in type \'{}\' but required in type \'Readonly<Pick<StateFromProps, \\"filterSections\\">>\'.", "250899467"]
], ],
"js/pages/TableDetailPage/ColumnList/index.tsx:3163605539": [ "js/pages/TableDetailPage/ColumnList/index.tsx:3163605539": [
[31, 6, 7, "Object is possibly \'undefined\'.", "3718923584"], [31, 6, 7, "Object is possibly \'undefined\'.", "3718923584"],
...@@ -353,18 +353,18 @@ exports[`strict null compilation`] = { ...@@ -353,18 +353,18 @@ exports[`strict null compilation`] = {
"js/pages/TableDetailPage/index.spec.tsx:3148704474": [ "js/pages/TableDetailPage/index.spec.tsx:3148704474": [
[32, 4, 8, "Argument of type \'Partial<Location<{} | null | undefined>> | undefined\' is not assignable to parameter of type \'Partial<Location<{} | null | undefined>>\'.\\n Type \'undefined\' is not assignable to type \'Partial<Location<{} | null | undefined>>\'.", "2700611480"] [32, 4, 8, "Argument of type \'Partial<Location<{} | null | undefined>> | undefined\' is not assignable to parameter of type \'Partial<Location<{} | null | undefined>>\'.\\n Type \'undefined\' is not assignable to type \'Partial<Location<{} | null | undefined>>\'.", "2700611480"]
], ],
"js/pages/TableDetailPage/index.tsx:1188316820": [ "js/pages/TableDetailPage/index.tsx:2666700431": [
[160, 10, 13, "Type \'null\' is not assignable to type \'((newValue: string, onSuccess?: (() => any) | undefined, onFailure?: (() => any) | undefined) => void) | undefined\'.", "67794331"], [160, 10, 13, "Type \'null\' is not assignable to type \'((newValue: string, onSuccess?: (() => any) | undefined, onFailure?: (() => any) | undefined) => void) | undefined\'.", "67794331"],
[199, 11, 26, "Type \'{ itemsPerPage: number; source: string; }\' is missing the following properties from type \'Readonly<Pick<TableDashboardResourceListProps, \\"source\\" | \\"isLoading\\" | \\"dashboards\\" | \\"itemsPerPage\\" | \\"errorText\\"> & OwnProps>\': isLoading, dashboards, errorText", "2224258167"], [199, 11, 26, "Type \'{ itemsPerPage: number; source: string; }\' is missing the following properties from type \'Readonly<Pick<TableDashboardResourceListProps, \\"source\\" | \\"isLoading\\" | \\"dashboards\\" | \\"itemsPerPage\\" | \\"errorText\\"> & OwnProps>\': isLoading, dashboards, errorText", "2224258167"],
[279, 16, 7, "Type \'string | null\' is not assignable to type \'string | undefined\'.\\n Type \'null\' is not assignable to type \'string | undefined\'.", "3817619378"], [279, 16, 7, "Type \'string | null\' is not assignable to type \'string | undefined\'.\\n Type \'null\' is not assignable to type \'string | undefined\'.", "3817619378"],
[321, 20, 35, "Argument of type \'ProgrammaticDescription[] | undefined\' is not assignable to parameter of type \'ProgrammaticDescription[]\'.\\n Type \'undefined\' is not assignable to type \'ProgrammaticDescription[]\'.", "4249007202"], [327, 20, 35, "Argument of type \'ProgrammaticDescription[] | undefined\' is not assignable to parameter of type \'ProgrammaticDescription[]\'.\\n Type \'undefined\' is not assignable to type \'ProgrammaticDescription[]\'.", "4249007202"],
[335, 20, 36, "Argument of type \'ProgrammaticDescription[] | undefined\' is not assignable to parameter of type \'ProgrammaticDescription[]\'.\\n Type \'undefined\' is not assignable to type \'ProgrammaticDescription[]\'.", "2770872537"], [341, 20, 36, "Argument of type \'ProgrammaticDescription[] | undefined\' is not assignable to parameter of type \'ProgrammaticDescription[]\'.\\n Type \'undefined\' is not assignable to type \'ProgrammaticDescription[]\'.", "2770872537"],
[340, 16, 36, "Argument of type \'ProgrammaticDescription[] | undefined\' is not assignable to parameter of type \'ProgrammaticDescription[]\'.\\n Type \'undefined\' is not assignable to type \'ProgrammaticDescription[]\'.", "2776557981"] [346, 16, 36, "Argument of type \'ProgrammaticDescription[] | undefined\' is not assignable to parameter of type \'ProgrammaticDescription[]\'.\\n Type \'undefined\' is not assignable to type \'ProgrammaticDescription[]\'.", "2776557981"]
], ],
"js/utils/navigationUtils.ts:1127210474": [ "js/utils/navigationUtils.ts:1127210474": [
[19, 50, 21, "Type \'undefined\' cannot be used as an index type.", "602535635"] [19, 50, 21, "Type \'undefined\' cannot be used as an index type.", "602535635"]
], ],
"webpack.common.ts:998025681": [ "webpack.common.ts:545199363": [
[33, 24, 20, "No overload matches this call.\\n Overload 1 of 2, \'(...items: ConcatArray<never>[]): never[]\', gave the following error.\\n Argument of type \'string\' is not assignable to parameter of type \'ConcatArray<never>\'.\\n Overload 2 of 2, \'(...items: ConcatArray<never>[]): never[]\', gave the following error.\\n Argument of type \'string\' is not assignable to parameter of type \'ConcatArray<never>\'.", "806093104"] [33, 24, 20, "No overload matches this call.\\n Overload 1 of 2, \'(...items: ConcatArray<never>[]): never[]\', gave the following error.\\n Argument of type \'string\' is not assignable to parameter of type \'ConcatArray<never>\'.\\n Overload 2 of 2, \'(...items: ConcatArray<never>[]): never[]\', gave the following error.\\n Argument of type \'string\' is not assignable to parameter of type \'ConcatArray<never>\'.", "806093104"]
] ]
}` }`
......
amundsen_application/static/css/_layouts.scss
View file @ e775cd83
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
// SPDX-License-Identifier: Apache-2.0 // SPDX-License-Identifier: Apache-2.0
@import 'variables'; @import 'variables';
@import 'typography';
$resource-header-height: 84px; $resource-header-height: 84px;
$aside-separation-space: 40px; $aside-separation-space: 40px;
...@@ -108,6 +109,8 @@ $screen-lg-container: 1440px; ...@@ -108,6 +109,8 @@ $screen-lg-container: 1440px;
} }
.section-title { .section-title {
@extend %text-title-w3;
color: $text-tertiary; color: $text-tertiary;
margin-bottom: 8px; margin-bottom: 8px;
} }
......
amundsen_application/static/js/pages/TableDetailPage/constants.ts
View file @ e775cd83
export const ERROR_MESSAGE = 'Something went wrong...'; export const ERROR_MESSAGE = 'Something went wrong...';
export const EDIT_DESC_TEXT = 'Click to edit description in'; export const EDIT_DESC_TEXT = 'Click to edit description in';
export const DATE_RANGE_TITLE = 'Date Range';
export const DESCRIPTION_TITLE = 'Description';
export const FREQ_USERS_TITLE = 'Frequent Users';
export const LAST_UPDATED_TITLE = 'Last Updated';
export const OWNERS_TITLE = 'Owners';
export const TAG_TITLE = 'Tags';
amundsen_application/static/js/pages/TableDetailPage/index.tsx
View file @ e775cd83
...@@ -58,7 +58,7 @@ import TableReportsDropdown from './ResourceReportsDropdown'; ...@@ -58,7 +58,7 @@ import TableReportsDropdown from './ResourceReportsDropdown';
import RequestDescriptionText from './RequestDescriptionText'; import RequestDescriptionText from './RequestDescriptionText';
import RequestMetadataForm from './RequestMetadataForm'; import RequestMetadataForm from './RequestMetadataForm';
import { ERROR_MESSAGE, EDIT_DESC_TEXT } from './constants'; import * as Constants from './constants';
import './styles.scss'; import './styles.scss';
...@@ -100,7 +100,7 @@ const ErrorMessage = () => { ...@@ -100,7 +100,7 @@ const ErrorMessage = () => {
return ( return (
<div className="container error-label"> <div className="container error-label">
<Breadcrumb /> <Breadcrumb />
<label>{ERROR_MESSAGE}</label> <label>{Constants.ERROR_MESSAGE}</label>
</div> </div>
); );
}; };
...@@ -224,7 +224,7 @@ export class TableDetail extends React.Component< ...@@ -224,7 +224,7 @@ export class TableDetail extends React.Component<
} else { } else {
const data = tableData; const data = tableData;
const editText = data.source const editText = data.source
? `${EDIT_DESC_TEXT} ${getDescriptionSourceDisplayName( ? `${Constants.EDIT_DESC_TEXT} ${getDescriptionSourceDisplayName(
data.source.source_type data.source.source_type
)}` )}`
: ''; : '';
...@@ -274,7 +274,7 @@ export class TableDetail extends React.Component< ...@@ -274,7 +274,7 @@ export class TableDetail extends React.Component<
<div className="column-layout-1"> <div className="column-layout-1">
<aside className="left-panel"> <aside className="left-panel">
<EditableSection <EditableSection
title="Description" title={Constants.DESCRIPTION_TITLE}
readOnly={!data.is_editable} readOnly={!data.is_editable}
editText={editText} editText={editText}
editUrl={editUrl} editUrl={editUrl}
...@@ -298,15 +298,11 @@ export class TableDetail extends React.Component< ...@@ -298,15 +298,11 @@ export class TableDetail extends React.Component<
)} )}
<section className="column-layout-2"> <section className="column-layout-2">
<section className="left-panel"> <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 && ( {!!data.last_updated_timestamp && (
<section className="metadata-section"> <section className="metadata-section">
<div className="section-title title-3">Last Updated</div> <div className="section-title">
{Constants.LAST_UPDATED_TITLE}
</div>
<time className="body-2"> <time className="body-2">
{formatDateTimeShort({ {formatDateTimeShort({
epochTimestamp: data.last_updated_timestamp, epochTimestamp: data.last_updated_timestamp,
...@@ -314,24 +310,34 @@ export class TableDetail extends React.Component< ...@@ -314,24 +310,34 @@ export class TableDetail extends React.Component<
</time> </time>
</section> </section>
)} )}
<section className="metadata-section"> {!data.is_view && (
<div className="section-title title-3">Frequent Users</div> <section className="metadata-section">
<FrequentUsers readers={data.table_readers} /> <div className="section-title">
</section> {Constants.DATE_RANGE_TITLE}
{this.renderProgrammaticDesc( </div>
data.programmatic_descriptions.left <WatermarkLabel watermarks={data.watermarks} />
</section>
)} )}
</section> <EditableSection title={Constants.TAG_TITLE}>
<section className="right-panel">
<EditableSection title="Tags">
<TagInput <TagInput
resourceType={ResourceType.table} resourceType={ResourceType.table}
uriKey={this.props.tableData.key} uriKey={this.props.tableData.key}
/> />
</EditableSection> </EditableSection>
<EditableSection title="Owners"> {this.renderProgrammaticDesc(
data.programmatic_descriptions.left
)}
</section>
<section className="right-panel">
<EditableSection title={Constants.OWNERS_TITLE}>
<TableOwnerEditor resourceType={ResourceType.table} /> <TableOwnerEditor resourceType={ResourceType.table} />
</EditableSection> </EditableSection>
<section className="metadata-section">
<div className="section-title">
{Constants.FREQ_USERS_TITLE}
</div>
<FrequentUsers readers={data.table_readers} />
</section>
{this.renderProgrammaticDesc( {this.renderProgrammaticDesc(
data.programmatic_descriptions.right data.programmatic_descriptions.right
)} )}
......
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