feat: add search header (#643)

* added search header, unsure if this is the right place for this component
Signed-off-by: Allison Suarez Miranda <asuarezmiranda@lyft.com>

* lint and small fixes
Signed-off-by: Allison Suarez Miranda <asuarezmiranda@lyft.com>

* updated text
Signed-off-by: Allison Suarez Miranda <asuarezmiranda@lyft.com>

* got alignmed right
Signed-off-by: Allison Suarez Miranda <asuarezmiranda@lyft.com>

* lint :(
Signed-off-by: Allison Suarez Miranda <asuarezmiranda@lyft.com>

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),

amundsen_application/static/js/components/common/ResourceList/ResourceListHeader/constants.ts

+export const DATASET_HEADER_TITLE = 'DATASET';
+
+export const SOURCE_HEADER_TITLE = 'SOURCE';
+
+export const BADGES_HEADER_TITLE = 'BADGES';

amundsen_application/static/js/components/common/ResourceList/ResourceListHeader/index.tsx

+// 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 (
+    <div className="resource-list-header">
+      <span className="dataset">
+        <span className="dataset-text">{DATASET_HEADER_TITLE}</span>
+      </span>
+      <span className="source">{SOURCE_HEADER_TITLE}</span>
+      <span className="badges">
+        <span className="badges-text">{BADGES_HEADER_TITLE}</span>
+      </span>
+    </div>
+  );
+};
+
+export default ResourceListHeader;

amundsen_application/static/js/components/common/ResourceList/ResourceListHeader/styles.scss

+// 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;
+    }
+  }
+}

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<SearchPageProps> {
 
     return (
       <div className="search-list-container">
+        <ResourceListHeader />
         <PaginatedApiResourceList
           activePage={page_index}
           onPagination={this.props.setPageIndex}