ux: Add icon to selected option in PageHeader navigation on small screens, update select boxes for Firefox so the arrow to the right is aligned with the other select boxes (#10190)

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

@@ -41,7 +41,7 @@ function SelectOption(navItem: NavModelItem) {
 
 function Navigation({main}: {main: NavModelItem}) {
   return (<nav>
-    <SelectNav customCss="page-header__select_nav" main={main} />
+    <SelectNav customCss="page-header__select-nav" main={main} />
     <Tabs customCss="page-header__tabs" main={main} />
   </nav>);
 }
@@ -57,10 +57,15 @@ function SelectNav({main, customCss}: {main: NavModelItem, customCss: string}) {
     appEvents.emit('location-change', {href: url});
   };
 
-  return (<select
+  return (
-    className={`gf-select-nav ${customCss}`}
+    <div className={`gf-form-select-wrapper width-20 ${customCss}`}>
-    defaultValue={defaultSelectedItem.url}
+      <label className={`gf-form-select-icon ${defaultSelectedItem.icon}`} htmlFor="page-header-select-nav" />{/* Label to make it clickable */}
-    onChange={gotoUrl}>{main.children.map(SelectOption)}</select>);
+        <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}) {

public/app/core/components/manage_dashboards/manage_dashboards.html

@@ -60,20 +60,24 @@
         switch-class="gf-form-switch--transparent gf-form-switch--search-result-filter-row__checkbox"
       />
       <div class="search-results-filter-row__filters">
-        <select
+        <div class="gf-form-select-wrapper">
-          class="search-results-filter-row__filters-item gf-form-input"
+          <select
-          ng-model="ctrl.selectedStarredFilter"
+            class="search-results-filter-row__filters-item gf-form-input"
-          ng-options="t.text disable when t.disabled for t in ctrl.starredFilterOptions"
+            ng-model="ctrl.selectedStarredFilter"
-          ng-change="ctrl.onStarredFilterChange()"
+            ng-options="t.text disable when t.disabled for t in ctrl.starredFilterOptions"
-          ng-show="!(ctrl.canMove || ctrl.canDelete)"
+            ng-change="ctrl.onStarredFilterChange()"
-        />
+            ng-show="!(ctrl.canMove || ctrl.canDelete)"
-        <select
+          />
-          class="search-results-filter-row__filters-item gf-form-input"
+        </div>
-          ng-model="ctrl.selectedTagFilter"
+        <div class="gf-form-select-wrapper">
-          ng-options="t.term disable when t.disabled for t in ctrl.tagFilterOptions"
+          <select
-          ng-change="ctrl.onTagFilterChange()"
+            class="search-results-filter-row__filters-item gf-form-input"
-          ng-show="!(ctrl.canMove || ctrl.canDelete)"
+            ng-model="ctrl.selectedTagFilter"
-        />
+            ng-options="t.term disable when t.disabled for t in ctrl.tagFilterOptions"
+            ng-change="ctrl.onTagFilterChange()"
+            ng-show="!(ctrl.canMove || ctrl.canDelete)"
+          />
+        </div>
         <div class="gf-form-button-row" ng-show="ctrl.canMove || ctrl.canDelete">
           <button	type="button"
             class="btn gf-form-button btn-inverse"

public/sass/components/_gf-form.scss

@@ -242,12 +242,30 @@ $input-border: 1px solid $input-border-color;
   position: relative;
   background-color: $input-bg;
 
+  .gf-form-select-icon {
+    position: absolute;
+    z-index: 1;
+    left: $input-padding-x;
+    top: 50%;
+    margin-top: -7px;
+
+    & + .gf-form-input {
+      position: relative;
+      z-index: 2;
+      padding-left: $input-padding-x*3;
+      background-color: transparent;
+
+      option { // Firefox
+        color: $black;
+      }
+    }
+  }
+
+
   select.gf-form-input {
     text-indent: .01px;
     text-overflow: '';
-    padding-right: $input-padding-x*4;
+    padding-right: $input-padding-x*3;
-    -webkit-appearance: none;
-    -moz-appearance: menulist-text; // was set to "window" and caused odd display on windos and linux.
     appearance: none;
 
     &:-moz-focusring {

public/sass/components/_page_header.scss

@@ -70,8 +70,9 @@
   text-transform: uppercase;
 }
 
-.page-header__select_nav {
+.page-header__select-nav {
   margin-bottom: 10px;
+  max-width: 100%;
 
   @include media-breakpoint-up(lg) {
     display: none;