Add latest changes from gitlab-org/gitlab@master

3 files changed, 34 insertions, 7 deletions

diff --git a/app/assets/javascripts/incidents/components/incidents_list.vue b/app/assets/javascripts/incidents/components/incidents_list.vue
index ee2560a0328..c1a73ba56f7 100644
--- a/app/assets/javascripts/incidents/components/incidents_list.vue
+++ b/app/assets/javascripts/incidents/components/incidents_list.vue
@@ -8,12 +8,14 @@ import {
   GlAvatar,
   GlTooltipDirective,
   GlButton,
+  GlSearchBoxByType,
 } from '@gitlab/ui';
+import { debounce } from 'lodash';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 import { s__ } from '~/locale';
 import { mergeUrlParams, joinPaths, visitUrl } from '~/lib/utils/url_utility';
 import getIncidents from '../graphql/queries/get_incidents.query.graphql';
-import { I18N } from '../constants';
+import { I18N, INCIDENT_SEARCH_DELAY } from '../constants';
 
 const tdClass =
   'table-col gl-display-flex d-md-table-cell gl-align-items-center gl-white-space-nowrap';
@@ -52,6 +54,7 @@ export default {
     GlAvatar,
     GlButton,
     TimeAgoTooltip,
+    GlSearchBoxByType,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -62,6 +65,7 @@ export default {
       query: getIncidents,
       variables() {
         return {
+          searchTerm: this.searchTerm,
           projectPath: this.projectPath,
           labelNames: ['incident'],
         };
@@ -77,11 +81,12 @@ export default {
       errored: false,
       isErrorAlertDismissed: false,
       redirecting: false,
+      searchTerm: '',
     };
   },
   computed: {
     showErrorMsg() {
-      return this.errored && !this.isErrorAlertDismissed;
+      return this.errored && !this.isErrorAlertDismissed && !this.searchTerm;
     },
     loading() {
       return this.$apollo.queries.incidents.loading;
@@ -98,6 +103,13 @@ export default {
       return mergeUrlParams({ issuable_template: this.incidentTemplateName }, this.newIssuePath);
     },
   },
+  watch: {
+    searchTerm: debounce(function debounceSearch(input) {
+      if (input !== this.searchTerm) {
+        this.searchTerm = input;
+      }
+    }, INCIDENT_SEARCH_DELAY),
+  },
   methods: {
     hasAssignees(assignees) {
       return Boolean(assignees.nodes?.length);
@@ -116,7 +128,7 @@ export default {
 
     <div class="gl-display-flex gl-justify-content-end">
       <gl-button
-        class="gl-mt-3 create-incident-button"
+        class="gl-mt-3 gl-mb-3 create-incident-button"
         data-testid="createIncidentBtn"
         :loading="redirecting"
         :disabled="redirecting"
@@ -129,6 +141,14 @@ export default {
       </gl-button>
     </div>
 
+    <div class="gl-bg-gray-10 gl-p-5 gl-border-b-solid gl-border-b-1 gl-border-gray-100">
+      <gl-search-box-by-type
+        v-model.trim="searchTerm"
+        class="gl-bg-white"
+        :placeholder="$options.i18n.searchPlaceholder"
+      />
+    </div>
+
     <h4 class="gl-display-block d-md-none my-3">
       {{ s__('IncidentManagement|Incidents') }}
     </h4>
diff --git a/app/assets/javascripts/incidents/constants.js b/app/assets/javascripts/incidents/constants.js
index 3e3d0ef71e1..a0064c44a6e 100644
--- a/app/assets/javascripts/incidents/constants.js
+++ b/app/assets/javascripts/incidents/constants.js
@@ -1,9 +1,11 @@
-/* eslint-disable import/prefer-default-export  */
-import { s__ } from '~/locale';
+import { s__, __ } from '~/locale';
 
 export const I18N = {
   errorMsg: s__('IncidentManagement|There was an error displaying the incidents.'),
   noIncidents: s__('IncidentManagement|No incidents to display.'),
   unassigned: s__('IncidentManagement|Unassigned'),
   createIncidentBtnLabel: s__('IncidentManagement|Create incident'),
+  searchPlaceholder: __('Search or filter results...'),
 };
+
+export const INCIDENT_SEARCH_DELAY = 300;
diff --git a/app/assets/javascripts/incidents/graphql/queries/get_incidents.query.graphql b/app/assets/javascripts/incidents/graphql/queries/get_incidents.query.graphql
index 9ec7f039764..e025a764c34 100644
--- a/app/assets/javascripts/incidents/graphql/queries/get_incidents.query.graphql
+++ b/app/assets/javascripts/incidents/graphql/queries/get_incidents.query.graphql
@@ -1,6 +1,11 @@
-query getIncidents($projectPath: ID!, $labelNames: [String], $state: IssuableState) {
+query getIncidents(
+  $searchTerm: String
+  $projectPath: ID!
+  $labelNames: [String]
+  $state: IssuableState
+) {
   project(fullPath: $projectPath) {
-    issues(state: $state, labelName: $labelNames) {
+    issues(search: $searchTerm, state: $state, labelName: $labelNames) {
       nodes {
         iid
         title