debian-mirror-gitlab/app/assets/javascripts/releases/components/app_edit_new.vue

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

232 lines
6.8 KiB
Vue
Raw Normal View History

2019-12-21 20:55:43 +05:30
<script>
2022-07-16 23:28:13 +05:30
import { GlButton, GlFormCheckbox, GlFormInput, GlFormGroup, GlLink, GlSprintf } from '@gitlab/ui';
2021-03-11 19:13:27 +05:30
import { mapState, mapActions, mapGetters } from 'vuex';
2021-09-30 23:02:18 +05:30
import { isSameOriginUrl, getParameterByName } from '~/lib/utils/url_utility';
2021-01-03 14:25:43 +05:30
import { __ } from '~/locale';
2021-03-11 19:13:27 +05:30
import MilestoneCombobox from '~/milestones/components/milestone_combobox.vue';
2020-04-08 14:13:33 +05:30
import { BACK_URL_PARAM } from '~/releases/constants';
2021-03-11 19:13:27 +05:30
import MarkdownField from '~/vue_shared/components/markdown/field.vue';
2020-04-22 19:07:51 +05:30
import AssetLinksForm from './asset_links_form.vue';
2020-10-24 23:57:45 +05:30
import TagField from './tag_field.vue';
2019-12-21 20:55:43 +05:30
export default {
2020-10-24 23:57:45 +05:30
name: 'ReleaseEditNewApp',
2019-12-21 20:55:43 +05:30
components: {
2022-07-16 23:28:13 +05:30
GlFormCheckbox,
2019-12-21 20:55:43 +05:30
GlFormInput,
GlFormGroup,
GlButton,
2022-07-16 23:28:13 +05:30
GlLink,
2021-01-03 14:25:43 +05:30
GlSprintf,
2019-12-21 20:55:43 +05:30
MarkdownField,
2020-04-22 19:07:51 +05:30
AssetLinksForm,
2020-05-24 23:13:21 +05:30
MilestoneCombobox,
2020-10-24 23:57:45 +05:30
TagField,
2019-12-21 20:55:43 +05:30
},
computed: {
2021-04-29 21:17:54 +05:30
...mapState('editNew', [
2019-12-21 20:55:43 +05:30
'isFetchingRelease',
2020-04-22 19:07:51 +05:30
'isUpdatingRelease',
2019-12-21 20:55:43 +05:30
'fetchError',
'markdownDocsPath',
'markdownPreviewPath',
2022-07-16 23:28:13 +05:30
'editReleaseDocsPath',
2019-12-21 20:55:43 +05:30
'releasesPagePath',
2020-05-24 23:13:21 +05:30
'release',
'newMilestonePath',
'manageMilestonesPath',
'projectId',
2021-01-29 00:20:46 +05:30
'groupId',
'groupMilestonesAvailable',
2022-07-16 23:28:13 +05:30
'tagNotes',
2019-12-21 20:55:43 +05:30
]),
2022-07-16 23:28:13 +05:30
...mapGetters('editNew', ['isValid', 'isExistingRelease', 'formattedReleaseNotes']),
2019-12-21 20:55:43 +05:30
showForm() {
2020-10-24 23:57:45 +05:30
return Boolean(!this.isFetchingRelease && !this.fetchError && this.release);
2019-12-21 20:55:43 +05:30
},
releaseTitle: {
get() {
2021-04-29 21:17:54 +05:30
return this.$store.state.editNew.release.name;
2019-12-21 20:55:43 +05:30
},
set(title) {
this.updateReleaseTitle(title);
},
},
releaseNotes: {
get() {
2021-04-29 21:17:54 +05:30
return this.$store.state.editNew.release.description;
2019-12-21 20:55:43 +05:30
},
set(notes) {
this.updateReleaseNotes(notes);
},
},
2020-05-24 23:13:21 +05:30
releaseMilestones: {
get() {
2021-04-29 21:17:54 +05:30
return this.$store.state.editNew.release.milestones;
2020-05-24 23:13:21 +05:30
},
set(milestones) {
this.updateReleaseMilestones(milestones);
},
},
2022-07-16 23:28:13 +05:30
includeTagNotes: {
get() {
return this.$store.state.editNew.includeTagNotes;
},
set(includeTagNotes) {
this.updateIncludeTagNotes(includeTagNotes);
},
},
2020-04-08 14:13:33 +05:30
cancelPath() {
2021-07-02 01:05:55 +05:30
const backUrl = getParameterByName(BACK_URL_PARAM);
if (isSameOriginUrl(backUrl)) {
return backUrl;
}
return this.releasesPagePath;
2020-04-08 14:13:33 +05:30
},
2020-10-24 23:57:45 +05:30
saveButtonLabel() {
return this.isExistingRelease ? __('Save changes') : __('Create release');
},
isFormSubmissionDisabled() {
2020-04-22 19:07:51 +05:30
return this.isUpdatingRelease || !this.isValid;
},
2020-05-24 23:13:21 +05:30
milestoneComboboxExtraLinks() {
return [
{
text: __('Create new'),
url: this.newMilestonePath,
},
{
text: __('Manage milestones'),
url: this.manageMilestonesPath,
},
];
},
2019-12-21 20:55:43 +05:30
},
2021-04-17 20:07:23 +05:30
async mounted() {
await this.initializeRelease();
// Focus the first non-disabled input or button element
this.$el.querySelector('input:enabled, button:enabled').focus();
2019-12-21 20:55:43 +05:30
},
methods: {
2021-04-29 21:17:54 +05:30
...mapActions('editNew', [
2020-10-24 23:57:45 +05:30
'initializeRelease',
'saveRelease',
2019-12-21 20:55:43 +05:30
'updateReleaseTitle',
'updateReleaseNotes',
2020-05-24 23:13:21 +05:30
'updateReleaseMilestones',
2022-07-16 23:28:13 +05:30
'updateIncludeTagNotes',
2019-12-21 20:55:43 +05:30
]),
2020-10-24 23:57:45 +05:30
submitForm() {
if (!this.isFormSubmissionDisabled) {
this.saveRelease();
}
},
2019-12-21 20:55:43 +05:30
},
};
</script>
<template>
<div class="d-flex flex-column">
2021-01-03 14:25:43 +05:30
<p class="pt-3 js-subtitle-text">
<gl-sprintf
:message="
__(
2021-04-29 21:17:54 +05:30
'Releases are based on Git tags. We recommend tags that use semantic versioning, for example %{codeStart}v1.0.0%{codeEnd}, %{codeStart}v2.1.0-pre%{codeEnd}.',
2021-01-03 14:25:43 +05:30
)
"
>
<template #code="{ content }">
<code>{{ content }}</code>
</template>
</gl-sprintf>
</p>
2020-10-24 23:57:45 +05:30
<form v-if="showForm" class="js-quick-submit" @submit.prevent="submitForm">
<tag-field />
2019-12-21 20:55:43 +05:30
<gl-form-group>
<label for="release-title">{{ __('Release title') }}</label>
<gl-form-input
id="release-title"
ref="releaseTitleInput"
v-model="releaseTitle"
type="text"
class="form-control"
/>
</gl-form-group>
2020-11-24 15:15:51 +05:30
<gl-form-group class="w-50" data-testid="milestones-field">
2020-05-24 23:13:21 +05:30
<label>{{ __('Milestones') }}</label>
<div class="d-flex flex-column col-md-6 col-sm-10 pl-0">
<milestone-combobox
v-model="releaseMilestones"
:project-id="projectId"
2021-01-29 00:20:46 +05:30
:group-id="groupId"
:group-milestones-available="groupMilestonesAvailable"
2020-05-24 23:13:21 +05:30
:extra-links="milestoneComboboxExtraLinks"
/>
</div>
</gl-form-group>
2021-01-03 14:25:43 +05:30
<gl-form-group data-testid="release-notes">
2019-12-21 20:55:43 +05:30
<label for="release-notes">{{ __('Release notes') }}</label>
<div class="bordered-box pr-3 pl-3">
<markdown-field
:can-attach-file="true"
:markdown-preview-path="markdownPreviewPath"
:markdown-docs-path="markdownDocsPath"
:add-spacing-classes="false"
2022-07-16 23:28:13 +05:30
:textarea-value="formattedReleaseNotes"
2020-10-24 23:57:45 +05:30
class="gl-mt-3 gl-mb-3"
2019-12-21 20:55:43 +05:30
>
2020-05-24 23:13:21 +05:30
<template #textarea>
<textarea
id="release-notes"
v-model="releaseNotes"
class="note-textarea js-gfm-input js-autosize markdown-area"
dir="auto"
data-supports-quick-actions="false"
:aria-label="__('Release notes')"
:placeholder="__('Write your release notes or drag your files here…')"
></textarea>
</template>
2019-12-21 20:55:43 +05:30
</markdown-field>
</div>
</gl-form-group>
2022-07-16 23:28:13 +05:30
<gl-form-group v-if="!isExistingRelease">
<gl-form-checkbox v-model="includeTagNotes">
{{ s__('Release|Include message from the annotated tag.') }}
<template #help>
<gl-sprintf
:message="
s__(
'Release|You can edit the content later by editing the release. %{linkStart}How do I edit a release?%{linkEnd}',
)
"
>
<template #link="{ content }">
<gl-link :href="editReleaseDocsPath">{{ content }}</gl-link>
</template>
</gl-sprintf>
</template>
</gl-form-checkbox>
</gl-form-group>
2019-12-21 20:55:43 +05:30
2021-01-03 14:25:43 +05:30
<asset-links-form />
2020-04-22 19:07:51 +05:30
2019-12-21 20:55:43 +05:30
<div class="d-flex pt-3">
<gl-button
2020-04-22 19:07:51 +05:30
class="mr-auto js-no-auto-disable"
category="primary"
2022-06-21 17:19:12 +05:30
variant="confirm"
2019-12-21 20:55:43 +05:30
type="submit"
2020-10-24 23:57:45 +05:30
:disabled="isFormSubmissionDisabled"
data-testid="submit-button"
2019-12-21 20:55:43 +05:30
>
2020-10-24 23:57:45 +05:30
{{ saveButtonLabel }}
</gl-button>
2020-05-24 23:13:21 +05:30
<gl-button :href="cancelPath" class="js-cancel-button">{{ __('Cancel') }}</gl-button>
2019-12-21 20:55:43 +05:30
</div>
</form>
</div>
</template>