[f2v] Render inline system tags using new DAV properties API

__mocks__/css.js

@@ -0,0 +1,22 @@
+/**
+ * @copyright Copyright (c) 2023 Lucas Azevedo <lhs_azevedo@hotmail.com>
+ *
+ * @author Lucas Azevedo <lhs_azevedo@hotmail.com>
+ *
+ * @license AGPL-3.0-or-later
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+export default {}

apps/files/css/files.scss

@@ -406,40 +406,6 @@ table {
 			z-index: 10;
 			padding: 0 20px 0 0;
 		}
-
-		/* System tags */
-		.system-tags {
-			--min-size: 32px;
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			min-width: calc(var(--min-size) * 2);
-			max-width: 300px;
-
-			.system-tags__tag {
-				padding: 5px 10px;
-				border: 1px solid;
-				border-radius: var(--border-radius-pill);
-				border-color: var(--color-border);
-				color: var(--color-text-maxcontrast);
-				height: var(--min-size);
-				white-space: nowrap;
-				overflow: hidden;
-				text-overflow: ellipsis;
-				line-height: 22px; // min-size - 2 * 5px padding
-				text-align: center;
-
-				&--more {
-					overflow: visible;
-					text-overflow: initial;
-				}
-
-				// Proper spacing if multiple shown
-				& + .system-tags__tag {
-					margin-left: 5px;
-				}
-			}
-		}
 	}
 }
 

apps/files/js/merged-index.json

@@ -24,6 +24,5 @@
   "sidebarpreviewmanager.js",
   "sidebarpreviewtext.js",
   "tagsplugin.js",
-  "systemtagsplugin.js",
   "templates.js"
 ]

apps/systemtags/src/actions/inlineSystemTagsAction.spec.ts

@@ -0,0 +1,143 @@
+/**
+ * @copyright Copyright (c) 2023 Lucas Azevedo <lhs_azevedo@hotmail.com>
+ *
+ * @author Lucas Azevedo <lhs_azevedo@hotmail.com>
+ *
+ * @license AGPL-3.0-or-later
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+import { action } from './inlineSystemTagsAction'
+import { expect } from '@jest/globals'
+import { File, Permission, View, FileAction } from '@nextcloud/files'
+
+const view = {
+	id: 'files',
+	name: 'Files',
+} as View
+
+describe('Inline system tags action conditions tests', () => {
+	test('Default values', () => {
+		const file = new File({
+			id: 1,
+			source: 'https://cloud.domain.com/remote.php/dav/files/admin/foobar.txt',
+			owner: 'admin',
+			mime: 'text/plain',
+			permissions: Permission.ALL,
+		})
+
+		expect(action).toBeInstanceOf(FileAction)
+		expect(action.id).toBe('system-tags')
+		expect(action.displayName([file], view)).toBe('')
+		expect(action.iconSvgInline([], view)).toBe('')
+		expect(action.default).toBeUndefined()
+		expect(action.enabled).toBeUndefined()
+		expect(action.order).toBe(0)
+	})
+})
+
+describe('Inline system tags action render tests', () => {
+	test('Render nothing when Node does not have system tags', async () => {
+		const file = new File({
+			id: 1,
+			source: 'http://localhost/remote.php/dav/files/admin/foobar.txt',
+			owner: 'admin',
+			mime: 'text/plain',
+			permissions: Permission.ALL,
+		})
+
+		const result = await action.renderInline!(file, view)
+		expect(result).toBeNull()
+	})
+
+	test('Render a single system tag', async () => {
+		const file = new File({
+			id: 1,
+			source: 'http://localhost/remote.php/dav/files/admin/foobar.txt',
+			owner: 'admin',
+			mime: 'text/plain',
+			permissions: Permission.ALL,
+			attributes: {
+				'system-tags': {
+					'system-tag': 'Confidential',
+				},
+			},
+		})
+
+		const result = await action.renderInline!(file, view)
+		expect(result).toBeInstanceOf(HTMLElement)
+		expect(result!.outerHTML).toBe(
+			'<ul class="files-list__system-tags" aria-label="This file has the tag Confidential">'
+				+ '<li class="files-list__system-tag">Confidential</li>'
+			+ '</ul>',
+		)
+	})
+
+	test('Render two system tags', async () => {
+		const file = new File({
+			id: 1,
+			source: 'http://localhost/remote.php/dav/files/admin/foobar.txt',
+			owner: 'admin',
+			mime: 'text/plain',
+			permissions: Permission.ALL,
+			attributes: {
+				'system-tags': {
+					'system-tag': [
+						'Important',
+						'Confidential',
+					],
+				},
+			},
+		})
+
+		const result = await action.renderInline!(file, view)
+		expect(result).toBeInstanceOf(HTMLElement)
+		expect(result!.outerHTML).toBe(
+			'<ul class="files-list__system-tags" aria-label="This file has the tags Important and Confidential">'
+				+ '<li class="files-list__system-tag">Important</li>'
+				+ '<li class="files-list__system-tag files-list__system-tag--more" title="Confidential">+1</li>'
+			+ '</ul>',
+		)
+	})
+
+	test('Render multiple system tags', async () => {
+		const file = new File({
+			id: 1,
+			source: 'http://localhost/remote.php/dav/files/admin/foobar.txt',
+			owner: 'admin',
+			mime: 'text/plain',
+			permissions: Permission.ALL,
+			attributes: {
+				'system-tags': {
+					'system-tag': [
+						'Important',
+						'Confidential',
+						'Secret',
+						'Classified',
+					],
+				},
+			},
+		})
+
+		const result = await action.renderInline!(file, view)
+		expect(result).toBeInstanceOf(HTMLElement)
+		expect(result!.outerHTML).toBe(
+			'<ul class="files-list__system-tags" aria-label="This file has the tags Important, Confidential, Secret and Classified">'
+				+ '<li class="files-list__system-tag">Important</li>'
+				+ '<li class="files-list__system-tag files-list__system-tag--more" title="Confidential, Secret, Classified">+3</li>'
+			+ '</ul>',
+		)
+	})
+})