diff --git a/apps/systemtags/src/files_actions/inlineSystemTagsAction.spec.ts b/apps/systemtags/src/files_actions/inlineSystemTagsAction.spec.ts
index 401be5dcb70d9..28f0f756811c0 100644
--- a/apps/systemtags/src/files_actions/inlineSystemTagsAction.spec.ts
+++ b/apps/systemtags/src/files_actions/inlineSystemTagsAction.spec.ts
@@ -101,7 +101,7 @@ describe('Inline system tags action render tests', () => {
contents: [],
})
expect(result).toBeInstanceOf(HTMLElement)
- expect(result!.outerHTML).toMatchInlineSnapshot('""')
+ expect(result!.outerHTML).toMatchInlineSnapshot('""')
})
test('Render a single system tag', async () => {
@@ -126,7 +126,7 @@ describe('Inline system tags action render tests', () => {
contents: [],
})
expect(result).toBeInstanceOf(HTMLElement)
- expect(result!.outerHTML).toMatchInlineSnapshot('""')
+ expect(result!.outerHTML).toMatchInlineSnapshot('""')
})
test('Render two system tags', async () => {
@@ -151,7 +151,7 @@ describe('Inline system tags action render tests', () => {
contents: [],
})
expect(result).toBeInstanceOf(HTMLElement)
- expect(result!.outerHTML).toMatchInlineSnapshot('""')
+ expect(result!.outerHTML).toMatchInlineSnapshot('""')
})
test('Render multiple system tags', async () => {
@@ -181,7 +181,7 @@ describe('Inline system tags action render tests', () => {
contents: [],
})
expect(result).toBeInstanceOf(HTMLElement)
- expect(result!.outerHTML).toMatchInlineSnapshot('""')
+ expect(result!.outerHTML).toMatchInlineSnapshot('""')
})
test('Render gets updated on system tag change', async () => {
@@ -212,7 +212,7 @@ describe('Inline system tags action render tests', () => {
}) as HTMLElement
document.body.appendChild(result)
expect(result).toBeInstanceOf(HTMLElement)
- expect(document.body.innerHTML).toMatchInlineSnapshot('""')
+ expect(document.body.innerHTML).toMatchInlineSnapshot('""')
// Subscribe to the event
const eventPromise = new Promise((resolve) => {
@@ -229,7 +229,7 @@ describe('Inline system tags action render tests', () => {
// Wait for the event to be processed
await eventPromise
- expect(document.body.innerHTML).toMatchInlineSnapshot('""')
+ expect(document.body.innerHTML).toMatchInlineSnapshot('""')
})
})
@@ -273,7 +273,7 @@ describe('Inline system tags action colors', () => {
contents: [],
})
expect(result).toBeInstanceOf(HTMLElement)
- expect(result!.outerHTML).toMatchInlineSnapshot('""')
+ expect(result!.outerHTML).toMatchInlineSnapshot('""')
})
test('Render a single system tag with invalid WCAG color', async () => {
@@ -300,7 +300,7 @@ describe('Inline system tags action colors', () => {
contents: [],
})
expect(result).toBeInstanceOf(HTMLElement)
- expect(result!.outerHTML).toMatchInlineSnapshot('""')
+ expect(result!.outerHTML).toMatchInlineSnapshot('""')
document.body.removeAttribute('data-themes')
})
@@ -328,7 +328,7 @@ describe('Inline system tags action colors', () => {
}) as HTMLElement
document.body.appendChild(result)
expect(result).toBeInstanceOf(HTMLElement)
- expect(document.body.innerHTML).toMatchInlineSnapshot('""')
+ expect(document.body.innerHTML).toMatchInlineSnapshot('""')
// Subscribe to the event
const eventPromise = new Promise((resolve) => {
@@ -344,6 +344,6 @@ describe('Inline system tags action colors', () => {
// Wait for the event to be processed
await eventPromise
- expect(document.body.innerHTML).toMatchInlineSnapshot('""')
+ expect(document.body.innerHTML).toMatchInlineSnapshot('""')
})
})
diff --git a/apps/systemtags/src/files_actions/inlineSystemTagsAction.ts b/apps/systemtags/src/files_actions/inlineSystemTagsAction.ts
index f1766fc467ab6..0361803710297 100644
--- a/apps/systemtags/src/files_actions/inlineSystemTagsAction.ts
+++ b/apps/systemtags/src/files_actions/inlineSystemTagsAction.ts
@@ -34,12 +34,15 @@ export const action: IFileAction = {
return true
},
- exec: async () => null,
- renderInline: ({ nodes }) => {
+ async exec() {
+ return null
+ },
+
+ async renderInline({ nodes }) {
if (nodes.length !== 1 || !nodes[0]) {
- return Promise.resolve(null)
+ return null
}
- return renderInline(nodes[0])
+ return await renderInline(nodes[0])
},
order: 0,
@@ -56,12 +59,12 @@ subscribe('systemtags:tag:updated', updateTag)
*
* @param node - The updated node
*/
-function updateSystemTagsHtml(node: INode) {
- renderInline(node).then((systemTagsHtml) => {
- document.querySelectorAll(`[data-systemtags-fileid="${node.fileid}"]`).forEach((element) => {
- element.replaceWith(systemTagsHtml)
- })
- })
+async function updateSystemTagsHtml(node: INode) {
+ const systemTagsHtml = await renderInline(node)
+ const elements = document.querySelectorAll(`[data-systemtags-fileid="${node.id}"]`)
+ for (const element of elements) {
+ element.replaceWith(systemTagsHtml)
+ }
}
/**
@@ -145,50 +148,50 @@ function renderTag(tag: string, isMore = false): HTMLElement {
async function renderInline(node: INode): Promise {
// Ensure we have the system tags as an array
const tags = getNodeSystemTags(node)
-
- const systemTagsElement = document.createElement('ul')
- systemTagsElement.classList.add('files-list__system-tags')
- systemTagsElement.setAttribute('aria-label', t('files', 'Assigned collaborative tags'))
- systemTagsElement.setAttribute('data-systemtags-fileid', node.fileid?.toString() || '')
-
- if (tags.length === 0) {
- return systemTagsElement
- }
-
- // Fetch the tags if the cache is empty
- if (cache.length === 0) {
- try {
- // Best would be to support attributes from webdav,
- // but currently the library does not support it
- cache.push(...await fetchTags())
- } catch (error) {
- logger.error('Failed to fetch tags', { error })
+ const systemTagsElementWrapper = document.createElement('div')
+ systemTagsElementWrapper.setAttribute('data-systemtags-fileid', node.id || '')
+
+ if (tags.length > 0) {
+ const systemTagsElement = document.createElement('ul')
+ systemTagsElement.classList.add('files-list__system-tags')
+ systemTagsElement.setAttribute('aria-label', t('files', 'Assigned collaborative tags'))
+ systemTagsElementWrapper.appendChild(systemTagsElement)
+
+ // Fetch the tags if the cache is empty
+ if (cache.length === 0) {
+ try {
+ // Best would be to support attributes from webdav,
+ // but currently the library does not support it
+ cache.push(...await fetchTags())
+ } catch (error) {
+ logger.error('Failed to fetch tags', { error })
+ }
}
- }
- systemTagsElement.append(renderTag(tags[0]!))
- if (tags.length === 2) {
- // Special case only two tags:
- // the overflow fake tag would take the same space as this, so render it
- systemTagsElement.append(renderTag(tags[1]!))
- } else if (tags.length > 1) {
- // More tags than the one we're showing
- // So we add a overflow element indicating there are more tags
- const moreTagElement = renderTag('+' + (tags.length - 1), true)
- moreTagElement.setAttribute('title', tags.slice(1).join(', '))
- // because the title is not accessible we hide this element for screen readers (see alternative below)
- moreTagElement.setAttribute('aria-hidden', 'true')
- moreTagElement.setAttribute('role', 'presentation')
- systemTagsElement.append(moreTagElement)
-
- // For accessibility the tags are listed, as the title is not accessible
- // but those tags are visually hidden
- for (const tag of tags.slice(1)) {
- const tagElement = renderTag(tag)
- tagElement.classList.add('hidden-visually')
- systemTagsElement.append(tagElement)
+ systemTagsElement.append(renderTag(tags[0]!))
+ if (tags.length === 2) {
+ // Special case only two tags:
+ // the overflow fake tag would take the same space as this, so render it
+ systemTagsElement.append(renderTag(tags[1]!))
+ } else if (tags.length > 1) {
+ // More tags than the one we're showing
+ // So we add a overflow element indicating there are more tags
+ const moreTagElement = renderTag('+' + (tags.length - 1), true)
+ moreTagElement.setAttribute('title', tags.slice(1).join(', '))
+ // because the title is not accessible we hide this element for screen readers (see alternative below)
+ moreTagElement.setAttribute('aria-hidden', 'true')
+ moreTagElement.setAttribute('role', 'presentation')
+ systemTagsElement.append(moreTagElement)
+
+ // For accessibility the tags are listed, as the title is not accessible
+ // but those tags are visually hidden
+ for (const tag of tags.slice(1)) {
+ const tagElement = renderTag(tag)
+ tagElement.classList.add('hidden-visually')
+ systemTagsElement.append(tagElement)
+ }
}
}
- return systemTagsElement
+ return systemTagsElementWrapper
}