feat(tests): Add dynamic sampling tests (#28459)

static/app/components/button.tsx

@@ -217,7 +217,7 @@ const getColors = ({priority, disabled, borderless, theme}: StyledButtonProps) =
 const StyledButton = styled(
   React.forwardRef<any, ButtonProps>(
     (
-      {forwardRef, size: _size, external, to, href, ...otherProps}: Props,
+      {forwardRef, size: _size, external, to, href, disabled, ...otherProps}: Props,
       forwardRefAlt
     ) => {
       // XXX: There may be two forwarded refs here, one potentially passed from a
@@ -234,15 +234,15 @@ const StyledButton = styled(
       // Get component to use based on existence of `to` or `href` properties
       // Can be react-router `Link`, `a`, or `button`
       if (to) {
-        return <Link ref={ref} to={to} {...props} />;
+        return <Link ref={ref} to={to} disabled={disabled} {...props} />;
       }
 
       if (!href) {
-        return <button ref={ref} {...props} />;
+        return <button ref={ref} disabled={disabled} {...props} />;
       }
 
       if (external && href) {
-        return <ExternalLink ref={ref} href={href} {...props} />;
+        return <ExternalLink ref={ref} href={href} disabled={disabled} {...props} />;
       }
 
       return <a ref={ref} {...props} href={href} />;
@@ -252,7 +252,7 @@ const StyledButton = styled(
     shouldForwardProp: prop =>
       prop === 'forwardRef' ||
       prop === 'external' ||
-      (typeof prop === 'string' && isPropValid(prop) && prop !== 'disabled'),
+      (typeof prop === 'string' && isPropValid(prop)),
   }
 )<Props>`
   display: inline-block;

static/app/components/events/contextSummary/contextSummaryDevice.tsx

@@ -77,7 +77,7 @@ const ContextSummaryDevice = ({data}: Props) => {
     <Item className={className} icon={<span className="context-item-icon" />}>
       <h3>{renderName()}</h3>
       {subTitle && (
-        <TextOverflow isParagraph>
+        <TextOverflow isParagraph data-test-id="context-sub-title">
           <Subject>{subTitle.subject}</Subject>
           <AnnotatedText value={subTitle.value} meta={subTitle.meta} />
         </TextOverflow>

static/app/components/events/contextSummary/contextSummaryOS.tsx

@@ -66,7 +66,7 @@ const ContextSummaryOS = ({data}: Props) => {
   return (
     <Item className={className} icon={<span className="context-item-icon" />}>
       <h3>{renderName()}</h3>
-      <TextOverflow isParagraph>
+      <TextOverflow isParagraph data-test-id="context-sub-title">
         <Subject>{versionElement.subject}</Subject>
         <AnnotatedText value={versionElement.value} meta={versionElement.meta} />
       </TextOverflow>

static/app/components/events/contextSummary/contextSummaryUser.tsx

@@ -49,7 +49,7 @@ const ContextSummaryUser = ({data}: Props) => {
     }
 
     return (
-      <TextOverflow isParagraph>
+      <TextOverflow isParagraph data-test-id="context-sub-title">
         <Subject>{userDetails.subject}</Subject>
         <AnnotatedText value={userDetails.value} meta={userDetails.meta} />
       </TextOverflow>

static/app/components/textOverflow.tsx

@@ -8,13 +8,20 @@ type Props = {
   children: React.ReactNode;
   isParagraph?: boolean;
   ellipsisDirection?: 'left' | 'right';
+  ['data-test-id']?: string;
   className?: string;
 };
 
-const TextOverflow = styled(({isParagraph, className, children}: Props) => {
-  const Component = isParagraph ? 'p' : 'div';
-  return <Component className={className}>{children}</Component>;
-})`
+const TextOverflow = styled(
+  ({isParagraph, className, children, ['data-test-id']: dataTestId}: Props) => {
+    const Component = isParagraph ? 'p' : 'div';
+    return (
+      <Component className={className} data-test-id={dataTestId}>
+        {children}
+      </Component>
+    );
+  }
+)`
   ${p => (p.ellipsisDirection === 'right' ? overflowEllipsis : overflowEllipsisLeft)};
   width: auto;
   line-height: 1.1;

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

@@ -177,6 +177,7 @@ class FiltersAndSampling extends AsyncView<Props, State> {
     errorMessage?: string
   ) {
     const {organization, project} = this.props;
+
     try {
       const projectDetails = await this.api.requestPromise(
         `/projects/${organization.slug}/${project.slug}/`,

static/app/views/settings/project/filtersAndSampling/index.tsx

@@ -3,13 +3,14 @@ import Feature from 'app/components/acl/feature';
 import FeatureDisabled from 'app/components/acl/featureDisabled';
 import {PanelAlert} from 'app/components/panels';
 import {t} from 'app/locale';
-import {Organization} from 'app/types';
+import {Organization, Project} from 'app/types';
 import withOrganization from 'app/utils/withOrganization';
 
 import FiltersAndSampling from './filtersAndSampling';
 
 type Props = {
   organization: Organization;
+  project: Project;
 };
 
 const Index = ({organization, ...props}: Props) => (

static/app/views/settings/project/filtersAndSampling/modal/legacyBrowsers.tsx

@@ -47,7 +47,7 @@ function LegacyBrowsers({onChange, selectedLegacyBrowsers = []}: Props) {
             return (
               <Fragment key={legacyBrowser}>
                 <BrowserWrapper>
-                  <Icon className={`icon-${icon}`} />
+                  <Icon className={`icon-${icon}`} data-test-id={`icon-${icon}`} />
                   {title}
                 </BrowserWrapper>
                 <Switch

static/app/views/settings/project/filtersAndSampling/modal/ruleModal.tsx

@@ -35,7 +35,7 @@ type State = {
   errors: {
     sampleRate?: string;
   };
-  sampleRate?: number;
+  sampleRate: number | null;
 };
 
 type Props = ModalRenderProps & {
@@ -117,7 +117,7 @@ function RuleModal({
 
     return {
       conditions: [],
-      sampleRate: undefined,
+      sampleRate: null,
       errors: {},
     };
   }
@@ -260,7 +260,7 @@ function RuleModal({
             label={`${t('Sampling Rate')} \u0025`}
             name="sampleRate"
             onChange={value => {
-              setData({...data, sampleRate: !!value ? Number(value) : undefined});
+              setData({...data, sampleRate: !!value ? Number(value) : null});
             }}
             placeholder={'\u0025'}
             value={sampleRate}

static/app/views/settings/project/filtersAndSampling/utils.tsx

@@ -10,35 +10,35 @@ export const DYNAMIC_SAMPLING_DOC_LINK =
 export const LEGACY_BROWSER_LIST = {
   [LegacyBrowser.IE_PRE_9]: {
     icon: 'internet-explorer',
-    title: t('Internet Explorer Version 8 and lower'),
+    title: t('Internet Explorer version 8 and lower'),
   },
   [LegacyBrowser.IE9]: {
     icon: 'internet-explorer',
-    title: t('Internet Explorer Version 9'),
+    title: t('Internet Explorer version 9'),
   },
   [LegacyBrowser.IE10]: {
     icon: 'internet-explorer',
-    title: t('Internet Explorer Version 10'),
+    title: t('Internet Explorer version 10'),
   },
   [LegacyBrowser.IE11]: {
     icon: 'internet-explorer',
-    title: t('Internet Explorer Version 11'),
+    title: t('Internet Explorer version 11'),
   },
   [LegacyBrowser.SAFARI_PRE_6]: {
     icon: 'safari',
-    title: t('Safari Version 5 and lower'),
+    title: t('Safari version 5 and lower'),
   },
   [LegacyBrowser.OPERA_PRE_15]: {
     icon: 'opera',
-    title: t('Opera Version 14 and lower'),
+    title: t('Opera version 14 and lower'),
   },
   [LegacyBrowser.OPERA_MINI_PRE_8]: {
     icon: 'opera',
-    title: t('Opera Mini Version 8 and lower'),
+    title: t('Opera Mini version 8 and lower'),
   },
   [LegacyBrowser.ANDROID_PRE_4]: {
     icon: 'android',
-    title: t('Android Version 3 and lower'),
+    title: t('Android version 3 and lower'),
   },
 };