diff options
Diffstat (limited to 'app/assets/javascripts/issuable/components')
3 files changed, 66 insertions, 80 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> diff --git a/app/assets/javascripts/issuable/components/csv_import_export_buttons.vue b/app/assets/javascripts/issuable/components/csv_import_export_buttons.vue index 4fdd094072c..269f720bac9 100644 --- a/app/assets/javascripts/issuable/components/csv_import_export_buttons.vue +++ b/app/assets/javascripts/issuable/components/csv_import_export_buttons.vue @@ -15,6 +15,8 @@ import CsvImportModal from './csv_import_modal.vue'; export default { i18n: { exportAsCsvButtonText: __('Export as CSV'), + importCsvText: __('Import CSV'), + importFromJiraText: __('Import from Jira'), importIssuesText: __('Import issues'), }, name: 'CsvImportExportButtons', @@ -101,13 +103,16 @@ export default { :text-sr-only="!showLabel" :icon="importButtonIcon" > - <gl-dropdown-item v-gl-modal="importModalId">{{ __('Import CSV') }}</gl-dropdown-item> + <gl-dropdown-item v-gl-modal="importModalId"> + {{ $options.i18n.importCsvText }} + </gl-dropdown-item> <gl-dropdown-item v-if="canEdit" :href="projectImportJiraPath" data-qa-selector="import_from_jira_link" - >{{ __('Import from Jira') }}</gl-dropdown-item > + {{ $options.i18n.importFromJiraText }} + </gl-dropdown-item> </gl-dropdown> </gl-button-group> <csv-export-modal diff --git a/app/assets/javascripts/issuable/components/csv_import_modal.vue b/app/assets/javascripts/issuable/components/csv_import_modal.vue index c85efd60b8b..b72abe14ee1 100644 --- a/app/assets/javascripts/issuable/components/csv_import_modal.vue +++ b/app/assets/javascripts/issuable/components/csv_import_modal.vue @@ -1,23 +1,28 @@ <script> -import { GlModal, GlSprintf, GlFormGroup, GlButton } from '@gitlab/ui'; +import { GlModal, GlFormGroup } from '@gitlab/ui'; import csrf from '~/lib/utils/csrf'; -import { ISSUABLE_TYPE } from '../constants'; +import { __, sprintf } from '~/locale'; export default { - name: 'CsvImportModal', + i18n: { + maximumFileSizeText: __('The maximum file size allowed is %{size}.'), + importIssuesText: __('Import issues'), + uploadCsvFileText: __('Upload CSV file'), + mainText: __( + "Your issues will be imported in the background. Once finished, you'll get a confirmation email.", + ), + helpText: __( + 'It must have a header row and at least two columns: the first column is the issue title and the second column is the issue description. The separator is automatically detected.', + ), + }, + actionPrimary: { + text: __('Import issues'), + }, components: { GlModal, - GlSprintf, GlFormGroup, - GlButton, }, inject: { - issuableType: { - default: '', - }, - exportCsvPath: { - default: '', - }, importCsvIssuesPath: { default: '', }, @@ -31,11 +36,10 @@ export default { required: true, }, }, - data() { - return { - // eslint-disable-next-line @gitlab/require-i18n-strings - issuableName: this.issuableType === ISSUABLE_TYPE.issues ? 'issues' : 'merge requests', - }; + computed: { + maxFileSizeText() { + return sprintf(this.$options.i18n.maximumFileSizeText, { size: this.maxAttachmentSize }); + }, }, methods: { submitForm() { @@ -47,34 +51,22 @@ export default { </script> <template> - <gl-modal :modal-id="modalId" :title="__('Import issues')"> + <gl-modal + :modal-id="modalId" + :title="$options.i18n.importIssuesText" + :action-primary="$options.actionPrimary" + @primary="submitForm" + > <form ref="form" :action="importCsvIssuesPath" enctype="multipart/form-data" method="post"> <input :value="$options.csrf.token" type="hidden" name="authenticity_token" /> - <p> - {{ - __( - "Your issues will be imported in the background. Once finished, you'll get a confirmation email.", - ) - }} - </p> - <gl-form-group :label="__('Upload CSV file')" label-for="file"> + <p>{{ $options.i18n.mainText }}</p> + <gl-form-group :label="$options.i18n.uploadCsvFileText" label-for="file"> <input id="file" type="file" name="file" accept=".csv,text/csv" /> </gl-form-group> <p class="text-secondary"> - {{ - __( - 'It must have a header row and at least two columns: the first column is the issue title and the second column is the issue description. The separator is automatically detected.', - ) - }} - <gl-sprintf :message="__('The maximum file size allowed is %{size}.')" - ><template #size>{{ maxAttachmentSize }}</template></gl-sprintf - > + {{ $options.i18n.helpText }} + {{ maxFileSizeText }} </p> </form> - <template #modal-footer> - <gl-button category="primary" variant="confirm" @click="submitForm">{{ - __('Import issues') - }}</gl-button> - </template> </gl-modal> </template> |