Migrate PageHeader component to React (#3324)

* Migrate PageHeader component to React * CR1
getredash · Jan 23, 2019 · c2c722e · c2c722e
1 parent 1a61ee3
commit c2c722e
Show file tree

Hide file tree

Showing 13 changed files with 34 additions and 44 deletions.
diff --git 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
@@ -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
diff --git a/client/app/components/page-header/page-header.html b/client/app/components/page-header/page-header.html
diff --git 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
@@ -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
@@ -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>
+</div>
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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">