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

221 lines
6.4 KiB
Vue
Raw Normal View History

2019-12-21 20:55:43 +05:30
<script>
2020-04-22 19:07:51 +05:30
import { mapState, mapActions, mapGetters } from 'vuex';
import { GlButton, GlFormInput, GlFormGroup } from '@gitlab/ui';
2020-05-24 23:13:21 +05:30
import { escape } from 'lodash';
2019-12-21 20:55:43 +05:30
import { __, sprintf } from '~/locale';
import MarkdownField from '~/vue_shared/components/markdown/field.vue';
import autofocusonshow from '~/vue_shared/directives/autofocusonshow';
2020-04-08 14:13:33 +05:30
import { BACK_URL_PARAM } from '~/releases/constants';
import { getParameterByName } from '~/lib/utils/common_utils';
2020-04-22 19:07:51 +05:30
import AssetLinksForm from './asset_links_form.vue';
import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
2020-05-24 23:13:21 +05:30
import MilestoneCombobox from '~/milestones/project_milestone_combobox.vue';
2019-12-21 20:55:43 +05:30
export default {
2020-03-13 15:44:24 +05:30
name: 'ReleaseEditApp',
2019-12-21 20:55:43 +05:30
components: {
GlFormInput,
GlFormGroup,
GlButton,
MarkdownField,
2020-04-22 19:07:51 +05:30
AssetLinksForm,
2020-05-24 23:13:21 +05:30
MilestoneCombobox,
2019-12-21 20:55:43 +05:30
},
directives: {
autofocusonshow,
},
2020-04-22 19:07:51 +05:30
mixins: [glFeatureFlagsMixin()],
2019-12-21 20:55:43 +05:30
computed: {
2020-03-13 15:44:24 +05:30
...mapState('detail', [
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',
'releasesPagePath',
2019-12-26 22:10:19 +05:30
'updateReleaseApiDocsPath',
2020-05-24 23:13:21 +05:30
'release',
'newMilestonePath',
'manageMilestonesPath',
'projectId',
2019-12-21 20:55:43 +05:30
]),
2020-04-22 19:07:51 +05:30
...mapGetters('detail', ['isValid']),
2019-12-21 20:55:43 +05:30
showForm() {
return !this.isFetchingRelease && !this.fetchError;
},
subtitleText() {
return sprintf(
__(
2020-04-22 19:07:51 +05:30
'Releases are based on Git tags. We recommend tags that use semantic versioning, for example %{codeStart}v1.0%{codeEnd}, %{codeStart}v2.0-pre%{codeEnd}.',
2019-12-21 20:55:43 +05:30
),
{
codeStart: '<code>',
codeEnd: '</code>',
},
false,
);
},
tagName() {
2020-03-13 15:44:24 +05:30
return this.$store.state.detail.release.tagName;
2019-12-21 20:55:43 +05:30
},
2019-12-26 22:10:19 +05:30
tagNameHintText() {
return sprintf(
__(
'Changing a Release tag is only supported via Releases API. %{linkStart}More information%{linkEnd}',
),
{
2020-05-24 23:13:21 +05:30
linkStart: `<a href="${escape(
2019-12-26 22:10:19 +05:30
this.updateReleaseApiDocsPath,
)}" target="_blank" rel="noopener noreferrer">`,
linkEnd: '</a>',
},
false,
);
},
2019-12-21 20:55:43 +05:30
releaseTitle: {
get() {
2020-03-13 15:44:24 +05:30
return this.$store.state.detail.release.name;
2019-12-21 20:55:43 +05:30
},
set(title) {
this.updateReleaseTitle(title);
},
},
releaseNotes: {
get() {
2020-03-13 15:44:24 +05:30
return this.$store.state.detail.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() {
return this.$store.state.detail.release.milestones;
},
set(milestones) {
this.updateReleaseMilestones(milestones);
},
},
2020-04-08 14:13:33 +05:30
cancelPath() {
return getParameterByName(BACK_URL_PARAM) || this.releasesPagePath;
},
2020-04-22 19:07:51 +05:30
showAssetLinksForm() {
return this.glFeatures.releaseAssetLinkEditing;
},
isSaveChangesDisabled() {
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
},
created() {
this.fetchRelease();
},
methods: {
2020-03-13 15:44:24 +05:30
...mapActions('detail', [
2019-12-21 20:55:43 +05:30
'fetchRelease',
'updateRelease',
'updateReleaseTitle',
'updateReleaseNotes',
2020-05-24 23:13:21 +05:30
'updateReleaseMilestones',
2019-12-21 20:55:43 +05:30
]),
},
};
</script>
<template>
<div class="d-flex flex-column">
<p class="pt-3 js-subtitle-text" v-html="subtitleText"></p>
<form v-if="showForm" @submit.prevent="updateRelease()">
2019-12-26 22:10:19 +05:30
<gl-form-group>
<div class="row">
<div class="col-md-6 col-lg-5 col-xl-4">
<label for="git-ref">{{ __('Tag name') }}</label>
<gl-form-input
id="git-ref"
v-model="tagName"
type="text"
class="form-control"
aria-describedby="tag-name-help"
disabled
/>
2019-12-21 20:55:43 +05:30
</div>
2019-12-26 22:10:19 +05:30
</div>
<div id="tag-name-help" class="form-text text-muted" v-html="tagNameHintText"></div>
</gl-form-group>
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"
v-autofocusonshow
autofocus
type="text"
class="form-control"
/>
</gl-form-group>
2020-05-24 23:13:21 +05:30
<gl-form-group class="w-50">
<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"
:extra-links="milestoneComboboxExtraLinks"
/>
</div>
</gl-form-group>
2019-12-21 20:55:43 +05:30
<gl-form-group>
<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"
class="prepend-top-10 append-bottom-10"
>
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…')"
@keydown.meta.enter="updateRelease()"
@keydown.ctrl.enter="updateRelease()"
></textarea>
</template>
2019-12-21 20:55:43 +05:30
</markdown-field>
</div>
</gl-form-group>
2020-04-22 19:07:51 +05:30
<asset-links-form v-if="showAssetLinksForm" />
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"
2019-12-21 20:55:43 +05:30
variant="success"
type="submit"
:aria-label="__('Save changes')"
2020-04-22 19:07:51 +05:30
:disabled="isSaveChangesDisabled"
2020-05-24 23:13:21 +05:30
>{{ __('Save changes') }}</gl-button
2019-12-21 20:55:43 +05:30
>
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>