enh: Add details to CodeIntegrity setup check

apps/settings/css/settings.scss

@@ -581,9 +581,9 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
 }
 
 .trusted-domain-warning {
-	color: #fff;
+	color: var(--color-main-text);
 	padding: 5px;
-	background: #ce3702;
+	background: var(--color-error);
 	border-radius: 5px;
 	font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace;
 }

apps/settings/lib/Controller/CheckSetupController.php

@@ -70,37 +70,7 @@ public function getFailedIntegrityCheckFiles(): DataDisplayResponse {
 		}
 
 		if (!empty($completeResults)) {
-			$formattedTextResponse = 'Technical information
-=====================
-The following list covers which files have failed the integrity check. Please read
-the previous linked documentation to learn more about the errors and how to fix
-them.
-
-Results
-=======
-';
-			foreach ($completeResults as $context => $contextResult) {
-				$formattedTextResponse .= "- $context\n";
-
-				foreach ($contextResult as $category => $result) {
-					$formattedTextResponse .= "\t- $category\n";
-					if ($category !== 'EXCEPTION') {
-						foreach ($result as $key => $results) {
-							$formattedTextResponse .= "\t\t- $key\n";
-						}
-					} else {
-						foreach ($result as $key => $results) {
-							$formattedTextResponse .= "\t\t- $results\n";
-						}
-					}
-				}
-			}
-
-			$formattedTextResponse .= '
-Raw output
-==========
-';
-			$formattedTextResponse .= print_r($completeResults, true);
+			$formattedTextResponse = json_encode($completeResults, JSON_PRETTY_PRINT);
 		} else {
 			$formattedTextResponse = 'No errors have been found.';
 		}

apps/settings/lib/SetupChecks/CodeIntegrity.php

@@ -47,24 +47,67 @@ public function run(): SetupResult {
 		if ($this->checker->hasPassedCheck()) {
 			return SetupResult::success($this->l10n->t('No altered files'));
 		} else {
+			$completeResults = $this->checker->getResults();
+			$formattedTextResponse = '';
+			if (!empty($completeResults)) {
+				$formattedTextResponse = '#### ' . $this->l10n->t('Technical information');
+				$formattedTextResponse .= "\n" . $this->l10n->t('The following list covers which files have failed the integrity check.');
+				$formattedTextResponse .= "\n";
+				foreach ($completeResults as $context => $contextResult) {
+					$formattedTextResponse .= "- $context\n";
+
+					foreach ($contextResult as $category => $result) {
+						$categoryName = match($category) {
+							'EXCEPTION' => $this->l10n->t('Exception'),
+							'EXTRA_FILE' => $this->l10n->t('Unexpected file'),
+							'FILE_MISSING' => $this->l10n->t('Missing file'),
+							'INVALID_HASH' => $this->l10n->t('Invalid file (hash mismatch)'),
+							default => $category,
+						};
+						$formattedTextResponse .= "\t- $categoryName\n";
+						if ($category !== 'EXCEPTION') {
+							foreach ($result as $key => $results) {
+								$formattedTextResponse .= "\t\t- '" . $this->escapeMarkdown($key) . "'\n";
+							}
+						} else {
+							foreach ($result as $key => $results) {
+								$formattedTextResponse .= "\t\t- " . $this->escapeMarkdown($results) . "\n";
+							}
+						}
+					}
+				}
+			}
+
 			return SetupResult::error(
-				$this->l10n->t('Some files have not passed the integrity check. {link1} {link2}'),
+				$this->l10n->t('Some files have not passed the integrity check. {rawOutput} {rescan}') . "\n\n" . $formattedTextResponse,
 				$this->urlGenerator->linkToDocs('admin-code-integrity'),
 				[
-					'link1' => [
+					'rawOutput' => [
 						'type' => 'highlight',
 						'id' => 'getFailedIntegrityCheckFiles',
-						'name' => $this->l10n->t('List of invalid files…'),
+						'name' => $this->l10n->t('Raw output …'),
 						'link' => $this->urlGenerator->linkToRoute('settings.CheckSetup.getFailedIntegrityCheckFiles'),
 					],
-					'link2' => [
+					'rescan' => [
 						'type' => 'highlight',
 						'id' => 'rescanFailedIntegrityCheck',
-						'name' => $this->l10n->t('Rescan…'),
+						'name' => $this->l10n->t('Rescan …'),
 						'link' => $this->urlGenerator->linkToRoute('settings.CheckSetup.rescanFailedIntegrityCheck'),
 					],
 				],
 			);
 		}
 	}
+
+	/**
+	 * Escape markdown text
+	 *
+	 * @param string $text The markdown text to escape
+	 */
+	private function escapeMarkdown(string $text): string {
+		$pattern = '/[-#*+`._[\]()!&<>_{}|]/';
+		$replacement = fn ($matches): string => '\\' . $matches[0];
+
+		return preg_replace_callback($pattern, $replacement, $text) ?? $text;
+	}
 }

apps/settings/src/components/RichArguments/UnknownArgument.vue

@@ -0,0 +1,22 @@
+<!--
+	SPDX-FileCopyrightText: Nextcloud GmbH and Nextcloud contributors
+	SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+	<a v-if="link" :class="$style.unknownArgument__link" :href="link">{{ name }}</a>
+	<strong v-else>{{ name }}</strong>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+	name: string
+	link?: string
+}>()
+</script>
+
+<style module>
+.unknownArgument__link {
+	text-decoration: underline;
+}
+</style>

apps/settings/src/components/SettingsSetupChecks/SettingsSetupChecksListItem.vue

@@ -4,17 +4,23 @@
 -->
 
 <script setup lang="ts">
-import type { IRichObjectParameters, ISetupCheck } from '../../settings-types.ts'
+import type { ISetupCheck } from '../../settings-types.ts'
 
 import { mdiAlert, mdiClose, mdiInformation } from '@mdi/js'
-import escapeHTML from 'escape-html'
-import { computed } from 'vue'
+import { t } from '@nextcloud/l10n'
+import { computed, ref } from 'vue'
+import NcButton from '@nextcloud/vue/components/NcButton'
 import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
+import NcRichText from '@nextcloud/vue/components/NcRichText'
+import { useRichArguments } from '../../composables/useRichArguments.ts'
 
 const props = defineProps<{
 	setupCheck: ISetupCheck
 }>()
 
+const showDetails = ref(false)
+const hasDetails = computed(() => props.setupCheck.description.includes('\n\n'))
+
 const leadingIcon = computed(() => {
 	if (props.setupCheck.severity === 'error') {
 		return mdiClose
@@ -24,39 +30,16 @@ const leadingIcon = computed(() => {
 	return mdiInformation
 })
 
-const descriptionHtml = computed(() => parseRichObject(props.setupCheck.description, props.setupCheck.descriptionParameters))
-
-/**
- * Simplified RichObject parsing and replacing.
- *
- * @param message - The message that may contain rich objects
- * @param parameters - The rich object parameters
- */
-function parseRichObject(message: string, parameters?: IRichObjectParameters): string {
-	if (!parameters) {
-		return message
-	}
+const richObjects = computed(() => props.setupCheck.descriptionParameters ?? {})
+const richArguments = useRichArguments(richObjects)
 
-	for (const [placeholder, parameter] of Object.entries(parameters)) {
-		let replacement: string
-		if (parameter.type === 'user') {
-			replacement = `@${escapeHTML(parameter.name)}`
-		} else if (parameter.type === 'file') {
-			replacement = escapeHTML(parameter.path || parameter.name)
-		} else if (parameter.type === 'highlight') {
-			if (parameter.link) {
-				replacement = '<a href="' + encodeURI(parameter.link) + '">' + escapeHTML(parameter.name) + '</a>'
-			} else {
-				replacement = '<em>' + escapeHTML(parameter.name) + '</em>'
-			}
-		} else {
-			replacement = escapeHTML(parameter.name)
-		}
-		message = message.replaceAll('{' + placeholder + '}', replacement)
+const richText = computed(() => {
+	if (showDetails.value) {
+		return props.setupCheck.description
 	}
-
-	return message
-}
+	const firstParagraph = props.setupCheck.description.split('\n\n')[0]
+	return firstParagraph
+})
 </script>
 
 <template>
@@ -67,11 +50,19 @@ function parseRichObject(message: string, parameters?: IRichObjectParameters): s
 		}">
 		<NcIconSvgWrapper class="settings-setup-checks-item__icon" :path="leadingIcon" />
 		<div class="settings-setup-checks-item__wrapper">
-			<div class="settings-setup-checks-item__name">
-				{{ setupCheck.name }}
+			<div class="settings-setup-checks-item__header">
+				<div class="settings-setup-checks-item__name">
+					{{ setupCheck.name }}
+				</div>
+				<NcButton v-if="hasDetails" @click="showDetails = !showDetails">
+					{{ showDetails ? t('settings', 'Hide details') : t('settings', 'Show details') }}
+				</NcButton>
 			</div>
-			<!-- eslint-disable-next-line vue/no-v-html -->
-			<div class="settings-setup-checks-item__description" v-html="descriptionHtml" />
+			<NcRichText
+				class="settings-setup-checks-item__description"
+				:arguments="richArguments"
+				:text="richText"
+				use-markdown />
 		</div>
 	</li>
 </template>
@@ -92,6 +83,14 @@ function parseRichObject(message: string, parameters?: IRichObjectParameters): s
 		flex-direction: column;
 		// align with icon
 		padding-top: calc((var(--default-clickable-area) - 1lh) / 2);
+		width: 100%;
+	}
+
+	&__header {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		gap: var(--default-grid-baseline);
 	}
 
 	&__description {

apps/settings/src/composables/useRichArguments.ts

@@ -0,0 +1,76 @@
+/*
+ * SPDX-FileCopyrightText: Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import type { MaybeRefOrGetter } from '@vueuse/core'
+import type { Component } from 'vue'
+import type { IRichObjectParameter, IRichObjectParameters } from '../settings-types.ts'
+
+import { toValue } from '@vueuse/core'
+import { computed } from 'vue'
+import NcUserBubble from '@nextcloud/vue/components/NcUserBubble'
+import UnknownArgument from '../components/RichArguments/UnknownArgument.vue'
+
+export interface IRichArgument {
+	component: Component
+	props: Record<string, unknown>
+}
+
+/**
+ * Map an collection of rich text objects to rich arguments for the RichText component
+ *
+ * @param richObjects The rich text object
+ */
+export function mapRichObjectsToRichArguments(richObjects: IRichObjectParameters) {
+	const args: Record<string, IRichArgument | string> = {}
+
+	for (const richObjectName in richObjects) {
+		args[richObjectName] = mapRichObjectToRichArgument(richObjects[richObjectName])
+	}
+
+	return args
+}
+
+/**
+ * Map rich text object to rich argument for the RichText component
+ *
+ * @param richObject - The rich text object
+ */
+export function mapRichObjectToRichArgument(richObject: IRichObjectParameter): IRichArgument | string {
+	switch (richObject.type) {
+		case 'user':
+			return {
+				component: NcUserBubble as Component,
+				props: {
+					displayName: richObject.name,
+					user: richObject.id,
+					url: richObject.link,
+				},
+			}
+		case 'group':
+			return {
+				component: NcUserBubble as Component,
+				props: {
+					avatarImage: 'icon-group',
+					displayName: richObject.name,
+					url: richObject.link,
+					primary: true,
+				},
+			}
+		default:
+			return {
+				component: UnknownArgument,
+				props: richObject,
+			}
+	}
+}
+
+/**
+ * Reactively map rich objects to rich arguments for use with NcRichText
+ *
+ * @param objects Map of RichObjects
+ */
+export function useRichArguments(objects: MaybeRefOrGetter<IRichObjectParameters>) {
+	return computed(() => mapRichObjectsToRichArguments(toValue(objects)))
+}

apps/settings/src/settings-types.ts

@@ -4,8 +4,23 @@
  */
 
 export interface IRichObjectParameter {
-	[index: string]: string
+	/**
+	 * ID of the rich object
+	 */
+	id: string | number
+	/**
+	 * Name of the rich object
+	 */
+	name: string
+	/**
+	 * Type of the rich object
+	 */
 	type: string
+
+	/**
+	 * Additional rich object properties
+	 */
+	[key: string]: unknown
 }
 
 export type IRichObjectParameters = Record<string, IRichObjectParameter>