Add escalation policy dropdown to incidents sidebar

Adds widget to incidents to allow the user to set
or remove an escalation policy. This is used in
conjuction with the escalation status on incidents
to manage paging and escalations for the issue.
Co-Authored-By: Sarah Yasonik <syasonik@gitlab.com>

app/assets/javascripts/sidebar/components/sidebar_dropdown_widget.vue

@@ -10,6 +10,7 @@ import {
   GlIcon,
   GlTooltipDirective,
 } from '@gitlab/ui';
+import { kebabCase, snakeCase } from 'lodash';
 import createFlash from '~/flash';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { IssuableType } from '~/issues/constants';
@@ -221,6 +222,12 @@ export default {
       // MV to EE https://gitlab.com/gitlab-org/gitlab/-/issues/345311
       return this.issuableAttribute === IssuableType.Epic;
     },
+    formatIssuableAttribute() {
+      return {
+        kebab: kebabCase(this.issuableAttribute),
+        snake: snakeCase(this.issuableAttribute),
+      };
+    },
   },
   methods: {
     updateAttribute(attributeId) {
@@ -300,26 +307,28 @@ export default {
   <sidebar-editable-item
     ref="editable"
     :title="attributeTypeTitle"
-    :data-testid="`${issuableAttribute}-edit`"
+    :data-testid="`${formatIssuableAttribute.kebab}-edit`"
     :tracking="tracking"
     :loading="updating || loading"
     @open="handleOpen"
     @close="handleClose"
   >
     <template #collapsed>
+      <slot name="value-collapsed" :current-attribute="currentAttribute">
+        <div
+          v-if="isClassicSidebar"
+          v-gl-tooltip.left.viewport
+          :title="attributeTypeTitle"
+          class="sidebar-collapsed-icon"
+        >
+          <gl-icon :aria-label="attributeTypeTitle" :name="attributeTypeIcon" />
+          <span class="collapse-truncated-title">
+            {{ attributeTitle }}
+          </span>
+        </div>
+      </slot>
       <div
-        v-if="isClassicSidebar"
-        v-gl-tooltip.left.viewport
-        :title="attributeTypeTitle"
-        class="sidebar-collapsed-icon"
-      >
-        <gl-icon :size="16" :aria-label="attributeTypeTitle" :name="attributeTypeIcon" />
-        <span class="collapse-truncated-title">
-          {{ attributeTitle }}
-        </span>
-      </div>
-      <div
-        :data-testid="`select-${issuableAttribute}`"
+        :data-testid="`select-${formatIssuableAttribute.kebab}`"
         :class="isClassicSidebar ? 'hide-collapsed' : 'gl-mt-3'"
       >
         <span v-if="updating" class="gl-font-weight-bold">{{ selectedTitle }}</span>
@@ -337,7 +346,7 @@ export default {
             v-gl-tooltip="tooltipText"
             class="gl-text-gray-900! gl-font-weight-bold"
             :href="attributeUrl"
-            :data-qa-selector="`${issuableAttribute}_link`"
+            :data-qa-selector="`${formatIssuableAttribute.snake}_link`"
           >
             {{ attributeTitle }}
             <span v-if="isAttributeOverdue(currentAttribute)">{{ $options.i18n.expired }}</span>
@@ -359,7 +368,7 @@ export default {
       >
         <gl-search-box-by-type ref="search" v-model="searchTerm" />
         <gl-dropdown-item
-          :data-testid="`no-${issuableAttribute}-item`"
+          :data-testid="`no-${formatIssuableAttribute.kebab}-item`"
           :is-check-item="true"
           :is-checked="isAttributeChecked($options.noAttributeId)"
           @click="updateAttribute($options.noAttributeId)"
@@ -389,7 +398,7 @@ export default {
               :key="attrItem.id"
               :is-check-item="true"
               :is-checked="isAttributeChecked(attrItem.id)"
-              :data-testid="`${issuableAttribute}-items`"
+              :data-testid="`${formatIssuableAttribute.kebab}-items`"
               @click="updateAttribute(attrItem.id)"
             >
               {{ attrItem.title }}

app/assets/javascripts/sidebar/components/time_tracking/help_state.vue

@@ -38,7 +38,10 @@ export default {
 </script>
 
 <template>
-  <div data-testid="helpPane" class="time-tracking-help-state">
+  <div
+    data-testid="helpPane"
+    class="sidebar-help-state gl-bg-white gl-border-gray-100 gl-border-t-solid gl-border-b-solid gl-border-1"
+  >
     <div class="time-tracking-info">
       <h4>{{ __('Track time with quick actions') }}</h4>
       <p>{{ __('Quick actions can be used in description and comment boxes.') }}</p>

app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue

 <script>
-import { GlIcon, GlLink, GlModal, GlModalDirective, GlLoadingIcon } from '@gitlab/ui';
+import { GlIcon, GlLink, GlModal, GlButton, GlModalDirective, GlLoadingIcon } from '@gitlab/ui';
 import { IssuableType } from '~/issues/constants';
 import { s__, __ } from '~/locale';
 import { timeTrackingQueries } from '~/sidebar/constants';
@@ -21,6 +21,7 @@ export default {
     GlIcon,
     GlLink,
     GlModal,
+    GlButton,
     GlLoadingIcon,
     TimeTrackingCollapsedState,
     TimeTrackingSpentOnlyPane,
@@ -187,7 +188,11 @@ export default {
 </script>
 
 <template>
-  <div v-cloak class="time-tracker time-tracking-component-wrap" data-testid="time-tracker">
+  <div
+    v-cloak
+    class="time-tracker time-tracking-component-wrap sidebar-help-wrap"
+    data-testid="time-tracker"
+  >
     <time-tracking-collapsed-state
       v-if="showCollapsed"
       :show-comparison-state="showComparisonState"
@@ -198,25 +203,21 @@ export default {
       :time-spent-human-readable="humanTotalTimeSpent"
       :time-estimate-human-readable="humanTimeEstimate"
     />
-    <div class="hide-collapsed gl-line-height-20 gl-text-gray-900">
+    <div
+      class="hide-collapsed gl-line-height-20 gl-text-gray-900 gl-display-flex gl-align-items-center"
+    >
       {{ __('Time tracking') }}
       <gl-loading-icon v-if="isTimeTrackingInfoLoading" size="sm" inline />
-      <div
-        v-if="!showHelpState"
-        data-testid="helpButton"
-        class="help-button float-right"
-        @click="toggleHelpState(true)"
+      <gl-button
+        :data-testid="showHelpState ? 'closeHelpButton' : 'helpButton'"
+        category="tertiary"
+        size="small"
+        variant="link"
+        class="gl-ml-auto"
+        @click="toggleHelpState(!showHelpState)"
       >
-        <gl-icon name="question-o" />
-      </div>
-      <div
-        v-else
-        data-testid="closeHelpButton"
-        class="close-help-button float-right"
-        @click="toggleHelpState(false)"
-      >
-        <gl-icon name="close" />
-      </div>
+        <gl-icon :name="showHelpState ? 'close' : 'question-o'" class="gl-text-gray-900!" />
+      </gl-button>
     </div>
     <div v-if="!isTimeTrackingInfoLoading" class="hide-collapsed">
       <div v-if="showEstimateOnlyState" data-testid="estimateOnlyPane">

app/assets/stylesheets/pages/issuable.scss

@@ -742,6 +742,26 @@
   }
 }
 
+.sidebar-help-wrap {
+  .sidebar-help-state {
+    margin: 16px -20px -20px;
+    padding: 16px 20px;
+  }
+
+  .help-state-toggle-enter-active {
+    transition: all 0.8s ease;
+  }
+
+  .help-state-toggle-leave-active {
+    transition: all 0.5s ease;
+  }
+
+  .help-state-toggle-enter,
+  .help-state-toggle-leave-active {
+    opacity: 0;
+  }
+}
+
 .time-tracker {
   .sidebar-collapsed-icon {
     > .stopwatch-svg {
@@ -759,11 +779,6 @@
     }
   }
 
-  .help-button,
-  .close-help-button {
-    cursor: pointer;
-  }
-
   .compare-meter {
     &.over_estimate {
       .time-remaining,
@@ -776,31 +791,6 @@
   .compare-display-container {
     font-size: 13px;
   }
-
-  .time-tracking-help-state {
-    background: $white;
-    margin: 16px -20px -20px;
-    padding: 16px 20px;
-    border-top: 1px solid $border-gray-light;
-    border-bottom: 1px solid $border-gray-light;
-
-    a:hover {
-      color: $btn-white-active;
-    }
-  }
-
-  .help-state-toggle-enter-active {
-    transition: all 0.8s ease;
-  }
-
-  .help-state-toggle-leave-active {
-    transition: all 0.5s ease;
-  }
-
-  .help-state-toggle-enter,
-  .help-state-toggle-leave-active {
-    opacity: 0;
-  }
 }
 
 .issuable-todo-btn {

ee/app/assets/javascripts/sidebar/components/incidents/constants.js

+import { s__, __ } from '~/locale';
+import { SIDEBAR_ESCALATION_POLICY_TITLE, none } from '../../constants';
+
+export const i18nHelpText = {
+  title: s__('IncidentManagement|Page your team with escalation policies'),
+  detail: s__(
+    'IncidentManagement|Use escalation policies to automatically page your team when incidents are created.',
+  ),
+  linkText: __('Learn more'),
+};
+
+export const i18nPolicyText = {
+  paged: s__('IncidentManagement|Paged'),
+  title: SIDEBAR_ESCALATION_POLICY_TITLE,
+  none,
+};

ee/app/assets/javascripts/sidebar/components/incidents/escalation_policies_empty_state.vue

+<script>
+import { GlIcon, GlButton } from '@gitlab/ui';
+import { i18nPolicyText } from './constants';
+import EscalationPolicyHelpState from './escalation_policy_help_state.vue';
+import EscalationPolicyCollapsedState from './escalation_policy_collapsed_state.vue';
+
+export default {
+  i18n: i18nPolicyText,
+  components: {
+    GlIcon,
+    GlButton,
+    EscalationPolicyCollapsedState,
+    EscalationPolicyHelpState,
+  },
+  data() {
+    return {
+      showHelp: false,
+    };
+  },
+  methods: {
+    toggleHelpState() {
+      this.showHelp = !this.showHelp;
+    },
+  },
+};
+</script>
+
+<template>
+  <div data-testid="escalation-policy-edit">
+    <div class="hide-collapsed sidebar-help-wrap">
+      <div class="gl-line-height-2 gl-text-gray-900 gl-display-flex gl-align-items-center gl-mb-2">
+        <span>{{ $options.i18n.title }}</span>
+        <gl-button
+          :data-testid="showHelp ? 'close-help-button' : 'help-button'"
+          category="tertiary"
+          size="small"
+          variant="link"
+          class="gl-ml-auto"
+          @click="toggleHelpState"
+        >
+          <gl-icon :name="showHelp ? 'close' : 'question-o'" class="gl-text-gray-900!" />
+        </gl-button>
+      </div>
+
+      <div data-testid="select-escalation-policy" class="hide-collapsed gl-line-height-14">
+        <span class="gl-text-gray-500">
+          {{ $options.i18n.none }}
+        </span>
+      </div>
+
+      <escalation-policy-help-state v-if="showHelp" />
+    </div>
+
+    <escalation-policy-collapsed-state />
+  </div>
+</template>

ee/app/assets/javascripts/sidebar/components/incidents/escalation_policy_collapsed_state.vue

+<script>
+import { GlIcon, GlTooltipDirective } from '@gitlab/ui';
+import { i18nPolicyText } from './constants';
+
+export default {
+  i18n: i18nPolicyText,
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  components: {
+    GlIcon,
+  },
+  props: {
+    value: {
+      type: String,
+      required: false,
+      default: null,
+    },
+  },
+  computed: {
+    policyText() {
+      return this.value ? this.$options.i18n.paged : this.$options.i18n.none;
+    },
+    tooltipText() {
+      const policyName = this.value || this.$options.i18n.none;
+
+      return `${this.$options.i18n.title}: ${policyName}`;
+    },
+  },
+};
+</script>
+
+<template>
+  <div
+    v-gl-tooltip.left.viewport
+    :title="tooltipText"
+    class="sidebar-collapsed-icon"
+    data-testid="sidebar-collapsed-attribute-title"
+  >
+    <gl-icon :aria-label="$options.i18n.title" name="mobile" />
+    <span class="collapse-truncated-title">
+      {{ policyText }}
+    </span>
+  </div>
+</template>

ee/app/assets/javascripts/sidebar/components/incidents/escalation_policy_help_state.vue

+<script>
+import { GlButton } from '@gitlab/ui';
+import { helpPagePath } from '~/helpers/help_page_helper';
+import { i18nHelpText } from './constants';
+
+export default {
+  POLICIES_PATH: helpPagePath('operations/incident_management/escalation_policies.md'),
+  i18n: i18nHelpText,
+  components: {
+    GlButton,
+  },
+};
+</script>
+
+<template>
+  <transition name="help-state-toggle">
+    <div
+      class="sidebar-help-state gl-bg-white gl-border-gray-100 gl-border-t-solid gl-border-b-solid gl-border-1"
+    >
+      <div>
+        <h4>{{ $options.i18n.title }}</h4>
+        <p>{{ $options.i18n.detail }}</p>
+        <gl-button :href="$options.POLICIES_PATH">{{ $options.i18n.linkText }}</gl-button>
+      </div>
+    </div>
+  </transition>
+</template>

ee/app/assets/javascripts/sidebar/components/incidents/sidebar_escalation_policy.vue

+<script>
+import { GlLink } from '@gitlab/ui';
+import { joinPaths } from '~/lib/utils/url_utility';
+import { IssuableType } from '~/issues/constants';
+import { IssuableAttributeType } from '../../constants';
+import SidebarDropdownWidget from '../sidebar_dropdown_widget.vue';
+import EscalationPoliciesEmptyState from './escalation_policies_empty_state.vue';
+import EscalationPolicyCollapsedState from './escalation_policy_collapsed_state.vue';
+
+export default {
+  INDEX_PATH: '-/escalation_policies',
+  components: {
+    SidebarDropdownWidget,
+    EscalationPolicyCollapsedState,
+    GlLink,
+    EscalationPoliciesEmptyState,
+  },
+  props: {
+    projectPath: {
+      required: true,
+      type: String,
+    },
+    iid: {
+      required: true,
+      type: String,
+    },
+    escalationsPossible: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+  },
+  computed: {
+    policiesPath() {
+      return joinPaths(gon.relative_url_root || '/', this.projectPath, this.$options.INDEX_PATH);
+    },
+  },
+  created() {
+    this.issuableType = IssuableType.Issue;
+    this.issuableAttribute = IssuableAttributeType.EscalationPolicy;
+  },
+};
+</script>
+
+<template>
+  <sidebar-dropdown-widget
+    v-if="escalationsPossible"
+    :attr-workspace-path="projectPath"
+    :workspace-path="projectPath"
+    :iid="iid"
+    :issuable-type="issuableType"
+    :issuable-attribute="issuableAttribute"
+  >
+    <template #value-collapsed="{ currentAttribute }">
+      <escalation-policy-collapsed-state :value="currentAttribute && currentAttribute.title" />
+    </template>
+
+    <template #value="{ attributeTitle }">
+      <gl-link class="gl-text-gray-900! gl-font-weight-bold" :href="policiesPath">
+        {{ attributeTitle }}
+      </gl-link>
+    </template>
+  </sidebar-dropdown-widget>
+
+  <escalation-policies-empty-state v-else />
+</template>

ee/app/assets/javascripts/sidebar/components/sidebar_dropdown_widget.vue

@@ -6,12 +6,14 @@ import {
   IssuableAttributeType,
   IssuableAttributeState,
   issuableAttributesQueries,
+  SIDEBAR_ESCALATION_POLICY_TITLE,
 } from '../constants';
 
 const widgetTitleText = {
   [IssuableAttributeType.Milestone]: __('Milestone'),
   [IssuableAttributeType.Iteration]: __('Iteration'),
   [IssuableAttributeType.Epic]: __('Epic'),
+  [IssuableAttributeType.EscalationPolicy]: SIDEBAR_ESCALATION_POLICY_TITLE,
   none: __('None'),
   expired: __('(expired)'),
 };
@@ -33,6 +35,7 @@ export default {
           IssuableAttributeType.Milestone,
           IssuableAttributeType.Iteration,
           IssuableAttributeType.Epic,
+          IssuableAttributeType.EscalationPolicy,
         ].includes(value);
       },
     },

ee/app/assets/javascripts/sidebar/constants.js

@@ -20,6 +20,9 @@ import projectIssueEpicQuery from './queries/project_issue_epic.query.graphql';
 import projectIssueIterationMutation from './queries/project_issue_iteration.mutation.graphql';
 import projectIssueIterationQuery from './queries/project_issue_iteration.query.graphql';
 import updateIssueWeightMutation from './queries/update_issue_weight.mutation.graphql';
+import issueEscalationPolicyQuery from './queries/issue_escalation_policy.query.graphql';
+import issueEscalationPolicyMutation from './queries/issue_escalation_policy.mutation.graphql';
+import projectEscalationPoliciesQuery from './queries/project_escalation_policies.query.graphql';
 
 export { Tracking, defaultEpicSort, epicIidPattern };
 
@@ -60,6 +63,8 @@ export const healthStatusForRestApi = {
   [healthStatus.AT_RISK]: 'at_risk',
 };
 
+export const SIDEBAR_ESCALATION_POLICY_TITLE = __('Escalation policy');
+
 export const MAX_DISPLAY_WEIGHT = 99999;
 
 export const I18N_DROPDOWN = {
@@ -109,10 +114,24 @@ const epicsQueries = {
   },
 };
 
+const issuableEscalationPolicyQueries = {
+  [IssuableType.Issue]: {
+    query: issueEscalationPolicyQuery,
+    mutation: issueEscalationPolicyMutation,
+  },
+};
+
+const escalationPoliciesQueries = {
+  [IssuableType.Issue]: {
+    query: projectEscalationPoliciesQuery,
+  },
+};
+
 export const IssuableAttributeType = {
   ...IssuableAttributeTypeFoss,
   Iteration: 'iteration',
   Epic: 'epic',
+  EscalationPolicy: 'escalation policy', // eslint-disable-line @gitlab/require-i18n-strings
 };
 
 export const IssuableAttributeState = {
@@ -131,6 +150,10 @@ export const issuableAttributesQueries = {
     current: issuableEpicQueries,
     list: epicsQueries,
   },
+  [IssuableAttributeType.EscalationPolicy]: {
+    current: issuableEscalationPolicyQueries,
+    list: escalationPoliciesQueries,
+  },
 };
 
 export const ancestorsQueries = {

ee/app/assets/javascripts/sidebar/mount_sidebar.js

@@ -9,6 +9,7 @@ import IterationSidebarDropdownWidget from './components/iteration_sidebar_dropd
 import SidebarDropdownWidget from './components/sidebar_dropdown_widget.vue';
 import SidebarStatus from './components/status/sidebar_status.vue';
 import SidebarWeightWidget from './components/weight/sidebar_weight_widget.vue';
+import SidebarEscalationPolicy from './components/incidents/sidebar_escalation_policy.vue';
 import { IssuableAttributeType } from './constants';
 
 Vue.use(VueApollo);
@@ -148,6 +149,36 @@ function mountIterationSelect() {
   });
 }
 
+function mountEscalationPoliciesSelect() {
+  const el = document.querySelector('#js-escalation-policy');
+
+  if (!el) {
+    return false;
+  }
+
+  const { canEdit, projectPath, issueIid, hasEscalationPolicies } = el.dataset;
+
+  return new Vue({
+    el,
+    apolloProvider,
+    components: {
+      SidebarEscalationPolicy,
+    },
+    provide: {
+      canUpdate: parseBoolean(canEdit),
+      isClassicSidebar: true,
+    },
+    render: (createElement) =>
+      createElement('sidebar-escalation-policy', {
+        props: {
+          projectPath,
+          iid: issueIid,
+          escalationsPossible: parseBoolean(hasEscalationPolicies),
+        },
+      }),
+  });
+}
+
 export const { getSidebarOptions } = CEMountSidebar;
 
 export function mountSidebar(mediator, store) {
@@ -156,5 +187,6 @@ export function mountSidebar(mediator, store) {
   mountStatusComponent(store);
   mountEpicsSelect();
   mountIterationSelect();
+  mountEscalationPoliciesSelect();
   mountCveIdRequestComponent(store);
 }

ee/app/assets/javascripts/sidebar/queries/escalation_policy.fragment.graphql

+fragment EscalationPolicyFragment on EscalationPolicyType {
+  __typename
+  id
+  title: name
+}

ee/app/assets/javascripts/sidebar/queries/issue_escalation_policy.mutation.graphql

+#import "./escalation_policy.fragment.graphql"
+
+mutation issueEscalationPolicyMutation(
+  $fullPath: ID!
+  $iid: String!
+  $attributeId: IncidentManagementEscalationPolicyID
+) {
+  issuableSetAttribute: issueSetEscalationPolicy(
+    input: { projectPath: $fullPath, iid: $iid, escalationPolicyId: $attributeId }
+  ) {
+    __typename
+    errors
+    issuable: issue {
+      __typename
+      id
+      attribute: escalationPolicy {
+        ...EscalationPolicyFragment
+      }
+      escalationStatus
+    }
+  }
+}

ee/app/assets/javascripts/sidebar/queries/issue_escalation_policy.query.graphql

+#import "./escalation_policy.fragment.graphql"
+
+query issueEscalationPolicy($fullPath: ID!, $iid: String!) {
+  workspace: project(fullPath: $fullPath) {
+    __typename
+    id
+    issuable: issue(iid: $iid) {
+      __typename
+      id
+      attribute: escalationPolicy {
+        ...EscalationPolicyFragment
+      }
+    }
+  }
+}

ee/app/assets/javascripts/sidebar/queries/project_escalation_policies.query.graphql

+#import "./escalation_policy.fragment.graphql"
+
+query projectEscalationPolicies($fullPath: ID!, $title: String) {
+  workspace: project(fullPath: $fullPath) {
+    __typename
+    id
+    attributes: incidentManagementEscalationPolicies(name: $title) {
+      nodes {
+        ...EscalationPolicyFragment
+        __typename
+      }
+    }
+  }
+}

ee/app/views/shared/issuable/_sidebar_escalation_policy.html.haml

 - if issuable_sidebar[:supports_escalation_policies]
   .block.escalation-policy{ data: { testid: 'escalation_policy_container' } }
-    #js-escalation-policy{ data: { can_edit: issuable_sidebar.dig(:current_user, :can_update_escalation_policy).to_s, project_path: issuable_sidebar[:project_full_path], issue_iid: issuable_sidebar[:iid] } }
+    #js-escalation-policy{ data: { can_edit: issuable_sidebar.dig(:current_user, :can_update_escalation_policy).to_s, project_path: issuable_sidebar[:project_full_path], issue_iid: issuable_sidebar[:iid], has_escalation_policies: @project.incident_management_escalation_policies.any?.to_s } }

ee/spec/features/incidents/incident_details_spec.rb

+# frozen_string_literal: true
+
+require 'spec_helper'
+
+RSpec.describe 'Incident details', :js do
+  let_it_be(:project) { create(:project) }
+  let_it_be(:reporter) { create(:user) }
+  let_it_be(:developer) { create(:user) }
+  let_it_be(:incident, reload: true) { create(:incident, :with_escalation_status, project: project) }
+
+  let(:current_user) { reporter }
+  let(:sidebar) { page.find('.right-sidebar') }
+
+  before_all do
+    project.add_reporter(reporter)
+    project.add_developer(developer)
+  end
+
+  before do
+    sign_in(current_user)
+  end
+
+  context 'escalation policy widget' do
+    let(:escalation_policy_container) { sidebar.find('[data-testid="escalation_policy_container"]') }
+
+    shared_examples 'hides the escalation policy widget' do
+      specify do
+        visit_incident_with_expanded_sidebar
+
+        expect(sidebar).not_to have_selector('[data-testid="escalation_policy_container"]')
+      end
+    end
+
+    shared_examples 'hides the edit button' do
+      specify do
+        visit_incident_with_expanded_sidebar
+
+        expect(escalation_policy_container).not_to have_selector('[data-testid="edit-button"]')
+      end
+    end
+
+    shared_examples 'shows empty state for escalation policy' do
+      specify do
+        visit_incident_with_expanded_sidebar
+        assert_expanded_policy_values('None')
+
+        collapse_sidebar
+        assert_collapsed_policy_values('None', 'None')
+      end
+    end
+
+    # Depends on escalation_policy being defined
+    shared_examples 'shows attributes of assigned escalation policy' do
+      specify do
+        visit_incident_with_expanded_sidebar
+        assert_expanded_policy_values(escalation_policy.name, href: true)
+
+        collapse_sidebar
+        assert_collapsed_policy_values('Paged', escalation_policy.name)
+      end
+    end
+
+    context 'escalation policies licensed feature available' do
+      before do
+        stub_licensed_features(oncall_schedules: true, escalation_policies: true)
+      end
+
+      context 'with incident_escalations feature flag enabled' do
+        context 'with escalation policies in the project' do
+          let_it_be(:escalation_policy) { create(:incident_management_escalation_policy, project: project) }
+
+          let(:edit_policy_widget) { escalation_policy_container.find('[data-testid="escalation-policy-edit"]') }
+
+          context 'without escalation policy linked to incident' do
+            context 'with only view permissions' do
+              it_behaves_like 'shows empty state for escalation policy'
+              it_behaves_like 'hides the edit button'
+            end
+
+            context 'with edit permissions' do
+              let(:current_user) { developer }
+
+              it_behaves_like 'shows empty state for escalation policy'
+
+              it 'can set the policy for the incident' do
+                visit_incident_with_expanded_sidebar
+
+                assert_edit_button_exists_and_click
+                assert_policy_in_list.click
+                assert_expanded_policy_values(escalation_policy.name, href: true)
+              end
+
+              it 'can search for policies' do
+                visit_incident_with_expanded_sidebar
+                assert_edit_button_exists_and_click
+
+                # List all
+                assert_policy_in_list
+                assert_null_policy_in_list
+
+                # Filter w/ match
+                search_bar.send_keys escalation_policy.name.first(3)
+                wait_for_requests
+                assert_policy_in_list
+
+                # Filter w/ no match
+                search_bar.send_keys 'Bar'
+                wait_for_requests
+                expect(edit_policy_widget).to have_content 'No escalation policy found'
+              end
+            end
+          end
+
+          context 'with escalation policy linked to incident' do
+            before do
+              incident.escalation_status.update!(policy: escalation_policy, escalations_started_at: Time.current)
+            end
+
+            context 'with only view permissions' do
+              it_behaves_like 'shows attributes of assigned escalation policy'
+              it_behaves_like 'hides the edit button'
+            end
+
+            context 'with edit permissions' do
+              let(:current_user) { developer }
+
+              it_behaves_like 'shows attributes of assigned escalation policy'
+
+              it 'can remove the policy from the incident' do
+                visit_incident_with_expanded_sidebar
+
+                assert_edit_button_exists_and_click
+                assert_null_policy_in_list.click
+                assert_expanded_policy_values('None')
+              end
+
+              context 'with alert associated with the incident' do
+                let_it_be(:alert) { create(:alert_management_alert, issue: incident) }
+
+                it_behaves_like 'shows attributes of assigned escalation policy'
+                it_behaves_like 'hides the edit button'
+              end
+            end
+          end
+
+          private
+
+          def assert_edit_button_exists_and_click
+            expect(edit_policy_widget).to have_button('Edit')
+            edit_button.click
+            wait_for_requests
+          end
+
+          def assert_policy_in_list
+            policy_item = edit_policy_widget.find('[data-testid="escalation-policy-items"]')
+            expect(policy_item).to have_content escalation_policy.name
+
+            policy_item
+          end
+
+          def assert_null_policy_in_list
+            null_policy_item = edit_policy_widget.find('[data-testid="no-escalation-policy-item"]')
+            expect(null_policy_item).to have_content 'No escalation policy'
+
+            null_policy_item
+          end
+
+          def edit_button
+            edit_policy_widget.find('[data-testid="edit-button"]')
+          end
+
+          def search_bar
+            edit_policy_widget.find('.gl-form-input')
+          end
+        end
+
+        context 'with no escalation policies in the project' do
+          it_behaves_like 'shows empty state for escalation policy'
+
+          it 'lets users open, view, and close the escalation policy help menu' do
+            visit_incident_with_expanded_sidebar
+
+            escalation_policy_container.find('[data-testid="help-button"]').click
+
+            expect(escalation_policy_container).to have_content('Page your team')
+            expect(escalation_policy_container).to have_content('Use escalation policies to automatically page your team')
+
+            escalation_policy_container.find('[data-testid="close-help-button"]').click
+
+            expect(escalation_policy_container).not_to have_content('Page your team')
+          end
+        end
+      end
+
+      context 'with incident_escalations feature flag disabled' do
+        before do
+          stub_feature_flags(incident_escalations: false)
+        end
+
+        it_behaves_like 'hides the escalation policy widget'
+      end
+    end
+
+    context 'escalation policies lisenced feature unavailable' do
+      it_behaves_like 'hides the escalation policy widget'
+    end
+  end
+
+  private
+
+  def visit_incident_with_collapsed_sidebar
+    visit project_issues_incident_path(project, incident)
+    wait_for_requests
+    collapse_sidebar
+  end
+
+  def visit_incident_with_expanded_sidebar
+    visit project_issues_incident_path(project, incident)
+    wait_for_requests
+  end
+
+  def expand_sidebar
+    sidebar.find('[data-testid="chevron-double-lg-left-icon"]').click
+  end
+
+  def collapse_sidebar
+    sidebar.find('[data-testid="chevron-double-lg-right-icon"]').click
+  end
+
+  def assert_collapsed_policy_values(collapsed_name, policy_name)
+    expect(escalation_policy_container).to have_selector('[data-testid="mobile-icon"]')
+    expect(escalation_policy_container).to have_content(collapsed_name)
+
+    escalation_policy_container.hover
+    expect(page).to have_content("Escalation policy: #{policy_name}")
+  end
+
+  def assert_expanded_policy_values(policy_name, href: false)
+    expect(escalation_policy_container).to have_content('Escalation policy')
+
+    if href
+      expect(escalation_policy_container).to have_link(
+        policy_name,
+        href: project_incident_management_escalation_policies_path(project)
+      )
+    else
+      expect(escalation_policy_container).to have_content(policy_name)
+    end
+  end
+end

ee/spec/features/issues/issue_sidebar_spec.rb

@@ -275,6 +275,12 @@ RSpec.describe 'Issue Sidebar' do
     end
   end
 
+  context 'escalation policy', :js do
+    it 'is not available for default issue type' do
+      expect(page).not_to have_selector('.block.escalation-policy')
+    end
+  end
+
   def find_and_click_edit_iteration
     page.find('[data-testid="iteration-edit"] [data-testid="edit-button"]').click
 

ee/spec/frontend/sidebar/components/incidents/mock_data.js

+export const mockEscalationPolicy1 = {
+  __typename: 'EscalationPolicyType',
+  id: 'gid://gitlab/IncidentManagement::EscalationPolicy/1',
+  title: 'First policy',
+};
+
+export const mockEscalationPolicy2 = {
+  __typename: 'EscalationPolicyType',
+  id: 'gid://gitlab/IncidentManagement::EscalationPolicy/2',
+  title: 'Second policy',
+};
+
+export const mockEscalationPoliciesResponse = {
+  data: {
+    workspace: {
+      __typename: 'Project',
+      id: 'gid://gitlab/Project/1',
+      attributes: {
+        nodes: [mockEscalationPolicy1, mockEscalationPolicy2],
+        __typename: 'EscalationPolicyTypeConnection',
+      },
+    },
+  },
+};
+
+export const mockCurrentEscalationPolicyResponse = {
+  data: {
+    workspace: {
+      __typename: 'Project',
+      id: 'gid://gitlab/Project/1',
+      issuable: {
+        __typename: 'Issue',
+        id: 'gid://gitlab/Issue/1',
+        attribute: mockEscalationPolicy1,
+        escalationStatus: 'ACKNOWLEDGED',
+      },
+    },
+  },
+};
+
+export const mockNullEscalationPolicyResponse = {
+  data: {
+    workspace: {
+      __typename: 'Project',
+      id: 'gid://gitlab/Project/1',
+      issuable: {
+        __typename: 'Issue',
+        id: 'gid://gitlab/Issue/1',
+        attribute: null,
+        escalationStatus: 'TRIGGERED',
+      },
+    },
+  },
+};

ee/spec/frontend/sidebar/components/incidents/sidebar_escalation_policy_spec.js

+import VueApollo from 'vue-apollo';
+import Vue from 'vue';
+import { mount } from '@vue/test-utils';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import waitForPromises from 'helpers/wait_for_promises';
+import SidebarEscalationPolicy from 'ee/sidebar/components/incidents/sidebar_escalation_policy.vue';
+import policiesQuery from 'ee/sidebar/queries/project_escalation_policies.query.graphql';
+import currentPolicyQuery from 'ee/sidebar/queries/issue_escalation_policy.query.graphql';
+import { clickEdit } from '../../helpers';
+import {
+  mockEscalationPolicy1,
+  mockEscalationPolicy2,
+  mockEscalationPoliciesResponse,
+  mockCurrentEscalationPolicyResponse,
+  mockNullEscalationPolicyResponse,
+} from './mock_data';
+
+Vue.use(VueApollo);
+
+describe('Sidebar Escalation Policy Widget', () => {
+  let wrapper;
+  let mockApollo;
+  let propsData;
+  let provide;
+  let escalationPolicyResponse;
+
+  const createComponent = async () => {
+    mockApollo = createMockApollo([
+      [currentPolicyQuery, jest.fn().mockResolvedValue(escalationPolicyResponse)],
+      [policiesQuery, jest.fn().mockResolvedValue(mockEscalationPoliciesResponse)],
+    ]);
+
+    wrapper = extendedWrapper(
+      mount(SidebarEscalationPolicy, {
+        apolloProvider: mockApollo,
+        propsData,
+        provide,
+      }),
+    );
+
+    await waitForPromises();
+  };
+
+  beforeEach(() => {
+    propsData = {
+      projectPath: 'gitlab-test/test',
+      iid: '1',
+      escalationsPossible: true,
+    };
+
+    provide = {
+      canUpdate: true,
+      isClassicSidebar: true,
+    };
+
+    escalationPolicyResponse = mockCurrentEscalationPolicyResponse;
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+    mockApollo = null;
+    propsData = null;
+    provide = null;
+    escalationPolicyResponse = null;
+  });
+
+  const findNarrowSidebarPolicy = () => wrapper.findByTestId('sidebar-collapsed-attribute-title');
+  const findExpandedSidebarPolicy = () => wrapper.findByTestId('select-escalation-policy');
+  const findMobileIcon = () => wrapper.findByTestId('mobile-icon');
+  const findPolicyLink = () => wrapper.find('[href="/gitlab-test/test/-/escalation_policies"]');
+  const findHelpLink = () =>
+    wrapper.find('[href="/help/operations/incident_management/escalation_policies.md"]');
+
+  const verifyMobileIcon = () => {
+    it('renders the mobile icon', async () => {
+      await createComponent();
+
+      expect(findMobileIcon().exists()).toBe(true);
+      expect(findMobileIcon().classes('hide-collapsed')).toBe(false);
+    });
+  };
+  const verifyNarrowSidebarPolicyText = (text) => {
+    it(`renders '${text}' to describe the policy`, async () => {
+      await createComponent();
+
+      expect(findNarrowSidebarPolicy().text()).toBe(text);
+      expect(findNarrowSidebarPolicy().classes('hide-collapsed')).toBe(false);
+    });
+  };
+  const verifyExpandedSidebarPolicyText = (text) => {
+    it(`renders '${text}' to describe the policy`, async () => {
+      await createComponent();
+
+      expect(findExpandedSidebarPolicy().text()).toBe(text);
+      expect(findExpandedSidebarPolicy().classes('hide-collapsed')).toBe(true);
+      expect(findExpandedSidebarPolicy().isVisible()).toBe(true);
+    });
+  };
+  const verifyEmptyPolicyContent = () => {
+    describe('when the policy is not set', () => {
+      beforeEach(() => {
+        escalationPolicyResponse = mockNullEscalationPolicyResponse;
+      });
+
+      verifyMobileIcon();
+      verifyExpandedSidebarPolicyText('None');
+      verifyNarrowSidebarPolicyText('None');
+    });
+  };
+  const verifyPopulatedPolicyContent = () => {
+    describe('when the policy is initially set', () => {
+      verifyMobileIcon();
+      verifyExpandedSidebarPolicyText(mockEscalationPolicy1.title);
+      verifyNarrowSidebarPolicyText('Paged');
+
+      it('links to the escalation policies for the project', async () => {
+        await createComponent();
+
+        expect(findPolicyLink().exists()).toBe(true);
+      });
+    });
+  };
+
+  describe('when user has permissions to update policy', () => {
+    verifyEmptyPolicyContent();
+    verifyPopulatedPolicyContent();
+
+    it('renders list of escalation policies in the dropdown', async () => {
+      await createComponent();
+      await clickEdit(wrapper);
+
+      const dropdownItems = wrapper.findAllByTestId('escalation-policy-items');
+
+      expect(dropdownItems.at(0).text()).toBe(mockEscalationPolicy1.title);
+      expect(dropdownItems.at(1).text()).toBe(mockEscalationPolicy2.title);
+    });
+
+    describe('when a policy is selected', () => {
+      beforeEach(async () => {
+        await createComponent();
+        await clickEdit(wrapper);
+        await wrapper.findByTestId('escalation-policy-items').trigger('click');
+        await waitForPromises();
+      });
+
+      verifyPopulatedPolicyContent();
+    });
+  });
+
+  describe('when user does not have permissions to update policy', () => {
+    beforeEach(() => {
+      provide.canUpdate = false;
+    });
+
+    verifyEmptyPolicyContent();
+    verifyPopulatedPolicyContent();
+  });
+
+  describe('when escalation policies are not available for the project', () => {
+    beforeEach(() => {
+      propsData.escalationsPossible = false;
+    });
+
+    verifyEmptyPolicyContent();
+
+    it('can be opened and closed', async () => {
+      await createComponent();
+      await wrapper.find('[data-testid="help-button"]').trigger('click');
+
+      expect(findHelpLink().exists()).toBe(true);
+
+      await wrapper.find('[data-testid="close-help-button"]').trigger('click');
+
+      expect(findHelpLink().exists()).toBe(false);
+    });
+  });
+});

ee/spec/models/incident_management/escalation_policy_spec.rb

@@ -49,7 +49,9 @@ RSpec.describe IncidentManagement::EscalationPolicy do
     describe '.search_by_name' do
       subject { described_class.search_by_name('other') }
 
-      it { is_expected.to contain_exactly(other_policy) }
+      it 'does a case-insenstive search' do
+        expect(subject).to contain_exactly(other_policy)
+      end
     end
   end
 end

locale/gitlab.pot

@@ -14377,6 +14377,9 @@ msgstr ""
 msgid "Escalation policies must have at least one rule"
 msgstr ""
 
+msgid "Escalation policy"
+msgstr ""
+
 msgid "Escalation policy:"
 msgstr ""
 
@@ -19112,6 +19115,12 @@ msgstr ""
 msgid "IncidentManagement|Open"
 msgstr ""
 
+msgid "IncidentManagement|Page your team with escalation policies"
+msgstr ""
+
+msgid "IncidentManagement|Paged"
+msgstr ""
+
 msgid "IncidentManagement|Published"
 msgstr ""
 
@@ -19139,6 +19148,9 @@ msgstr ""
 msgid "IncidentManagement|Unpublished"
 msgstr ""
 
+msgid "IncidentManagement|Use escalation policies to automatically page your team when incidents are created."
+msgstr ""
+
 msgid "IncidentSettings|Activate \"time to SLA\" countdown timer"
 msgstr ""
 

qa/qa/page/component/issuable/sidebar.rb

@@ -40,7 +40,7 @@ module QA
             end
 
             base.view 'app/assets/javascripts/sidebar/components/sidebar_dropdown_widget.vue' do
-              element :milestone_link, 'data-qa-selector="`${issuableAttribute}_link`"' # rubocop:disable QA/ElementWithPattern
+              element :milestone_link, 'data-qa-selector="`${formatIssuableAttribute.snake}_link`"' # rubocop:disable QA/ElementWithPattern
             end
 
             base.view 'app/assets/javascripts/sidebar/components/sidebar_editable_item.vue' do

spec/factories/issues.rb

@@ -61,6 +61,15 @@ FactoryBot.define do
     factory :incident do
       issue_type { :incident }
       association :work_item_type, :default, :incident
+
+      # An escalation status record is created for all incidents
+      # in app code. This is a trait to avoid creating escalation
+      # status records in specs which do not need them.
+      trait :with_escalation_status do
+        after(:create) do |incident|
+          create(:incident_management_issuable_escalation_status, issue: incident)
+        end
+      end
     end
   end
 end

spec/support/shared_examples/quick_actions/issuable/time_tracking_quick_action_shared_examples.rb

@@ -66,7 +66,7 @@ RSpec.shared_examples 'issuable time tracker' do |issuable_type|
 
   it 'shows the help state when icon is clicked' do
     page.within '.time-tracking-component-wrap' do
-      find('.help-button').click
+      find('[data-testid="helpButton"]').click
       expect(page).to have_content 'Track time with quick actions'
       expect(page).to have_content 'Learn more'
     end
@@ -92,8 +92,8 @@ RSpec.shared_examples 'issuable time tracker' do |issuable_type|
 
   it 'hides the help state when close icon is clicked' do
     page.within '.time-tracking-component-wrap' do
-      find('.help-button').click
-      find('.close-help-button').click
+      find('[data-testid="helpButton"]').click
+      find('[data-testid="closeHelpButton"]').click
 
       expect(page).not_to have_content 'Track time with quick actions'
       expect(page).not_to have_content 'Learn more'
@@ -102,7 +102,7 @@ RSpec.shared_examples 'issuable time tracker' do |issuable_type|
 
   it 'displays the correct help url' do
     page.within '.time-tracking-component-wrap' do
-      find('.help-button').click
+      find('[data-testid="helpButton"]').click
 
       expect(find_link('Learn more')[:href]).to have_content('/help/user/project/time_tracking.md')
     end