Pass product name to query list item UI (#510)

amundsen_application/static/js/components/DashboardPage/QueryList/index.spec.tsx

@@ -7,6 +7,7 @@ import QueryListItem from '../QueryListItem';
 
 const setup = (propOverrides?: Partial<QueryListProps>) => {
   const props = {
+    product: 'Mode',
     queries: [],
     ...propOverrides,
   };

amundsen_application/static/js/components/DashboardPage/QueryList/index.tsx

@@ -5,12 +5,13 @@ import QueryListItem from '../QueryListItem';
 import './styles.scss';
 
 export interface QueryListProps {
+  product: string;
   queries: QueryResource[];
 }
 
 class QueryList extends React.Component<QueryListProps> {
   render() {
-    const { queries } = this.props;
+    const { product, queries } = this.props;
 
     if (queries.length === 0) {
       return null;
@@ -19,6 +20,7 @@ class QueryList extends React.Component<QueryListProps> {
     const queryList = queries.map(({ name, query_text, url }) => (
       <QueryListItem
         key={`key:${name}`}
+        product={product}
         text={query_text}
         url={url}
         name={name}

amundsen_application/static/js/components/DashboardPage/QueryListItem/index.spec.tsx

@@ -6,6 +6,7 @@ import QueryListItem, { QueryListItemProps } from '.';
 
 const setup = (propOverrides?: Partial<QueryListItemProps>) => {
   const props: QueryListItemProps = {
+    product: 'Mode',
     text: 'testQuery',
     url: 'http://test.url',
     name: 'testName',

amundsen_application/static/js/components/DashboardPage/QueryListItem/index.tsx

 import * as React from 'react';
 import { OverlayTrigger, Popover } from 'react-bootstrap';
 
+import { ResourceType } from 'interfaces';
+
+import { getSourceDisplayName, getSourceIconClass } from 'config/config-utils';
+
 import './styles.scss';
 
 export interface QueryListItemProps {
+  name: string;
+  product: string;
   text: string;
   url: string;
-  name: string;
 }
 
 type GoToDashboardLinkProps = {
+  product: string;
   url: string;
 };
 
 const QUERY_LABEL = 'Query';
-const MODE_LINK_TOOLTIP_TEXT = 'View in Mode';
+const LINK_TOOLTIP_TEXT = 'View in';
 const LOADING_QUERY_MESSAGE = 'Loading Query Component, please wait...';
 
 const LazyComponent = React.lazy(() => import('./CodeBlock'));
 
-const GoToDashboardLink = ({ url }: GoToDashboardLinkProps) => {
+const GoToDashboardLink = ({ product, url }: GoToDashboardLinkProps) => {
+  const productName = getSourceDisplayName(product, ResourceType.dashboard);
   const popoverHoverFocus = (
-    <Popover id="popover-trigger-hover-focus">{MODE_LINK_TOOLTIP_TEXT}</Popover>
+    <Popover id="popover-trigger-hover-focus">{`${LINK_TOOLTIP_TEXT} ${productName}`}</Popover>
   );
 
   return (
@@ -61,7 +68,7 @@ const QueryBlockShimmer = () => {
   );
 };
 
-const QueryListItem = ({ name, text, url }: QueryListItemProps) => {
+const QueryListItem = ({ product, name, text, url }: QueryListItemProps) => {
   const [isExpanded, setExpanded] = React.useState(false);
   const toggleExpand = () => {
     setExpanded(!isExpanded);
@@ -84,7 +91,7 @@ const QueryListItem = ({ name, text, url }: QueryListItemProps) => {
           <label className="query-list-query-label section-title">
             {QUERY_LABEL}:
             <div className="query-list-query-content">
-              <GoToDashboardLink url={url} />
+              <GoToDashboardLink product={product} url={url} />
               <React.Suspense fallback={<QueryBlockShimmer />}>
                 <LazyComponent text={text} />
               </React.Suspense>

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

@@ -132,7 +132,12 @@ export class DashboardPage extends React.Component<
     }
 
     tabInfo.push({
-      content: <QueryList queries={this.props.dashboard.queries} />,
+      content: (
+        <QueryList
+          product={this.props.dashboard.product}
+          queries={this.props.dashboard.queries}
+        />
+      ),
       key: 'queries',
       title: `Queries (${this.props.dashboard.queries.length})`,
     });

amundsen_application/static/js/components/NavBar/styles.scss

@@ -86,8 +86,6 @@ $avatar-container-size: 40px;
     }
   }
 
-
-
   .logo-icon {
     margin-right: $spacer-2;
     max-height: 32px;