From 99250b499f94851d4f89503fdc95f088058709ee Mon Sep 17 00:00:00 2001 From: Ryan Albrecht Date: Mon, 22 Apr 2024 11:55:53 -0700 Subject: [PATCH 1/8] docs(feedback): Add migration docs for moving from feedbackIntegration v7.x to v8.0.0-beta.2 --- MIGRATION.md | 7 ++ docs/migration/feedback.md | 110 ++++++++++++++++++++ packages/feedback/src/modal/integration.tsx | 10 +- 3 files changed, 125 insertions(+), 2 deletions(-) create mode 100644 docs/migration/feedback.md diff --git a/MIGRATION.md b/MIGRATION.md index ef1f17dcfe7d..7f576e951e0f 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -1283,6 +1283,13 @@ export class HeaderComponent { } ``` +# Upgrading Sentry Feedback (beta, 7.x to 8.0) + +For details on upgrading Feedback in its beta phase, please view the +[dedicated Feedback MIGRATION docs](./docs/migration/feedback.md). + +--- + # Deprecations in 7.x You can use the **Experimental** [@sentry/migr8](https://www.npmjs.com/package/@sentry/migr8) to automatically update diff --git a/docs/migration/feedback.md b/docs/migration/feedback.md new file mode 100644 index 000000000000..b00531c6aac9 --- /dev/null +++ b/docs/migration/feedback.md @@ -0,0 +1,110 @@ +# End of Feedback Beta + +Sentry Feedback is now out of Beta. This means that the usual stabilty guarantees apply. + +Because of experimentation and rapid iteration, during the Beta period some bugs and problems came up which have since +been fixed/improved, as well as API's which have been streamlined and chanaged. + +Below you can find a list of relevant feedback changes and issues that have been made from v7.x to v8.0.0-beta.2 + +## Upgrading Feedback from 7.x to 8.0.0-beta.2 + +We have streamlined the interface for interacting with the Feedback widget. Below is a list of public functions that +existed in v7.x and a description of how they have changed in v8. + +| Method Name | Replacement | Notes | +| ------------------------- | -------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `feedback.getWidget()` | `const widget = feedback.createWidget(); widget.appendToDom()` | The SDK no longer maintains a stack of form instances. If you call `createWidget()` a new form will be inserted into the DOM and a Promise returned allowed you control over the lifecycle of the widget. | +| `feedback.attachTo()` | `const unsubscribe = feedback.attachTo(myButtonElem)` | The `attachTo()` method in will create an onClick event listener to your html element that calls appendToDom() and open(). It returns a callback to remove the event listener. | +| `feedback.openDialog()` | `widget.open()` | Make the form inside the widget visible. | +| `feedback.closeDialog()` | `widget.close()` | Make the form inside the widget hidden in the page. Success/Error messages will still be rendered and will hide themselves if the form was recently submitted. | +| `feedback.removeWidget()` | `widget.removeFromDom()` | Remove the form and widget instance from the page. After calling this `widget.el.parentNode` will be set to null. | + +### API Examples + +#### Auto injecting Feedback + +The easiest way to get setup is to auto-inject the feedback widget. This will create a floating button which opens the +feedback form. + +In your SDK setup: + +```javascript +Sentry.init({ + integrations: [ + feedbackIntegration({ + autoInject: true, + }), + ], +}); +``` + +`autoInject: true,` is the default value. + +#### Attaching feedback to your own button + +If you don't want to have a floating button to trigger the feedback form, you can attach the form to your own DOM +element instead. + +First, get a reference to the feedback integration instance: + +```javascript +// Option 1: Keep a reference when you setup the sdk: +const feedbackInstance = feedbackIntegration(); +Sentry.init({ + integrations: [feedbackInstance], +}); + +// Option 2: Get a reference from the SDK client +const feedbackInstance = getClient()?.getIntegrationByName('Feedback'); +``` + +Next, call `attachTo()` + +```javascript +const myButton = document.getElementById('my-button'); +const unsubscribe = feedbackInstance.attachTo(myButton); +``` + +This will insert the form into the DOM and show/hide it when the button is clicked. + +Later, if `my-button` is removed from the page be sure to call `unsubscribe()` or `feedbackInstance.remove()` to cleanup +the event listeners. + +#### Manually managing show/hide state and adding/remove the form from the DOM. + +You can manually add/remove the form from the page, and control when it's shown/hidden by calling the lifecycle methods +directly. + +For example, `attachTo()` is a convenience wrapper over the lifecycle methods. You could re-implement it like this: + +```javascript +function attachTo(button: HTMLElement) { + const handleClick = async () => { + const widget = await feedbackInstance.getWidget({ + onFormClose: () => { + widget.close(); + }, + onFormSubmited: () => { + widget.removeFromDom(); + } + }); + widget.appendToDom(); + widget.open(); + }; + + button.addEventListener('click', handleClick); + return () => { + button.removeEventListener('click', handleClick) + } +} +``` + +## Config changes in v8 + +Added new configuration values + +| Field Name | Type | Description | +| --------------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| showScreenshot | boolean | Default: false. Enable this option to allow a user to choose to include a screenshot of the webpage with their feedback submission. The user option is not supported on mobile browsers and will have no effect there. | +| onFormSubmitted | () => void | Callback whenever the feedback form is submitted, but before success/failure is returned. | diff --git a/packages/feedback/src/modal/integration.tsx b/packages/feedback/src/modal/integration.tsx index cf50b66274bb..a92b9cad356c 100644 --- a/packages/feedback/src/modal/integration.tsx +++ b/packages/feedback/src/modal/integration.tsx @@ -1,5 +1,11 @@ import { getCurrentScope, getGlobalScope, getIsolationScope } from '@sentry/core'; -import type { CreateDialogProps, FeedbackFormData, FeedbackModalIntegration, IntegrationFn } from '@sentry/types'; +import type { + CreateDialogProps, + FeedbackDialog, + FeedbackFormData, + FeedbackModalIntegration, + IntegrationFn, +} from '@sentry/types'; import { h, render } from 'preact'; import { DOCUMENT } from '../constants'; import { Dialog } from './components/Dialog'; @@ -19,7 +25,7 @@ export const feedbackModalIntegration = ((): FeedbackModalIntegration => { const style = createDialogStyles(options); let originalOverflow = ''; - const dialog = { + const dialog: FeedbackDialog = { get el() { return el; }, From 70167c1573479fd4fb3a14847fe45b02fe5e6711 Mon Sep 17 00:00:00 2001 From: Ryan Albrecht Date: Thu, 9 May 2024 11:05:55 -0400 Subject: [PATCH 2/8] update to include some more changed field --- MIGRATION.md | 2 +- docs/migration/feedback.md | 76 ++++++++++++++++++++++++++++---------- 2 files changed, 58 insertions(+), 20 deletions(-) diff --git a/MIGRATION.md b/MIGRATION.md index 7f576e951e0f..d12ed394b05a 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -1285,7 +1285,7 @@ export class HeaderComponent { # Upgrading Sentry Feedback (beta, 7.x to 8.0) -For details on upgrading Feedback in its beta phase, please view the +For details on upgrading Feedback from the beta 7.x to the release 8.x version, please view the [dedicated Feedback MIGRATION docs](./docs/migration/feedback.md). --- diff --git a/docs/migration/feedback.md b/docs/migration/feedback.md index b00531c6aac9..3b5b1ab0020e 100644 --- a/docs/migration/feedback.md +++ b/docs/migration/feedback.md @@ -1,24 +1,27 @@ # End of Feedback Beta -Sentry Feedback is now out of Beta. This means that the usual stabilty guarantees apply. +With the release of 8.0.0 Sentry Feedback is now out of Beta. This means that the usual stabilty guarantees apply. + +Feedback 8.0.0 requires server version 24.4.2 and above. Because of experimentation and rapid iteration, during the Beta period some bugs and problems came up which have since been fixed/improved, as well as API's which have been streamlined and chanaged. -Below you can find a list of relevant feedback changes and issues that have been made from v7.x to v8.0.0-beta.2 +Below you can find a list of relevant feedback changes and issues that have been made from 7.x to 8.0.0. -## Upgrading Feedback from 7.x to 8.0.0-beta.2 +## Upgrading Feedback from 7.x to 8.0.0 We have streamlined the interface for interacting with the Feedback widget. Below is a list of public functions that -existed in v7.x and a description of how they have changed in v8. +existed in 7.x and a description of how they have changed in v8. -| Method Name | Replacement | Notes | -| ------------------------- | -------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `feedback.getWidget()` | `const widget = feedback.createWidget(); widget.appendToDom()` | The SDK no longer maintains a stack of form instances. If you call `createWidget()` a new form will be inserted into the DOM and a Promise returned allowed you control over the lifecycle of the widget. | -| `feedback.attachTo()` | `const unsubscribe = feedback.attachTo(myButtonElem)` | The `attachTo()` method in will create an onClick event listener to your html element that calls appendToDom() and open(). It returns a callback to remove the event listener. | -| `feedback.openDialog()` | `widget.open()` | Make the form inside the widget visible. | -| `feedback.closeDialog()` | `widget.close()` | Make the form inside the widget hidden in the page. Success/Error messages will still be rendered and will hide themselves if the form was recently submitted. | -| `feedback.removeWidget()` | `widget.removeFromDom()` | Remove the form and widget instance from the page. After calling this `widget.el.parentNode` will be set to null. | +| Method Name | Replacement | Notes | +| ------------------------- | -------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `feedback.getWidget()` | `const widget = feedback.createWidget(); widget.appendToDom()` | The SDK no longer maintains a stack of form instances. If you call `createWidget()` a new widget will be inserted into the DOM and a `ActorComponent` returned allowed you control over the lifecycle of the widget. | +| - | `const form = await feedback.createForm()` | A new method `createForm()`, used internally by `createWidget()` and `attachTo()`, returns a `Promise` so you can control showing and hiding of the feedback form directly. | +| `feedback.attachTo()` | `const unsubscribe = feedback.attachTo(myButtonElem)` | The `attachTo()` method in will create an onClick event listener to your html element that calls appendToDom() and open(). It returns a callback to remove the event listener. | +| `feedback.openDialog()` | `widget.open()` | Make the form inside the widget visible. | +| `feedback.closeDialog()` | `widget.close()` | Make the form inside the widget hidden in the page. Success/Error messages will still be rendered and will hide themselves if the form was recently submitted. | +| `feedback.removeWidget()` | `widget.removeFromDom()` | Remove the form and widget instance from the page. After calling this `widget.el.parentNode` will be set to null. | ### API Examples @@ -73,15 +76,15 @@ the event listeners. #### Manually managing show/hide state and adding/remove the form from the DOM. -You can manually add/remove the form from the page, and control when it's shown/hidden by calling the lifecycle methods -directly. +You can manually add/remove the widget from the page, and control when it's shown/hidden by calling the lifecycle +methods directly. For example, `attachTo()` is a convenience wrapper over the lifecycle methods. You could re-implement it like this: ```javascript function attachTo(button: HTMLElement) { - const handleClick = async () => { - const widget = await feedbackInstance.getWidget({ + const handleClick = () => { + const widget = feedbackInstance.createWidget({ onFormClose: () => { widget.close(); }, @@ -100,11 +103,46 @@ function attachTo(button: HTMLElement) { } ``` +Alternativly you can call `createForm()` and control the form directly: + +```javascript +const formPromise = feedbackInstance.createForm(); + +// Automatically insert and open the dialog after 5 seconds +// then close and remove it after another 10 seconds +setTimeout(() => { + const form = await formPromise; + form.appendToDom(); + form.open(); + + setTimeout(() => { + form.close(); + form.removeFromDom(); + }, 10_000); +}, 5_000); +``` + ## Config changes in v8 Added new configuration values -| Field Name | Type | Description | -| --------------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| showScreenshot | boolean | Default: false. Enable this option to allow a user to choose to include a screenshot of the webpage with their feedback submission. The user option is not supported on mobile browsers and will have no effect there. | -| onFormSubmitted | () => void | Callback whenever the feedback form is submitted, but before success/failure is returned. | +| Field Name | Type | Description | +| ------------------ | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `enableScreenshot` | `boolean` | Default: true. Enable this option to allow a user to choose to include a screenshot of the webpage with their feedback submission. The user option is not supported on mobile browsers and will have no effect there. | +| `onFormSubmitted` | `() => void` | Callback whenever the feedback form is submitted, but before success/failure is returned. | + +Some new configuration values have been added & changed so you can tweak instructions, or translate labels for your +users. + +| Old Name | New Name | Default Value | +| ------------- | ----------------------- | ------------------------------ | +| `buttonLabel` | `triggerLabel` | `"Report a bug"` | +| - | `isRequiredLabel` | `"(required)"` | +| - | `addScreenshotLabel` | `"Add a screenshot"` | +| - | `removeScreenshotLabel` | `"Remove Screenshot"` | +| - | `confirmButtonLabel` | `"Confirm"` | +| - | `successMessageText` | `"Thank you for your report!"` | + +Some theme/color configuration values have been added & changed to make it easier to style the widget. Refer to the +[Feedback Configuration docs](https://docs.sentry.io/platforms/javascript/user-feedback/configuration/#user-feedback-widget) +to see the supported fields and their default values. From 814ae0e83d04758644ba5e348cf9c3c93b6c21a1 Mon Sep 17 00:00:00 2001 From: Ryan Albrecht Date: Thu, 9 May 2024 13:21:40 -0400 Subject: [PATCH 3/8] Remove extra changes from migration docs pr --- packages/feedback/src/modal/integration.tsx | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/packages/feedback/src/modal/integration.tsx b/packages/feedback/src/modal/integration.tsx index a92b9cad356c..cf50b66274bb 100644 --- a/packages/feedback/src/modal/integration.tsx +++ b/packages/feedback/src/modal/integration.tsx @@ -1,11 +1,5 @@ import { getCurrentScope, getGlobalScope, getIsolationScope } from '@sentry/core'; -import type { - CreateDialogProps, - FeedbackDialog, - FeedbackFormData, - FeedbackModalIntegration, - IntegrationFn, -} from '@sentry/types'; +import type { CreateDialogProps, FeedbackFormData, FeedbackModalIntegration, IntegrationFn } from '@sentry/types'; import { h, render } from 'preact'; import { DOCUMENT } from '../constants'; import { Dialog } from './components/Dialog'; @@ -25,7 +19,7 @@ export const feedbackModalIntegration = ((): FeedbackModalIntegration => { const style = createDialogStyles(options); let originalOverflow = ''; - const dialog: FeedbackDialog = { + const dialog = { get el() { return el; }, From c4a45ee1d798b3dfe31b84e9ccc4f08735a631f4 Mon Sep 17 00:00:00 2001 From: Ryan Albrecht Date: Thu, 9 May 2024 11:26:12 -0700 Subject: [PATCH 4/8] Apply suggestions from code review Co-authored-by: Catherine Lee <55311782+c298lee@users.noreply.github.com> Co-authored-by: Billy Vong --- docs/migration/feedback.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/docs/migration/feedback.md b/docs/migration/feedback.md index 3b5b1ab0020e..32d8ac1ddb02 100644 --- a/docs/migration/feedback.md +++ b/docs/migration/feedback.md @@ -1,11 +1,11 @@ # End of Feedback Beta -With the release of 8.0.0 Sentry Feedback is now out of Beta. This means that the usual stabilty guarantees apply. +With the release of 8.0.0, Sentry Feedback is now out of Beta. This means that the usual stabilty guarantees apply. Feedback 8.0.0 requires server version 24.4.2 and above. Because of experimentation and rapid iteration, during the Beta period some bugs and problems came up which have since -been fixed/improved, as well as API's which have been streamlined and chanaged. +been fixed/improved, as well as API's which have been streamlined and changed. Below you can find a list of relevant feedback changes and issues that have been made from 7.x to 8.0.0. @@ -16,9 +16,9 @@ existed in 7.x and a description of how they have changed in v8. | Method Name | Replacement | Notes | | ------------------------- | -------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `feedback.getWidget()` | `const widget = feedback.createWidget(); widget.appendToDom()` | The SDK no longer maintains a stack of form instances. If you call `createWidget()` a new widget will be inserted into the DOM and a `ActorComponent` returned allowed you control over the lifecycle of the widget. | +| `feedback.getWidget()` | `const widget = feedback.createWidget(); widget.appendToDom()` | The SDK no longer maintains a stack of form instances. If you call `createWidget()` a new widget will be inserted into the DOM and an `ActorComponent` returned allows you control over the lifecycle of the widget. | | - | `const form = await feedback.createForm()` | A new method `createForm()`, used internally by `createWidget()` and `attachTo()`, returns a `Promise` so you can control showing and hiding of the feedback form directly. | -| `feedback.attachTo()` | `const unsubscribe = feedback.attachTo(myButtonElem)` | The `attachTo()` method in will create an onClick event listener to your html element that calls appendToDom() and open(). It returns a callback to remove the event listener. | +| `feedback.attachTo()` | `const unsubscribe = feedback.attachTo(myButtonElem)` | The `attachTo()` method will create an onClick event listener to your html element that calls `appendToDom()` and `open()`. It returns a callback to remove the event listener. | | `feedback.openDialog()` | `widget.open()` | Make the form inside the widget visible. | | `feedback.closeDialog()` | `widget.close()` | Make the form inside the widget hidden in the page. Success/Error messages will still be rendered and will hide themselves if the form was recently submitted. | | `feedback.removeWidget()` | `widget.removeFromDom()` | Remove the form and widget instance from the page. After calling this `widget.el.parentNode` will be set to null. | @@ -59,7 +59,7 @@ Sentry.init({ }); // Option 2: Get a reference from the SDK client -const feedbackInstance = getClient()?.getIntegrationByName('Feedback'); +const feedbackInstance = getFeedback(); ``` Next, call `attachTo()` @@ -103,7 +103,7 @@ function attachTo(button: HTMLElement) { } ``` -Alternativly you can call `createForm()` and control the form directly: +Alternatively you can call `createForm()` and control the form directly: ```javascript const formPromise = feedbackInstance.createForm(); @@ -137,7 +137,7 @@ users. | Old Name | New Name | Default Value | | ------------- | ----------------------- | ------------------------------ | | `buttonLabel` | `triggerLabel` | `"Report a bug"` | -| - | `isRequiredLabel` | `"(required)"` | +| `isRequiredText` | `isRequiredLabel` | `"(required)"` | | - | `addScreenshotLabel` | `"Add a screenshot"` | | - | `removeScreenshotLabel` | `"Remove Screenshot"` | | - | `confirmButtonLabel` | `"Confirm"` | From f52ceb6b89e04846faf4947f50307d15808ca848 Mon Sep 17 00:00:00 2001 From: Ryan Albrecht Date: Thu, 9 May 2024 14:36:49 -0400 Subject: [PATCH 5/8] also document getFeedback() --- docs/migration/feedback.md | 33 +++++++++++++++++---------------- 1 file changed, 17 insertions(+), 16 deletions(-) diff --git a/docs/migration/feedback.md b/docs/migration/feedback.md index 32d8ac1ddb02..ca75ac54330c 100644 --- a/docs/migration/feedback.md +++ b/docs/migration/feedback.md @@ -14,14 +14,15 @@ Below you can find a list of relevant feedback changes and issues that have been We have streamlined the interface for interacting with the Feedback widget. Below is a list of public functions that existed in 7.x and a description of how they have changed in v8. -| Method Name | Replacement | Notes | -| ------------------------- | -------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `feedback.getWidget()` | `const widget = feedback.createWidget(); widget.appendToDom()` | The SDK no longer maintains a stack of form instances. If you call `createWidget()` a new widget will be inserted into the DOM and an `ActorComponent` returned allows you control over the lifecycle of the widget. | -| - | `const form = await feedback.createForm()` | A new method `createForm()`, used internally by `createWidget()` and `attachTo()`, returns a `Promise` so you can control showing and hiding of the feedback form directly. | -| `feedback.attachTo()` | `const unsubscribe = feedback.attachTo(myButtonElem)` | The `attachTo()` method will create an onClick event listener to your html element that calls `appendToDom()` and `open()`. It returns a callback to remove the event listener. | -| `feedback.openDialog()` | `widget.open()` | Make the form inside the widget visible. | -| `feedback.closeDialog()` | `widget.close()` | Make the form inside the widget hidden in the page. Success/Error messages will still be rendered and will hide themselves if the form was recently submitted. | -| `feedback.removeWidget()` | `widget.removeFromDom()` | Remove the form and widget instance from the page. After calling this `widget.el.parentNode` will be set to null. | +| Method Name | Replacement | Notes | +| ------------------------------------------------------------- | -------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `Sentry.getClient()?.getIntegration(Feedback)` | `const feedback = Sentry.getFeedback()` | Get a type-safe reference to the configured feedbackIntegration instance. | +| `feedback.getWidget()` | `const widget = feedback.createWidget(); widget.appendToDom()` | The SDK no longer maintains a stack of form instances. If you call `createWidget()` a new widget will be inserted into the DOM and a `ActorComponent` returned allowed you control over the lifecycle of the widget. | +| `feedback.openDialog()` | `widget.open()` | Make the form inside the widget visible. | +| `feedback.closeDialog()` | `widget.close()` | Make the form inside the widget hidden in the page. Success/Error messages will still be rendered and will hide themselves if the form was recently submitted. | +| `feedback.removeWidget()` | `widget.removeFromDom()` | Remove the form and widget instance from the page. After calling this `widget.el.parentNode` will be set to null. | +| `feedback.attachTo()` | `const unsubscribe = feedback.attachTo(myButtonElem)` | The `attachTo()` method in will create an onClick event listener to your html element that calls appendToDom() and open(). It returns a callback to remove the event listener. | +| - | `const form = await feedback.createForm()` | A new method `createForm()`, used internally by `createWidget()` and `attachTo()`, returns a `Promise` so you can control showing and hiding of the feedback form directly. | ### API Examples @@ -134,14 +135,14 @@ Added new configuration values Some new configuration values have been added & changed so you can tweak instructions, or translate labels for your users. -| Old Name | New Name | Default Value | -| ------------- | ----------------------- | ------------------------------ | -| `buttonLabel` | `triggerLabel` | `"Report a bug"` | -| `isRequiredText` | `isRequiredLabel` | `"(required)"` | -| - | `addScreenshotLabel` | `"Add a screenshot"` | -| - | `removeScreenshotLabel` | `"Remove Screenshot"` | -| - | `confirmButtonLabel` | `"Confirm"` | -| - | `successMessageText` | `"Thank you for your report!"` | +| Old Name | New Name | Default Value | +| ---------------- | ----------------------- | ------------------------------ | +| `buttonLabel` | `triggerLabel` | `"Report a bug"` | +| `isRequiredText` | `isRequiredLabel` | `"(required)"` | +| - | `addScreenshotLabel` | `"Add a screenshot"` | +| - | `removeScreenshotLabel` | `"Remove Screenshot"` | +| - | `confirmButtonLabel` | `"Confirm"` | +| - | `successMessageText` | `"Thank you for your report!"` | Some theme/color configuration values have been added & changed to make it easier to style the widget. Refer to the [Feedback Configuration docs](https://docs.sentry.io/platforms/javascript/user-feedback/configuration/#user-feedback-widget) From 82ebf751a7a21057ec4bdcef65b22dfb59dcbed3 Mon Sep 17 00:00:00 2001 From: Ryan Albrecht Date: Fri, 10 May 2024 07:39:23 -0700 Subject: [PATCH 6/8] Update docs/migration/feedback.md Co-authored-by: Catherine Lee <55311782+c298lee@users.noreply.github.com> --- docs/migration/feedback.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/migration/feedback.md b/docs/migration/feedback.md index ca75ac54330c..f69ac580f234 100644 --- a/docs/migration/feedback.md +++ b/docs/migration/feedback.md @@ -17,7 +17,7 @@ existed in 7.x and a description of how they have changed in v8. | Method Name | Replacement | Notes | | ------------------------------------------------------------- | -------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `Sentry.getClient()?.getIntegration(Feedback)` | `const feedback = Sentry.getFeedback()` | Get a type-safe reference to the configured feedbackIntegration instance. | -| `feedback.getWidget()` | `const widget = feedback.createWidget(); widget.appendToDom()` | The SDK no longer maintains a stack of form instances. If you call `createWidget()` a new widget will be inserted into the DOM and a `ActorComponent` returned allowed you control over the lifecycle of the widget. | +| `feedback.getWidget()` | `const widget = feedback.createWidget(); widget.appendToDom()` | The SDK no longer maintains a stack of form instances. If you call `createWidget()` a new widget will be inserted into the DOM and an `ActorComponent` returned allows you control over the lifecycle of the widget. | | `feedback.openDialog()` | `widget.open()` | Make the form inside the widget visible. | | `feedback.closeDialog()` | `widget.close()` | Make the form inside the widget hidden in the page. Success/Error messages will still be rendered and will hide themselves if the form was recently submitted. | | `feedback.removeWidget()` | `widget.removeFromDom()` | Remove the form and widget instance from the page. After calling this `widget.el.parentNode` will be set to null. | From 5298edaafe119a36468f117f69808163e20d9b7f Mon Sep 17 00:00:00 2001 From: Ryan Albrecht Date: Fri, 10 May 2024 07:39:45 -0700 Subject: [PATCH 7/8] Apply suggestions from code review Co-authored-by: Catherine Lee <55311782+c298lee@users.noreply.github.com> --- docs/migration/feedback.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/migration/feedback.md b/docs/migration/feedback.md index f69ac580f234..43308ba127ff 100644 --- a/docs/migration/feedback.md +++ b/docs/migration/feedback.md @@ -21,7 +21,7 @@ existed in 7.x and a description of how they have changed in v8. | `feedback.openDialog()` | `widget.open()` | Make the form inside the widget visible. | | `feedback.closeDialog()` | `widget.close()` | Make the form inside the widget hidden in the page. Success/Error messages will still be rendered and will hide themselves if the form was recently submitted. | | `feedback.removeWidget()` | `widget.removeFromDom()` | Remove the form and widget instance from the page. After calling this `widget.el.parentNode` will be set to null. | -| `feedback.attachTo()` | `const unsubscribe = feedback.attachTo(myButtonElem)` | The `attachTo()` method in will create an onClick event listener to your html element that calls appendToDom() and open(). It returns a callback to remove the event listener. | +| `feedback.attachTo()` | `const unsubscribe = feedback.attachTo(myButtonElem)` | The `attachTo()` method will create an onClick event listener to your html element that calls `appendToDom()` and `open()`. It returns a callback to remove the event listener. | | - | `const form = await feedback.createForm()` | A new method `createForm()`, used internally by `createWidget()` and `attachTo()`, returns a `Promise` so you can control showing and hiding of the feedback form directly. | ### API Examples @@ -43,7 +43,7 @@ Sentry.init({ }); ``` -`autoInject: true,` is the default value. +`autoInject: true` is the default value. #### Attaching feedback to your own button From 994708c7c7983e511c0ec43c9403b4e35d5883d7 Mon Sep 17 00:00:00 2001 From: Ryan Albrecht Date: Fri, 10 May 2024 10:46:40 -0400 Subject: [PATCH 8/8] linting --- docs/migration/feedback.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/migration/feedback.md b/docs/migration/feedback.md index 43308ba127ff..6d9c189df1c2 100644 --- a/docs/migration/feedback.md +++ b/docs/migration/feedback.md @@ -21,7 +21,7 @@ existed in 7.x and a description of how they have changed in v8. | `feedback.openDialog()` | `widget.open()` | Make the form inside the widget visible. | | `feedback.closeDialog()` | `widget.close()` | Make the form inside the widget hidden in the page. Success/Error messages will still be rendered and will hide themselves if the form was recently submitted. | | `feedback.removeWidget()` | `widget.removeFromDom()` | Remove the form and widget instance from the page. After calling this `widget.el.parentNode` will be set to null. | -| `feedback.attachTo()` | `const unsubscribe = feedback.attachTo(myButtonElem)` | The `attachTo()` method will create an onClick event listener to your html element that calls `appendToDom()` and `open()`. It returns a callback to remove the event listener. | +| `feedback.attachTo()` | `const unsubscribe = feedback.attachTo(myButtonElem)` | The `attachTo()` method will create an onClick event listener to your html element that calls `appendToDom()` and `open()`. It returns a callback to remove the event listener. | | - | `const form = await feedback.createForm()` | A new method `createForm()`, used internally by `createWidget()` and `attachTo()`, returns a `Promise` so you can control showing and hiding of the feedback form directly. | ### API Examples