feat(inbound-filters): Add react hydration errors filter to frontend (#…

…45300)
getsentry · Mar 3, 2023 · eba4f0c · eba4f0c
1 parent dfe56ae
commit eba4f0c
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 2 deletions.
diff --git a/static/app/data/forms/inboundFilters.tsx b/static/app/data/forms/inboundFilters.tsx
@@ -12,7 +12,7 @@ const globHelpText = tct('Allows [link:glob pattern matching].', {
   link: <ExternalLink href="https://en.wikipedia.org/wiki/Glob_(programming)" />,
 });
 
-const getOptionsData = (data: object) => ({options: data});
+export const getOptionsData = (data: object) => ({options: data});
 
 const formGroups: JsonFormObject[] = [
   {

diff --git a/static/app/views/settings/project/projectFilters/projectFiltersSettings.tsx b/static/app/views/settings/project/projectFilters/projectFiltersSettings.tsx
@@ -23,7 +23,10 @@ import {
   PanelItem,
 } from 'sentry/components/panels';
 import Switch from 'sentry/components/switchButton';
-import filterGroups, {customFilterFields} from 'sentry/data/forms/inboundFilters';
+import filterGroups, {
+  customFilterFields,
+  getOptionsData,
+} from 'sentry/data/forms/inboundFilters';
 import {t} from 'sentry/locale';
 import HookStore from 'sentry/stores/hookStore';
 import ProjectsStore from 'sentry/stores/projectsStore';
@@ -359,6 +362,31 @@ class ProjectFiltersSettings extends AsyncComponent<Props, State> {
                     </PanelItem>
                   );
                 })}
+                <PanelItem noPadding>
+                  <NestedForm
+                    apiMethod="PUT"
+                    apiEndpoint={projectEndpoint}
+                    initialData={{
+                      'filters:react-hydration-errors':
+                        project.options?.['filters:react-hydration-errors'],
+                    }}
+                    saveOnBlur
+                    onSubmitSuccess={this.handleSubmit}
+                  >
+                    <FieldFromConfig
+                      getData={getOptionsData}
+                      field={{
+                        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.'
+                        ),
+                        disabled: !hasAccess,
+                      }}
+                    />
+                  </NestedForm>
+                </PanelItem>
               </PanelBody>
             </Panel>