Navbar back button, no title edit this time

public/app/features/dashboard/components/DashNav/DashNav.tsx

@@ -9,16 +9,16 @@ import { PlaylistSrv } from 'app/features/playlist/playlist_srv';
 
 // Components
 import { DashNavButton } from './DashNavButton';
+import { Tooltip } from '@grafana/ui';
 
 // State
 import { updateLocation } from 'app/core/actions';
 
 // Types
-import { DashboardModel, PanelModel } from '../../state';
+import { DashboardModel } from '../../state';
 
 export interface Props {
   dashboard: DashboardModel;
-  fullscreenPanel?: PanelModel;
   editview: string;
   isEditing: boolean;
   isFullscreen: boolean;
@@ -133,7 +133,7 @@ export class DashNav extends PureComponent<Props> {
       <>
         <div>
           <a className="navbar-page-btn" onClick={this.onOpenSearch}>
-            <i className="gicon gicon-dashboard" />
+            {!this.isInFullscreenOrSettings && <i className="gicon gicon-dashboard" />}
             {haveFolder && <span className="navbar-page-btn--folder">{folderTitle} / </span>}
             {dashboard.title}
             <i className="fa fa-caret-down" />
@@ -144,24 +144,24 @@ export class DashNav extends PureComponent<Props> {
     );
   }
 
-  renderPanelFullscreeMode() {
-    const { fullscreenPanel } = this.props;
+  get isInFullscreenOrSettings() {
+    return this.props.editview || this.props.isFullscreen;
+  }
 
+  renderBackButton() {
     return (
       <div className="navbar-edit">
-        <button className="navbar-edit__back-btn" onClick={this.onClose}>
-          <i className="fa fa-arrow-left" />
-        </button>
-        <div className="navbar-edit__input-wraper">
-          <input className="navbar-edit__input" type="text" value={fullscreenPanel.title} />
-          <i className="fa fa-pencil" />
-        </div>
+        <Tooltip content="Go back (Esc)">
+          <button className="navbar-edit__back-btn" onClick={this.onClose}>
+            <i className="fa fa-arrow-left" />
+          </button>
+        </Tooltip>
       </div>
     );
   }
 
   render() {
-    const { dashboard, onAddPanel, fullscreenPanel } = this.props;
+    const { dashboard, onAddPanel } = this.props;
     const { canStar, canSave, canShare, showSettings, isStarred } = dashboard.meta;
     const { snapshot } = dashboard;
 
@@ -169,8 +169,8 @@ export class DashNav extends PureComponent<Props> {
 
     return (
       <div className="navbar">
-        {!fullscreenPanel && this.renderDashboardTitleSearchButton()}
-        {fullscreenPanel && this.renderPanelFullscreeMode()}
+        {this.isInFullscreenOrSettings && this.renderBackButton()}
+        {this.renderDashboardTitleSearchButton()}
 
         {this.playlistSrv.isPlaying && (
           <div className="navbar-buttons navbar-buttons--playlist">

public/app/features/dashboard/containers/DashboardPage.tsx

@@ -238,7 +238,7 @@ export class DashboardPage extends PureComponent<Props, State> {
 
   render() {
     const { dashboard, editview, $injector, isInitSlow, initError } = this.props;
-    const { isSettingsOpening, isEditing, isFullscreen, scrollTop, fullscreenPanel } = this.state;
+    const { isSettingsOpening, isEditing, isFullscreen, scrollTop } = this.state;
 
     if (!dashboard) {
       if (isInitSlow) {
@@ -266,7 +266,6 @@ export class DashboardPage extends PureComponent<Props, State> {
           editview={editview}
           $injector={$injector}
           onAddPanel={this.onAddPanel}
-          fullscreenPanel={fullscreenPanel}
         />
         <div className="scroll-canvas scroll-canvas--dashboard">
           <CustomScrollbar autoHeightMin={'100%'} setScrollTop={this.setScrollTop} scrollTop={scrollTop}>

public/sass/components/_navbar.scss

@@ -47,9 +47,6 @@
   .navbar-button--add-panel,
   .navbar-button--star,
   .navbar-button--tv,
-  .navbar-page-btn .fa-caret-down {
-    display: none;
-  }
 
   .navbar-buttons--close {
     display: flex;
@@ -185,7 +182,6 @@
   height: $navbarHeight;
   align-items: center;
   padding-left: 7px;
-  flex-grow: 1;
 }
 
 .navbar-edit__back-btn  {
@@ -209,44 +205,4 @@
   }
 }
 
-.navbar-edit__input-wraper {
-  position: relative;
-  display: flex;
-  align-items: center;
-  flex-grow: 1;
 
-  &:hover {
-    i {
-      opacity: 1;
-    }
-
-    .navbar-edit__input {
-      background: $input-bg;
-      flex-grow: 1;
-      @include form-control-focus();
-    }
-  }
-
-  i {
-    left: -25px;
-    position: relative;
-    color: $text-color-weak;
-    opacity: 0;
-    transition: 200ms opacity ease-in-out;
-  }
-}
-
-.navbar-edit__input {
-  background: transparent;
-  transition: 200ms background ease-in-out;
-  width: auto;
-  font-size: $font-size-lg;
-  height: $gf-form-input-height;
-  padding: $input-padding-y $input-padding-x;
-  flex-grow: 1;
-
-  &:focus {
-    @include form-control-focus();
-    background: $input-bg;
-  }
-}

public/sass/components/_panel_editor.scss

@@ -87,8 +87,8 @@
     margin: 0 $dashboard-padding;
   }
 
-  .panel-title-text {
-    visibility: hidden;
+  .search-container {
+    left: 0 !important;
   }
 }