ref(sampling): Code tweaks (#35135)

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

@@ -22,7 +22,7 @@ import PermissionAlert from 'sentry/views/settings/organization/permissionAlert'
 
 import {modalCss} from './modal/utils';
 import Modal from './modal';
-import RulesPanel from './rulesPanel';
+import {RulesPanel} from './rulesPanel';
 import {DYNAMIC_SAMPLING_DOC_LINK} from './utils';
 
 type Props = AsyncView['props'] & {

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

@@ -3,38 +3,41 @@ import Feature from 'sentry/components/acl/feature';
 import FeatureDisabled from 'sentry/components/acl/featureDisabled';
 import {PanelAlert} from 'sentry/components/panels';
 import {t} from 'sentry/locale';
-import {Organization, Project} from 'sentry/types';
-import withOrganization from 'sentry/utils/withOrganization';
+import {Project} from 'sentry/types';
+import useOrganization from 'sentry/utils/useOrganization';
 
 import FiltersAndSampling from './filtersAndSampling';
 
 type Props = {
-  organization: Organization;
   project: Project;
 };
 
-const Index = ({organization, ...props}: Props) => (
-  <Feature
-    features={['filters-and-sampling']}
-    organization={organization}
-    renderDisabled={() => (
-      <FeatureDisabled
-        alert={PanelAlert}
-        features={['organization:filters-and-sampling']}
-        featureName={t('Filters & Sampling')}
-      />
-    )}
-  >
-    <Access organization={organization} access={['project:write']}>
-      {({hasAccess}) => (
-        <FiltersAndSampling
-          {...props}
-          hasAccess={hasAccess}
-          organization={organization}
+function Index(props: Props) {
+  const organization = useOrganization();
+
+  return (
+    <Feature
+      features={['filters-and-sampling']}
+      organization={organization}
+      renderDisabled={() => (
+        <FeatureDisabled
+          alert={PanelAlert}
+          features={['organization:filters-and-sampling']}
+          featureName={t('Filters & Sampling')}
         />
       )}
-    </Access>
-  </Feature>
-);
+    >
+      <Access organization={organization} access={['project:write']}>
+        {({hasAccess}) => (
+          <FiltersAndSampling
+            {...props}
+            hasAccess={hasAccess}
+            organization={organization}
+          />
+        )}
+      </Access>
+    </Feature>
+  );
+}
 
-export default withOrganization(Index);
+export default Index;

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

@@ -1,12 +1,12 @@
-import {Component} from 'react';
+import {useState} from 'react';
 import {createPortal} from 'react-dom';
 import {DndContext, DragOverlay} from '@dnd-kit/core';
 import {arrayMove, SortableContext, verticalListSortingStrategy} from '@dnd-kit/sortable';
 
 import {DynamicSamplingRule} from 'sentry/types/dynamicSampling';
 
-import Item, {ItemProps} from './item';
-import SortableItem, {SortableItemProps} from './sortableItem';
+import {Item, ItemProps} from './item';
+import {SortableItem, SortableItemProps} from './sortableItem';
 
 export type UpdateItemsProps = {
   activeIndex: string;
@@ -14,98 +14,87 @@ export type UpdateItemsProps = {
   reorderedItems: Array<string>;
 };
 
-type DefaultProps = Pick<SortableItemProps, 'disabled' | 'wrapperStyle'>;
-
-type Props = Pick<ItemProps, 'renderItem'> & {
-  items: Array<
-    Omit<DynamicSamplingRule, 'id'> & {
-      id: string;
-    }
-  >;
-  onUpdateItems: (props: UpdateItemsProps) => void;
-} & DefaultProps;
+type Props = Pick<SortableItemProps, 'disabled' | 'wrapperStyle'> &
+  Pick<ItemProps, 'renderItem'> & {
+    items: Array<
+      Omit<DynamicSamplingRule, 'id'> & {
+        id: string;
+      }
+    >;
+    onUpdateItems: (props: UpdateItemsProps) => void;
+  };
 
 type State = {
   activeId?: string;
 };
 
-class DraggableList extends Component<Props, State> {
-  static defaultProps: DefaultProps = {
-    disabled: false,
-    wrapperStyle: () => ({}),
-  };
-
-  state: State = {};
-
-  handleChangeActive = (activeId: State['activeId']) => {
-    this.setState({activeId});
-  };
-
-  render() {
-    const {activeId} = this.state;
-    const {items, onUpdateItems, renderItem, disabled, wrapperStyle} = this.props;
-
-    const itemIds = items.map(item => item.id);
-    const getIndex = itemIds.indexOf.bind(itemIds);
-    const activeIndex = activeId ? getIndex(activeId) : -1;
-
-    return (
-      <DndContext
-        onDragStart={({active}) => {
-          if (!active) {
-            return;
+export function DraggableList({
+  items,
+  onUpdateItems,
+  renderItem,
+  disabled = false,
+  wrapperStyle = () => ({}),
+}: Props) {
+  const [state, setState] = useState<State>({});
+
+  const itemIds = items.map(item => item.id);
+  const getIndex = itemIds.indexOf.bind(itemIds);
+  const activeIndex = state.activeId ? getIndex(state.activeId) : -1;
+
+  return (
+    <DndContext
+      onDragStart={({active}) => {
+        if (!active) {
+          return;
+        }
+
+        setState({activeId: active.id});
+      }}
+      onDragEnd={({over}) => {
+        setState({activeId: undefined});
+
+        if (over) {
+          const overIndex = getIndex(over.id);
+
+          if (activeIndex !== overIndex) {
+            onUpdateItems({
+              activeIndex,
+              overIndex,
+              reorderedItems: arrayMove(itemIds, activeIndex, overIndex),
+            });
           }
-
-          this.handleChangeActive(active.id);
-        }}
-        onDragEnd={({over}) => {
-          this.handleChangeActive(undefined);
-
-          if (over) {
-            const overIndex = getIndex(over.id);
-
-            if (activeIndex !== overIndex) {
-              onUpdateItems({
-                activeIndex,
-                overIndex,
-                reorderedItems: arrayMove(itemIds, activeIndex, overIndex),
-              });
-            }
-          }
-        }}
-        onDragCancel={() => this.handleChangeActive(undefined)}
-      >
-        <SortableContext items={itemIds} strategy={verticalListSortingStrategy}>
-          {itemIds.map((itemId, index) => (
-            <SortableItem
-              key={itemId}
-              id={itemId}
-              index={index}
+        }
+      }}
+      onDragCancel={() => setState({activeId: undefined})}
+    >
+      <SortableContext items={itemIds} strategy={verticalListSortingStrategy}>
+        {itemIds.map((itemId, index) => (
+          <SortableItem
+            key={itemId}
+            id={itemId}
+            index={index}
+            renderItem={renderItem}
+            disabled={disabled || items[index].disabled}
+            wrapperStyle={wrapperStyle}
+          />
+        ))}
+      </SortableContext>
+      {createPortal(
+        <DragOverlay>
+          {state.activeId ? (
+            <Item
+              value={itemIds[activeIndex]}
               renderItem={renderItem}
-              disabled={disabled || items[index].disabled}
-              wrapperStyle={wrapperStyle}
+              wrapperStyle={wrapperStyle({
+                index: activeIndex,
+                isDragging: true,
+                isSorting: false,
+              })}
             />
-          ))}
-        </SortableContext>
-        {createPortal(
-          <DragOverlay>
-            {activeId ? (
-              <Item
-                value={itemIds[activeIndex]}
-                renderItem={renderItem}
-                wrapperStyle={wrapperStyle({
-                  index: activeIndex,
-                  isDragging: true,
-                  isSorting: false,
-                })}
-              />
-            ) : null}
-          </DragOverlay>,
-          document.body
-        )}
-      </DndContext>
-    );
-  }
+          ) : null}
+        </DragOverlay>,
+        document.body
+      )}
+    </DndContext>
+  );
 }
-
-export default DraggableList;

static/app/views/settings/project/filtersAndSampling/rules/draggableList/item.tsx

@@ -28,7 +28,7 @@ export type ItemProps = {
   wrapperStyle?: React.CSSProperties;
 };
 
-function Item({
+export function Item({
   value,
   dragging,
   index,
@@ -72,8 +72,6 @@ function Item({
   );
 }
 
-export default Item;
-
 const boxShadowBorder = '0 0 0 calc(1px / var(--scale-x, 1)) rgba(63, 63, 68, 0.05)';
 const boxShadowCommon = '0 1px calc(3px / var(--scale-x, 1)) 0 rgba(34, 33, 81, 0.15)';
 const boxShadow = `${boxShadowBorder}, ${boxShadowCommon}`;

static/app/views/settings/project/filtersAndSampling/rules/draggableList/sortableItem.tsx

@@ -1,6 +1,6 @@
 import {useSortable} from '@dnd-kit/sortable';
 
-import Item from './item';
+import {Item} from './item';
 
 export type SortableItemProps = Pick<
   React.ComponentProps<typeof Item>,
@@ -16,7 +16,7 @@ export type SortableItemProps = Pick<
   disabled?: boolean;
 };
 
-function SortableItem({
+export function SortableItem({
   id,
   index,
   renderItem,
@@ -48,5 +48,3 @@ function SortableItem({
     />
   );
 }
-
-export default SortableItem;

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

@@ -12,8 +12,8 @@ import {
   DynamicSamplingRuleType,
 } from 'sentry/types/dynamicSampling';
 
-import DraggableList, {UpdateItemsProps} from './draggableList';
-import Rule from './rule';
+import {DraggableList, UpdateItemsProps} from './draggableList';
+import {Rule} from './rule';
 import {layout} from './utils';
 
 type Props = {
@@ -29,7 +29,7 @@ type State = {
   rules: Array<DynamicSamplingRule>;
 };
 
-class Rules extends PureComponent<Props, State> {
+export class Rules extends PureComponent<Props, State> {
   state: State = {rules: []};
 
   componentDidMount() {
@@ -184,8 +184,6 @@ class Rules extends PureComponent<Props, State> {
   }
 }
 
-export default Rules;
-
 const StyledPanelTable = styled(PanelTable)`
   overflow: visible;
   margin-bottom: 0;

static/app/views/settings/project/filtersAndSampling/rules/rule/actions.tsx

@@ -28,7 +28,7 @@ type Props = {
   onOpenMenuActions: () => void;
 };
 
-function Actions({
+export function Actions({
   disabled,
   onEditRule,
   onDeleteRule,
@@ -116,8 +116,6 @@ function Actions({
   );
 }
 
-export default Actions;
-
 const StyledButtonbar = styled(ButtonBar)`
   justify-content: flex-end;
   flex: 1;

static/app/views/settings/project/filtersAndSampling/rules/rule/conditions.tsx

@@ -15,7 +15,7 @@ type Props = {
   condition: DynamicSamplingCondition;
 };
 
-function Conditions({condition}: Props) {
+export function Conditions({condition}: Props) {
   function getConvertedValue(value: DynamicSamplingConditionLogicalInner['value']) {
     if (Array.isArray(value)) {
       return (
@@ -59,8 +59,6 @@ function Conditions({condition}: Props) {
   }
 }
 
-export default Conditions;
-
 const Wrapper = styled('div')`
   display: grid;
   gap: ${space(1.5)};

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

@@ -1,4 +1,4 @@
-import {Component} from 'react';
+import {useEffect, useState} from 'react';
 import {DraggableSyntheticListeners, UseDraggableArguments} from '@dnd-kit/core';
 import {css} from '@emotion/react';
 import styled from '@emotion/styled';
@@ -14,8 +14,8 @@ import {
 
 import {layout} from '../utils';
 
-import Actions from './actions';
-import Conditions from './conditions';
+import {Actions} from './actions';
+import {Conditions} from './conditions';
 
 type Props = {
   dragging: boolean;
@@ -33,94 +33,72 @@ type State = {
   isMenuActionsOpen: boolean;
 };
 
-class Rule extends Component<Props, State> {
-  state: State = {
-    isMenuActionsOpen: false,
-  };
-
-  componentDidMount() {
-    this.checkMenuActionsVisibility();
-  }
-
-  componentDidUpdate() {
-    this.checkMenuActionsVisibility();
-  }
-
-  checkMenuActionsVisibility() {
-    const {dragging, sorting} = this.props;
-    const {isMenuActionsOpen} = this.state;
-    if ((dragging || sorting) && isMenuActionsOpen) {
-      this.setState({isMenuActionsOpen: false});
+export function Rule({
+  dragging,
+  sorting,
+  rule,
+  noPermission,
+  onEditRule,
+  onDeleteRule,
+  listeners,
+  operator,
+  grabAttributes,
+}: Props) {
+  const [state, setState] = useState<State>({isMenuActionsOpen: false});
+
+  useEffect(() => {
+    if ((dragging || sorting) && state.isMenuActionsOpen) {
+      setState({isMenuActionsOpen: false});
     }
-  }
-
-  handleChangeMenuAction = () => {
-    this.setState(state => ({
-      isMenuActionsOpen: !state.isMenuActionsOpen,
-    }));
-  };
-
-  render() {
-    const {
-      rule,
-      noPermission,
-      onEditRule,
-      onDeleteRule,
-      listeners,
-      operator,
-      grabAttributes,
-    } = this.props;
-
-    const {isMenuActionsOpen} = this.state;
-
-    return (
-      <Columns disabled={rule.disabled ?? noPermission}>
-        <GrabColumn>
-          <Tooltip
-            title={
-              noPermission
-                ? t('You do not have permission to reorder rules.')
-                : operator === DynamicSamplingRuleOperator.ELSE
-                ? t('Rules without conditions cannot be reordered.')
-                : undefined
-            }
-          >
-            <IconGrabbableWrapper {...listeners} {...grabAttributes}>
-              <IconGrabbable />
-            </IconGrabbableWrapper>
-          </Tooltip>
-        </GrabColumn>
-        <Column>
-          <Operator>
-            {operator === DynamicSamplingRuleOperator.IF
-              ? t('If')
-              : operator === DynamicSamplingRuleOperator.ELSE_IF
-              ? t('Else if')
-              : t('Else')}
-          </Operator>
-        </Column>
-        <Column>
-          <Conditions condition={rule.condition} />
-        </Column>
-        <CenteredColumn>
-          <SampleRate>{`${rule.sampleRate * 100}\u0025`}</SampleRate>
-        </CenteredColumn>
-        <Column>
-          <Actions
-            onEditRule={onEditRule}
-            onDeleteRule={onDeleteRule}
-            disabled={noPermission}
-            onOpenMenuActions={this.handleChangeMenuAction}
-            isMenuActionsOpen={isMenuActionsOpen}
-          />
-        </Column>
-      </Columns>
-    );
-  }
+  }, [dragging, sorting, state.isMenuActionsOpen]);
+
+  return (
+    <Columns disabled={rule.disabled ?? noPermission}>
+      <GrabColumn>
+        <Tooltip
+          title={
+            noPermission
+              ? t('You do not have permission to reorder rules.')
+              : operator === DynamicSamplingRuleOperator.ELSE
+              ? t('Rules without conditions cannot be reordered.')
+              : undefined
+          }
+        >
+          <IconGrabbableWrapper {...listeners} {...grabAttributes}>
+            <IconGrabbable />
+          </IconGrabbableWrapper>
+        </Tooltip>
+      </GrabColumn>
+      <Column>
+        <Operator>
+          {operator === DynamicSamplingRuleOperator.IF
+            ? t('If')
+            : operator === DynamicSamplingRuleOperator.ELSE_IF
+            ? t('Else if')
+            : t('Else')}
+        </Operator>
+      </Column>
+      <Column>
+        <Conditions condition={rule.condition} />
+      </Column>
+      <CenteredColumn>
+        <SampleRate>{`${rule.sampleRate * 100}\u0025`}</SampleRate>
+      </CenteredColumn>
+      <Column>
+        <Actions
+          onEditRule={onEditRule}
+          onDeleteRule={onDeleteRule}
+          disabled={noPermission}
+          onOpenMenuActions={() =>
+            setState({isMenuActionsOpen: !state.isMenuActionsOpen})
+          }
+          isMenuActionsOpen={state.isMenuActionsOpen}
+        />
+      </Column>
+    </Columns>
+  );
 }
 
-export default Rule;
-
 const Operator = styled('div')`
   color: ${p => p.theme.active};
 `;

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

@@ -6,14 +6,14 @@ import {Panel, PanelFooter} from 'sentry/components/panels';
 import {t} from 'sentry/locale';
 import space from 'sentry/styles/space';
 
-import Rules from './rules';
+import {Rules} from './rules';
 import {DYNAMIC_SAMPLING_DOC_LINK} from './utils';
 
 type Props = Omit<React.ComponentProps<typeof Rules>, 'emptyMessage'> & {
   onAddRule: () => void;
 };
 
-function RulesPanel({
+export function RulesPanel({
   rules,
   onAddRule,
   onEditRule,
@@ -45,8 +45,6 @@ function RulesPanel({
   );
 }
 
-export default RulesPanel;
-
 const StyledPanelFooter = styled(PanelFooter)`
   padding: ${space(1)} ${space(2)};
   @media (min-width: ${p => p.theme.breakpoints[0]}) {