[Feature] Migrate CreateDashboardDialog to React (#3826)

client/app/assets/less/ant.less

@@ -33,6 +33,7 @@
 @import "~antd/lib/spin/style/index";
 @import "~antd/lib/tabs/style/index";
 @import "~antd/lib/notification/style/index";
+@import "~antd/lib/progress/style/index";
 @import 'inc/ant-variables';
 
 // Increase z-indexes to avoid conflicts with some other libraries (e.g. Plotly)

client/app/components/DynamicComponent.jsx

@@ -43,7 +43,7 @@ export default class DynamicComponent extends React.Component {
     const { name, children, ...props } = this.props;
     const RealComponent = componentsRegistry.get(name);
     if (!RealComponent) {
-      return null;
+      return children;
     }
     return <RealComponent {...props}>{children}</RealComponent>;
   }

client/app/components/app-header/index.js

@@ -1,4 +1,5 @@
 import debug from 'debug';
+import CreateDashboardDialog from '@/components/dashboards/CreateDashboardDialog';
 
 import logoUrl from '@/assets/images/redash_icon_small.png';
 import frontendVersion from '@/version.json';
@@ -35,14 +36,7 @@ function controller($rootScope, $location, $route, $uibModal, Auth, currentUser,
 
   $rootScope.$on('reloadFavorites', this.reload);
 
-  this.newDashboard = () => {
-    $uibModal.open({
-      component: 'editDashboardDialog',
-      resolve: {
-        dashboard: () => ({ name: null, layout: null }),
-      },
-    });
-  };
+  this.newDashboard = () => CreateDashboardDialog.showModal();
 
   this.searchQueries = () => {
     $location.path('/queries').search({ q: this.searchTerm });

client/app/components/dashboards/CreateDashboardDialog.jsx

@@ -0,0 +1,88 @@
+import { trim } from 'lodash';
+import React, { useRef, useState, useEffect } from 'react';
+import Modal from 'antd/lib/modal';
+import Input from 'antd/lib/input';
+import DynamicComponent from '@/components/DynamicComponent';
+import { wrap as wrapDialog, DialogPropType } from '@/components/DialogWrapper';
+import { $location, $http } from '@/services/ng';
+import recordEvent from '@/services/recordEvent';
+import { policy } from '@/services/policy';
+
+function CreateDashboardDialog({ dialog }) {
+  const [name, setName] = useState('');
+  const [isValid, setIsValid] = useState(false);
+  const [saveInProgress, setSaveInProgress] = useState(false);
+  const inputRef = useRef();
+  const isCreateDashboardEnabled = policy.isCreateDashboardEnabled();
+
+  // ANGULAR_REMOVE_ME Replace all this with `autoFocus` attribute (it does not work
+  // if dialog is opened from Angular code, but works fine if open dialog from React code)
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      if (inputRef.current) {
+        inputRef.current.focus();
+      }
+    }, 100);
+    return () => clearTimeout(timer);
+  }, []);
+
+  function handleNameChange(event) {
+    const value = trim(event.target.value);
+    setName(value);
+    setIsValid(value !== '');
+  }
+
+  function save() {
+    if (name !== '') {
+      setSaveInProgress(true);
+
+      $http.post('api/dashboards', { name })
+        .then(({ data }) => {
+          dialog.close();
+          $location.path(`/dashboard/${data.slug}`).search('edit').replace();
+        });
+      recordEvent('create', 'dashboard');
+    }
+  }
+
+  return (
+    <Modal
+      {...dialog.props}
+      {...(isCreateDashboardEnabled ? {} : { footer: null })}
+      title="New Dashboard"
+      okText="Save"
+      cancelText="Close"
+      okButtonProps={{
+        disabled: !isValid || saveInProgress,
+        loading: saveInProgress,
+        'data-test': 'DashboardSaveButton',
+      }}
+      cancelButtonProps={{
+        disabled: saveInProgress,
+      }}
+      onOk={save}
+      closable={!saveInProgress}
+      maskClosable={!saveInProgress}
+      wrapProps={{
+        'data-test': 'CreateDashboardDialog',
+      }}
+    >
+      <DynamicComponent name="CreateDashboardDialogExtra" disabled={!isCreateDashboardEnabled}>
+        <Input
+          ref={inputRef}
+          defaultValue={name}
+          onChange={handleNameChange}
+          onPressEnter={save}
+          placeholder="Dashboard Name"
+          disabled={saveInProgress}
+        />
+      </DynamicComponent>
+    </Modal>
+  );
+}
+
+CreateDashboardDialog.propTypes = {
+  dialog: DialogPropType.isRequired,
+};
+
+export default wrapDialog(CreateDashboardDialog);

client/app/components/empty-state/EmptyState.jsx

@@ -3,20 +3,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { react2angular } from 'react2angular';
 import classNames from 'classnames';
-import { $uibModal } from '@/services/ng';
+import CreateDashboardDialog from '@/components/dashboards/CreateDashboardDialog';
 import { currentUser } from '@/services/auth';
 import organizationStatus from '@/services/organizationStatus';
 import './empty-state.less';
 
-function createDashboard() {
-  $uibModal.open({
-    component: 'editDashboardDialog',
-    resolve: {
-      dashboard: () => ({ name: null, layout: null }),
-    },
-  });
-}
-
 function Step({ show, completed, text, url, urlText, onClick }) {
   if (!show) {
     return null;
@@ -131,7 +122,7 @@ export function EmptyState({
           <Step
             show={isAvailable.dashboard}
             completed={isCompleted.dashboard}
-            onClick={createDashboard}
+            onClick={() => CreateDashboardDialog.showModal()}
             urlText="Create"
             text="your first Dashboard"
           />

client/app/pages/data-sources/DataSourcesList.jsx

@@ -11,6 +11,7 @@ import { routesToAngularRoutes } from '@/lib/utils';
 import CardsList from '@/components/cards-list/CardsList';
 import LoadingState from '@/components/items-list/components/LoadingState';
 import CreateSourceDialog from '@/components/CreateSourceDialog';
+import DynamicComponent from '@/components/DynamicComponent';
 import helper from '@/components/dynamic-form/dynamicFormHelper';
 import recordEvent from '@/services/recordEvent';
 
@@ -105,6 +106,7 @@ class DataSourcesList extends React.Component {
             <i className="fa fa-plus m-r-5" />
             New Data Source
           </Button>
+          <DynamicComponent name="DataSourcesListExtra" />
         </div>
         {this.state.loading ? <LoadingState className="" /> : this.renderDataSources()}
       </div>

client/cypress/integration/dashboard/dashboard_spec.js

@@ -68,7 +68,7 @@ describe('Dashboard', () => {
     cy.server();
     cy.route('POST', 'api/dashboards').as('NewDashboard');
 
-    cy.getByTestId('EditDashboardDialog').within(() => {
+    cy.getByTestId('CreateDashboardDialog').within(() => {
       cy.getByTestId('DashboardSaveButton').should('be.disabled');
       cy.get('input').type('Foo Bar');
       cy.getByTestId('DashboardSaveButton').click();