Skip to content

G
gitlab-ce
Commit b14ded85 authored by Natalia Tepluhina's avatar Natalia Tepluhina Committed by Jose Ivan Vargas
Browse files
Options

Update design discussions to use GitLab UI components

parent 9714640d
Show whitespace changes
Inline Side-by-side
Showing with 85 additions and 77 deletions
app/assets/javascripts/design_management/components/design_notes/design_discussion.vue
View file @ b14ded85
<script>
import { ApolloMutation } from 'vue-apollo';
import { GlTooltipDirective, GlIcon, GlLoadingIcon, GlLink } from '@gitlab/ui';
import { GlTooltipDirective, GlIcon, GlLoadingIcon, GlLink, GlBadge } from '@gitlab/ui';
import { s__ } from '~/locale';
import ReplyPlaceholder from '~/notes/components/discussion_reply_placeholder.vue';
import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
......@@ -26,6 +26,7 @@ export default {
GlLink,
ToggleRepliesWidget,
TimeAgoTooltip,
GlBadge,
},
directives: {
GlTooltip: GlTooltipDirective,
......@@ -158,14 +159,14 @@ export default {
}
},
onCreateNoteError(err) {
this.$emit('createNoteError', err);
this.$emit('create-note-error', err);
},
hideForm() {
this.isFormRendered = false;
this.discussionComment = '';
},
showForm() {
this.$emit('openForm', this.discussion.id);
this.$emit('open-form', this.discussion.id);
this.isFormRendered = true;
},
toggleResolvedStatus() {
......@@ -177,11 +178,11 @@ export default {
})
.then(({ data }) => {
if (data.errors?.length > 0) {
this.$emit('resolveDiscussionError', data.errors[0]);
this.$emit('resolve-discussion-error', data.errors[0]);
}
})
.catch(err => {
this.$emit('resolveDiscussionError', err);
this.$emit('resolve-discussion-error', err);
})
.finally(() => {
this.isResolving = false;
......@@ -202,13 +203,12 @@ export default {
<template>
<div class="design-discussion-wrapper">
<div
class="badge badge-pill gl-display-flex gl-align-items-center gl-justify-content-center"
<gl-badge
class="gl-display-flex gl-align-items-center gl-justify-content-center gl-cursor-pointer"
:class="{ resolved: discussion.resolved }"
type="button"
>
{{ discussion.index }}
</div>
</gl-badge>
<ul
class="design-discussion bordered-box gl-relative gl-p-0 gl-list-style-none"
data-qa-selector="design_discussion_content"
......@@ -218,7 +218,7 @@ export default {
:markdown-preview-path="markdownPreviewPath"
:is-resolving="isResolving"
:class="{ 'gl-bg-blue-50': isDiscussionActive }"
@error="$emit('updateNoteError', $event)"
@error="$emit('update-note-error', $event)"
>
<template v-if="discussion.resolvable" #resolveDiscussion>
<button
......@@ -226,7 +226,6 @@ export default {
:class="{ 'is-active': discussion.resolved }"
:title="resolveCheckboxText"
:aria-label="resolveCheckboxText"
type="button"
class="line-resolve-btn note-action-button gl-mr-3"
data-testid="resolve-button"
@click.stop="toggleResolvedStatus"
......@@ -262,7 +261,7 @@ export default {
:markdown-preview-path="markdownPreviewPath"
:is-resolving="isResolving"
:class="{ 'gl-bg-blue-50': isDiscussionActive }"
@error="$emit('updateNoteError', $event)"
@error="$emit('update-note-error', $event)"
/>
<li v-show="isReplyPlaceholderVisible" class="reply-wrapper">
<reply-placeholder
......@@ -286,8 +285,8 @@ export default {
v-model="discussionComment"
:is-saving="loading"
:markdown-preview-path="markdownPreviewPath"
@submitForm="mutate"
@cancelForm="hideForm"
@submit-form="mutate"
@cancel-form="hideForm"
>
<template v-if="discussion.resolvable" #resolveCheckbox>
<label data-testid="resolve-checkbox">
......
app/assets/javascripts/design_management/components/design_notes/design_note.vue
View file @ b14ded85
<script>
/* eslint-disable vue/no-v-html */
import { ApolloMutation } from 'vue-apollo';
import { GlTooltipDirective, GlIcon } from '@gitlab/ui';
import { GlTooltipDirective, GlIcon, GlLink } from '@gitlab/ui';
import updateNoteMutation from '../../graphql/mutations/update_note.mutation.graphql';
import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item.vue';
......@@ -18,6 +18,7 @@ export default {
DesignReplyForm,
ApolloMutation,
GlIcon,
GlLink,
},
directives: {
GlTooltip: GlTooltipDirective,
......@@ -83,27 +84,27 @@ export default {
:img-alt="author.username"
:img-size="40"
/>
<div class="d-flex justify-content-between">
<div class="gl-display-flex gl-justify-content-space-between">
<div>
<a
<gl-link
v-once
:href="author.webUrl"
class="js-user-link"
:data-user-id="author.id"
:data-username="author.username"
>
<span class="note-header-author-name bold">{{ author.name }}</span>
<span class="note-header-author-name gl-font-weight-bold">{{ author.name }}</span>
<span v-if="author.status_tooltip_html" v-html="author.status_tooltip_html"></span>
<span class="note-headline-light">@{{ author.username }}</span>
</a>
</gl-link>
<span class="note-headline-light note-headline-meta">
<span class="system-note-message"> <slot></slot> </span>
<a
<gl-link
class="note-timestamp system-note-separator gl-display-block gl-mb-2"
:href="`#note_${noteAnchorId}`"
>
<time-ago-tooltip :time="note.createdAt" tooltip-placement="bottom" />
</a>
</gl-link>
</span>
</div>
<div class="gl-display-flex">
......@@ -122,7 +123,7 @@ export default {
</div>
<template v-if="!isEditing">
<div
class="note-text js-note-text md"
class="note-text js-note-text"
data-qa-selector="note_content"
v-html="note.bodyHtml"
></div>
......@@ -143,9 +144,9 @@ export default {
:is-saving="loading"
:markdown-preview-path="markdownPreviewPath"
:is-new-comment="false"
class="mt-5"
@submitForm="mutate"
@cancelForm="hideForm"
class="gl-mt-5"
@submit-form="mutate"
@cancel-form="hideForm"
/>
</apollo-mutation>
</timeline-entry-item>
......
app/assets/javascripts/design_management/components/design_notes/design_reply_form.vue
View file @ b14ded85
<script>
import { GlDeprecatedButton, GlModal } from '@gitlab/ui';
import { GlButton, GlModal } from '@gitlab/ui';
import MarkdownField from '~/vue_shared/components/markdown/field.vue';
import { s__ } from '~/locale';
......@@ -7,7 +7,7 @@ export default {
name: 'DesignReplyForm',
components: {
MarkdownField,
GlDeprecatedButton,
GlButton,
GlModal,
},
props: {
......@@ -66,13 +66,13 @@ export default {
},
methods: {
submitForm() {
if (this.hasValue) this.$emit('submitForm');
if (this.hasValue) this.$emit('submit-form');
},
cancelComment() {
if (this.hasValue && this.formText !== this.value) {
this.$refs.cancelCommentModal.show();
} else {
this.$emit('cancelForm');
this.$emit('cancel-form');
}
},
focusInput() {
......@@ -112,20 +112,21 @@ export default {
</markdown-field>
<slot name="resolveCheckbox"></slot>
<div class="note-form-actions gl-display-flex gl-justify-content-space-between">
<gl-deprecated-button
<gl-button
ref="submitButton"
:disabled="!hasValue || isSaving"
category="primary"
variant="success"
type="submit"
data-track-event="click_button"
data-qa-selector="save_comment_button"
@click="$emit('submitForm')"
@click="$emit('submit-form')"
>
{{ buttonText }}
</gl-deprecated-button>
<gl-deprecated-button ref="cancelButton" @click="cancelComment">{{
</gl-button>
<gl-button ref="cancelButton" variant="default" category="primary" @click="cancelComment">{{
__('Cancel')
}}</gl-deprecated-button>
}}</gl-button>
</div>
<gl-modal
ref="cancelCommentModal"
......@@ -134,7 +135,7 @@ export default {
:ok-title="modalSettings.okTitle"
:cancel-title="modalSettings.cancelTitle"
modal-id="cancel-comment-modal"
@ok="$emit('cancelForm')"
@ok="$emit('cancel-form')"
>{{ modalSettings.content }}
</gl-modal>
</form>
......
app/assets/javascripts/design_management/components/design_sidebar.vue
View file @ b14ded85
......@@ -151,11 +151,11 @@ export default {
:resolved-discussions-expanded="resolvedDiscussionsExpanded"
:discussion-with-open-form="discussionWithOpenForm"
data-testid="unresolved-discussion"
@createNoteError="$emit('onDesignDiscussionError', $event)"
@updateNoteError="$emit('updateNoteError', $event)"
@resolveDiscussionError="$emit('resolveDiscussionError', $event)"
@create-note-error="$emit('onDesignDiscussionError', $event)"
@update-note-error="$emit('updateNoteError', $event)"
@resolve-discussion-error="$emit('resolveDiscussionError', $event)"
@click.native.stop="updateActiveDiscussion(discussion.notes[0].id)"
@openForm="updateDiscussionWithOpenForm"
@open-form="updateDiscussionWithOpenForm"
/>
<template v-if="resolvedDiscussions.length > 0">
<gl-button
......
app/assets/javascripts/design_management/pages/design/index.vue
View file @ b14ded85
......@@ -367,8 +367,8 @@ export default {
v-model="comment"
:is-saving="loading"
:markdown-preview-path="markdownPreviewPath"
@submitForm="mutate"
@cancelForm="closeCommentForm"
@submit-form="mutate"
@cancel-form="closeCommentForm"
/> </apollo-mutation
></template>
</design-sidebar>
......
changelogs/unreleased/ntepluhina-refactor-design-management-to-gitlab-ui-1.yml 0 → 100644
View file @ b14ded85
---
title: Update design discussions to use GitLab UI components
merge_request: 41686
author:
type: other
spec/frontend/design_management/components/design_notes/__snapshots__/design_note_spec.js.snap
View file @ b14ded85
......@@ -17,15 +17,15 @@ exports[`Design note component should match the snapshot 1`] = `
/>
<div
class="d-flex justify-content-between"
class="gl-display-flex gl-justify-content-space-between"
>
<div>
<a
<gl-link-stub
class="js-user-link"
data-user-id="author-id"
>
<span
class="note-header-author-name bold"
class="note-header-author-name gl-font-weight-bold"
>
</span>
......@@ -37,7 +37,7 @@ exports[`Design note component should match the snapshot 1`] = `
>
@
</span>
</a>
</gl-link-stub>
<span
class="note-headline-light note-headline-meta"
......@@ -46,7 +46,7 @@ exports[`Design note component should match the snapshot 1`] = `
class="system-note-message"
/>
<a
<gl-link-stub
class="note-timestamp system-note-separator gl-display-block gl-mb-2"
href="#note_123"
>
......@@ -55,7 +55,7 @@ exports[`Design note component should match the snapshot 1`] = `
time="2019-07-26T15:02:20Z"
tooltipplacement="bottom"
/>
</a>
</gl-link-stub>
</span>
</div>
......@@ -68,7 +68,7 @@ exports[`Design note component should match the snapshot 1`] = `
</div>
<div
class="note-text js-note-text md"
class="note-text js-note-text"
data-qa-selector="note_content"
/>
......
spec/frontend/design_management/components/design_notes/__snapshots__/design_reply_form_spec.js.snap
View file @ b14ded85
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Design reply form component renders button text as "Comment" when creating a comment 1`] = `
"<button data-track-event=\\"click_button\\" data-qa-selector=\\"save_comment_button\\" type=\\"submit\\" disabled=\\"disabled\\" class=\\"btn btn-success btn-md disabled\\">
"<button data-track-event=\\"click_button\\" data-qa-selector=\\"save_comment_button\\" type=\\"submit\\" disabled=\\"disabled\\" class=\\"btn btn-success btn-md disabled gl-button\\">
<!---->
<!----> <span class=\\"gl-button-text\\">
Comment
</button>"
</span></button>"
`;
exports[`Design reply form component renders button text as "Save comment" when creating a comment 1`] = `
"<button data-track-event=\\"click_button\\" data-qa-selector=\\"save_comment_button\\" type=\\"submit\\" disabled=\\"disabled\\" class=\\"btn btn-success btn-md disabled\\">
"<button data-track-event=\\"click_button\\" data-qa-selector=\\"save_comment_button\\" type=\\"submit\\" disabled=\\"disabled\\" class=\\"btn btn-success btn-md disabled gl-button\\">
<!---->
<!----> <span class=\\"gl-button-text\\">
Save comment
</button>"
</span></button>"
`;
spec/frontend/design_management/components/design_notes/design_discussion_spec.js
View file @ b14ded85
......@@ -233,7 +233,7 @@ describe('Design discussions component', () => {
{ discussionComment: 'test', isFormRendered: true },
);
findReplyForm().vm.$emit('submitForm');
findReplyForm().vm.$emit('submit-form');
expect(mutate).toHaveBeenCalledWith(mutationVariables);
return mutate()
......@@ -254,7 +254,7 @@ describe('Design discussions component', () => {
return wrapper.vm
.$nextTick()
.then(() => {
findReplyForm().vm.$emit('cancelForm');
findReplyForm().vm.$emit('cancel-form');
expect(wrapper.vm.discussionComment).toBe('');
return wrapper.vm.$nextTick();
......@@ -325,6 +325,6 @@ describe('Design discussions component', () => {
createComponent();
findReplyPlaceholder().vm.$emit('onClick');
expect(wrapper.emitted('openForm')).toBeTruthy();
expect(wrapper.emitted('open-form')).toBeTruthy();
});
});
spec/frontend/design_management/components/design_notes/design_note_spec.js
View file @ b14ded85
......@@ -133,8 +133,8 @@ describe('Design note component', () => {
expect(findReplyForm().exists()).toBe(true);
});
it('hides the form on hideForm event', () => {
findReplyForm().vm.$emit('cancelForm');
it('hides the form on cancel-form event', () => {
findReplyForm().vm.$emit('cancel-form');
return wrapper.vm.$nextTick().then(() => {
expect(findReplyForm().exists()).toBe(false);
......@@ -142,8 +142,8 @@ describe('Design note component', () => {
});
});
it('calls a mutation on submitForm event and hides a form', () => {
findReplyForm().vm.$emit('submitForm');
it('calls a mutation on submit-form event and hides a form', () => {
findReplyForm().vm.$emit('submit-form');
expect(mutate).toHaveBeenCalled();
return mutate()
......
spec/frontend/design_management/components/design_notes/design_reply_form_spec.js
View file @ b14ded85
......@@ -70,7 +70,7 @@ describe('Design reply form component', () => {
});
return wrapper.vm.$nextTick().then(() => {
expect(wrapper.emitted('submitForm')).toBeFalsy();
expect(wrapper.emitted('submit-form')).toBeFalsy();
});
});
......@@ -80,20 +80,20 @@ describe('Design reply form component', () => {
});
return wrapper.vm.$nextTick().then(() => {
expect(wrapper.emitted('submitForm')).toBeFalsy();
expect(wrapper.emitted('submit-form')).toBeFalsy();
});
});
it('emits cancelForm event on pressing escape button on textarea', () => {
findTextarea().trigger('keyup.esc');
expect(wrapper.emitted('cancelForm')).toBeTruthy();
expect(wrapper.emitted('cancel-form')).toBeTruthy();
});
it('emits cancelForm event on clicking Cancel button', () => {
findCancelButton().vm.$emit('click');
expect(wrapper.emitted('cancelForm')).toHaveLength(1);
expect(wrapper.emitted('cancel-form')).toHaveLength(1);
});
});
......@@ -112,7 +112,7 @@ describe('Design reply form component', () => {
findSubmitButton().vm.$emit('click');
return wrapper.vm.$nextTick().then(() => {
expect(wrapper.emitted('submitForm')).toBeTruthy();
expect(wrapper.emitted('submit-form')).toBeTruthy();
});
});
......@@ -122,7 +122,7 @@ describe('Design reply form component', () => {
});
return wrapper.vm.$nextTick().then(() => {
expect(wrapper.emitted('submitForm')).toBeTruthy();
expect(wrapper.emitted('submit-form')).toBeTruthy();
});
});
......@@ -132,7 +132,7 @@ describe('Design reply form component', () => {
});
return wrapper.vm.$nextTick().then(() => {
expect(wrapper.emitted('submitForm')).toBeTruthy();
expect(wrapper.emitted('submit-form')).toBeTruthy();
});
});
......@@ -147,7 +147,7 @@ describe('Design reply form component', () => {
it('emits cancelForm event on Escape key if text was not changed', () => {
findTextarea().trigger('keyup.esc');
expect(wrapper.emitted('cancelForm')).toBeTruthy();
expect(wrapper.emitted('cancel-form')).toBeTruthy();
});
it('opens confirmation modal on Escape key when text has changed', () => {
......@@ -162,7 +162,7 @@ describe('Design reply form component', () => {
it('emits cancelForm event on Cancel button click if text was not changed', () => {
findCancelButton().trigger('click');
expect(wrapper.emitted('cancelForm')).toBeTruthy();
expect(wrapper.emitted('cancel-form')).toBeTruthy();
});
it('opens confirmation modal on Cancel button click when text has changed', () => {
......@@ -178,7 +178,7 @@ describe('Design reply form component', () => {
findTextarea().trigger('keyup.esc');
findModal().vm.$emit('ok');
expect(wrapper.emitted('cancelForm')).toBeTruthy();
expect(wrapper.emitted('cancel-form')).toBeTruthy();
});
});
});
spec/frontend/design_management/components/design_sidebar_spec.js
View file @ b14ded85
......@@ -154,22 +154,22 @@ describe('Design management design sidebar component', () => {
});
it('emits correct event on discussion create note error', () => {
findFirstDiscussion().vm.$emit('createNoteError', 'payload');
findFirstDiscussion().vm.$emit('create-note-error', 'payload');
expect(wrapper.emitted('onDesignDiscussionError')).toEqual([['payload']]);
});
it('emits correct event on discussion update note error', () => {
findFirstDiscussion().vm.$emit('updateNoteError', 'payload');
findFirstDiscussion().vm.$emit('update-note-error', 'payload');
expect(wrapper.emitted('updateNoteError')).toEqual([['payload']]);
});
it('emits correct event on discussion resolve error', () => {
findFirstDiscussion().vm.$emit('resolveDiscussionError', 'payload');
findFirstDiscussion().vm.$emit('resolve-discussion-error', 'payload');
expect(wrapper.emitted('resolveDiscussionError')).toEqual([['payload']]);
});
it('changes prop correctly on opening discussion form', () => {
findFirstDiscussion().vm.$emit('openForm', 'some-id');
findFirstDiscussion().vm.$emit('open-form', 'some-id');
return wrapper.vm.$nextTick().then(() => {
expect(findFirstDiscussion().props('discussionWithOpenForm')).toBe('some-id');
......
spec/frontend/design_management/pages/design/index_spec.js
View file @ b14ded85
......@@ -210,7 +210,7 @@ describe('Design management design index page', () => {
},
);
findDiscussionForm().vm.$emit('submitForm');
findDiscussionForm().vm.$emit('submit-form');
expect(mutate).toHaveBeenCalledWith(createDiscussionMutationVariables);
return wrapper.vm
......@@ -235,7 +235,7 @@ describe('Design management design index page', () => {
},
);
findDiscussionForm().vm.$emit('cancelForm');
findDiscussionForm().vm.$emit('cancel-form');
expect(wrapper.vm.comment).toBe('');
......
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7