QueryLink migration and some updates

client/app/components/QueryLink.jsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { VisualizationType } from '@/visualizations';
+import { VisualizationName } from '@/visualizations/VisualizationName';
+
+function QueryLink({ query, visualization, readOnly }) {
+  const getUrl = () => {
+    let hash = null;
+    if (visualization) {
+      if (visualization.type === 'TABLE') {
+        // link to hard-coded table tab instead of the (hidden) visualization tab
+        hash = 'table';
+      } else {
+        hash = visualization.id;
+      }
+    }
+
+    return query.getUrl(false, hash);
+  };
+
+  return (
+    <a href={readOnly ? null : getUrl()} className="query-link">
+      <VisualizationName visualization={visualization} />{' '}
+      <span>{query.name}</span>
+    </a>
+  );
+}
+
+QueryLink.propTypes = {
+  query: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+  visualization: VisualizationType,
+  readOnly: PropTypes.bool,
+};
+
+QueryLink.defaultProps = {
+  visualization: null,
+  readOnly: false,
+};
+
+export default QueryLink;

client/app/components/dashboards/ExpandWidgetDialog.jsx

@@ -1,18 +1,21 @@
-
 import React from 'react';
 import PropTypes from 'prop-types';
-import { get } from 'lodash';
 import Button from 'antd/lib/button';
 import Modal from 'antd/lib/modal';
 import { VisualizationRenderer } from '@/visualizations/VisualizationRenderer';
 import { wrap as wrapDialog, DialogPropType } from '@/components/DialogWrapper';
+import { VisualizationName } from '@/visualizations/VisualizationName';
 
 function ExpandWidgetDialog({ dialog, widget }) {
-  const visualizationName = get(widget, 'visualization.name');
   return (
     <Modal
       {...dialog.props}
-      title={visualizationName}
+      title={(
+        <React.Fragment>
+          <VisualizationName visualization={widget.visualization} />
+          <span>{widget.getQuery().name}</span>
+        </React.Fragment>
+      )}
       width={900}
       footer={(<Button onClick={dialog.dismiss}>Close</Button>)}
     >

client/app/lib/hooks/useQueryResult.js

@@ -1,11 +1,11 @@
 import { useState, useEffect } from 'react';
-import { isFunction } from 'lodash';
+import { invoke } from 'lodash';
 
 function getQueryResultData(queryResult) {
   return {
-    columns: (queryResult && isFunction(queryResult.getColumns) && queryResult.getColumns()) || [],
-    rows: (queryResult && isFunction(queryResult.getData) && queryResult.getData()) || [],
-    filters: (queryResult && isFunction(queryResult.getFilters) && queryResult.getFilters()) || [],
+    columns: invoke(queryResult, 'getColumns') || [],
+    rows: invoke(queryResult, 'getResult') || [],
+    filters: invoke(queryResult, 'getFilters') || [],
   };
 }