From 4e8c1f298238ea1c86c38db4b6249d6ee19ea567 Mon Sep 17 00:00:00 2001
From: Levko Kravets <levko.ne@gmail.com>
Date: Tue, 22 Jan 2019 18:11:49 +0200
Subject: [PATCH 1/2] Migrate PageHeader component to React

---
 client/app/components/PageHeader.jsx          | 27 +++++++++++++++++++
 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 +-
 12 files changed, 37 insertions(+), 43 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/components/PageHeader.jsx b/client/app/components/PageHeader.jsx
new file mode 100644
index 0000000000..58d5df023e
--- /dev/null
+++ b/client/app/components/PageHeader.jsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { react2angular } from 'react2angular';
+
+export function PageHeader({ title }) {
+  return (
+    <div className="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,
+};
+
+PageHeader.defaultProps = {
+  title: '',
+};
+
+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">

From 09f37fe5a79210d6bb1eb0a1962c9d26a42cd321 Mon Sep 17 00:00:00 2001
From: Levko Kravets <levko.ne@gmail.com>
Date: Wed, 23 Jan 2019 16:22:16 +0200
Subject: [PATCH 2/2] CR1

---
 client/app/assets/less/redash/redash-newstyle.less | 2 +-
 client/app/components/PageHeader.jsx               | 8 ++------
 2 files changed, 3 insertions(+), 7 deletions(-)

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
index 58d5df023e..748f8f7e91 100644
--- a/client/app/components/PageHeader.jsx
+++ b/client/app/components/PageHeader.jsx
@@ -4,7 +4,7 @@ import { react2angular } from 'react2angular';
 
 export function PageHeader({ title }) {
   return (
-    <div className="row p-l-15 p-r-15 m-b-10 m-l-0 m-r-0">
+    <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>
@@ -13,11 +13,7 @@ export function PageHeader({ title }) {
 }
 
 PageHeader.propTypes = {
-  title: PropTypes.string,
-};
-
-PageHeader.defaultProps = {
-  title: '',
+  title: PropTypes.string.isRequired,
 };
 
 export default function init(ngModule) {