fix(settings): adjust systemtags handling and tests

Signed-off-by: skjnldsv <skjnldsv@protonmail.com>

apps/systemtags/src/components/SystemTagForm.vue

@@ -17,13 +17,14 @@
 		<div class="system-tag-form__group">
 			<label for="system-tags-input">{{ t('systemtags', 'Search for a tag to edit') }}</label>
 			<NcSelectTags
-				v-model="selectedTag"
+				:model-value="selectedTag"
 				input-id="system-tags-input"
 				:placeholder="t('systemtags', 'Collaborative tags …')"
 				:fetch-tags="false"
 				:options="tags"
 				:multiple="false"
-				passthru>
+				label-outside
+				@update:model-value="onSelectTag">
 				<template #no-options>
 					{{ t('systemtags', 'No tags to select') }}
 				</template>
@@ -49,7 +50,8 @@
 				:options="tagLevelOptions"
 				:reduce="level => level.id"
 				:clearable="false"
-				:disabled="loading" />
+				:disabled="loading"
+				label-outside />
 		</div>
 
 		<div class="system-tag-form__row">
@@ -85,11 +87,12 @@
 </template>
 
 <script lang="ts">
+import type { PropType } from 'vue'
 import type { Tag, TagWithId } from '../types.js'
 
 import { showSuccess } from '@nextcloud/dialogs'
 import { translate as t } from '@nextcloud/l10n'
-import Vue, { type PropType } from 'vue'
+import { defineComponent } from 'vue'
 import NcButton from '@nextcloud/vue/components/NcButton'
 import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
 import NcSelect from '@nextcloud/vue/components/NcSelect'
@@ -135,10 +138,10 @@ function getTagLevel(userVisible: boolean, userAssignable: boolean): TagLevel {
 		[[true, false].join(',')]: TagLevel.Restricted,
 		[[false, false].join(',')]: TagLevel.Invisible,
 	}
-	return matchLevel[[userVisible, userAssignable].join(',')]
+	return matchLevel[[userVisible, userAssignable].join(',')]!
 }
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'SystemTagForm',
 
 	components: {
@@ -156,6 +159,12 @@ export default Vue.extend({
 		},
 	},
 
+	emits: [
+		'tag:created',
+		'tag:updated',
+		'tag:deleted',
+	],
+
 	data() {
 		return {
 			loading: false,
@@ -230,6 +239,11 @@ export default Vue.extend({
 	methods: {
 		t,
 
+		onSelectTag(tagId: number | null) {
+			const tag = this.tags.find((search) => search.id === tagId) || null
+			this.selectedTag = tag
+		},
+
 		async handleSubmit() {
 			if (this.isCreating) {
 				await this.create()

cypress/e2e/systemtags/admin-settings.cy.ts

@@ -12,25 +12,35 @@ const updatedTagName = 'bar'
 
 describe('Create system tags', () => {
 	before(() => {
+		// delete any existing tags
+		cy.runOccCommand('tag:list --output=json').then((output) => {
+			Object.keys(JSON.parse(output.stdout)).forEach((id) => {
+				cy.runOccCommand(`tag:delete ${id}`)
+			})
+		})
+
+		// login as admin and go to admin settings
 		cy.login(admin)
 		cy.visit('/settings/admin')
 	})
 
 	it('Can create a tag', () => {
+		cy.intercept('POST', '/remote.php/dav/systemtags').as('createTag')
 		cy.get('input#system-tag-name').should('exist').and('have.value', '')
 		cy.get('input#system-tag-name').type(tagName)
 		cy.get('input#system-tag-name').should('have.value', tagName)
 		// submit the form
 		cy.get('input#system-tag-name').type('{enter}')
 
+		// wait for the tag to be created
+		cy.wait('@createTag').its('response.statusCode').should('eq', 201)
+
 		// see that the created tag is in the list
 		cy.get('input#system-tags-input').focus()
 		cy.get('input#system-tags-input').invoke('attr', 'aria-controls').then((id) => {
-			cy.get(`ul#${id}`).within(() => {
-				cy.contains('li', tagName).should('exist')
-				// ensure only one tag exists
-				cy.get('li').should('have.length', 1)
-			})
+			cy.get(`ul#${id} li span[title="${tagName}"]`)
+				.should('exist')
+				.should('have.length', 1)
 		})
 	})
 })
@@ -42,12 +52,9 @@ describe('Update system tags', { testIsolation: false }, () => {
 	})
 
 	it('select the tag', () => {
-		// select the tag to edit
 		cy.get('input#system-tags-input').focus()
 		cy.get('input#system-tags-input').invoke('attr', 'aria-controls').then((id) => {
-			cy.get(`ul#${id}`).within(() => {
-				cy.contains('li', tagName).should('exist').click()
-			})
+			cy.get(`ul#${id} li span[title="${tagName}"]`).should('exist').click()
 		})
 		// see that the tag name matches the selected tag
 		cy.get('input#system-tag-name').should('exist').and('have.value', tagName)
@@ -57,28 +64,27 @@ describe('Update system tags', { testIsolation: false }, () => {
 	})
 
 	it('update the tag name and level', () => {
+		cy.intercept('PROPPATCH', '/remote.php/dav/systemtags/*').as('updateTag')
 		cy.get('input#system-tag-name').clear()
 		cy.get('input#system-tag-name').type(updatedTagName)
 		cy.get('input#system-tag-name').should('have.value', updatedTagName)
 		// select the new tag level
 		cy.get('input#system-tag-level').focus()
 		cy.get('input#system-tag-level').invoke('attr', 'aria-controls').then((id) => {
-			cy.get(`ul#${id}`).within(() => {
-				cy.contains('li', 'Invisible').should('exist').click()
-			})
+			cy.get(`ul#${id} li span[title="Invisible"]`).should('exist').click()
 		})
 		// submit the form
 		cy.get('input#system-tag-name').type('{enter}')
+		// wait for the tag to be updated
+		cy.wait('@updateTag').its('response.statusCode').should('eq', 207)
 	})
 
 	it('see the tag was successfully updated', () => {
 		cy.get('input#system-tags-input').focus()
 		cy.get('input#system-tags-input').invoke('attr', 'aria-controls').then((id) => {
-			cy.get(`ul#${id}`).within(() => {
-				cy.contains('li', `${updatedTagName} (invisible)`).should('exist')
-				// ensure only one tag exists
-				cy.get('li').should('have.length', 1)
-			})
+			cy.get(`ul#${id} li span[title="${updatedTagName} (invisible)"]`)
+				.should('exist')
+				.should('have.length', 1)
 		})
 	})
 })
@@ -93,9 +99,7 @@ describe('Delete system tags', { testIsolation: false }, () => {
 		// select the tag to edit
 		cy.get('input#system-tags-input').focus()
 		cy.get('input#system-tags-input').invoke('attr', 'aria-controls').then((id) => {
-			cy.get(`ul#${id}`).within(() => {
-				cy.contains('li', `${updatedTagName} (invisible)`).should('exist').click()
-			})
+			cy.get(`ul#${id} li span[title="${updatedTagName} (invisible)"]`).should('exist').click()
 		})
 		// see that the tag name matches the selected tag
 		cy.get('input#system-tag-name').should('exist').and('have.value', updatedTagName)
@@ -105,17 +109,18 @@ describe('Delete system tags', { testIsolation: false }, () => {
 	})
 
 	it('can delete the tag', () => {
+		cy.intercept('DELETE', '/remote.php/dav/systemtags/*').as('deleteTag')
 		cy.get('.system-tag-form__row').within(() => {
 			cy.contains('button', 'Delete').should('be.enabled').click()
 		})
+		// wait for the tag to be deleted
+		cy.wait('@deleteTag').its('response.statusCode').should('eq', 204)
 	})
 
 	it('see that the deleted tag is not present', () => {
 		cy.get('input#system-tags-input').focus()
 		cy.get('input#system-tags-input').invoke('attr', 'aria-controls').then((id) => {
-			cy.get(`ul#${id}`).within(() => {
-				cy.contains('li', updatedTagName).should('not.exist')
-			})
+			cy.get(`ul#${id} li span[title="${updatedTagName}"]`).should('not.exist')
 		})
 	})
 })