Add "report a problem" UX to Devtools surfaces (#10596)

- Add several new "report a problem" links into areas of Devtools that users might encounter problems with
- Add option to "_allow Replay support to view this recording_" (to auto-share the recording)
- Change discard-pending-message UI to flow better
- Rework the Support Form component to be more flexible (e.g. supporting extra context args) and more accessible to `replay-next` components (aka not routing it through Redux)
- Removed a lot of unnecessary passing around of props to components that could already retrieve those props from context directly
- Removed some unnecessary Redux `connect` functions that made code harder to read through

<table>
<tr>
<td colspan="2"><strong>Source viewer</strong></td>
</tr>
<tr>
<td>Source with source-maps</td>
<td><img title="screenshot-source-has-source-map" src="https://github.com/replayio/devtools/assets/29597/442307b2-9a67-4641-ad20-0eb03f18030f" /></td>
</tr>
<tr>
<td>Source with no source-maps</td>
<td><img title="screenshot-source-no-source-map" src="https://github.com/replayio/devtools/assets/29597/09dffb3a-5d30-4e32-b51f-67cb667fcc9e" /></td><tr>
<td colspan="2"><strong>Quick open modal</strong></td>
</tr>
<tr>
<td>Lots of results</td>
<td><img title="screenshot-typeahead-many-items" src="https://github.com/replayio/devtools/assets/29597/281117e1-7c6a-4bfa-9a8c-2f88bdff24d1" /></td>
</tr>
<tr>
<td>Fewer than 5 results</td>
<td><img title="screenshot-typeahead-3-items" src="https://github.com/replayio/devtools/assets/29597/2e183741-3a50-4352-bd03-bb13a9c0a75a" /></td>
</tr>
<tr>
<td>No results</td>
<td><img title="screenshot-typeahead-empty" src="https://github.com/replayio/devtools/assets/29597/af2cff72-b71c-4ecd-863c-6de203072030" /></td>
</tr>
<tr>
<td colspan="2"><strong>Terminal expressions</strong></td>
</tr>
<tr>
<td>Evaluates successfully</td>
<td><img title="screenshot-terminal-result" src="https://github.com/replayio/devtools/assets/29597/a285b386-94a6-46b2-8d2e-4229afab58c6" /></td>
</tr>
<tr>
<td>Throws an exception</td>
<td><img title="screenshot-terminal-exception" src="https://github.com/replayio/devtools/assets/29597/ed317fcd-8abf-4557-ac1e-4ea29615c5dd" /></td>
</tr>
<tr>
<td colspan="2"><strong>Video player</strong></td>
</tr>
<tr>
<td>Context menu</td>
<td><img src="https://github.com/replayio/devtools/assets/29597/4e5c581c-57bc-4da6-a974-79610293f778" /></td>
</tr>
<tr>
<td colspan="2"><strong>Loading screen</strong></td>
</tr>
<tr>
<td>When recording is still processing</td>
<td><img src="https://github.com/replayio/devtools/assets/29597/25006c89-2192-4115-94c9-a6252887e010" /></td>
</tr>
</table>


This PR also changes the discard confirmation screen to be more connected to the content you were editing.

| Editing | Discard confirmation (before) | Discard confirmation (after) |
| :--- | :--- | :--- |
| ![Screenshot 2024-07-04 at 5 50 50 PM](https://github.com/replayio/devtools/assets/29597/a416fd35-2590-4ae4-a855-9464c3dcddd4) |![Screenshot 2024-07-04 at 5 52 37 PM](https://github.com/replayio/devtools/assets/29597/73891b08-9e1c-4bf8-911d-755765461cc7) | ![Screenshot 2024-07-04 at 5 51 06 PM](https://github.com/replayio/devtools/assets/29597/d0b3c0a8-dfab-49b3-8310-79949e3e494b) |

Author: bvaughn

packages/replay-next/components/Icon.tsx

@@ -66,6 +66,7 @@ export type IconType =
   | "react"
   | "remove"
   | "remove-alternate"
+  | "report-problem"
   | "rewind"
   | "save"
   | "screenshot"
@@ -467,6 +468,10 @@ export default function Icon({
       path =
         "M14.59 8L12 10.59 9.41 8 8 9.41 10.59 12 8 14.59 9.41 16 12 13.41 14.59 16 16 14.59 13.41 12 16 9.41 14.59 8zM12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z";
       break;
+    case "report-problem":
+      path =
+        "M2.73 21h18.53c.77 0 1.25-.83.87-1.5l-9.27-16c-.39-.67-1.35-.67-1.73 0l-9.27 16c-.38.67.1 1.5.87 1.5zM13 18h-2v-2h2v2zm-1-4c-.55 0-1-.45-1-1v-2c0-.55.45-1 1-1s1 .45 1 1v2c0 .55-.45 1-1 1z";
+      break;
     case "rewind":
       path =
         "M4.49875 3C5.32306 3 5.9975 3.675 5.9975 4.5V19.5C5.9975 20.325 5.32306 21 4.49875 21C3.67444 21 3 20.325 3 19.5V4.5C3 3.675 3.67444 3 4.49875 3ZM9.98418 13.23L18.6319 19.335C19.6212 20.04 21 19.32 21 18.105V5.895C21 4.68 19.6362 3.975 18.6319 4.665L9.98418 10.77C9.12988 11.37 9.12988 12.63 9.98418 13.23Z";
@@ -702,7 +707,8 @@ export default function Icon({
       );
       break;
     case "warning":
-      path = "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z";
+      path =
+        "M2.73 21h18.53c.77 0 1.25-.83.87-1.5l-9.27-16c-.39-.67-1.35-.67-1.73 0l-9.27 16c-.38.67.1 1.5.87 1.5zM13 18h-2v-2h2v2zm-1-4c-.55 0-1-.45-1-1v-2c0-.55.45-1 1-1s1 .45 1 1v2c0 .55-.45 1-1 1z";
       break;
     case "whole-word":
       path =

packages/replay-next/components/console/renderers/TerminalExpressionRenderer.tsx

@@ -10,6 +10,7 @@ import {
 } from "react";
 
 import useConsoleContextMenu from "replay-next/components/console/useConsoleContextMenu";
+import { ReportProblemLink } from "replay-next/components/errors/ReportProblemLink";
 import Icon from "replay-next/components/Icon";
 import Inspector from "replay-next/components/inspector";
 import ClientValueValueRenderer from "replay-next/components/inspector/values/ClientValueValueRenderer";
@@ -146,7 +147,23 @@ function EvaluatedContent({ terminalExpression }: { terminalExpression: Terminal
 
   let children: ReactNode | null = null;
   if (exception) {
-    children = <Inspector context="console" pauseId={pauseId} protocolValue={exception} />;
+    children = (
+      <>
+        <Inspector context="console" pauseId={pauseId} protocolValue={exception} />
+        <div className={styles.ReportProblem}>
+          <ReportProblemLink
+            context={{
+              executionPoint: terminalExpression.point,
+              expression: terminalExpression.expression,
+              id: "terminal-expression",
+              frameId,
+              pauseId,
+            }}
+          />{" "}
+          if this is unexpected
+        </div>
+      </>
+    );
   } else if (returned) {
     children = returned.value ? (
       <ClientValueValueRenderer

packages/replay-next/components/console/renderers/shared.module.css

@@ -215,3 +215,12 @@
     box-shadow: 0 0 0 0 var(--pulse-color-off);
   }
 }
+
+.ReportProblem {
+  font-family: var(--font-family-default);
+  font-size: var(--font-size-regular);
+  margin-top: 0.25rem;
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}

packages/replay-next/components/errors/ReportProblemLink.module.css

@@ -0,0 +1,21 @@
+.Flex {
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.Icon {
+  width: 1.75ch;
+  height: 1.75ch;
+  color: var(--color-link);
+}
+
+.Link {
+  text-decoration: underline;
+  color: var(--color-link);
+  cursor: pointer;
+}
+.Link:hover {
+  text-decoration: none;
+}

packages/replay-next/components/errors/ReportProblemLink.tsx

@@ -0,0 +1,41 @@
+import { ReactNode, useContext } from "react";
+
+import { SupportContext, SupportFormContext } from "replay-next/components/errors/SupportContext";
+import Icon from "replay-next/components/Icon";
+
+import styles from "./ReportProblemLink.module.css";
+
+export function ReportProblemLink({
+  className = "",
+  context,
+  onClick: onClickProp = noop,
+  promptText = "Please share any additional information that may be helpful",
+  title = "Report a problem",
+}: {
+  className?: string;
+  context: SupportFormContext;
+  onClick?: () => void;
+  promptText?: string;
+  title?: ReactNode;
+}) {
+  const { showSupportForm } = useContext(SupportContext);
+
+  const onClick = () => {
+    showSupportForm({
+      context,
+      promptText,
+      title,
+    });
+
+    onClickProp();
+  };
+
+  return (
+    <div className={`${styles.Flex} ${className}`} onClick={onClick}>
+      <Icon className={styles.Icon} type="report-problem" />
+      <div className={styles.Link}>Report a problem</div>
+    </div>
+  );
+}
+
+function noop() {}

packages/replay-next/components/errors/SupportContext.tsx

@@ -0,0 +1,43 @@
+import { PropsWithChildren, ReactNode, createContext, useCallback, useMemo, useState } from "react";
+
+import { SupportForm } from "replay-next/components/errors/SupportForm";
+
+export type SupportFormContext = {
+  id: string;
+  [key: string]: any;
+};
+
+export type State = {
+  context: SupportFormContext;
+  promptText: string;
+  title: ReactNode;
+};
+
+export const SupportContext = createContext<{
+  hideSupportForm: () => void;
+  showSupportForm: (state: State) => void;
+  state: State | null;
+}>(null as any);
+
+export function SupportContextRoot({ children }: PropsWithChildren) {
+  const [state, setState] = useState<State | null>(null);
+
+  const hideSupportForm = useCallback(() => setState(null), []);
+  const showSupportForm = useCallback((state: State) => setState(state), []);
+
+  const value = useMemo(
+    () => ({
+      hideSupportForm,
+      showSupportForm,
+      state,
+    }),
+    [hideSupportForm, showSupportForm, state]
+  );
+
+  return (
+    <SupportContext.Provider value={value}>
+      {children}
+      {state && <SupportForm dismiss={hideSupportForm} state={state} />}
+    </SupportContext.Provider>
+  );
+}

packages/replay-next/components/errors/SupportForm.module.css

@@ -13,6 +13,9 @@
   color: var(--support-form-color);
   caret-color: var(--support-form-color);
 }
+.TextArea:disabled {
+  opacity: 0.5;
+}
 .TextArea:focus {
   box-shadow: none;
   outline-offset: 0;
@@ -28,6 +31,7 @@
   flex-direction: row;
   align-items: center;
   gap: 1ch;
+  height: 2rem;
 }
 
 .CancelCloseButton,
@@ -61,7 +65,34 @@
 .SubmitButton:hover {
   background-color: var(--primary-accent-hover);
 }
+.CancelCloseButton:disabled,
+.SubmitButton:disabled {
+  opacity: 0.5;
+}
 
 .ConfirmationMessage {
   text-align: center;
 }
+
+.Form {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.ShareOption {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.25ch;
+}
+.ShareOption[data-disabled] {
+  opacity: 0.5;
+}
+
+.Checkbox:disabled {
+  opacity: 0.5;
+}