ref(replays/tsc): refactor replay project settings (#66741)

ref https://github.com/getsentry/frontend-tsc/issues/2

- converts the replay project settings file into FC
- add a test for the replay project settings file
- clean up some unused code
- remove inaccurate copy and pasted `// Click Regenerate Token` comments
from other files

page looks the same!
<img width="1204" alt="SCR-20240311-nzkc"
src="https://github.com/getsentry/sentry/assets/56095982/12eee650-4e2b-40d6-a123-28ca2201c26f">

static/app/views/settings/project/projectReplays.spec.tsx

@@ -0,0 +1,53 @@
+import {ProjectFixture} from 'sentry-fixture/project';
+
+import {initializeOrg} from 'sentry-test/initializeOrg';
+import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
+
+import ProjectReplays from 'sentry/views/settings/project/projectReplays';
+
+describe('ProjectReplays', function () {
+  const {routerProps, organization, project, routerContext} = initializeOrg();
+  const url = `/projects/${organization.slug}/${project.slug}/`;
+
+  beforeEach(function () {
+    MockApiClient.clearMockResponses();
+    MockApiClient.addMockResponse({
+      url,
+      method: 'GET',
+      body: ProjectFixture(),
+    });
+    MockApiClient.addMockResponse({
+      url: `${url}keys/`,
+      method: 'GET',
+      body: [],
+    });
+  });
+
+  it('can toggle rage click issue creation', async function () {
+    render(
+      <ProjectReplays {...routerProps} organization={organization} project={project} />,
+      {
+        context: routerContext,
+      }
+    );
+
+    const mock = MockApiClient.addMockResponse({
+      url,
+      method: 'PUT',
+    });
+
+    await userEvent.click(
+      screen.getByRole('checkbox', {name: 'Create Rage Click Issues'})
+    );
+
+    expect(mock).toHaveBeenCalledWith(
+      url,
+      expect.objectContaining({
+        method: 'PUT',
+        data: {
+          options: {'sentry:replay_rage_click_issues': true},
+        },
+      })
+    );
+  });
+});

static/app/views/settings/project/projectReplays.tsx

@@ -1,16 +1,13 @@
 import type {RouteComponentProps} from 'react-router';
-import styled from '@emotion/styled';
 
 import Access from 'sentry/components/acl/access';
 import {Button} from 'sentry/components/button';
 import Form from 'sentry/components/forms/form';
 import JsonForm from 'sentry/components/forms/jsonForm';
+import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
 import formGroups from 'sentry/data/forms/replay';
 import {t} from 'sentry/locale';
-import {space} from 'sentry/styles/space';
 import type {Organization, Project} from 'sentry/types';
-import routeTitleGen from 'sentry/utils/routeTitle';
-import DeprecatedAsyncView from 'sentry/views/deprecatedAsyncView';
 import SettingsPageHeader from 'sentry/views/settings/components/settingsPageHeader';
 import PermissionAlert from 'sentry/views/settings/project/permissionAlert';
 
@@ -22,59 +19,33 @@ type Props = RouteComponentProps<RouteParams, {}> & {
   project: Project;
 };
 
-class ProjectUserFeedbackSettings extends DeprecatedAsyncView<Props> {
-  submitTimeout: number | undefined = undefined;
-
-  getEndpoints(): ReturnType<DeprecatedAsyncView['getEndpoints']> {
-    const {organization} = this.props;
-    const {projectId} = this.props.params;
-    return [['project', `/projects/${organization.slug}/${projectId}/`]];
-  }
-
-  getTitle(): string {
-    const {projectId} = this.props.params;
-    return routeTitleGen(t('Replays'), projectId, false);
-  }
-
-  renderBody() {
-    const {organization, project} = this.props;
-    const {projectId} = this.props.params;
-
-    return (
-      <div>
-        <SettingsPageHeader
-          title={t('Replays')}
-          action={
-            <ButtonList>
-              <Button
-                external
-                href="https://docs.sentry.io/product/session-replay/replay-page-and-filters/"
-              >
-                {t('Read the docs')}
-              </Button>
-            </ButtonList>
-          }
-        />
-        <PermissionAlert project={project} />
-        <Form
-          saveOnBlur
-          apiMethod="PUT"
-          apiEndpoint={`/projects/${organization.slug}/${projectId}/`}
-          initialData={this.state.project.options}
-        >
-          <Access access={['project:write']} project={project}>
-            {({hasAccess}) => <JsonForm disabled={!hasAccess} forms={formGroups} />}
-          </Access>
-        </Form>
-      </div>
-    );
-  }
+function ProjectReplaySettings({organization, project, params: {projectId}}: Props) {
+  return (
+    <SentryDocumentTitle title={t('Replays')} projectSlug={project.slug}>
+      <SettingsPageHeader
+        title={t('Replays')}
+        action={
+          <Button
+            external
+            href="https://docs.sentry.io/product/session-replay/replay-page-and-filters/"
+          >
+            {t('Read the docs')}
+          </Button>
+        }
+      />
+      <PermissionAlert project={project} />
+      <Form
+        saveOnBlur
+        apiMethod="PUT"
+        apiEndpoint={`/projects/${organization.slug}/${projectId}/`}
+        initialData={project.options}
+      >
+        <Access access={['project:write']} project={project}>
+          {({hasAccess}) => <JsonForm disabled={!hasAccess} forms={formGroups} />}
+        </Access>
+      </Form>
+    </SentryDocumentTitle>
+  );
 }
 
-export default ProjectUserFeedbackSettings;
-
-const ButtonList = styled('div')`
-  display: inline-grid;
-  grid-auto-flow: column;
-  gap: ${space(1)};
-`;
+export default ProjectReplaySettings;

static/app/views/settings/project/projectUserFeedback.spec.tsx

@@ -40,7 +40,6 @@ describe('ProjectUserFeedback', function () {
       method: 'PUT',
     });
 
-    // Click Regenerate Token
     await userEvent.click(screen.getByRole('checkbox', {name: 'Show Sentry Branding'}));
 
     expect(mock).toHaveBeenCalledWith(

static/app/views/settings/projectSecurityHeaders/csp.spec.tsx

@@ -66,7 +66,6 @@ describe('ProjectCspReports', function () {
 
     expect(mock).not.toHaveBeenCalled();
 
-    // Click Regenerate Token
     await userEvent.click(
       await screen.findByRole('checkbox', {name: 'Use default ignored sources'})
     );