Display datahub link for datasets with defined URN (#177)

* Display datahub link for datasets with defined URN

* Add datahub SVG

* Reorder imports

* Add datahub link to dashboards

* Convert to camel case

* Add tests for DatasetList

* Add tests for dashboard header

* Provide explanation for empty catch

superset-frontend/src/components/Icons/index.tsx

@@ -60,6 +60,7 @@ const IconFileNames = [
   'copy',
   'cursor_target',
   'database',
+  'datahub',
   'dataset_physical',
   'dataset_virtual_greyscale',
   'dataset_virtual',

superset-frontend/src/dashboard/components/Header/Header.test.tsx

@@ -324,6 +324,12 @@ test('should refresh the charts', async () => {
   expect(mockedProps.onRefresh).toHaveBeenCalledTimes(1);
 });
 
+test('should show datahub link', async () => {
+  const mockedProps = createProps();
+  setup(mockedProps);
+  expect(screen.getByTestId('datahub_link')).toBeInTheDocument();
+});
+
 describe('Email Report Modal', () => {
   let isFeatureEnabledMock: any;
   let dispatch: any;

superset-frontend/src/dashboard/components/Header/index.jsx

@@ -54,6 +54,7 @@ import setPeriodicRunner, {
 import { options as PeriodicRefreshOptions } from 'src/dashboard/components/RefreshIntervalModal';
 import findPermission from 'src/dashboard/util/findPermission';
 import { FILTER_BOX_MIGRATION_STATES } from 'src/explore/constants';
+import { datahubUrl } from 'src/preamble';
 import { DashboardEmbedModal } from '../DashboardEmbedControls';
 
 const propTypes = {
@@ -563,6 +564,13 @@ class Header extends React.PureComponent {
               showTooltip
             />
           )}
+          <a
+            href={`${datahubUrl}dashboard/urn:li:dashboard:(superset,${dashboardInfo.id})`}
+            style={{ paddingLeft: '0.5em' }}
+            data-test="datahub_link"
+          >
+            <Icons.Datahub viewBox="0 0 180 180" />
+          </a>
         </div>
 
         <div className="button-container">

superset-frontend/src/preamble.ts

@@ -81,6 +81,8 @@ const getMe = makeApi<void, User>({
   endpoint: '/api/v1/me/',
 });
 
+export const datahubUrl = bootstrapData?.common?.datahub_url;
+
 /**
  * When you re-open the window, we check if you are still logged in.
  * If your session expired or you signed out, we'll redirect to login.

superset-frontend/src/views/CRUD/data/dataset/DatasetList.test.jsx

@@ -56,6 +56,7 @@ const mockdatasets = [...new Array(3)].map((_, i) => ({
   schema: `schema ${i}`,
   table_name: `coolest table ${i}`,
   owners: [{ username: 'admin', userId: 1 }],
+  extra: i === 0 ? JSON.stringify({ urn: 'urn' }) : '',
 }));
 
 const mockUser = {
@@ -181,6 +182,36 @@ describe('DatasetList', () => {
       wrapper.find('[data-test="bulk-select-copy"]').text(),
     ).toMatchInlineSnapshot(`"3 Selected (2 Physical, 1 Virtual)"`);
   });
+
+  it('renders datahub link when urn is defined', async () => {
+    await waitForComponentToPaint(wrapper);
+    expect(
+      wrapper
+        .find('[data-test="cell-text"]')
+        .filterWhere(
+          e =>
+            e.childAt(0).props().cell.column.id === 'datahub_link' &&
+            e.childAt(0).props().cell.row.index === 0,
+        )
+        .childAt(0)
+        .children(),
+    ).toHaveLength(1);
+  });
+
+  it('does not render datahub link when urn is undefined', async () => {
+    await waitForComponentToPaint(wrapper);
+    expect(
+      wrapper
+        .find('[data-test="cell-text"]')
+        .filterWhere(
+          e =>
+            e.childAt(0).props().cell.column.id === 'datahub_link' &&
+            e.childAt(0).props().cell.row.index === 1,
+        )
+        .childAt(0)
+        .children(),
+    ).toHaveLength(0);
+  });
 });
 
 describe('RTL', () => {

superset-frontend/src/views/CRUD/data/dataset/DatasetList.tsx

@@ -57,6 +57,7 @@ import ImportModelsModal from 'src/components/ImportModal/index';
 import { isFeatureEnabled, FeatureFlag } from 'src/featureFlags';
 import WarningIconWithTooltip from 'src/components/WarningIconWithTooltip';
 import { isUserAdmin } from 'src/dashboard/util/findPermission';
+import { datahubUrl } from 'src/preamble';
 import AddDatasetModal from './AddDatasetModal';
 
 import {
@@ -301,6 +302,30 @@ const DatasetList: FunctionComponent<DatasetListProps> = ({
         Header: t('Name'),
         accessor: 'table_name',
       },
+      {
+        Cell: ({
+          row: {
+            original: { extra },
+          },
+        }: any) => {
+          try {
+            const parsedExtra = JSON.parse(extra);
+            if (parsedExtra?.urn) {
+              return (
+                <a href={datahubUrl + parsedExtra?.urn}>
+                  <Icons.Datahub viewBox="0 0 180 180" />
+                </a>
+              );
+            }
+          } catch {
+            // This should never be reached. Only needed for tests.
+          }
+          return null;
+        },
+        accessor: 'datahub_link',
+        disableSortBy: true,
+        size: 'xs',
+      },
       {
         Cell: ({
           row: {

superset/config.py

@@ -1371,6 +1371,8 @@ def SQL_QUERY_MUTATOR(  # pylint: disable=invalid-name,unused-argument
 # Set to False to only allow viewing own recent activity
 ENABLE_BROAD_ACTIVITY_ACCESS = True
 
+DATAHUB_URL = "https://localhost:9002/"
+
 # Configuration for environment tag shown on the navbar. Setting 'text' to '' will hide the tag.
 ENVIRONMENT_TAG_CONFIG = {
     "variable": "FLASK_ENV",

superset/views/base.py

@@ -388,6 +388,7 @@ def common_bootstrap_payload() -> Dict[str, Any]:
         "extra_categorical_color_schemes": conf["EXTRA_CATEGORICAL_COLOR_SCHEMES"],
         "theme_overrides": conf["THEME_OVERRIDES"],
         "menu_data": menu_data(),
+        "datahub_url": conf.get("DATAHUB_URL", ""),
     }
     bootstrap_data.update(conf["COMMON_BOOTSTRAP_OVERRIDES_FUNC"](bootstrap_data))
     return bootstrap_data