dashfolders: Remove those 2-line-components from PageHeader to make it easier to…

dashfolders: Remove those 2-line-components from PageHeader to make it easier to read and make sure components listening to the mobx state are wrapped with observer() #10275

public/app/core/components/PageHeader/PageHeader.tsx

 import React from 'react';
 import React from 'react';
+import { observer } from 'mobx-react';
 import { NavModel, NavModelItem } from '../../nav_model_srv';
 import { NavModel, NavModelItem } from '../../nav_model_srv';
 import classNames from 'classnames';
 import classNames from 'classnames';
 import appEvents from 'app/core/app_events';
 import appEvents from 'app/core/app_events';
@@ -7,12 +8,52 @@ export interface IProps {
   model: NavModel;
   model: NavModel;
 }
 }
 
 
-function TabItem(tab: NavModelItem) {
+const SelectNav = observer(({ main, customCss }: { main: NavModelItem; customCss: string }) => {
+  const defaultSelectedItem = main.children.find(navItem => {
+    return navItem.active === true;
+  });
+
+  const gotoUrl = evt => {
+    var element = evt.target;
+    var url = element.options[element.selectedIndex].value;
+    appEvents.emit('location-change', { href: url });
+  };
+
+  return (
+    <div className={`gf-form-select-wrapper width-20 ${customCss}`}>
+      <label className={`gf-form-select-icon ${defaultSelectedItem.icon}`} htmlFor="page-header-select-nav" />
+      {/* Label to make it clickable */}
+      <select
+        className="gf-select-nav gf-form-input"
+        value={defaultSelectedItem.url}
+        onChange={gotoUrl}
+        id="page-header-select-nav"
+      >
+        {main.children.map((navItem: NavModelItem) => {
+          if (navItem.hideFromTabs) {
+            // TODO: Rename hideFromTabs => hideFromNav
+            return null;
+          }
+          return (
+            <option key={navItem.url} value={navItem.url}>
+              {navItem.text}
+            </option>
+          );
+        })}
+      </select>
+    </div>
+  );
+});
+
+const Tabs = observer(({ main, customCss }: { main: NavModelItem; customCss: string }) => {
+  return (
+    <ul className={`gf-tabs ${customCss}`}>
+      {main.children.map((tab, idx) => {
         if (tab.hideFromTabs) {
         if (tab.hideFromTabs) {
           return null;
           return null;
         }
         }
 
 
-  let tabClasses = classNames({
+        const tabClasses = classNames({
           'gf-tabs-link': true,
           'gf-tabs-link': true,
           active: tab.active,
           active: tab.active,
         });
         });
@@ -25,61 +66,21 @@ function TabItem(tab: NavModelItem) {
             </a>
             </a>
           </li>
           </li>
         );
         );
-}
-
-function SelectOption(navItem: NavModelItem) {
-  if (navItem.hideFromTabs) {
-    // TODO: Rename hideFromTabs => hideFromNav
-    return null;
-  }
-
-  return (
-    <option key={navItem.url} value={navItem.url}>
-      {navItem.text}
-    </option>
+      })}
+    </ul>
   );
   );
-}
+});
 
 
-function Navigation({ main }: { main: NavModelItem }) {
+const Navigation = ({ main }: { main: NavModelItem }) => {
   return (
   return (
     <nav>
     <nav>
       <SelectNav customCss="page-header__select-nav" main={main} />
       <SelectNav customCss="page-header__select-nav" main={main} />
       <Tabs customCss="page-header__tabs" main={main} />
       <Tabs customCss="page-header__tabs" main={main} />
     </nav>
     </nav>
   );
   );
-}
-
-function SelectNav({ main, customCss }: { main: NavModelItem; customCss: string }) {
-  const defaultSelectedItem = main.children.find(navItem => {
-    return navItem.active === true;
-  });
-
-  const gotoUrl = evt => {
-    var element = evt.target;
-    var url = element.options[element.selectedIndex].value;
-    appEvents.emit('location-change', { href: url });
-  };
-
-  return (
-    <div className={`gf-form-select-wrapper width-20 ${customCss}`}>
-      <label className={`gf-form-select-icon ${defaultSelectedItem.icon}`} htmlFor="page-header-select-nav" />
-      {/* Label to make it clickable */}
-      <select
-        className="gf-select-nav gf-form-input"
-        defaultValue={defaultSelectedItem.url}
-        onChange={gotoUrl}
-        id="page-header-select-nav"
-      >
-        {main.children.map(SelectOption)}
-      </select>
-    </div>
-  );
-}
-
-function Tabs({ main, customCss }: { main: NavModelItem; customCss: string }) {
-  return <ul className={`gf-tabs ${customCss}`}>{main.children.map(TabItem)}</ul>;
-}
+};
 
 
+@observer
 export default class PageHeader extends React.Component<IProps, any> {
 export default class PageHeader extends React.Component<IProps, any> {
   constructor(props) {
   constructor(props) {
     super(props);
     super(props);
@@ -140,7 +141,6 @@ export default class PageHeader extends React.Component<IProps, any> {
     if (!model) {
     if (!model) {
       return null;
       return null;
     }
     }
-
     return (
     return (
       <div className="page-header-canvas">
       <div className="page-header-canvas">
         <div className="page-container">
         <div className="page-container">