feat(feedback): Add openDialog and closeDialog onto integration interface#9464

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
billyvg merged 4 commits into from
Nov 7, 2023
Merged

feat(feedback): Add openDialog and closeDialog onto integration interface #9464

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
cbe64d4
feat(feedback): Add `openDialog` and `closeDialog` onto integration i…
billyvg Nov 7, 2023
804330b
fixes + add tests
billyvg Nov 7, 2023
63f2550
lint
billyvg Nov 7, 2023
047b2bd
remove unused
billyvg Nov 7, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
102 changes: 81 additions & 21 deletions packages/feedback/src/integration.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -16,7 +16,7 @@ import {
SUBMIT_BUTTON_LABEL,
SUCCESS_MESSAGE_TEXT,
} from './constants';
import type { FeedbackInternalOptions, OptionalFeedbackConfiguration, Widget } from './types';
import type { FeedbackInternalOptions, FeedbackWidget, OptionalFeedbackConfiguration } from './types';
import { mergeOptions } from './util/mergeOptions';
import { createActorStyles } from './widget/Actor.css';
import { createShadowHost } from './widget/createShadowHost';
Expand DownExpand Up@@ -48,12 +48,12 @@ export class Feedback implements Integration {
/**
* Reference to widget element that is created when autoInject is true
*/
private _widget: Widget | null;
private _widget: FeedbackWidget | null;

/**
* List of all widgets that are created from the integration
*/
private _widgets: Set<Widget>;
private _widgets: Set<FeedbackWidget>;

/**
* Reference to the host element where widget is inserted
Expand DownExpand Up@@ -166,15 +166,7 @@ export class Feedback implements Integration {
}

try {
// TODO: This is only here for hot reloading
if (this._host) {
this.remove();
}
const existingFeedback = doc.querySelector(`#${this.options.id}`);
if (existingFeedback) {
existingFeedback.remove();
}
// TODO: End hotloading
this._cleanupWidgetIfExists();

const { autoInject } = this.options;

Expand All@@ -183,20 +175,49 @@ export class Feedback implements Integration {
return;
}

this._widget = this._createWidget(this.options);
this._createWidget(this.options);
} catch (err) {
logger.error(err);
}
}

/**
* Allows user to open the dialog box. Creates a new widget if
* `autoInject` was false, otherwise re-uses the default widget that was
* created during initialization of the integration.
*/
public openDialog(): void {
if (!this._widget) {
this._createWidget({ ...this.options, shouldCreateActor: false });
}

if (!this._widget) {
return;
}

this._widget.openDialog();
}

/**
* Closes the dialog for the default widget, if it exists
*/
public closeDialog(): void {
if (!this._widget) {
// Nothing to do if widget does not exist
return;
}

this._widget.closeDialog();
}

/**
* Adds click listener to attached element to open a feedback dialog
*/
public attachTo(el: Element | string, optionOverrides: OptionalFeedbackConfiguration): Widget | null {
public attachTo(el: Element | string, optionOverrides?: OptionalFeedbackConfiguration): FeedbackWidget | null {
try {
const options = mergeOptions(this.options, optionOverrides);
const options = mergeOptions(this.options, optionOverrides || {});

return this._ensureShadowHost<Widget | null>(options, ({ shadow }) => {
return this._ensureShadowHost<FeedbackWidget | null>(options, ({ shadow }) => {
const targetEl =
typeof el === 'string' ? doc.querySelector(el) : typeof el.addEventListener === 'function' ? el : null;

Expand All@@ -207,6 +228,11 @@ export class Feedback implements Integration {

const widget = createWidget({ shadow, options, attachTo: targetEl });
this._widgets.add(widget);

if (!this._widget) {
this._widget = widget;
}

return widget;
});
} catch (err) {
Expand All@@ -218,9 +244,11 @@ export class Feedback implements Integration {
/**
* Creates a new widget. Accepts partial options to override any options passed to constructor.
*/
public createWidget(optionOverrides: OptionalFeedbackConfiguration): Widget | null {
public createWidget(
optionOverrides?: OptionalFeedbackConfiguration & { shouldCreateActor?: boolean },
): FeedbackWidget | null {
try {
return this._createWidget(mergeOptions(this.options, optionOverrides));
return this._createWidget(mergeOptions(this.options, optionOverrides || {}));
} catch (err) {
logger.error(err);
return null;
Expand All@@ -230,7 +258,7 @@ export class Feedback implements Integration {
/**
* Removes a single widget
*/
public removeWidget(widget: Widget | null | undefined): boolean {
public removeWidget(widget: FeedbackWidget | null | undefined): boolean {
if (!widget) {
return false;
}
Expand All@@ -240,6 +268,12 @@ export class Feedback implements Integration {
widget.removeActor();
widget.removeDialog();
this._widgets.delete(widget);

if (this._widget === widget) {
// TODO: is more clean-up needed? e.g. call remove()
this._widget = null;
}

return true;
}
} catch (err) {
Expand All@@ -249,6 +283,13 @@ export class Feedback implements Integration {
return false;
}

/**
* Returns the default (first-created) widget
*/
public getWidget(): FeedbackWidget | null {
return this._widget;
}

/**
* Removes the Feedback integration (including host, shadow DOM, and all widgets)
*/
Expand All@@ -270,11 +311,25 @@ export class Feedback implements Integration {
this._hasInsertedActorStyles = false;
}

/**
* Clean-up the widget if it already exists in the DOM. This shouldn't happen
* in prod, but can happen in development with hot module reloading.
*/
protected _cleanupWidgetIfExists(): void {
if (this._host) {
this.remove();
}
const existingFeedback = doc.querySelector(`#${this.options.id}`);
if (existingFeedback) {
existingFeedback.remove();
}
}

/**
* Creates a new widget, after ensuring shadow DOM exists
*/
protected _createWidget(options: FeedbackInternalOptions): Widget | null {
return this._ensureShadowHost<Widget>(options, ({ shadow }) => {
protected _createWidget(options: FeedbackInternalOptions & { shouldCreateActor?: boolean }): FeedbackWidget | null {
return this._ensureShadowHost<FeedbackWidget>(options, ({ shadow }) => {
const widget = createWidget({ shadow, options });

if (!this._hasInsertedActorStyles && widget.actor) {
Expand All@@ -283,6 +338,11 @@ export class Feedback implements Integration {
}

this._widgets.add(widget);

if (!this._widget) {
this._widget = widget;
}

return widget;
});
}
Expand Down
4 changes: 2 additions & 2 deletions packages/feedback/src/types/index.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -324,7 +324,7 @@ export interface FeedbackComponent<T extends HTMLElement> {
* - dialog + feedback form
* - shadow root?
*/
export interface Widget {
export interface FeedbackWidget {
actor: ActorComponent | undefined;
dialog: DialogComponent | undefined;

Expand All@@ -333,6 +333,6 @@ export interface Widget {
removeActor: () => void;

openDialog: () => void;
hideDialog: () => void;
closeDialog: () => void;
removeDialog: () => void;
}
42 changes: 31 additions & 11 deletions packages/feedback/src/widget/createWidget.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
import { getCurrentHub } from '@sentry/core';
import { logger } from '@sentry/utils';

import type { FeedbackFormData, FeedbackInternalOptions, Widget } from '../types';
import type { FeedbackFormData, FeedbackInternalOptions, FeedbackWidget } from '../types';
import { handleFeedbackSubmit } from '../util/handleFeedbackSubmit';
import type { ActorComponent } from './Actor';
import { Actor } from './Actor';
Expand All@@ -10,15 +10,35 @@ import { Dialog } from './Dialog';
import { SuccessMessage } from './SuccessMessage';

interface CreateWidgetParams {
/**
* Shadow DOM to append to
*/
shadow: ShadowRoot;
options: FeedbackInternalOptions;

/**
* Feedback integration options
*/
options: FeedbackInternalOptions & { shouldCreateActor?: boolean };

/**
* An element to attach to, that when clicked, will open a dialog
*/
attachTo?: Element;

/**
* If false, will not create an actor
*/
shouldCreateActor?: boolean;
}

/**
* Creates a new widget. Returns public methods that control widget behavior.
*/
export function createWidget({ shadow, options, attachTo }: CreateWidgetParams): Widget {
export function createWidget({
shadow,
options: { shouldCreateActor = true, ...options },
attachTo,
}: CreateWidgetParams): FeedbackWidget {
let actor: ActorComponent | undefined;
let dialog: DialogComponent | undefined;
let isDialogOpen: boolean = false;
Expand DownExpand Up@@ -159,7 +179,7 @@ export function createWidget({ shadow, options, attachTo }: CreateWidgetParams):
}
},
onCancel: () => {
hideDialog();
closeDialog();
showActor();
},
onSubmit: _handleFeedbackSubmit,
Expand All@@ -184,9 +204,9 @@ export function createWidget({ shadow, options, attachTo }: CreateWidgetParams):
}

/**
* Hides the dialog
* Closes the dialog
*/
function hideDialog(): void {
function closeDialog(): void {
if (dialog) {
dialog.close();
isDialogOpen = false;
Expand All@@ -202,7 +222,7 @@ export function createWidget({ shadow, options, attachTo }: CreateWidgetParams):
*/
function removeDialog(): void {
if (dialog) {
hideDialog();
closeDialog();
const dialogEl = dialog.el;
dialogEl && dialogEl.remove();
dialog = undefined;
Expand All@@ -226,11 +246,11 @@ export function createWidget({ shadow, options, attachTo }: CreateWidgetParams):
}
}

if (!attachTo) {
if (attachTo) {
attachTo.addEventListener('click', handleActorClick);
} else if (shouldCreateActor) {
actor = Actor({ buttonLabel: options.buttonLabel, onClick: handleActorClick });
actor.el && shadow.appendChild(actor.el);
} else {
attachTo.addEventListener('click', handleActorClick);
}

return {
Expand All@@ -246,7 +266,7 @@ export function createWidget({ shadow, options, attachTo }: CreateWidgetParams):
removeActor,

openDialog,
hideDialog,
closeDialog,
removeDialog,
};
}
Loading
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
feat(feedback): Add openDialog and closeDialog onto integration interface#9464

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

billyvg
merged 4 commits into

from

Nov 7, 2023
 Merged


feat(feedback): Add openDialog and closeDialog onto integration interface
#9464
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


4 commits


Select commit
Hold shift + click to select a range
cbe64d4

feat(feedback): Add `openDialog` and `closeDialog` onto integration i…


billyvg Nov 7, 2023
804330b

fixes + add tests


billyvg Nov 7, 2023
63f2550

lint


billyvg Nov 7, 2023
047b2bd

remove unused


billyvg Nov 7, 2023

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


102 changes: 81 additions & 21 deletions
packages/feedback/src/integration.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -16,7 +16,7 @@ import {
 SUBMIT_BUTTON_LABEL,
 SUCCESS_MESSAGE_TEXT,
} from './constants';
import type { FeedbackInternalOptions, OptionalFeedbackConfiguration, Widget } from './types';
import type { FeedbackInternalOptions, FeedbackWidget, OptionalFeedbackConfiguration } from './types';
import { mergeOptions } from './util/mergeOptions';
import { createActorStyles } from './widget/Actor.css';
import { createShadowHost } from './widget/createShadowHost';
Expand DownExpand Up@@ -48,12 +48,12 @@ export class Feedback implements Integration {
 /**
 * Reference to widget element that is created when autoInject is true
 */
 private _widget: Widget | null;
 private _widget: FeedbackWidget | null;

 /**
 * List of all widgets that are created from the integration
 */
 private _widgets: Set<Widget>;
 private _widgets: Set<FeedbackWidget>;

 /**
 * Reference to the host element where widget is inserted
Expand DownExpand Up@@ -166,15 +166,7 @@ export class Feedback implements Integration {
 }

 try {
 // TODO: This is only here for hot reloading
 if (this._host) {
 this.remove();
 }
 const existingFeedback = doc.querySelector(`#${this.options.id}`);
 if (existingFeedback) {
 existingFeedback.remove();
 }
 // TODO: End hotloading
 this._cleanupWidgetIfExists();

 const { autoInject } = this.options;

Expand All@@ -183,20 +175,49 @@ export class Feedback implements Integration {
 return;
 }

 this._widget = this._createWidget(this.options);
 this._createWidget(this.options);
 } catch (err) {
 logger.error(err);
 }
 }

 /**
 * Allows user to open the dialog box. Creates a new widget if
 * `autoInject` was false, otherwise re-uses the default widget that was
 * created during initialization of the integration.
 */
 public openDialog(): void {
 if (!this._widget) {
 this._createWidget({ ...this.options, shouldCreateActor: false });
 }

 if (!this._widget) {
 return;
 }

 this._widget.openDialog();
 }

 /**
 * Closes the dialog for the default widget, if it exists
 */
 public closeDialog(): void {
 if (!this._widget) {
 // Nothing to do if widget does not exist
 return;
 }

 this._widget.closeDialog();
 }

 /**
 * Adds click listener to attached element to open a feedback dialog
 */
 public attachTo(el: Element | string, optionOverrides: OptionalFeedbackConfiguration): Widget | null {
 public attachTo(el: Element | string, optionOverrides?: OptionalFeedbackConfiguration): FeedbackWidget | null {
 try {
 const options = mergeOptions(this.options, optionOverrides);
 const options = mergeOptions(this.options, optionOverrides || {});

 return this._ensureShadowHost<Widget | null>(options, ({ shadow }) => {
 return this._ensureShadowHost<FeedbackWidget | null>(options, ({ shadow }) => {
 const targetEl =
 typeof el === 'string' ? doc.querySelector(el) : typeof el.addEventListener === 'function' ? el : null;

Expand All@@ -207,6 +228,11 @@ export class Feedback implements Integration {

 const widget = createWidget({ shadow, options, attachTo: targetEl });
 this._widgets.add(widget);

 if (!this._widget) {
 this._widget = widget;
 }

 return widget;
 });
 } catch (err) {
Expand All@@ -218,9 +244,11 @@ export class Feedback implements Integration {
 /**
 * Creates a new widget. Accepts partial options to override any options passed to constructor.
 */
 public createWidget(optionOverrides: OptionalFeedbackConfiguration): Widget | null {
 public createWidget(
 optionOverrides?: OptionalFeedbackConfiguration & { shouldCreateActor?: boolean },
 ): FeedbackWidget | null {
 try {
 return this._createWidget(mergeOptions(this.options, optionOverrides));
 return this._createWidget(mergeOptions(this.options, optionOverrides || {}));
 } catch (err) {
 logger.error(err);
 return null;
Expand All@@ -230,7 +258,7 @@ export class Feedback implements Integration {
 /**
 * Removes a single widget
 */
 public removeWidget(widget: Widget | null | undefined): boolean {
 public removeWidget(widget: FeedbackWidget | null | undefined): boolean {
 if (!widget) {
 return false;
 }
Expand All@@ -240,6 +268,12 @@ export class Feedback implements Integration {
 widget.removeActor();
 widget.removeDialog();
 this._widgets.delete(widget);

 if (this._widget === widget) {
 // TODO: is more clean-up needed? e.g. call remove()
 this._widget = null;
 }

 return true;
 }
 } catch (err) {
Expand All@@ -249,6 +283,13 @@ export class Feedback implements Integration {
 return false;
 }

 /**
 * Returns the default (first-created) widget
 */
 public getWidget(): FeedbackWidget | null {
 return this._widget;
 }

 /**
 * Removes the Feedback integration (including host, shadow DOM, and all widgets)
 */
Expand All@@ -270,11 +311,25 @@ export class Feedback implements Integration {
 this._hasInsertedActorStyles = false;
 }

 /**
 * Clean-up the widget if it already exists in the DOM. This shouldn't happen
 * in prod, but can happen in development with hot module reloading.
 */
 protected _cleanupWidgetIfExists(): void {
 if (this._host) {
 this.remove();
 }
 const existingFeedback = doc.querySelector(`#${this.options.id}`);
 if (existingFeedback) {
 existingFeedback.remove();
 }
 }

 /**
 * Creates a new widget, after ensuring shadow DOM exists
 */
 protected _createWidget(options: FeedbackInternalOptions): Widget | null {
 return this._ensureShadowHost<Widget>(options, ({ shadow }) => {
 protected _createWidget(options: FeedbackInternalOptions & { shouldCreateActor?: boolean }): FeedbackWidget | null {
 return this._ensureShadowHost<FeedbackWidget>(options, ({ shadow }) => {
 const widget = createWidget({ shadow, options });

 if (!this._hasInsertedActorStyles && widget.actor) {
Expand All@@ -283,6 +338,11 @@ export class Feedback implements Integration {
 }

 this._widgets.add(widget);

 if (!this._widget) {
 this._widget = widget;
 }

 return widget;
 });
 }
Expand Down

4 changes: 2 additions & 2 deletions
packages/feedback/src/types/index.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -324,7 +324,7 @@ export interface FeedbackComponent<T extends HTMLElement> {
 * - dialog + feedback form
 * - shadow root?
 */
export interface Widget {
export interface FeedbackWidget {
 actor: ActorComponent | undefined;
 dialog: DialogComponent | undefined;

Expand All@@ -333,6 +333,6 @@ export interface Widget {
 removeActor: () => void;

 openDialog: () => void;
hideDialog: () => void;
closeDialog: () => void;
 removeDialog: () => void;
}

42 changes: 31 additions & 11 deletions
packages/feedback/src/widget/createWidget.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
import { getCurrentHub } from '@sentry/core';
import { logger } from '@sentry/utils';

import type { FeedbackFormData, FeedbackInternalOptions, Widget } from '../types';
import type { FeedbackFormData, FeedbackInternalOptions, FeedbackWidget } from '../types';
import { handleFeedbackSubmit } from '../util/handleFeedbackSubmit';
import type { ActorComponent } from './Actor';
import { Actor } from './Actor';
Expand All@@ -10,15 +10,35 @@ import { Dialog } from './Dialog';
import { SuccessMessage } from './SuccessMessage';

interface CreateWidgetParams {
 /**
 * Shadow DOM to append to
 */
 shadow: ShadowRoot;
 options: FeedbackInternalOptions;

 /**
 * Feedback integration options
 */
 options: FeedbackInternalOptions & { shouldCreateActor?: boolean };

 /**
 * An element to attach to, that when clicked, will open a dialog
 */
 attachTo?: Element;

 /**
 * If false, will not create an actor
 */
 shouldCreateActor?: boolean;
}

/**
 * Creates a new widget. Returns public methods that control widget behavior.
 */
export function createWidget({ shadow, options, attachTo }: CreateWidgetParams): Widget {
export function createWidget({
 shadow,
 options: { shouldCreateActor = true, ...options },
 attachTo,
}: CreateWidgetParams): FeedbackWidget {
 let actor: ActorComponent | undefined;
 let dialog: DialogComponent | undefined;
 let isDialogOpen: boolean = false;
Expand DownExpand Up@@ -159,7 +179,7 @@ export function createWidget({ shadow, options, attachTo }: CreateWidgetParams):
 }
 },
 onCancel: () => {
hideDialog();
closeDialog();
 showActor();
 },
 onSubmit: _handleFeedbackSubmit,
Expand All@@ -184,9 +204,9 @@ export function createWidget({ shadow, options, attachTo }: CreateWidgetParams):
 }

 /**
 * Hides the dialog
 * Closes the dialog
 */
 function hideDialog(): void {
 function closeDialog(): void {
 if (dialog) {
 dialog.close();
 isDialogOpen = false;
Expand All@@ -202,7 +222,7 @@ export function createWidget({ shadow, options, attachTo }: CreateWidgetParams):
 */
 function removeDialog(): void {
 if (dialog) {
hideDialog();
closeDialog();
 const dialogEl = dialog.el;
 dialogEl && dialogEl.remove();
 dialog = undefined;
Expand All@@ -226,11 +246,11 @@ export function createWidget({ shadow, options, attachTo }: CreateWidgetParams):
 }
 }

 if (!attachTo) {
 if (attachTo) {
 attachTo.addEventListener('click', handleActorClick);
 } else if (shouldCreateActor) {
 actor = Actor({ buttonLabel: options.buttonLabel, onClick: handleActorClick });
 actor.el && shadow.appendChild(actor.el);
 } else {
 attachTo.addEventListener('click', handleActorClick);
 }

 return {
Expand All@@ -246,7 +266,7 @@ export function createWidget({ shadow, options, attachTo }: CreateWidgetParams):
 removeActor,

 openDialog,
hideDialog,
closeDialog,
 removeDialog,
 };
}
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
feat(feedback): Add openDialog and closeDialog onto integration interface#9464

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

billyvg
merged 4 commits into

from

Nov 7, 2023
 Merged


feat(feedback): Add openDialog and closeDialog onto integration interface
#9464
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


4 commits


Select commit
Hold shift + click to select a range
cbe64d4

feat(feedback): Add `openDialog` and `closeDialog` onto integration i…


billyvg Nov 7, 2023
804330b

fixes + add tests


billyvg Nov 7, 2023
63f2550

lint


billyvg Nov 7, 2023
047b2bd

remove unused


billyvg Nov 7, 2023

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


102 changes: 81 additions & 21 deletions
packages/feedback/src/integration.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -16,7 +16,7 @@ import {
 SUBMIT_BUTTON_LABEL,
 SUCCESS_MESSAGE_TEXT,
} from './constants';
import type { FeedbackInternalOptions, OptionalFeedbackConfiguration, Widget } from './types';
import type { FeedbackInternalOptions, FeedbackWidget, OptionalFeedbackConfiguration } from './types';
import { mergeOptions } from './util/mergeOptions';
import { createActorStyles } from './widget/Actor.css';
import { createShadowHost } from './widget/createShadowHost';
Expand DownExpand Up@@ -48,12 +48,12 @@ export class Feedback implements Integration {
 /**
 * Reference to widget element that is created when autoInject is true
 */
 private _widget: Widget | null;
 private _widget: FeedbackWidget | null;

 /**
 * List of all widgets that are created from the integration
 */
 private _widgets: Set<Widget>;
 private _widgets: Set<FeedbackWidget>;

 /**
 * Reference to the host element where widget is inserted
Expand DownExpand Up@@ -166,15 +166,7 @@ export class Feedback implements Integration {
 }

 try {
 // TODO: This is only here for hot reloading
 if (this._host) {
 this.remove();
 }
 const existingFeedback = doc.querySelector(`#${this.options.id}`);
 if (existingFeedback) {
 existingFeedback.remove();
 }
 // TODO: End hotloading
 this._cleanupWidgetIfExists();

 const { autoInject } = this.options;

Expand All@@ -183,20 +175,49 @@ export class Feedback implements Integration {
 return;
 }

 this._widget = this._createWidget(this.options);
 this._createWidget(this.options);
 } catch (err) {
 logger.error(err);
 }
 }

 /**
 * Allows user to open the dialog box. Creates a new widget if
 * `autoInject` was false, otherwise re-uses the default widget that was
 * created during initialization of the integration.
 */
 public openDialog(): void {
 if (!this._widget) {
 this._createWidget({ ...this.options, shouldCreateActor: false });
 }

 if (!this._widget) {
 return;
 }

 this._widget.openDialog();
 }

 /**
 * Closes the dialog for the default widget, if it exists
 */
 public closeDialog(): void {
 if (!this._widget) {
 // Nothing to do if widget does not exist
 return;
 }

 this._widget.closeDialog();
 }

 /**
 * Adds click listener to attached element to open a feedback dialog
 */
 public attachTo(el: Element | string, optionOverrides: OptionalFeedbackConfiguration): Widget | null {
 public attachTo(el: Element | string, optionOverrides?: OptionalFeedbackConfiguration): FeedbackWidget | null {
 try {
 const options = mergeOptions(this.options, optionOverrides);
 const options = mergeOptions(this.options, optionOverrides || {});

 return this._ensureShadowHost<Widget | null>(options, ({ shadow }) => {
 return this._ensureShadowHost<FeedbackWidget | null>(options, ({ shadow }) => {
 const targetEl =
 typeof el === 'string' ? doc.querySelector(el) : typeof el.addEventListener === 'function' ? el : null;

Expand All@@ -207,6 +228,11 @@ export class Feedback implements Integration {

 const widget = createWidget({ shadow, options, attachTo: targetEl });
 this._widgets.add(widget);

 if (!this._widget) {
 this._widget = widget;
 }

 return widget;
 });
 } catch (err) {
Expand All@@ -218,9 +244,11 @@ export class Feedback implements Integration {
 /**
 * Creates a new widget. Accepts partial options to override any options passed to constructor.
 */
 public createWidget(optionOverrides: OptionalFeedbackConfiguration): Widget | null {
 public createWidget(
 optionOverrides?: OptionalFeedbackConfiguration & { shouldCreateActor?: boolean },
 ): FeedbackWidget | null {
 try {
 return this._createWidget(mergeOptions(this.options, optionOverrides));
 return this._createWidget(mergeOptions(this.options, optionOverrides || {}));
 } catch (err) {
 logger.error(err);
 return null;
Expand All@@ -230,7 +258,7 @@ export class Feedback implements Integration {
 /**
 * Removes a single widget
 */
 public removeWidget(widget: Widget | null | undefined): boolean {
 public removeWidget(widget: FeedbackWidget | null | undefined): boolean {
 if (!widget) {
 return false;
 }
Expand All@@ -240,6 +268,12 @@ export class Feedback implements Integration {
 widget.removeActor();
 widget.removeDialog();
 this._widgets.delete(widget);

 if (this._widget === widget) {
 // TODO: is more clean-up needed? e.g. call remove()
 this._widget = null;
 }

 return true;
 }
 } catch (err) {
Expand All@@ -249,6 +283,13 @@ export class Feedback implements Integration {
 return false;
 }

 /**
 * Returns the default (first-created) widget
 */
 public getWidget(): FeedbackWidget | null {
 return this._widget;
 }

 /**
 * Removes the Feedback integration (including host, shadow DOM, and all widgets)
 */
Expand All@@ -270,11 +311,25 @@ export class Feedback implements Integration {
 this._hasInsertedActorStyles = false;
 }

 /**
 * Clean-up the widget if it already exists in the DOM. This shouldn't happen
 * in prod, but can happen in development with hot module reloading.
 */
 protected _cleanupWidgetIfExists(): void {
 if (this._host) {
 this.remove();
 }
 const existingFeedback = doc.querySelector(`#${this.options.id}`);
 if (existingFeedback) {
 existingFeedback.remove();
 }
 }

 /**
 * Creates a new widget, after ensuring shadow DOM exists
 */
 protected _createWidget(options: FeedbackInternalOptions): Widget | null {
 return this._ensureShadowHost<Widget>(options, ({ shadow }) => {
 protected _createWidget(options: FeedbackInternalOptions & { shouldCreateActor?: boolean }): FeedbackWidget | null {
 return this._ensureShadowHost<FeedbackWidget>(options, ({ shadow }) => {
 const widget = createWidget({ shadow, options });

 if (!this._hasInsertedActorStyles && widget.actor) {
Expand All@@ -283,6 +338,11 @@ export class Feedback implements Integration {
 }

 this._widgets.add(widget);

 if (!this._widget) {
 this._widget = widget;
 }

 return widget;
 });
 }
Expand Down

4 changes: 2 additions & 2 deletions
packages/feedback/src/types/index.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -324,7 +324,7 @@ export interface FeedbackComponent<T extends HTMLElement> {
 * - dialog + feedback form
 * - shadow root?
 */
export interface Widget {
export interface FeedbackWidget {
 actor: ActorComponent | undefined;
 dialog: DialogComponent | undefined;

Expand All@@ -333,6 +333,6 @@ export interface Widget {
 removeActor: () => void;

 openDialog: () => void;
hideDialog: () => void;
closeDialog: () => void;
 removeDialog: () => void;
}

42 changes: 31 additions & 11 deletions
packages/feedback/src/widget/createWidget.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
import { getCurrentHub } from '@sentry/core';
import { logger } from '@sentry/utils';

import type { FeedbackFormData, FeedbackInternalOptions, Widget } from '../types';
import type { FeedbackFormData, FeedbackInternalOptions, FeedbackWidget } from '../types';
import { handleFeedbackSubmit } from '../util/handleFeedbackSubmit';
import type { ActorComponent } from './Actor';
import { Actor } from './Actor';
Expand All@@ -10,15 +10,35 @@ import { Dialog } from './Dialog';
import { SuccessMessage } from './SuccessMessage';

interface CreateWidgetParams {
 /**
 * Shadow DOM to append to
 */
 shadow: ShadowRoot;
 options: FeedbackInternalOptions;

 /**
 * Feedback integration options
 */
 options: FeedbackInternalOptions & { shouldCreateActor?: boolean };

 /**
 * An element to attach to, that when clicked, will open a dialog
 */
 attachTo?: Element;

 /**
 * If false, will not create an actor
 */
 shouldCreateActor?: boolean;
}

/**
 * Creates a new widget. Returns public methods that control widget behavior.
 */
export function createWidget({ shadow, options, attachTo }: CreateWidgetParams): Widget {
export function createWidget({
 shadow,
 options: { shouldCreateActor = true, ...options },
 attachTo,
}: CreateWidgetParams): FeedbackWidget {
 let actor: ActorComponent | undefined;
 let dialog: DialogComponent | undefined;
 let isDialogOpen: boolean = false;
Expand DownExpand Up@@ -159,7 +179,7 @@ export function createWidget({ shadow, options, attachTo }: CreateWidgetParams):
 }
 },
 onCancel: () => {
hideDialog();
closeDialog();
 showActor();
 },
 onSubmit: _handleFeedbackSubmit,
Expand All@@ -184,9 +204,9 @@ export function createWidget({ shadow, options, attachTo }: CreateWidgetParams):
 }

 /**
 * Hides the dialog
 * Closes the dialog
 */
 function hideDialog(): void {
 function closeDialog(): void {
 if (dialog) {
 dialog.close();
 isDialogOpen = false;
Expand All@@ -202,7 +222,7 @@ export function createWidget({ shadow, options, attachTo }: CreateWidgetParams):
 */
 function removeDialog(): void {
 if (dialog) {
hideDialog();
closeDialog();
 const dialogEl = dialog.el;
 dialogEl && dialogEl.remove();
 dialog = undefined;
Expand All@@ -226,11 +246,11 @@ export function createWidget({ shadow, options, attachTo }: CreateWidgetParams):
 }
 }

 if (!attachTo) {
 if (attachTo) {
 attachTo.addEventListener('click', handleActorClick);
 } else if (shouldCreateActor) {
 actor = Actor({ buttonLabel: options.buttonLabel, onClick: handleActorClick });
 actor.el && shadow.appendChild(actor.el);
 } else {
 attachTo.addEventListener('click', handleActorClick);
 }

 return {
Expand All@@ -246,7 +266,7 @@ export function createWidget({ shadow, options, attachTo }: CreateWidgetParams):
 removeActor,

 openDialog,
hideDialog,
closeDialog,
 removeDialog,
 };
}
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
feat(feedback): Add openDialog and closeDialog onto integration interface#9464

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

billyvg
merged 4 commits into

from

Nov 7, 2023
 Merged


feat(feedback): Add openDialog and closeDialog onto integration interface
#9464
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


4 commits


Select commit
Hold shift + click to select a range
cbe64d4

feat(feedback): Add `openDialog` and `closeDialog` onto integration i…


billyvg Nov 7, 2023
804330b

fixes + add tests


billyvg Nov 7, 2023
63f2550

lint


billyvg Nov 7, 2023
047b2bd

remove unused


billyvg Nov 7, 2023

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


102 changes: 81 additions & 21 deletions
packages/feedback/src/integration.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -16,7 +16,7 @@ import {
 SUBMIT_BUTTON_LABEL,
 SUCCESS_MESSAGE_TEXT,
} from './constants';
import type { FeedbackInternalOptions, OptionalFeedbackConfiguration, Widget } from './types';
import type { FeedbackInternalOptions, FeedbackWidget, OptionalFeedbackConfiguration } from './types';
import { mergeOptions } from './util/mergeOptions';
import { createActorStyles } from './widget/Actor.css';
import { createShadowHost } from './widget/createShadowHost';
Expand DownExpand Up@@ -48,12 +48,12 @@ export class Feedback implements Integration {
 /**
 * Reference to widget element that is created when autoInject is true
 */
 private _widget: Widget | null;
 private _widget: FeedbackWidget | null;

 /**
 * List of all widgets that are created from the integration
 */
 private _widgets: Set<Widget>;
 private _widgets: Set<FeedbackWidget>;

 /**
 * Reference to the host element where widget is inserted
Expand DownExpand Up@@ -166,15 +166,7 @@ export class Feedback implements Integration {
 }

 try {
 // TODO: This is only here for hot reloading
 if (this._host) {
 this.remove();
 }
 const existingFeedback = doc.querySelector(`#${this.options.id}`);
 if (existingFeedback) {
 existingFeedback.remove();
 }
 // TODO: End hotloading
 this._cleanupWidgetIfExists();

 const { autoInject } = this.options;

Expand All@@ -183,20 +175,49 @@ export class Feedback implements Integration {
 return;
 }

 this._widget = this._createWidget(this.options);
 this._createWidget(this.options);
 } catch (err) {
 logger.error(err);
 }
 }

 /**
 * Allows user to open the dialog box. Creates a new widget if
 * `autoInject` was false, otherwise re-uses the default widget that was
 * created during initialization of the integration.
 */
 public openDialog(): void {
 if (!this._widget) {
 this._createWidget({ ...this.options, shouldCreateActor: false });
 }

 if (!this._widget) {
 return;
 }

 this._widget.openDialog();
 }

 /**
 * Closes the dialog for the default widget, if it exists
 */
 public closeDialog(): void {
 if (!this._widget) {
 // Nothing to do if widget does not exist
 return;
 }

 this._widget.closeDialog();
 }

 /**
 * Adds click listener to attached element to open a feedback dialog
 */
 public attachTo(el: Element | string, optionOverrides: OptionalFeedbackConfiguration): Widget | null {
 public attachTo(el: Element | string, optionOverrides?: OptionalFeedbackConfiguration): FeedbackWidget | null {
 try {
 const options = mergeOptions(this.options, optionOverrides);
 const options = mergeOptions(this.options, optionOverrides || {});

 return this._ensureShadowHost<Widget | null>(options, ({ shadow }) => {
 return this._ensureShadowHost<FeedbackWidget | null>(options, ({ shadow }) => {
 const targetEl =
 typeof el === 'string' ? doc.querySelector(el) : typeof el.addEventListener === 'function' ? el : null;

Expand All@@ -207,6 +228,11 @@ export class Feedback implements Integration {

 const widget = createWidget({ shadow, options, attachTo: targetEl });
 this._widgets.add(widget);

 if (!this._widget) {
 this._widget = widget;
 }

 return widget;
 });
 } catch (err) {
Expand All@@ -218,9 +244,11 @@ export class Feedback implements Integration {
 /**
 * Creates a new widget. Accepts partial options to override any options passed to constructor.
 */
 public createWidget(optionOverrides: OptionalFeedbackConfiguration): Widget | null {
 public createWidget(
 optionOverrides?: OptionalFeedbackConfiguration & { shouldCreateActor?: boolean },
 ): FeedbackWidget | null {
 try {
 return this._createWidget(mergeOptions(this.options, optionOverrides));
 return this._createWidget(mergeOptions(this.options, optionOverrides || {}));
 } catch (err) {
 logger.error(err);
 return null;
Expand All@@ -230,7 +258,7 @@ export class Feedback implements Integration {
 /**
 * Removes a single widget
 */
 public removeWidget(widget: Widget | null | undefined): boolean {
 public removeWidget(widget: FeedbackWidget | null | undefined): boolean {
 if (!widget) {
 return false;
 }
Expand All@@ -240,6 +268,12 @@ export class Feedback implements Integration {
 widget.removeActor();
 widget.removeDialog();
 this._widgets.delete(widget);

 if (this._widget === widget) {
 // TODO: is more clean-up needed? e.g. call remove()
 this._widget = null;
 }

 return true;
 }
 } catch (err) {
Expand All@@ -249,6 +283,13 @@ export class Feedback implements Integration {
 return false;
 }

 /**
 * Returns the default (first-created) widget
 */
 public getWidget(): FeedbackWidget | null {
 return this._widget;
 }

 /**
 * Removes the Feedback integration (including host, shadow DOM, and all widgets)
 */
Expand All@@ -270,11 +311,25 @@ export class Feedback implements Integration {
 this._hasInsertedActorStyles = false;
 }

 /**
 * Clean-up the widget if it already exists in the DOM. This shouldn't happen
 * in prod, but can happen in development with hot module reloading.
 */
 protected _cleanupWidgetIfExists(): void {
 if (this._host) {
 this.remove();
 }
 const existingFeedback = doc.querySelector(`#${this.options.id}`);
 if (existingFeedback) {
 existingFeedback.remove();
 }
 }

 /**
 * Creates a new widget, after ensuring shadow DOM exists
 */
 protected _createWidget(options: FeedbackInternalOptions): Widget | null {
 return this._ensureShadowHost<Widget>(options, ({ shadow }) => {
 protected _createWidget(options: FeedbackInternalOptions & { shouldCreateActor?: boolean }): FeedbackWidget | null {
 return this._ensureShadowHost<FeedbackWidget>(options, ({ shadow }) => {
 const widget = createWidget({ shadow, options });

 if (!this._hasInsertedActorStyles && widget.actor) {
Expand All@@ -283,6 +338,11 @@ export class Feedback implements Integration {
 }

 this._widgets.add(widget);

 if (!this._widget) {
 this._widget = widget;
 }

 return widget;
 });
 }
Expand Down

4 changes: 2 additions & 2 deletions
packages/feedback/src/types/index.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -324,7 +324,7 @@ export interface FeedbackComponent<T extends HTMLElement> {
 * - dialog + feedback form
 * - shadow root?
 */
export interface Widget {
export interface FeedbackWidget {
 actor: ActorComponent | undefined;
 dialog: DialogComponent | undefined;

Expand All@@ -333,6 +333,6 @@ export interface Widget {
 removeActor: () => void;

 openDialog: () => void;
hideDialog: () => void;
closeDialog: () => void;
 removeDialog: () => void;
}

42 changes: 31 additions & 11 deletions
packages/feedback/src/widget/createWidget.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
import { getCurrentHub } from '@sentry/core';
import { logger } from '@sentry/utils';

import type { FeedbackFormData, FeedbackInternalOptions, Widget } from '../types';
import type { FeedbackFormData, FeedbackInternalOptions, FeedbackWidget } from '../types';
import { handleFeedbackSubmit } from '../util/handleFeedbackSubmit';
import type { ActorComponent } from './Actor';
import { Actor } from './Actor';
Expand All@@ -10,15 +10,35 @@ import { Dialog } from './Dialog';
import { SuccessMessage } from './SuccessMessage';

interface CreateWidgetParams {
 /**
 * Shadow DOM to append to
 */
 shadow: ShadowRoot;
 options: FeedbackInternalOptions;

 /**
 * Feedback integration options
 */
 options: FeedbackInternalOptions & { shouldCreateActor?: boolean };

 /**
 * An element to attach to, that when clicked, will open a dialog
 */
 attachTo?: Element;

 /**
 * If false, will not create an actor
 */
 shouldCreateActor?: boolean;
}

/**
 * Creates a new widget. Returns public methods that control widget behavior.
 */
export function createWidget({ shadow, options, attachTo }: CreateWidgetParams): Widget {
export function createWidget({
 shadow,
 options: { shouldCreateActor = true, ...options },
 attachTo,
}: CreateWidgetParams): FeedbackWidget {
 let actor: ActorComponent | undefined;
 let dialog: DialogComponent | undefined;
 let isDialogOpen: boolean = false;
Expand DownExpand Up@@ -159,7 +179,7 @@ export function createWidget({ shadow, options, attachTo }: CreateWidgetParams):
 }
 },
 onCancel: () => {
hideDialog();
closeDialog();
 showActor();
 },
 onSubmit: _handleFeedbackSubmit,
Expand All@@ -184,9 +204,9 @@ export function createWidget({ shadow, options, attachTo }: CreateWidgetParams):
 }

 /**
 * Hides the dialog
 * Closes the dialog
 */
 function hideDialog(): void {
 function closeDialog(): void {
 if (dialog) {
 dialog.close();
 isDialogOpen = false;
Expand All@@ -202,7 +222,7 @@ export function createWidget({ shadow, options, attachTo }: CreateWidgetParams):
 */
 function removeDialog(): void {
 if (dialog) {
hideDialog();
closeDialog();
 const dialogEl = dialog.el;
 dialogEl && dialogEl.remove();
 dialog = undefined;
Expand All@@ -226,11 +246,11 @@ export function createWidget({ shadow, options, attachTo }: CreateWidgetParams):
 }
 }

 if (!attachTo) {
 if (attachTo) {
 attachTo.addEventListener('click', handleActorClick);
 } else if (shouldCreateActor) {
 actor = Actor({ buttonLabel: options.buttonLabel, onClick: handleActorClick });
 actor.el && shadow.appendChild(actor.el);
 } else {
 attachTo.addEventListener('click', handleActorClick);
 }

 return {
Expand All@@ -246,7 +266,7 @@ export function createWidget({ shadow, options, attachTo }: CreateWidgetParams):
 removeActor,

 openDialog,
hideDialog,
closeDialog,
 removeDialog,
 };
}
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
feat(feedback): Add openDialog and closeDialog onto integration interface#9464

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

billyvg
merged 4 commits into

from

Nov 7, 2023
 Merged


feat(feedback): Add openDialog and closeDialog onto integration interface
#9464
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


4 commits


Select commit
Hold shift + click to select a range
cbe64d4

feat(feedback): Add `openDialog` and `closeDialog` onto integration i…


billyvg Nov 7, 2023
804330b

fixes + add tests


billyvg Nov 7, 2023
63f2550

lint


billyvg Nov 7, 2023
047b2bd

remove unused


billyvg Nov 7, 2023

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


102 changes: 81 additions & 21 deletions
packages/feedback/src/integration.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -16,7 +16,7 @@ import {
 SUBMIT_BUTTON_LABEL,
 SUCCESS_MESSAGE_TEXT,
} from './constants';
import type { FeedbackInternalOptions, OptionalFeedbackConfiguration, Widget } from './types';
import type { FeedbackInternalOptions, FeedbackWidget, OptionalFeedbackConfiguration } from './types';
import { mergeOptions } from './util/mergeOptions';
import { createActorStyles } from './widget/Actor.css';
import { createShadowHost } from './widget/createShadowHost';
Expand DownExpand Up@@ -48,12 +48,12 @@ export class Feedback implements Integration {
 /**
 * Reference to widget element that is created when autoInject is true
 */
 private _widget: Widget | null;
 private _widget: FeedbackWidget | null;

 /**
 * List of all widgets that are created from the integration
 */
 private _widgets: Set<Widget>;
 private _widgets: Set<FeedbackWidget>;

 /**
 * Reference to the host element where widget is inserted
Expand DownExpand Up@@ -166,15 +166,7 @@ export class Feedback implements Integration {
 }

 try {
 // TODO: This is only here for hot reloading
 if (this._host) {
 this.remove();
 }
 const existingFeedback = doc.querySelector(`#${this.options.id}`);
 if (existingFeedback) {
 existingFeedback.remove();
 }
 // TODO: End hotloading
 this._cleanupWidgetIfExists();

 const { autoInject } = this.options;

Expand All@@ -183,20 +175,49 @@ export class Feedback implements Integration {
 return;
 }

 this._widget = this._createWidget(this.options);
 this._createWidget(this.options);
 } catch (err) {
 logger.error(err);
 }
 }

 /**
 * Allows user to open the dialog box. Creates a new widget if
 * `autoInject` was false, otherwise re-uses the default widget that was
 * created during initialization of the integration.
 */
 public openDialog(): void {
 if (!this._widget) {
 this._createWidget({ ...this.options, shouldCreateActor: false });
 }

 if (!this._widget) {
 return;
 }

 this._widget.openDialog();
 }

 /**
 * Closes the dialog for the default widget, if it exists
 */
 public closeDialog(): void {
 if (!this._widget) {
 // Nothing to do if widget does not exist
 return;
 }

 this._widget.closeDialog();
 }

 /**
 * Adds click listener to attached element to open a feedback dialog
 */
 public attachTo(el: Element | string, optionOverrides: OptionalFeedbackConfiguration): Widget | null {
 public attachTo(el: Element | string, optionOverrides?: OptionalFeedbackConfiguration): FeedbackWidget | null {
 try {
 const options = mergeOptions(this.options, optionOverrides);
 const options = mergeOptions(this.options, optionOverrides || {});

 return this._ensureShadowHost<Widget | null>(options, ({ shadow }) => {
 return this._ensureShadowHost<FeedbackWidget | null>(options, ({ shadow }) => {
 const targetEl =
 typeof el === 'string' ? doc.querySelector(el) : typeof el.addEventListener === 'function' ? el : null;

Expand All@@ -207,6 +228,11 @@ export class Feedback implements Integration {

 const widget = createWidget({ shadow, options, attachTo: targetEl });
 this._widgets.add(widget);

 if (!this._widget) {
 this._widget = widget;
 }

 return widget;
 });
 } catch (err) {
Expand All@@ -218,9 +244,11 @@ export class Feedback implements Integration {
 /**
 * Creates a new widget. Accepts partial options to override any options passed to constructor.
 */
 public createWidget(optionOverrides: OptionalFeedbackConfiguration): Widget | null {
 public createWidget(
 optionOverrides?: OptionalFeedbackConfiguration & { shouldCreateActor?: boolean },
 ): FeedbackWidget | null {
 try {
 return this._createWidget(mergeOptions(this.options, optionOverrides));
 return this._createWidget(mergeOptions(this.options, optionOverrides || {}));
 } catch (err) {
 logger.error(err);
 return null;
Expand All@@ -230,7 +258,7 @@ export class Feedback implements Integration {
 /**
 * Removes a single widget
 */
 public removeWidget(widget: Widget | null | undefined): boolean {
 public removeWidget(widget: FeedbackWidget | null | undefined): boolean {
 if (!widget) {
 return false;
 }
Expand All@@ -240,6 +268,12 @@ export class Feedback implements Integration {
 widget.removeActor();
 widget.removeDialog();
 this._widgets.delete(widget);

 if (this._widget === widget) {
 // TODO: is more clean-up needed? e.g. call remove()
 this._widget = null;
 }

 return true;
 }
 } catch (err) {
Expand All@@ -249,6 +283,13 @@ export class Feedback implements Integration {
 return false;
 }

 /**
 * Returns the default (first-created) widget
 */
 public getWidget(): FeedbackWidget | null {
 return this._widget;
 }

 /**
 * Removes the Feedback integration (including host, shadow DOM, and all widgets)
 */
Expand All@@ -270,11 +311,25 @@ export class Feedback implements Integration {
 this._hasInsertedActorStyles = false;
 }

 /**
 * Clean-up the widget if it already exists in the DOM. This shouldn't happen
 * in prod, but can happen in development with hot module reloading.
 */
 protected _cleanupWidgetIfExists(): void {
 if (this._host) {
 this.remove();
 }
 const existingFeedback = doc.querySelector(`#${this.options.id}`);
 if (existingFeedback) {
 existingFeedback.remove();
 }
 }

 /**
 * Creates a new widget, after ensuring shadow DOM exists
 */
 protected _createWidget(options: FeedbackInternalOptions): Widget | null {
 return this._ensureShadowHost<Widget>(options, ({ shadow }) => {
 protected _createWidget(options: FeedbackInternalOptions & { shouldCreateActor?: boolean }): FeedbackWidget | null {
 return this._ensureShadowHost<FeedbackWidget>(options, ({ shadow }) => {
 const widget = createWidget({ shadow, options });

 if (!this._hasInsertedActorStyles && widget.actor) {
Expand All@@ -283,6 +338,11 @@ export class Feedback implements Integration {
 }

 this._widgets.add(widget);

 if (!this._widget) {
 this._widget = widget;
 }

 return widget;
 });
 }
Expand Down

4 changes: 2 additions & 2 deletions
packages/feedback/src/types/index.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -324,7 +324,7 @@ export interface FeedbackComponent<T extends HTMLElement> {
 * - dialog + feedback form
 * - shadow root?
 */
export interface Widget {
export interface FeedbackWidget {
 actor: ActorComponent | undefined;
 dialog: DialogComponent | undefined;

Expand All@@ -333,6 +333,6 @@ export interface Widget {
 removeActor: () => void;

 openDialog: () => void;
hideDialog: () => void;
closeDialog: () => void;
 removeDialog: () => void;
}

42 changes: 31 additions & 11 deletions
packages/feedback/src/widget/createWidget.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
import { getCurrentHub } from '@sentry/core';
import { logger } from '@sentry/utils';

import type { FeedbackFormData, FeedbackInternalOptions, Widget } from '../types';
import type { FeedbackFormData, FeedbackInternalOptions, FeedbackWidget } from '../types';
import { handleFeedbackSubmit } from '../util/handleFeedbackSubmit';
import type { ActorComponent } from './Actor';
import { Actor } from './Actor';
Expand All@@ -10,15 +10,35 @@ import { Dialog } from './Dialog';
import { SuccessMessage } from './SuccessMessage';

interface CreateWidgetParams {
 /**
 * Shadow DOM to append to
 */
 shadow: ShadowRoot;
 options: FeedbackInternalOptions;

 /**
 * Feedback integration options
 */
 options: FeedbackInternalOptions & { shouldCreateActor?: boolean };

 /**
 * An element to attach to, that when clicked, will open a dialog
 */
 attachTo?: Element;

 /**
 * If false, will not create an actor
 */
 shouldCreateActor?: boolean;
}

/**
 * Creates a new widget. Returns public methods that control widget behavior.
 */
export function createWidget({ shadow, options, attachTo }: CreateWidgetParams): Widget {
export function createWidget({
 shadow,
 options: { shouldCreateActor = true, ...options },
 attachTo,
}: CreateWidgetParams): FeedbackWidget {
 let actor: ActorComponent | undefined;
 let dialog: DialogComponent | undefined;
 let isDialogOpen: boolean = false;
Expand DownExpand Up@@ -159,7 +179,7 @@ export function createWidget({ shadow, options, attachTo }: CreateWidgetParams):
 }
 },
 onCancel: () => {
hideDialog();
closeDialog();
 showActor();
 },
 onSubmit: _handleFeedbackSubmit,
Expand All@@ -184,9 +204,9 @@ export function createWidget({ shadow, options, attachTo }: CreateWidgetParams):
 }

 /**
 * Hides the dialog
 * Closes the dialog
 */
 function hideDialog(): void {
 function closeDialog(): void {
 if (dialog) {
 dialog.close();
 isDialogOpen = false;
Expand All@@ -202,7 +222,7 @@ export function createWidget({ shadow, options, attachTo }: CreateWidgetParams):
 */
 function removeDialog(): void {
 if (dialog) {
hideDialog();
closeDialog();
 const dialogEl = dialog.el;
 dialogEl && dialogEl.remove();
 dialog = undefined;
Expand All@@ -226,11 +246,11 @@ export function createWidget({ shadow, options, attachTo }: CreateWidgetParams):
 }
 }

 if (!attachTo) {
 if (attachTo) {
 attachTo.addEventListener('click', handleActorClick);
 } else if (shouldCreateActor) {
 actor = Actor({ buttonLabel: options.buttonLabel, onClick: handleActorClick });
 actor.el && shadow.appendChild(actor.el);
 } else {
 attachTo.addEventListener('click', handleActorClick);
 }

 return {
Expand All@@ -246,7 +266,7 @@ export function createWidget({ shadow, options, attachTo }: CreateWidgetParams):
 removeActor,

 openDialog,
hideDialog,
closeDialog,
 removeDialog,
 };
}
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
feat(feedback): Add openDialog and closeDialog onto integration interface#9464

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

billyvg
merged 4 commits into

from

Nov 7, 2023
 Merged


feat(feedback): Add openDialog and closeDialog onto integration interface
#9464
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


4 commits


Select commit
Hold shift + click to select a range
cbe64d4

feat(feedback): Add `openDialog` and `closeDialog` onto integration i…


billyvg Nov 7, 2023
804330b

fixes + add tests


billyvg Nov 7, 2023
63f2550

lint


billyvg Nov 7, 2023
047b2bd

remove unused


billyvg Nov 7, 2023

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


102 changes: 81 additions & 21 deletions
packages/feedback/src/integration.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -16,7 +16,7 @@ import {
 SUBMIT_BUTTON_LABEL,
 SUCCESS_MESSAGE_TEXT,
} from './constants';
import type { FeedbackInternalOptions, OptionalFeedbackConfiguration, Widget } from './types';
import type { FeedbackInternalOptions, FeedbackWidget, OptionalFeedbackConfiguration } from './types';
import { mergeOptions } from './util/mergeOptions';
import { createActorStyles } from './widget/Actor.css';
import { createShadowHost } from './widget/createShadowHost';
Expand DownExpand Up@@ -48,12 +48,12 @@ export class Feedback implements Integration {
 /**
 * Reference to widget element that is created when autoInject is true
 */
 private _widget: Widget | null;
 private _widget: FeedbackWidget | null;

 /**
 * List of all widgets that are created from the integration
 */
 private _widgets: Set<Widget>;
 private _widgets: Set<FeedbackWidget>;

 /**
 * Reference to the host element where widget is inserted
Expand DownExpand Up@@ -166,15 +166,7 @@ export class Feedback implements Integration {
 }

 try {
 // TODO: This is only here for hot reloading
 if (this._host) {
 this.remove();
 }
 const existingFeedback = doc.querySelector(`#${this.options.id}`);
 if (existingFeedback) {
 existingFeedback.remove();
 }
 // TODO: End hotloading
 this._cleanupWidgetIfExists();

 const { autoInject } = this.options;

Expand All@@ -183,20 +175,49 @@ export class Feedback implements Integration {
 return;
 }

 this._widget = this._createWidget(this.options);
 this._createWidget(this.options);
 } catch (err) {
 logger.error(err);
 }
 }

 /**
 * Allows user to open the dialog box. Creates a new widget if
 * `autoInject` was false, otherwise re-uses the default widget that was
 * created during initialization of the integration.
 */
 public openDialog(): void {
 if (!this._widget) {
 this._createWidget({ ...this.options, shouldCreateActor: false });
 }

 if (!this._widget) {
 return;
 }

 this._widget.openDialog();
 }

 /**
 * Closes the dialog for the default widget, if it exists
 */
 public closeDialog(): void {
 if (!this._widget) {
 // Nothing to do if widget does not exist
 return;
 }

 this._widget.closeDialog();
 }

 /**
 * Adds click listener to attached element to open a feedback dialog
 */
 public attachTo(el: Element | string, optionOverrides: OptionalFeedbackConfiguration): Widget | null {
 public attachTo(el: Element | string, optionOverrides?: OptionalFeedbackConfiguration): FeedbackWidget | null {
 try {
 const options = mergeOptions(this.options, optionOverrides);
 const options = mergeOptions(this.options, optionOverrides || {});

 return this._ensureShadowHost<Widget | null>(options, ({ shadow }) => {
 return this._ensureShadowHost<FeedbackWidget | null>(options, ({ shadow }) => {
 const targetEl =
 typeof el === 'string' ? doc.querySelector(el) : typeof el.addEventListener === 'function' ? el : null;

Expand All@@ -207,6 +228,11 @@ export class Feedback implements Integration {

 const widget = createWidget({ shadow, options, attachTo: targetEl });
 this._widgets.add(widget);

 if (!this._widget) {
 this._widget = widget;
 }

 return widget;
 });
 } catch (err) {
Expand All@@ -218,9 +244,11 @@ export class Feedback implements Integration {
 /**
 * Creates a new widget. Accepts partial options to override any options passed to constructor.
 */
 public createWidget(optionOverrides: OptionalFeedbackConfiguration): Widget | null {
 public createWidget(
 optionOverrides?: OptionalFeedbackConfiguration & { shouldCreateActor?: boolean },
 ): FeedbackWidget | null {
 try {
 return this._createWidget(mergeOptions(this.options, optionOverrides));
 return this._createWidget(mergeOptions(this.options, optionOverrides || {}));
 } catch (err) {
 logger.error(err);
 return null;
Expand All@@ -230,7 +258,7 @@ export class Feedback implements Integration {
 /**
 * Removes a single widget
 */
 public removeWidget(widget: Widget | null | undefined): boolean {
 public removeWidget(widget: FeedbackWidget | null | undefined): boolean {
 if (!widget) {
 return false;
 }
Expand All@@ -240,6 +268,12 @@ export class Feedback implements Integration {
 widget.removeActor();
 widget.removeDialog();
 this._widgets.delete(widget);

 if (this._widget === widget) {
 // TODO: is more clean-up needed? e.g. call remove()
 this._widget = null;
 }

 return true;
 }
 } catch (err) {
Expand All@@ -249,6 +283,13 @@ export class Feedback implements Integration {
 return false;
 }

 /**
 * Returns the default (first-created) widget
 */
 public getWidget(): FeedbackWidget | null {
 return this._widget;
 }

 /**
 * Removes the Feedback integration (including host, shadow DOM, and all widgets)
 */
Expand All@@ -270,11 +311,25 @@ export class Feedback implements Integration {
 this._hasInsertedActorStyles = false;
 }

 /**
 * Clean-up the widget if it already exists in the DOM. This shouldn't happen
 * in prod, but can happen in development with hot module reloading.
 */
 protected _cleanupWidgetIfExists(): void {
 if (this._host) {
 this.remove();
 }
 const existingFeedback = doc.querySelector(`#${this.options.id}`);
 if (existingFeedback) {
 existingFeedback.remove();
 }
 }

 /**
 * Creates a new widget, after ensuring shadow DOM exists
 */
 protected _createWidget(options: FeedbackInternalOptions): Widget | null {
 return this._ensureShadowHost<Widget>(options, ({ shadow }) => {
 protected _createWidget(options: FeedbackInternalOptions & { shouldCreateActor?: boolean }): FeedbackWidget | null {
 return this._ensureShadowHost<FeedbackWidget>(options, ({ shadow }) => {
 const widget = createWidget({ shadow, options });

 if (!this._hasInsertedActorStyles && widget.actor) {
Expand All@@ -283,6 +338,11 @@ export class Feedback implements Integration {
 }

 this._widgets.add(widget);

 if (!this._widget) {
 this._widget = widget;
 }

 return widget;
 });
 }
Expand Down

4 changes: 2 additions & 2 deletions
packages/feedback/src/types/index.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -324,7 +324,7 @@ export interface FeedbackComponent<T extends HTMLElement> {
 * - dialog + feedback form
 * - shadow root?
 */
export interface Widget {
export interface FeedbackWidget {
 actor: ActorComponent | undefined;
 dialog: DialogComponent | undefined;

Expand All@@ -333,6 +333,6 @@ export interface Widget {
 removeActor: () => void;

 openDialog: () => void;
hideDialog: () => void;
closeDialog: () => void;
 removeDialog: () => void;
}

42 changes: 31 additions & 11 deletions
packages/feedback/src/widget/createWidget.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
import { getCurrentHub } from '@sentry/core';
import { logger } from '@sentry/utils';

import type { FeedbackFormData, FeedbackInternalOptions, Widget } from '../types';
import type { FeedbackFormData, FeedbackInternalOptions, FeedbackWidget } from '../types';
import { handleFeedbackSubmit } from '../util/handleFeedbackSubmit';
import type { ActorComponent } from './Actor';
import { Actor } from './Actor';
Expand All@@ -10,15 +10,35 @@ import { Dialog } from './Dialog';
import { SuccessMessage } from './SuccessMessage';

interface CreateWidgetParams {
 /**
 * Shadow DOM to append to
 */
 shadow: ShadowRoot;
 options: FeedbackInternalOptions;

 /**
 * Feedback integration options
 */
 options: FeedbackInternalOptions & { shouldCreateActor?: boolean };

 /**
 * An element to attach to, that when clicked, will open a dialog
 */
 attachTo?: Element;

 /**
 * If false, will not create an actor
 */
 shouldCreateActor?: boolean;
}

/**
 * Creates a new widget. Returns public methods that control widget behavior.
 */
export function createWidget({ shadow, options, attachTo }: CreateWidgetParams): Widget {
export function createWidget({
 shadow,
 options: { shouldCreateActor = true, ...options },
 attachTo,
}: CreateWidgetParams): FeedbackWidget {
 let actor: ActorComponent | undefined;
 let dialog: DialogComponent | undefined;
 let isDialogOpen: boolean = false;
Expand DownExpand Up@@ -159,7 +179,7 @@ export function createWidget({ shadow, options, attachTo }: CreateWidgetParams):
 }
 },
 onCancel: () => {
hideDialog();
closeDialog();
 showActor();
 },
 onSubmit: _handleFeedbackSubmit,
Expand All@@ -184,9 +204,9 @@ export function createWidget({ shadow, options, attachTo }: CreateWidgetParams):
 }

 /**
 * Hides the dialog
 * Closes the dialog
 */
 function hideDialog(): void {
 function closeDialog(): void {
 if (dialog) {
 dialog.close();
 isDialogOpen = false;
Expand All@@ -202,7 +222,7 @@ export function createWidget({ shadow, options, attachTo }: CreateWidgetParams):
 */
 function removeDialog(): void {
 if (dialog) {
hideDialog();
closeDialog();
 const dialogEl = dialog.el;
 dialogEl && dialogEl.remove();
 dialog = undefined;
Expand All@@ -226,11 +246,11 @@ export function createWidget({ shadow, options, attachTo }: CreateWidgetParams):
 }
 }

 if (!attachTo) {
 if (attachTo) {
 attachTo.addEventListener('click', handleActorClick);
 } else if (shouldCreateActor) {
 actor = Actor({ buttonLabel: options.buttonLabel, onClick: handleActorClick });
 actor.el && shadow.appendChild(actor.el);
 } else {
 attachTo.addEventListener('click', handleActorClick);
 }

 return {
Expand All@@ -246,7 +266,7 @@ export function createWidget({ shadow, options, attachTo }: CreateWidgetParams):
 removeActor,

 openDialog,
hideDialog,
closeDialog,
 removeDialog,
 };
}
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
feat(feedback): Add openDialog and closeDialog onto integration interface#9464

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

billyvg
merged 4 commits into

from

Nov 7, 2023
 Merged


feat(feedback): Add openDialog and closeDialog onto integration interface
#9464
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


4 commits


Select commit
Hold shift + click to select a range
cbe64d4

feat(feedback): Add `openDialog` and `closeDialog` onto integration i…


billyvg Nov 7, 2023
804330b

fixes + add tests


billyvg Nov 7, 2023
63f2550

lint


billyvg Nov 7, 2023
047b2bd

remove unused


billyvg Nov 7, 2023

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


102 changes: 81 additions & 21 deletions
packages/feedback/src/integration.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -16,7 +16,7 @@ import {
 SUBMIT_BUTTON_LABEL,
 SUCCESS_MESSAGE_TEXT,
} from './constants';
import type { FeedbackInternalOptions, OptionalFeedbackConfiguration, Widget } from './types';
import type { FeedbackInternalOptions, FeedbackWidget, OptionalFeedbackConfiguration } from './types';
import { mergeOptions } from './util/mergeOptions';
import { createActorStyles } from './widget/Actor.css';
import { createShadowHost } from './widget/createShadowHost';
Expand DownExpand Up@@ -48,12 +48,12 @@ export class Feedback implements Integration {
 /**
 * Reference to widget element that is created when autoInject is true
 */
 private _widget: Widget | null;
 private _widget: FeedbackWidget | null;

 /**
 * List of all widgets that are created from the integration
 */
 private _widgets: Set<Widget>;
 private _widgets: Set<FeedbackWidget>;

 /**
 * Reference to the host element where widget is inserted
Expand DownExpand Up@@ -166,15 +166,7 @@ export class Feedback implements Integration {
 }

 try {
 // TODO: This is only here for hot reloading
 if (this._host) {
 this.remove();
 }
 const existingFeedback = doc.querySelector(`#${this.options.id}`);
 if (existingFeedback) {
 existingFeedback.remove();
 }
 // TODO: End hotloading
 this._cleanupWidgetIfExists();

 const { autoInject } = this.options;

Expand All@@ -183,20 +175,49 @@ export class Feedback implements Integration {
 return;
 }

 this._widget = this._createWidget(this.options);
 this._createWidget(this.options);
 } catch (err) {
 logger.error(err);
 }
 }

 /**
 * Allows user to open the dialog box. Creates a new widget if
 * `autoInject` was false, otherwise re-uses the default widget that was
 * created during initialization of the integration.
 */
 public openDialog(): void {
 if (!this._widget) {
 this._createWidget({ ...this.options, shouldCreateActor: false });
 }

 if (!this._widget) {
 return;
 }

 this._widget.openDialog();
 }

 /**
 * Closes the dialog for the default widget, if it exists
 */
 public closeDialog(): void {
 if (!this._widget) {
 // Nothing to do if widget does not exist
 return;
 }

 this._widget.closeDialog();
 }

 /**
 * Adds click listener to attached element to open a feedback dialog
 */
 public attachTo(el: Element | string, optionOverrides: OptionalFeedbackConfiguration): Widget | null {
 public attachTo(el: Element | string, optionOverrides?: OptionalFeedbackConfiguration): FeedbackWidget | null {
 try {
 const options = mergeOptions(this.options, optionOverrides);
 const options = mergeOptions(this.options, optionOverrides || {});

 return this._ensureShadowHost<Widget | null>(options, ({ shadow }) => {
 return this._ensureShadowHost<FeedbackWidget | null>(options, ({ shadow }) => {
 const targetEl =
 typeof el === 'string' ? doc.querySelector(el) : typeof el.addEventListener === 'function' ? el : null;

Expand All@@ -207,6 +228,11 @@ export class Feedback implements Integration {

 const widget = createWidget({ shadow, options, attachTo: targetEl });
 this._widgets.add(widget);

 if (!this._widget) {
 this._widget = widget;
 }

 return widget;
 });
 } catch (err) {
Expand All@@ -218,9 +244,11 @@ export class Feedback implements Integration {
 /**
 * Creates a new widget. Accepts partial options to override any options passed to constructor.
 */
 public createWidget(optionOverrides: OptionalFeedbackConfiguration): Widget | null {
 public createWidget(
 optionOverrides?: OptionalFeedbackConfiguration & { shouldCreateActor?: boolean },
 ): FeedbackWidget | null {
 try {
 return this._createWidget(mergeOptions(this.options, optionOverrides));
 return this._createWidget(mergeOptions(this.options, optionOverrides || {}));
 } catch (err) {
 logger.error(err);
 return null;
Expand All@@ -230,7 +258,7 @@ export class Feedback implements Integration {
 /**
 * Removes a single widget
 */
 public removeWidget(widget: Widget | null | undefined): boolean {
 public removeWidget(widget: FeedbackWidget | null | undefined): boolean {
 if (!widget) {
 return false;
 }
Expand All@@ -240,6 +268,12 @@ export class Feedback implements Integration {
 widget.removeActor();
 widget.removeDialog();
 this._widgets.delete(widget);

 if (this._widget === widget) {
 // TODO: is more clean-up needed? e.g. call remove()
 this._widget = null;
 }

 return true;
 }
 } catch (err) {
Expand All@@ -249,6 +283,13 @@ export class Feedback implements Integration {
 return false;
 }

 /**
 * Returns the default (first-created) widget
 */
 public getWidget(): FeedbackWidget | null {
 return this._widget;
 }

 /**
 * Removes the Feedback integration (including host, shadow DOM, and all widgets)
 */
Expand All@@ -270,11 +311,25 @@ export class Feedback implements Integration {
 this._hasInsertedActorStyles = false;
 }

 /**
 * Clean-up the widget if it already exists in the DOM. This shouldn't happen
 * in prod, but can happen in development with hot module reloading.
 */
 protected _cleanupWidgetIfExists(): void {
 if (this._host) {
 this.remove();
 }
 const existingFeedback = doc.querySelector(`#${this.options.id}`);
 if (existingFeedback) {
 existingFeedback.remove();
 }
 }

 /**
 * Creates a new widget, after ensuring shadow DOM exists
 */
 protected _createWidget(options: FeedbackInternalOptions): Widget | null {
 return this._ensureShadowHost<Widget>(options, ({ shadow }) => {
 protected _createWidget(options: FeedbackInternalOptions & { shouldCreateActor?: boolean }): FeedbackWidget | null {
 return this._ensureShadowHost<FeedbackWidget>(options, ({ shadow }) => {
 const widget = createWidget({ shadow, options });

 if (!this._hasInsertedActorStyles && widget.actor) {
Expand All@@ -283,6 +338,11 @@ export class Feedback implements Integration {
 }

 this._widgets.add(widget);

 if (!this._widget) {
 this._widget = widget;
 }

 return widget;
 });
 }
Expand Down

4 changes: 2 additions & 2 deletions
packages/feedback/src/types/index.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -324,7 +324,7 @@ export interface FeedbackComponent<T extends HTMLElement> {
 * - dialog + feedback form
 * - shadow root?
 */
export interface Widget {
export interface FeedbackWidget {
 actor: ActorComponent | undefined;
 dialog: DialogComponent | undefined;

Expand All@@ -333,6 +333,6 @@ export interface Widget {
 removeActor: () => void;

 openDialog: () => void;
hideDialog: () => void;
closeDialog: () => void;
 removeDialog: () => void;
}

42 changes: 31 additions & 11 deletions
packages/feedback/src/widget/createWidget.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
import { getCurrentHub } from '@sentry/core';
import { logger } from '@sentry/utils';

import type { FeedbackFormData, FeedbackInternalOptions, Widget } from '../types';
import type { FeedbackFormData, FeedbackInternalOptions, FeedbackWidget } from '../types';
import { handleFeedbackSubmit } from '../util/handleFeedbackSubmit';
import type { ActorComponent } from './Actor';
import { Actor } from './Actor';
Expand All@@ -10,15 +10,35 @@ import { Dialog } from './Dialog';
import { SuccessMessage } from './SuccessMessage';

interface CreateWidgetParams {
 /**
 * Shadow DOM to append to
 */
 shadow: ShadowRoot;
 options: FeedbackInternalOptions;

 /**
 * Feedback integration options
 */
 options: FeedbackInternalOptions & { shouldCreateActor?: boolean };

 /**
 * An element to attach to, that when clicked, will open a dialog
 */
 attachTo?: Element;

 /**
 * If false, will not create an actor
 */
 shouldCreateActor?: boolean;
}

/**
 * Creates a new widget. Returns public methods that control widget behavior.
 */
export function createWidget({ shadow, options, attachTo }: CreateWidgetParams): Widget {
export function createWidget({
 shadow,
 options: { shouldCreateActor = true, ...options },
 attachTo,
}: CreateWidgetParams): FeedbackWidget {
 let actor: ActorComponent | undefined;
 let dialog: DialogComponent | undefined;
 let isDialogOpen: boolean = false;
Expand DownExpand Up@@ -159,7 +179,7 @@ export function createWidget({ shadow, options, attachTo }: CreateWidgetParams):
 }
 },
 onCancel: () => {
hideDialog();
closeDialog();
 showActor();
 },
 onSubmit: _handleFeedbackSubmit,
Expand All@@ -184,9 +204,9 @@ export function createWidget({ shadow, options, attachTo }: CreateWidgetParams):
 }

 /**
 * Hides the dialog
 * Closes the dialog
 */
 function hideDialog(): void {
 function closeDialog(): void {
 if (dialog) {
 dialog.close();
 isDialogOpen = false;
Expand All@@ -202,7 +222,7 @@ export function createWidget({ shadow, options, attachTo }: CreateWidgetParams):
 */
 function removeDialog(): void {
 if (dialog) {
hideDialog();
closeDialog();
 const dialogEl = dialog.el;
 dialogEl && dialogEl.remove();
 dialog = undefined;
Expand All@@ -226,11 +246,11 @@ export function createWidget({ shadow, options, attachTo }: CreateWidgetParams):
 }
 }

 if (!attachTo) {
 if (attachTo) {
 attachTo.addEventListener('click', handleActorClick);
 } else if (shouldCreateActor) {
 actor = Actor({ buttonLabel: options.buttonLabel, onClick: handleActorClick });
 actor.el && shadow.appendChild(actor.el);
 } else {
 attachTo.addEventListener('click', handleActorClick);
 }

 return {
Expand All@@ -246,7 +266,7 @@ export function createWidget({ shadow, options, attachTo }: CreateWidgetParams):
 removeActor,

 openDialog,
hideDialog,
closeDialog,
 removeDialog,
 };
}
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
feat(feedback): Add openDialog and closeDialog onto integration interface#9464

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

billyvg
merged 4 commits into

from

Nov 7, 2023
 Merged


feat(feedback): Add openDialog and closeDialog onto integration interface
#9464
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


4 commits


Select commit
Hold shift + click to select a range
cbe64d4

feat(feedback): Add `openDialog` and `closeDialog` onto integration i…


billyvg Nov 7, 2023
804330b

fixes + add tests


billyvg Nov 7, 2023
63f2550

lint


billyvg Nov 7, 2023
047b2bd

remove unused


billyvg Nov 7, 2023

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


102 changes: 81 additions & 21 deletions
packages/feedback/src/integration.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -16,7 +16,7 @@ import {
 SUBMIT_BUTTON_LABEL,
 SUCCESS_MESSAGE_TEXT,
} from './constants';
import type { FeedbackInternalOptions, OptionalFeedbackConfiguration, Widget } from './types';
import type { FeedbackInternalOptions, FeedbackWidget, OptionalFeedbackConfiguration } from './types';
import { mergeOptions } from './util/mergeOptions';
import { createActorStyles } from './widget/Actor.css';
import { createShadowHost } from './widget/createShadowHost';
Expand DownExpand Up@@ -48,12 +48,12 @@ export class Feedback implements Integration {
 /**
 * Reference to widget element that is created when autoInject is true
 */
 private _widget: Widget | null;
 private _widget: FeedbackWidget | null;

 /**
 * List of all widgets that are created from the integration
 */
 private _widgets: Set<Widget>;
 private _widgets: Set<FeedbackWidget>;

 /**
 * Reference to the host element where widget is inserted
Expand DownExpand Up@@ -166,15 +166,7 @@ export class Feedback implements Integration {
 }

 try {
 // TODO: This is only here for hot reloading
 if (this._host) {
 this.remove();
 }
 const existingFeedback = doc.querySelector(`#${this.options.id}`);
 if (existingFeedback) {
 existingFeedback.remove();
 }
 // TODO: End hotloading
 this._cleanupWidgetIfExists();

 const { autoInject } = this.options;

Expand All@@ -183,20 +175,49 @@ export class Feedback implements Integration {
 return;
 }

 this._widget = this._createWidget(this.options);
 this._createWidget(this.options);
 } catch (err) {
 logger.error(err);
 }
 }

 /**
 * Allows user to open the dialog box. Creates a new widget if
 * `autoInject` was false, otherwise re-uses the default widget that was
 * created during initialization of the integration.
 */
 public openDialog(): void {
 if (!this._widget) {
 this._createWidget({ ...this.options, shouldCreateActor: false });
 }

 if (!this._widget) {
 return;
 }

 this._widget.openDialog();
 }

 /**
 * Closes the dialog for the default widget, if it exists
 */
 public closeDialog(): void {
 if (!this._widget) {
 // Nothing to do if widget does not exist
 return;
 }

 this._widget.closeDialog();
 }

 /**
 * Adds click listener to attached element to open a feedback dialog
 */
 public attachTo(el: Element | string, optionOverrides: OptionalFeedbackConfiguration): Widget | null {
 public attachTo(el: Element | string, optionOverrides?: OptionalFeedbackConfiguration): FeedbackWidget | null {
 try {
 const options = mergeOptions(this.options, optionOverrides);
 const options = mergeOptions(this.options, optionOverrides || {});

 return this._ensureShadowHost<Widget | null>(options, ({ shadow }) => {
 return this._ensureShadowHost<FeedbackWidget | null>(options, ({ shadow }) => {
 const targetEl =
 typeof el === 'string' ? doc.querySelector(el) : typeof el.addEventListener === 'function' ? el : null;

Expand All@@ -207,6 +228,11 @@ export class Feedback implements Integration {

 const widget = createWidget({ shadow, options, attachTo: targetEl });
 this._widgets.add(widget);

 if (!this._widget) {
 this._widget = widget;
 }

 return widget;
 });
 } catch (err) {
Expand All@@ -218,9 +244,11 @@ export class Feedback implements Integration {
 /**
 * Creates a new widget. Accepts partial options to override any options passed to constructor.
 */
 public createWidget(optionOverrides: OptionalFeedbackConfiguration): Widget | null {
 public createWidget(
 optionOverrides?: OptionalFeedbackConfiguration & { shouldCreateActor?: boolean },
 ): FeedbackWidget | null {
 try {
 return this._createWidget(mergeOptions(this.options, optionOverrides));
 return this._createWidget(mergeOptions(this.options, optionOverrides || {}));
 } catch (err) {
 logger.error(err);
 return null;
Expand All@@ -230,7 +258,7 @@ export class Feedback implements Integration {
 /**
 * Removes a single widget
 */
 public removeWidget(widget: Widget | null | undefined): boolean {
 public removeWidget(widget: FeedbackWidget | null | undefined): boolean {
 if (!widget) {
 return false;
 }
Expand All@@ -240,6 +268,12 @@ export class Feedback implements Integration {
 widget.removeActor();
 widget.removeDialog();
 this._widgets.delete(widget);

 if (this._widget === widget) {
 // TODO: is more clean-up needed? e.g. call remove()
 this._widget = null;
 }

 return true;
 }
 } catch (err) {
Expand All@@ -249,6 +283,13 @@ export class Feedback implements Integration {
 return false;
 }

 /**
 * Returns the default (first-created) widget
 */
 public getWidget(): FeedbackWidget | null {
 return this._widget;
 }

 /**
 * Removes the Feedback integration (including host, shadow DOM, and all widgets)
 */
Expand All@@ -270,11 +311,25 @@ export class Feedback implements Integration {
 this._hasInsertedActorStyles = false;
 }

 /**
 * Clean-up the widget if it already exists in the DOM. This shouldn't happen
 * in prod, but can happen in development with hot module reloading.
 */
 protected _cleanupWidgetIfExists(): void {
 if (this._host) {
 this.remove();
 }
 const existingFeedback = doc.querySelector(`#${this.options.id}`);
 if (existingFeedback) {
 existingFeedback.remove();
 }
 }

 /**
 * Creates a new widget, after ensuring shadow DOM exists
 */
 protected _createWidget(options: FeedbackInternalOptions): Widget | null {
 return this._ensureShadowHost<Widget>(options, ({ shadow }) => {
 protected _createWidget(options: FeedbackInternalOptions & { shouldCreateActor?: boolean }): FeedbackWidget | null {
 return this._ensureShadowHost<FeedbackWidget>(options, ({ shadow }) => {
 const widget = createWidget({ shadow, options });

 if (!this._hasInsertedActorStyles && widget.actor) {
Expand All@@ -283,6 +338,11 @@ export class Feedback implements Integration {
 }

 this._widgets.add(widget);

 if (!this._widget) {
 this._widget = widget;
 }

 return widget;
 });
 }
Expand Down

4 changes: 2 additions & 2 deletions
packages/feedback/src/types/index.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -324,7 +324,7 @@ export interface FeedbackComponent<T extends HTMLElement> {
 * - dialog + feedback form
 * - shadow root?
 */
export interface Widget {
export interface FeedbackWidget {
 actor: ActorComponent | undefined;
 dialog: DialogComponent | undefined;

Expand All@@ -333,6 +333,6 @@ export interface Widget {
 removeActor: () => void;

 openDialog: () => void;
hideDialog: () => void;
closeDialog: () => void;
 removeDialog: () => void;
}

42 changes: 31 additions & 11 deletions
packages/feedback/src/widget/createWidget.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
import { getCurrentHub } from '@sentry/core';
import { logger } from '@sentry/utils';

import type { FeedbackFormData, FeedbackInternalOptions, Widget } from '../types';
import type { FeedbackFormData, FeedbackInternalOptions, FeedbackWidget } from '../types';
import { handleFeedbackSubmit } from '../util/handleFeedbackSubmit';
import type { ActorComponent } from './Actor';
import { Actor } from './Actor';
Expand All@@ -10,15 +10,35 @@ import { Dialog } from './Dialog';
import { SuccessMessage } from './SuccessMessage';

interface CreateWidgetParams {
 /**
 * Shadow DOM to append to
 */
 shadow: ShadowRoot;
 options: FeedbackInternalOptions;

 /**
 * Feedback integration options
 */
 options: FeedbackInternalOptions & { shouldCreateActor?: boolean };

 /**
 * An element to attach to, that when clicked, will open a dialog
 */
 attachTo?: Element;

 /**
 * If false, will not create an actor
 */
 shouldCreateActor?: boolean;
}

/**
 * Creates a new widget. Returns public methods that control widget behavior.
 */
export function createWidget({ shadow, options, attachTo }: CreateWidgetParams): Widget {
export function createWidget({
 shadow,
 options: { shouldCreateActor = true, ...options },
 attachTo,
}: CreateWidgetParams): FeedbackWidget {
 let actor: ActorComponent | undefined;
 let dialog: DialogComponent | undefined;
 let isDialogOpen: boolean = false;
Expand DownExpand Up@@ -159,7 +179,7 @@ export function createWidget({ shadow, options, attachTo }: CreateWidgetParams):
 }
 },
 onCancel: () => {
hideDialog();
closeDialog();
 showActor();
 },
 onSubmit: _handleFeedbackSubmit,
Expand All@@ -184,9 +204,9 @@ export function createWidget({ shadow, options, attachTo }: CreateWidgetParams):
 }

 /**
 * Hides the dialog
 * Closes the dialog
 */
 function hideDialog(): void {
 function closeDialog(): void {
 if (dialog) {
 dialog.close();
 isDialogOpen = false;
Expand All@@ -202,7 +222,7 @@ export function createWidget({ shadow, options, attachTo }: CreateWidgetParams):
 */
 function removeDialog(): void {
 if (dialog) {
hideDialog();
closeDialog();
 const dialogEl = dialog.el;
 dialogEl && dialogEl.remove();
 dialog = undefined;
Expand All@@ -226,11 +246,11 @@ export function createWidget({ shadow, options, attachTo }: CreateWidgetParams):
 }
 }

 if (!attachTo) {
 if (attachTo) {
 attachTo.addEventListener('click', handleActorClick);
 } else if (shouldCreateActor) {
 actor = Actor({ buttonLabel: options.buttonLabel, onClick: handleActorClick });
 actor.el && shadow.appendChild(actor.el);
 } else {
 attachTo.addEventListener('click', handleActorClick);
 }

 return {
Expand All@@ -246,7 +266,7 @@ export function createWidget({ shadow, options, attachTo }: CreateWidgetParams):
 removeActor,

 openDialog,
hideDialog,
closeDialog,
 removeDialog,
 };
}
Loading