Skip to content

G
gitlab-ce
Commit a8fdc573 authored by Jose Ivan Vargas's avatar Jose Ivan Vargas
Browse files
Options

Merge branch 'ntepluhina-refactor-design-management-to-gitlab-ui-1' into 'master' 

Update design discussions to use GitLab UI components

See merge request gitlab-org/gitlab!41686
parents 63124283 b14ded85
Hide 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 @ a8fdc573
<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 createFlash from '~/flash';
import ReplyPlaceholder from '~/notes/components/discussion_reply_placeholder.vue';
......@@ -27,6 +27,7 @@ export default {
GlLink,
ToggleRepliesWidget,
TimeAgoTooltip,
GlBadge,
},
directives: {
GlTooltip: GlTooltipDirective,
......@@ -148,14 +149,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() {
......@@ -167,11 +168,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;
......@@ -192,13 +193,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"
......@@ -208,7 +208,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
......@@ -216,7 +216,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"
......@@ -252,7 +251,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
......@@ -275,8 +274,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 @ a8fdc573
<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 @ a8fdc573
<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 @ a8fdc573
......@@ -159,11 +159,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 @ a8fdc573
......@@ -372,8 +372,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 @ a8fdc573
---
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 @ a8fdc573
......@@ -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 @ a8fdc573
// 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\\">
<!---->
Comment
</button>"
<!----> <span class=\\"gl-button-text\\">
Comment
</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\\">
<!---->
Save comment
</button>"
<!----> <span class=\\"gl-button-text\\">
Save comment
</span></button>"
`;
spec/frontend/design_management/components/design_notes/design_discussion_spec.js
View file @ a8fdc573
......@@ -232,7 +232,7 @@ describe('Design discussions component', () => {
{ discussionComment: 'test', isFormRendered: true },
);
findReplyForm().vm.$emit('submitForm');
findReplyForm().vm.$emit('submit-form');
expect(mutate).toHaveBeenCalledWith(mutationVariables);
await mutate();
......@@ -250,7 +250,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();
......@@ -321,6 +321,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 @ a8fdc573
......@@ -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 @ a8fdc573
......@@ -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 @ a8fdc573
......@@ -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 @ a8fdc573
......@@ -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