Merge pull request #14424 from grafana/fix-search-tag-issues

Fix search tag UI issues

public/app/core/angular_wrappers.ts

@@ -16,7 +16,7 @@ export function registerAngularDirectives() {
   react2AngularDirective('searchResult', SearchResult, []);
   react2AngularDirective('searchResult', SearchResult, []);
   react2AngularDirective('tagFilter', TagFilter, [
   react2AngularDirective('tagFilter', TagFilter, [
     'tags',
     'tags',
-    ['onSelect', { watchDepth: 'reference' }],
+    ['onChange', { watchDepth: 'reference' }],
     ['tagOptions', { watchDepth: 'reference' }],
     ['tagOptions', { watchDepth: 'reference' }],
   ]);
   ]);
 }
 }

public/app/core/components/TagFilter/TagFilter.tsx

@@ -10,7 +10,7 @@ import ResetStyles from 'app/core/components/Picker/ResetStyles';
 export interface Props {
 export interface Props {
   tags: string[];
   tags: string[];
   tagOptions: () => any;
   tagOptions: () => any;
-  onSelect: (tag: string) => void;
+  onChange: (tags: string[]) => void;
 }
 }
 
 
 export class TagFilter extends React.Component<Props, any> {
 export class TagFilter extends React.Component<Props, any> {
@@ -18,12 +18,9 @@ export class TagFilter extends React.Component<Props, any> {
 
 
   constructor(props) {
   constructor(props) {
     super(props);
     super(props);
-
-    this.searchTags = this.searchTags.bind(this);
-    this.onChange = this.onChange.bind(this);
   }
   }
 
 
-  searchTags(query) {
+  onLoadOptions = query => {
     return this.props.tagOptions().then(options => {
     return this.props.tagOptions().then(options => {
       return options.map(option => ({
       return options.map(option => ({
         value: option.term,
         value: option.term,
@@ -31,18 +28,20 @@ export class TagFilter extends React.Component<Props, any> {
         count: option.count,
         count: option.count,
       }));
       }));
     });
     });
-  }
+  };
 
 
-  onChange(newTags) {
-    this.props.onSelect(newTags);
-  }
+  onChange = (newTags: any[]) => {
+    this.props.onChange(newTags.map(tag => tag.value));
+  };
 
 
   render() {
   render() {
+    const tags = this.props.tags.map(tag => ({ value: tag, label: tag, count: 0 }));
+
     const selectOptions = {
     const selectOptions = {
       classNamePrefix: 'gf-form-select-box',
       classNamePrefix: 'gf-form-select-box',
       isMulti: true,
       isMulti: true,
       defaultOptions: true,
       defaultOptions: true,
-      loadOptions: this.searchTags,
+      loadOptions: this.onLoadOptions,
       onChange: this.onChange,
       onChange: this.onChange,
       className: 'gf-form-input gf-form-input--form-dropdown',
       className: 'gf-form-input gf-form-input--form-dropdown',
       placeholder: 'Tags',
       placeholder: 'Tags',
@@ -50,7 +49,7 @@ export class TagFilter extends React.Component<Props, any> {
       noOptionsMessage: () => 'No tags found',
       noOptionsMessage: () => 'No tags found',
       getOptionValue: i => i.value,
       getOptionValue: i => i.value,
       getOptionLabel: i => i.label,
       getOptionLabel: i => i.label,
-      value: this.props.tags,
+      value: tags,
       styles: ResetStyles,
       styles: ResetStyles,
       components: {
       components: {
         Option: TagOption,
         Option: TagOption,

public/app/core/components/search/search.html

@@ -41,7 +41,7 @@
           </a>
           </a>
         </div>
         </div>
 
 
-        <tag-filter tags="ctrl.query.tag" tagOptions="ctrl.getTags" onSelect="ctrl.onTagSelect">
+        <tag-filter tags="ctrl.query.tag" tagOptions="ctrl.getTags" onChange="ctrl.onTagFiltersChanged">
         </tag-filter>
         </tag-filter>
       </div>
       </div>
 
 

public/app/core/components/search/search.ts

@@ -25,8 +25,6 @@ export class SearchCtrl {
     appEvents.on('hide-dash-search', this.closeSearch.bind(this), $scope);
     appEvents.on('hide-dash-search', this.closeSearch.bind(this), $scope);
 
 
     this.initialFolderFilterTitle = 'All';
     this.initialFolderFilterTitle = 'All';
-    this.getTags = this.getTags.bind(this);
-    this.onTagSelect = this.onTagSelect.bind(this);
     this.isEditor = contextSrv.isEditor;
     this.isEditor = contextSrv.isEditor;
     this.hasEditPermissionInFolders = contextSrv.hasEditPermissionInFolders;
     this.hasEditPermissionInFolders = contextSrv.hasEditPermissionInFolders;
   }
   }
@@ -162,7 +160,7 @@ export class SearchCtrl {
     const localSearchId = this.currentSearchId;
     const localSearchId = this.currentSearchId;
     const query = {
     const query = {
       ...this.query,
       ...this.query,
-      tag: this.query.tag.map(i => i.value),
+      tag: this.query.tag,
     };
     };
 
 
     return this.searchSrv.search(query).then(results => {
     return this.searchSrv.search(query).then(results => {
@@ -195,14 +193,14 @@ export class SearchCtrl {
     evt.preventDefault();
     evt.preventDefault();
   }
   }
 
 
-  getTags() {
+  getTags = () => {
     return this.searchSrv.getDashboardTags();
     return this.searchSrv.getDashboardTags();
-  }
+  };
 
 
-  onTagSelect(newTags) {
-    this.query.tag = newTags;
+  onTagFiltersChanged = (tags: string[]) => {
+    this.query.tag = tags;
     this.search();
     this.search();
-  }
+  };
 
 
   clearSearchFilter() {
   clearSearchFilter() {
     this.query.tag = [];
     this.query.tag = [];