Commit d215d688 authored by Sam Beckham's avatar Sam Beckham Committed by Vitaly Slobodin

Updates the design discussion buttons to match the design system

parent c9127868
<script>
import { GlTooltipDirective, GlIcon, GlLoadingIcon, GlLink } from '@gitlab/ui';
import { GlButton, GlLink, GlTooltipDirective } from '@gitlab/ui';
import { ApolloMutation } from 'vue-apollo';
import createFlash from '~/flash';
import { s__ } from '~/locale';
......@@ -26,15 +26,14 @@ export default {
components: {
ApolloMutation,
DesignNote,
DesignNotePin,
DesignNoteSignedOut,
ReplyPlaceholder,
DesignReplyForm,
GlIcon,
GlLoadingIcon,
GlButton,
GlLink,
ToggleRepliesWidget,
ReplyPlaceholder,
TimeAgoTooltip,
DesignNotePin,
ToggleRepliesWidget,
},
directives: {
GlTooltip: GlTooltipDirective,
......@@ -239,18 +238,17 @@ export default {
@error="$emit('update-note-error', $event)"
>
<template v-if="isLoggedIn && discussion.resolvable" #resolve-discussion>
<button
<gl-button
v-gl-tooltip
:class="{ 'is-active': discussion.resolved }"
:title="resolveCheckboxText"
:aria-label="resolveCheckboxText"
class="line-resolve-btn note-action-button gl-mr-3"
:icon="resolveIconName"
:title="resolveCheckboxText"
:loading="isResolving"
category="tertiary"
data-testid="resolve-button"
size="small"
@click.stop="toggleResolvedStatus"
>
<gl-icon v-if="!isResolving" :name="resolveIconName" data-testid="resolve-icon" />
<gl-loading-icon v-else size="sm" inline />
</button>
/>
</template>
<template v-if="discussion.resolved" #resolved-status>
<p class="gl-text-gray-500 gl-font-sm gl-m-0 gl-mt-5" data-testid="resolved-message">
......
<script>
import {
GlTooltipDirective,
GlIcon,
GlLink,
GlSafeHtmlDirective,
GlAvatar,
GlAvatarLink,
GlButton,
GlLink,
GlSafeHtmlDirective,
GlTooltipDirective,
} from '@gitlab/ui';
import { ApolloMutation } from 'vue-apollo';
import { getIdFromGraphQLId } from '~/graphql_shared/utils';
......@@ -22,14 +22,14 @@ export default {
editCommentLabel: __('Edit comment'),
},
components: {
ApolloMutation,
DesignReplyForm,
GlAvatar,
GlAvatarLink,
TimelineEntryItem,
TimeAgoTooltip,
DesignReplyForm,
ApolloMutation,
GlIcon,
GlButton,
GlLink,
TimeAgoTooltip,
TimelineEntryItem,
},
directives: {
GlTooltip: GlTooltipDirective,
......@@ -123,18 +123,17 @@ export default {
</div>
<div class="gl-display-flex gl-align-items-baseline">
<slot name="resolve-discussion"></slot>
<button
<gl-button
v-if="isEditButtonVisible"
v-gl-tooltip
type="button"
:title="$options.i18n.editCommentLabel"
:aria-label="$options.i18n.editCommentLabel"
class="note-action-button btn btn-transparent qa-note-edit-button"
:title="$options.i18n.editCommentLabel"
category="tertiary"
data-testid="note-edit"
icon="pencil"
size="small"
@click="isEditing = true"
>
<gl-icon name="pencil" class="link-highlight" />
</button>
/>
</div>
</div>
<template v-if="!isEditing">
......
......@@ -31,7 +31,6 @@ describe('Design discussions component', () => {
const findReplyForm = () => wrapper.find(DesignReplyForm);
const findRepliesWidget = () => wrapper.find(ToggleRepliesWidget);
const findResolveButton = () => wrapper.find('[data-testid="resolve-button"]');
const findResolveIcon = () => wrapper.find('[data-testid="resolve-icon"]');
const findResolvedMessage = () => wrapper.find('[data-testid="resolved-message"]');
const findResolveLoadingIcon = () => wrapper.find(GlLoadingIcon);
const findResolveCheckbox = () => wrapper.find('[data-testid="resolve-checkbox"]');
......@@ -117,7 +116,7 @@ describe('Design discussions component', () => {
});
it('does not render an icon to resolve a thread', () => {
expect(findResolveIcon().exists()).toBe(false);
expect(findResolveButton().exists()).toBe(false);
});
it('does not render a checkbox in reply form', async () => {
......@@ -147,7 +146,7 @@ describe('Design discussions component', () => {
});
it('renders a correct icon to resolve a thread', () => {
expect(findResolveIcon().props('name')).toBe('check-circle');
expect(findResolveButton().props('icon')).toBe('check-circle');
});
it('renders a checkbox with Resolve thread text in reply form', async () => {
......@@ -203,7 +202,7 @@ describe('Design discussions component', () => {
});
it('renders a correct icon to resolve a thread', () => {
expect(findResolveIcon().props('name')).toBe('check-circle-filled');
expect(findResolveButton().props('icon')).toBe('check-circle-filled');
});
it('emit todo:toggle when discussion is resolved', async () => {
......
......@@ -122,7 +122,7 @@ describe('Design note component', () => {
},
});
findEditButton().trigger('click');
findEditButton().vm.$emit('click');
await nextTick();
expect(findReplyForm().exists()).toBe(true);
......
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