From 2fc5567c0482403ee2584938f636cef6aead7e36 Mon Sep 17 00:00:00 2001
From: Gabriel Dutra <nesk.frz@gmail.com>
Date: Wed, 20 Nov 2019 17:12:53 -0300
Subject: [PATCH 1/4] Migrate Home to React

---
 client/app/assets/less/inc/base.less |   6 +-
 client/app/pages/home/Home.jsx       | 171 +++++++++++++++++++++++++++
 client/app/pages/home/home.html      |  95 ---------------
 client/app/pages/home/index.js       |  42 -------
 4 files changed, 174 insertions(+), 140 deletions(-)
 create mode 100644 client/app/pages/home/Home.jsx
 delete mode 100644 client/app/pages/home/home.html
 delete mode 100644 client/app/pages/home/index.js

diff --git a/client/app/assets/less/inc/base.less b/client/app/assets/less/inc/base.less
index 2a4ce12699..b9e3cda7ea 100755
--- a/client/app/assets/less/inc/base.less
+++ b/client/app/assets/less/inc/base.less
@@ -85,7 +85,7 @@ 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;
         }
@@ -93,7 +93,7 @@ strong {
 }
 
 @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;
         }
@@ -101,7 +101,7 @@ strong {
 }
 
 @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;
         }
diff --git a/client/app/pages/home/Home.jsx b/client/app/pages/home/Home.jsx
new file mode 100644
index 0000000000..71d35348c4
--- /dev/null
+++ b/client/app/pages/home/Home.jsx
@@ -0,0 +1,171 @@
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import { includes, isEmpty } from 'lodash';
+import { react2angular } from 'react2angular';
+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 (
+    <div className="alert alert-warning">
+      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>.
+    </div>
+  );
+}
+
+function EmailNotVerifiedAlert() {
+  const verifyEmail = () => {
+    $http.post('verification_email').then(({ data }) => {
+      notification.success(data.message);
+    });
+  };
+
+  return (
+    <div className="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 className="clickable" onClick={verifyEmail}>Resend email</a>.
+    </div>
+  );
+}
+
+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">
+                    <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;
diff --git a/client/app/pages/home/home.html b/client/app/pages/home/home.html
deleted file mode 100644
index bd90f3e258..0000000000
--- a/client/app/pages/home/home.html
+++ /dev/null
@@ -1,95 +0,0 @@
-<div class="container">
-  <div
-    ng-if="$ctrl.messages.includes('using-deprecated-embed-feature')"
-    class="alert alert-warning"
-  >
-    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"
-      >Read more</a
-    >.
-  </div>
-  <div
-    ng-if="$ctrl.messages.includes('email-not-verified')"
-    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
-    header="'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>
-
-  <div class="tile">
-    <div class="t-body tb-padding">
-      <div class="row">
-        <div class="col-sm-6">
-          <p class="f-500 m-b-20 c-black">Favorite Dashboards</p>
-
-          <p ng-if="$ctrl.noDashboards">
-            <span class="btn-favourite">
-              <i class="fa fa-star" aria-hidden="true"></i>
-            </span>
-            Favorite <a href="dashboards">Dashboards</a> will appear here
-          </p>
-
-          <div class="list-group">
-            <a
-              ng-href="dashboard/{{ dashboard.slug }}"
-              class="list-group-item"
-              ng-repeat="dashboard in $ctrl.favoriteDashboards"
-              ng-if="dashboard.is_favorite"
-            >
-              <span class="btn-favourite">
-                <i class="fa fa-star" aria-hidden="true"></i>
-              </span>
-              {{ dashboard.name }}
-              <span class="label label-default" ng-if="dashboard.is_draft"
-                >Unpublished</span
-              >
-            </a>
-          </div>
-        </div>
-
-        <div class="col-sm-6">
-          <p class="f-500 m-b-20 c-black">Favorite Queries</p>
-          <p ng-if="$ctrl.noQueries">
-            <span class="btn-favourite">
-              <i class="fa fa-star" aria-hidden="true"></i>
-            </span>
-            Favorite <a href="queries">Queries</a> will appear here
-          </p>
-          <div class="list-group">
-            <a
-              ng-href="queries/{{ query.id }}"
-              class="list-group-item"
-              ng-repeat="query in $ctrl.favoriteQueries"
-              ng-if="query.is_favorite"
-            >
-              <span class="btn-favourite">
-                <i class="fa fa-star" aria-hidden="true"></i>
-              </span>
-              {{ query.name }}
-              <span class="label label-default" ng-if="query.is_draft"
-                >Unpublished</span
-              >
-            </a>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <beacon-consent></beacon-consent>
-</div>
diff --git a/client/app/pages/home/index.js b/client/app/pages/home/index.js
deleted file mode 100644
index f9715d8a15..0000000000
--- a/client/app/pages/home/index.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import template from './home.html';
-import notification from '@/services/notification';
-
-function HomeCtrl(Events, Dashboard, Query, $http, messages) {
-  Events.record('view', 'page', 'personal_homepage');
-
-  this.noDashboards = false;
-  this.noQueries = false;
-
-  this.messages = messages;
-
-  Dashboard.favorites().$promise.then((data) => {
-    this.favoriteDashboards = data.results;
-    this.noDashboards = data.results.length === 0;
-  });
-  Query.favorites().$promise.then((data) => {
-    this.favoriteQueries = data.results;
-    this.noQueries = data.results.length === 0;
-  });
-
-  this.verifyEmail = () => {
-    $http.post('verification_email/').success(({ message }) => {
-      notification.success(message);
-    });
-  };
-}
-
-export default function init(ngModule) {
-  ngModule.component('homePage', {
-    template,
-    controller: HomeCtrl,
-  });
-
-  return {
-    '/': {
-      template: '<home-page></home-page>',
-      title: 'Redash',
-    },
-  };
-}
-
-init.init = true;

From e14b1ac988f02c0d4109a7c410b55f3fe6ff23b2 Mon Sep 17 00:00:00 2001
From: Gabriel Dutra <nesk.frz@gmail.com>
Date: Wed, 20 Nov 2019 17:17:18 -0300
Subject: [PATCH 2/4] Angular cleanup

---
 client/app/components/BeaconConsent.jsx                 | 9 ++-------
 client/app/components/empty-state/EmptyState.jsx        | 9 ++-------
 client/app/pages/alerts/AlertsList.jsx                  | 2 +-
 client/app/pages/dashboards/DashboardListEmptyState.jsx | 2 +-
 client/app/pages/home/Home.jsx                          | 4 ++--
 client/app/pages/queries-list/QueriesListEmptyState.jsx | 2 +-
 6 files changed, 9 insertions(+), 19 deletions(-)

diff --git a/client/app/components/BeaconConsent.jsx b/client/app/components/BeaconConsent.jsx
index 665ffe0c30..5756d36d28 100644
--- a/client/app/components/BeaconConsent.jsx
+++ b/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;
diff --git a/client/app/components/empty-state/EmptyState.jsx b/client/app/components/empty-state/EmptyState.jsx
index 8494595a25..0de80fca64 100644
--- a/client/app/components/empty-state/EmptyState.jsx
+++ b/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;
diff --git a/client/app/pages/alerts/AlertsList.jsx b/client/app/pages/alerts/AlertsList.jsx
index 34fef9ebc7..e7ecabfc7d 100644
--- a/client/app/pages/alerts/AlertsList.jsx
+++ b/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';
diff --git a/client/app/pages/dashboards/DashboardListEmptyState.jsx b/client/app/pages/dashboards/DashboardListEmptyState.jsx
index 810335ffe5..d0dcf99c12 100644
--- a/client/app/pages/dashboards/DashboardListEmptyState.jsx
+++ b/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 !== '') {
diff --git a/client/app/pages/home/Home.jsx b/client/app/pages/home/Home.jsx
index 71d35348c4..fb3605071c 100644
--- a/client/app/pages/home/Home.jsx
+++ b/client/app/pages/home/Home.jsx
@@ -3,9 +3,9 @@ import PropTypes from 'prop-types';
 import { includes, isEmpty } from 'lodash';
 import { react2angular } from 'react2angular';
 import Icon from 'antd/lib/icon';
-import { EmptyState } from '@/components/empty-state/EmptyState';
+import EmptyState from '@/components/empty-state/EmptyState';
 import DynamicComponent from '@/components/DynamicComponent';
-import { BeaconConsent } from '@/components/BeaconConsent';
+import BeaconConsent from '@/components/BeaconConsent';
 import recordEvent from '@/services/recordEvent';
 import { messages } from '@/services/auth';
 import { $http } from '@/services/ng';
diff --git a/client/app/pages/queries-list/QueriesListEmptyState.jsx b/client/app/pages/queries-list/QueriesListEmptyState.jsx
index e499de7c9b..392c3dd90c 100644
--- a/client/app/pages/queries-list/QueriesListEmptyState.jsx
+++ b/client/app/pages/queries-list/QueriesListEmptyState.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 QueriesListEmptyState({ page, searchTerm, selectedTags }) {
   if (searchTerm !== '') {

From dff9d09b9a97cce225d01c6b838a8950215cd4c8 Mon Sep 17 00:00:00 2001
From: Gabriel Dutra <nesk.frz@gmail.com>
Date: Wed, 20 Nov 2019 17:32:53 -0300
Subject: [PATCH 3/4] Use Antd Alert

---
 client/app/pages/home/Home.jsx | 47 ++++++++++++++++++++++------------
 1 file changed, 30 insertions(+), 17 deletions(-)

diff --git a/client/app/pages/home/Home.jsx b/client/app/pages/home/Home.jsx
index fb3605071c..8555a4ecad 100644
--- a/client/app/pages/home/Home.jsx
+++ b/client/app/pages/home/Home.jsx
@@ -2,6 +2,7 @@ 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';
@@ -15,18 +16,24 @@ import { Query } from '@/services/query';
 
 function DeprecatedEmbedFeatureAlert() {
   return (
-    <div className="alert alert-warning">
-      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>.
-    </div>
+    <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>.
+        </>
+      )}
+    />
   );
 }
 
@@ -38,11 +45,17 @@ function EmailNotVerifiedAlert() {
   };
 
   return (
-    <div className="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 className="clickable" onClick={verifyEmail}>Resend email</a>.
-    </div>
+    <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>.
+        </>
+      )}
+    />
   );
 }
 

From 2e4d2ebe7c8b0ba092b91dc8be868ef3f77f404f Mon Sep 17 00:00:00 2001
From: Gabriel Dutra <nesk.frz@gmail.com>
Date: Sun, 24 Nov 2019 13:18:31 -0300
Subject: [PATCH 4/4] Add missing margin

---
 client/app/pages/home/Home.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/app/pages/home/Home.jsx b/client/app/pages/home/Home.jsx
index 8555a4ecad..907ba24d03 100644
--- a/client/app/pages/home/Home.jsx
+++ b/client/app/pages/home/Home.jsx
@@ -114,7 +114,7 @@ function DashboardAndQueryFavoritesList() {
               itemUrl={dashboard => `dashboard/${dashboard.slug}`}
               emptyState={(
                 <p>
-                  <span className="btn-favourite">
+                  <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