Migrate EmptyState component to React

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

@@ -0,0 +1,146 @@
+import { some, map } from 'lodash';
+import React from 'react';
+import PropTypes from 'prop-types';
+import { react2angular } from 'react2angular';
+import classNames from 'classnames';
+import { $uibModal } from '@/services/ng';
+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 getSteps({
+  showAlertStep,
+  showDashboardStep,
+  showInviteStep,
+}) {
+  return {
+    dataSource: {
+      show: true,
+      completed: organizationStatus.objectCounters.data_sources > 0,
+      render() {
+        return currentUser.isAdmin ?
+          (<span><a href="data_sources/new">Connect</a> a Data Source</span>) :
+          (<span>Ask an account admin to connect a data source.</span>);
+      },
+    },
+    query: {
+      show: true,
+      completed: organizationStatus.objectCounters.queries > 0,
+      render() {
+        return (<span><a href="queries/new">Create</a> your first Query</span>);
+      },
+    },
+    alert: {
+      show: showAlertStep,
+      completed: organizationStatus.objectCounters.alerts > 0,
+      render() {
+        return (<span><a href="alerts/new">Create</a> your first Alert</span>);
+      },
+    },
+    dashboard: {
+      show: showDashboardStep,
+      completed: organizationStatus.objectCounters.dashboards > 0,
+      render() {
+        return (<span><a onClick={createDashboard}>Create</a> your first Dashboard</span>);
+      },
+    },
+    inviteUsers: {
+      show: showInviteStep,
+      completed: organizationStatus.objectCounters.users > 1,
+      render() {
+        return (<span><a href="users/new">Invite</a> your team members</span>);
+      },
+    },
+  };
+}
+
+function renderStep(step, key) {
+  return step.show ? (
+    <li key={key} className={classNames({ done: step.completed })}>{step.render(step)}</li>
+  ) : null;
+}
+
+export function EmptyState({
+  icon,
+  title,
+  description,
+  illustration,
+  helpLink,
+  onboardingMode,
+  ...showSteps
+}) {
+  const steps = getSteps(showSteps);
+  const shouldShow = !onboardingMode || some(steps, { show: true, completed: false });
+
+  if (shouldShow) {
+    return (
+      <div className="empty-state bg-white tiled">
+        <div className="empty-state__summary">
+          {title && <h4>{title}</h4>}
+          {icon && <h2><i className={icon} /></h2>}
+          <p>{description}</p>
+
+          <img
+            src={'/static/images/illustrations/' + illustration + '.svg'}
+            alt={illustration + 'Illustration'}
+            width="75%"
+          />
+        </div>
+        <div className="empty-state__steps">
+          <h4>Let&apos;s get started</h4>
+          <ol>{map(steps, renderStep)}</ol>
+          <p>
+            Need more support?{' '}
+            <a href={helpLink} target="_blank" rel="noopener noreferrer">
+              See our Help
+              <i className="fa fa-external-link m-l-5" aria-hidden="true" />
+            </a>
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return null;
+}
+
+EmptyState.propTypes = {
+  icon: PropTypes.string,
+  title: PropTypes.string,
+  description: PropTypes.string,
+  illustration: PropTypes.string,
+  helpLink: PropTypes.string,
+
+  showAlertStep: PropTypes.bool,
+  showDashboardStep: PropTypes.bool,
+  showInviteStep: PropTypes.bool,
+  onboardingMode: PropTypes.bool,
+};
+
+EmptyState.defaultProps = {
+  icon: null,
+  title: null,
+  description: null,
+  illustration: null,
+  helpLink: null,
+
+  showAlertStep: false,
+  showDashboardStep: false,
+  showInviteStep: false,
+  onboardingMode: false,
+};
+
+export default function init(ngModule) {
+  ngModule.component('emptyState', react2angular(EmptyState));
+}
+
+init.init = true;

client/app/pages/alerts-list/alerts-list.html

@@ -1,12 +1,14 @@
 <div class="container">
   <page-header title="'Alerts'"></page-header>
 
-  <empty-state icon="fa fa-bell-o"
-               description="Get notified on certain events"
-               illustration="alert"
-               show-alert-step="true"
-               help-link="https://redash.io/help/user-guide/alerts/"
-               ng-if="$ctrl.showEmptyState"></empty-state>
+  <empty-state
+    ng-if="$ctrl.showEmptyState"
+    icon="'fa fa-bell-o'"
+    description="'Get notified on certain events'"
+    illustration="'alert'"
+    help-link="'https://redash.io/help/user-guide/alerts/'"
+    show-alert-step="true"
+  ></empty-state>
 
   <div class="bg-white tiled" ng-if="$ctrl.showList">
     <table class="table table-condensed table-hover table-data">

client/app/pages/dashboards/dashboard-list.html

@@ -38,8 +38,13 @@
 
     <div ng-if="$ctrl.loaded && $ctrl.showEmptyState" class="col-md-9 list-content">
       <div ng-if="($ctrl.currentPage == 'all') && ($ctrl.searchText.length == 0 || $ctrl.searchText === undefined)">
-        <empty-state icon="zmdi zmdi-view-quilt" description="See the big picture" show-dashboard-step="true" illustration="dashboard"
-          help-link="https://help.redash.io/category/22-dashboards"></empty-state>
+        <empty-state
+          icon="'zmdi zmdi-view-quilt'"
+          description="'See the big picture'"
+          illustration="'dashboard'"
+          help-link="'https://help.redash.io/category/22-dashboards'"
+          show-dashboard-step="true"
+        ></empty-state>
       </div>
 
       <big-message ng-if="($ctrl.currentPage == 'favorites') && ($ctrl.searchTerm === undefined || $ctrl.searchTerm.length == 0) && $ctrl.selectedTags.size === 0"

client/app/pages/home/home.html

@@ -2,8 +2,15 @@
   <div ng-if="!$ctrl.isEmailVerified" class="alert alert-warning">
       We have sent an email with a confirmation link to your email address. Please follow the link to verify your email address. <a ng-click="$ctrl.verifyEmail()">Resend email</a>.
   </div>
-  <empty-state title="Welcome to Redash 👋" description="Connect to any data source, easily visualize and share your data"
-    show-dashboard-step="true" show-invite-step="true" onboarding-mode="true" illustration="dashboard" help-link="https://redash.io/help/user-guide/getting-started"></empty-state>
+  <empty-state
+    title="'Welcome to Redash 👋'"
+    description="'Connect to any data source, easily visualize and share your data'"
+    illustration="'dashboard'"
+    help-link="'https://redash.io/help/user-guide/getting-started'"
+    show-dashboard-step="true"
+    show-invite-step="true"
+    onboarding-mode="true"
+  ></empty-state>
 
   <home-extra></home-extra>
 

client/app/pages/queries-list/queries-list.html

@@ -43,7 +43,12 @@
     <div ng-if="$ctrl.loaded && $ctrl.showEmptyState" class="col-md-9 list-content">
       <div ng-switch="$ctrl.emptyType">
         <div ng-switch-when="default">
-          <empty-state icon="fa fa-code" illustration="query" description="Getting the data from your datasources." help-link="https://help.redash.io/category/21-querying"></empty-state>
+          <empty-state
+            icon="'fa fa-code'"
+            illustration="'query'"
+            description="'Getting the data from your datasources.'"
+            help-link="'https://help.redash.io/category/21-querying'"
+          ></empty-state>
         </div>
 
         <div ng-switch-when="my" class="tiled bg-white p-15">