Migrate Data Sources and Alert Destinations pages to React

client/app/assets/less/ant.less

@@ -21,6 +21,8 @@
 @import '~antd/lib/grid/style/index';
 @import '~antd/lib/switch/style/index';
 @import '~antd/lib/drawer/style/index';
+@import '~antd/lib/card/style/index';
+@import '~antd/lib/steps/style/index';
 @import '~antd/lib/divider/style/index';
 @import '~antd/lib/dropdown/style/index';
 @import '~antd/lib/menu/style/index';

client/app/components/TypePicker.jsx

@@ -0,0 +1,85 @@
+import Card from 'antd/lib/card';
+import Input from 'antd/lib/input';
+import List from 'antd/lib/list';
+import { includes, isEmpty } from 'lodash';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Type } from './proptypes';
+import EmptyState from '@/components/items-list/components/EmptyState';
+
+const { Search } = Input;
+const { Meta } = Card;
+
+export default class TypePicker extends React.Component {
+  static propTypes = {
+    types: PropTypes.arrayOf(Type),
+  };
+
+  static defaultProps = {
+    types: [],
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = { searchText: '' };
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  renderListItem(item) {
+    const titleStyle = {
+      fontSize: '13px',
+      maxHeight: '50px',
+      whiteSpace: 'normal',
+      textOverflow: 'ellipsis',
+    };
+
+    return (
+      <List.Item>
+        <Card
+          bodyStyle={{ height: '80px', padding: '15px' }}
+          cover={(
+            <div className="m-t-10">
+              <img
+                alt={item.name}
+                style={{ margin: 'auto', width: '64px', height: '64px' }}
+                src={item.imgSrc}
+              />
+            </div>
+          )}
+          onClick={item.onClick}
+          hoverable
+        >
+          <Meta title={(<p style={titleStyle}>{item.name}</p>)} />
+        </Card>
+      </List.Item>
+    );
+  }
+
+  render() {
+    const { types } = this.props;
+    const { searchText } = this.state;
+
+    const filteredTypes = types.filter(type => isEmpty(searchText) ||
+      includes(type.name.toLowerCase(), searchText.toLowerCase()));
+
+    return (
+      <div className="text-center" data-test="TypePicker">
+        <Search
+          className="m-b-20"
+          placeholder="Search..."
+          onChange={e => this.setState({ searchText: e.target.value })}
+          style={{ maxWidth: 300 }}
+          autoFocus
+        />
+        {isEmpty(filteredTypes) ? (<EmptyState />) : (
+          <List
+            className="p-20"
+            grid={{ gutter: 12, xs: 1, sm: 3, lg: 4, xl: 6 }}
+            dataSource={filteredTypes}
+            renderItem={item => this.renderListItem(item)}
+          />
+        )}
+      </div>
+    );
+  }
+}

client/app/components/data-sources/EditDataSourceForm.jsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { DataSource } from '@/services/data-source';
+import DynamicForm from '@/components/dynamic-form/DynamicForm';
+import helper from '@/components/dynamic-form/dynamicFormHelper';
+
+const HELP_LINKS = {
+  athena: 'https://redash.io/help/data-sources/amazon-athena-setup',
+  bigquery: 'https://redash.io/help/data-sources/bigquery-setup',
+  url: 'https://redash.io/help/data-sources/querying-urls',
+  mongodb: 'https://redash.io/help/data-sources/mongodb-setup',
+  google_spreadsheets: 'https://redash.io/help/data-sources/querying-a-google-spreadsheet',
+  google_analytics: 'https://redash.io/help/data-sources/google-analytics-setup',
+  axibasetsd: 'https://redash.io/help/data-sources/axibase-time-series-database',
+  results: 'https://redash.io/help/user-guide/querying/query-results-data-source',
+};
+
+export default function EditDataSourceForm({ dataSource, type, onSuccess, ...props }) {
+  const selectedType = type.type;
+  const fields = helper.getFields(type.configuration_schema, dataSource);
+
+  const handleSubmit = (values, successCallback, errorCallback) => {
+    helper.updateTargetWithValues(dataSource, values);
+    dataSource.$save(
+      (data) => {
+        successCallback('Saved.');
+        onSuccess(data);
+      },
+      (error) => {
+        if (error.status === 400 && 'message' in error.data) {
+          errorCallback(error.data.message);
+        } else {
+          errorCallback('Failed saving.');
+        }
+      },
+    );
+  };
+
+  return (
+    <div data-test="DataSource">
+      <div className="col-sm-offset-4 col-sm-4 text-center">
+        <img src={`${DataSource.IMG_ROOT}/${selectedType}.png`} alt={type.name} width="64" />
+        <h3>{type.name}</h3>
+      </div>
+      <div className="col-sm-4">
+        {HELP_LINKS[selectedType] && (
+          <p className="needhelp text-right text-center-xs">
+            {/* eslint-disable-next-line react/jsx-no-target-blank */}
+            <a href={HELP_LINKS[selectedType]} target="_blank" rel="noopener">
+              Help <span className="hidden-xs">setting up {type.name}</span> <i className="fa fa-external-link" aria-hidden="true" />
+            </a>
+          </p>
+        )}
+      </div>
+      <div className="col-md-4 col-md-offset-4">
+        <DynamicForm {...props} fields={fields} onSubmit={handleSubmit} feedbackIcons />
+      </div>
+    </div>
+  );
+}
+
+EditDataSourceForm.propTypes = {
+  dataSource: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+  type: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+  onSuccess: PropTypes.func,
+};
+
+EditDataSourceForm.defaultProps = {
+  onSuccess: () => {},
+};

client/app/components/destinations/EditDestinationForm.jsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Destination } from '@/services/destination';
+import DynamicForm from '@/components/dynamic-form/DynamicForm';
+import helper from '@/components/dynamic-form/dynamicFormHelper';
+
+export default function EditDestinationForm({ destination, type, onSuccess, ...props }) {
+  const selectedType = type.type;
+  const fields = helper.getFields(type.configuration_schema, destination);
+
+  const handleSubmit = (values, successCallback, errorCallback) => {
+    helper.updateTargetWithValues(destination, values);
+    destination.$save(
+      (data) => {
+        successCallback('Saved.');
+        onSuccess(data);
+      },
+      (error) => {
+        if (error.status === 400 && 'message' in error.data) {
+          errorCallback(error.data.message);
+        } else {
+          errorCallback('Failed saving.');
+        }
+      },
+    );
+  };
+
+  return (
+    <div>
+      <div className="text-center">
+        <img src={`${Destination.IMG_ROOT}/${selectedType}.png`} alt={type.name} width="64" />
+        <h3>{type.name}</h3>
+      </div>
+      <div className="col-md-4 col-md-offset-4">
+        <DynamicForm {...props} fields={fields} onSubmit={handleSubmit} feedbackIcons />
+      </div>
+    </div>
+  );
+}
+
+EditDestinationForm.propTypes = {
+  destination: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+  type: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+  onSuccess: PropTypes.func,
+};
+
+EditDestinationForm.defaultProps = {
+  onSuccess: () => {},
+};

client/app/components/dynamic-form/DynamicForm.jsx

@@ -8,7 +8,6 @@ import Button from 'antd/lib/button';
 import Upload from 'antd/lib/upload';
 import Icon from 'antd/lib/icon';
 import { includes } from 'lodash';
-import { react2angular } from 'react2angular';
 import { toastr } from '@/services/ng';
 import { Field, Action, AntdForm } from '../proptypes';
 import helper from './dynamicFormHelper';
@@ -23,7 +22,7 @@ const fieldRules = ({ type, required, minLength }) => {
   ].filter(rule => rule);
 };
 
-export const DynamicForm = Form.create()(class DynamicForm extends React.Component {
+class DynamicForm extends React.Component {
   static propTypes = {
     fields: PropTypes.arrayOf(Field),
     actions: PropTypes.arrayOf(Action),
@@ -218,36 +217,6 @@ export const DynamicForm = Form.create()(class DynamicForm extends React.Compone
       </Form>
     );
   }
-});
-
-export default function init(ngModule) {
-  ngModule.component('dynamicForm', react2angular((props) => {
-    const fields = helper.getFields(props.type.configuration_schema, props.target);
-
-    const onSubmit = (values, onSuccess, onError) => {
-      helper.updateTargetWithValues(props.target, values);
-      props.target.$save(
-        () => {
-          onSuccess('Saved.');
-        },
-        (error) => {
-          if (error.status === 400 && 'message' in error.data) {
-            onError(error.data.message);
-          } else {
-            onError('Failed saving.');
-          }
-        },
-      );
-    };
-
-    const updatedProps = {
-      fields,
-      actions: props.target.id ? props.actions : [],
-      feedbackIcons: true,
-      onSubmit,
-    };
-    return (<DynamicForm {...updatedProps} />);
-  }, ['target', 'type', 'actions']));
 }
 
-init.init = true;
+export default Form.create()(DynamicForm);

client/app/components/proptypes.js

@@ -63,6 +63,13 @@ export const UserProfile = PropTypes.shape({
   isDisabled: PropTypes.bool,
 });
 
+export const Type = PropTypes.shape({
+  type: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  imgSrc: PropTypes.string.isRequired,
+  onClick: PropTypes.func,
+});
+
 function checkMoment(isRequired, props, propName, componentName) {
   const value = props[propName];
   const isRequiredValid = isRequired && (value !== null);

client/app/components/users/UserEdit.jsx

@@ -8,7 +8,7 @@ import { User } from '@/services/user';
 import { currentUser } from '@/services/auth';
 import { absoluteUrl } from '@/services/utils';
 import { UserProfile } from '../proptypes';
-import { DynamicForm } from '../dynamic-form/DynamicForm';
+import DynamicForm from '../dynamic-form/DynamicForm';
 import ChangePasswordDialog from './ChangePasswordDialog';
 import InputWithCopy from '../InputWithCopy';