Migrate Home to React

client/app/assets/less/inc/base.less

@@ -85,23 +85,23 @@ strong {
 
 // Fixed width layout for specific pages
 @media (min-width: 768px) {
-    .settings-screen, home-page, page-dashboard-list, page-queries-list, page-alerts-list, alert-page, queries-search-results-page, .fixed-container {
+    .settings-screen, .home-page, page-dashboard-list, page-queries-list, page-alerts-list, alert-page, queries-search-results-page, .fixed-container {
         .container {
             width: 750px;
         }
     }
 }
 
 @media (min-width: 992px) {
-    .settings-screen, home-page, page-dashboard-list, page-queries-list, page-alerts-list, alert-page, queries-search-results-page, .fixed-container {
+    .settings-screen, .home-page, page-dashboard-list, page-queries-list, page-alerts-list, alert-page, queries-search-results-page, .fixed-container {
         .container {
             width: 970px;
         }
     }
 }
 
 @media (min-width: 1200px) {
-    .settings-screen, home-page, page-dashboard-list, page-queries-list, page-alerts-list, alert-page, queries-search-results-page, .fixed-container {
+    .settings-screen, .home-page, page-dashboard-list, page-queries-list, page-alerts-list, alert-page, queries-search-results-page, .fixed-container {
         .container {
             width: 1170px;
         }

client/app/components/BeaconConsent.jsx

@@ -1,5 +1,4 @@
 import React, { useState } from 'react';
-import { react2angular } from 'react2angular';
 import Card from 'antd/lib/card';
 import Button from 'antd/lib/button';
 import Typography from 'antd/lib/typography';
@@ -10,7 +9,7 @@ import OrgSettings from '@/services/organizationSettings';
 
 const Text = Typography.Text;
 
-export function BeaconConsent() {
+function BeaconConsent() {
   const [hide, setHide] = useState(false);
 
   if (!clientConfig.showBeaconConsentMessage || hide) {
@@ -76,8 +75,4 @@ export function BeaconConsent() {
   );
 }
 
-export default function init(ngModule) {
-  ngModule.component('beaconConsent', react2angular(BeaconConsent));
-}
-
-init.init = true;
+export default BeaconConsent;

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

@@ -1,7 +1,6 @@
 import { keys, some } from 'lodash';
 import React from 'react';
 import PropTypes from 'prop-types';
-import { react2angular } from 'react2angular';
 import classNames from 'classnames';
 import CreateDashboardDialog from '@/components/dashboards/CreateDashboardDialog';
 import { currentUser } from '@/services/auth';
@@ -38,7 +37,7 @@ Step.defaultProps = {
   onClick: null,
 };
 
-export function EmptyState({
+function EmptyState({
   icon,
   header,
   description,
@@ -169,8 +168,4 @@ EmptyState.defaultProps = {
   showInviteStep: false,
 };
 
-export default function init(ngModule) {
-  ngModule.component('emptyState', react2angular(EmptyState));
-}
-
-init.init = true;
+export default EmptyState;

client/app/pages/alerts/AlertsList.jsx

@@ -4,7 +4,7 @@ import { react2angular } from 'react2angular';
 import { toUpper } from 'lodash';
 import { PageHeader } from '@/components/PageHeader';
 import { Paginator } from '@/components/Paginator';
-import { EmptyState } from '@/components/empty-state/EmptyState';
+import EmptyState from '@/components/empty-state/EmptyState';
 
 import { wrap as liveItemsList, ControllerType } from '@/components/items-list/ItemsList';
 import { ResourceItemsSource } from '@/components/items-list/classes/ItemsSource';

client/app/pages/dashboards/DashboardListEmptyState.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { BigMessage } from '@/components/BigMessage';
 import { NoTaggedObjectsFound } from '@/components/NoTaggedObjectsFound';
-import { EmptyState } from '@/components/empty-state/EmptyState';
+import EmptyState from '@/components/empty-state/EmptyState';
 
 export default function DashboardListEmptyState({ page, searchTerm, selectedTags }) {
   if (searchTerm !== '') {

client/app/pages/home/Home.jsx

@@ -0,0 +1,184 @@
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import { includes, isEmpty } from 'lodash';
+import { react2angular } from 'react2angular';
+import Alert from 'antd/lib/alert';
+import Icon from 'antd/lib/icon';
+import EmptyState from '@/components/empty-state/EmptyState';
+import DynamicComponent from '@/components/DynamicComponent';
+import BeaconConsent from '@/components/BeaconConsent';
+import recordEvent from '@/services/recordEvent';
+import { messages } from '@/services/auth';
+import { $http } from '@/services/ng';
+import notification from '@/services/notification';
+import { Dashboard } from '@/services/dashboard';
+import { Query } from '@/services/query';
+
+function DeprecatedEmbedFeatureAlert() {
+  return (
+    <Alert
+      className="m-b-15"
+      type="warning"
+      message={(
+        <>
+          You have enabled <code>ALLOW_PARAMETERS_IN_EMBEDS</code>. This setting is
+          now deprecated and should be turned off. Parameters in embeds are supported
+          by default.{' '}
+          <a
+            href="https://discuss.redash.io/t/support-for-parameters-in-embedded-visualizations/3337"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Read more
+          </a>.
+        </>
+      )}
+    />
+  );
+}
+
+function EmailNotVerifiedAlert() {
+  const verifyEmail = () => {
+    $http.post('verification_email').then(({ data }) => {
+      notification.success(data.message);
+    });
+  };
+
+  return (
+    <Alert
+      className="m-b-15"
+      type="warning"
+      message={(
+        <>
+          We have sent an email with a confirmation link to your email address. Please
+          follow the link to verify your email address.{' '}
+          <a className="clickable" onClick={verifyEmail}>Resend email</a>.
+        </>
+      )}
+    />
+  );
+}
+
+function FavoriteList({ title, resource, itemUrl, emptyState }) {
+  const [items, setItems] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    setLoading(true);
+    resource.favorites().$promise
+      .then(({ results }) => setItems(results))
+      .finally(() => setLoading(false));
+  }, []);
+
+  return (
+    <>
+      <div className="d-flex align-items-center m-b-20">
+        <p className="flex-fill f-500 c-black m-0">{title}</p>
+        {loading && <Icon type="loading" />}
+      </div>
+      {!isEmpty(items) && (
+        <div className="list-group">
+          {items.map(item => (
+            <a key={itemUrl(item)} className="list-group-item" href={itemUrl(item)}>
+              <span className="btn-favourite m-r-5">
+                <i className="fa fa-star" aria-hidden="true" />
+              </span>
+              {item.name}
+              {item.is_draft && <span className="label label-default m-l-5">Unpublished</span>}
+            </a>
+          ))}
+        </div>
+      )}
+      {(isEmpty(items) && !loading) && emptyState}
+    </>
+  );
+}
+
+FavoriteList.propTypes = {
+  title: PropTypes.string.isRequired,
+  resource: PropTypes.func.isRequired, // eslint-disable-line react/forbid-prop-types
+  itemUrl: PropTypes.func.isRequired,
+  emptyState: PropTypes.node,
+};
+FavoriteList.defaultProps = { emptyState: null };
+
+function DashboardAndQueryFavoritesList() {
+  return (
+    <div className="tile">
+      <div className="t-body tb-padding">
+        <div className="row">
+          <div className="col-sm-6">
+            <FavoriteList
+              title="Favorite Dashboards"
+              resource={Dashboard}
+              itemUrl={dashboard => `dashboard/${dashboard.slug}`}
+              emptyState={(
+                <p>
+                  <span className="btn-favourite m-r-5">
+                    <i className="fa fa-star" aria-hidden="true" />
+                  </span>
+                  Favorite <a href="dashboards">Dashboards</a> will appear here
+                </p>
+              )}
+            />
+          </div>
+          <div className="col-sm-6">
+            <FavoriteList
+              title="Favorite Queries"
+              resource={Query}
+              itemUrl={query => `queries/${query.id}`}
+              emptyState={(
+                <p>
+                  <span className="btn-favourite m-r-5">
+                    <i className="fa fa-star" aria-hidden="true" />
+                  </span>
+                  Favorite <a href="queries">Queries</a> will appear here
+                </p>
+              )}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Home() {
+  useEffect(() => {
+    recordEvent('view', 'page', 'personal_homepage');
+  }, []);
+
+  return (
+    <div className="home-page">
+      <div className="container">
+        {includes(messages, 'using-deprecated-embed-feature') && <DeprecatedEmbedFeatureAlert />}
+        {includes(messages, 'email-not-verified') && <EmailNotVerifiedAlert />}
+        <EmptyState
+          header="Welcome to Redash 👋"
+          description="Connect to any data source, easily visualize and share your data"
+          illustration="dashboard"
+          helpLink="https://redash.io/help/user-guide/getting-started"
+          showDashboardStep
+          showInviteStep
+          onboardingMode
+        />
+        <DynamicComponent name="HomeExtra" />
+        <DashboardAndQueryFavoritesList />
+        <BeaconConsent />
+      </div>
+    </div>
+  );
+}
+
+export default function init(ngModule) {
+  ngModule.component('homePage', react2angular(Home));
+
+  return {
+    '/': {
+      template: '<home-page></home-page>',
+      title: 'Redash',
+    },
+  };
+}
+
+init.init = true;