refactor(NcAppContent): clarify props documentation and use capabilities over initial state

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

Author: susnux

src/components/NcAppContent/NcAppContent.vue

@@ -145,19 +145,20 @@ export default {
 
 <script>
 import { getBuilder } from '@nextcloud/browser-storage'
+import { getCapabilities } from '@nextcloud/capabilities'
 import { emit } from '@nextcloud/event-bus'
 import { loadState } from '@nextcloud/initial-state'
 import { useSwipe } from '@vueuse/core'
 import { Splitpanes, Pane } from 'splitpanes'
+import NcAppContentDetailsToggle from './NcAppContentDetailsToggle.vue'
 import { useIsMobile } from '../../composables/useIsMobile/index.js'
+import { logger } from '../../utils/logger.ts'
 import { isRtl } from '../../utils/rtl.ts'
 
-import NcAppContentDetailsToggle from './NcAppContentDetailsToggle.vue'
-
 import 'splitpanes/dist/splitpanes.css'
 
 const browserStorage = getBuilder('nextcloud').persist().build()
-const { name: productName } = loadState('theming', 'data', { name: 'Nextcloud' })
+const instanceName = getCapabilities().theming?.name ?? 'Nextcloud'
 const activeApp = loadState('core', 'active-app', appName)
 const localizedAppNameState = loadState('core', 'apps', {})
 const localizedAppName = (Array.isArray(localizedAppNameState)
@@ -197,8 +198,9 @@ export default {
 
 		/**
 		 * Allows you to set the default width of the resizable list in % on vertical-split
-		 * Allows you to set the default height of the resizable list in % on horizontal-split
-		 * Must be between listMinWidth and listMaxWidth
+		 * or respectively the default height on horizontal-split.
+		 *
+		 * Must be between `listMinWidth` and `listMaxWidth`.
 		 */
 		listSize: {
 			type: Number,
@@ -207,7 +209,7 @@ export default {
 
 		/**
 		 * Allows you to set the minimum width of the list column in % on vertical-split
-		 * Allows you to set the minimum height of the list column in % on horizontal-split
+		 * or respectively the minimum height on horizontal-split.
 		 */
 		listMinWidth: {
 			type: Number,
@@ -216,7 +218,7 @@ export default {
 
 		/**
 		 * Allows you to set the maximum width of the list column in % on vertical-split
-		 * Allows you to set the maximum height of the list column in % on horizontal-split
+		 * or respectively the maximum height on horizontal-split.
 		 */
 		listMaxWidth: {
 			type: Number,
@@ -245,13 +247,6 @@ export default {
 			default: true,
 		},
 
-		/**
-		 * Specify the `<h1>` page heading
-		 */
-		pageHeading: {
-			type: String,
-			default: null,
-		},
 		/**
 		 * Content layout used when there is a list together with content:
 		 * - `vertical-split` - a 2-column layout with list and default content separated vertically
@@ -267,12 +262,20 @@ export default {
 			},
 		},
 
+		/**
+		 * Specify the `<h1>` page heading
+		 */
+		pageHeading: {
+			type: String,
+			default: null,
+		},
+
 		/**
 		 * Allow setting the page's `<title>`
 		 *
-		 * If a page heading is set it defaults to `{pageHeading} - {appName} - {productName}` e.g. `Favorites - Files - Nextcloud`.
-		 * When the page heading and the app name is the same only one is used, e.g. `Files - Files - Nextcloud` is shown as `Files - Nextcloud`.
-		 * When setting the prop then the following format will be used: `{pageTitle} - {pageHeading || appName} - {productName}`
+		 * If a page heading is set it defaults to `{pageHeading} - {appName} - {instanceName}` e.g. `Favorites - Files - MyPersonalCloud`.
+		 * When the page heading and the app name is the same only one is used, e.g. `Files - Files - MyPersonalCloud` is shown as `Files - MyPersonalCloud`.
+		 * When setting the prop then the following format will be used: `{pageTitle} - {instanceName}`
 		 */
 		pageTitle: {
 			type: String,
@@ -317,7 +320,7 @@ export default {
 				// to a global storage key
 				return `pane-list-size-${appName}`
 			} catch (e) {
-				console.info('[INFO] AppContent:', 'falling back to global nextcloud pane config')
+				logger.info('[NcAppContent]: falling back to global nextcloud pane config')
 				return 'pane-list-size-nextcloud'
 			}
 		},
@@ -350,20 +353,27 @@ export default {
 		realPageTitle() {
 			const entries = new Set()
 			if (this.pageTitle) {
-				entries.add(this.pageTitle)
-			}
-			if (this.pageHeading) {
-				entries.add(this.pageHeading)
-			}
-			if (entries.size === 0) {
+				// when page title is set we only use that
+				// we still split to remove duplicated instanceName
+				for (const part of this.pageTitle.split(' - ')) {
+					entries.add(part)
+				}
+			} else if (this.pageHeading) {
+				// when the page heading is provided but not the title
+				// then we split to remove duplicates
+				// but also add the localized app name
+				for (const part of this.pageHeading.split(' - ')) {
+					entries.add(part)
+				}
+
+				if (entries.size > 0) {
+					entries.add(localizedAppName)
+				}
+			} else {
 				return null
 			}
 
-			if (entries.size < 2) {
-				// Only add if not already pageHeading and pageTitle are included
-				entries.add(localizedAppName)
-			}
-			entries.add(productName)
+			entries.add(instanceName)
 			return [...entries.values()].join(' - ')
 		},
 	},

tests/unit/components/NcAppContent/NcAppContent.spec.ts

@@ -53,24 +53,44 @@ describe('NcAppContent', () => {
 		expect(document.title).toBe('nextcloud-vue - Nextcloud')
 	})
 
+	it('does not duplicate the heading in the document title if already formatted', () => {
+		mount(NcAppContent, {
+			propsData: {
+				pageHeading: 'My heading - nextcloud-vue',
+			},
+		})
+
+		expect(document.title).toBe('My heading - nextcloud-vue - Nextcloud')
+	})
+
 	it('sets the document title if pageTitle is provided', () => {
 		mount(NcAppContent, {
 			propsData: {
 				pageTitle: 'My title',
 			},
 		})
 
-		expect(document.title).toBe('My title - nextcloud-vue - Nextcloud')
+		expect(document.title).toBe('My title - Nextcloud')
 	})
 
 	it('does not duplicate the title in the document title', () => {
 		mount(NcAppContent, {
 			propsData: {
-				pageTitle: 'nextcloud-vue',
+				pageTitle: 'Nextcloud',
 			},
 		})
 
-		expect(document.title).toBe('nextcloud-vue - Nextcloud')
+		expect(document.title).toBe('Nextcloud')
+	})
+
+	it('does not duplicate the title in the document title if already formatted', () => {
+		mount(NcAppContent, {
+			propsData: {
+				pageTitle: 'My title - Nextcloud',
+			},
+		})
+
+		expect(document.title).toBe('My title - Nextcloud')
 	})
 
 	it('sets the document title if pageTitle and pageHeading are provided', () => {
@@ -81,6 +101,6 @@ describe('NcAppContent', () => {
 			},
 		})
 
-		expect(document.title).toBe('My title - My heading - Nextcloud')
+		expect(document.title).toBe('My title - Nextcloud')
 	})
 })