diff options
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/notes/system_note.vue')
-rw-r--r-- | app/assets/javascripts/vue_shared/components/notes/system_note.vue | 48 |
1 files changed, 30 insertions, 18 deletions
diff --git a/app/assets/javascripts/vue_shared/components/notes/system_note.vue b/app/assets/javascripts/vue_shared/components/notes/system_note.vue index fe57d4f29ca..f30676e8ef3 100644 --- a/app/assets/javascripts/vue_shared/components/notes/system_note.vue +++ b/app/assets/javascripts/vue_shared/components/notes/system_note.vue @@ -1,4 +1,6 @@ <script> +/* eslint-disable vue/no-v-html */ + /** * Common component to render a system note, icon and user information. * @@ -18,10 +20,15 @@ */ import $ from 'jquery'; import { mapGetters, mapActions, mapState } from 'vuex'; -import { GlDeprecatedButton, GlSkeletonLoading, GlTooltipDirective } from '@gitlab/ui'; +import { + GlButton, + GlDeprecatedSkeletonLoading as GlSkeletonLoading, + GlTooltipDirective, + GlIcon, + GlSafeHtmlDirective as SafeHtml, +} from '@gitlab/ui'; import descriptionVersionHistoryMixin from 'ee_else_ce/notes/mixins/description_version_history'; import noteHeader from '~/notes/components/note_header.vue'; -import Icon from '~/vue_shared/components/icon.vue'; import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import TimelineEntryItem from './timeline_entry_item.vue'; import { spriteIcon } from '../../../lib/utils/common_utils'; @@ -32,14 +39,15 @@ const MAX_VISIBLE_COMMIT_LIST_COUNT = 3; export default { name: 'SystemNote', components: { - Icon, + GlIcon, noteHeader, TimelineEntryItem, - GlDeprecatedButton, + GlButton, GlSkeletonLoading, }, directives: { GlTooltip: GlTooltipDirective, + SafeHtml, }, mixins: [descriptionVersionHistoryMixin, glFeatureFlagsMixin()], props: { @@ -104,25 +112,28 @@ export default { <div class="timeline-content"> <div class="note-header"> <note-header :author="note.author" :created-at="note.created_at" :note-id="note.id"> - <span v-html="actionTextHtml"></span> + <span v-safe-html="actionTextHtml"></span> <template v-if="canSeeDescriptionVersion" slot="extra-controls"> · - <button type="button" class="btn-blank btn-link" @click="toggleDescriptionVersion"> - {{ __('Compare with previous version') }} - <icon :name="descriptionVersionToggleIcon" :size="12" class="append-left-5" /> - </button> + <gl-button + variant="link" + :icon="descriptionVersionToggleIcon" + data-testid="compare-btn" + @click="toggleDescriptionVersion" + >{{ __('Compare with previous version') }}</gl-button + > </template> </note-header> </div> <div class="note-body"> <div + v-safe-html="note.note_html" :class="{ 'system-note-commit-list': hasMoreCommits, 'hide-shade': expanded }" class="note-text md" - v-html="note.note_html" ></div> <div v-if="hasMoreCommits" class="flex-list"> <div class="system-note-commit-list-toggler flex-row" @click="expanded = !expanded"> - <icon :name="toggleIcon" :size="8" class="gl-mr-2" /> + <gl-icon :name="toggleIcon" :size="8" class="gl-mr-2" /> <span>{{ __('Toggle commit list') }}</span> </div> </div> @@ -130,17 +141,18 @@ export default { <pre v-if="isLoadingDescriptionVersion" class="loading-state"> <gl-skeleton-loading /> </pre> - <pre v-else class="wrapper mt-2" v-html="descriptionVersion"></pre> - <gl-deprecated-button + <pre v-else v-safe-html="descriptionVersion" class="wrapper mt-2"></pre> + <gl-button v-if="displayDeleteButton" - ref="deleteDescriptionVersionButton" v-gl-tooltip :title="__('Remove description history')" - class="btn-transparent delete-description-history" + variant="default" + category="tertiary" + icon="remove" + class="delete-description-history" + data-testid="delete-description-version-button" @click="deleteDescriptionVersion" - > - <icon name="remove" /> - </gl-deprecated-button> + /> </div> </div> </div> |