feat(replay): Cross link from inbound-filters to replay settings pages (#72920)

New copy with links:

| Page | Copy |
| --- | --- |
| Replay Settings | <img width="654" alt="SCR-20240617-qfvb"
src="https://github.com/getsentry/sentry/assets/187460/4191e8c3-ec5e-4bbf-a27a-4264ab11bd0c">
| Inbound Filters | <img width="611" alt="SCR-20240617-qfvw"
src="https://github.com/getsentry/sentry/assets/187460/e03cb29f-e597-4020-9560-b2cef3bf8f1d">




Fixes https://github.com/getsentry/sentry/issues/72180

static/app/data/forms/replay.tsx

@@ -1,35 +0,0 @@
-import type {JsonFormObject} from 'sentry/components/forms/types';
-import {t} from 'sentry/locale';
-
-export const route = '/settings/:orgId/projects/:projectId/replays/';
-
-const formGroups: JsonFormObject[] = [
-  {
-    title: 'Settings',
-    fields: [
-      {
-        name: 'sentry:replay_rage_click_issues',
-        type: 'boolean',
-
-        // additional data/props that is related to rendering of form field rather than data
-        label: t('Create Rage Click Issues'),
-        help: t('Toggles whether or not to create Session Replay Rage Click Issues'),
-        getData: data => ({options: data}),
-      },
-      {
-        name: 'sentry:replay_hydration_error_issues',
-        type: 'boolean',
-
-        // additional data/props that is related to rendering of form field rather than data
-        label: t('Create Hydration Error Issues'),
-        help: t('Toggles whether or not to create Session Replay Hydration Error Issues'),
-        getData: data => ({options: data}),
-        visible({features}) {
-          return features.has('session-replay-hydration-error-issue-creation');
-        },
-      },
-    ],
-  },
-];
-
-export default formGroups;

static/app/views/settings/project/projectFilters/projectFiltersSettings.tsx

@@ -21,6 +21,7 @@ import Form from 'sentry/components/forms/form';
 import FormField from 'sentry/components/forms/formField';
 import JsonForm from 'sentry/components/forms/jsonForm';
 import ExternalLink from 'sentry/components/links/externalLink';
+import Link from 'sentry/components/links/link';
 import LoadingError from 'sentry/components/loadingError';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
 import Panel from 'sentry/components/panels/panel';
@@ -537,9 +538,22 @@ export function ProjectFiltersSettings({project, params, features}: Props) {
                       type: 'boolean',
                       name: 'filters:react-hydration-errors',
                       label: t('Filter out hydration errors'),
-                      help: t(
-                        'React falls back to do a full re-render on a page and these errors are often not actionable.'
-                      ),
+                      help: organization.features.includes(
+                        'session-replay-hydration-error-issue-creation'
+                      )
+                        ? tct(
+                            'React falls back to do a full re-render on a page. [replaySettings: Hydration Errors created from captured replays] are excluded from this setting.',
+                            {
+                              replaySettings: (
+                                <Link
+                                  to={`/settings/projects/${project.slug}/replays/#sentry-replay_hydration_error_issues_help`}
+                                />
+                              ),
+                            }
+                          )
+                        : t(
+                            'React falls back to do a full re-render on a page and these errors are often not actionable.'
+                          ),
                       disabled: !hasAccess,
                     }}
                   />

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

@@ -4,9 +4,10 @@ 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 type {JsonFormObject} from 'sentry/components/forms/types';
+import Link from 'sentry/components/links/link';
 import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
-import formGroups from 'sentry/data/forms/replay';
-import {t} from 'sentry/locale';
+import {t, tct} from 'sentry/locale';
 import type {Organization} from 'sentry/types/organization';
 import type {Project} from 'sentry/types/project';
 import SettingsPageHeader from 'sentry/views/settings/components/settingsPageHeader';
@@ -21,6 +22,46 @@ type Props = RouteComponentProps<RouteParams, {}> & {
 };
 
 function ProjectReplaySettings({organization, project, params: {projectId}}: Props) {
+  const formGroups: JsonFormObject[] = [
+    {
+      title: 'Settings',
+      fields: [
+        {
+          name: 'sentry:replay_rage_click_issues',
+          type: 'boolean',
+
+          // additional data/props that is related to rendering of form field rather than data
+          label: t('Create Rage Click Issues'),
+          help: t('Toggles whether or not to create Session Replay Rage Click Issues'),
+          getData: data => ({options: data}),
+        },
+        {
+          name: 'sentry:replay_hydration_error_issues',
+          type: 'boolean',
+
+          // additional data/props that is related to rendering of form field rather than data
+          label: t('Create Hydration Error Issues'),
+          help() {
+            return tct(
+              'Toggles whether or not to create Session Replay Hydration Error Issues during replay ingest. Using [inboundFilters: inbound filters] to filter out hydration errors does not affect this setting.',
+              {
+                inboundFilters: (
+                  <Link
+                    to={`/settings/projects/${project.slug}/filters/data-filters/#filters-react-hydration-errors_help`}
+                  />
+                ),
+              }
+            );
+          },
+          getData: data => ({options: data}),
+          visible({features}) {
+            return features.has('session-replay-hydration-error-issue-creation');
+          },
+        },
+      ],
+    },
+  ];
+
   return (
     <SentryDocumentTitle title={t('Replays')} projectSlug={project.slug}>
       <SettingsPageHeader
@@ -44,8 +85,8 @@ function ProjectReplaySettings({organization, project, params: {projectId}}: Pro
         <Access access={['project:write']} project={project}>
           {({hasAccess}) => (
             <JsonForm
-              features={new Set(organization.features)}
               disabled={!hasAccess}
+              features={new Set(organization.features)}
               forms={formGroups}
             />
           )}