refactor: move custom fonts into separate component

Signed-off-by: Elizabeth Danzberger <[email protected]>

Author: elzody

cypress/e2e/settings.spec.js

@@ -6,7 +6,6 @@ import { User } from '@nextcloud/cypress'
 
 const usesHttps = Cypress.env('baseUrl').substr(0, 5) === '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

@@ -18,8 +18,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',
@@ -33,7 +37,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

@@ -301,11 +301,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,

cypress/support/commands.js

@@ -187,9 +187,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) {

lib/Service/FontService.php

@@ -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')

src/admin.js

@@ -293,28 +293,7 @@
 				@update="updateWopiAllowlist" />
 		</div>
 
-		<div v-if="isSetup" id="font-settings" class="section">
-			<h2>{{ t('richdocuments', 'Custom Fonts') }}</h2>
-			<SettingsInputFile :label="t('richdocuments', 'Upload font file')"
-				:button-title="t('richdocuments', 'Upload a font file')"
-				:uploading="uploadingFont"
-				:mimetypes="fontMimes"
-				@change="uploadFont" />
-			<SettingsFontList :fonts="settings.fonts"
-				:label="t('richdocuments', 'Available fonts')"
-				@deleted="onFontDeleted" />
-			<em>
-				{{ fontHint }}
-			</em>
-			<em>
-				<pre>
-					{{ fontXmlHint }}
-				</pre>
-			</em>
-			<em>
-				{{ t('richdocuments', 'For ideal document compatibility we recommend you to install commonly used fonts. If your users are working with Microsoft Office, installing their proprietary fonts can be done following the documentation.') }} <a :href="fontCustomDocumentUrl" target="_blank">{{ t('richdocuments', 'Custom fonts documentation') }}</a>
-			</em>
-		</div>
+		<CustomFonts />
 
 		<div v-if="isSetup" id="secure-view-settings" class="section">
 			<h2>{{ t('richdocuments', 'Secure View') }}</h2>
@@ -428,9 +407,8 @@ import SettingsCheckbox from './SettingsCheckbox.vue'
 import SettingsInputText from './SettingsInputText.vue'
 import SettingsSelectGroup from './SettingsSelectGroup.vue'
 import SettingsExternalApps from './SettingsExternalApps.vue'
-import SettingsInputFile from './SettingsInputFile.vue'
-import SettingsFontList from './SettingsFontList.vue'
 import GlobalTemplates from './AdminSettings/GlobalTemplates.vue'
+import CustomFonts from './AdminSettings/CustomFonts.vue'
 import { getCurrentUser } from '@nextcloud/auth'
 
 import { isPublicShare, getSharingToken } from '@nextcloud/sharing/public'
@@ -463,9 +441,8 @@ export default {
 		NcSelect,
 		NcSelectTags,
 		SettingsExternalApps,
-		SettingsInputFile,
-		SettingsFontList,
 		GlobalTemplates,
+		CustomFonts,
 		NcModal,
 		NcNoteCard,
 		CoolFrame,
@@ -882,12 +859,6 @@ export default {
 				this.uploadingFont = false
 			})
 		},
-		onFontDeleted(name) {
-			const index = this.settings.fonts.indexOf(name)
-			if (index !== -1) {
-				this.settings.fonts.splice(index, 1)
-			}
-		},
 	},
 }
 </script>