Allow users to set replaceGroups on regex PII rules (#103885)

Relay already has the ability to configure what part of a pattern match
to scrub, but so far it has not been exposed to users. Add a checkbox to
the UI to allow scrubbing the first match group instead of the entire
expression.

---------

Co-authored-by: Priscila Oliveira <[email protected]>

Author: jjbayer

static/app/views/settings/components/dataScrubbing/convertRelayPiiConfig.tsx

@@ -58,6 +58,9 @@ export function convertRelayPiiConfig(relayPiiConfig?: string | null): Rule[] {
             source,
             placeholder: redaction?.text,
             pattern: resolvedRule.pattern,
+            replaceCaptured:
+              resolvedRule.replaceGroups?.length === 1 &&
+              resolvedRule.replaceGroups?.at(0) === 1,
           });
         } else {
           convertedRules.push({
@@ -75,6 +78,9 @@ export function convertRelayPiiConfig(relayPiiConfig?: string | null): Rule[] {
           type: RuleType.PATTERN,
           source,
           pattern: resolvedRule.pattern,
+          replaceCaptured:
+            resolvedRule.replaceGroups?.length === 1 &&
+            resolvedRule.replaceGroups?.at(0) === 1,
         });
       } else {
         convertedRules.push({id, method, type, source});

static/app/views/settings/components/dataScrubbing/modals/edit.spec.tsx

@@ -189,6 +189,7 @@ describe('Edit Modal', () => {
         method: 'mask',
         pattern: '',
         placeholder: '',
+        replaceCaptured: false,
         type: 'anything',
         source: valueSuggestions[2]!.value,
       },

static/app/views/settings/components/dataScrubbing/modals/form/index.tsx

@@ -3,8 +3,12 @@ import {css} from '@emotion/react';
 import styled from '@emotion/styled';
 import sortBy from 'lodash/sortBy';
 
+import {Flex} from '@sentry/scraps/layout';
+import {Tooltip} from '@sentry/scraps/tooltip';
+
 import {Alert} from 'sentry/components/core/alert';
 import {Button} from 'sentry/components/core/button';
+import {Checkbox} from 'sentry/components/core/checkbox';
 import {Input} from 'sentry/components/core/input';
 import FieldGroup from 'sentry/components/forms/fieldGroup';
 import RadioField from 'sentry/components/forms/fields/radioField';
@@ -14,6 +18,7 @@ import {space} from 'sentry/styles/space';
 import type {Organization} from 'sentry/types/organization';
 import type {Project} from 'sentry/types/project';
 import withOrganization from 'sentry/utils/withOrganization';
+import {hasCaptureGroups} from 'sentry/views/settings/components/dataScrubbing/modals/utils';
 import {
   AllowedDataScrubbingDatasets,
   MethodType,
@@ -46,7 +51,7 @@ type Props<V extends Values, K extends keyof V> = {
   errors: Partial<V>;
   eventId: EventId;
   onAttributeError: (message: string) => void;
-  onChange: (field: K, value: string) => void;
+  onChange: (field: K, value: V[K]) => void;
   onChangeDataset: (dataset: AllowedDataScrubbingDatasets) => void;
   onUpdateEventId: (eventId: string) => void;
   onValidate: (field: K) => () => void;
@@ -60,6 +65,35 @@ type State = {
   displayEventId: boolean;
 };
 
+function ReplaceCapturedCheckbox({
+  values,
+  onChange,
+}: {
+  onChange: (field: 'replaceCaptured', value: boolean) => void;
+  values: Values;
+}) {
+  const disabled = !hasCaptureGroups(values.pattern);
+  return (
+    <Tooltip
+      title={disabled ? t('This rule does not contain capture groups') : undefined}
+      disabled={!disabled}
+    >
+      <Flex gap="xs" align="center">
+        <Checkbox
+          id="replace-captured"
+          name="replaceCaptured"
+          checked={values.replaceCaptured}
+          disabled={disabled}
+          onChange={e => onChange('replaceCaptured', e.target.checked)}
+        />
+        <ReplaceCapturedLabel htmlFor="replace-captured" disabled={disabled}>
+          {t('Only replace first capture match')}
+        </ReplaceCapturedLabel>
+      </Flex>
+    </Tooltip>
+  );
+}
+
 class Form extends Component<Props<Values, KeysOfUnion<Values>>, State> {
   state: State = {
     displayEventId: !!this.props.eventId?.value,
@@ -68,7 +102,7 @@ class Form extends Component<Props<Values, KeysOfUnion<Values>>, State> {
   handleChange =
     <K extends keyof Values>(field: K) =>
     (event: React.ChangeEvent<HTMLInputElement>) => {
-      this.props.onChange(field, event.target.value);
+      this.props.onChange(field, event.target.value as Values[K]);
     };
 
   handleToggleEventId = () => {
@@ -217,6 +251,7 @@ class Form extends Component<Props<Values, KeysOfUnion<Values>>, State> {
                 onBlur={onValidate('pattern')}
                 id="regex-matches"
               />
+              <ReplaceCapturedCheckbox values={values} onChange={onChange} />
             </FieldGroup>
           )}
         </FieldContainer>
@@ -384,6 +419,7 @@ class Form extends Component<Props<Values, KeysOfUnion<Values>>, State> {
                 onBlur={onValidate('pattern')}
                 id="regex-matches"
               />
+              <ReplaceCapturedCheckbox values={values} onChange={onChange} />
             </FieldGroup>
           )}
         </FieldContainer>
@@ -426,7 +462,7 @@ const FieldContainer = styled('div')<{hasTwoColumns: boolean}>`
   @media (min-width: ${p => p.theme.breakpoints.sm}) {
     gap: ${space(2)};
     ${p => p.hasTwoColumns && `grid-template-columns: 1fr 1fr;`}
-    margin-bottom: ${p => (p.hasTwoColumns ? 0 : space(2))};
+    margin-bottom: ${p => p.theme.space.xl};
   }
 `;
 
@@ -446,6 +482,7 @@ const SourceGroup = styled('div')<{isExpanded?: boolean}>`
 
 const RegularExpression = styled(Input)`
   font-family: ${p => p.theme.text.familyMono};
+  margin-bottom: ${p => p.theme.space.md};
 `;
 
 const DatasetRadioField = styled(RadioField)`
@@ -474,3 +511,14 @@ const Toggle = styled(Button)`
     align-items: center;
   }
 `;
+
+const ReplaceCapturedLabel = styled('label')<{disabled: boolean}>`
+  font-weight: normal;
+  margin-bottom: 0;
+  line-height: 1rem;
+  ${p =>
+    p.disabled &&
+    css`
+      color: ${p.theme.disabled};
+    `}
+`;

static/app/views/settings/components/dataScrubbing/modals/modalManager.tsx

@@ -29,7 +29,7 @@ import {
 import Form from './form';
 import handleError, {ErrorType} from './handleError';
 import Modal from './modal';
-import {useSourceGroupData} from './utils';
+import {hasCaptureGroups, useSourceGroupData} from './utils';
 
 type FormProps = React.ComponentProps<typeof Form>;
 type Values = FormProps['values'];
@@ -118,6 +118,7 @@ class ModalManager extends Component<ModalManagerWithLocalStorageProps, State> {
       source: initialState?.source ?? '',
       placeholder: initialState?.placeholder ?? '',
       pattern: initialState?.pattern ?? '',
+      replaceCaptured: initialState?.replaceCaptured ?? false,
     };
   }
 
@@ -244,8 +245,13 @@ class ModalManager extends Component<ModalManagerWithLocalStorageProps, State> {
       [field]: value,
     };
 
-    if (values.type !== RuleType.PATTERN && values.pattern) {
+    if (values.type !== RuleType.PATTERN) {
       values.pattern = '';
+      values.replaceCaptured = false;
+    }
+
+    if (values.type === RuleType.PATTERN && !hasCaptureGroups(values.pattern)) {
+      values.replaceCaptured = false;
     }
 
     if (values.method !== MethodType.REPLACE && values.placeholder) {
@@ -291,7 +297,12 @@ class ModalManager extends Component<ModalManagerWithLocalStorageProps, State> {
   handleValidate =
     <K extends keyof Values>(field: K) =>
     () => {
-      const isFieldValueEmpty = !this.state.values[field].trim();
+      const value = this.state.values[field];
+      if (typeof value !== 'string') {
+        return;
+      }
+
+      const isFieldValueEmpty = !value.trim();
 
       const fieldErrorAlreadyExist = this.state.errors[field];
 

static/app/views/settings/components/dataScrubbing/modals/utils.tsx

@@ -42,3 +42,8 @@ export function useSourceGroupData() {
     saveToSourceGroupData,
   };
 }
+
+export function hasCaptureGroups(pattern: string) {
+  const m = pattern.match(/\(.*\)/);
+  return m !== null && m.length > 0;
+}

static/app/views/settings/components/dataScrubbing/submitRules.tsx

@@ -12,6 +12,7 @@ function getSubmitFormatRule(rule: Rule): PiiConfig {
         method: rule.method,
         text: rule?.placeholder,
       },
+      replaceGroups: rule.replaceCaptured ? [1] : undefined,
     };
   }
 
@@ -22,6 +23,7 @@ function getSubmitFormatRule(rule: Rule): PiiConfig {
       redaction: {
         method: rule.method,
       },
+      replaceGroups: rule.replaceCaptured ? [1] : undefined,
     };
   }
 

static/app/views/settings/components/dataScrubbing/types.tsx

@@ -75,6 +75,7 @@ export type RuleDefault = RuleBase & {
 
 type RulePattern = RuleBase & {
   pattern: string;
+  replaceCaptured: boolean;
   type: RuleType.PATTERN;
 } & Pick<RuleDefault, 'method'>;
 
@@ -94,7 +95,12 @@ export type EventId = {
   value: string;
 };
 
-export type EditableRule = Omit<Record<KeysOfUnion<Rule>, string>, 'id'>;
+export type EditableRule = Omit<
+  {
+    [K in KeysOfUnion<Rule>]: K extends 'replaceCaptured' ? boolean : string;
+  },
+  'id'
+>;
 
 export type AttributeResults = Record<
   AllowedDataScrubbingDatasets,
@@ -122,6 +128,7 @@ type PiiConfigPattern = {
     method: RulePattern['method'];
   };
   type: RulePattern['type'];
+  replaceGroups?: number[];
 };
 
 type PiiConfigReplaceAndPattern = Omit<PiiConfigPattern, 'redaction'> &