aboutsummaryrefslogtreecommitdiffstats
path: root/apps/comments/src
diff options
context:
space:
mode:
Diffstat (limited to 'apps/comments/src')
-rw-r--r--apps/comments/src/actions/inlineUnreadCommentsAction.spec.ts17
-rw-r--r--apps/comments/src/comments-activity-tab.ts32
-rw-r--r--apps/comments/src/comments-tab.js4
-rw-r--r--apps/comments/src/components/Comment.vue122
-rw-r--r--apps/comments/src/mixins/CommentMixin.js10
-rw-r--r--apps/comments/src/services/CommentsInstance.js11
-rw-r--r--apps/comments/src/services/DavClient.js12
-rw-r--r--apps/comments/src/services/GetComments.ts2
-rw-r--r--apps/comments/src/store/deletedCommentLimbo.js28
-rw-r--r--apps/comments/src/utils/cancelableRequest.js2
-rw-r--r--apps/comments/src/views/ActivityCommentEntry.vue3
-rw-r--r--apps/comments/src/views/Comments.vue22
12 files changed, 177 insertions, 88 deletions
diff --git a/apps/comments/src/actions/inlineUnreadCommentsAction.spec.ts b/apps/comments/src/actions/inlineUnreadCommentsAction.spec.ts
index dc8892769e3..e8020f1f029 100644
--- a/apps/comments/src/actions/inlineUnreadCommentsAction.spec.ts
+++ b/apps/comments/src/actions/inlineUnreadCommentsAction.spec.ts
@@ -2,9 +2,10 @@
* SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
* SPDX-License-Identifier: AGPL-3.0-or-later
*/
-import { action } from './inlineUnreadCommentsAction'
-import { expect } from '@jest/globals'
import { File, Permission, View, FileAction } from '@nextcloud/files'
+import { describe, expect, test, vi } from 'vitest'
+
+import { action } from './inlineUnreadCommentsAction'
import logger from '../logger'
const view = {
@@ -29,7 +30,7 @@ describe('Inline unread comments action display name tests', () => {
expect(action.id).toBe('comments-unread')
expect(action.displayName([file], view)).toBe('')
expect(action.title!([file], view)).toBe('1 new comment')
- expect(action.iconSvgInline([], view)).toBe('<svg>SvgMock</svg>')
+ expect(action.iconSvgInline([], view)).toMatch(/<svg.+<\/svg>/)
expect(action.enabled!([file], view)).toBe(true)
expect(action.inline!(file, view)).toBe(true)
expect(action.default).toBeUndefined()
@@ -115,8 +116,8 @@ describe('Inline unread comments action enabled tests', () => {
describe('Inline unread comments action execute tests', () => {
test('Action opens sidebar', async () => {
- const openMock = jest.fn()
- const setActiveTabMock = jest.fn()
+ const openMock = vi.fn()
+ const setActiveTabMock = vi.fn()
window.OCA = {
Files: {
Sidebar: {
@@ -145,8 +146,8 @@ describe('Inline unread comments action execute tests', () => {
})
test('Action handles sidebar open failure', async () => {
- const openMock = jest.fn(() => { throw new Error('Mock error') })
- const setActiveTabMock = jest.fn()
+ const openMock = vi.fn(() => { throw new Error('Mock error') })
+ const setActiveTabMock = vi.fn()
window.OCA = {
Files: {
Sidebar: {
@@ -155,7 +156,7 @@ describe('Inline unread comments action execute tests', () => {
},
},
}
- jest.spyOn(logger, 'error').mockImplementation(() => jest.fn())
+ vi.spyOn(logger, 'error').mockImplementation(() => vi.fn())
const file = new File({
id: 1,
diff --git a/apps/comments/src/comments-activity-tab.ts b/apps/comments/src/comments-activity-tab.ts
index 765777884f2..77f6c9bca04 100644
--- a/apps/comments/src/comments-activity-tab.ts
+++ b/apps/comments/src/comments-activity-tab.ts
@@ -3,10 +3,14 @@
* SPDX-License-Identifier: AGPL-3.0-or-later
*/
import moment from '@nextcloud/moment'
-import Vue from 'vue'
+import Vue, { type ComponentPublicInstance } from 'vue'
import logger from './logger.js'
import { getComments } from './services/GetComments.js'
+import { PiniaVuePlugin, createPinia } from 'pinia'
+
+Vue.use(PiniaVuePlugin)
+
let ActivityTabPluginView
let ActivityTabPluginInstance
@@ -15,19 +19,22 @@ let ActivityTabPluginInstance
*/
export function registerCommentsPlugins() {
window.OCA.Activity.registerSidebarAction({
- mount: async (el, { context, fileInfo, reload }) => {
+ mount: async (el, { fileInfo, reload }) => {
+ const pinia = createPinia()
+
if (!ActivityTabPluginView) {
- const { default: ActivityCommmentAction } = await import('./views/ActivityCommentAction.vue')
- ActivityTabPluginView = Vue.extend(ActivityCommmentAction)
+ const { default: ActivityCommentAction } = await import('./views/ActivityCommentAction.vue')
+ // @ts-expect-error Types are broken for Vue2
+ ActivityTabPluginView = Vue.extend(ActivityCommentAction)
}
ActivityTabPluginInstance = new ActivityTabPluginView({
- parent: context,
+ el,
+ pinia,
propsData: {
reloadCallback: reload,
resourceId: fileInfo.id,
},
})
- ActivityTabPluginInstance.$mount(el)
logger.info('Comments plugin mounted in Activity sidebar action', { fileInfo })
},
unmount: () => {
@@ -42,23 +49,26 @@ export function registerCommentsPlugins() {
const { data: comments } = await getComments({ resourceType: 'files', resourceId: fileInfo.id }, { limit, offset })
logger.debug('Loaded comments', { fileInfo, comments })
const { default: CommentView } = await import('./views/ActivityCommentEntry.vue')
+ // @ts-expect-error Types are broken for Vue2
const CommentsViewObject = Vue.extend(CommentView)
return comments.map((comment) => ({
- timestamp: moment(comment.props.creationDateTime).toDate().getTime(),
- mount(element, { context, reload }) {
+ _CommentsViewInstance: undefined as ComponentPublicInstance | undefined,
+
+ timestamp: moment(comment.props?.creationDateTime).toDate().getTime(),
+
+ mount(element: HTMLElement, { reload }) {
this._CommentsViewInstance = new CommentsViewObject({
- parent: context,
+ el: element,
propsData: {
comment,
resourceId: fileInfo.id,
reloadCallback: reload,
},
})
- this._CommentsViewInstance.$mount(element)
},
unmount() {
- this._CommentsViewInstance.$destroy()
+ this._CommentsViewInstance?.$destroy()
},
}))
})
diff --git a/apps/comments/src/comments-tab.js b/apps/comments/src/comments-tab.js
index c9b3449e05e..d3ebe3e9596 100644
--- a/apps/comments/src/comments-tab.js
+++ b/apps/comments/src/comments-tab.js
@@ -5,12 +5,12 @@
// eslint-disable-next-line n/no-missing-import, import/no-unresolved
import MessageReplyText from '@mdi/svg/svg/message-reply-text.svg?raw'
-import { getRequestToken } from '@nextcloud/auth'
+import { getCSPNonce } from '@nextcloud/auth'
import { loadState } from '@nextcloud/initial-state'
import { registerCommentsPlugins } from './comments-activity-tab.ts'
// @ts-expect-error __webpack_nonce__ is injected by webpack
-__webpack_nonce__ = btoa(getRequestToken())
+__webpack_nonce__ = getCSPNonce()
if (loadState('comments', 'activityEnabled', false) && OCA?.Activity?.registerSidebarAction !== undefined) {
// Do not mount own tab but mount into activity
diff --git a/apps/comments/src/components/Comment.vue b/apps/comments/src/components/Comment.vue
index c883f9b848b..80f035530fb 100644
--- a/apps/comments/src/components/Comment.vue
+++ b/apps/comments/src/components/Comment.vue
@@ -4,7 +4,7 @@
-->
<template>
<component :is="tag"
- v-show="!deleted"
+ v-show="!deleted && !isLimbo"
:class="{'comment--loading': loading}"
class="comment">
<!-- Comment header toolbar -->
@@ -23,22 +23,27 @@
show if we have a message id and current user is author -->
<NcActions v-if="isOwnComment && id && !loading" class="comment__actions">
<template v-if="!editing">
- <NcActionButton :close-after-click="true"
- icon="icon-rename"
+ <NcActionButton close-after-click
@click="onEdit">
+ <template #icon>
+ <IconPencilOutline :size="20" />
+ </template>
{{ t('comments', 'Edit comment') }}
</NcActionButton>
<NcActionSeparator />
- <NcActionButton :close-after-click="true"
- icon="icon-delete"
+ <NcActionButton close-after-click
@click="onDeleteWithUndo">
+ <template #icon>
+ <IconTrashCanOutline :size="20" />
+ </template>
{{ t('comments', 'Delete comment') }}
</NcActionButton>
</template>
- <NcActionButton v-else
- icon="icon-close"
- @click="onEditCancel">
+ <NcActionButton v-else @click="onEditCancel">
+ <template #icon>
+ <IconClose :size="20" />
+ </template>
{{ t('comments', 'Cancel edit') }}
</NcActionButton>
</NcActions>
@@ -73,8 +78,8 @@
:disabled="isEmptyMessage"
@click="onSubmit">
<template #icon>
- <span v-if="loading" class="icon-loading-small" />
- <ArrowRight v-else :size="20" />
+ <NcLoadingIcon v-if="loading" />
+ <IconArrowRight v-else :size="20" />
</template>
</NcButton>
</div>
@@ -85,14 +90,12 @@
</form>
<!-- Message content -->
- <!-- The html is escaped and sanitized before rendering -->
- <!-- eslint-disable vue/no-v-html-->
- <div v-else
- :class="{'comment__message--expanded': expanded}"
+ <NcRichText v-else
class="comment__message"
- @click="onExpand"
- v-html="renderedContent" />
- <!-- eslint-enable vue/no-v-html-->
+ :class="{'comment__message--expanded': expanded}"
+ :text="richContent.message"
+ :arguments="richContent.mentions"
+ @click="onExpand" />
</div>
</component>
</template>
@@ -101,34 +104,47 @@
import { getCurrentUser } from '@nextcloud/auth'
import { translate as t } from '@nextcloud/l10n'
-import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
-import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
-import NcActionSeparator from '@nextcloud/vue/dist/Components/NcActionSeparator.js'
-import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
-import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
-import NcDateTime from '@nextcloud/vue/dist/Components/NcDateTime.js'
-import RichEditorMixin from '@nextcloud/vue/dist/Mixins/richEditor.js'
-import ArrowRight from 'vue-material-design-icons/ArrowRight.vue'
+import NcActionButton from '@nextcloud/vue/components/NcActionButton'
+import NcActions from '@nextcloud/vue/components/NcActions'
+import NcActionSeparator from '@nextcloud/vue/components/NcActionSeparator'
+import NcAvatar from '@nextcloud/vue/components/NcAvatar'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcDateTime from '@nextcloud/vue/components/NcDateTime'
+import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
+import NcUserBubble from '@nextcloud/vue/components/NcUserBubble'
+
+import IconArrowRight from 'vue-material-design-icons/ArrowRight.vue'
+import IconClose from 'vue-material-design-icons/Close.vue'
+import IconTrashCanOutline from 'vue-material-design-icons/TrashCanOutline.vue'
+import IconPencilOutline from 'vue-material-design-icons/PencilOutline.vue'
import CommentMixin from '../mixins/CommentMixin.js'
+import { mapStores } from 'pinia'
+import { useDeletedCommentLimbo } from '../store/deletedCommentLimbo.js'
// Dynamic loading
-const NcRichContenteditable = () => import('@nextcloud/vue/dist/Components/NcRichContenteditable.js')
+const NcRichContenteditable = () => import('@nextcloud/vue/components/NcRichContenteditable')
+const NcRichText = () => import('@nextcloud/vue/components/NcRichText')
export default {
name: 'Comment',
components: {
- ArrowRight,
+ IconArrowRight,
+ IconClose,
+ IconTrashCanOutline,
+ IconPencilOutline,
NcActionButton,
NcActions,
NcActionSeparator,
NcAvatar,
NcButton,
NcDateTime,
+ NcLoadingIcon,
NcRichContenteditable,
+ NcRichText,
},
- mixins: [RichEditorMixin, CommentMixin],
+ mixins: [CommentMixin],
inheritAttrs: false,
@@ -161,6 +177,10 @@ export default {
type: Function,
required: true,
},
+ userData: {
+ type: Object,
+ default: () => ({}),
+ },
tag: {
type: String,
@@ -179,6 +199,7 @@ export default {
},
computed: {
+ ...mapStores(useDeletedCommentLimbo),
/**
* Is the current user the author of this comment
@@ -189,16 +210,25 @@ export default {
return getCurrentUser().uid === this.actorId
},
- /**
- * Rendered content as html string
- *
- * @return {string}
- */
- renderedContent() {
- if (this.isEmptyMessage) {
- return ''
- }
- return this.renderContent(this.localMessage)
+ richContent() {
+ const mentions = {}
+ let message = this.localMessage
+
+ Object.keys(this.userData).forEach((user, index) => {
+ const key = `mention-${index}`
+ const regex = new RegExp(`@${user}|@"${user}"`, 'g')
+ message = message.replace(regex, `{${key}}`)
+ mentions[key] = {
+ component: NcUserBubble,
+ props: {
+ user,
+ displayName: this.userData[user].label,
+ primary: this.userData[user].primary,
+ },
+ }
+ })
+
+ return { mentions, message }
},
isEmptyMessage() {
@@ -211,6 +241,10 @@ export default {
timestamp() {
return Date.parse(this.creationDateTime)
},
+
+ isLimbo() {
+ return this.deletedCommentLimboStore.checkForId(this.id)
+ },
},
watch: {
@@ -295,7 +329,7 @@ $comment-padding: 10px;
}
&__actions {
- margin-left: $comment-padding !important;
+ margin-inline-start: $comment-padding !important;
}
&__author {
@@ -307,8 +341,8 @@ $comment-padding: 10px;
&_loading,
&__timestamp {
- margin-left: auto;
- text-align: right;
+ margin-inline-start: auto;
+ text-align: end;
white-space: nowrap;
color: var(--color-text-maxcontrast);
}
@@ -324,13 +358,13 @@ $comment-padding: 10px;
&__submit {
position: absolute !important;
- bottom: 0;
- right: 0;
+ bottom: 5px;
+ inset-inline-end: 0;
}
&__message {
white-space: pre-wrap;
- word-break: break-word;
+ word-break: normal;
max-height: 70px;
overflow: hidden;
margin-top: -6px;
diff --git a/apps/comments/src/mixins/CommentMixin.js b/apps/comments/src/mixins/CommentMixin.js
index bbf7189a610..722ad3444ce 100644
--- a/apps/comments/src/mixins/CommentMixin.js
+++ b/apps/comments/src/mixins/CommentMixin.js
@@ -7,6 +7,8 @@ import { showError, showUndo, TOAST_UNDO_TIMEOUT } from '@nextcloud/dialogs'
import NewComment from '../services/NewComment.js'
import DeleteComment from '../services/DeleteComment.js'
import EditComment from '../services/EditComment.js'
+import { mapStores } from 'pinia'
+import { useDeletedCommentLimbo } from '../store/deletedCommentLimbo.js'
import logger from '../logger.js'
export default {
@@ -37,6 +39,10 @@ export default {
}
},
+ computed: {
+ ...mapStores(useDeletedCommentLimbo),
+ },
+
methods: {
// EDITION
onEdit() {
@@ -64,11 +70,14 @@ export default {
// DELETION
onDeleteWithUndo() {
+ this.$emit('delete')
this.deleted = true
+ this.deletedCommentLimboStore.addId(this.id)
const timeOutDelete = setTimeout(this.onDelete, TOAST_UNDO_TIMEOUT)
showUndo(t('comments', 'Comment deleted'), () => {
clearTimeout(timeOutDelete)
this.deleted = false
+ this.deletedCommentLimboStore.removeId(this.id)
})
},
async onDelete() {
@@ -80,6 +89,7 @@ export default {
showError(t('comments', 'An error occurred while trying to delete the comment'))
console.error(error)
this.deleted = false
+ this.deletedCommentLimboStore.removeId(this.id)
}
},
diff --git a/apps/comments/src/services/CommentsInstance.js b/apps/comments/src/services/CommentsInstance.js
index ae6b45a95f2..cc45d0cbea7 100644
--- a/apps/comments/src/services/CommentsInstance.js
+++ b/apps/comments/src/services/CommentsInstance.js
@@ -3,14 +3,16 @@
* SPDX-License-Identifier: AGPL-3.0-or-later
*/
-import { translate as t, translatePlural as n } from '@nextcloud/l10n'
-import { getRequestToken } from '@nextcloud/auth'
+import { getCSPNonce } from '@nextcloud/auth'
+import { t, n } from '@nextcloud/l10n'
+import { PiniaVuePlugin, createPinia } from 'pinia'
import Vue from 'vue'
import CommentsApp from '../views/Comments.vue'
import logger from '../logger.js'
+Vue.use(PiniaVuePlugin)
// eslint-disable-next-line camelcase
-__webpack_nonce__ = btoa(getRequestToken())
+__webpack_nonce__ = getCSPNonce()
// Add translates functions
Vue.mixin({
@@ -34,6 +36,8 @@ export default class CommentInstance {
* @param {object} options the vue options (propsData, parent, el...)
*/
constructor(resourceType = 'files', options = {}) {
+ const pinia = createPinia()
+
// Merge options and set `resourceType` property
options = {
...options,
@@ -41,6 +45,7 @@ export default class CommentInstance {
...(options.propsData ?? {}),
resourceType,
},
+ pinia,
}
// Init Comments component
const View = Vue.extend(CommentsApp)
diff --git a/apps/comments/src/services/DavClient.js b/apps/comments/src/services/DavClient.js
index 6202294b52f..3e9a529283f 100644
--- a/apps/comments/src/services/DavClient.js
+++ b/apps/comments/src/services/DavClient.js
@@ -12,12 +12,12 @@ const client = createClient(getRootPath())
// set CSRF token header
const setHeaders = (token) => {
- client.setHeaders({
- // Add this so the server knows it is an request from the browser
- 'X-Requested-With': 'XMLHttpRequest',
- // Inject user auth
- requesttoken: token ?? '',
- })
+ client.setHeaders({
+ // Add this so the server knows it is an request from the browser
+ 'X-Requested-With': 'XMLHttpRequest',
+ // Inject user auth
+ requesttoken: token ?? '',
+ })
}
// refresh headers when request token changes
diff --git a/apps/comments/src/services/GetComments.ts b/apps/comments/src/services/GetComments.ts
index 1e24c8ede8e..c42aa21d6cb 100644
--- a/apps/comments/src/services/GetComments.ts
+++ b/apps/comments/src/services/GetComments.ts
@@ -60,7 +60,7 @@ const getDirectoryFiles = function(
// Map all items to a consistent output structure (results)
return responseItems.map(item => {
// Each item should contain a stat object
- const props = item.propstat!.prop!;
+ const props = item.propstat!.prop!
return prepareFileFromProps(props, props.id!.toString(), isDetailed)
})
diff --git a/apps/comments/src/store/deletedCommentLimbo.js b/apps/comments/src/store/deletedCommentLimbo.js
new file mode 100644
index 00000000000..3e511addebb
--- /dev/null
+++ b/apps/comments/src/store/deletedCommentLimbo.js
@@ -0,0 +1,28 @@
+/**
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { defineStore } from 'pinia'
+
+export const useDeletedCommentLimbo = defineStore('deletedCommentLimbo', {
+ state: () => ({
+ idsInLimbo: [],
+ }),
+ actions: {
+ addId(id) {
+ this.idsInLimbo.push(id)
+ },
+
+ removeId(id) {
+ const index = this.idsInLimbo.indexOf(id)
+ if (index > -1) {
+ this.idsInLimbo.splice(index, 1)
+ }
+ },
+
+ checkForId(id) {
+ this.idsInLimbo.includes(id)
+ },
+ },
+})
diff --git a/apps/comments/src/utils/cancelableRequest.js b/apps/comments/src/utils/cancelableRequest.js
index 47baa505083..c2d380c80f9 100644
--- a/apps/comments/src/utils/cancelableRequest.js
+++ b/apps/comments/src/utils/cancelableRequest.js
@@ -22,7 +22,7 @@ const cancelableRequest = function(request) {
const fetch = async function(url, options) {
const response = await request(
url,
- Object.assign({ signal }, options)
+ Object.assign({ signal }, options),
)
return response
}
diff --git a/apps/comments/src/views/ActivityCommentEntry.vue b/apps/comments/src/views/ActivityCommentEntry.vue
index 4f7dde2c7d8..bbfe530b2e3 100644
--- a/apps/comments/src/views/ActivityCommentEntry.vue
+++ b/apps/comments/src/views/ActivityCommentEntry.vue
@@ -17,6 +17,7 @@
</template>
<script lang="ts">
+import type { PropType } from 'vue'
import { translate as t } from '@nextcloud/l10n'
import Comment from '../components/Comment.vue'
@@ -36,7 +37,7 @@ export default {
required: true,
},
reloadCallback: {
- type: Function,
+ type: Function as PropType<() => void>,
required: true,
},
},
diff --git a/apps/comments/src/views/Comments.vue b/apps/comments/src/views/Comments.vue
index 3c30b5af942..657af888a12 100644
--- a/apps/comments/src/views/Comments.vue
+++ b/apps/comments/src/views/Comments.vue
@@ -22,7 +22,7 @@
class="comments__empty"
:name="t('comments', 'No comments yet, start the conversation!')">
<template #icon>
- <MessageReplyTextIcon />
+ <IconMessageReplyTextOutline />
</template>
</NcEmptyContent>
<ul v-else>
@@ -51,12 +51,12 @@
<template v-else-if="error">
<NcEmptyContent class="comments__error" :name="error">
<template #icon>
- <AlertCircleOutlineIcon />
+ <IconAlertCircleOutline />
</template>
</NcEmptyContent>
<NcButton class="comments__retry" @click="getComments">
<template #icon>
- <RefreshIcon />
+ <IconRefresh />
</template>
{{ t('comments', 'Retry') }}
</NcButton>
@@ -70,11 +70,11 @@ import { showError } from '@nextcloud/dialogs'
import { translate as t } from '@nextcloud/l10n'
import { vElementVisibility as elementVisibility } from '@vueuse/components'
-import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
-import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
-import RefreshIcon from 'vue-material-design-icons/Refresh.vue'
-import MessageReplyTextIcon from 'vue-material-design-icons/MessageReplyText.vue'
-import AlertCircleOutlineIcon from 'vue-material-design-icons/AlertCircleOutline.vue'
+import NcEmptyContent from '@nextcloud/vue/components/NcEmptyContent'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import IconRefresh from 'vue-material-design-icons/Refresh.vue'
+import IconMessageReplyTextOutline from 'vue-material-design-icons/MessageReplyTextOutline.vue'
+import IconAlertCircleOutline from 'vue-material-design-icons/AlertCircleOutline.vue'
import Comment from '../components/Comment.vue'
import CommentView from '../mixins/CommentView'
@@ -89,9 +89,9 @@ export default {
Comment,
NcEmptyContent,
NcButton,
- RefreshIcon,
- MessageReplyTextIcon,
- AlertCircleOutlineIcon,
+ IconRefresh,
+ IconMessageReplyTextOutline,
+ IconAlertCircleOutline,
},
directives: {
generated by cgit v1.2.3 (git 2.39.1) at 2025-08-15 03:12:25 +0000