Commit 0409352d authored by Evan Read's avatar Evan Read Committed by Vitaly Slobodin

Migrate remove description history button to new button

Also fix ESLint warning
parent 8bda24d2
<script> <script>
/* eslint-disable vue/no-v-html */
/** /**
* Common component to render a system note, icon and user information. * Common component to render a system note, icon and user information.
* *
...@@ -20,10 +19,11 @@ ...@@ -20,10 +19,11 @@
import $ from 'jquery'; import $ from 'jquery';
import { mapGetters, mapActions, mapState } from 'vuex'; import { mapGetters, mapActions, mapState } from 'vuex';
import { import {
GlDeprecatedButton, GlButton,
GlDeprecatedSkeletonLoading as GlSkeletonLoading, GlDeprecatedSkeletonLoading as GlSkeletonLoading,
GlTooltipDirective, GlTooltipDirective,
GlIcon, GlIcon,
GlSafeHtmlDirective as SafeHtml,
} from '@gitlab/ui'; } from '@gitlab/ui';
import descriptionVersionHistoryMixin from 'ee_else_ce/notes/mixins/description_version_history'; import descriptionVersionHistoryMixin from 'ee_else_ce/notes/mixins/description_version_history';
import noteHeader from '~/notes/components/note_header.vue'; import noteHeader from '~/notes/components/note_header.vue';
...@@ -40,11 +40,12 @@ export default { ...@@ -40,11 +40,12 @@ export default {
GlIcon, GlIcon,
noteHeader, noteHeader,
TimelineEntryItem, TimelineEntryItem,
GlDeprecatedButton, GlButton,
GlSkeletonLoading, GlSkeletonLoading,
}, },
directives: { directives: {
GlTooltip: GlTooltipDirective, GlTooltip: GlTooltipDirective,
SafeHtml,
}, },
mixins: [descriptionVersionHistoryMixin, glFeatureFlagsMixin()], mixins: [descriptionVersionHistoryMixin, glFeatureFlagsMixin()],
props: { props: {
...@@ -105,25 +106,28 @@ export default { ...@@ -105,25 +106,28 @@ export default {
:class="{ target: isTargetNote, 'pr-0': shouldShowDescriptionVersion }" :class="{ target: isTargetNote, 'pr-0': shouldShowDescriptionVersion }"
class="note system-note note-wrapper" class="note system-note note-wrapper"
> >
<div class="timeline-icon" v-html="iconHtml"></div> <div v-safe-html="iconHtml" class="timeline-icon"></div>
<div class="timeline-content"> <div class="timeline-content">
<div class="note-header"> <div class="note-header">
<note-header :author="note.author" :created-at="note.created_at" :note-id="note.id"> <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"> <template v-if="canSeeDescriptionVersion" slot="extra-controls">
&middot; &middot;
<button type="button" class="btn-blank btn-link" @click="toggleDescriptionVersion"> <gl-button
{{ __('Compare with previous version') }} variant="link"
<gl-icon :name="descriptionVersionToggleIcon" :size="12" class="append-left-5" /> :icon="descriptionVersionToggleIcon"
</button> data-testid="compare-btn"
@click="toggleDescriptionVersion"
>{{ __('Compare with previous version') }}</gl-button
>
</template> </template>
</note-header> </note-header>
</div> </div>
<div class="note-body"> <div class="note-body">
<div <div
v-safe-html="note.note_html"
:class="{ 'system-note-commit-list': hasMoreCommits, 'hide-shade': expanded }" :class="{ 'system-note-commit-list': hasMoreCommits, 'hide-shade': expanded }"
class="note-text md" class="note-text md"
v-html="note.note_html"
></div> ></div>
<div v-if="hasMoreCommits" class="flex-list"> <div v-if="hasMoreCommits" class="flex-list">
<div class="system-note-commit-list-toggler flex-row" @click="expanded = !expanded"> <div class="system-note-commit-list-toggler flex-row" @click="expanded = !expanded">
...@@ -135,17 +139,18 @@ export default { ...@@ -135,17 +139,18 @@ export default {
<pre v-if="isLoadingDescriptionVersion" class="loading-state"> <pre v-if="isLoadingDescriptionVersion" class="loading-state">
<gl-skeleton-loading /> <gl-skeleton-loading />
</pre> </pre>
<pre v-else class="wrapper mt-2" v-html="descriptionVersion"></pre> <pre v-else v-safe-html="descriptionVersion" class="wrapper mt-2"></pre>
<gl-deprecated-button <gl-button
v-if="displayDeleteButton" v-if="displayDeleteButton"
ref="deleteDescriptionVersionButton"
v-gl-tooltip v-gl-tooltip
:title="__('Remove description history')" :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" @click="deleteDescriptionVersion"
> />
<gl-icon name="remove" />
</gl-deprecated-button>
</div> </div>
</div> </div>
</div> </div>
......
---
title: Migrate remove description history button to new button
merge_request: 40806
author:
type: other
...@@ -20,12 +20,12 @@ describe('system note component', () => { ...@@ -20,12 +20,12 @@ describe('system note component', () => {
mock.onDelete('/path/to/diff/1').replyOnce(statusCode); mock.onDelete('/path/to/diff/1').replyOnce(statusCode);
} }
const findBlankBtn = () => wrapper.find('.note-headline-light .btn-blank'); const findBlankBtn = () => wrapper.find('[data-testid="compare-btn"]');
const findDescriptionVersion = () => wrapper.find('.description-version'); const findDescriptionVersion = () => wrapper.find('.description-version');
const findDeleteDescriptionVersionButton = () => const findDeleteDescriptionVersionButton = () =>
wrapper.find({ ref: 'deleteDescriptionVersionButton' }); wrapper.find('[data-testid="delete-description-version-button"]');
beforeEach(() => { beforeEach(() => {
props = { props = {
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment