diff options
Diffstat (limited to 'app/assets/javascripts/issuable/components/csv_export_modal.vue')
-rw-r--r-- | app/assets/javascripts/issuable/components/csv_export_modal.vue | 69 |
1 files changed, 29 insertions, 40 deletions
diff --git a/app/assets/javascripts/issuable/components/csv_export_modal.vue b/app/assets/javascripts/issuable/components/csv_export_modal.vue index 1c88f8dfdca..b0af3612e05 100644 --- a/app/assets/javascripts/issuable/components/csv_export_modal.vue +++ b/app/assets/javascripts/issuable/components/csv_export_modal.vue @@ -1,9 +1,14 @@ <script> import { GlButton, GlModal, GlSprintf, GlIcon } from '@gitlab/ui'; +import { __, n__ } from '~/locale'; import { ISSUABLE_TYPE } from '../constants'; export default { - name: 'CsvExportModal', + i18n: { + exportText: __( + 'The CSV export will be created in the background. Once finished, it will be sent to %{email} in an attachment.', + ), + }, components: { GlButton, GlModal, @@ -32,53 +37,39 @@ export default { required: true, }, }, - data() { - return { - // eslint-disable-next-line @gitlab/require-i18n-strings - issuableName: this.issuableType === ISSUABLE_TYPE.issues ? 'issues' : 'merge requests', - }; + computed: { + isIssue() { + return this.issuableType === ISSUABLE_TYPE.issues; + }, + exportText() { + return this.isIssue ? __('Export issues') : __('Export merge requests'); + }, + issuableCountText() { + return this.isIssue + ? n__('1 issue selected', '%d issues selected', this.issuableCount) + : n__('1 merge request selected', '%d merge requests selected', this.issuableCount); + }, }, - issueableType: ISSUABLE_TYPE, }; </script> <template> - <gl-modal :modal-id="modalId" body-class="gl-p-0!" data-qa-selector="export_issuable_modal"> - <template #modal-title> - <gl-sprintf :message="__('Export %{name}')"> - <template #name>{{ issuableName }}</template> - </gl-sprintf> - </template> + <gl-modal + :modal-id="modalId" + body-class="gl-p-0!" + :title="exportText" + data-qa-selector="export_issuable_modal" + > <div - v-if="issuableCount > -1" class="gl-justify-content-start gl-align-items-center gl-p-4 gl-border-b-solid gl-border-1 gl-border-gray-50" > <gl-icon name="check" class="gl-color-green-400" /> - <strong class="gl-m-3"> - <gl-sprintf - v-if="issuableType === $options.issueableType.issues" - :message="n__('1 issue selected', '%d issues selected', issuableCount)" - > - <template #issuableCount>{{ issuableCount }}</template> - </gl-sprintf> - <gl-sprintf - v-else - :message="n__('1 merge request selected', '%d merge requests selected', issuableCount)" - > - <template #issuableCount>{{ issuableCount }}</template> - </gl-sprintf> - </strong> + <strong class="gl-m-3">{{ issuableCountText }}</strong> </div> <div class="modal-text gl-px-4 gl-py-5"> - <gl-sprintf - :message=" - __( - `The CSV export will be created in the background. Once finished, it will be sent to %{strongStart}${email}%{strongEnd} in an attachment.`, - ) - " - > - <template #strong="{ content }"> - <strong>{{ content }}</strong> + <gl-sprintf :message="$options.i18n.exportText"> + <template #email> + <strong>{{ email }}</strong> </template> </gl-sprintf> </div> @@ -92,9 +83,7 @@ export default { data-track-action="click_button" :data-track-label="`export_${issuableType}_csv`" > - <gl-sprintf :message="__('Export %{name}')"> - <template #name>{{ issuableName }}</template> - </gl-sprintf> + {{ exportText }} </gl-button> </template> </gl-modal> |