Text change in search (#22929)

* Text change

made it more understandable that this is a search field

* Made "New Folder"-button green

Since New Dashboard was green I thought New Folder; Import also would be green. Green seems to be the color for creating new items

* Update playlist_search.html

* change search text

* wrong link

* Update playlist.md

* Update manage_dashboards.html

* Update manage_dashboards.html

* replaced Filter

* replaced Filter

* replaced Filter

* replaced filter

* changed text for placeholder

* Update UsersActionBar.tsx

* Update UserListAdminPage.tsx

* update snapshots

Co-authored-by: Dominik Prokop <dominik.prokop@grafana.com>

docs/sources/reference/playlist.md

@@ -61,7 +61,7 @@ You can edit playlists while creating them or after saving them.
 
 
 ### Search for a dashboard to add
 ### Search for a dashboard to add
 
 
-1. Click the **Find dashboards by name** text box. 
+1. Click the **Search dashboards by name** text box. 
 1. Search for the playlist by name or regular expression. 
 1. Search for the playlist by name or regular expression. 
 1. If needed, filter your results by starred status or tags.  
 1. If needed, filter your results by starred status or tags.  
    By default, your starred dashboards will appear as options to add to the Playlist.
    By default, your starred dashboards will appear as options to add to the Playlist.

public/app/core/components/OrgActionBar/OrgActionBar.tsx

@@ -28,7 +28,7 @@ export default class OrgActionBar extends PureComponent<Props> {
             inputClassName="gf-form-input width-20"
             inputClassName="gf-form-input width-20"
             value={searchQuery}
             value={searchQuery}
             onChange={setSearchQuery}
             onChange={setSearchQuery}
-            placeholder={'Filter by name or type'}
+            placeholder={'Search by name or type'}
           />
           />
           <LayoutSelector mode={layoutMode} onLayoutModeChanged={(mode: LayoutMode) => onSetLayoutMode(mode)} />
           <LayoutSelector mode={layoutMode} onLayoutModeChanged={(mode: LayoutMode) => onSetLayoutMode(mode)} />
         </div>
         </div>

public/app/core/components/OrgActionBar/__snapshots__/OrgActionBar.test.tsx.snap

@@ -11,7 +11,7 @@ exports[`Render should render component 1`] = `
       inputClassName="gf-form-input width-20"
       inputClassName="gf-form-input width-20"
       labelClassName="gf-form--has-input-icon"
       labelClassName="gf-form--has-input-icon"
       onChange={[MockFunction]}
       onChange={[MockFunction]}
-      placeholder="Filter by name or type"
+      placeholder="Search by name or type"
       value=""
       value=""
     />
     />
     <LayoutSelector
     <LayoutSelector

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

 <div class="dashboard-list">
 <div class="dashboard-list">
   <div class="page-action-bar page-action-bar--narrow" ng-hide="ctrl.folderId && !ctrl.hasFilters && ctrl.sections.length === 0">
   <div class="page-action-bar page-action-bar--narrow" ng-hide="ctrl.folderId && !ctrl.hasFilters && ctrl.sections.length === 0">
     <label class="gf-form gf-form--grow gf-form--has-input-icon">
     <label class="gf-form gf-form--grow gf-form--has-input-icon">
-      <input type="text" class="gf-form-input max-width-30" placeholder="Find Dashboard by name" tabindex="1" give-focus="true" ng-model="ctrl.query.query" ng-model-options="{ debounce: 500 }" spellcheck='false' ng-change="ctrl.onQueryChange()" />
+      <input type="text" class="gf-form-input max-width-30" placeholder="Search dashboards by name" tabindex="1" give-focus="true" ng-model="ctrl.query.query" ng-model-options="{ debounce: 500 }" spellcheck='false' ng-change="ctrl.onQueryChange()" />
       <i class="gf-form-input-icon fa fa-search"></i>
       <i class="gf-form-input-icon fa fa-search"></i>
     </label>
     </label>
     <div class="page-action-bar__spacer"></div>
     <div class="page-action-bar__spacer"></div>
     <a class="btn btn-primary" ng-href="{{ctrl.createDashboardUrl()}}" ng-if="ctrl.hasEditPermissionInFolders || ctrl.canSave">
     <a class="btn btn-primary" ng-href="{{ctrl.createDashboardUrl()}}" ng-if="ctrl.hasEditPermissionInFolders || ctrl.canSave">
       New Dashboard
       New Dashboard
     </a>
     </a>
-    <a class="btn btn-inverse" href="dashboards/folder/new" ng-if="!ctrl.folderId && ctrl.isEditor">
+    <a class="btn btn-primary" href="dashboards/folder/new" ng-if="!ctrl.folderId && ctrl.isEditor">
       New Folder
       New Folder
     </a>
     </a>
-    <a class="btn btn-inverse" href="{{ctrl.importDashboardUrl()}}" ng-if="ctrl.hasEditPermissionInFolders || ctrl.canSave">
+    <a class="btn btn-primary" href="{{ctrl.importDashboardUrl()}}" ng-if="ctrl.hasEditPermissionInFolders || ctrl.canSave">
       Import
       Import
     </a>
     </a>
   </div>
   </div>
@@ -49,7 +49,7 @@
 
 
   <div class="search-results" ng-show="ctrl.hasFilters && ctrl.sections.length === 0">
   <div class="search-results" ng-show="ctrl.hasFilters && ctrl.sections.length === 0">
     <em class="muted">
     <em class="muted">
-      No dashboards matching your query were found.
+      No dashboards matching your search were found.
     </em>
     </em>
   </div>
   </div>
 
 

public/app/features/admin/UserListAdminPage.tsx

@@ -45,7 +45,7 @@ const UserListAdminPageUnConnected: React.FC<Props> = props => {
               <Forms.Input
               <Forms.Input
                 size="md"
                 size="md"
                 type="text"
                 type="text"
-                placeholder="Find user by name/login/email"
+                placeholder="Search user by login,email or name"
                 tabIndex={1}
                 tabIndex={1}
                 autoFocus={true}
                 autoFocus={true}
                 value={props.query}
                 value={props.query}

public/app/features/playlist/partials/playlist_search.html

 <div class="playlist-search-field-wrapper">
 <div class="playlist-search-field-wrapper">
   <span style="position: relative;">
   <span style="position: relative;">
-    <input  type="text" placeholder="Find dashboards by name" tabindex="1"
+    <input  type="text" placeholder="Search dashboards by name" tabindex="1"
     ng-keydown="ctrl.keyDown($event)" ng-model="ctrl.query.query" ng-model-options="{ debounce: 500 }" spellcheck='false' ng-change="ctrl.searchDashboards()" />
     ng-keydown="ctrl.keyDown($event)" ng-model="ctrl.query.query" ng-model-options="{ debounce: 500 }" spellcheck='false' ng-change="ctrl.searchDashboards()" />
 		<div class="playlist-search-switches">
 		<div class="playlist-search-switches">
 			<i class="fa fa-filter"></i>
 			<i class="fa fa-filter"></i>

public/app/features/search/components/SearchField.tsx

@@ -61,7 +61,7 @@ export const SearchField: React.FunctionComponent<SearchFieldProps> = ({ query,
 
 
         <input
         <input
           type="text"
           type="text"
-          placeholder="Find dashboards by name"
+          placeholder="Search dashboards by name"
           value={query.query}
           value={query.query}
           onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
           onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
             onChange(event.currentTarget.value);
             onChange(event.currentTarget.value);

public/app/features/users/UsersActionBar.tsx

@@ -49,7 +49,7 @@ export class UsersActionBar extends PureComponent<Props> {
             inputClassName="gf-form-input width-20"
             inputClassName="gf-form-input width-20"
             value={searchQuery}
             value={searchQuery}
             onChange={setUsersSearchQuery}
             onChange={setUsersSearchQuery}
-            placeholder="Filter by email, login or name"
+            placeholder="Search user by login,email or name"
           />
           />
           {pendingInvitesCount > 0 && (
           {pendingInvitesCount > 0 && (
             <div style={{ marginLeft: '1rem' }}>
             <div style={{ marginLeft: '1rem' }}>

public/app/features/users/__snapshots__/UsersActionBar.test.tsx.snap

@@ -11,7 +11,7 @@ exports[`Render should render component 1`] = `
       inputClassName="gf-form-input width-20"
       inputClassName="gf-form-input width-20"
       labelClassName="gf-form--has-input-icon"
       labelClassName="gf-form--has-input-icon"
       onChange={[MockFunction]}
       onChange={[MockFunction]}
-      placeholder="Filter by email, login or name"
+      placeholder="Search user by login,email or name"
       value=""
       value=""
     />
     />
     <div
     <div
@@ -32,7 +32,7 @@ exports[`Render should render pending invites button 1`] = `
       inputClassName="gf-form-input width-20"
       inputClassName="gf-form-input width-20"
       labelClassName="gf-form--has-input-icon"
       labelClassName="gf-form--has-input-icon"
       onChange={[MockFunction]}
       onChange={[MockFunction]}
-      placeholder="Filter by email, login or name"
+      placeholder="Search user by login,email or name"
       value=""
       value=""
     />
     />
     <div
     <div
@@ -77,7 +77,7 @@ exports[`Render should show external user management button 1`] = `
       inputClassName="gf-form-input width-20"
       inputClassName="gf-form-input width-20"
       labelClassName="gf-form--has-input-icon"
       labelClassName="gf-form--has-input-icon"
       onChange={[MockFunction]}
       onChange={[MockFunction]}
-      placeholder="Filter by email, login or name"
+      placeholder="Search user by login,email or name"
       value=""
       value=""
     />
     />
     <div
     <div
@@ -104,7 +104,7 @@ exports[`Render should show invite button 1`] = `
       inputClassName="gf-form-input width-20"
       inputClassName="gf-form-input width-20"
       labelClassName="gf-form--has-input-icon"
       labelClassName="gf-form--has-input-icon"
       onChange={[MockFunction]}
       onChange={[MockFunction]}
-      placeholder="Filter by email, login or name"
+      placeholder="Search user by login,email or name"
       value=""
       value=""
     />
     />
     <div
     <div