Skip to content

G
gitlab-ce
Commit 9439791d authored by Kushal Pandya's avatar Kushal Pandya
Browse files
Options

Merge branch 'winh-timeline-entry-component-ee' into 'master' 

Extract shared timeline entry component (EE-port)

See merge request gitlab-org/gitlab-ee!8647
parents 0642a3d4 85f524f9
Hide whitespace changes
Inline Side-by-side
Showing with 290 additions and 236 deletions
app/assets/javascripts/notes/components/comment_form.vue
View file @ 9439791d
......@@ -4,6 +4,7 @@ import { mapActions, mapGetters, mapState } from 'vuex';
import _ from 'underscore';
import Autosize from 'autosize';
import { __, sprintf } from '~/locale';
import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item.vue';
import Flash from '../../flash';
import Autosave from '../../autosave';
import {
......@@ -30,6 +31,7 @@ export default {
markdownField,
userAvatarLink,
loadingButton,
TimelineEntryItem,
},
mixins: [issuableStateMixin],
props: {
......@@ -309,137 +311,135 @@ Please check your network connection and try again.`;
<div>
<note-signed-out-widget v-if="!isLoggedIn" />
<discussion-locked-widget v-else-if="!canCreateNote" :issuable-type="issuableTypeTitle" />
<div v-else-if="canCreateNote" class="notes notes-form timeline">
<div class="timeline-entry note-form">
<div class="timeline-entry-inner">
<div class="flash-container error-alert timeline-content"></div>
<div class="timeline-icon d-none d-sm-none d-md-block">
<user-avatar-link
v-if="author"
:link-href="author.path"
:img-src="author.avatar_url"
:img-alt="author.name"
:img-size="40"
/>
</div>
<div class="timeline-content timeline-content-form">
<form ref="commentForm" class="new-note common-note-form gfm-form js-main-target-form">
<div class="error-alert"></div>
<ul v-else-if="canCreateNote" class="notes notes-form timeline">
<timeline-entry-item class="note-form">
<div class="flash-container error-alert timeline-content"></div>
<div class="timeline-icon d-none d-sm-none d-md-block">
<user-avatar-link
v-if="author"
:link-href="author.path"
:img-src="author.avatar_url"
:img-alt="author.name"
:img-size="40"
/>
</div>
<div class="timeline-content timeline-content-form">
<form ref="commentForm" class="new-note common-note-form gfm-form js-main-target-form">
<div class="error-alert"></div>
<issue-warning
v-if="hasWarning(getNoteableData)"
:is-locked="isLocked(getNoteableData)"
:is-confidential="isConfidential(getNoteableData)"
/>
<issue-warning
v-if="hasWarning(getNoteableData)"
:is-locked="isLocked(getNoteableData)"
:is-confidential="isConfidential(getNoteableData)"
/>
<markdown-field
ref="markdownField"
:markdown-preview-path="markdownPreviewPath"
:markdown-docs-path="markdownDocsPath"
:quick-actions-docs-path="quickActionsDocsPath"
:markdown-version="markdownVersion"
:add-spacing-classes="false"
>
<textarea
id="note-body"
ref="textarea"
slot="textarea"
v-model="note"
:disabled="isSubmitting"
name="note[note]"
class="note-textarea js-vue-comment-form js-note-text
<markdown-field
ref="markdownField"
:markdown-preview-path="markdownPreviewPath"
:markdown-docs-path="markdownDocsPath"
:quick-actions-docs-path="quickActionsDocsPath"
:markdown-version="markdownVersion"
:add-spacing-classes="false"
>
<textarea
id="note-body"
ref="textarea"
slot="textarea"
v-model="note"
:disabled="isSubmitting"
name="note[note]"
class="note-textarea js-vue-comment-form js-note-text
js-gfm-input js-autosize markdown-area js-vue-textarea qa-comment-input"
data-supports-quick-actions="true"
aria-label="Description"
placeholder="Write a comment or drag your files here…"
@keydown.up="editCurrentUserLastNote();"
@keydown.meta.enter="handleSave();"
@keydown.ctrl.enter="handleSave();"
>
</textarea>
</markdown-field>
<div class="note-form-actions">
<div
class="float-left btn-group
data-supports-quick-actions="true"
aria-label="Description"
placeholder="Write a comment or drag your files here…"
@keydown.up="editCurrentUserLastNote();"
@keydown.meta.enter="handleSave();"
@keydown.ctrl.enter="handleSave();"
>
</textarea>
</markdown-field>
<div class="note-form-actions">
<div
class="float-left btn-group
append-right-10 comment-type-dropdown js-comment-type-dropdown droplab-dropdown"
>
<button
:disabled="isSubmitButtonDisabled"
class="btn btn-success comment-btn js-comment-button js-comment-submit-button
qa-comment-button"
type="submit"
@click.prevent="handleSave();"
>
<button
:disabled="isSubmitButtonDisabled"
class="btn btn-success comment-btn js-comment-button js-comment-submit-button
qa-comment-button"
type="submit"
@click.prevent="handleSave();"
>
{{ __(commentButtonTitle) }}
</button>
<button
:disabled="isSubmitButtonDisabled"
name="button"
type="button"
class="btn comment-btn note-type-toggle js-note-new-discussion dropdown-toggle qa-note-dropdown"
data-display="static"
data-toggle="dropdown"
aria-label="Open comment type dropdown"
>
<i aria-hidden="true" class="fa fa-caret-down toggle-icon"> </i>
</button>
<ul class="note-type-dropdown dropdown-open-top dropdown-menu">
<li :class="{ 'droplab-item-selected': noteType === 'comment' }">
<button
type="button"
class="btn btn-transparent"
@click.prevent="setNoteType('comment');"
>
<i aria-hidden="true" class="fa fa-check icon"> </i>
<div class="description">
<strong>Comment</strong>
<p>Add a general comment to this {{ noteableDisplayName }}.</p>
</div>
</button>
</li>
<li class="divider droplab-item-ignore"></li>
<li :class="{ 'droplab-item-selected': noteType === 'discussion' }">
<button
type="button"
class="btn btn-transparent qa-discussion-option"
@click.prevent="setNoteType('discussion');"
>
<i aria-hidden="true" class="fa fa-check icon"> </i>
<div class="description">
<strong>Start discussion</strong>
<p>{{ startDiscussionDescription }}</p>
</div>
</button>
</li>
</ul>
</div>
<loading-button
v-if="canUpdateIssue"
:loading="isToggleStateButtonLoading"
:container-class="[
actionButtonClassNames,
'btn btn-comment btn-comment-and-close js-action-button',
]"
:disabled="isToggleStateButtonLoading || isSubmitting"
:label="issueActionButtonTitle"
@click="handleSave(true);"
/>
{{ __(commentButtonTitle) }}
</button>
<button
v-if="note.length"
:disabled="isSubmitButtonDisabled"
name="button"
type="button"
class="btn btn-cancel js-note-discard"
@click="discard"
class="btn comment-btn note-type-toggle js-note-new-discussion dropdown-toggle qa-note-dropdown"
data-display="static"
data-toggle="dropdown"
aria-label="Open comment type dropdown"
>
Discard draft
<i aria-hidden="true" class="fa fa-caret-down toggle-icon"> </i>
</button>
<ul class="note-type-dropdown dropdown-open-top dropdown-menu">
<li :class="{ 'droplab-item-selected': noteType === 'comment' }">
<button
type="button"
class="btn btn-transparent"
@click.prevent="setNoteType('comment');"
>
<i aria-hidden="true" class="fa fa-check icon"> </i>
<div class="description">
<strong>Comment</strong>
<p>Add a general comment to this {{ noteableDisplayName }}.</p>
</div>
</button>
</li>
<li class="divider droplab-item-ignore"></li>
<li :class="{ 'droplab-item-selected': noteType === 'discussion' }">
<button
type="button"
class="btn btn-transparent qa-discussion-option"
@click.prevent="setNoteType('discussion');"
>
<i aria-hidden="true" class="fa fa-check icon"> </i>
<div class="description">
<strong>Start discussion</strong>
<p>{{ startDiscussionDescription }}</p>
</div>
</button>
</li>
</ul>
</div>
</form>
</div>
<loading-button
v-if="canUpdateIssue"
:loading="isToggleStateButtonLoading"
:container-class="[
actionButtonClassNames,
'btn btn-comment btn-comment-and-close js-action-button',
]"
:disabled="isToggleStateButtonLoading || isSubmitting"
:label="issueActionButtonTitle"
@click="handleSave(true);"
/>
<button
v-if="note.length"
type="button"
class="btn btn-cancel js-note-discard"
@click="discard"
>
Discard draft
</button>
</div>
</form>
</div>
</div>
</div>
</timeline-entry-item>
</ul>
</div>
</template>
app/assets/javascripts/notes/components/noteable_note.vue
View file @ 9439791d
......@@ -2,6 +2,7 @@
import $ from 'jquery';
import { mapGetters, mapActions } from 'vuex';
import { escape } from 'underscore';
import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item.vue';
import Flash from '../../flash';
import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
import noteHeader from './note_header.vue';
......@@ -18,6 +19,7 @@ export default {
noteHeader,
noteActions,
noteBody,
TimelineEntryItem,
},
mixins: [noteable, resolvable],
props: {
......@@ -173,68 +175,66 @@ export default {
</script>
<template>
<li
<timeline-entry-item
:id="noteAnchorId"
:class="classNameBindings"
:data-award-url="note.toggle_award_path"
:data-note-id="note.id"
class="note timeline-entry note-wrapper"
class="note note-wrapper"
>
<div class="timeline-entry-inner">
<div v-once class="timeline-icon">
<user-avatar-link
:link-href="author.path"
:img-src="author.avatar_url"
:img-alt="author.name"
:img-size="40"
<div v-once class="timeline-icon">
<user-avatar-link
:link-href="author.path"
:img-src="author.avatar_url"
:img-alt="author.name"
:img-size="40"
>
<slot slot="avatar-badge" name="avatar-badge"> </slot>
</user-avatar-link>
</div>
<div class="timeline-content">
<div class="note-header">
<note-header
v-once
:author="author"
:created-at="note.created_at"
:note-id="note.id"
action-text="commented"
>
<slot slot="avatar-badge" name="avatar-badge"> </slot>
</user-avatar-link>
</div>
<div class="timeline-content">
<div class="note-header">
<note-header
v-once
:author="author"
:created-at="note.created_at"
:note-id="note.id"
action-text="commented"
>
<slot slot="note-header-info" name="note-header-info"> </slot>
</note-header>
<note-actions
:author-id="author.id"
:note-id="note.id"
:note-url="note.noteable_note_url"
:access-level="note.human_access"
:can-edit="note.current_user.can_edit"
:can-award-emoji="note.current_user.can_award_emoji"
:can-delete="note.current_user.can_edit"
:can-report-as-abuse="canReportAsAbuse"
:can-resolve="
note.current_user.can_resolve || (note.isDraft && note.discussion_id !== null)
"
:report-abuse-path="note.report_abuse_path"
:resolvable="note.resolvable || note.isDraft"
:is-resolved="note.resolved || note.resolve_discussion"
:is-resolving="isResolving"
:resolved-by="note.resolved_by"
:discussion-id="note.isDraft && note.discussion_id"
:resolve-discussion="note.isDraft && note.resolve_discussion"
@handleEdit="editHandler"
@handleDelete="deleteHandler"
@handleResolve="resolveHandler"
/>
</div>
<note-body
ref="noteBody"
:note="note"
<slot slot="note-header-info" name="note-header-info"> </slot>
</note-header>
<note-actions
:author-id="author.id"
:note-id="note.id"
:note-url="note.noteable_note_url"
:access-level="note.human_access"
:can-edit="note.current_user.can_edit"
:is-editing="isEditing"
@handleFormUpdate="formUpdateHandler"
@cancelForm="formCancelHandler"
:can-award-emoji="note.current_user.can_award_emoji"
:can-delete="note.current_user.can_edit"
:can-report-as-abuse="canReportAsAbuse"
:can-resolve="
note.current_user.can_resolve || (note.isDraft && note.discussion_id !== null)
"
:report-abuse-path="note.report_abuse_path"
:resolvable="note.resolvable || note.isDraft"
:is-resolved="note.resolved || note.resolve_discussion"
:is-resolving="isResolving"
:resolved-by="note.resolved_by"
:discussion-id="note.isDraft && note.discussion_id"
:resolve-discussion="note.isDraft && note.resolve_discussion"
@handleEdit="editHandler"
@handleDelete="deleteHandler"
@handleResolve="resolveHandler"
/>
</div>
<note-body
ref="noteBody"
:note="note"
:can-edit="note.current_user.can_edit"
:is-editing="isEditing"
@handleFormUpdate="formUpdateHandler"
@cancelForm="formCancelHandler"
/>
</div>
</li>
</timeline-entry-item>
</template>
app/assets/javascripts/vue_shared/components/notes/placeholder_note.vue
View file @ 9439791d
......@@ -17,12 +17,14 @@
* />
*/
import { mapGetters } from 'vuex';
import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item.vue';
import userAvatarLink from '../user_avatar/user_avatar_link.vue';
export default {
name: 'PlaceholderNote',
components: {
userAvatarLink,
TimelineEntryItem,
},
props: {
note: {
......@@ -37,30 +39,28 @@ export default {
</script>
<template>
<li class="note being-posted fade-in-half timeline-entry">
<div class="timeline-entry-inner">
<div class="timeline-icon">
<user-avatar-link
:link-href="getUserData.path"
:img-src="getUserData.avatar_url"
:img-size="40"
/>
</div>
<div :class="{ discussion: !note.individual_note }" class="timeline-content">
<div class="note-header">
<div class="note-header-info">
<a :href="getUserData.path">
<span class="d-none d-sm-inline-block">{{ getUserData.name }}</span>
<span class="note-headline-light">@{{ getUserData.username }}</span>
</a>
</div>
<timeline-entry-item class="note being-posted fade-in-half">
<div class="timeline-icon">
<user-avatar-link
:link-href="getUserData.path"
:img-src="getUserData.avatar_url"
:img-size="40"
/>
</div>
<div :class="{ discussion: !note.individual_note }" class="timeline-content">
<div class="note-header">
<div class="note-header-info">
<a :href="getUserData.path">
<span class="d-none d-sm-inline-block">{{ getUserData.name }}</span>
<span class="note-headline-light">@{{ getUserData.username }}</span>
</a>
</div>
<div class="note-body">
<div class="note-text">
<p>{{ note.body }}</p>
</div>
</div>
<div class="note-body">
<div class="note-text">
<p>{{ note.body }}</p>
</div>
</div>
</div>
</li>
</timeline-entry-item>
</template>
app/assets/javascripts/vue_shared/components/notes/placeholder_system_note.vue
View file @ 9439791d
<script>
import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item.vue';
/**
* Common component to render a placeholder system note.
*
......@@ -9,6 +11,9 @@
*/
export default {
name: 'PlaceholderSystemNote',
components: {
TimelineEntryItem,
},
props: {
note: {
type: Object,
......@@ -19,11 +24,9 @@ export default {
</script>
<template>
<li class="note system-note timeline-entry being-posted fade-in-half">
<div class="timeline-entry-inner">
<div class="timeline-content">
<em>{{ note.body }}</em>
</div>
<timeline-entry-item class="note system-note being-posted fade-in-half">
<div class="timeline-content">
<em>{{ note.body }}</em>
</div>
</li>
</timeline-entry-item>
</template>
app/assets/javascripts/vue_shared/components/notes/skeleton_note.vue
View file @ 9439791d
<script>
import { GlSkeletonLoading } from '@gitlab/ui';
import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item.vue';
export default {
name: 'SkeletonNote',
components: {
GlSkeletonLoading,
TimelineEntryItem,
},
};
</script>
<template>
<li class="timeline-entry note note-wrapper">
<div class="timeline-entry-inner">
<div class="timeline-icon"></div>
<div class="timeline-content">
<div class="note-header"></div>
<div class="note-body"><gl-skeleton-loading /></div>
</div>
<timeline-entry-item class="note note-wrapper">
<div class="timeline-icon"></div>
<div class="timeline-content">
<div class="note-header"></div>
<div class="note-body"><gl-skeleton-loading /></div>
</div>
</li>
</timeline-entry-item>
</template>
app/assets/javascripts/vue_shared/components/notes/system_note.vue
View file @ 9439791d
......@@ -20,6 +20,7 @@ import $ from 'jquery';
import { mapGetters } from 'vuex';
import noteHeader from '~/notes/components/note_header.vue';
import Icon from '~/vue_shared/components/icon.vue';
import TimelineEntryItem from './timeline_entry_item.vue';
import { spriteIcon } from '../../../lib/utils/common_utils';
const MAX_VISIBLE_COMMIT_LIST_COUNT = 3;
......@@ -29,6 +30,7 @@ export default {
components: {
Icon,
noteHeader,
TimelineEntryItem,
},
props: {
note: {
......@@ -73,36 +75,34 @@ export default {
</script>
<template>
<li
<timeline-entry-item
:id="noteAnchorId"
:class="{ target: isTargetNote }"
class="note system-note timeline-entry note-wrapper"
class="note system-note note-wrapper"
>
<div class="timeline-entry-inner">
<div class="timeline-icon" v-html="iconHtml"></div>
<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>
</note-header>
</div>
<div class="note-body">
<div
:class="{
'system-note-commit-list': hasMoreCommits,
'hide-shade': expanded,
}"
class="note-text"
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="append-right-5" />
<span>Toggle commit list</span>
</div>
<div class="timeline-icon" v-html="iconHtml"></div>
<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>
</note-header>
</div>
<div class="note-body">
<div
:class="{
'system-note-commit-list': hasMoreCommits,
'hide-shade': expanded,
}"
class="note-text"
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="append-right-5" />
<span>Toggle commit list</span>
</div>
</div>
</div>
</div>
</li>
</timeline-entry-item>
</template>
app/assets/javascripts/vue_shared/components/notes/timeline_entry_item.vue 0 → 100644
View file @ 9439791d
<script>
export default {
name: 'TimelineEntryItem',
};
</script>
<template>
<li class="timeline-entry">
<div class="timeline-entry-inner"><slot></slot></div>
</li>
</template>
spec/javascripts/vue_shared/components/notes/timeline_entry_item_spec.js 0 → 100644
View file @ 9439791d
import { shallowMount, createLocalVue } from '@vue/test-utils';
import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item.vue';
describe(TimelineEntryItem.name, () => {
let wrapper;
const factory = (options = {}) => {
const localVue = createLocalVue();
wrapper = shallowMount(TimelineEntryItem, {
localVue,
...options,
});
};
afterEach(() => {
wrapper.destroy();
});
it('renders correctly', () => {
factory();
expect(wrapper.is('.timeline-entry')).toBe(true);
expect(wrapper.contains('.timeline-entry-inner')).toBe(true);
});
it('accepts default slot', () => {
const dummyContent = '<p>some content</p>';
factory({
slots: {
default: dummyContent,
},
});
const content = wrapper.find('.timeline-entry-inner :first-child');
expect(content.html()).toBe(dummyContent);
});
});
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