ref(feedback): Create stub integrations for feedback modal & screenshot code ot be broken out of the main integration

Author: ryan953

.craft.yml

@@ -32,7 +32,15 @@ targets:
   - name: npm
     id: '@sentry-internal/feedback'
     includeNames: /^sentry-internal-feedback-\d.*\.tgz$/
-  ## 1.8 ReplayCanvas package (browser only)
+  ## 1.8 Feedback Modal package (browser only)
+  - name: npm
+    id: '@sentry-internal/feedback-modal'
+    includeNames: /^sentry-internal-feedback-modal-\d.*\.tgz$/
+  ## 1.9 Feedback Screenshot package (browser only)
+  - name: npm
+    id: '@sentry-internal/feedback-screenshot'
+    includeNames: /^sentry-internal-feedback-screenshot-\d.*\.tgz$/
+  ## 1.10 ReplayCanvas package (browser only)
   - name: npm
     id: '@sentry-internal/replay-canvas'
     includeNames: /^sentry-internal-replay-canvas-\d.*\.tgz$/

.github/workflows/build.yml

@@ -106,6 +106,8 @@ jobs:
               - 'packages/replay/**'
               - 'packages/replay-canvas/**'
               - 'packages/feedback/**'
+              - 'packages/feedback-modal/**'
+              - 'packages/feedback-screenshot/**'
               - 'packages/wasm/**'
             browser_integration:
               - *shared

CODEOWNERS

@@ -2,4 +2,6 @@ packages/replay                                   @getsentry/replay-sdk-web
 packages/replay-worker                            @getsentry/replay-sdk-web
 packages/replay-canvas                            @getsentry/replay-sdk-web
 packages/feedback                                 @getsentry/replay-sdk-web
+packages/feedback-modal                           @getsentry/replay-sdk-web
+packages/feedback-screenshot                      @getsentry/replay-sdk-web
 dev-packages/browser-integration-tests/suites/replay  @getsentry/replay-sdk-web

package.json

@@ -55,6 +55,8 @@
     "packages/eslint-config-sdk",
     "packages/eslint-plugin-sdk",
     "packages/feedback",
+    "packages/feedback-modal",
+    "packages/feedback-screenshot",
     "packages/gatsby",
     "packages/google-cloud-serverless",
     "packages/integration-shims",

packages/browser/package.json

@@ -43,6 +43,8 @@
   },
   "dependencies": {
     "@sentry-internal/feedback": "8.0.0-alpha.7",
+    "@sentry-internal/feedback-modal": "8.0.0-alpha.7",
+    "@sentry-internal/feedback-screenshot": "8.0.0-alpha.7",
     "@sentry-internal/replay": "8.0.0-alpha.7",
     "@sentry-internal/replay-canvas": "8.0.0-alpha.7",
     "@sentry-internal/tracing": "8.0.0-alpha.7",

packages/browser/src/index.bundle.feedback.ts

@@ -1,5 +1,8 @@
 // This is exported so the loader does not fail when switching off Replay/Tracing
+
 import { feedbackIntegration, getFeedback } from '@sentry-internal/feedback';
+import { feedbackModalIntegration } from '@sentry-internal/feedback-modal';
+import { feedbackScreenshotIntegration } from '@sentry-internal/feedback-screenshot';
 import {
   addTracingExtensionsShim,
   browserTracingIntegrationShim,
@@ -12,6 +15,8 @@ export {
   addTracingExtensionsShim as addTracingExtensions,
   replayIntegrationShim as replayIntegration,
   feedbackIntegration,
+  feedbackModalIntegration,
+  feedbackScreenshotIntegration,
   getFeedback,
 };
 // Note: We do not export a shim for `Span` here, as that is quite complex and would blow up the bundle

packages/browser/src/index.bundle.replay.ts

@@ -3,6 +3,8 @@ import {
   addTracingExtensionsShim,
   browserTracingIntegrationShim,
   feedbackIntegrationShim,
+  feedbackModalIntegrationShim,
+  feedbackScreenshotIntegrationShim,
 } from '@sentry-internal/integration-shims';
 import { replayIntegration } from '@sentry-internal/replay';
 
@@ -12,5 +14,7 @@ export {
   addTracingExtensionsShim as addTracingExtensions,
   replayIntegration,
   feedbackIntegrationShim as feedbackIntegration,
+  feedbackModalIntegrationShim as feedbackModalIntegration,
+  feedbackScreenshotIntegrationShim as feedbackScreenshotIntegration,
 };
 // Note: We do not export a shim for `Span` here, as that is quite complex and would blow up the bundle

packages/browser/src/index.bundle.tracing.replay.feedback.ts

@@ -1,4 +1,6 @@
 import { feedbackIntegration, getFeedback } from '@sentry-internal/feedback';
+import { feedbackModalIntegration } from '@sentry-internal/feedback-modal';
+import { feedbackScreenshotIntegration } from '@sentry-internal/feedback-screenshot';
 import { replayIntegration } from '@sentry-internal/replay';
 import {
   browserTracingIntegration,
@@ -22,6 +24,8 @@ export {
 
 export {
   feedbackIntegration,
+  feedbackModalIntegration,
+  feedbackScreenshotIntegration,
   replayIntegration,
   browserTracingIntegration,
   addTracingExtensions,

packages/browser/src/index.bundle.tracing.replay.ts

@@ -1,4 +1,8 @@
-import { feedbackIntegrationShim } from '@sentry-internal/integration-shims';
+import {
+  feedbackIntegrationShim,
+  feedbackModalIntegrationShim,
+  feedbackScreenshotIntegrationShim,
+} from '@sentry-internal/integration-shims';
 import { replayIntegration } from '@sentry-internal/replay';
 import {
   browserTracingIntegration,
@@ -23,6 +27,8 @@ export {
 export {
   replayIntegration,
   feedbackIntegrationShim as feedbackIntegration,
+  feedbackModalIntegrationShim as feedbackModalIntegration,
+  feedbackScreenshotIntegrationShim as feedbackScreenshotIntegration,
   browserTracingIntegration,
   addTracingExtensions,
   startBrowserTracingNavigationSpan,

packages/browser/src/index.bundle.tracing.ts

@@ -1,5 +1,10 @@
 // This is exported so the loader does not fail when switching off Replay
-import { feedbackIntegrationShim, replayIntegrationShim } from '@sentry-internal/integration-shims';
+import {
+  feedbackIntegrationShim,
+  feedbackModalIntegrationShim,
+  feedbackScreenshotIntegrationShim,
+  replayIntegrationShim,
+} from '@sentry-internal/integration-shims';
 import {
   browserTracingIntegration,
   startBrowserTracingNavigationSpan,
@@ -22,6 +27,8 @@ export {
 
 export {
   feedbackIntegrationShim as feedbackIntegration,
+  feedbackModalIntegrationShim as feedbackModalIntegration,
+  feedbackScreenshotIntegrationShim as feedbackScreenshotIntegration,
   replayIntegrationShim as replayIntegration,
   browserTracingIntegration,
   addTracingExtensions,

packages/browser/src/index.bundle.ts

@@ -3,6 +3,8 @@ import {
   addTracingExtensionsShim,
   browserTracingIntegrationShim,
   feedbackIntegrationShim,
+  feedbackModalIntegrationShim,
+  feedbackScreenshotIntegrationShim,
   replayIntegrationShim,
 } from '@sentry-internal/integration-shims';
 
@@ -11,6 +13,8 @@ export {
   addTracingExtensionsShim as addTracingExtensions,
   browserTracingIntegrationShim as browserTracingIntegration,
   feedbackIntegrationShim as feedbackIntegration,
+  feedbackModalIntegrationShim as feedbackModalIntegration,
+  feedbackScreenshotIntegrationShim as feedbackScreenshotIntegration,
   replayIntegrationShim as replayIntegration,
 };
 // Note: We do not export a shim for `Span` here, as that is quite complex and would blow up the bundle

packages/browser/src/index.ts

@@ -52,6 +52,8 @@ export {
   getFeedback,
   sendFeedback,
 } from '@sentry-internal/feedback';
+export { feedbackModalIntegration } from '@sentry-internal/feedback-modal';
+export { feedbackScreenshotIntegration } from '@sentry-internal/feedback-screenshot';
 
 export {
   defaultRequestInstrumentationOptions,

packages/browser/test/unit/index.bundle.feedback.test.ts

@@ -1,15 +1,17 @@
 import { replayIntegrationShim } from '@sentry-internal/integration-shims';
-import { feedbackIntegration } from '@sentry/browser';
+import { feedbackIntegration, feedbackModalIntegration, feedbackScreenshotIntegration } from '@sentry/browser';
 
-import * as TracingReplayBundle from '../../src/index.bundle.feedback';
+import * as FeedbackBundle from '../../src/index.bundle.feedback';
 
 describe('index.bundle.feedback', () => {
   it('has correct exports', () => {
-    Object.keys(TracingReplayBundle.Integrations).forEach(key => {
-      expect((TracingReplayBundle.Integrations[key] as any).id).toStrictEqual(expect.any(String));
+    Object.keys(FeedbackBundle.Integrations).forEach(key => {
+      expect((FeedbackBundle.Integrations[key] as any).id).toStrictEqual(expect.any(String));
     });
 
-    expect(TracingReplayBundle.replayIntegration).toBe(replayIntegrationShim);
-    expect(TracingReplayBundle.feedbackIntegration).toBe(feedbackIntegration);
+    expect(FeedbackBundle.replayIntegration).toBe(replayIntegrationShim);
+    expect(FeedbackBundle.feedbackIntegration).toBe(feedbackIntegration);
+    expect(FeedbackBundle.feedbackModalIntegration).toBe(feedbackModalIntegration);
+    expect(FeedbackBundle.feedbackScreenshotIntegration).toBe(feedbackScreenshotIntegration);
   });
 });

packages/browser/test/unit/index.bundle.replay.test.ts

@@ -1,15 +1,21 @@
-import { feedbackIntegrationShim } from '@sentry-internal/integration-shims';
+import {
+  feedbackIntegrationShim,
+  feedbackModalIntegrationShim,
+  feedbackScreenshotIntegrationShim,
+} from '@sentry-internal/integration-shims';
 import { replayIntegration } from '@sentry/browser';
 
-import * as TracingReplayBundle from '../../src/index.bundle.replay';
+import * as ReplayBundle from '../../src/index.bundle.replay';
 
 describe('index.bundle.replay', () => {
   it('has correct exports', () => {
-    Object.keys(TracingReplayBundle.Integrations).forEach(key => {
-      expect((TracingReplayBundle.Integrations[key] as any).id).toStrictEqual(expect.any(String));
+    Object.keys(ReplayBundle.Integrations).forEach(key => {
+      expect((ReplayBundle.Integrations[key] as any).id).toStrictEqual(expect.any(String));
     });
 
-    expect(TracingReplayBundle.replayIntegration).toBe(replayIntegration);
-    expect(TracingReplayBundle.feedbackIntegration).toBe(feedbackIntegrationShim);
+    expect(ReplayBundle.replayIntegration).toBe(replayIntegration);
+    expect(ReplayBundle.feedbackIntegration).toBe(feedbackIntegrationShim);
+    expect(ReplayBundle.feedbackModalIntegration).toBe(feedbackModalIntegrationShim);
+    expect(ReplayBundle.feedbackScreenshotIntegration).toBe(feedbackScreenshotIntegrationShim);
   });
 });

packages/browser/test/unit/index.bundle.test.ts

@@ -1,14 +1,21 @@
-import { feedbackIntegrationShim, replayIntegrationShim } from '@sentry-internal/integration-shims';
+import {
+  feedbackIntegrationShim,
+  feedbackModalIntegrationShim,
+  feedbackScreenshotIntegrationShim,
+  replayIntegrationShim,
+} from '@sentry-internal/integration-shims';
 
-import * as TracingBundle from '../../src/index.bundle';
+import * as Bundle from '../../src/index.bundle';
 
 describe('index.bundle', () => {
   it('has correct exports', () => {
-    Object.keys(TracingBundle.Integrations).forEach(key => {
-      expect((TracingBundle.Integrations[key] as any).name).toStrictEqual(expect.any(String));
+    Object.keys(Bundle.Integrations).forEach(key => {
+      expect((Bundle.Integrations[key] as any).name).toStrictEqual(expect.any(String));
     });
 
-    expect(TracingBundle.replayIntegration).toBe(replayIntegrationShim);
-    expect(TracingBundle.feedbackIntegration).toBe(feedbackIntegrationShim);
+    expect(Bundle.replayIntegration).toBe(replayIntegrationShim);
+    expect(Bundle.feedbackIntegration).toBe(feedbackIntegrationShim);
+    expect(Bundle.feedbackModalIntegration).toBe(feedbackModalIntegrationShim);
+    expect(Bundle.feedbackScreenshotIntegration).toBe(feedbackScreenshotIntegrationShim);
   });
 });

packages/browser/test/unit/index.bundle.tracing.replay.feedback.test.ts

@@ -1,5 +1,10 @@
 import { browserTracingIntegration } from '@sentry-internal/tracing';
-import { feedbackIntegration, replayIntegration } from '@sentry/browser';
+import {
+  feedbackIntegration,
+  feedbackModalIntegration,
+  feedbackScreenshotIntegration,
+  replayIntegration,
+} from '@sentry/browser';
 
 import * as TracingReplayFeedbackBundle from '../../src/index.bundle.tracing.replay.feedback';
 
@@ -12,5 +17,7 @@ describe('index.bundle.tracing.replay.feedback', () => {
     expect(TracingReplayFeedbackBundle.replayIntegration).toBe(replayIntegration);
     expect(TracingReplayFeedbackBundle.browserTracingIntegration).toBe(browserTracingIntegration);
     expect(TracingReplayFeedbackBundle.feedbackIntegration).toBe(feedbackIntegration);
+    expect(TracingReplayFeedbackBundle.feedbackModalIntegration).toBe(feedbackModalIntegration);
+    expect(TracingReplayFeedbackBundle.feedbackScreenshotIntegration).toBe(feedbackScreenshotIntegration);
   });
 });

packages/browser/test/unit/index.bundle.tracing.replay.test.ts

@@ -1,4 +1,8 @@
-import { feedbackIntegrationShim } from '@sentry-internal/integration-shims';
+import {
+  feedbackIntegrationShim,
+  feedbackModalIntegrationShim,
+  feedbackScreenshotIntegrationShim,
+} from '@sentry-internal/integration-shims';
 import { browserTracingIntegration } from '@sentry-internal/tracing';
 import { replayIntegration } from '@sentry/browser';
 
@@ -15,5 +19,7 @@ describe('index.bundle.tracing.replay', () => {
     expect(TracingReplayBundle.browserTracingIntegration).toBe(browserTracingIntegration);
 
     expect(TracingReplayBundle.feedbackIntegration).toBe(feedbackIntegrationShim);
+    expect(TracingReplayBundle.feedbackModalIntegration).toBe(feedbackModalIntegrationShim);
+    expect(TracingReplayBundle.feedbackScreenshotIntegration).toBe(feedbackScreenshotIntegrationShim);
   });
 });

packages/browser/test/unit/index.bundle.tracing.test.ts

@@ -1,4 +1,9 @@
-import { feedbackIntegrationShim, replayIntegrationShim } from '@sentry-internal/integration-shims';
+import {
+  feedbackIntegrationShim,
+  feedbackModalIntegrationShim,
+  feedbackScreenshotIntegrationShim,
+  replayIntegrationShim,
+} from '@sentry-internal/integration-shims';
 import { browserTracingIntegration } from '@sentry-internal/tracing';
 
 import * as TracingBundle from '../../src/index.bundle.tracing';
@@ -12,5 +17,7 @@ describe('index.bundle.tracing', () => {
     expect(TracingBundle.replayIntegration).toBe(replayIntegrationShim);
     expect(TracingBundle.browserTracingIntegration).toBe(browserTracingIntegration);
     expect(TracingBundle.feedbackIntegration).toBe(feedbackIntegrationShim);
+    expect(TracingBundle.feedbackModalIntegration).toBe(feedbackModalIntegrationShim);
+    expect(TracingBundle.feedbackScreenshotIntegration).toBe(feedbackScreenshotIntegrationShim);
   });
 });

packages/feedback-modal/.eslintignore

@@ -0,0 +1,2 @@
+node_modules/
+build/

packages/feedback-modal/.eslintrc.js

@@ -0,0 +1,16 @@
+// Note: All paths are relative to the directory in which eslint is being run, rather than the directory where this file
+// lives
+
+// ESLint config docs: https://eslint.org/docs/user-guide/configuring/
+
+module.exports = {
+  extends: ['../../.eslintrc.js'],
+  overrides: [
+    {
+      files: ['jest.setup.ts', 'jest.config.ts'],
+      parserOptions: {
+        project: ['tsconfig.test.json'],
+      },
+    },
+  ],
+};

packages/feedback-modal/.gitignore

@@ -0,0 +1,4 @@
+node_modules
+/*.tgz
+.eslintcache
+build

packages/feedback-modal/LICENSE

@@ -0,0 +1,14 @@
+Copyright (c) 2023 Sentry (https://sentry.io) and individual contributors. All rights reserved.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+documentation files (the "Software"), to deal in the Software without restriction, including without limitation the
+rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit
+persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the
+Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE
+WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
+OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

packages/feedback-modal/README.md

@@ -0,0 +1,25 @@
+<p align="center">
+  <a href="https://sentry.io/?utm_source=github&utm_medium=logo" target="_blank">
+    <img src="https://sentry-brand.storage.googleapis.com/sentry-wordmark-dark-280x84.png" alt="Sentry" width="280" height="84">
+  </a>
+</p>
+
+# Sentry Integration for Feedback
+
+This SDK is **considered experimental and in a beta state**. It may experience breaking changes, and may be discontinued
+at any time. Please reach out on [GitHub](https://github.com/getsentry/sentry-javascript/issues/new/choose) if you have
+any feedback/concerns.
+
+To view Feedback in Sentry, your
+[Sentry organization must be an early adopter](https://docs.sentry.io/product/accounts/early-adopter-features/).
+
+## Installation
+
+Please read the [offical integration documentation](https://docs.sentry.io/platforms/javascript/user-feedback/) for
+installation instructions.
+
+## Configuration
+
+The Feedback integration is highly customizable, please read the
+[official integration documentation](https://docs.sentry.io/platforms/javascript/user-feedback/configuration/) for the
+most up-to-date configuration options.

packages/feedback-modal/jest.config.js

@@ -0,0 +1,6 @@
+const baseConfig = require('../../jest/jest.config.js');
+
+module.exports = {
+  ...baseConfig,
+  testEnvironment: 'jsdom',
+};