feat: Added copy to clipboard buttons to Diagnostics view, with markdown backticks

2025-11-30 10:28:07 +00:00 · 2025-11-30 10:28:07 +00:00 · 6ccd10a970
parent a91e903873
commit 6ccd10a970
7 changed files with 54 additions and 11 deletions
--- a/frontend/resources/vue/views/DiagnosticsView.vue
+++ b/frontend/resources/vue/views/DiagnosticsView.vue
@ -26,6 +26,7 @@

    <div role="toolbar">
      <button @click="generateSosReport" :disabled="loading" class = "good">{{ t('diagnostics.generate-sos-report') }}</button>
+      <button @click="copySosReport" :disabled="!sosReport || loading" :class="sosReportCopied ? 'good' : ''">{{ sosReportCopied ? t('diagnostics.copied') : t('diagnostics.copy-to-clipboard') }}</button>
    </div>

    <textarea v-model="sosReport" readonly style="flex: 1; min-height: 200px; resize: vertical; width: 100%; box-sizing: border-box;"></textarea>
@ -36,6 +37,7 @@

    <div role="toolbar">
      <button @click="generateBrowserInfo" :disabled="loading" class = "good">{{ t('diagnostics.generate-browser-info') }}</button>
+      <button @click="copyBrowserInfo" :disabled="!browserInfo || loading" :class="browserInfoCopied ? 'good' : ''">{{ browserInfoCopied ? t('diagnostics.copied') : t('diagnostics.copy-to-clipboard') }}</button>
    </div>

    <textarea v-model="browserInfo" readonly style="flex: 1; min-height: 200px; resize: vertical; width: 100%; box-sizing: border-box;"></textarea>
@ -53,6 +55,8 @@ const diagnostics = ref({})
 const loading = ref(false)
 const sosReport = ref('')
 const browserInfo = ref('')
+const sosReportCopied = ref(false)
+const browserInfoCopied = ref(false)

 async function fetchDiagnostics() {
  loading.value = true
@ -83,7 +87,19 @@ function formatKey(key) {
 async function generateSosReport() {
  const response = await window.client.sosReport()
  console.log("response", response)
-  sosReport.value = response.alert
+  sosReport.value = `\`\`\`\n${response.alert}\n\`\`\`\n`
+}
+
+async function copySosReport() {
+  try {
+    await navigator.clipboard.writeText(sosReport.value)
+    sosReportCopied.value = true
+    setTimeout(() => {
+      sosReportCopied.value = false
+    }, 2000)
+  } catch (err) {
+    console.error('Failed to copy SOS report to clipboard:', err)
+  }
 }

 async function generateBrowserInfo() {
@ -143,17 +159,15 @@ async function generateBrowserInfo() {
      })(),
      hardwareConcurrency: navigator.hardwareConcurrency || 'N/A',
      maxTouchPoints: navigator.maxTouchPoints || 'N/A',
-      vendor: navigator.vendor || 'N/A',
-      appName: navigator.appName,
-      appVersion: navigator.appVersion,
-      product: navigator.product,
      userAgentData: userAgentData
    }

    const olivetinVersion = window.initResponse?.currentVersion || t('diagnostics.unknown')
    const currentLanguage = locale.value || t('diagnostics.unknown')

-    let output = '### BROWSER INFO START (copy all text to BROWSER INFO END)\n'
+    let output = '';
+    output += `\`\`\`\n`
+    output += '### BROWSER INFO START (copy all text to BROWSER INFO END)\n'
    output += `# OliveTin Information\n`
    output += `olivetinVersion: ${olivetinVersion}\n`
    output += `currentLanguage: ${currentLanguage}\n`
@ -162,10 +176,6 @@ async function generateBrowserInfo() {
    output += `platform: ${info.platform}\n`
    output += `language: ${info.language}\n`
    output += `languages: ${info.languages}\n`
-    output += `vendor: ${info.vendor}\n`
-    output += `appName: ${info.appName}\n`
-    output += `appVersion: ${info.appVersion}\n`
-    output += `product: ${info.product}\n`
    output += `\n# User Agent Data\n`
    output += `userAgentData:\n${info.userAgentData}\n`
    output += `\n# Display Information\n`
@ -186,7 +196,8 @@ async function generateBrowserInfo() {
    output += `\n# Location & Time\n`
    output += `timezone: ${info.timezone}\n`
    output += `timezoneOffset: ${info.timezoneOffset}\n`
-    output += `\n### BROWSER INFO END (copy all text from BROWSER INFO START)\n`
+    output += `\n### BROWSER INFO END (copy all text from BROWSER INFO START)`
+    output += `\n\`\`\`\n`

    browserInfo.value = output
  } finally {
@ -194,6 +205,18 @@ async function generateBrowserInfo() {
  }
 }

+async function copyBrowserInfo() {
+  try {
+    await navigator.clipboard.writeText(browserInfo.value)
+    browserInfoCopied.value = true
+    setTimeout(() => {
+      browserInfoCopied.value = false
+    }, 2000)
+  } catch (err) {
+    console.error('Failed to copy browser info to clipboard:', err)
+  }
+}
+
 onMounted(() => {
  fetchDiagnostics()
 })
--- a/lang/combined_output.json
+++ b/lang/combined_output.json
@ -5,6 +5,8 @@
            "connected": "Verbunden",
            "diagnostics.browser-info": "Browser-Informationen",
            "diagnostics.browser-info-description": "Dieser Abschnitt ermöglicht es Ihnen, einen detaillierten Bericht über Ihre Browser-Informationen zu erstellen. Dies kann bei der Fehlerbehebung von browser-spezifischen Problemen hilfreich sein.",
+            "diagnostics.copied": "Kopiert!",
+            "diagnostics.copy-to-clipboard": "In Zwischenablage kopieren",
            "diagnostics.found-config": "Konfiguration gefunden",
            "diagnostics.found-key": "Schlüssel gefunden",
            "diagnostics.generate-browser-info": "Browser-Informationen erstellen",
@ -49,6 +51,8 @@
            "connected": "Connected",
            "diagnostics.browser-info": "Browser Info",
            "diagnostics.browser-info-description": "This section allows you to generate a detailed report of your browser information. This can be helpful when troubleshooting browser-specific issues.",
+            "diagnostics.copied": "Copied!",
+            "diagnostics.copy-to-clipboard": "Copy to Clipboard",
            "diagnostics.found-config": "Found Config",
            "diagnostics.found-key": "Found Key",
            "diagnostics.generate-browser-info": "Generate Browser Info",
@ -93,6 +97,8 @@
            "connected": "Conectado",
            "diagnostics.browser-info": "Información del navegador",
            "diagnostics.browser-info-description": "Esta sección le permite generar un informe detallado de su información del navegador. Esto puede ser útil al solucionar problemas específicos del navegador.",
+            "diagnostics.copied": "¡Copiado!",
+            "diagnostics.copy-to-clipboard": "Copiar al portapapeles",
            "diagnostics.found-config": "Configuración encontrada",
            "diagnostics.found-key": "Clave encontrada",
            "diagnostics.generate-browser-info": "Generar información del navegador",
@ -137,6 +143,8 @@
            "connected": "Connesso",
            "diagnostics.browser-info": "Informazioni del browser",
            "diagnostics.browser-info-description": "Questa sezione ti consente di generare un rapporto dettagliato delle informazioni del tuo browser. Questo può essere utile durante la risoluzione dei problemi specifici del browser.",
+            "diagnostics.copied": "Copiato!",
+            "diagnostics.copy-to-clipboard": "Copia negli appunti",
            "diagnostics.found-config": "Configurazione trovata",
            "diagnostics.found-key": "Chiave trovata",
            "diagnostics.generate-browser-info": "Genera informazioni del browser",
@ -181,6 +189,8 @@
            "connected": "已连接",
            "diagnostics.browser-info": "浏览器信息",
            "diagnostics.browser-info-description": "此部分允许您生成浏览器信息的详细报告。这在排查浏览器特定问题时很有帮助。",
+            "diagnostics.copied": "已复制！",
+            "diagnostics.copy-to-clipboard": "复制到剪贴板",
            "diagnostics.found-config": "找到配置",
            "diagnostics.found-key": "找到密钥",
            "diagnostics.generate-browser-info": "生成浏览器信息",
--- a/lang/de-DE.yaml
+++ b/lang/de-DE.yaml
@ -34,6 +34,8 @@ translations:
  diagnostics.browser-info: Browser-Informationen
  diagnostics.browser-info-description: Dieser Abschnitt ermöglicht es Ihnen, einen detaillierten Bericht über Ihre Browser-Informationen zu erstellen. Dies kann bei der Fehlerbehebung von browser-spezifischen Problemen hilfreich sein.
  diagnostics.generate-browser-info: Browser-Informationen erstellen
+  diagnostics.copy-to-clipboard: In Zwischenablage kopieren
+  diagnostics.copied: Kopiert!
  diagnostics.unknown: Unbekannt
  diagnostics.useragent-data-error: Fehler beim Abrufen von userAgentData
  return-to-index: Zurück zur Startseite
--- a/lang/en.yaml
+++ b/lang/en.yaml
@ -34,6 +34,8 @@ translations:
  diagnostics.browser-info: Browser Info
  diagnostics.browser-info-description: This section allows you to generate a detailed report of your browser information. This can be helpful when troubleshooting browser-specific issues.
  diagnostics.generate-browser-info: Generate Browser Info
+  diagnostics.copy-to-clipboard: Copy to Clipboard
+  diagnostics.copied: Copied!
  diagnostics.unknown: Unknown
  diagnostics.useragent-data-error: Error retrieving userAgentData
  return-to-index: Return to index
--- a/lang/es-ES.yaml
+++ b/lang/es-ES.yaml
@ -34,6 +34,8 @@ translations:
  diagnostics.browser-info: Información del navegador
  diagnostics.browser-info-description: Esta sección le permite generar un informe detallado de su información del navegador. Esto puede ser útil al solucionar problemas específicos del navegador.
  diagnostics.generate-browser-info: Generar información del navegador
+  diagnostics.copy-to-clipboard: Copiar al portapapeles
+  diagnostics.copied: ¡Copiado!
  diagnostics.unknown: Desconocido
  diagnostics.useragent-data-error: Error al recuperar userAgentData
  return-to-index: Volver a la página principal
--- a/lang/it-IT.yaml
+++ b/lang/it-IT.yaml
@ -34,6 +34,8 @@ translations:
  diagnostics.browser-info: Informazioni del browser
  diagnostics.browser-info-description: Questa sezione ti consente di generare un rapporto dettagliato delle informazioni del tuo browser. Questo può essere utile durante la risoluzione dei problemi specifici del browser.
  diagnostics.generate-browser-info: Genera informazioni del browser
+  diagnostics.copy-to-clipboard: Copia negli appunti
+  diagnostics.copied: Copiato!
  diagnostics.unknown: Sconosciuto
  diagnostics.useragent-data-error: Errore nel recupero di userAgentData
  return-to-index: Torna alla pagina principale
--- a/lang/zh-Hans-CN.yaml
+++ b/lang/zh-Hans-CN.yaml
@ -40,5 +40,7 @@ translations:
  diagnostics.browser-info: 浏览器信息
  diagnostics.browser-info-description: 此部分允许您生成浏览器信息的详细报告。这在排查浏览器特定问题时很有帮助。
  diagnostics.generate-browser-info: 生成浏览器信息
+  diagnostics.copy-to-clipboard: 复制到剪贴板
+  diagnostics.copied: 已复制！
  diagnostics.unknown: 未知
  diagnostics.useragent-data-error: 检索 userAgentData 时出错