screenshot button and widget placeholders

Author: c298lee

packages/feedback-screenshot/src/index.ts

@@ -5,4 +5,4 @@ export {
 } from './screenshot';
 export type { FeedbackScreenshotIntegrationOptions } from './screenshot';
 
-console.log('screenshot 9');
+console.log('screenshot 11');

packages/feedback-screenshot/src/screenshot.tsx

@@ -1,6 +1,7 @@
 import { convertIntegrationFnToClass, defineIntegration } from '@sentry/core';
 import type { Integration, IntegrationClass, IntegrationFn } from '@sentry/types';
-import { ScreenshotButton } from './screenshotWidget';
+import { ScreenshotButton } from './screenshotButton';
+import { ScreenshotWidget } from './screenshotWidget';
 import { GLOBAL_OBJ } from '@sentry/utils';
 import { h, render } from 'preact';
 
@@ -27,6 +28,9 @@ export const _feedbackScreenshotIntegration = ((options: Partial<FeedbackScreens
       return { el: options.el || WINDOW.document.createElement('div'), props: options.props || null };
     },
     renderScreenshotWidget: (options: FeedbackScreenshotOptions) => {
+      return render(<ScreenshotWidget />, options.el);
+    },
+    renderScreenshotButton: (options: FeedbackScreenshotOptions) => {
       return render(<ScreenshotButton />, options.el);
     },
   };
@@ -48,5 +52,6 @@ export const FeedbackScreenshot = convertIntegrationFnToClass(
   Integration & {
     getOptions: () => FeedbackScreenshotIntegrationOptions;
     renderScreenshotWidget: () => void;
+    renderScreenshotButton: () => void;
   }
 >;

packages/feedback-screenshot/src/screenshotButton.tsx

@@ -0,0 +1,18 @@
+import { Component, h } from 'preact';
+
+export class ScreenshotButton extends Component {
+  state = { clicked: false };
+  handleClick = () => {
+    this.setState({ clicked: !this.state.clicked });
+  };
+  render() {
+    return (
+      <label htmlFor="screenshot" className="form__label">
+        <span className="form__label__text">Screenshot</span>
+        <button class="btn btn--default" type="screenshot" onClick={this.handleClick}>
+          {this.state.clicked ? 'Remove' : 'Add'}
+        </button>
+      </label>
+    );
+  }
+}

packages/feedback-screenshot/src/screenshotWidget.tsx

@@ -1,13 +1,5 @@
 import { h } from 'preact';
-
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-export function ScreenshotButton() {
-  return (
-    <label htmlFor="screenshot" className="form__label">
-      <span className="form__label__text">Screenshot</span>
-      <button class="btn btn--default" type="cancel">
-        Add
-      </button>
-    </label>
-  );
+export function ScreenshotWidget() {
+  return <div style="height:100px; width: 100px; background:red;" />;
 }

packages/feedback/src/index.ts

@@ -5,4 +5,4 @@ export {
   feedbackIntegration,
 } from './integration';
 
-console.log('Feedback 2');
+console.log('Feedback 4');

packages/feedback/src/widget/Dialog.ts

@@ -3,6 +3,7 @@ import type { FormComponentProps } from './Form';
 import { Form } from './Form';
 import { Logo } from './Logo';
 import { createElement } from './util/createElement';
+import * as ScreenshotIntegration from '@sentry-internal/feedback-screenshot';
 
 export interface DialogProps
   extends FormComponentProps,
@@ -95,6 +96,14 @@ export function Dialog({
     return (el && el.open === true) || false;
   }
 
+  const screenshot = createElement('div', { className: 'dialog-content' });
+
+  // @ts-expect-error temp
+  ScreenshotIntegration.feedbackScreenshotIntegration().renderScreenshotWidget({
+    el: screenshot,
+    props: null,
+  });
+
   const {
     el: formEl,
     showError,
@@ -119,6 +128,7 @@ export function Dialog({
       open: true,
       onClick: handleDialogClick,
     },
+    screenshot,
     createElement(
       'div',
       {

packages/feedback/src/widget/Form.ts

@@ -140,7 +140,7 @@ export function Form({
     name: 'message',
     required: true,
     className: 'form__input form__input--textarea',
-    placeholder: 'message placeholder',
+    placeholder: messagePlaceholder,
   });
 
   const cancelEl = createElement(
@@ -156,11 +156,11 @@ export function Form({
     cancelButtonLabel,
   );
 
-  const screenshot = createElement('div', { className: 'btn-group' });
+  const button = createElement('div', { className: 'btn-group' });
 
   // @ts-expect-error temp
-  ScreenshotIntegration.feedbackScreenshotIntegration().renderScreenshotWidget({
-    el: screenshot,
+  ScreenshotIntegration.feedbackScreenshotIntegration().renderScreenshotButton({
+    el: button,
     props: null,
   });
 
@@ -228,7 +228,7 @@ export function Form({
         ],
       ),
 
-      screenshot,
+      button,
 
       createElement(
         'div',