From a4f7ed94c6dc730e2139dbb7ddfa42fccb2c4abe Mon Sep 17 00:00:00 2001
From: Arthur Knaus <arthur.knaus@sentry.io>
Date: Thu, 30 Jan 2025 10:00:38 +0100
Subject: [PATCH 1/2] ref(dynamic-sampling): Reduce code duplication

---
 .../organizationSampleRateField.tsx           |  69 ---------
 .../organizationSampleRateInput.tsx           | 135 ++++++++++++++++++
 .../dynamicSampling/projectsEditTable.tsx     |  97 +++----------
 .../dynamicSampling/projectsPreviewTable.tsx  |  27 +++-
 .../dynamicSampling/samplingBreakdown.tsx     |   2 +-
 5 files changed, 175 insertions(+), 155 deletions(-)
 delete mode 100644 static/app/views/settings/dynamicSampling/organizationSampleRateField.tsx
 create mode 100644 static/app/views/settings/dynamicSampling/organizationSampleRateInput.tsx

diff --git a/static/app/views/settings/dynamicSampling/organizationSampleRateField.tsx b/static/app/views/settings/dynamicSampling/organizationSampleRateField.tsx
deleted file mode 100644
index 7c54c10dbbb71c..00000000000000
--- a/static/app/views/settings/dynamicSampling/organizationSampleRateField.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import {css} from '@emotion/react';
-import styled from '@emotion/styled';
-
-import FieldGroup from 'sentry/components/forms/fieldGroup';
-import {Tooltip} from 'sentry/components/tooltip';
-import {t} from 'sentry/locale';
-import {PercentInput} from 'sentry/views/settings/dynamicSampling/percentInput';
-import {useHasDynamicSamplingWriteAccess} from 'sentry/views/settings/dynamicSampling/utils/access';
-import {organizationSamplingForm} from 'sentry/views/settings/dynamicSampling/utils/organizationSamplingForm';
-
-const {useFormField} = organizationSamplingForm;
-
-export function OrganizationSampleRateField() {
-  const field = useFormField('targetSampleRate');
-  const hasAccess = useHasDynamicSamplingWriteAccess();
-
-  return (
-    <FieldGroup
-      disabled={!hasAccess}
-      flexibleControlStateSize
-      alignRight
-      label={<label>{t('Target Sample Rate')}</label>}
-      help={t(
-        'Set a global sample rate for your entire organization. This will determine how much incoming traffic should be stored across all your projects.'
-      )}
-    >
-      <InputWrapper
-        css={css`
-          width: 120px;
-        `}
-      >
-        <Tooltip
-          disabled={hasAccess}
-          title={t('You do not have permission to change the sample rate.')}
-        >
-          <PercentInput
-            type="number"
-            disabled={!hasAccess}
-            value={field.value}
-            onChange={event => field.onChange(event.target.value)}
-          />
-        </Tooltip>
-        {field.error ? (
-          <ErrorMessage>{field.error}</ErrorMessage>
-        ) : field.hasChanged ? (
-          <PreviousValue>{t('previous: %f%%', field.initialValue)}</PreviousValue>
-        ) : null}
-      </InputWrapper>
-    </FieldGroup>
-  );
-}
-
-const PreviousValue = styled('span')`
-  font-size: ${p => p.theme.fontSizeExtraSmall};
-  color: ${p => p.theme.subText};
-`;
-
-const ErrorMessage = styled('span')`
-  font-size: ${p => p.theme.fontSizeExtraSmall};
-  color: ${p => p.theme.error};
-`;
-
-const InputWrapper = styled('div')`
-  padding-top: 8px;
-  height: 58px;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-`;
diff --git a/static/app/views/settings/dynamicSampling/organizationSampleRateInput.tsx b/static/app/views/settings/dynamicSampling/organizationSampleRateInput.tsx
new file mode 100644
index 00000000000000..e6a3bcc590710d
--- /dev/null
+++ b/static/app/views/settings/dynamicSampling/organizationSampleRateInput.tsx
@@ -0,0 +1,135 @@
+import type React from 'react';
+import {useRef} from 'react';
+import styled from '@emotion/styled';
+
+import {Button} from 'sentry/components/button';
+import {Tooltip} from 'sentry/components/tooltip';
+import {IconEdit} from 'sentry/icons';
+import {t} from 'sentry/locale';
+import {space} from 'sentry/styles/space';
+import {PercentInput} from 'sentry/views/settings/dynamicSampling/percentInput';
+
+interface Props {
+  hasAccess: boolean;
+  help: React.ReactNode;
+  label: React.ReactNode;
+  onChange: (value: string) => void;
+  previousValue: string;
+  showPreviousValue: boolean;
+  value: string;
+  error?: string;
+  isBulkEditActive?: boolean;
+  isBulkEditEnabled?: boolean;
+  onBulkEditChange?: (value: boolean) => void;
+}
+
+export function OrganizationSampleRateInput({
+  value,
+  onChange,
+  hasAccess,
+  isBulkEditEnabled,
+  isBulkEditActive,
+  label,
+  help,
+  error,
+  previousValue,
+  showPreviousValue,
+  onBulkEditChange,
+}: Props) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const showBulkEditButton = hasAccess && isBulkEditEnabled && !isBulkEditActive;
+  return (
+    <Wrapper>
+      <Description>
+        <Label>{label}</Label>
+        <HelpText>{help}</HelpText>
+      </Description>
+      <InputWrapper>
+        <FlexRow>
+          {showBulkEditButton && (
+            <Button
+              title={t('Proportionally scale project rates')}
+              aria-label={t('Proportionally scale project rates')}
+              borderless
+              size="sm"
+              onClick={() => onBulkEditChange?.(true)}
+              icon={<IconEdit />}
+            />
+          )}
+          <Tooltip
+            disabled={hasAccess}
+            title={t('You do not have permission to change the sample rate.')}
+          >
+            <PercentInput
+              type="number"
+              disabled={!hasAccess}
+              value={value}
+              size="sm"
+              ref={inputRef}
+              onKeyDown={event => {
+                if (event.key === 'Enter' && isBulkEditActive) {
+                  event.preventDefault();
+                  inputRef.current?.blur();
+                }
+              }}
+              onBlur={() => onBulkEditChange?.(false)}
+              onChange={event => onChange(event.target.value)}
+            />
+          </Tooltip>
+        </FlexRow>
+        {error ? (
+          <ErrorMessage>{error}</ErrorMessage>
+        ) : showPreviousValue ? (
+          <PreviousValue>{t('previous: %f%%', previousValue)}</PreviousValue>
+        ) : null}
+      </InputWrapper>
+    </Wrapper>
+  );
+}
+
+const FlexRow = styled('div')`
+  display: flex;
+  gap: ${space(1)};
+`;
+
+const Wrapper = styled(FlexRow)`
+  padding: ${space(1.5)} ${space(2)} ${space(1)};
+  border-bottom: 1px solid ${p => p.theme.innerBorder};
+  gap: ${space(4)};
+`;
+
+const Description = styled('div')`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: ${space(0.5)};
+  padding-bottom: ${space(0.5)};
+`;
+
+const Label = styled('label')`
+  margin-bottom: 0;
+`;
+
+const HelpText = styled('div')`
+  font-size: ${p => p.theme.fontSizeSmall};
+  color: ${p => p.theme.subText};
+`;
+
+const PreviousValue = styled('span')`
+  font-size: ${p => p.theme.fontSizeExtraSmall};
+  color: ${p => p.theme.subText};
+`;
+
+const ErrorMessage = styled('span')`
+  font-size: ${p => p.theme.fontSizeExtraSmall};
+  color: ${p => p.theme.error};
+`;
+
+const InputWrapper = styled('div')`
+  height: 50px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  flex-shrink: 0;
+  align-items: flex-end;
+`;
diff --git a/static/app/views/settings/dynamicSampling/projectsEditTable.tsx b/static/app/views/settings/dynamicSampling/projectsEditTable.tsx
index 634de0989b597a..b42ec028a771fa 100644
--- a/static/app/views/settings/dynamicSampling/projectsEditTable.tsx
+++ b/static/app/views/settings/dynamicSampling/projectsEditTable.tsx
@@ -3,16 +3,12 @@ import {Fragment, useCallback, useEffect, useMemo, useRef, useState} from 'react
 import {css} from '@emotion/react';
 import styled from '@emotion/styled';
 
-import {Button} from 'sentry/components/button';
-import FieldGroup from 'sentry/components/forms/fieldGroup';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
 import Panel from 'sentry/components/panels/panel';
-import {Tooltip} from 'sentry/components/tooltip';
-import {IconEdit} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import useProjects from 'sentry/utils/useProjects';
-import {PercentInput} from 'sentry/views/settings/dynamicSampling/percentInput';
+import {OrganizationSampleRateInput} from 'sentry/views/settings/dynamicSampling/organizationSampleRateInput';
 import {ProjectsTable} from 'sentry/views/settings/dynamicSampling/projectsTable';
 import {SamplingBreakdown} from 'sentry/views/settings/dynamicSampling/samplingBreakdown';
 import {useHasDynamicSamplingWriteAccess} from 'sentry/views/settings/dynamicSampling/utils/access';
@@ -85,8 +81,7 @@ export function ProjectsEditTable({
   );
 
   const handleOrgChange = useCallback(
-    (event: React.ChangeEvent<HTMLInputElement>) => {
-      const newRate = event.target.value;
+    (newRate: string) => {
       if (editMode === 'single') {
         projectRateSnapshotRef.current = value;
       }
@@ -121,10 +116,12 @@ export function ProjectsEditTable({
     [dataByProjectId, editMode, onChange, onEditModeChange, value]
   );
 
-  const handleOrgBlur = useCallback(() => {
-    setIsBulkEditEnabled(false);
-    // Parse to ensure valid values
-    setOrgRate(rate => (parsePercent(rate, 1) * 100).toString());
+  const handleBulkEditChange = useCallback((newValue: boolean) => {
+    setIsBulkEditEnabled(newValue);
+    if (newValue === false) {
+      // Parse to ensure valid values
+      setOrgRate(rate => (parsePercent(rate, 1) * 100).toString());
+    }
   }, []);
 
   const items = useMemo(
@@ -202,55 +199,18 @@ export function ProjectsEditTable({
           />
         ) : (
           <Fragment>
-            <FieldGroup
-              label={<label>{t('Estimated Organization Rate')}</label>}
+            <OrganizationSampleRateInput
+              label={t('Estimated Organization Rate')}
               help={t('An estimate of the combined sample rate for all projects.')}
-              flexibleControlStateSize
-              alignRight
-            >
-              <InputWrapper>
-                <FlexRow>
-                  {hasAccess && !isBulkEditEnabled && (
-                    <Button
-                      title={t('Proportionally scale project rates')}
-                      aria-label={t('Proportionally scale project rates')}
-                      borderless
-                      size="sm"
-                      onClick={() => {
-                        setIsBulkEditEnabled(true);
-                      }}
-                      icon={<IconEdit />}
-                    />
-                  )}
-                  <Tooltip
-                    disabled={hasAccess}
-                    title={t('You do not have permission to change the sample rate')}
-                  >
-                    <PercentInput
-                      type="number"
-                      ref={inputRef}
-                      disabled={!hasAccess || !isBulkEditEnabled}
-                      size="sm"
-                      onChange={handleOrgChange}
-                      value={projectedOrgRate}
-                      onKeyDown={event => {
-                        if (event.key === 'Enter') {
-                          event.preventDefault();
-                          inputRef.current?.blur();
-                        }
-                      }}
-                      onBlur={handleOrgBlur}
-                    />
-                  </Tooltip>
-                </FlexRow>
-                <PreviousValue>
-                  {initialOrgRate !== projectedOrgRate
-                    ? t('previous: %f%%', initialOrgRate)
-                    : // Placeholder char to prevent the line from collapsing
-                      '\u200b'}
-                </PreviousValue>
-              </InputWrapper>
-            </FieldGroup>
+              value={projectedOrgRate}
+              hasAccess={hasAccess}
+              isBulkEditEnabled
+              isBulkEditActive={isBulkEditEnabled}
+              onBulkEditChange={handleBulkEditChange}
+              onChange={handleOrgChange}
+              showPreviousValue={initialOrgRate !== projectedOrgRate}
+              previousValue={initialOrgRate}
+            />
             <ProjectsTable
               rateHeader={t('Target Rate')}
               canEdit={!isBulkEditEnabled}
@@ -268,25 +228,6 @@ export function ProjectsEditTable({
   );
 }
 
-const InputWrapper = styled('div')`
-  display: flex;
-  flex-direction: column;
-  gap: ${space(0.5)};
-  align-items: flex-end;
-`;
-
-const FlexRow = styled('div')`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: ${space(1)};
-`;
-
-const PreviousValue = styled('span')`
-  font-size: ${p => p.theme.fontSizeExtraSmall};
-  color: ${p => p.theme.subText};
-`;
-
 const Footer = styled('div')`
   border-top: 1px solid ${p => p.theme.innerBorder};
   display: flex;
diff --git a/static/app/views/settings/dynamicSampling/projectsPreviewTable.tsx b/static/app/views/settings/dynamicSampling/projectsPreviewTable.tsx
index 59906234c9bc1d..5a8749df1241aa 100644
--- a/static/app/views/settings/dynamicSampling/projectsPreviewTable.tsx
+++ b/static/app/views/settings/dynamicSampling/projectsPreviewTable.tsx
@@ -5,9 +5,10 @@ import Panel from 'sentry/components/panels/panel';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import {useDebouncedValue} from 'sentry/utils/useDebouncedValue';
-import {OrganizationSampleRateField} from 'sentry/views/settings/dynamicSampling/organizationSampleRateField';
+import {OrganizationSampleRateInput} from 'sentry/views/settings/dynamicSampling/organizationSampleRateInput';
 import {ProjectsTable} from 'sentry/views/settings/dynamicSampling/projectsTable';
 import {SamplingBreakdown} from 'sentry/views/settings/dynamicSampling/samplingBreakdown';
+import {useHasDynamicSamplingWriteAccess} from 'sentry/views/settings/dynamicSampling/utils/access';
 import {formatPercent} from 'sentry/views/settings/dynamicSampling/utils/formatPercent';
 import {organizationSamplingForm} from 'sentry/views/settings/dynamicSampling/utils/organizationSamplingForm';
 import {parsePercent} from 'sentry/views/settings/dynamicSampling/utils/parsePercent';
@@ -27,11 +28,12 @@ interface Props {
 }
 
 export function ProjectsPreviewTable({actions, isLoading, period, sampleCounts}: Props) {
-  const {value: targetSampleRate, initialValue: initialTargetSampleRate} =
-    useFormField('targetSampleRate');
+  const smapleRateField = useFormField('targetSampleRate');
+
+  const hasAccess = useHasDynamicSamplingWriteAccess();
 
   const debouncedTargetSampleRate = useDebouncedValue(
-    targetSampleRate,
+    smapleRateField.value,
     // For longer lists we debounce the input to avoid too many re-renders
     sampleCounts.length > 100 ? 200 : 0
   );
@@ -56,7 +58,7 @@ export function ProjectsPreviewTable({actions, isLoading, period, sampleCounts}:
   }, [debouncedTargetSampleRate, balancingItems]);
 
   const initialSampleRateById = useMemo(() => {
-    const targetRate = parsePercent(initialTargetSampleRate);
+    const targetRate = parsePercent(smapleRateField.initialValue);
     const {balancedItems: initialBalancedItems} = balanceSampleRate({
       targetSampleRate: targetRate,
       items: balancingItems,
@@ -66,7 +68,7 @@ export function ProjectsPreviewTable({actions, isLoading, period, sampleCounts}:
       acc[item.id] = item.sampleRate;
       return acc;
     }, {});
-  }, [initialTargetSampleRate, balancingItems]);
+  }, [smapleRateField.initialValue, balancingItems]);
 
   const itemsWithFormattedNumbers = useMemo(() => {
     return balancedItems.map(item => ({
@@ -91,7 +93,18 @@ export function ProjectsPreviewTable({actions, isLoading, period, sampleCounts}:
         isLoading={isLoading}
       />
       <Panel>
-        <OrganizationSampleRateField />
+        <OrganizationSampleRateInput
+          hasAccess={hasAccess}
+          value={smapleRateField.value}
+          onChange={smapleRateField.onChange}
+          previousValue={smapleRateField.initialValue}
+          showPreviousValue={smapleRateField.hasChanged}
+          error={smapleRateField.error}
+          label={t('Target Sample Rate')}
+          help={t(
+            'Set a global sample rate for your entire organization. This will determine how much incoming traffic should be stored across all your projects.'
+          )}
+        />
         <ProjectsTable
           rateHeader={t('Target Rate')}
           canEdit={false}
diff --git a/static/app/views/settings/dynamicSampling/samplingBreakdown.tsx b/static/app/views/settings/dynamicSampling/samplingBreakdown.tsx
index 9920ced34ddf96..e3580f351a0529 100644
--- a/static/app/views/settings/dynamicSampling/samplingBreakdown.tsx
+++ b/static/app/views/settings/dynamicSampling/samplingBreakdown.tsx
@@ -168,7 +168,7 @@ export function SamplingBreakdown({
 }
 
 const StyledPanel = styled(Panel)`
-  padding: ${space(2)};
+  padding: ${space(1.5)} ${space(2)};
   margin-bottom: ${space(1.5)};
 `;
 

From 97b3d8cd32243711dea1d28c89f666d825ef83ec Mon Sep 17 00:00:00 2001
From: Arthur Knaus <arthur.knaus@sentry.io>
Date: Thu, 30 Jan 2025 10:05:19 +0100
Subject: [PATCH 2/2] fix bulk edit behaviour

---
 .../settings/dynamicSampling/organizationSampleRateInput.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/static/app/views/settings/dynamicSampling/organizationSampleRateInput.tsx b/static/app/views/settings/dynamicSampling/organizationSampleRateInput.tsx
index e6a3bcc590710d..1700d71df5bee2 100644
--- a/static/app/views/settings/dynamicSampling/organizationSampleRateInput.tsx
+++ b/static/app/views/settings/dynamicSampling/organizationSampleRateInput.tsx
@@ -62,7 +62,7 @@ export function OrganizationSampleRateInput({
           >
             <PercentInput
               type="number"
-              disabled={!hasAccess}
+              disabled={!hasAccess || (isBulkEditEnabled && !isBulkEditActive)}
               value={value}
               size="sm"
               ref={inputRef}