From c05857a3c755025157022a58cdc4353f0ea49448 Mon Sep 17 00:00:00 2001
From: NaveenBhaskar <naveenbhaskar@users.noreply.github.com>
Date: Wed, 2 Jan 2019 15:39:43 +0530
Subject: [PATCH] header component - added admin - page name to header (#5593)

* header component - added admin - page name to header
* Make sectionName optional
---
 .idea/codeStyles/codeStyleConfig.xml               |  2 +-
 .../views/components/header_panel/index.scss       | 14 ++++++++++++++
 .../views/components/header_panel/index.scss.d.ts  |  1 +
 .../views/components/header_panel/index.tsx        | 10 ++++++++++
 .../webpack/views/components/site_menu/index.scss  |  1 -
 .../rails/webpack/views/pages/kitchen_sink.tsx     |  2 +-
 6 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/.idea/codeStyles/codeStyleConfig.xml b/.idea/codeStyles/codeStyleConfig.xml
index 79ee123c2b2..0f7bc519db6 100644
--- a/.idea/codeStyles/codeStyleConfig.xml
+++ b/.idea/codeStyles/codeStyleConfig.xml
@@ -2,4 +2,4 @@
   <state>
     <option name="USE_PER_PROJECT_SETTINGS" value="true" />
   </state>
-</component>
\ No newline at end of file
+</component>
diff --git a/server/webapp/WEB-INF/rails/webpack/views/components/header_panel/index.scss b/server/webapp/WEB-INF/rails/webpack/views/components/header_panel/index.scss
index 049615c9288..e4bb6a0af89 100644
--- a/server/webapp/WEB-INF/rails/webpack/views/components/header_panel/index.scss
+++ b/server/webapp/WEB-INF/rails/webpack/views/components/header_panel/index.scss
@@ -40,6 +40,20 @@ $page-item-padding: 30px;
   box-shadow:      0 0 10px $box-shadow-color;
 }
 
+.section-name {
+  display:     inline-block;
+  color:       $go-primary;
+  font-size:   $header-font-size;
+  font-weight: $header-font-weight;
+  margin:      0;
+  &:after {
+    content: "|";
+    color:   $line-color;
+    margin:  0 10px;
+
+  }
+}
+
 .title {
   display:     inline-block;
   color:       $text-color;
diff --git a/server/webapp/WEB-INF/rails/webpack/views/components/header_panel/index.scss.d.ts b/server/webapp/WEB-INF/rails/webpack/views/components/header_panel/index.scss.d.ts
index eecf03895ba..32932269005 100644
--- a/server/webapp/WEB-INF/rails/webpack/views/components/header_panel/index.scss.d.ts
+++ b/server/webapp/WEB-INF/rails/webpack/views/components/header_panel/index.scss.d.ts
@@ -1,6 +1,7 @@
 // This file is automatically generated by typings-for-css-modules.
 // Please do not change this file!
 export const pageHeader: string;
+export const sectionName: string;
 export const title: string;
 export const page_title: string;
 export const pageTitle: string;
diff --git a/server/webapp/WEB-INF/rails/webpack/views/components/header_panel/index.tsx b/server/webapp/WEB-INF/rails/webpack/views/components/header_panel/index.tsx
index 487172796a3..b20c184022e 100644
--- a/server/webapp/WEB-INF/rails/webpack/views/components/header_panel/index.tsx
+++ b/server/webapp/WEB-INF/rails/webpack/views/components/header_panel/index.tsx
@@ -22,6 +22,7 @@ import * as style from "./index.scss";
 
 export interface Attrs {
   title: m.Children;
+  sectionName?: m.Children;
   buttons?: m.Children;
 }
 
@@ -39,9 +40,18 @@ export class HeaderPanel extends MithrilViewComponent<Attrs> {
 
     return (<header className={style.pageHeader}>
       <div class={style.pageTitle}>
+        {this.maybeSection(vnode)}
         <h1 class={style.title} data-test-id="title">{vnode.attrs.title}</h1>
       </div>
       {buttons}
     </header>);
   }
+
+  private maybeSection(vnode: m.Vnode<Attrs>) {
+    if (vnode.attrs.sectionName) {
+      return (
+        <h1 className={style.sectionName} data-test-id="section-name">{vnode.attrs.sectionName}</h1>
+      );
+    }
+  }
 }
diff --git a/server/webapp/WEB-INF/rails/webpack/views/components/site_menu/index.scss b/server/webapp/WEB-INF/rails/webpack/views/components/site_menu/index.scss
index 3c645902ea8..839d1639658 100644
--- a/server/webapp/WEB-INF/rails/webpack/views/components/site_menu/index.scss
+++ b/server/webapp/WEB-INF/rails/webpack/views/components/site_menu/index.scss
@@ -86,7 +86,6 @@
       border-top:   10px solid $site-header;
     }
   }
-
   &:hover {
     @include ie-edge-fix-for-admin-dropdown
   }
diff --git a/server/webapp/WEB-INF/rails/webpack/views/pages/kitchen_sink.tsx b/server/webapp/WEB-INF/rails/webpack/views/pages/kitchen_sink.tsx
index d658af43113..1f44fbfefd8 100644
--- a/server/webapp/WEB-INF/rails/webpack/views/pages/kitchen_sink.tsx
+++ b/server/webapp/WEB-INF/rails/webpack/views/pages/kitchen_sink.tsx
@@ -50,7 +50,7 @@ export class KitchenSink extends MithrilViewComponent<null> {
   view(vnode: m.Vnode<null>) {
     return (
       <div>
-        <HeaderPanel title="Kitchen Sink"/>
+        <HeaderPanel title="Kitchen Sink" sectionName={'Admin'}/>
         <FlashMessage type={MessageType.info} message={"This page is awesome!"}/>
         <FlashMessage type={MessageType.success} message={"Everything works as expected!"}/>
         <FlashMessage type={MessageType.warning} message={"This might not work!"}/>