feat(feedback): Use Feedback widget modal for Crons (#56970)

This replaces the use of `FeedbackFeature` with a temporary feedbackv2
widget in the Crons view.


<img width="437" alt="image"
src="https://github.com/getsentry/sentry/assets/79684/8ab678a0-7564-4aa7-9704-3c449a35f812">

Closes https://github.com/getsentry/team-replay/issues/190

---------

Co-authored-by: getsantry[bot] <66042841+getsantry[bot]@users.noreply.github.com>

static/app/components/feedback/widget/feedbackForm.tsx

@@ -4,8 +4,10 @@ import styled from '@emotion/styled';
 import {getCurrentHub} from '@sentry/react';
 
 interface FeedbackFormProps {
+  descriptionPlaceholder: string;
   onClose: () => void;
   onSubmit: (data: {comment: string; email: string; name: string}) => void;
+  sendButtonText: string;
 }
 
 const retrieveStringValue = (formData: FormData, key: string) => {
@@ -16,7 +18,12 @@ const retrieveStringValue = (formData: FormData, key: string) => {
   return '';
 };
 
-export function FeedbackForm({onClose, onSubmit}: FeedbackFormProps) {
+export function FeedbackForm({
+  descriptionPlaceholder,
+  sendButtonText,
+  onClose,
+  onSubmit,
+}: FeedbackFormProps) {
   const formRef = useRef<HTMLFormElement>(null);
   const [hasDescription, setHasDescription] = useState(false);
 
@@ -57,7 +64,7 @@ export function FeedbackForm({onClose, onSubmit}: FeedbackFormProps) {
           }}
           id="sentry-feedback-comment"
           name="comment"
-          placeholder="What's the bug? What did you expect?"
+          placeholder={descriptionPlaceholder}
         />
       </Label>
       <ButtonGroup>
@@ -66,7 +73,7 @@ export function FeedbackForm({onClose, onSubmit}: FeedbackFormProps) {
           disabled={!hasDescription}
           aria-disabled={!hasDescription}
         >
-          Send Bug Report
+          {sendButtonText}
         </SubmitButton>
         <CancelButton type="button" onClick={onClose}>
           Cancel

static/app/components/feedback/widget/feedbackModal.tsx

@@ -29,6 +29,8 @@ interface FeedbackModalProps {
   children: FeedbackRenderFunction;
   title: string;
   className?: string;
+  descriptionPlaceholder?: string;
+  sendButtonText?: string;
   type?: string;
   widgetTheme?: 'dark' | 'light';
 }
@@ -67,10 +69,12 @@ function stopPropagation(e: React.MouseEvent) {
  */
 export function FeedbackModal({
   className,
+  descriptionPlaceholder = "What's the bug? What did you expect?",
+  sendButtonText = 'Send Bug Report',
+  widgetTheme = 'light',
   title,
   type,
   children,
-  widgetTheme = 'light',
 }: FeedbackModalProps) {
   const [open, setOpen] = useState(false);
   const [errorMessage, setError] = useState('');
@@ -139,7 +143,14 @@ export function FeedbackModal({
         <Content onClick={stopPropagation}>
           <Header>{title}</Header>
           {errorMessage ? <Error>{errorMessage}</Error> : null}
-          {open && <FeedbackForm onSubmit={handleSubmit} onClose={handleClose} />}
+          {open && (
+            <FeedbackForm
+              descriptionPlaceholder={descriptionPlaceholder}
+              sendButtonText={sendButtonText}
+              onSubmit={handleSubmit}
+              onClose={handleClose}
+            />
+          )}
         </Content>
       </Dialog>
       <FeedbackSuccessMessage show={showSuccessMessage} />

static/app/views/monitors/components/cronsFeedbackButton.tsx

@@ -1,9 +1,26 @@
-import {FeatureFeedback} from 'sentry/components/featureFeedback';
+import {Button} from 'sentry/components/button';
+import {FeedbackModal} from 'sentry/components/feedback/widget/feedbackModal';
+import {IconMegaphone} from 'sentry/icons/iconMegaphone';
 
 const CRONS_FEEDBACK_NAME = 'crons';
 
 function CronsFeedbackButton() {
-  return <FeatureFeedback featureName={CRONS_FEEDBACK_NAME} buttonProps={{size: 'sm'}} />;
+  const title = 'Give Feedback';
+
+  return (
+    <FeedbackModal
+      title={title}
+      type={CRONS_FEEDBACK_NAME}
+      sendButtonText="Send Feedback"
+      descriptionPlaceholder="What did you expect?"
+    >
+      {({showModal}) => (
+        <Button size="sm" icon={<IconMegaphone />} onClick={showModal}>
+          {title}
+        </Button>
+      )}
+    </FeedbackModal>
+  );
 }
 
 export default CronsFeedbackButton;