Enhance bug reporting from within the app (#16566)

* Fix paths of imports

* Process not-found.vue as ts

To prevent the following error from 'vue-tsc':
  error TS6504: File '/Users/pascal/Development/directus/app/src/modules/insights/routes/not-found.vue.js' is a JavaScript file. Did you mean to enable the 'allowJs' option?

Note: We could also enable 'allowJS' but since this is the only js file
this seems to be a more fitting fix

* Drop hljs language definition for GraphQL (now in core)

* Enhance bug reporting from within the app

* Simplify simplify simplify

---------

Co-authored-by: rijkvanzanten <rijkvanzanten@me.com>

app/src/components/v-menu._test.ts

@@ -0,0 +1,36 @@
+import { test, expect, beforeEach } from 'vitest';
+import { mount } from '@vue/test-utils';
+
+import VMenu from './v-menu.vue';
+import TransitionBounce from './transition/bounce.vue';
+import { GlobalMountOptions } from '@vue/test-utils/dist/types';
+import { directive } from '@/directives/click-outside';
+
+beforeEach(() => {
+	// create teleport target
+	const el = document.createElement('div');
+	el.id = 'menu-outlet';
+	document.body.appendChild(el);
+});
+
+const global: GlobalMountOptions = {
+	directives: {
+		'click-outside': directive,
+	},
+	components: {
+		TransitionBounce,
+	},
+};
+
+test('Mount component', () => {
+	expect(VMenu).toBeTruthy();
+
+	const wrapper = mount(VMenu, {
+		slots: {
+			default: 'Slot Content',
+		},
+		global,
+	});
+
+	expect(wrapper.html()).toMatchSnapshot();
+});

app/src/modules/settings/components/navigation.vue

@@ -35,7 +35,7 @@ export default defineComponent({
 	setup() {
 		const { t } = useI18n();
 
-		const { parsedInfo } = useProjectInfo();
+		const { parsedInfo: projectInfo } = useProjectInfo();
 
 		const navItems = [
 			{
@@ -76,23 +76,16 @@ export default defineComponent({
 		];
 
 		const externalItems = computed(() => {
-			const bugReportParams = new URLSearchParams({
-				template: 'bug_report.yml',
-				'directus-version': parsedInfo.value?.directus.version ?? '',
-				'node-version': parsedInfo.value?.node.version ?? '',
-				'operating-system': `${parsedInfo.value?.os.type ?? ''} ${parsedInfo.value?.os.version ?? ''}`,
-			});
-
 			return [
 				{
 					icon: 'bug_report',
 					name: t('report_bug'),
-					href: `https://github.com/directus/directus/issues/new?${bugReportParams.toString()}`,
+					href: 'https://github.com/directus/directus/issues/new?template=bug_report.yml',
 				},
 				{
 					icon: 'new_releases',
 					name: t('request_feature'),
-					href: 'https://github.com/directus/directus/discussions/new',
+					href: 'https://github.com/directus/directus/discussions/new?category=feature-requests',
 				},
 			];
 		});

app/src/modules/settings/composables/use-project-info.ts

@@ -19,7 +19,7 @@ type ServerInfo = {
 	};
 };
 
-type UsableProjectInfo = {
+export type UsableProjectInfo = {
 	info: Ref<ServerInfo | undefined>;
 	parsedInfo: ComputedRef<{
 		directus: {

app/src/views/private/components/notification-dialogs.vue

@@ -10,7 +10,7 @@
 				</v-card-text>
 				<v-card-actions>
 					<v-button v-if="notification.type === 'error' && admin && notification.code === 'UNKNOWN'" secondary>
-						<a target="_blank" :href="getGitHubIssueLink(notification)">
+						<a target="_blank" href="https://github.com/directus/directus/issues/new?template=bug_report.yml">
 							{{ t('report_error') }}
 						</a>
 					</v-button>
@@ -22,51 +22,21 @@
 </template>
 
 <script lang="ts">
-import { useI18n } from 'vue-i18n';
-import { defineComponent, computed } from 'vue';
 import { useNotificationsStore } from '@/stores/notifications';
 import { useUserStore } from '@/stores/user';
-import { Snackbar } from '@/types/notifications';
-import { useProjectInfo } from '@/modules/settings/composables/use-project-info';
+import { computed, defineComponent } from 'vue';
+import { useI18n } from 'vue-i18n';
 
 export default defineComponent({
 	setup() {
 		const { t } = useI18n();
 
-		const { parsedInfo } = useProjectInfo();
 		const notificationsStore = useNotificationsStore();
 		const userStore = useUserStore();
 
 		const notifications = computed(() => notificationsStore.dialogs);
 
-		return { t, notifications, admin: userStore.isAdmin, done, getGitHubIssueLink };
-
-		function getGitHubIssueLink(notification: Snackbar) {
-			const debugInfo = `<!-- Please put a detailed explanation of the problem here. -->
-
----
-
-### Project details
-Directus Version: ${parsedInfo.value?.directus.version}
-Environment: ${import.meta.env.MODE}
-OS: ${parsedInfo.value?.os.type} ${parsedInfo.value?.os.version}
-Node: ${parsedInfo.value?.node.version}
-
-### Error
-
-Title: ${notification.title || 'none'}
-Message: ${notification.text || 'none'}
-
-<details>
-<summary>Stack Trace</summary>
-<pre>
-${JSON.stringify(notification.error, Object.getOwnPropertyNames(notification.error), 2)}
-</pre>
-</details>
-			`;
-
-			return `https://github.com/directus/directus/issues/new?body=${encodeURIComponent(debugInfo)}`;
-		}
+		return { t, notifications, admin: userStore.isAdmin, done };
 
 		function done(id: string) {
 			notificationsStore.remove(id);

pnpm-lock.yaml

@@ -1387,7 +1387,7 @@ importers:
         version: 2.2.5
       knex:
         specifier: 2.4.2
-        version: 2.4.2
+        version: 2.4.2(mysql@2.18.1)(pg@8.10.0)(sqlite3@5.1.6)(tedious@15.1.3)
       listr2:
         specifier: 5.0.8
         version: 5.0.8
@@ -5688,7 +5688,7 @@ packages:
       rollup:
         optional: true
     dependencies:
-      '@rollup/pluginutils': 5.0.2(rollup@3.19.1)
+      '@rollup/pluginutils': 5.0.2
       js-yaml: 4.1.0
       tosource: 2.0.0-alpha.3
     dev: true
@@ -5701,6 +5701,20 @@ packages:
       picomatch: 2.3.1
     dev: false
 
+  /@rollup/pluginutils@5.0.2:
+    resolution: {integrity: sha512-pTd9rIsP92h+B6wWwFbW8RkZv4hiR/xKsqre4SIuAOaOEQRxi0lqLke9k2/7WegC85GgUs9pjmOjCUi3In4vwA==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0||^3.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+    dependencies:
+      '@types/estree': 1.0.0
+      estree-walker: 2.0.2
+      picomatch: 2.3.1
+    dev: true
+
   /@rollup/pluginutils@5.0.2(rollup@3.19.1):
     resolution: {integrity: sha512-pTd9rIsP92h+B6wWwFbW8RkZv4hiR/xKsqre4SIuAOaOEQRxi0lqLke9k2/7WegC85GgUs9pjmOjCUi3In4vwA==}
     engines: {node: '>=14.0.0'}
@@ -5714,6 +5728,7 @@ packages:
       estree-walker: 2.0.2
       picomatch: 2.3.1
       rollup: 3.19.1
+    dev: false
 
   /@sendgrid/client@6.5.5:
     resolution: {integrity: sha512-Nbfgo94gbWSL8PIgJfuHoifyOJJepvV8NQkkglctAEfb1hyozKhrzE6v1kPG/z4j0RodaTtXD5LJj/t0q/VhLA==}
@@ -12428,7 +12443,7 @@ packages:
       jest-util: 29.5.0
       jest-validate: 29.5.0
       resolve: 1.22.1
-      resolve.exports: 2.0.2
+      resolve.exports: 2.0.0
       slash: 3.0.0
     dev: true
 
@@ -12956,52 +12971,6 @@ packages:
       lodash.clonedeep: 4.5.0
     dev: true
 
-  /knex@2.4.2:
-    resolution: {integrity: sha512-tMI1M7a+xwHhPxjbl/H9K1kHX+VncEYcvCx5K00M16bWvpYPKAZd6QrCu68PtHAdIZNQPWZn0GVhqVBEthGWCg==}
-    engines: {node: '>=12'}
-    hasBin: true
-    peerDependencies:
-      better-sqlite3: '*'
-      mysql: '*'
-      mysql2: '*'
-      pg: '*'
-      pg-native: '*'
-      sqlite3: '*'
-      tedious: '*'
-    peerDependenciesMeta:
-      better-sqlite3:
-        optional: true
-      mysql:
-        optional: true
-      mysql2:
-        optional: true
-      pg:
-        optional: true
-      pg-native:
-        optional: true
-      sqlite3:
-        optional: true
-      tedious:
-        optional: true
-    dependencies:
-      colorette: 2.0.19
-      commander: 9.5.0
-      debug: 4.3.4
-      escalade: 3.1.1
-      esm: 3.2.25
-      get-package-type: 0.1.0
-      getopts: 2.3.0
-      interpret: 2.2.0
-      lodash: 4.17.21
-      pg-connection-string: 2.5.0
-      rechoir: 0.8.0
-      resolve-from: 5.0.0
-      tarn: 3.0.2
-      tildify: 2.0.0
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
   /knex@2.4.2(mysql@2.18.1)(pg@8.10.0)(sqlite3@5.1.6)(tedious@15.1.3):
     resolution: {integrity: sha512-tMI1M7a+xwHhPxjbl/H9K1kHX+VncEYcvCx5K00M16bWvpYPKAZd6QrCu68PtHAdIZNQPWZn0GVhqVBEthGWCg==}
     engines: {node: '>=12'}
@@ -16353,8 +16322,8 @@ packages:
       protocol-buffers-schema: 3.6.0
     dev: true
 
-  /resolve.exports@2.0.2:
-    resolution: {integrity: sha512-X2UW6Nw3n/aMgDVy+0rSqgHlv39WZAlZrXCdnbyEiKm17DSqHX4MmQMaST3FbeWR5FTuRcUwYAziZajji0Y7mg==}
+  /resolve.exports@2.0.0:
+    resolution: {integrity: sha512-6K/gDlqgQscOlg9fSRpWstA8sYe8rbELsSTNpx+3kTrsVCzvSl0zIvRErM7fdl9ERWDsKnrLnwB+Ne89918XOg==}
     engines: {node: '>=10'}
     dev: true