diff --git a/amundsen_application/static/css/_variables-default.scss b/amundsen_application/static/css/_variables-default.scss index 8de928ebc..9c0d648f5 100644 --- a/amundsen_application/static/css/_variables-default.scss +++ b/amundsen_application/static/css/_variables-default.scss @@ -130,6 +130,8 @@ $spacer-1: $spacer-size; $spacer-2: $spacer-size * 2; $spacer-3: $spacer-size * 3; $spacer-4: $spacer-size * 4; +$spacer-5: $spacer-size * 5; +$spacer-6: $spacer-size * 6; // Elevations (from LPL) $elevation-level1: 0 0 1px 0 rgba(0, 0, 0, 0.12), diff --git a/amundsen_application/static/js/components/common/ResourceList/ResourceListHeader/constants.ts b/amundsen_application/static/js/components/common/ResourceList/ResourceListHeader/constants.ts new file mode 100644 index 000000000..49df08864 --- /dev/null +++ b/amundsen_application/static/js/components/common/ResourceList/ResourceListHeader/constants.ts @@ -0,0 +1,5 @@ +export const DATASET_HEADER_TITLE = 'DATASET'; + +export const SOURCE_HEADER_TITLE = 'SOURCE'; + +export const BADGES_HEADER_TITLE = 'BADGES'; diff --git a/amundsen_application/static/js/components/common/ResourceList/ResourceListHeader/index.tsx b/amundsen_application/static/js/components/common/ResourceList/ResourceListHeader/index.tsx new file mode 100644 index 000000000..73c81cf5c --- /dev/null +++ b/amundsen_application/static/js/components/common/ResourceList/ResourceListHeader/index.tsx @@ -0,0 +1,28 @@ +// Copyright Contributors to the Amundsen project. +// SPDX-License-Identifier: Apache-2.0 + +import * as React from 'react'; + +import './styles.scss'; + +import { + DATASET_HEADER_TITLE, + SOURCE_HEADER_TITLE, + BADGES_HEADER_TITLE, +} from './constants'; + +const ResourceListHeader: React.FC = () => { + return ( +
+ + {DATASET_HEADER_TITLE} + + {SOURCE_HEADER_TITLE} + + {BADGES_HEADER_TITLE} + +
+ ); +}; + +export default ResourceListHeader; diff --git a/amundsen_application/static/js/components/common/ResourceList/ResourceListHeader/styles.scss b/amundsen_application/static/js/components/common/ResourceList/ResourceListHeader/styles.scss new file mode 100644 index 000000000..daca54109 --- /dev/null +++ b/amundsen_application/static/js/components/common/ResourceList/ResourceListHeader/styles.scss @@ -0,0 +1,34 @@ +// Copyright Contributors to the Amundsen project. +// SPDX-License-Identifier: Apache-2.0 + +@import 'variables'; +@import 'typography'; + +.resource-list-header { + @extend %text-caption-w2; + display: flex; + flex-direction: row; + align-items: center; + height: $spacer-6; + padding: $spacer-1 $spacer-3 $spacer-1; + + .dataset { + flex: 7; + margin-right: $spacer-2; + .dataset-text { + margin-left: $spacer-5; + } + } + .source { + flex: 2; + } + .badges { + display: flex; + flex: 3; + flex-wrap: wrap; + margin-left: $spacer-3; + .badges-text { + margin-left: $spacer-3; + } + } +} diff --git a/amundsen_application/static/js/pages/SearchPage/index.tsx b/amundsen_application/static/js/pages/SearchPage/index.tsx index 71f0b2097..e3c52ef18 100644 --- a/amundsen_application/static/js/pages/SearchPage/index.tsx +++ b/amundsen_application/static/js/pages/SearchPage/index.tsx @@ -9,6 +9,7 @@ import { RouteComponentProps } from 'react-router'; import { Search as UrlSearch } from 'history'; import PaginatedApiResourceList from 'components/common/ResourceList/PaginatedApiResourceList'; +import ResourceListHeader from 'components/common/ResourceList/ResourceListHeader'; import ShimmeringResourceLoader from 'components/common/ShimmeringResourceLoader'; import { GlobalState } from 'ducks/rootReducer'; @@ -146,6 +147,7 @@ export class SearchPage extends React.Component { return (
+