feat: add ResourceReport dropdown button in TableDetail (#495)

* add ResourceReport button

* adjust unit tests

* styling fixes

* remove noCaret & pullRight options

* test fix

* add report button unit tests

amundsen_application/static/js/components/TableDetail/ExploreButton/index.spec.tsx

@@ -51,6 +51,7 @@ describe('ExploreButton', () => {
         },
         table_readers: [],
         source: { source: '', source_type: '' },
+        resource_reports: [],
         watermarks: [],
         programmatic_descriptions: [],
         ...tableDataOverrides,

amundsen_application/static/js/components/TableDetail/ResourceReportsDropdown/index.spec.tsx

+// Copyright Contributors to the Amundsen project.
+// SPDX-License-Identifier: Apache-2.0
+
+import * as React from 'react';
+import { shallow } from 'enzyme';
+
+import { ResourceReport } from 'interfaces/TableMetadata';
+import { logClick } from 'ducks/utilMethods';
+import TableReportsDropdown from '.';
+
+describe('TableReportsDropdown component', () => {
+  const reports: ResourceReport[] = [
+    {
+      name: 'test_1',
+      url: 'http://test_1',
+    },
+    {
+      name: 'test_2',
+      url: 'http://test_2',
+    },
+  ];
+  const tableReportsDropdown = shallow(
+    <TableReportsDropdown resourceReports={reports} />
+  );
+
+  it('renders a resource reports dropdown', () => {
+    const container = tableReportsDropdown.find('DropdownMenu');
+    expect(container.exists()).toBe(true);
+  });
+  it('do not render resource reports', () => {
+    const container = shallow(
+      <TableReportsDropdown resourceReports={[]} />
+    ).find('DropdownMenu');
+    expect(container.exists()).toBe(false);
+  });
+  it('check if resource reports params are passed correctly ', () => {
+    const container = tableReportsDropdown.find('DropdownMenu');
+    reports.forEach((report, index) => {
+      const objectContent = container.childAt(index).props().children;
+      const expectedContent = JSON.stringify(
+        <a target="_blank" rel="noreferrer" href={reports[index].url}>
+          {reports[index].name}
+        </a>
+      );
+      expect(JSON.stringify(objectContent)).toEqual(expectedContent);
+    });
+  });
+});

amundsen_application/static/js/components/TableDetail/ResourceReportsDropdown/index.tsx

+import * as React from 'react';
+
+import { ResourceReport } from 'interfaces/index';
+import { Dropdown } from 'react-bootstrap';
+
+export interface ResourceReportProps {
+  resourceReports: ResourceReport[];
+}
+
+const TableReportsDropdown: React.SFC<ResourceReportProps> = ({
+  resourceReports,
+}: ResourceReportProps) => {
+  if (resourceReports === null || resourceReports.length < 1) return null;
+  return (
+    <Dropdown id="user-dropdown">
+      <Dropdown.Toggle className="btn btn-default btn-lg">
+        Reports
+      </Dropdown.Toggle>
+      <Dropdown.Menu className="profile-menu">
+        {resourceReports.map((report) => (
+          <li>
+            <a target="_blank" rel="noreferrer" href={`${report.url}`}>
+              {`${report.name}`}
+            </a>
+          </li>
+        ))}
+      </Dropdown.Menu>
+    </Dropdown>
+  );
+};
+
+export default TableReportsDropdown;

amundsen_application/static/js/components/TableDetail/index.tsx

@@ -58,6 +58,7 @@ import {
 } from './constants';
 
 import './styles.scss';
+import TableReportsDropdown from 'components/TableDetail/ResourceReportsDropdown';
 
 const SERVER_ERROR_CODE = 500;
 const DASHBOARDS_PER_PAGE = 10;
@@ -231,6 +232,7 @@ export class TableDetail extends React.Component<
               <SourceLink tableSource={data.source} />
             </div>
             <div className="header-section header-buttons">
+              <TableReportsDropdown resourceReports={data.resource_reports} />
               <DataPreviewButton modalTitle={this.getDisplayName()} />
               <ExploreButton tableData={data} />
             </div>

amundsen_application/static/js/config/tests/index.spec.ts

@@ -194,6 +194,7 @@ describe('generateExploreUrl', () => {
     },
     table_readers: [],
     source: { source: '', source_type: '' },
+    resource_reports: [],
     watermarks: [],
     programmatic_descriptions: [],
   };

amundsen_application/static/js/ducks/tableMetadata/reducer.ts

@@ -280,6 +280,7 @@ export const initialTableDataState: TableMetadata = {
   partition: { is_partitioned: false },
   table_readers: [],
   source: { source: '', source_type: '' },
+  resource_reports: [],
   watermarks: [],
   programmatic_descriptions: [],
 };

amundsen_application/static/js/fixtures/globalState.ts

@@ -170,6 +170,7 @@ const globalState: GlobalState = {
       partition: { is_partitioned: false },
       table_readers: [],
       source: { source: '', source_type: '' },
+      resource_reports: [],
       watermarks: [],
       programmatic_descriptions: [],
     },

amundsen_application/static/js/fixtures/metadata/table.ts

@@ -113,6 +113,7 @@ export const tableMetadata: TableMetadata = {
       'https://github.com/lyft/etl/blob/master/sql/hive/base/rides.config',
     source_type: 'github',
   },
+  resource_reports: [{ name: 'Test report', url: 'http://localhost' }],
   table_readers: [
     {
       read_count: 1735,

amundsen_application/static/js/interfaces/TableMetadata.ts

@@ -74,6 +74,11 @@ export interface ProgrammaticDescription {
   text: string;
 }
 
+export interface ResourceReport {
+  name: string;
+  url: string;
+}
+
 export interface TableMetadata {
   badges: Badge[];
   cluster: string;
@@ -90,6 +95,7 @@ export interface TableMetadata {
   partition: PartitionData;
   table_readers: TableReader[];
   source: TableSource;
+  resource_reports: ResourceReport[];
   watermarks: Watermark[];
   programmatic_descriptions: ProgrammaticDescription[];
 }

requirements.txt

@@ -70,7 +70,7 @@ responses==0.9.0
 
 # A common package that holds the models deifnition and schemas that are used
 # accross different amundsen repositories.
-amundsen-common>=0.3.5,<1.0
+amundsen-common>=0.3.6,<1.0
 
 # Library for rest endpoints with Flask
 # Upstream url: https://github.com/flask-restful/flask-restful