feat(xo-web/xoa/support): add a link to create a support ticket (#4833)

Fixes #4234

CHANGELOG.unreleased.md

@@ -8,6 +8,7 @@
 > Users must be able to say: “Nice enhancement, I'm eager to test it”
 
 - [VM migration] Ability to choose network for migration within a pool [#2028](https://github.com/vatesfr/xen-orchestra/issues/2028) (PR [#4828](https://github.com/vatesfr/xen-orchestra/pull/4828))
+- [Support] Link to create a new support ticket [#4234](https://github.com/vatesfr/xen-orchestra/issues/4234) (PR [#4833](https://github.com/vatesfr/xen-orchestra/pull/4833))
 
 ### Bug fixes
 

packages/xo-web/src/common/intl/messages.js

@@ -168,6 +168,7 @@ const messages = {
   checkXoa: 'Check XOA',
   xoaCheck: 'XOA check',
   closeTunnel: 'Close tunnel',
+  createSupportTicket: 'Create a support ticket',
   openTunnel: 'Open tunnel',
   supportCommunity:
     'The XOA check and the support tunnel are available in XOA.',

packages/xo-web/src/common/report-bug-button.js

@@ -49,15 +49,15 @@ const reportInNewWindow = (
   const encodedMessage = encodeURIComponent(
     message == null ? '' : formatMessage(message)
   )
-  window.open(`${url}?title=${encodedTitle}&body=${encodedMessage}}`)
+  window.open(`${url}?title=${encodedTitle}&body=${encodedMessage}`)
 }
 
-const reportOnSupportPanel = async ({
+export const reportOnSupportPanel = async ({
   files = [],
   formatMessage = identity,
   message,
   title,
-}) => {
+} = {}) => {
   const { FormData, open } = window
 
   const formData = new FormData()

packages/xo-web/src/icons.scss

@@ -318,6 +318,11 @@
     @extend .fa;
     @extend .fa-area-chart;
   }
+  &-ticket {
+    @extend .fa;
+    @extend .fa-ticket;
+  }
+
 
   // Backups
   &-backup {

packages/xo-web/src/xo-app/xoa/support/index.js

@@ -8,6 +8,7 @@ import { Card, CardBlock, CardHeader } from 'card'
 import { Container, Row, Col } from 'grid'
 import { injectState, provideState } from 'reaclette'
 import { checkXoa, closeTunnel, openTunnel, subscribeTunnelState } from 'xo'
+import { reportOnSupportPanel } from 'report-bug-button'
 
 const ansiUp = new AnsiUp()
 const COMMUNITY = getXoaPlan() === 'Community'
@@ -46,6 +47,18 @@ const Support = decorate([
           </Col>
         </Row>
       )}
+      <Row className='mb-1'>
+        <Col>
+          <ActionButton
+            btnStyle='primary'
+            disabled={COMMUNITY}
+            handler={reportOnSupportPanel}
+            icon='ticket'
+          >
+            {_('createSupportTicket')}
+          </ActionButton>
+        </Col>
+      </Row>
       <Row>
         <Col mediumSize={6}>
           <Card>