Merge pull request #227 from aws/dogusata/add-description-field-to-fe…

…edback-form added description field to feedback form
aws · Jan 31, 2025 · d6cae22 · d6cae22
2 parents 2a17a48 + 7f6733d
commit d6cae22
Show file tree

Hide file tree

Showing 17 changed files with 93 additions and 6 deletions.
diff --git a/docs/CONFIG.md b/docs/CONFIG.md
@@ -12,6 +12,7 @@ interface ConfigModel {
     texts: {
         mainTitle?: string;
         feedbackFormTitle?: string;
+        feedbackFormDescription?: string;
         feedbackFormOptionsLabel?: string;
         feedbackFormCommentLabel?: string;
         feedbackThanks?: string;
@@ -124,7 +125,7 @@ Default tab title text if it is not set through store data for that tab.
 
 ---
 
-## feedbackFormTitle, feedbackFormOptionsLabel, feedbackFormCommentLabel, submit, cancel
+## feedbackFormTitle, feedbackFormDescription, feedbackFormOptionsLabel, feedbackFormCommentLabel, submit, cancel
 <p align="center">
   <img src="./img/texts/feedbackForm.png" alt="feedbackForm" style="max-width:500px; width:100%;border: 1px solid #e0e0e0;">
 </p>

diff --git a/docs/PROPERTIES.md b/docs/PROPERTIES.md
@@ -102,6 +102,10 @@ export interface MynahUIProps {
     link: string,
     mouseEvent?: MouseEvent,
     eventId?: string) => void;
+  onFormLinkClick?: (
+    link: string,
+    mouseEvent?: MouseEvent,
+    eventId?: string) => void;
   onInfoLinkClick?: (
     tabId: string,
     link: string,
@@ -745,6 +749,30 @@ onLinkClick?: (
 ```
 ---
 
+### `onFormLinkClick`
+
+This event will be fired when user clicks a link inside the description field on feedback or custom forms. It will pass `link`, for the clicked link and the `mouseEvent` and the to check userIntent the `eventId`.
+
+**Note:** For example, JetBrains JCEF WebView opens the links in a new browser view of its own. However to prevent this action and navigate to user's own preferred browser to open the links, you may want to cancel the default behaviour and run your own function to open the OS default browser.
+
+
+<p align="center">
+  <img src="./img/onFormLinkClick.png" alt="onFormLinkClick" style="max-width:500px; width:100%;border: 1px solid #e0e0e0;">
+</p>
+
+```typescript
+...
+onFormLinkClick?: (
+    link: string,
+    mouseEvent?: MouseEvent):void => {
+      console.log(`Sent from Form`);
+      console.log(`link: ${link}`);
+      // mouseEvent.preventDefault();
+    }
+...
+```
+---
+
 ### `onInfoLinkClick`
 
 This event will be fired when user clicks a link inside the footer information message below the prompt input field for that tab. It will pass `tabId`, `link` for the clicked link and the `mouseEvent` for the event object in case if it needs to be prevented as the arguments.

diff --git a/docs/img/onFormLinkClick.png b/docs/img/onFormLinkClick.png
diff --git a/docs/img/texts/feedbackForm.png b/docs/img/texts/feedbackForm.png
diff --git a/example/src/main.ts b/example/src/main.ts
@@ -68,6 +68,9 @@ export const createMynahUI = (initialData?: MynahUIDataModel): MynahUI => {
       maxTabsTooltipDuration: 5000,
       noMoreTabsTooltip: 'You can only open five conversation tabs at a time.',
       autoFocus: true,
+      texts: {
+        feedbackFormDescription: '_Feedback is anonymous. For issue updates, please contact us on [GitHub](https://github.com/aws/mynah-ui/issues)._'
+      },
       tabBarButtons: [
         {
           id: 'clear',
@@ -398,6 +401,9 @@ export const createMynahUI = (initialData?: MynahUIDataModel): MynahUI => {
       }
       Log(`Link inside body clicked: <b>${link}</b>`);
     },
+    onFormLinkClick: (link, mouseEvent) => {
+      Log(`Link inside form clicked: <b>${link}</b>`);
+    },
     onSourceLinkClick: (tabId, messageId, link, mouseEvent) => {
       Log(`Link in sources clicked: <b>${link}</b>`);
     },

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
     "name": "@aws/mynah-ui",
     "displayName": "AWS Mynah UI",
-    "version": "4.21.6",
+    "version": "4.22.0",
     "description": "AWS Toolkit VSCode and Intellij IDE Extension Mynah UI",
     "publisher": "Amazon Web Services",
     "license": "Apache License 2.0",

diff --git a/src/components/feedback-form/feedback-form.ts b/src/components/feedback-form/feedback-form.ts
@@ -14,6 +14,7 @@ import { Select } from '../form-items/select';
 import { CustomFormWrapper } from './custom-form';
 import '../../styles/components/_feedback-form.scss';
 import testIds from '../../helper/test-ids';
+import { CardBody } from '../card/card-body';
 
 export interface FeedbackFormProps {
   initPayload?: FeedbackPayload;
@@ -116,7 +117,13 @@ export class FeedbackForm {
     this.feedbackFormContainer = DomBuilder.getInstance().build({
       type: 'div',
       classNames: [ 'mynah-feedback-form' ],
-      events: { click: cancelEvent },
+      events: {
+        click: (e) => {
+          if (e.target != null && !(e.target as HTMLElement).classList.contains('mynah-ui-clickable-item')) {
+            cancelEvent(e);
+          }
+        }
+      },
       children: [
         {
           type: 'div',
@@ -137,6 +144,22 @@ export class FeedbackForm {
             }).render
           ]
         },
+        {
+          type: 'div',
+          classNames: [ 'mynah-feedback-form-description' ],
+          testId: testIds.feedbackForm.description,
+          children: [ Config.getInstance().config.texts.feedbackFormDescription !== ''
+            ? new CardBody({
+              body: Config.getInstance().config.texts.feedbackFormDescription,
+              onLinkClick: (link, event) => {
+                MynahUIGlobalEvents.getInstance().dispatch(MynahEventNames.FORM_LINK_CLICK, {
+                  link,
+                  event,
+                });
+              },
+            }).render
+            : '' ]
+        },
         this.feedbackOptionsWrapper.render,
         {
           type: 'span',

diff --git a/src/helper/config.ts b/src/helper/config.ts
@@ -55,6 +55,7 @@ const configDefaults: ConfigFullModel = {
     copy: 'Copy',
     insertAtCursorLabel: 'Insert at cursor',
     feedbackFormTitle: 'Report an issue',
+    feedbackFormDescription: '',
     feedbackFormOptionsLabel: 'What type of issue would you like to report?',
     feedbackFormCommentLabel: 'Description of issue (optional):',
     feedbackThanks: 'Thanks!',

diff --git a/src/helper/test-ids.ts b/src/helper/test-ids.ts
@@ -102,6 +102,7 @@ export default {
   feedbackForm: {
     wrapper: 'feedback-form-wrapper',
     title: 'feedback-form-title',
+    description: 'feedback-form-description',
     optionsSelectWrapper: 'feedback-form-options-select-wrapper',
     optionsSelect: 'feedback-form-options-select',
     comment: 'feedback-form-comment-text-area',

diff --git a/src/main.ts b/src/main.ts
@@ -214,6 +214,10 @@ export interface MynahUIProps {
     link: string,
     mouseEvent?: MouseEvent,
     eventId?: string) => void;
+  onFormLinkClick?: (
+    link: string,
+    mouseEvent?: MouseEvent,
+    eventId?: string) => void;
   onSendFeedback?: (
     tabId: string,
     feedbackPayload: FeedbackPayload,
@@ -581,6 +585,15 @@ ${(item.task ? marked.parseInline : marked.parse)(item.text, { breaks: false })
         );
       }
     });
+    MynahUIGlobalEvents.getInstance().addListener(MynahEventNames.FORM_LINK_CLICK, (data) => {
+      if (this.props.onFormLinkClick !== undefined) {
+        this.props.onFormLinkClick(
+          data.link,
+          data.event,
+          this.getUserEventId()
+        );
+      }
+    });
     MynahUIGlobalEvents.getInstance().addListener(MynahEventNames.INFO_LINK_CLICK, (data) => {
       if (this.props.onInfoLinkClick !== undefined) {
         this.props.onInfoLinkClick(

diff --git a/src/static.ts b/src/static.ts
@@ -152,6 +152,7 @@ export enum MynahEventNames {
   CARD_VOTE = 'cardVote',
   SOURCE_LINK_CLICK = 'sourceLinkClick',
   INFO_LINK_CLICK = 'infoLinkClick',
+  FORM_LINK_CLICK = 'formLinkClick',
   LINK_CLICK = 'linkClick',
   CHAT_ITEM_ENGAGEMENT = 'chatItemEngagement',
   COPY_CODE_TO_CLIPBOARD = 'copyCodeToClipboard',
@@ -472,6 +473,7 @@ export type CodeBlockActions = Record<'copy' | 'insert-to-cursor' | string, Code
 export interface ConfigTexts {
   mainTitle: string;
   feedbackFormTitle: string;
+  feedbackFormDescription: string;
   feedbackFormOptionsLabel: string;
   feedbackFormCommentLabel: string;
   feedbackThanks: string;

diff --git a/src/styles/components/_feedback-form.scss b/src/styles/components/_feedback-form.scss
@@ -140,4 +140,10 @@
         gap: var(--mynah-sizing-1);
         box-sizing: border-box;
     }
+    > .mynah-feedback-form-description {
+        pointer-events: all;
+        &:empty {
+            display: none;
+        }
+    }
 }
diff --git a/...main-spec-ts-open-mynah-ui-feedback-form-should-render-feedback-form-1-snap.png b/...main-spec-ts-open-mynah-ui-feedback-form-should-render-feedback-form-1-snap.png
diff --git a/...main-spec-ts-open-mynah-ui-feedback-form-should-render-feedback-form-1-snap.png b/...main-spec-ts-open-mynah-ui-feedback-form-should-render-feedback-form-1-snap.png
diff --git a/ui-tests/__test__/flows/feedback-form/render-feedback-form.ts b/ui-tests/__test__/flows/feedback-form/render-feedback-form.ts
@@ -34,6 +34,9 @@ export const renderFeedbackForm = async (page: Page, skipScreenshots?: boolean):
   await commentInput.fill('This is some feedback comment');
   await waitForAnimationEnd(page);
 
+  const descriptionText = page.locator(getSelector(testIds.feedbackForm.description));
+  expect(descriptionText).toBeDefined();
+
   const submitButton = page.locator(getSelector(testIds.feedbackForm.submitButton));
   expect(submitButton).toBeDefined();
 

diff --git a/ui-tests/src/main.ts b/ui-tests/src/main.ts
@@ -28,7 +28,10 @@ export const createMynahUI = (): MynahUI => {
     config: {
       noMoreTabsTooltip: 'Tabs limit.',
       autoFocus: true,
-      test: true
+      test: true,
+      texts: {
+        feedbackFormDescription: '_Feedback description. A link [GitHub](https://github.com/aws/mynah-ui/issues)._'
+      }
     },
     tabs: {
       'tab-1': {