From c2c722e12e5753fc21f93a3053b97bef705362e5 Mon Sep 17 00:00:00 2001
From: Levko Kravets <levko.ne@gmail.com>
Date: Wed, 23 Jan 2019 20:10:52 +0200
Subject: [PATCH] Migrate PageHeader component to React (#3324)

* Migrate PageHeader component to React

* CR1
---
 .../assets/less/redash/redash-newstyle.less   |  2 +-
 client/app/components/PageHeader.jsx          | 23 +++++++++++++++++++
 client/app/components/page-header/index.js    | 16 -------------
 .../components/page-header/page-header.html   |  9 --------
 client/app/components/settings-screen.html    |  3 +--
 .../outdated-queries/outdated-queries.html    |  3 +--
 client/app/pages/admin/status/status.html     |  5 ++--
 client/app/pages/admin/tasks/tasks.html       |  3 +--
 client/app/pages/alert/alert.html             |  4 +---
 client/app/pages/alerts-list/alerts-list.html |  2 +-
 .../app/pages/dashboards/dashboard-list.html  |  3 +--
 .../dashboards/public-dashboard-page.html     |  3 +--
 .../app/pages/queries-list/queries-list.html  |  2 +-
 13 files changed, 34 insertions(+), 44 deletions(-)
 create mode 100644 client/app/components/PageHeader.jsx
 delete mode 100644 client/app/components/page-header/index.js
 delete mode 100644 client/app/components/page-header/page-header.html

diff --git a/client/app/assets/less/redash/redash-newstyle.less b/client/app/assets/less/redash/redash-newstyle.less
index 711d546f38..efb824d138 100644
--- a/client/app/assets/less/redash/redash-newstyle.less
+++ b/client/app/assets/less/redash/redash-newstyle.less
@@ -370,7 +370,7 @@ body {
   padding: 20px;
 }
 
-page-header, .page-header--new {
+.page-header-wrapper, .page-header--new {
   h3 {
     margin: 0.2em 0;
     line-height: 1.3;
diff --git a/client/app/components/PageHeader.jsx b/client/app/components/PageHeader.jsx
new file mode 100644
index 0000000000..748f8f7e91
--- /dev/null
+++ b/client/app/components/PageHeader.jsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { react2angular } from 'react2angular';
+
+export function PageHeader({ title }) {
+  return (
+    <div className="page-header-wrapper row p-l-15 p-r-15 m-b-10 m-l-0 m-r-0">
+      <div className="col-sm-9 p-l-0 p-r-0">
+        <h3>{ title }</h3>
+      </div>
+    </div>
+  );
+}
+
+PageHeader.propTypes = {
+  title: PropTypes.string.isRequired,
+};
+
+export default function init(ngModule) {
+  ngModule.component('pageHeader', react2angular(PageHeader));
+}
+
+init.init = true;
diff --git a/client/app/components/page-header/index.js b/client/app/components/page-header/index.js
deleted file mode 100644
index 149c72943e..0000000000
--- a/client/app/components/page-header/index.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import template from './page-header.html';
-
-function controller() {}
-
-export default function init(ngModule) {
-  ngModule.component('pageHeader', {
-    template,
-    controller,
-    transclude: true,
-    bindings: {
-      title: '@',
-    },
-  });
-}
-
-init.init = true;
diff --git a/client/app/components/page-header/page-header.html b/client/app/components/page-header/page-header.html
deleted file mode 100644
index 056ca2558d..0000000000
--- a/client/app/components/page-header/page-header.html
+++ /dev/null
@@ -1,9 +0,0 @@
-<div class="row p-l-15 p-r-15 m-b-10 m-l-0 m-r-0">
-  <div class="col-sm-9 p-l-0 p-r-0">
-    <h3>{{$ctrl.title}}</h3>
-  </div>
-  <div class="col-sm-3 text-right">
-    <h3 ng-transclude>
-    </h3>
-  </div>
-</div>
diff --git a/client/app/components/settings-screen.html b/client/app/components/settings-screen.html
index 809867f1fd..fb0510dc5e 100644
--- a/client/app/components/settings-screen.html
+++ b/client/app/components/settings-screen.html
@@ -1,6 +1,5 @@
 <div class="container">
-  <page-header title="Settings">
-  </page-header>
+  <page-header title="'Settings'"></page-header>
 
   <div class="bg-white tiled">
     <ul class="tab-nav">
diff --git a/client/app/pages/admin/outdated-queries/outdated-queries.html b/client/app/pages/admin/outdated-queries/outdated-queries.html
index 68036ec98f..605b574709 100644
--- a/client/app/pages/admin/outdated-queries/outdated-queries.html
+++ b/client/app/pages/admin/outdated-queries/outdated-queries.html
@@ -1,6 +1,5 @@
 <div class="container">
-  <page-header title="Admin">
-  </page-header>
+  <page-header title="'Admin'"></page-header>
 
   <div class="bg-white tiled">
     <ul class="tab-nav">
diff --git a/client/app/pages/admin/status/status.html b/client/app/pages/admin/status/status.html
index 99435059d2..eb5191df0e 100644
--- a/client/app/pages/admin/status/status.html
+++ b/client/app/pages/admin/status/status.html
@@ -1,6 +1,5 @@
 <div class="container">
-  <page-header title="Admin">
-  </page-header>
+  <page-header title="'Admin'"></page-header>
 
   <div class="bg-white tiled">
     <ul class="tab-nav">
@@ -62,4 +61,4 @@
       </ul>
     </div>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/client/app/pages/admin/tasks/tasks.html b/client/app/pages/admin/tasks/tasks.html
index ffd96b5056..f0b04d913d 100644
--- a/client/app/pages/admin/tasks/tasks.html
+++ b/client/app/pages/admin/tasks/tasks.html
@@ -1,6 +1,5 @@
 <div class="container">
-  <page-header title="Admin">
-  </page-header>
+  <page-header title="'Admin'"></page-header>
 
   <div class="bg-white tiled">
     <ul class="tab-nav">
diff --git a/client/app/pages/alert/alert.html b/client/app/pages/alert/alert.html
index 737f384624..54ff300f76 100644
--- a/client/app/pages/alert/alert.html
+++ b/client/app/pages/alert/alert.html
@@ -1,7 +1,5 @@
 <div class="container">
-
-  <page-header title='{{$ctrl.alert.name || $ctrl.getDefaultName() || "New Alert" }}'>
-  </page-header>
+  <page-header title="$ctrl.alert.name || $ctrl.getDefaultName() || 'New Alert'"></page-header>
 
   <email-settings-warning function="'alert emails'"></email-settings-warning>
 
diff --git a/client/app/pages/alerts-list/alerts-list.html b/client/app/pages/alerts-list/alerts-list.html
index 1c8e7d8e8a..b4d96d0250 100644
--- a/client/app/pages/alerts-list/alerts-list.html
+++ b/client/app/pages/alerts-list/alerts-list.html
@@ -1,5 +1,5 @@
 <div class="container">
-  <page-header title="Alerts"></page-header>
+  <page-header title="'Alerts'"></page-header>
 
   <empty-state icon="fa fa-bell-o"
                description="Get notified on certain events"
diff --git a/client/app/pages/dashboards/dashboard-list.html b/client/app/pages/dashboards/dashboard-list.html
index 6ae2856cfa..1fc1d7bb51 100644
--- a/client/app/pages/dashboards/dashboard-list.html
+++ b/client/app/pages/dashboards/dashboard-list.html
@@ -1,6 +1,5 @@
 <div class="container">
-
-  <page-header title="Dashboards"></page-header>
+  <page-header title="'Dashboards'"></page-header>
 
   <div class="row">
     <div class="col-md-3 list-control-t">
diff --git a/client/app/pages/dashboards/public-dashboard-page.html b/client/app/pages/dashboards/public-dashboard-page.html
index e25016c9f3..4377410336 100644
--- a/client/app/pages/dashboards/public-dashboard-page.html
+++ b/client/app/pages/dashboards/public-dashboard-page.html
@@ -1,6 +1,5 @@
 <div class="container p-t-10 p-b-20">
-  <page-header title="{{$ctrl.dashboard.name}}">
-  </page-header>
+  <page-header title="$ctrl.dashboard.name"></page-header>
 
   <div class="m-b-5">
     <filters ng-if="$ctrl.dashboard.dashboard_filters_enabled"></filters>
diff --git a/client/app/pages/queries-list/queries-list.html b/client/app/pages/queries-list/queries-list.html
index a20f96d9ac..acc005bbff 100644
--- a/client/app/pages/queries-list/queries-list.html
+++ b/client/app/pages/queries-list/queries-list.html
@@ -1,5 +1,5 @@
 <div class="container">
-  <page-header title="Queries"></page-header>
+  <page-header title="'Queries'"></page-header>
 
   <div class="row">
     <div class="col-md-3 list-control-t">