fix(fe): gate-13 — extract four inline modals, and fix the slot typo that made four settings info panels render empty (#479)

* fix(fe): extract four inline modals, and fix the mis-named slot that made four settings info panels render empty

gate-13 (modal-isolation) reported three files with inline NcModal/NcDialog
markup. Fixing them surfaced a second, unrelated defect that no gate and no
test could see, because its failure mode is silence.

THE SLOT BUG

AlwaysVisibleSection declared `<slot name="info" />`. Four callers pass
`<template #info-content>`:

  UserGroupsConfiguration, EmailConfiguration,
  ArchiMateImportExport, OrganizationSynchronization

All four also set `:has-info-content="true"`, so the (i) button rendered and
opened a modal with nothing in it. Vue drops slot content addressed to a slot
the child does not declare — no warning, no error, no failing test. The name
came from CollapsibleSection, which does use `info-content`; only
VersionInformation used the working `info` name.

Both sections now render `<slot name="info-content"><slot name="info" /></slot>`
so `info-content` wins and `info` remains a fallback. All five callers render.

THE EXTRACTION

  src/dialogs/ChangePasswordDialog.vue      <- ContactpersonenList
  src/dialogs/ManageUserGroupsDialog.vue    <- ContactpersonenList
  src/modals/AlwaysVisibleSectionInfoModal.vue
  src/modals/CollapsibleSectionInfoModal.vue

ContactpersonenList drops 1563 -> 954 lines. Password validation, the HIBP
pwned-check, the debounce watcher and the group selection all move into the
dialog that owns them; the parent now only opens them and reacts to events.
`updateContactpersoonGroups` stays in the parent because it mutates the
parent's own organisationData — the dialog reports groups up rather than
reaching into it. Since both dialogs mount fresh per open, `data()` IS the
state reset the parent used to spell out by hand and `beforeUnmount` IS the
timeout cleanup. Every t('softwarecatalog', ...) string is preserved verbatim.

Two info-modal files rather than one shared component: the two sections render
materially different DOM (NcModal's own title chrome and a bare body, versus a
hand-painted h2 + Close footer + ~90 lines of :deep() typography). Sharing them
would need a variant flag switching between two disjoint templates and two
disjoint stylesheets, and converging them would have changed one section's
rendered output.

BOTH DIRECTIONS

A new vitest spec mounts each section with #info-content supplied. Against the
pre-fix wiring:

  FAIL tests/vitest/sectionInfoSlot.spec.js > renders #info-content inside the info modal
  AssertionError: expected false to be true
  FAIL > prefers #info-content over #info when both are supplied
  Tests  2 failed | 5 passed (7)

The #info case still PASSED there, which is what shows the test isolates the
bug rather than the harness. After the fix: 227 passed (21 files).

  [gate-13] modal-isolation: FAIL - 3 file(s) -> PASS

No other gate moved: 19=291, 25=41, 26=3. (An earlier baseline appeared to
flip six gates; that baseline was captured while `npm ci` was still running.
Re-measured with node_modules present in both arms, gate-13 is the only
verdict that changes.)

TOOLCHAIN

Vitest could not mount an SFC: no Vue plugin, and environment 'node'. Added
@vitejs/plugin-vue + jsdom as devDependencies, a @nextcloud/vue stub alongside
the existing router/dialogs/l10n stubs, and made vitest.config.js an async
factory so the ESM-only plugin can be dynamic-imported from a CommonJS config.
The default environment stays 'node'; the new spec opts into jsdom per-file, so
no existing spec changes behaviour.

lint 0 errors; build compiles; 227/227 unit tests pass.

* fix(settings): escape the literal placeholder braces the slot fix exposed

The mis-named `info-content` slot had been hiding a second bug. Because
AlwaysVisibleSection only declared `<slot name="info" />`, Vue silently
dropped the four callers that passed `#info-content` — so their panels
were never rendered, and nothing could fail on them.

EmailConfiguration's panel documents the e-mail template placeholders:

    Use placeholders like {{ organization.name }} and {{ user.email }}

Those braces are meant literally, but Vue compiles them as interpolation
against the component, which has no `organization` and no `user`. The
moment the slot name was fixed and the panel rendered for the first time
it threw `Cannot read properties of undefined (reading 'name')`, which
tripped the shared "no console errors" assertion in every Playwright
settings test.

`v-pre` keeps the braces as documentation. The other four info panels
were checked and render clean.

Also adds tests/vitest/settingsInfoPanels.spec.js, which renders the REAL
markup of every info panel under src/views/settings/sections/. The
existing sectionInfoSlot.spec.js proves the slot MECHANISM forwards
content, but it does so with synthetic probe markup — which is precisely
why it could not see this. Verified both ways: without `v-pre` the new
spec reproduces the exact TypeError from CI.

---------

Co-authored-by: Conduction Release Bot <release-bot@conduction.nl>

Author: rubenvdlinde

package-lock.json

@@ -99,7 +99,9 @@
     "@types/jest": "^29.5.12",
     "@types/node": "^20.14.12",
     "@typescript-eslint/parser": "^7.18.0",
+    "@vitejs/plugin-vue": "^6.0.8",
     "@vitest/coverage-v8": "^3.2.7",
+    "@vue/compiler-dom": "^3.5.41",
     "@vue/compiler-sfc": "^3.5.40",
     "@vue/eslint-config-typescript": "^13.0.0",
     "@vue/test-utils": "^2.4.6",
@@ -123,6 +125,7 @@
     "jest": "^29.0.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-transform-stub": "^2.0.0",
+    "jsdom": "^29.1.1",
     "postcss-html": "^1.8.1",
     "stylelint": "^15.11.0",
     "stylelint-config-recommended-scss": "^13.1.0",

package.json

@@ -81,26 +81,36 @@
 			</div>
 		</div>
 
-		<!-- Info Modal -->
-		<NcModal
+		<!-- Info Modal — own file per ADR-004/ADR-012 -->
+		<AlwaysVisibleSectionInfoModal
 			v-if="hasInfoContent"
+			:name="name"
 			:show="showInfoModal"
-			:title="name + ' Information'"
-			:name="name + ' Info'"
 			@close="showInfoModal = false">
-			<div class="info-content">
+			<!--
+				BOTH slot names are honoured. `info-content` wins when supplied and
+				`info` is the fallback, so no caller can be silently empty.
+
+				This section only ever declared `info`, but four of its five callers
+				(UserGroupsConfiguration, EmailConfiguration, ArchiMateImportExport,
+				OrganizationSynchronization) pass `#info-content` — the name
+				CollapsibleSection uses. They all set `:has-info-content="true"`, so
+				the (i) button rendered and opened a completely EMPTY modal.
+			-->
+			<slot name="info-content">
 				<slot name="info" />
-			</div>
-		</NcModal>
+			</slot>
+		</AlwaysVisibleSectionInfoModal>
 	</NcSettingsSection>
 </template>
 
 <script>
 import { defineComponent } from 'vue'
-import { NcSettingsSection, NcButton, NcLoadingIcon, NcModal } from '@nextcloud/vue'
+import { NcSettingsSection, NcButton, NcLoadingIcon } from '@nextcloud/vue'
 import Save from 'vue-material-design-icons/ContentSave.vue'
 import Refresh from 'vue-material-design-icons/Refresh.vue'
 import Information from 'vue-material-design-icons/Information.vue'
+import AlwaysVisibleSectionInfoModal from '../modals/AlwaysVisibleSectionInfoModal.vue'
 
 /**
  * Always Visible Section component
@@ -117,10 +127,10 @@ export default defineComponent({
 		NcSettingsSection,
 		NcButton,
 		NcLoadingIcon,
-		NcModal,
 		Save,
 		Refresh,
 		Information,
+		AlwaysVisibleSectionInfoModal,
 	},
 
 	props: {
@@ -311,10 +321,7 @@ export default defineComponent({
 	color: var(--color-text-lighter);
 }
 
-.info-content {
-	max-width: 600px;
-	line-height: 1.6;
-}
+/* .info-content lives with the modal in src/modals/AlwaysVisibleSectionInfoModal.vue */
 
 /* Responsive */
 @media (max-width: 768px) {

src/components/AlwaysVisibleSection.vue

@@ -96,26 +96,23 @@
 			</div>
 		</div>
 
-		<!-- Info Modal -->
-		<NcModal
+		<!-- Info Modal — own file per ADR-004/ADR-012 -->
+		<CollapsibleSectionInfoModal
 			v-if="showInfoModal"
+			:name="name"
 			@close="showInfoModal = false">
-			<div class="info-modal">
-				<div class="modal-header">
-					<h2>{{ name }} - Information</h2>
-				</div>
-				<div class="modal-content">
-					<slot name="info-content">
-						<p>No additional information available.</p>
-					</slot>
-				</div>
-				<div class="modal-footer">
-					<NcButton @click="showInfoModal = false">
-						Close
-					</NcButton>
-				</div>
-			</div>
-		</NcModal>
+			<!--
+				BOTH slot names are honoured, matching AlwaysVisibleSection: this
+				section has always used `info-content`, and `info` is accepted as an
+				alias so the two sections share one slot API and no caller can be
+				silently empty. The empty-state paragraph is the last fallback.
+			-->
+			<slot name="info-content">
+				<slot name="info">
+					<p>No additional information available.</p>
+				</slot>
+			</slot>
+		</CollapsibleSectionInfoModal>
 	</NcSettingsSection>
 </template>
 
@@ -136,7 +133,6 @@ import {
 	NcSettingsSection,
 	NcButton,
 	NcLoadingIcon,
-	NcModal,
 } from '@nextcloud/vue'
 
 // Icons
@@ -146,19 +142,21 @@ import Information from 'vue-material-design-icons/Information.vue'
 import ChevronUp from 'vue-material-design-icons/ChevronUp.vue'
 import ChevronDown from 'vue-material-design-icons/ChevronDown.vue'
 
+import CollapsibleSectionInfoModal from '../modals/CollapsibleSectionInfoModal.vue'
+
 export default {
 	name: 'CollapsibleSection',
 
 	components: {
 		NcSettingsSection,
 		NcButton,
 		NcLoadingIcon,
-		NcModal,
 		Save,
 		Refresh,
 		Information,
 		ChevronUp,
 		ChevronDown,
+		CollapsibleSectionInfoModal,
 	},
 
 	props: {
@@ -365,73 +363,8 @@ export default {
 	padding: 40px 0;
 }
 
-/* Info Modal Styles */
-.info-modal {
-	padding: 20px;
-	max-width: 600px;
-	max-height: 80vh;
-	overflow-y: auto;
-}
-
-.modal-header {
-	margin-bottom: 16px;
-	padding-bottom: 16px;
-	border-bottom: 1px solid var(--color-border);
-}
-
-.modal-header h2 {
-	margin: 0;
-	font-size: 20px;
-	font-weight: 600;
-	color: var(--color-main-text);
-}
-
-.modal-content {
-	margin-bottom: 20px;
-	line-height: 1.6;
-}
-
-.modal-content :deep(h3) {
-	margin-top: 20px;
-	margin-bottom: 12px;
-	font-size: 16px;
-	font-weight: 600;
-}
-
-.modal-content :deep(h4) {
-	margin-top: 16px;
-	margin-bottom: 8px;
-	font-size: 14px;
-	font-weight: 600;
-}
-
-.modal-content :deep(ul) {
-	padding-left: 20px;
-	margin-bottom: 16px;
-}
-
-.modal-content :deep(li) {
-	margin-bottom: 4px;
-}
-
-.modal-content :deep(p) {
-	margin-bottom: 12px;
-}
-
-.modal-content :deep(code) {
-	background-color: var(--color-background-dark);
-	padding: 2px 6px;
-	border-radius: 4px;
-	font-family: monospace;
-	font-size: 13px;
-}
-
-.modal-footer {
-	display: flex;
-	justify-content: flex-end;
-	padding-top: 16px;
-	border-top: 1px solid var(--color-border);
-}
+/* The info-modal styles live with the modal in
+   src/modals/CollapsibleSectionInfoModal.vue */
 
 /* WCAG 2.3.3 — the expand animation is decorative; a reduced-motion user gets
    the expanded section immediately instead of the slide. */