core:Frontend:ReportMenu: Add sentry feedback

Author: joaomariolago

core/frontend/src/components/app/ReportMenu.vue

@@ -40,6 +40,20 @@
               With GitHub
             </v-btn>
 
+            <v-btn
+              v-tooltip="'Directly send us a feedback'"
+              class="ma-2"
+              @click="openSimpleReport"
+            >
+              <v-icon
+                left
+                size="20"
+              >
+                mdi-message-text
+              </v-icon>
+              With Simple Report
+            </v-btn>
+
             <v-btn
               v-tooltip="'Discuss ideas with the community'"
               class="ma-2"
@@ -61,6 +75,7 @@
 </template>
 
 <script lang="ts">
+import * as Sentry from '@sentry/vue'
 import Vue from 'vue'
 
 export default Vue.extend({
@@ -80,6 +95,40 @@ export default Vue.extend({
     openDiscuss(): void {
       window.open(this.discussUrl(), '_blank')
     },
+    async openSimpleReport(): Promise<void> {
+      // @ts-expect-error - Theme is not defined in the type
+      const { isDark, currentTheme } = this.$vuetify.theme
+
+      const light = '#FFF'
+      const dark = '#1E1E1E'
+
+      const theme = {
+        background: isDark ? dark : light,
+        foreground: isDark ? light : dark,
+        accentBackground: currentTheme.br_blue,
+        accentForeground: isDark ? dark : light,
+        successColor: currentTheme.success,
+        errorColor: currentTheme.error,
+        border: `1.5px solid ${isDark ? 'rgba(235, 230, 239, 0.15)' : 'rgba(30, 30, 30, 0.15)'}`,
+        interactiveFilter: `brightness(${isDark ? '150' : '95'}%)`,
+      }
+
+      const feedback = Sentry.feedbackIntegration({
+        colorScheme: 'system',
+        showBranding: false,
+        formTitle: 'Send us a Simple Report',
+        submitButtonLabel: 'Send Report',
+        messagePlaceholder: 'What\'s the bug? What did you expect? What feedback do you have?',
+        themeLight: theme,
+        themeDark: theme,
+      })
+
+      const form = await feedback.createForm()
+      form.appendToDom()
+
+      this.show_dialog = false
+      form.open()
+    },
     discussUrl(): string {
       const url = new URL('https://discuss.bluerobotics.com')
       url.pathname = '/new-topic'