feat: introduce pinia for admin settings

cypress/e2e/settings.spec.js

@@ -6,7 +6,6 @@ import { User } from '@nextcloud/e2e-test-server/cypress'
 
 const usesHttps = Cypress.config('baseUrl').startsWith('https')
 const collaboraUrl = Cypress.env('collaboraUrl')
-const defaultFonts = ['AmaticSC-Regular.ttf']
 
 describe('Office admin settings', function() {
 
@@ -65,16 +64,51 @@ describe('Office admin settings', function() {
 			.scrollIntoView()
 			.should('be.visible')
 
-		cy.get('#font-settings')
+		cy.get('.settings-section__name')
+			.contains('Global Templates')
 			.scrollIntoView()
 			.should('be.visible')
-		defaultFonts.forEach(font => {
-			cy.get('.settings-entry.font-list-settings').contains(font)
-		})
+	})
+})
+
+describe('Custom Fonts', function() {
+	const defaultFonts = ['AmaticSC-Regular.ttf']
+
+	beforeEach(function() {
+		cy.login(new User('admin', 'admin'))
+		cy.visit('/settings/admin/richdocuments')
 
 		cy.get('.settings-section__name')
-			.contains('Global Templates')
+			.contains('Custom Fonts')
 			.scrollIntoView()
 			.should('be.visible')
 	})
+
+	it('Can delete a font', function() {
+		cy.intercept({
+			method: 'DELETE',
+			url: `**/richdocuments/settings/fonts/${defaultFonts[0]}`,
+		}).as('deleteFontRequest')
+
+		cy.get(`button[aria-label="Delete ${defaultFonts[0]}"]`)
+			.click({ force: true })
+
+		cy.wait('@deleteFontRequest').its('response.statusCode').should('eq', 200)
+	})
+
+	it('Can upload a font file', function() {
+		cy.intercept({
+			method: 'POST',
+			url: '**/richdocuments/settings/fonts',
+		}).as('uploadFontRequest')
+
+		cy.uploadInputFile({
+			identifier: 'newFontInput',
+			fixturePath: `fonts/${defaultFonts[0]}`,
+			fileName: defaultFonts[0],
+			mimeType: 'font/ttf',
+		})
+
+		cy.wait('@uploadFontRequest').its('response.statusCode').should('eq', 200)
+	})
 })

cypress/e2e/templates.spec.js

@@ -19,8 +19,12 @@ describe('Global templates', function() {
 	})
 
 	it('Can be uploaded', function() {
+		cy.login(new User('admin', 'admin'))
+		cy.visit('/settings/admin/richdocuments')
+
 		cy.intercept('POST', '**/richdocuments/template').as('templateUploadRequest')
-		cy.uploadSystemTemplate({
+		cy.uploadInputFile({
+			identifier: 'newTemplateInput',
 			fixturePath: 'templates/presentation.otp',
 			fileName: 'systemtemplate.otp',
 			mimeType: 'application/vnd.oasis.opendocument.presentation-template',
@@ -34,7 +38,11 @@ describe('Global templates', function() {
 	})
 
 	it('Can prevent uploading a duplicate', function() {
-		cy.uploadSystemTemplate({
+		cy.login(new User('admin', 'admin'))
+		cy.visit('/settings/admin/richdocuments')
+
+		cy.uploadInputFile({
+			identifier: 'newTemplateInput',
 			fixturePath: 'templates/presentation.otp',
 			fileName: 'systemtemplate.otp',
 			mimeType: 'application/vnd.oasis.opendocument.presentation-template',

cypress/fixtures/fonts/AmaticSC-Regular.ttf.license

@@ -0,0 +1,2 @@
+SPDX-FileCopyrightText: 2015 The Amatic SC Project Authors (https://github.com/googlefonts/AmaticSC)
+SPDX-License-Identifier: OFL-1.1

cypress/support/commands.js

@@ -376,11 +376,28 @@ Cypress.Commands.add('uploadSystemTemplate', ({ fixturePath, fileName, mimeType
 	cy.login(new User('admin', 'admin'))
 	cy.visit('/settings/admin/richdocuments')
 
-	cy.get('.settings-section__name')
-		.contains('Global Templates')
+	cy.get('.settings-section')
+		.find('input[data-cy="newTemplateInput"]')
+		.as('newTemplateInput')
+
+	cy.get('@newTemplateInput')
 		.scrollIntoView()
 
-	cy.get('.settings-section input[type="file"]').selectFile({
+	cy.get('@newTemplateInput').selectFile({
+		contents: `cypress/fixtures/${fixturePath}`,
+		fileName,
+		mimeType,
+	}, { force: true })
+})
+
+Cypress.Commands.add('uploadInputFile', ({ identifier, fixturePath, fileName, mimeType }) => {
+	cy.get('.settings-section')
+		.find(`input[data-cy="${identifier}"]`)
+		.as('fileInputElement')
+
+	cy.get('@fileInputElement').scrollIntoView()
+
+	cy.get('@fileInputElement').selectFile({
 		contents: `cypress/fixtures/${fixturePath}`,
 		fileName,
 		mimeType,

lib/Service/FontService.php

@@ -188,9 +188,13 @@ private function generateFontOverview(ISimpleFile $fontFile): void {
 			fflush($tmpFontFile);
 
 			$im = imagecreatetruecolor(250, 30);
-			$bg_color = imagecolorallocate($im, 255, 255, 255);
+			imagealphablending($im, false);
+
+			$bg_color = imagecolorallocatealpha($im, 255, 255, 255, 127);
 			$font_color = imagecolorallocate($im, $color[0], $color[1], $color[2]);
-			imagefilledrectangle($im, 0, 0, 399, 29, $bg_color);
+			imagefill($im, 0, 0, $bg_color);
+			imagesavealpha($im, true);
+
 			$ttfResult = imagettftext($im, 20, 0, 0, 22, $font_color, $tmpFontFilePath, $text);
 			// this happens with invalid ttf fonts
 			if ($ttfResult === false) {

package.json

@@ -37,6 +37,7 @@
     "@nextcloud/viewer": "^1.0.0",
     "@nextcloud/vue": "^8.33.0",
     "jquery": "^4.0.0",
+    "pinia": "^2.3.1",
     "vue": "^2.7.16",
     "vue-material-design-icons": "^5.3.1"
   },

src/admin.js

@@ -5,6 +5,7 @@
 import './init-shared.js'
 import Vue from 'vue'
 import AdminSettings from './components/AdminSettings.vue'
+import { createPinia, PiniaVuePlugin } from 'pinia'
 import '../css/admin.scss'
 
 // CSP config for webpack dynamic chunk loading
@@ -21,9 +22,26 @@ Vue.prototype.n = n
 Vue.prototype.OC = OC
 Vue.prototype.OCA = OCA
 
+Vue.use(PiniaVuePlugin)
+
+const pinia = createPinia()
 const element = document.getElementById('admin-vue')
+const initialSettings = JSON.parse(element.dataset.initial)
+
+// Hydrate the adminSettings store with the initial settings
+// provided by the initial state
+pinia.state.value = {
+	adminSettings: {
+		fonts: initialSettings.fonts,
+	},
+}
 
 /* eslint-disable-next-line no-new */
 new Vue({
-	render: h => h(AdminSettings, { props: { initial: JSON.parse(element.dataset.initial) } }),
+	pinia,
+	render: h => h(
+		AdminSettings,
+		{
+			props: { initial: JSON.parse(element.dataset.initial) },
+		}),
 }).$mount('#admin-vue')