Change placeholder in search input for Analytics features

app/assets/javascripts/filtered_search/filtered_search_manager.js

@@ -31,6 +31,7 @@ export default class FilteredSearchManager {
     isGroupDecendent = false,
     filteredSearchTokenKeys = IssuableFilteredSearchTokenKeys,
     stateFiltersSelector = '.issues-state-filters',
+    placeholder = __('Search or filter results...'),
   }) {
     this.isGroup = isGroup;
     this.isGroupAncestor = isGroupAncestor;
@@ -45,6 +46,7 @@ export default class FilteredSearchManager {
     this.tokensContainer = this.container.querySelector('.tokens-container');
     this.filteredSearchTokenKeys = filteredSearchTokenKeys;
     this.stateFiltersSelector = stateFiltersSelector;
+    this.placeholder = placeholder;
 
     const { multipleAssignees } = this.filteredSearchInput.dataset;
     if (multipleAssignees && this.filteredSearchTokenKeys.enableMultipleAssignees) {
@@ -395,11 +397,10 @@ export default class FilteredSearchManager {
 
   handleInputPlaceholder() {
     const query = DropdownUtils.getSearchQuery();
-    const placeholder = __('Search or filter results...');
     const currentPlaceholder = this.filteredSearchInput.placeholder;
 
-    if (query.length === 0 && currentPlaceholder !== placeholder) {
-      this.filteredSearchInput.placeholder = placeholder;
+    if (query.length === 0 && currentPlaceholder !== this.placeholder) {
+      this.filteredSearchInput.placeholder = this.placeholder;
     } else if (query.length > 0 && currentPlaceholder !== '') {
       this.filteredSearchInput.placeholder = '';
     }

app/helpers/search_helper.rb

@@ -207,11 +207,11 @@ module SearchHelper
     end
   end
 
-  def search_filter_input_options(type)
+  def search_filter_input_options(type, placeholder = _('Search or filter results...'))
     opts =
       {
         id: "filtered-search-#{type}",
-        placeholder: _('Search or filter results...'),
+        placeholder: placeholder,
         data: {
           'username-params' => UserSerializer.new.represent(@users)
         },

app/views/shared/issuable/_search_bar.html.haml

 - type = local_assigns.fetch(:type)
 - board = local_assigns.fetch(:board, nil)
 - show_sorting_dropdown = local_assigns.fetch(:show_sorting_dropdown, true)
+- placeholder = local_assigns[:placeholder] || _('Search or filter results...')
 - is_not_boards_modal_or_productivity_analytics = type != :boards_modal && type != :productivity_analytics
 - block_css_class = is_not_boards_modal_or_productivity_analytics ? 'row-content-block second-block' : ''
 - user_can_admin_list = board && can?(current_user, :admin_list, board.resource_parent)
@@ -29,7 +30,7 @@
               .scroll-container
                 %ul.tokens-container.list-unstyled
                   %li.input-token
-                    %input.form-control.filtered-search{ search_filter_input_options(type) }
+                    %input.form-control.filtered-search{ search_filter_input_options(type, placeholder) }
               #js-dropdown-hint.filtered-search-input-dropdown-menu.dropdown-menu.hint-dropdown
                 %ul.filter-dropdown{ data: { dynamic: true, dropdown: true } }
                   %li.filter-dropdown-item{ data: {hint: "#{'{{hint}}'}", tag: "#{'{{tag}}'}", action: "#{'{{hint === \'search\' ? \'submit\' : \'\' }}'}" } }

changelogs/unreleased/214301-change-placeholder-in-search-input-for-analytics-features.yml

+---
+title: Change placeholder in search input for Analytics features.
+merge_request: 29858
+author: Gilang Gumilar
+type: changed

ee/app/assets/javascripts/analytics/code_review_analytics/filtered_search_code_review_analytics.js

 import CodeReviewAnalyticsFilteredSearchTokenKeys from './code_review_analytics_filtered_search_token_keys';
 import FilteredSearchManager from 'ee_else_ce/filtered_search/filtered_search_manager';
 import { urlParamsToObject } from '~/lib/utils/common_utils';
+import { __ } from '~/locale';
 import store from './store';
 
 export default class FilteredSearchCodeReviewAnalytics extends FilteredSearchManager {
@@ -11,6 +12,7 @@ export default class FilteredSearchCodeReviewAnalytics extends FilteredSearchMan
       stateFiltersSelector: '.issues-state-filters',
       isGroup: true,
       filteredSearchTokenKeys: CodeReviewAnalyticsFilteredSearchTokenKeys,
+      placeholder: __('Filter results...'),
     });
 
     this.isHandledAsync = true;

ee/app/assets/javascripts/analytics/productivity_analytics/filtered_search_productivity_analytics.js

 import ProductivityAnalyticsFilteredSearchTokenKeys from './productivity_analytics_filtered_search_token_keys';
 import FilteredSearchManager from 'ee_else_ce/filtered_search/filtered_search_manager';
 import { urlParamsToObject } from '~/lib/utils/common_utils';
+import { __ } from '~/locale';
 import store from './store';
 
 export default class FilteredSearchProductivityAnalytics extends FilteredSearchManager {
@@ -11,6 +12,7 @@ export default class FilteredSearchProductivityAnalytics extends FilteredSearchM
       stateFiltersSelector: '.issues-state-filters',
       isGroup,
       filteredSearchTokenKeys: ProductivityAnalyticsFilteredSearchTokenKeys,
+      placeholder: __('Filter results...'),
     });
 
     this.isHandledAsync = true;

ee/app/assets/javascripts/issues_analytics/filtered_search_issues_analytics.js

@@ -2,6 +2,7 @@ import IssuableFilteredSearchTokenKeys from 'ee_else_ce/filtered_search/issuable
 import FilteredSearchTokenKeys from '~/filtered_search/filtered_search_token_keys';
 import FilteredSearchManager from 'ee_else_ce/filtered_search/filtered_search_manager';
 import { historyPushState } from '~/lib/utils/common_utils';
+import { __ } from '~/locale';
 import issueAnalyticsStore from './stores';
 
 const EXCLUDED_TOKENS = ['release'];
@@ -20,6 +21,7 @@ export default class FilteredSearchIssueAnalytics extends FilteredSearchManager
       stateFiltersSelector: '.issues-state-filters',
       isGroup: true,
       filteredSearchTokenKeys: issuesAnalyticsTokenKeys,
+      placeholder: __('Filter results...'),
     });
 
     this.isHandledAsync = true;

ee/app/helpers/ee/search_helper.rb

@@ -6,7 +6,7 @@ module EE
     SWITCH_TO_BASIC_SEARCHABLE_TABS = %w[projects issues merge_requests milestones users].freeze
 
     override :search_filter_input_options
-    def search_filter_input_options(type)
+    def search_filter_input_options(type, placeholder = _('Search or filter results...'))
       options = super
       options[:data][:'multiple-assignees'] = 'true' if search_multiple_assignees?(type)
 

ee/app/views/groups/analytics/productivity_analytics/show.html.haml

@@ -9,6 +9,6 @@
   .row-content-block.second-block.d-flex.flex-column.flex-lg-row.mt-3.py-2.px-3
     .js-group-project-select-container
     .js-search-bar.filter-container.hide
-      = render 'shared/issuable/search_bar', type: :productivity_analytics
+      = render 'shared/issuable/search_bar', type: :productivity_analytics, placeholder: _('Filter results...')
     .js-timeframe-container{ data: { start_date: ProductivityAnalytics.start_date } }
   .js-productivity-analytics-app-container{ data: { endpoint: group_analytics_productivity_analytics_path(@group), empty_state_svg_path: image_path('illustrations/productivity-analytics-empty-state.svg'), no_access_svg_path: image_path('illustrations/analytics/no-access.svg') } }

ee/app/views/groups/issues_analytics/show.html.haml

 - page_title _('Issues Analytics')
-= render 'shared/issuable/search_bar', type: :issues_analytics, show_sorting_dropdown: false
+= render 'shared/issuable/search_bar', type: :issues_analytics, show_sorting_dropdown: false, placeholder: _('Filter results...')
 #js-issues-analytics{ data: { endpoint: group_issues_analytics_path(@group), no_data_empty_state_svg_path: image_path('illustrations/monitoring/getting_started.svg'), filters_empty_state_svg_path: image_path('illustrations/issues.svg') } }

ee/app/views/projects/analytics/code_reviews/index.html.haml

@@ -6,5 +6,5 @@
     = _('Code Review')
   %span.text-secondary= _('Review time is defined as the time it takes from first comment until merged.')
 - if Feature.disabled?(:code_review_analytics_has_new_search)
-  = render 'shared/issuable/search_bar', type: :issues_analytics, show_sorting_dropdown: false
+  = render 'shared/issuable/search_bar', type: :issues_analytics, show_sorting_dropdown: false, placeholder: _('Filter results...')
 #js-code-review-analytics{ data: { project_id: @project.id, new_merge_request_url: namespace_project_new_merge_request_path(@project.namespace), empty_state_svg_path: image_path('illustrations/merge_requests.svg'), milestone_path: project_milestones_path(@project), labels_path: project_labels_path(@project) } }

ee/app/views/projects/analytics/issues_analytics/show.html.haml

@@ -3,5 +3,5 @@
 .mb-3
   %h3
     = _('Issues Analytics')
-= render 'shared/issuable/search_bar', type: :issues_analytics, show_sorting_dropdown: false
+= render 'shared/issuable/search_bar', type: :issues_analytics, show_sorting_dropdown: false, placeholder: _('Filter results...')
 #js-issues-analytics{ data: { endpoint: project_analytics_issues_analytics_path(@project), no_data_empty_state_svg_path: image_path('illustrations/monitoring/getting_started.svg'), filters_empty_state_svg_path: image_path('illustrations/issues.svg') } }

locale/gitlab.pot

@@ -9295,6 +9295,9 @@ msgstr ""
 msgid "Filter results by project"
 msgstr ""
 
+msgid "Filter results..."
+msgstr ""
+
 msgid "Filter your projects by name"
 msgstr ""