Add copy to clipboard button in Diagnostics page. (#2717)

---------

Co-authored-by: Martin Stone <1611702+d7415@users.noreply.github.com>

resources/js/components/diagnostics/ConfigurationsDiagnostics.vue

@@ -11,9 +11,14 @@ import DiagnosticsService from "@/services/diagnostics-service";
 
 const configs = ref<string[] | undefined>(undefined);
 
+const emits = defineEmits<{
+	loaded: [data: string[]];
+}>();
+
 function load() {
 	DiagnosticsService.config().then((response) => {
 		configs.value = response.data;
+		emits("loaded", response.data);
 	});
 }
 

resources/js/components/diagnostics/ErrorsDiagnostics.vue

@@ -14,9 +14,14 @@ import DiagnosticsService from "@/services/diagnostics-service";
 
 const errors = ref<App.Http.Resources.Diagnostics.ErrorLine[] | undefined>(undefined);
 
+const emits = defineEmits<{
+	loaded: [data: App.Http.Resources.Diagnostics.ErrorLine[]];
+}>();
+
 function load() {
 	DiagnosticsService.errors().then((response) => {
 		errors.value = response.data;
+		emits("loaded", response.data);
 	});
 }
 

resources/js/components/diagnostics/InfoDiagnostics.vue

@@ -10,10 +10,14 @@ import Panel from "primevue/panel";
 import DiagnosticsService from "@/services/diagnostics-service";
 
 const infos = ref<string[] | undefined>(undefined);
+const emits = defineEmits<{
+	loaded: [data: string[]];
+}>();
 
 function load() {
 	DiagnosticsService.info().then((response) => {
 		infos.value = response.data;
+		emits("loaded", response.data);
 	});
 }
 

resources/js/views/Diagnostics.vue

@@ -2,23 +2,23 @@
 	<Toolbar class="w-full border-0 h-14">
 		<template #start>
 			<Button @click="togglableStore.toggleLeftMenu" icon="pi pi-bars" class="mr-2 border-none" severity="secondary" text />
-			<!-- <router-link :to="{ name: 'gallery' }">
-				<Button icon="pi pi-angle-left" class="mr-2" severity="secondary" text />
-			</router-link> -->
 		</template>
 
 		<template #center>
 			{{ $t("lychee.DIAGNOSTICS") }}
 		</template>
 
-		<template #end> </template>
+		<template #end>
+			<Button :disabled="!canCopy" text aria-label="Copy" icon="pi pi-copy" v-tooltip="'Copy diagnostics to clipboard'" @click="copy" />
+		</template>
 	</Toolbar>
-	<ErrorsDiagnotics />
-	<InfoDiagnostics v-if="user?.id" />
+	<ErrorsDiagnotics @loaded="loadError" />
+	<InfoDiagnostics v-if="user?.id" @loaded="loadInfo" />
 	<SpaceDiagnostics v-if="user?.id" />
-	<ConfigurationsDiagnostics v-if="user?.id" />
+	<ConfigurationsDiagnostics v-if="user?.id" @loaded="loadConfig" />
 </template>
 <script setup lang="ts">
+import { ref, computed } from "vue";
 import Toolbar from "primevue/toolbar";
 import Button from "primevue/button";
 import ConfigurationsDiagnostics from "@/components/diagnostics/ConfigurationsDiagnostics.vue";
@@ -28,9 +28,50 @@ import SpaceDiagnostics from "@/components/diagnostics/SpaceDiagnostics.vue";
 import { useAuthStore } from "@/stores/Auth";
 import { storeToRefs } from "pinia";
 import { useTogglablesStateStore } from "@/stores/ModalsState";
+import { useToast } from "primevue/usetoast";
 
 const authStore = useAuthStore();
 const { user } = storeToRefs(authStore);
 authStore.getUser();
 const togglableStore = useTogglablesStateStore();
+
+const toast = useToast();
+
+const errorLoaded = ref<App.Http.Resources.Diagnostics.ErrorLine[] | undefined>(undefined);
+const infoLoaded = ref<string[] | undefined>(undefined);
+const configurationLoaded = ref<string[] | undefined>(undefined);
+
+const canCopy = computed(() => errorLoaded.value !== undefined && infoLoaded.value !== undefined && configurationLoaded.value !== undefined);
+
+function loadError(val: App.Http.Resources.Diagnostics.ErrorLine[]) {
+	errorLoaded.value = val;
+}
+
+function loadInfo(val: string[]) {
+	infoLoaded.value = val;
+}
+
+function loadConfig(val: string[]) {
+	configurationLoaded.value = val;
+}
+
+function copy() {
+	if (!canCopy) {
+		return;
+	}
+
+	console.log(errorLoaded.value);
+	const errorText = errorLoaded.value
+		?.filter((errorLine) => errorLine.type !== undefined)
+		.map((errorLines) => `${errorLines.type.padEnd(7)}: ${errorLines.line}`)
+		.join("\n");
+	const infoText = infoLoaded.value?.join("\n");
+	const configurationText = configurationLoaded.value?.join("\n");
+
+	const toClipBoard = `Errors:\n${"-".repeat(20)}\n${errorText}\n\n\nInfo:\n${"-".repeat(20)}\n${infoText}\n\n\nConfig:\n${"-".repeat(20)}\n${configurationText}`;
+
+	navigator.clipboard
+		.writeText(toClipBoard)
+		.then(() => toast.add({ severity: "info", summary: "Info", detail: "Diagnostic copied to clipboard", life: 3000 }));
+}
 </script>

resources/js/views/Error.vue

@@ -34,7 +34,7 @@
 	</template>
 </template>
 <script setup lang="ts">
-import { type Ref, ref } from "vue";
+import { ref } from "vue";
 import Divider from "primevue/divider";
 import Message from "primevue/message";
 import Panel from "primevue/panel";