From 7021455bd1ed7b125c55eb1b33c5a01f2bc55ee0 Mon Sep 17 00:00:00 2001
From: GitLab Bot <gitlab-bot@gitlab.com>
Date: Thu, 17 Nov 2022 11:33:21 +0000
Subject: Add latest changes from gitlab-org/gitlab@15-6-stable-ee

---
 .../issues/show/components/fields/description.vue  |  2 +-
 .../issues/show/components/fields/type.vue         |  2 +-
 .../issues/show/components/header_actions.vue      |  5 ++++
 .../issues/show/components/incidents/constants.js  |  6 ++++-
 .../components/incidents/timeline_events_form.vue  | 29 ++++++++++++++++++----
 5 files changed, 36 insertions(+), 8 deletions(-)

(limited to 'app/assets/javascripts/issues/show/components')

diff --git a/app/assets/javascripts/issues/show/components/fields/description.vue b/app/assets/javascripts/issues/show/components/fields/description.vue
index dbe634e7295..180dea77003 100644
--- a/app/assets/javascripts/issues/show/components/fields/description.vue
+++ b/app/assets/javascripts/issues/show/components/fields/description.vue
@@ -67,7 +67,7 @@ export default {
       :quick-actions-docs-path="quickActionsDocsPath"
       :enable-autocomplete="enableAutocomplete"
       supports-quick-actions
-      init-on-autofocus
+      autofocus
       @input="$emit('input', $event)"
       @keydown.meta.enter="updateIssuable"
       @keydown.ctrl.enter="updateIssuable"
diff --git a/app/assets/javascripts/issues/show/components/fields/type.vue b/app/assets/javascripts/issues/show/components/fields/type.vue
index 75d0b9e5e76..5695efd7114 100644
--- a/app/assets/javascripts/issues/show/components/fields/type.vue
+++ b/app/assets/javascripts/issues/show/components/fields/type.vue
@@ -42,7 +42,7 @@ export default {
       const {
         issueState: { issueType },
       } = this;
-      return capitalize(issueType);
+      return issuableTypes.find((type) => type.value === issueType)?.text || capitalize(issueType);
     },
     shouldShowIncident() {
       return this.issueType === INCIDENT_TYPE || this.canCreateIncident;
diff --git a/app/assets/javascripts/issues/show/components/header_actions.vue b/app/assets/javascripts/issues/show/components/header_actions.vue
index 74d166f82bb..c01de63ced9 100644
--- a/app/assets/javascripts/issues/show/components/header_actions.vue
+++ b/app/assets/javascripts/issues/show/components/header_actions.vue
@@ -7,6 +7,7 @@ import {
   GlLink,
   GlModal,
   GlModalDirective,
+  GlTooltipDirective,
 } from '@gitlab/ui';
 import { mapActions, mapGetters, mapState } from 'vuex';
 import createFlash, { FLASH_TYPES } from '~/flash';
@@ -51,6 +52,7 @@ export default {
   },
   directives: {
     GlModal: GlModalDirective,
+    GlTooltip: GlTooltipDirective,
   },
   mixins: [trackingMixin],
   inject: {
@@ -287,12 +289,15 @@ export default {
 
     <gl-dropdown
       v-if="hasDesktopDropdown"
+      v-gl-tooltip.hover
       class="gl-display-none gl-sm-display-inline-flex! gl-ml-3"
       icon="ellipsis_v"
       category="tertiary"
       data-qa-selector="issue_actions_ellipsis_dropdown"
       :text="dropdownText"
       :text-sr-only="true"
+      :title="dropdownText"
+      :aria-label="dropdownText"
       data-testid="desktop-dropdown"
       no-caret
       right
diff --git a/app/assets/javascripts/issues/show/components/incidents/constants.js b/app/assets/javascripts/issues/show/components/incidents/constants.js
index aa7b9805b5f..db846009409 100644
--- a/app/assets/javascripts/issues/show/components/incidents/constants.js
+++ b/app/assets/javascripts/issues/show/components/incidents/constants.js
@@ -1,4 +1,4 @@
-import { __, s__ } from '~/locale';
+import { __, n__, s__ } from '~/locale';
 
 export const timelineTabI18n = Object.freeze({
   title: s__('Incident|Timeline'),
@@ -15,6 +15,8 @@ export const timelineFormI18n = Object.freeze({
   save: __('Save'),
   cancel: __('Cancel'),
   description: __('Description'),
+  hint: __('You can enter up to 280 characters'),
+  textRemaining: (count) => n__('%d character remaining', '%d characters remaining', count),
   saveAndAdd: s__('Incident|Save and add another event'),
   areaLabel: s__('Incident|Timeline text'),
 });
@@ -38,3 +40,5 @@ export const timelineItemI18n = Object.freeze({
   moreActions: __('More actions'),
   timeUTC: __('%{time} UTC'),
 });
+
+export const MAX_TEXT_LENGTH = 280;
diff --git a/app/assets/javascripts/issues/show/components/incidents/timeline_events_form.vue b/app/assets/javascripts/issues/show/components/incidents/timeline_events_form.vue
index 55cd8b5f606..72dfccca467 100644
--- a/app/assets/javascripts/issues/show/components/incidents/timeline_events_form.vue
+++ b/app/assets/javascripts/issues/show/components/incidents/timeline_events_form.vue
@@ -2,7 +2,7 @@
 import { GlDatepicker, GlFormInput, GlFormGroup, GlButton } from '@gitlab/ui';
 import MarkdownField from '~/vue_shared/components/markdown/field.vue';
 import autofocusonshow from '~/vue_shared/directives/autofocusonshow';
-import { timelineFormI18n } from './constants';
+import { MAX_TEXT_LENGTH, timelineFormI18n } from './constants';
 import { getUtcShiftedDate } from './utils';
 
 export default {
@@ -26,6 +26,7 @@ export default {
     GlButton,
   },
   i18n: timelineFormI18n,
+  MAX_TEXT_LENGTH,
   directives: {
     autofocusonshow,
   },
@@ -63,6 +64,9 @@ export default {
     };
   },
   computed: {
+    isTimelineTextValid() {
+      return this.timelineTextCount > 0 && this.timelineTextRemainingCount >= 0;
+    },
     occurredAtString() {
       const year = this.datePickerInput.getFullYear();
       const month = this.datePickerInput.getMonth();
@@ -74,8 +78,11 @@ export default {
 
       return utcDate.toISOString();
     },
-    hasTimelineText() {
-      return this.timelineText.length > 0;
+    timelineTextRemainingCount() {
+      return MAX_TEXT_LENGTH - this.timelineTextCount;
+    },
+    timelineTextCount() {
+      return this.timelineText.length;
     },
   },
   mounted() {
@@ -158,9 +165,21 @@ export default {
               dir="auto"
               data-supports-quick-actions="false"
               :aria-label="$options.i18n.description"
+              aria-describedby="timeline-form-hint"
               :placeholder="$options.i18n.areaPlaceholder"
+              :maxlength="$options.MAX_TEXT_LENGTH"
             >
             </textarea>
+            <div id="timeline-form-hint" class="gl-sr-only">{{ $options.i18n.hint }}</div>
+            <div
+              aria-hidden="true"
+              class="gl-absolute gl-text-gray-500 gl-font-sm gl-line-height-14 gl-right-4 gl-bottom-3"
+            >
+              {{ timelineTextRemainingCount }}
+            </div>
+            <div role="status" class="gl-sr-only">
+              {{ $options.i18n.textRemaining(timelineTextRemainingCount) }}
+            </div>
           </template>
         </markdown-field>
       </gl-form-group>
@@ -171,7 +190,7 @@ export default {
         category="primary"
         class="gl-mr-3"
         data-testid="save-button"
-        :disabled="!hasTimelineText"
+        :disabled="!isTimelineTextValid"
         :loading="isEventProcessed"
         @click="handleSave(false)"
       >
@@ -183,7 +202,7 @@ export default {
         category="secondary"
         class="gl-mr-3 gl-ml-n2"
         data-testid="save-and-add-button"
-        :disabled="!hasTimelineText"
+        :disabled="!isTimelineTextValid"
         :loading="isEventProcessed"
         @click="handleSave(true)"
       >
-- 
cgit v1.2.3