Search: changed how search filter on current folder works (#17219)

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

@@ -60,17 +60,14 @@ export class DashNav extends PureComponent<Props> {
     }
   }
 
-  onOpenSearch = () => {
-    const { dashboard } = this.props;
-    const haveFolder = dashboard.meta.folderId > 0;
-    appEvents.emit(
-      'show-dash-search',
-      haveFolder
-        ? {
-            query: 'folder:current',
-          }
-        : null
-    );
+  onDahboardNameClick = () => {
+    appEvents.emit('show-dash-search');
+  };
+
+  onFolderNameClick = () => {
+    appEvents.emit('show-dash-search', {
+      query: 'folder:current',
+    });
   };
 
   onClose = () => {
@@ -148,11 +145,20 @@ export class DashNav extends PureComponent<Props> {
     return (
       <>
         <div>
-          <a className="navbar-page-btn" onClick={this.onOpenSearch}>
+          <div className="navbar-page-btn">
             {!this.isInFullscreenOrSettings && <i className="gicon gicon-dashboard" />}
-            {haveFolder && <span className="navbar-page-btn--folder">{folderTitle} / </span>}
-            {dashboard.title} <i className="fa fa-caret-down" />
-          </a>
+            {haveFolder && (
+              <>
+                <a className="navbar-page-btn__folder" onClick={this.onFolderNameClick}>
+                  {folderTitle}
+                </a>
+                <i className="fa fa-chevron-right navbar-page-btn__folder-icon" />
+              </>
+            )}
+            <a onClick={this.onDahboardNameClick}>
+              {dashboard.title} <i className="fa fa-caret-down navbar-page-btn__search" />
+            </a>
+          </div>
         </div>
         {this.isSettings && <span className="navbar-settings-title">&nbsp;/ Settings</span>}
         <div className="navbar__spacer" />

public/sass/components/_navbar.scss

@@ -67,11 +67,6 @@
   min-height: $navbarHeight;
   line-height: $navbarHeight;
 
-  .fa-caret-down {
-    font-size: 60%;
-    padding-left: 6px;
-  }
-
   .gicon {
     top: -2px;
     position: relative;
@@ -85,17 +80,32 @@
       display: inline-block;
     }
   }
+}
 
-  &--folder {
-    color: $text-color-weak;
-    display: none;
+.navbar-page-btn__folder {
+  color: $text-color-weak;
+  display: none;
 
-    @include media-breakpoint-up(lg) {
-      display: inline-block;
-    }
+  @include media-breakpoint-up(lg) {
+    display: inline-block;
   }
 }
 
+// element is needed here to override font-awesome specificity
+i.navbar-page-btn__folder-icon {
+  font-size: $font-size-sm;
+  color: $text-color-weak;
+  padding: 0 $space-sm;
+  position: relative;
+  top: -1px;
+}
+
+// element is needed here to override font-awesome specificity
+i.navbar-page-btn__search {
+  font-size: $font-size-xs;
+  padding: 0 $space-xs;
+}
+
 .navbar-buttons {
   // height: $navbarHeight;
   display: flex;