Migrate Widget component to React

client/app/assets/less/inc/visualizations/misc.less

@@ -1,4 +1,4 @@
-visualization-renderer {
+.visualization-renderer {
   display: block;
 
   .pagination,

client/app/assets/less/inc/visualizations/pivot-table.less

@@ -1,3 +1,3 @@
-.pivot-table-renderer > table, grid-renderer > div, visualization-renderer > div {
+.pivot-table-renderer > table, grid-renderer > div, .visualization-renderer > div {
   overflow: auto;
 }

client/app/assets/less/redash/query.less

@@ -350,7 +350,7 @@ a.label-tag {
       border-bottom: 1px solid #efefef;
     }
 
-    .pivot-table-renderer > table, grid-renderer > div, visualization-renderer > div {
+    .pivot-table-renderer > table, grid-renderer > div, .visualization-renderer > div {
       overflow: visible;
     }
 

client/app/components/Parameters.jsx

@@ -113,10 +113,10 @@ export class Parameters extends React.Component {
     this.setState(({ parameters }) => {
       const parametersWithPendingValues = parameters.filter(p => p.hasPendingValue);
       forEach(parameters, p => p.applyPendingValue());
-      onValuesChange(parametersWithPendingValues);
       if (!disableUrlUpdate) {
         updateUrl(parameters);
       }
+      onValuesChange(parametersWithPendingValues);
       return { parameters };
     });
   };

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/Timer.jsx

@@ -1,5 +1,5 @@
+import React, { useMemo, useEffect } from 'react';
 import moment from 'moment';
-import { useMemo, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { react2angular } from 'react2angular';
 import { Moment } from '@/components/proptypes';
@@ -17,7 +17,7 @@ export function Timer({ from }) {
   const diff = moment.now() - startTime;
   const format = diff > 1000 * 60 * 60 ? 'HH:mm:ss' : 'mm:ss'; // no HH under an hour
 
-  return moment.utc(diff).format(format);
+  return (<span className="rd-timer">{moment.utc(diff).format(format)}</span>);
 }
 
 Timer.propTypes = {

client/app/components/dashboards/AutoHeightController.js

@@ -5,7 +5,7 @@ import { includes, reduce, some } from 'lodash';
 const WIDGET_SELECTOR = '[data-widgetid="{0}"]';
 const WIDGET_CONTENT_SELECTOR = [
   '.widget-header', // header
-  'visualization-renderer', // visualization
+  '.visualization-renderer', // visualization
   '.scrollbox .alert', // error state
   '.spinner-container', // loading state
   '.tile__bottom-control', // footer

client/app/components/dashboards/DashboardGrid.jsx

@@ -4,7 +4,7 @@ import { chain, cloneDeep, find } from 'lodash';
 import { react2angular } from 'react2angular';
 import cx from 'classnames';
 import { Responsive, WidthProvider } from 'react-grid-layout';
-import { DashboardWidget } from '@/components/dashboards/widget';
+import { VisualizationWidget, TextboxWidget, RestrictedWidget } from '@/components/dashboards/dashboard-widget';
 import { FiltersType } from '@/components/Filters';
 import cfg from '@/config/dashboard-grid-options';
 import AutoHeightController from './AutoHeightController';
@@ -41,16 +41,24 @@ class DashboardGrid extends React.Component {
     widgets: PropTypes.arrayOf(WidgetType).isRequired,
     filters: FiltersType,
     onBreakpointChange: PropTypes.func,
+    onRefreshWidget: PropTypes.func,
     onRemoveWidget: PropTypes.func,
     onLayoutChange: PropTypes.func,
+    onParameterMappingsChange: PropTypes.func,
+    // Force component update when widgets are refreshing.
+    // Remove this when Dashboard is migrated to React
+    refreshingWidgets: PropTypes.number, // eslint-disable-line react/no-unused-prop-types
   };
 
   static defaultProps = {
     isPublic: false,
     filters: [],
+    onRefreshWidget: () => {},
     onRemoveWidget: () => {},
     onLayoutChange: () => {},
     onBreakpointChange: () => {},
+    onParameterMappingsChange: () => {},
+    refreshingWidgets: 0,
   };
 
   static normalizeFrom(widget) {
@@ -168,7 +176,8 @@ class DashboardGrid extends React.Component {
 
   render() {
     const className = cx('dashboard-wrapper', this.props.isEditing ? 'editing-mode' : 'preview-mode');
-    const { onRemoveWidget, dashboard, widgets } = this.props;
+    const { onRefreshWidget, onRemoveWidget, onParameterMappingsChange,
+      filters, dashboard, isPublic, widgets } = this.props;
 
     return (
       <div className={className}>
@@ -186,23 +195,35 @@ class DashboardGrid extends React.Component {
           onBreakpointChange={this.onBreakpointChange}
           breakpoints={{ [MULTI]: cfg.mobileBreakPoint, [SINGLE]: 0 }}
         >
-          {widgets.map(widget => (
-            <div
-              key={widget.id}
-              data-grid={DashboardGrid.normalizeFrom(widget)}
-              data-widgetid={widget.id}
-              data-test={`WidgetId${widget.id}`}
-              className={cx('dashboard-widget-wrapper', { 'widget-auto-height-enabled': this.autoHeightCtrl.exists(widget.id) })}
-            >
-              <DashboardWidget
-                widget={widget}
-                dashboard={dashboard}
-                filters={this.props.filters}
-                deleted={() => onRemoveWidget(widget.id)}
-                public={this.props.isPublic}
-              />
-            </div>
-          ))}
+          {widgets.map((widget) => {
+            const widgetProps = {
+              widget,
+              filters,
+              isPublic,
+              canEdit: dashboard.canEdit(),
+              onDelete: () => onRemoveWidget(widget.id),
+            };
+            return (
+              <div
+                key={widget.id}
+                data-grid={DashboardGrid.normalizeFrom(widget)}
+                data-widgetid={widget.id}
+                data-test={`WidgetId${widget.id}`}
+                className={cx('dashboard-widget-wrapper', { 'widget-auto-height-enabled': this.autoHeightCtrl.exists(widget.id) })}
+              >
+                {widget.getType() === 'visualization' && (
+                  <VisualizationWidget
+                    {...widgetProps}
+                    dashboard={dashboard}
+                    onRefresh={() => onRefreshWidget(widget)}
+                    onParameterMappingsChange={onParameterMappingsChange}
+                  />
+                )}
+                {widget.getType() === 'textbox' && <TextboxWidget {...widgetProps} />}
+                {widget.getType() === 'restricted' && <RestrictedWidget widget={widget} />}
+              </div>
+            );
+          })}
         </ResponsiveGridLayout>
       </div>
     );

client/app/components/dashboards/ExpandedWidgetDialog.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+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 ExpandedWidgetDialog({ dialog, widget }) {
+  return (
+    <Modal
+      {...dialog.props}
+      title={(
+        <>
+          <VisualizationName visualization={widget.visualization} />
+          <span>{widget.getQuery().name}</span>
+        </>
+      )}
+      width="95%"
+      footer={(<Button onClick={dialog.dismiss}>Close</Button>)}
+    >
+      <VisualizationRenderer visualization={widget.visualization} queryResult={widget.getQueryResult()} />
+    </Modal>
+  );
+}
+
+ExpandedWidgetDialog.propTypes = {
+  dialog: DialogPropType.isRequired,
+  widget: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+};
+
+export default wrapDialog(ExpandedWidgetDialog);

client/app/components/dashboards/TextboxDialog.jsx

@@ -14,7 +14,6 @@ import './TextboxDialog.less';
 
 class TextboxDialog extends React.Component {
   static propTypes = {
-    dashboard: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
     dialog: DialogPropType.isRequired,
     onConfirm: PropTypes.func.isRequired,
     text: PropTypes.string,

client/app/components/dashboards/dashboard-grid.less

@@ -5,3 +5,32 @@
     }
   }
 }
+
+// react-grid-layout overrides
+.react-grid-item {
+
+  // placeholder color
+  &.react-grid-placeholder {
+    border-radius: 3px;
+    background-color: #E0E6EB;
+    opacity: 0.5;
+  }
+
+  // resize placeholder behind widget, the lib's default is above 🤷‍♂️
+  &.resizing {
+    z-index: 3;
+  }
+
+  // auto-height animation
+  &.cssTransforms:not(.resizing) {
+    transition-property: transform, height; // added ", height"
+  }
+
+  // resize handle size
+  & > .react-resizable-handle::after {
+    width: 11px;
+    height: 11px;
+    right: 5px;
+    bottom: 5px;
+  }
+}

client/app/components/dashboards/dashboard-widget/RestrictedWidget.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import Widget from './Widget';
+
+function RestrictedWidget(props) {
+  return (
+    <Widget {...props} className="d-flex justify-content-center align-items-center widget-restricted">
+      <div className="t-body scrollbox">
+        <div className="text-center">
+          <h1><span className="zmdi zmdi-lock" /></h1>
+          <p className="text-muted">
+            {'This widget requires access to a data source you don\'t have access to.'}
+          </p>
+        </div>
+      </div>
+    </Widget>
+  );
+}
+
+export default RestrictedWidget;

client/app/components/dashboards/dashboard-widget/TextboxWidget.jsx

@@ -0,0 +1,50 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { markdown } from 'markdown';
+import Menu from 'antd/lib/menu';
+import HtmlContent from '@/components/HtmlContent';
+import TextboxDialog from '@/components/dashboards/TextboxDialog';
+import Widget from './Widget';
+
+function TextboxWidget(props) {
+  const { widget, canEdit } = props;
+  const [text, setText] = useState(widget.text);
+
+  const editTextBox = () => {
+    TextboxDialog.showModal({
+      text: widget.text,
+      onConfirm: (newText) => {
+        widget.text = newText;
+        setText(newText);
+        return widget.save();
+      },
+    });
+  };
+
+  const TextboxMenuOptions = [
+    <Menu.Item key="edit" onClick={editTextBox}>Edit</Menu.Item>,
+  ];
+
+  if (!widget.width) {
+    return null;
+  }
+
+  return (
+    <Widget {...props} menuOptions={canEdit ? TextboxMenuOptions : null} className="widget-text">
+      <HtmlContent className="body-row-auto scrollbox tiled t-body p-15 markdown">
+        {markdown.toHTML(text || '')}
+      </HtmlContent>
+    </Widget>
+  );
+}
+
+TextboxWidget.propTypes = {
+  widget: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+  canEdit: PropTypes.bool,
+};
+
+TextboxWidget.defaultProps = {
+  canEdit: false,
+};
+
+export default TextboxWidget;