Skip to content

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

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

Extract shared timeline entry component

See merge request gitlab-org/gitlab-ce!23447
parents df027849 e3bddb62
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 418 additions and 368 deletions
app/assets/javascripts/notes/components/noteable_note.vue
View file @ b6e70c8a
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
import $ from 'jquery'; import $ from 'jquery';
import { mapGetters, mapActions } from 'vuex'; import { mapGetters, mapActions } from 'vuex';
import { escape } from 'underscore'; import { escape } from 'underscore';
import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item.vue';
import Flash from '../../flash'; import Flash from '../../flash';
import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue'; import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
import noteHeader from './note_header.vue'; import noteHeader from './note_header.vue';
...@@ -18,6 +19,7 @@ export default { ...@@ -18,6 +19,7 @@ export default {
noteHeader, noteHeader,
noteActions, noteActions,
noteBody, noteBody,
TimelineEntryItem,
}, },
mixins: [noteable, resolvable], mixins: [noteable, resolvable],
props: { props: {
...@@ -169,62 +171,60 @@ export default { ...@@ -169,62 +171,60 @@ export default {
</script> </script>
<template> <template>
<li <timeline-entry-item
:id="noteAnchorId" :id="noteAnchorId"
:class="classNameBindings" :class="classNameBindings"
:data-award-url="note.toggle_award_path" :data-award-url="note.toggle_award_path"
:data-note-id="note.id" :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">
<div v-once class="timeline-icon"> <user-avatar-link
<user-avatar-link :link-href="author.path"
:link-href="author.path" :img-src="author.avatar_url"
:img-src="author.avatar_url" :img-alt="author.name"
:img-alt="author.name" :img-size="40"
:img-size="40" >
> <slot slot="avatar-badge" name="avatar-badge"> </slot>
<slot slot="avatar-badge" name="avatar-badge"> </slot> </user-avatar-link>
</user-avatar-link> </div>
</div> <div class="timeline-content">
<div class="timeline-content"> <div class="note-header">
<div class="note-header"> <note-header
<note-header v-once
v-once :author="author"
:author="author" :created-at="note.created_at"
:created-at="note.created_at" :note-id="note.id"
:note-id="note.id" action-text="commented"
action-text="commented" />
/> <note-actions
<note-actions :author-id="author.id"
:author-id="author.id" :note-id="note.id"
:note-id="note.id" :note-url="note.noteable_note_url"
:note-url="note.noteable_note_url" :access-level="note.human_access"
: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"
:report-abuse-path="note.report_abuse_path"
:resolvable="note.resolvable"
:is-resolved="note.resolved"
:is-resolving="isResolving"
:resolved-by="note.resolved_by"
@handleEdit="editHandler"
@handleDelete="deleteHandler"
@handleResolve="resolveHandler"
/>
</div>
<note-body
ref="noteBody"
:note="note"
:can-edit="note.current_user.can_edit" :can-edit="note.current_user.can_edit"
:is-editing="isEditing" :can-award-emoji="note.current_user.can_award_emoji"
@handleFormUpdate="formUpdateHandler" :can-delete="note.current_user.can_edit"
@cancelForm="formCancelHandler" :can-report-as-abuse="canReportAsAbuse"
:can-resolve="note.current_user.can_resolve"
:report-abuse-path="note.report_abuse_path"
:resolvable="note.resolvable"
:is-resolved="note.resolved"
:is-resolving="isResolving"
:resolved-by="note.resolved_by"
@handleEdit="editHandler"
@handleDelete="deleteHandler"
@handleResolve="resolveHandler"
/> />
</div> </div>
<note-body
ref="noteBody"
:note="note"
:can-edit="note.current_user.can_edit"
:is-editing="isEditing"
@handleFormUpdate="formUpdateHandler"
@cancelForm="formCancelHandler"
/>
</div> </div>
</li> </timeline-entry-item>
</template> </template>
app/assets/javascripts/vue_shared/components/notes/placeholder_note.vue
View file @ b6e70c8a
...@@ -17,12 +17,14 @@ ...@@ -17,12 +17,14 @@
* /> * />
*/ */
import { mapGetters } from 'vuex'; import { mapGetters } from 'vuex';
import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item.vue';
import userAvatarLink from '../user_avatar/user_avatar_link.vue'; import userAvatarLink from '../user_avatar/user_avatar_link.vue';
export default { export default {
name: 'PlaceholderNote', name: 'PlaceholderNote',
components: { components: {
userAvatarLink, userAvatarLink,
TimelineEntryItem,
}, },
props: { props: {
note: { note: {
...@@ -37,30 +39,28 @@ export default { ...@@ -37,30 +39,28 @@ export default {
</script> </script>
<template> <template>
<li class="note being-posted fade-in-half timeline-entry"> <timeline-entry-item class="note being-posted fade-in-half">
<div class="timeline-entry-inner"> <div class="timeline-icon">
<div class="timeline-icon"> <user-avatar-link
<user-avatar-link :link-href="getUserData.path"
:link-href="getUserData.path" :img-src="getUserData.avatar_url"
:img-src="getUserData.avatar_url" :img-size="40"
:img-size="40" />
/> </div>
</div> <div :class="{ discussion: !note.individual_note }" class="timeline-content">
<div :class="{ discussion: !note.individual_note }" class="timeline-content"> <div class="note-header">
<div class="note-header"> <div class="note-header-info">
<div class="note-header-info"> <a :href="getUserData.path">
<a :href="getUserData.path"> <span class="d-none d-sm-inline-block">{{ getUserData.name }}</span>
<span class="d-none d-sm-inline-block">{{ getUserData.name }}</span> <span class="note-headline-light">@{{ getUserData.username }}</span>
<span class="note-headline-light">@{{ getUserData.username }}</span> </a>
</a>
</div>
</div> </div>
<div class="note-body"> </div>
<div class="note-text"> <div class="note-body">
<p>{{ note.body }}</p> <div class="note-text">
</div> <p>{{ note.body }}</p>
</div> </div>
</div> </div>
</div> </div>
</li> </timeline-entry-item>
</template> </template>
app/assets/javascripts/vue_shared/components/notes/placeholder_system_note.vue
View file @ b6e70c8a
<script> <script>
import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item.vue';
/** /**
* Common component to render a placeholder system note. * Common component to render a placeholder system note.
* *
...@@ -9,6 +11,9 @@ ...@@ -9,6 +11,9 @@
*/ */
export default { export default {
name: 'PlaceholderSystemNote', name: 'PlaceholderSystemNote',
components: {
TimelineEntryItem,
},
props: { props: {
note: { note: {
type: Object, type: Object,
...@@ -19,11 +24,9 @@ export default { ...@@ -19,11 +24,9 @@ export default {
</script> </script>
<template> <template>
<li class="note system-note timeline-entry being-posted fade-in-half"> <timeline-entry-item class="note system-note being-posted fade-in-half">
<div class="timeline-entry-inner"> <div class="timeline-content">
<div class="timeline-content"> <em>{{ note.body }}</em>
<em>{{ note.body }}</em>
</div>
</div> </div>
</li> </timeline-entry-item>
</template> </template>
app/assets/javascripts/vue_shared/components/notes/skeleton_note.vue
View file @ b6e70c8a
<script> <script>
import { GlSkeletonLoading } from '@gitlab/ui'; import { GlSkeletonLoading } from '@gitlab/ui';
import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item.vue';
export default { export default {
name: 'SkeletonNote', name: 'SkeletonNote',
components: { components: {
GlSkeletonLoading, GlSkeletonLoading,
TimelineEntryItem,
}, },
}; };
</script> </script>
<template> <template>
<li class="timeline-entry note note-wrapper"> <timeline-entry-item class="note note-wrapper">
<div class="timeline-entry-inner"> <div class="timeline-icon"></div>
<div class="timeline-icon"></div> <div class="timeline-content">
<div class="timeline-content"> <div class="note-header"></div>
<div class="note-header"></div> <div class="note-body"><gl-skeleton-loading /></div>
<div class="note-body"><gl-skeleton-loading /></div>
</div>
</div> </div>
</li> </timeline-entry-item>
</template> </template>
app/assets/javascripts/vue_shared/components/notes/system_note.vue
View file @ b6e70c8a
...@@ -20,6 +20,7 @@ import $ from 'jquery'; ...@@ -20,6 +20,7 @@ import $ from 'jquery';
import { mapGetters } from 'vuex'; import { mapGetters } from 'vuex';
import noteHeader from '~/notes/components/note_header.vue'; import noteHeader from '~/notes/components/note_header.vue';
import Icon from '~/vue_shared/components/icon.vue'; import Icon from '~/vue_shared/components/icon.vue';
import TimelineEntryItem from './timeline_entry_item.vue';
import { spriteIcon } from '../../../lib/utils/common_utils'; import { spriteIcon } from '../../../lib/utils/common_utils';
const MAX_VISIBLE_COMMIT_LIST_COUNT = 3; const MAX_VISIBLE_COMMIT_LIST_COUNT = 3;
...@@ -29,6 +30,7 @@ export default { ...@@ -29,6 +30,7 @@ export default {
components: { components: {
Icon, Icon,
noteHeader, noteHeader,
TimelineEntryItem,
}, },
props: { props: {
note: { note: {
...@@ -73,36 +75,34 @@ export default { ...@@ -73,36 +75,34 @@ export default {
</script> </script>
<template> <template>
<li <timeline-entry-item
:id="noteAnchorId" :id="noteAnchorId"
:class="{ target: isTargetNote }" :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-icon" v-html="iconHtml"></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-html="actionTextHtml"></span> </note-header>
</note-header> </div>
</div> <div class="note-body">
<div class="note-body"> <div
<div :class="{
:class="{ 'system-note-commit-list': hasMoreCommits,
'system-note-commit-list': hasMoreCommits, 'hide-shade': expanded,
'hide-shade': expanded, }"
}" class="note-text"
class="note-text" v-html="note.note_html"
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;"> <icon :name="toggleIcon" :size="8" class="append-right-5" />
<icon :name="toggleIcon" :size="8" class="append-right-5" /> <span>Toggle commit list</span>
<span>Toggle commit list</span>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</li> </timeline-entry-item>
</template> </template>
app/assets/javascripts/vue_shared/components/notes/timeline_entry_item.vue 0 → 100644
View file @ b6e70c8a
<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 @ b6e70c8a
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