Merge branch 'main' into jurredr/dockerized-testing

aws · Jurredr · Jan 27, 2025 · Jan 27, 2025 · Jan 27, 2025 · Jan 27, 2025
commit be5bae032eed7e6f74e2c6280445369bc9f15c44
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
@@ -1,7 +1,7 @@
 {
     "name": "@aws/mynah-ui",
     "displayName": "AWS Mynah UI",
-    "version": "4.21.6",
+    "version": "4.22.1",
     "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,
@@ -273,7 +277,7 @@ ${item.task ? `<input ${item.checked === true ? 'checked' : ''} disabled type="c
 ${(item.task ? marked.parseInline : marked.parse)(item.text, { breaks: false }) as string}
 </li>`,
         link: (token) => {
-          const pattern = /^\[([^\]]+)\]\(([^)]+)\)$/;
+          const pattern = /^\[(?:\[([^\]]+)\]|([^\]]+))\]\(([^)]+)\)$/;
           // Expect raw formatted only in [TEXT](URL)
           if (!pattern.test(token.raw)) {
             return token.href;
@@ -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;
+        }
+    }
 }
@@ -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': {