Merge branch '333107-escalation-rule-progressive-arrow-size-change' into 'master'

Increase rule escalation rule arrow for each next rule

See merge request gitlab-org/gitlab!65576

app/assets/stylesheets/page_bundles/escalation_policies.scss

@@ -16,9 +16,6 @@ $stroke-size: 1px;
 
 .right-arrow {
   @include gl-relative;
-  @include gl-mx-5;
-  @include gl-display-inline-block;
-  @include gl-vertical-align-middle;
   height: $stroke-size;
   background-color: var(--gray-900, $gray-900);
   min-width: $gl-spacing-scale-7;
@@ -27,7 +24,6 @@ $stroke-size: 1px;
     @include gl-absolute;
     top: -2*$stroke-size;
     left: calc(100% - #{5*$stroke-size});
-    @include gl-display-inline-block;
     @include gl-p-1;
     @include gl-border-solid;
     border-width: 0 $stroke-size $stroke-size 0;
@@ -35,3 +31,24 @@ $stroke-size: 1px;
     transform: rotate(-45deg);
   }
 }
+
+.escalation-rule-row {
+  @media (max-width: $breakpoint-lg) {
+    @include gl-flex-wrap;
+  }
+}
+
+.rule-condition {
+  @media (min-width: $breakpoint-lg) {
+    flex-basis: 25%;
+    flex-shrink: 0;
+  }
+
+  @media (max-width: $breakpoint-lg) {
+    @include gl-w-full;
+  }
+}
+
+.rule-action {
+  min-width: 0;
+}

ee/app/assets/javascripts/escalation_policies/components/escalation_policy.vue

@@ -11,7 +11,7 @@ import {
   GlToken,
   GlAvatar,
 } from '@gitlab/ui';
-import { s__, __ } from '~/locale';
+import { s__, __, sprintf } from '~/locale';
 import {
   ACTIONS,
   ALERT_STATUSES,
@@ -26,8 +26,11 @@ import DeleteEscalationPolicyModal from './delete_escalation_policy_modal.vue';
 export const i18n = {
   editPolicy: s__('EscalationPolicies|Edit escalation policy'),
   deletePolicy: s__('EscalationPolicies|Delete escalation policy'),
-  escalationRule: s__(
-    'EscalationPolicies|IF alert is not %{alertStatus} in %{minutes} %{then} THEN %{doAction} %{scheduleOrUser}',
+  escalationRuleCondition: s__(
+    'EscalationPolicies|%{clockIcon} IF alert is not %{alertStatus} in %{minutes}',
+  ),
+  escalationRuleAction: s__(
+    'EscalationPolicies|%{notificationIcon} THEN %{doAction} %{forScheduleOrUser}',
   ),
   minutes: s__('EscalationPolicies|mins'),
   noRules: s__('EscalationPolicies|This policy has no escalation rules.'),
@@ -105,6 +108,21 @@ export default {
         : ACTIONS[EMAIL_USER]
       ).toLowerCase();
     },
+    getArrowLength(index) {
+      // each next rule arrow's length will be +4% of the container width
+      // the first arrow's length is 4% and the 10th is 40%
+      const length = (index + 1) * 4;
+      return `${length}%`;
+    },
+    getActionTooltip(rule) {
+      return sprintf(i18n.escalationRuleAction, {
+        notificationIcon: '',
+        doAction: this.getActionName(rule),
+        forScheduleOrUser: this.hasEscalationSchedule(rule)
+          ? rule.oncallSchedule.name
+          : rule.user.name,
+      });
+    },
   },
 };
 </script>
@@ -166,29 +184,41 @@ export default {
               v-for="(rule, ruleIndex) in policy.rules"
               :key="rule.id"
               :class="{ 'gl-mb-5': ruleIndex !== policy.rules.length - 1 }"
-              class="gl-display-flex gl-align-items-center"
+              class="gl-display-flex gl-align-items-center escalation-rule-row"
             >
+              <span class="rule-condition gl-md-w-full">
+                <gl-sprintf :message="$options.i18n.escalationRuleCondition">
+                  <template #clockIcon>
                     <gl-icon name="clock" class="gl-mr-3" />
-              <gl-sprintf :message="$options.i18n.escalationRule">
+                  </template>
                   <template #alertStatus>
                     {{ $options.ALERT_STATUSES[rule.status].toLowerCase() }}
                   </template>
                   <template #minutes>
                     <span class="gl-font-weight-bold">
-                    &nbsp;{{ rule.elapsedTimeMinutes }} {{ $options.i18n.minutes }}
+                      {{ rule.elapsedTimeMinutes }}&nbsp;{{ $options.i18n.minutes }}
                     </span>
                   </template>
-                <template #then>
-                  <span class="right-arrow">
+                </gl-sprintf>
+              </span>
+
+              <span
+                class="right-arrow gl-display-none gl-lg-display-block gl-flex-shrink-0 gl-mx-5"
+                :style="{ width: getArrowLength(ruleIndex) }"
+              >
                 <i class="right-arrow-head"></i>
               </span>
+
+              <span class="gl-display-flex gl-align-items-center rule-action">
+                <span v-gl-tooltip class="gl-text-truncate" :title="getActionTooltip(rule)">
+                  <gl-sprintf :message="$options.i18n.escalationRuleAction">
+                    <template #notificationIcon>
                       <gl-icon name="notifications" class="gl-mr-3" />
                     </template>
                     <template #doAction>
                       {{ getActionName(rule) }}
-                  &nbsp;
                     </template>
-                <template #scheduleOrUser>
+                    <template #forScheduleOrUser>
                       <span v-if="hasEscalationSchedule(rule)" class="gl-font-weight-bold">
                         {{ rule.oncallSchedule.name }}
                       </span>
@@ -198,6 +228,8 @@ export default {
                       </gl-token>
                     </template>
                   </gl-sprintf>
+                </span>
+              </span>
             </div>
           </template>
         </div>

ee/spec/frontend/escalation_policies/__snapshots__/escalation_policy_spec.js.snap

@@ -24,7 +24,10 @@ exports[`EscalationPolicy renders a policy with rules 1`] = `
         class="gl-border-solid gl-border-1 gl-border-gray-100 gl-rounded-base gl-p-5"
       >
         <div
-          class="gl-display-flex gl-align-items-center gl-mb-5"
+          class="gl-display-flex gl-align-items-center escalation-rule-row gl-mb-5"
+        >
+          <span
+            class="rule-condition gl-md-w-full"
           >
             <gl-icon-stub
               class="gl-mr-3"
@@ -38,18 +41,27 @@ exports[`EscalationPolicy renders a policy with rules 1`] = `
               class="gl-font-weight-bold"
             >
               
-                   1 mins
+                    1 mins
                   
             </span>
+          </span>
            
           <span
-            class="right-arrow"
+            class="right-arrow gl-display-none gl-lg-display-block gl-flex-shrink-0 gl-mx-5"
+            style="width: 4%;"
           >
             <i
               class="right-arrow-head"
             />
           </span>
            
+          <span
+            class="gl-display-flex gl-align-items-center rule-action"
+          >
+            <span
+              class="gl-text-truncate"
+              title=" THEN email on-call user in schedule Schedule to fill in"
+            >
               <gl-icon-stub
                 class="gl-mr-3"
                 name="notifications"
@@ -57,7 +69,6 @@ exports[`EscalationPolicy renders a policy with rules 1`] = `
               />
                THEN 
                     email on-call user in schedule
-                 
                    
               <span
                 class="gl-font-weight-bold"
@@ -66,9 +77,14 @@ exports[`EscalationPolicy renders a policy with rules 1`] = `
                       Schedule to fill in
                     
               </span>
+            </span>
+          </span>
         </div>
         <div
-          class="gl-display-flex gl-align-items-center"
+          class="gl-display-flex gl-align-items-center escalation-rule-row"
+        >
+          <span
+            class="rule-condition gl-md-w-full"
           >
             <gl-icon-stub
               class="gl-mr-3"
@@ -82,18 +98,27 @@ exports[`EscalationPolicy renders a policy with rules 1`] = `
               class="gl-font-weight-bold"
             >
               
-                   2 mins
+                    2 mins
                   
             </span>
+          </span>
            
           <span
-            class="right-arrow"
+            class="right-arrow gl-display-none gl-lg-display-block gl-flex-shrink-0 gl-mx-5"
+            style="width: 8%;"
           >
             <i
               class="right-arrow-head"
             />
           </span>
            
+          <span
+            class="gl-display-flex gl-align-items-center rule-action"
+          >
+            <span
+              class="gl-text-truncate"
+              title=" THEN email user Lena"
+            >
               <gl-icon-stub
                 class="gl-mr-3"
                 name="notifications"
@@ -101,7 +126,6 @@ exports[`EscalationPolicy renders a policy with rules 1`] = `
               />
                THEN 
                     email user
-                 
                    
               <gl-token-stub
                 variant="default"
@@ -119,6 +143,8 @@ exports[`EscalationPolicy renders a policy with rules 1`] = `
                       Lena
                     
               </gl-token-stub>
+            </span>
+          </span>
         </div>
       </div>
     </gl-collapse-stub>

locale/gitlab.pot

@@ -13438,6 +13438,12 @@ msgstr ""
 msgid "Escalation policies must have at least one rule"
 msgstr ""
 
+msgid "EscalationPolicies|%{clockIcon} IF alert is not %{alertStatus} in %{minutes}"
+msgstr ""
+
+msgid "EscalationPolicies|%{notificationIcon} THEN %{doAction} %{forScheduleOrUser}"
+msgstr ""
+
 msgid "EscalationPolicies|+ Add an additional rule"
 msgstr ""
 
@@ -13486,9 +13492,6 @@ msgstr ""
 msgid "EscalationPolicies|Failed to load oncall-schedules"
 msgstr ""
 
-msgid "EscalationPolicies|IF alert is not %{alertStatus} in %{minutes} %{then} THEN %{doAction} %{scheduleOrUser}"
-msgstr ""
-
 msgid "EscalationPolicies|IF alert is not %{alertStatus} in %{minutes} minutes"
 msgstr ""