fix(dialogs): dashboard settings and versions open in the board dialog frame

l10n/nl.js

@@ -1639,7 +1639,8 @@ OC.L10N.register(
     "Search widgets…" : "Widgets zoeken…",
     "Operation failed" : "De bewerking is mislukt",
     "Continue to the administration settings" : "Verder naar de beheerinstellingen",
-    "Opening the administration settings…" : "Beheerinstellingen openen…"
+    "Opening the administration settings…" : "Beheerinstellingen openen…",
+    "Versions of {name}" : "Versies van {name}"
 },
 "nplurals=2; plural=(n != 1);"
 );

l10n/nl.json

@@ -1641,6 +1641,7 @@
         "Failed to load groups": "De groepen konden niet worden geladen",
         "Last dashboard cannot be deleted": "Het laatste dashboard kun je niet verwijderen",
         "Continue to the administration settings": "Verder naar de beheerinstellingen",
-        "Opening the administration settings…": "Beheerinstellingen openen…"
+        "Opening the administration settings…": "Beheerinstellingen openen…",
+        "Versions of {name}": "Versies van {name}"
     }
 }

src/modals/DashboardConfigModal.vue

@@ -6,14 +6,22 @@
 <template>
 	<NcModal
 		v-if="open"
-		class="launchpad-modal"
+		class="launchpad-modal launchpad-modal--wide"
 		size="normal"
 		:name="modalTitle"
 		@close="$emit('close')">
 		<div class="dashboard-config">
-			<h2 class="dashboard-config__title">
-				{{ modalTitle }}
-			</h2>
+			<header class="dashboard-config__head">
+				<p
+					v-if="!isCreate && dashboard?.name"
+					class="launchpad-modal__kicker"
+					data-testid="dashboard-config-kicker">
+					{{ dashboard.name }}
+				</p>
+				<h2 class="dashboard-config__title launchpad-modal__title">
+					{{ modalTitle }}
+				</h2>
+			</header>
 
 			<!-- Tab strip (dashboard-sharing spec). Sharing is no longer a
 			     free-floating field set in the modal body — it lives in its

src/modals/VersionHistoryModal.vue

@@ -6,12 +6,22 @@
 <template>
 	<NcModal
 		v-if="open"
-		class="launchpad-modal"
+		class="launchpad-modal launchpad-modal--wide"
 		size="normal"
-		:name="t('launchpad', 'Version history')"
+		:name="title"
 		@close="$emit('close')">
 		<div class="launchpad-versions" data-testid="version-history">
-			<h2>{{ t('launchpad', 'Version history') }}</h2>
+			<header>
+				<p
+					v-if="dashboardName"
+					class="launchpad-modal__kicker"
+					data-testid="version-kicker">
+					{{ dashboardName }}
+				</p>
+				<h2 class="launchpad-modal__title">
+					{{ title }}
+				</h2>
+			</header>
 
 			<div v-if="loading" class="launchpad-versions__loading">
 				<NcLoadingIcon :size="32" />
@@ -146,6 +156,16 @@ export default {
 			type: String,
 			default: '',
 		},
+
+		/**
+		 * The dashboard's name, for the line over the title and the title
+		 * itself ("Versions of {name}", board LpVersies). Empty keeps the
+		 * plain "Version history".
+		 */
+		dashboardName: {
+			type: String,
+			default: '',
+		},
 	},
 
 	emits: ['close', 'restored'],
@@ -164,6 +184,19 @@ export default {
 	},
 
 	computed: {
+		/**
+		 * The dialog title: "Versions of {name}" when the dashboard's name is
+		 * known (board LpVersies), else "Version history".
+		 *
+		 * @return {string} The translated title.
+		 * @spec exclude presentation only: the title of an existing dialog follows the board wording.
+		 */
+		title() {
+			return this.dashboardName
+				? t('launchpad', 'Versions of {name}', { name: this.dashboardName })
+				: t('launchpad', 'Version history')
+		},
+
 		/**
 		 * @return {Array<object>} Versions, newest first.
 		 * @spec openspec/specs/dashboard-versioning/spec.md
@@ -325,14 +358,16 @@ export default {
 
 <style scoped>
 .launchpad-versions {
-	padding: 16px;
+	padding: 24px;
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
 }
 
 .launchpad-versions__save {
 	display: flex;
 	gap: 8px;
 	align-items: flex-end;
-	margin-bottom: 16px;
 }
 
 .launchpad-versions__table {

src/modals/__tests__/VersionHistoryModal.spec.js

@@ -169,4 +169,32 @@ describe('VersionHistoryModal', () => {
 		await flushPromises()
 		expect(wrapper.find('[data-testid="version-error"]').exists()).toBe(true)
 	})
+
+	it('names the dashboard over a "Versions of" title (board LpVersies)', async () => {
+		api.listVersions.mockResolvedValue({
+			data: { versions: [], modeSupported: true },
+		})
+		const wrapper = mount(VersionHistoryModal, {
+			props: {
+				open: true,
+				dashboardUuid: 'dash-uuid',
+				dashboardName: 'Intranet Zuiddrecht',
+			},
+		})
+		await flushPromises()
+		expect(wrapper.find('[data-testid="version-kicker"]').text()).toBe(
+			'Intranet Zuiddrecht',
+		)
+		expect(wrapper.find('h2').text()).toBe('Versions of Intranet Zuiddrecht')
+	})
+
+	it('keeps the plain title without a name', async () => {
+		api.listVersions.mockResolvedValue({
+			data: { versions: [], modeSupported: true },
+		})
+		const wrapper = mountModal()
+		await flushPromises()
+		expect(wrapper.find('[data-testid="version-kicker"]').exists()).toBe(false)
+		expect(wrapper.find('h2').text()).toBe('Version history')
+	})
 })

src/styles/modals.css

@@ -11,3 +11,31 @@
 .modal-mask.launchpad-modal .modal-header__name {
 	display: none;
 }
+
+/*
+ * The board dialog frame (LpDashboardInstellingen, LpVersies): 720px wide,
+ * the dashboard's name as a small line over a 20px title.
+ */
+.modal-mask.launchpad-modal--wide .modal-wrapper--normal > .modal-container {
+	width: 720px;
+}
+
+/*
+ * The house style (thematiq) sets heading and paragraph type with
+ * !important on bare `h2` and `p`, which beats any class here. The frame's
+ * two lines need their board sizes, so they answer with !important too and
+ * win on specificity.
+ */
+.modal-mask.launchpad-modal .launchpad-modal__kicker {
+	margin: 0;
+	font-size: 13px !important;
+	font-weight: 600 !important;
+	color: var(--color-text-maxcontrast);
+}
+
+.modal-mask.launchpad-modal h2.launchpad-modal__title {
+	margin: 0;
+	font-size: 20px !important;
+	font-weight: 700 !important;
+	line-height: 1.3;
+}

src/views/Views.vue

@@ -233,6 +233,7 @@
 		<VersionHistoryModal
 			:open="versionHistoryOpen"
 			:dashboardUuid="activeDashboard?.uuid ?? ''"
+			:dashboardName="activeDashboard?.name ?? ''"
 			@close="versionHistoryOpen = false"
 			@restored="onVersionRestored" />