Add latest changes from gitlab-org/gitlab@master

5 files changed, 178 insertions, 357 deletions

diff --git a/app/assets/javascripts/incidents/components/incidents_list.vue b/app/assets/javascripts/incidents/components/incidents_list.vue
index 3ecd911e814..245d71ce55f 100644
--- a/app/assets/javascripts/incidents/components/incidents_list.vue
+++ b/app/assets/javascripts/incidents/components/incidents_list.vue
@@ -2,41 +2,32 @@
 import {
   GlLoadingIcon,
   GlTable,
-  GlAlert,
   GlAvatarsInline,
   GlAvatarLink,
   GlAvatar,
   GlTooltipDirective,
   GlButton,
   GlIcon,
-  GlPagination,
-  GlTabs,
-  GlTab,
-  GlBadge,
   GlEmptyState,
 } from '@gitlab/ui';
-import Api from '~/api';
 import Tracking from '~/tracking';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
-import FilteredSearchBar from '~/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue';
-import AuthorToken from '~/vue_shared/components/filtered_search_bar/tokens/author_token.vue';
-import { convertToSnakeCase } from '~/lib/utils/text_utility';
-import { s__, __ } from '~/locale';
-import { urlParamsToObject } from '~/lib/utils/common_utils';
+import PaginatedTableWithSearchAndTabs from '~/vue_shared/components/paginated_table_with_search_and_tabs/paginated_table_with_search_and_tabs.vue';
 import {
-  visitUrl,
-  mergeUrlParams,
-  joinPaths,
-  updateHistory,
-  setUrlParams,
-} from '~/lib/utils/url_utility';
+  tdClass,
+  thClass,
+  bodyTrClass,
+  initialPaginationState,
+} from '~/vue_shared/components/paginated_table_with_search_and_tabs/constants';
+import { convertToSnakeCase } from '~/lib/utils/text_utility';
+import { s__ } from '~/locale';
+import { visitUrl, mergeUrlParams, joinPaths } from '~/lib/utils/url_utility';
 import getIncidents from '../graphql/queries/get_incidents.query.graphql';
 import getIncidentsCountByStatus from '../graphql/queries/get_count_by_status.query.graphql';
 import SeverityToken from '~/sidebar/components/severity/severity.vue';
 import { INCIDENT_SEVERITY } from '~/sidebar/components/severity/constants';
 import {
   I18N,
-  DEFAULT_PAGE_SIZE,
   INCIDENT_STATUS_TABS,
   TH_CREATED_AT_TEST_ID,
   TH_INCIDENT_SLA_TEST_ID,
@@ -44,24 +35,12 @@ import {
   TH_PUBLISHED_TEST_ID,
   INCIDENT_DETAILS_PATH,
   trackIncidentCreateNewOptions,
+  trackIncidentListViewsOptions,
 } from '../constants';
 
-const tdClass =
-  'table-col gl-display-flex d-md-table-cell gl-align-items-center gl-white-space-nowrap';
-const thClass = 'gl-hover-bg-blue-50';
-const bodyTrClass =
-  'gl-border-1 gl-border-t-solid gl-border-gray-100 gl-hover-cursor-pointer gl-hover-bg-blue-50 gl-hover-border-b-solid gl-hover-border-blue-200';
-
-const initialPaginationState = {
-  currentPage: 1,
-  prevPageCursor: '',
-  nextPageCursor: '',
-  firstPageSize: DEFAULT_PAGE_SIZE,
-  lastPageSize: null,
-};
-
 export default {
   trackIncidentCreateNewOptions,
+  trackIncidentListViewsOptions,
   i18n: I18N,
   statusTabs: INCIDENT_STATUS_TABS,
   fields: [
@@ -112,23 +91,18 @@ export default {
   components: {
     GlLoadingIcon,
     GlTable,
-    GlAlert,
     GlAvatarsInline,
     GlAvatarLink,
     GlAvatar,
     GlButton,
     TimeAgoTooltip,
     GlIcon,
-    GlPagination,
-    GlTabs,
-    GlTab,
     PublishedCell: () => import('ee_component/incidents/components/published_cell.vue'),
     ServiceLevelAgreementCell: () =>
       import('ee_component/incidents/components/service_level_agreement_cell.vue'),
-    GlBadge,
     GlEmptyState,
     SeverityToken,
-    FilteredSearchBar,
+    PaginatedTableWithSearchAndTabs,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -142,8 +116,8 @@ export default {
     'publishedAvailable',
     'emptyListSvgPath',
     'textQuery',
-    'authorUsernamesQuery',
-    'assigneeUsernamesQuery',
+    'authorUsernameQuery',
+    'assigneeUsernameQuery',
     'slaFeatureAvailable',
   ],
   apollo: {
@@ -152,16 +126,16 @@ export default {
       variables() {
         return {
           searchTerm: this.searchTerm,
-          status: this.statusFilter,
+          authorUsername: this.authorUsername,
+          assigneeUsername: this.assigneeUsername,
           projectPath: this.projectPath,
+          status: this.statusFilter,
           issueTypes: ['INCIDENT'],
           sort: this.sort,
           firstPageSize: this.pagination.firstPageSize,
           lastPageSize: this.pagination.lastPageSize,
           prevPageCursor: this.pagination.prevPageCursor,
           nextPageCursor: this.pagination.nextPageCursor,
-          authorUsername: this.authorUsername,
-          assigneeUsernames: this.assigneeUsernames,
         };
       },
       update({ project: { issues: { nodes = [], pageInfo = {} } = {} } = {} }) {
@@ -180,7 +154,7 @@ export default {
         return {
           searchTerm: this.searchTerm,
           authorUsername: this.authorUsername,
-          assigneeUsernames: this.assigneeUsernames,
+          assigneeUsername: this.assigneeUsername,
           projectPath: this.projectPath,
           issueTypes: ['INCIDENT'],
         };
@@ -195,17 +169,17 @@ export default {
       errored: false,
       isErrorAlertDismissed: false,
       redirecting: false,
-      searchTerm: this.textQuery,
-      pagination: initialPaginationState,
       incidents: {},
+      incidentsCount: {},
       sort: 'created_desc',
       sortBy: 'createdAt',
       sortDesc: true,
       statusFilter: '',
       filteredByStatus: '',
-      authorUsername: this.authorUsernamesQuery,
-      assigneeUsernames: this.assigneeUsernamesQuery,
-      filterParams: {},
+      searchTerm: this.textQuery,
+      authorUsername: this.authorUsernameQuery,
+      assigneeUsername: this.assigneeUsernameQuery,
+      pagination: initialPaginationState,
     };
   },
   computed: {
@@ -215,29 +189,15 @@ export default {
     loading() {
       return this.$apollo.queries.incidents.loading;
     },
-    hasIncidents() {
-      return this.incidents?.list?.length;
-    },
-    incidentsForCurrentTab() {
-      return this.incidentsCount?.[this.filteredByStatus.toLowerCase()] ?? 0;
-    },
-    showPaginationControls() {
-      return Boolean(
-        this.incidents?.pageInfo?.hasNextPage || this.incidents?.pageInfo?.hasPreviousPage,
-      );
-    },
-    prevPage() {
-      return Math.max(this.pagination.currentPage - 1, 0);
+    isEmpty() {
+      return !this.incidents?.list?.length;
     },
-    nextPage() {
-      const nextPage = this.pagination.currentPage + 1;
-      return nextPage > Math.ceil(this.incidentsForCurrentTab / DEFAULT_PAGE_SIZE)
-        ? null
-        : nextPage;
+    showList() {
+      return !this.isEmpty || this.errored || this.loading;
     },
     tbodyTrClass() {
       return {
-        [bodyTrClass]: !this.loading && this.hasIncidents,
+        [bodyTrClass]: !this.loading && !this.isEmpty,
       };
     },
     newIncidentPath() {
@@ -257,12 +217,6 @@ export default {
 
       return this.$options.fields.filter(({ key }) => !isHidden[key]);
     },
-    isEmpty() {
-      return !this.incidents.list?.length;
-    },
-    showList() {
-      return !this.isEmpty || this.errored || this.loading;
-    },
     activeClosedTabHasNoIncidents() {
       const { all, closed } = this.incidentsCount || {};
       const isClosedTabActive = this.statusFilter === this.$options.statusTabs[1].filters;
@@ -285,63 +239,8 @@ export default {
         btnText: createIncidentBtnLabel,
       };
     },
-    filteredSearchTokens() {
-      return [
-        {
-          type: 'author_username',
-          icon: 'user',
-          title: __('Author'),
-          unique: true,
-          symbol: '@',
-          token: AuthorToken,
-          operators: [{ value: '=', description: __('is'), default: 'true' }],
-          fetchPath: this.projectPath,
-          fetchAuthors: Api.projectUsers.bind(Api),
-        },
-        {
-          type: 'assignee_username',
-          icon: 'user',
-          title: __('Assignees'),
-          unique: true,
-          symbol: '@',
-          token: AuthorToken,
-          operators: [{ value: '=', description: __('is'), default: 'true' }],
-          fetchPath: this.projectPath,
-          fetchAuthors: Api.projectUsers.bind(Api),
-        },
-      ];
-    },
-    filteredSearchValue() {
-      const value = [];
-
-      if (this.authorUsername) {
-        value.push({
-          type: 'author_username',
-          value: { data: this.authorUsername },
-        });
-      }
-
-      if (this.assigneeUsernames) {
-        value.push({
-          type: 'assignee_username',
-          value: { data: this.assigneeUsernames },
-        });
-      }
-
-      if (this.searchTerm) {
-        value.push(this.searchTerm);
-      }
-
-      return value;
-    },
   },
   methods: {
-    filterIncidentsByStatus(tabIndex) {
-      this.resetPagination();
-      const { filters, status } = this.$options.statusTabs[tabIndex];
-      this.statusFilter = filters;
-      this.filteredByStatus = status;
-    },
     hasAssignees(assignees) {
       return Boolean(assignees.nodes?.length);
     },
@@ -353,255 +252,170 @@ export default {
       Tracking.event(category, action);
       this.redirecting = true;
     },
-    handlePageChange(page) {
-      const { startCursor, endCursor } = this.incidents.pageInfo;
-
-      if (page > this.pagination.currentPage) {
-        this.pagination = {
-          ...initialPaginationState,
-          nextPageCursor: endCursor,
-          currentPage: page,
-        };
-      } else {
-        this.pagination = {
-          lastPageSize: DEFAULT_PAGE_SIZE,
-          firstPageSize: null,
-          prevPageCursor: startCursor,
-          nextPageCursor: '',
-          currentPage: page,
-        };
-      }
-    },
-    resetPagination() {
-      this.pagination = initialPaginationState;
-    },
     fetchSortedData({ sortBy, sortDesc }) {
       const sortingDirection = sortDesc ? 'DESC' : 'ASC';
       const sortingColumn = convertToSnakeCase(sortBy)
         .replace(/_.*/, '')
         .toUpperCase();
 
-      this.resetPagination();
+      this.pagination = initialPaginationState;
       this.sort = `${sortingColumn}_${sortingDirection}`;
     },
     getSeverity(severity) {
       return INCIDENT_SEVERITY[severity];
     },
-    handleFilterIncidents(filters) {
-      this.resetPagination();
-      const filterParams = { authorUsername: '', assigneeUsername: '', search: '' };
-
-      filters.forEach(filter => {
-        if (typeof filter === 'object') {
-          switch (filter.type) {
-            case 'author_username':
-              filterParams.authorUsername = filter.value.data;
-              break;
-            case 'assignee_username':
-              filterParams.assigneeUsername = filter.value.data;
-              break;
-            case 'filtered-search-term':
-              if (filter.value.data !== '') filterParams.search = filter.value.data;
-              break;
-            default:
-              break;
-          }
-        }
-      });
-
-      this.filterParams = filterParams;
-      this.updateUrl();
-      this.searchTerm = filterParams?.search;
-      this.authorUsername = filterParams?.authorUsername;
-      this.assigneeUsernames = filterParams?.assigneeUsername;
+    pageChanged(pagination) {
+      this.pagination = pagination;
     },
-    updateUrl() {
-      const queryParams = urlParamsToObject(window.location.search);
-      const { authorUsername, assigneeUsername, search } = this.filterParams || {};
-
-      if (authorUsername) {
-        queryParams.author_username = authorUsername;
-      } else {
-        delete queryParams.author_username;
-      }
-
-      if (assigneeUsername) {
-        queryParams.assignee_username = assigneeUsername;
-      } else {
-        delete queryParams.assignee_username;
-      }
-
-      if (search) {
-        queryParams.search = search;
-      } else {
-        delete queryParams.search;
-      }
-
-      updateHistory({
-        url: setUrlParams(queryParams, window.location.href, true),
-        title: document.title,
-        replace: true,
-      });
+    statusChanged({ filters, status }) {
+      this.statusFilter = filters;
+      this.filteredByStatus = status;
+    },
+    filtersChanged({ searchTerm, authorUsername, assigneeUsername }) {
+      this.searchTerm = searchTerm;
+      this.authorUsername = authorUsername;
+      this.assigneeUsername = assigneeUsername;
+    },
+    errorAlertDismissed() {
+      this.isErrorAlertDismissed = true;
     },
   },
 };
 </script>
 <template>
-  <div class="incident-management-list">
-    <gl-alert v-if="showErrorMsg" variant="danger" @dismiss="isErrorAlertDismissed = true">
-      {{ $options.i18n.errorMsg }}
-    </gl-alert>
-
-    <div
-      class="incident-management-list-header gl-display-flex gl-justify-content-space-between gl-border-b-solid gl-border-b-1 gl-border-gray-100"
-    >
-      <gl-tabs content-class="gl-p-0" @input="filterIncidentsByStatus">
-        <gl-tab v-for="tab in $options.statusTabs" :key="tab.status" :data-testid="tab.status">
-          <template #title>
-            <span>{{ tab.title }}</span>
-            <gl-badge v-if="incidentsCount" pill size="sm" class="gl-tab-counter-badge">
-              {{ incidentsCount[tab.status.toLowerCase()] }}
-            </gl-badge>
-          </template>
-        </gl-tab>
-      </gl-tabs>
-
-      <gl-button
-        v-if="!isEmpty || activeClosedTabHasNoIncidents"
-        class="gl-my-3 gl-mr-5 create-incident-button"
-        data-testid="createIncidentBtn"
-        data-qa-selector="create_incident_button"
-        :loading="redirecting"
-        :disabled="redirecting"
-        category="primary"
-        variant="success"
-        :href="newIncidentPath"
-        @click="navigateToCreateNewIncident"
-      >
-        {{ $options.i18n.createIncidentBtnLabel }}
-      </gl-button>
-    </div>
-
-    <div class="filtered-search-wrapper">
-      <filtered-search-bar
-        :namespace="projectPath"
-        :search-input-placeholder="$options.i18n.searchPlaceholder"
-        :tokens="filteredSearchTokens"
-        :initial-filter-value="filteredSearchValue"
-        initial-sortby="created_desc"
-        recent-searches-storage-key="incidents"
-        class="row-content-block"
-        @onFilter="handleFilterIncidents"
-      />
-    </div>
-
-    <h4 class="gl-display-block d-md-none my-3">
-      {{ s__('IncidentManagement|Incidents') }}
-    </h4>
-    <gl-table
-      v-if="showList"
+  <div>
+    <paginated-table-with-search-and-tabs
+      :show-items="showList"
+      :show-error-msg="showErrorMsg"
+      :i18n="$options.i18n"
       :items="incidents.list || []"
-      :fields="availableFields"
-      :show-empty="true"
-      :busy="loading"
-      stacked="md"
-      :tbody-tr-class="tbodyTrClass"
-      :no-local-sorting="true"
-      :sort-direction="'desc'"
-      :sort-desc.sync="sortDesc"
-      :sort-by.sync="sortBy"
-      sort-icon-left
-      fixed
-      @row-clicked="navigateToIncidentDetails"
-      @sort-changed="fetchSortedData"
+      :page-info="incidents.pageInfo"
+      :items-count="incidentsCount"
+      :status-tabs="$options.statusTabs"
+      :track-views-options="$options.trackIncidentListViewsOptions"
+      filter-search-key="incidents"
+      @page-changed="pageChanged"
+      @tabs-changed="statusChanged"
+      @filters-changed="filtersChanged"
+      @error-alert-dismissed="errorAlertDismissed"
     >
-      <template #cell(severity)="{ item }">
-        <severity-token :severity="getSeverity(item.severity)" />
+      <template #header-actions>
+        <gl-button
+          v-if="!isEmpty || activeClosedTabHasNoIncidents"
+          class="gl-my-3 gl-mr-5 create-incident-button"
+          data-testid="createIncidentBtn"
+          data-qa-selector="create_incident_button"
+          :loading="redirecting"
+          :disabled="redirecting"
+          category="primary"
+          variant="success"
+          :href="newIncidentPath"
+          @click="redirecting = true"
+        >
+          {{ $options.i18n.createIncidentBtnLabel }}
+        </gl-button>
       </template>
 
-      <template #cell(title)="{ item }">
-        <div :class="{ 'gl-display-flex gl-align-items-center': item.state === 'closed' }">
-          <div class="gl-max-w-full text-truncate" :title="item.title">{{ item.title }}</div>
-          <gl-icon
-            v-if="item.state === 'closed'"
-            name="issue-close"
-            class="gl-mx-1 gl-fill-blue-500 gl-flex-shrink-0"
-            :size="16"
-            data-testid="incident-closed"
-          />
-        </div>
+      <template #title>
+        {{ s__('IncidentManagement|Incidents') }}
       </template>
 
-      <template #cell(createdAt)="{ item }">
-        <time-ago-tooltip :time="item.createdAt" />
-      </template>
+      <template #table>
+        <gl-table
+          :items="incidents.list || []"
+          :fields="availableFields"
+          :show-empty="true"
+          :busy="loading"
+          stacked="md"
+          :tbody-tr-class="tbodyTrClass"
+          :no-local-sorting="true"
+          :sort-direction="'desc'"
+          :sort-desc.sync="sortDesc"
+          :sort-by.sync="sortBy"
+          sort-icon-left
+          fixed
+          @row-clicked="navigateToIncidentDetails"
+          @sort-changed="fetchSortedData"
+        >
+          <template #cell(severity)="{ item }">
+            <severity-token :severity="getSeverity(item.severity)" />
+          </template>
 
-      <template v-if="slaFeatureAvailable" #cell(incidentSla)="{ item }">
-        <service-level-agreement-cell :sla-due-at="item.slaDueAt" data-testid="incident-sla" />
-      </template>
+          <template #cell(title)="{ item }">
+            <div :class="{ 'gl-display-flex gl-align-items-center': item.state === 'closed' }">
+              <div class="gl-max-w-full text-truncate" :title="item.title">{{ item.title }}</div>
+              <gl-icon
+                v-if="item.state === 'closed'"
+                name="issue-close"
+                class="gl-mx-1 gl-fill-blue-500 gl-flex-shrink-0"
+                :size="16"
+                data-testid="incident-closed"
+              />
+            </div>
+          </template>
 
-      <template #cell(assignees)="{ item }">
-        <div data-testid="incident-assignees">
-          <template v-if="hasAssignees(item.assignees)">
-            <gl-avatars-inline
-              :avatars="item.assignees.nodes"
-              :collapsed="true"
-              :max-visible="4"
-              :avatar-size="24"
-              badge-tooltip-prop="name"
-              :badge-tooltip-max-chars="100"
-            >
-              <template #avatar="{ avatar }">
-                <gl-avatar-link
-                  :key="avatar.username"
-                  v-gl-tooltip
-                  target="_blank"
-                  :href="avatar.webUrl"
-                  :title="avatar.name"
+          <template #cell(createdAt)="{ item }">
+            <time-ago-tooltip :time="item.createdAt" />
+          </template>
+
+          <template v-if="slaFeatureAvailable" #cell(incidentSla)="{ item }">
+            <service-level-agreement-cell :sla-due-at="item.slaDueAt" data-testid="incident-sla" />
+          </template>
+
+          <template #cell(assignees)="{ item }">
+            <div data-testid="incident-assignees">
+              <template v-if="hasAssignees(item.assignees)">
+                <gl-avatars-inline
+                  :avatars="item.assignees.nodes"
+                  :collapsed="true"
+                  :max-visible="4"
+                  :avatar-size="24"
+                  badge-tooltip-prop="name"
+                  :badge-tooltip-max-chars="100"
                 >
-                  <gl-avatar :src="avatar.avatarUrl" :label="avatar.name" :size="24" />
-                </gl-avatar-link>
+                  <template #avatar="{ avatar }">
+                    <gl-avatar-link
+                      :key="avatar.username"
+                      v-gl-tooltip
+                      target="_blank"
+                      :href="avatar.webUrl"
+                      :title="avatar.name"
+                    >
+                      <gl-avatar :src="avatar.avatarUrl" :label="avatar.name" :size="24" />
+                    </gl-avatar-link>
+                  </template>
+                </gl-avatars-inline>
+              </template>
+              <template v-else>
+                {{ $options.i18n.unassigned }}
               </template>
-            </gl-avatars-inline>
+            </div>
           </template>
-          <template v-else>
-            {{ $options.i18n.unassigned }}
+
+          <template v-if="publishedAvailable" #cell(published)="{ item }">
+            <published-cell
+              :status-page-published-incident="item.statusPagePublishedIncident"
+              :un-published="$options.i18n.unPublished"
+            />
+          </template>
+          <template #table-busy>
+            <gl-loading-icon size="lg" color="dark" class="mt-3" />
           </template>
-        </div>
-      </template>
 
-      <template v-if="publishedAvailable" #cell(published)="{ item }">
-        <published-cell
-          :status-page-published-incident="item.statusPagePublishedIncident"
-          :un-published="$options.i18n.unPublished"
-        />
-      </template>
-      <template #table-busy>
-        <gl-loading-icon size="lg" color="dark" class="mt-3" />
+          <template v-if="errored" #empty>
+            {{ $options.i18n.noIncidents }}
+          </template>
+        </gl-table>
       </template>
-
-      <template v-if="errored" #empty>
-        {{ $options.i18n.noIncidents }}
+      <template #emtpy-state>
+        <gl-empty-state
+          :title="emptyStateData.title"
+          :svg-path="emptyListSvgPath"
+          :description="emptyStateData.description"
+          :primary-button-link="emptyStateData.btnLink"
+          :primary-button-text="emptyStateData.btnText"
+        />
       </template>
-    </gl-table>
-
-    <gl-empty-state
-      v-else
-      :title="emptyStateData.title"
-      :svg-path="emptyListSvgPath"
-      :description="emptyStateData.description"
-      :primary-button-link="emptyStateData.btnLink"
-      :primary-button-text="emptyStateData.btnText"
-    />
-
-    <gl-pagination
-      v-if="showPaginationControls"
-      :value="pagination.currentPage"
-      :prev-page="prevPage"
-      :next-page="nextPage"
-      align="center"
-      class="gl-pagination gl-mt-3"
-      @input="handlePageChange"
-    />
+    </paginated-table-with-search-and-tabs>
   </div>
 </template>
diff --git a/app/assets/javascripts/incidents/constants.js b/app/assets/javascripts/incidents/constants.js
index 4fccefb66c5..9c31a5702a2 100644
--- a/app/assets/javascripts/incidents/constants.js
+++ b/app/assets/javascripts/incidents/constants.js
@@ -1,5 +1,5 @@
 /* eslint-disable @gitlab/require-i18n-strings */
-import { s__, __ } from '~/locale';
+import { s__ } from '~/locale';
 
 export const I18N = {
   errorMsg: s__('IncidentManagement|There was an error displaying the incidents.'),
@@ -7,7 +7,6 @@ export const I18N = {
   unassigned: s__('IncidentManagement|Unassigned'),
   createIncidentBtnLabel: s__('IncidentManagement|Create incident'),
   unPublished: s__('IncidentManagement|Unpublished'),
-  searchPlaceholder: __('Search or filter results…'),
   emptyState: {
     title: s__('IncidentManagement|Display your incidents in a dedicated view'),
     emptyClosedTabTitle: s__('IncidentManagement|There are no closed incidents'),
@@ -43,6 +42,14 @@ export const trackIncidentCreateNewOptions = {
   action: 'create_incident_button_clicks',
 };
 
+/**
+ * Tracks snowplow event when user views incident list
+ */
+export const trackIncidentListViewsOptions = {
+  category: 'Incident Management',
+  action: 'view_incidents_list',
+};
+
 export const DEFAULT_PAGE_SIZE = 20;
 export const TH_CREATED_AT_TEST_ID = { 'data-testid': 'incident-management-created-at-sort' };
 export const TH_SEVERITY_TEST_ID = { 'data-testid': 'incident-management-severity-sort' };
diff --git a/app/assets/javascripts/incidents/graphql/queries/get_count_by_status.query.graphql b/app/assets/javascripts/incidents/graphql/queries/get_count_by_status.query.graphql
index fd96825c0f7..4e44a506c4f 100644
--- a/app/assets/javascripts/incidents/graphql/queries/get_count_by_status.query.graphql
+++ b/app/assets/javascripts/incidents/graphql/queries/get_count_by_status.query.graphql
@@ -3,14 +3,14 @@ query getIncidentsCountByStatus(
   $projectPath: ID!
   $issueTypes: [IssueType!]
   $authorUsername: String = ""
-  $assigneeUsernames: String = ""
+  $assigneeUsername: String = ""
 ) {
   project(fullPath: $projectPath) {
     issueStatusCounts(
       search: $searchTerm
       types: $issueTypes
       authorUsername: $authorUsername
-      assigneeUsername: $assigneeUsernames
+      assigneeUsername: $assigneeUsername
     ) {
       all
       opened
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 dd2a42ba4e8..f97664a3b77 100644
--- a/app/assets/javascripts/incidents/graphql/queries/get_incidents.query.graphql
+++ b/app/assets/javascripts/incidents/graphql/queries/get_incidents.query.graphql
@@ -11,7 +11,7 @@ query getIncidents(
   $nextPageCursor: String = ""
   $searchTerm: String = ""
   $authorUsername: String = ""
-  $assigneeUsernames: String = ""
+  $assigneeUsername: String = ""
 ) {
   project(fullPath: $projectPath) {
     issues(
@@ -20,7 +20,7 @@ query getIncidents(
       sort: $sort
       state: $status
       authorUsername: $authorUsername
-      assigneeUsername: $assigneeUsernames
+      assigneeUsername: $assigneeUsername
       first: $firstPageSize
       last: $lastPageSize
       after: $nextPageCursor
diff --git a/app/assets/javascripts/incidents/list.js b/app/assets/javascripts/incidents/list.js
index 15af7432436..6f87fbbe775 100644
--- a/app/assets/javascripts/incidents/list.js
+++ b/app/assets/javascripts/incidents/list.js
@@ -18,8 +18,8 @@ export default () => {
     publishedAvailable,
     emptyListSvgPath,
     textQuery,
-    authorUsernamesQuery,
-    assigneeUsernamesQuery,
+    authorUsernameQuery,
+    assigneeUsernameQuery,
     slaFeatureAvailable,
   } = domEl.dataset;
 
@@ -38,8 +38,8 @@ export default () => {
       publishedAvailable: parseBoolean(publishedAvailable),
       emptyListSvgPath,
       textQuery,
-      authorUsernamesQuery,
-      assigneeUsernamesQuery,
+      authorUsernameQuery,
+      assigneeUsernameQuery,
       slaFeatureAvailable: parseBoolean(slaFeatureAvailable),
     },
     apolloProvider,