diff options
Diffstat (limited to 'app/assets/javascripts/issues/show/components')
5 files changed, 36 insertions, 8 deletions
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)" > |