ref(ui): Drop unused optional args in charts, duration, and seer menus

static/app/components/assigneeSelectorDropdown.spec.tsx

@@ -629,7 +629,7 @@ describe('AssigneeSelectorDropdown', () => {
     expect(await screen.findByText('Suggested based on')).toBeInTheDocument();
   });
 
-  it('shows the suggested assignee even if they would be cut off by the size limit', async () => {
+  it('shows the suggested assignee at the top of the menu', async () => {
     jest.spyOn(GroupStore, 'get').mockImplementation(() => GROUP_3);
 
     render(
@@ -638,18 +638,14 @@ describe('AssigneeSelectorDropdown', () => {
         loading={false}
         memberList={[USER_1, USER_2, USER_3, USER_4]}
         onAssign={newAssignee => updateGroup(GROUP_3, newAssignee)}
-        sizeLimit={2}
       />
     );
 
     expect(screen.getByTestId('suggested-avatar-stack')).toBeInTheDocument();
     expect(await screen.findByText('GH')).toBeInTheDocument();
 
     await openMenu();
-    // User 4, Git Hub, would have normally been cut off by the size limit since it is
-    // alphabetically last, but it should still be shown because it is a suggested assignee
     const options = await screen.findAllByRole('option');
-    expect(options).toHaveLength(2);
     expect(options[0]).toHaveTextContent('GH');
   });
 

static/app/components/assigneeSelectorDropdown.tsx

@@ -30,6 +30,8 @@ import type {User} from 'sentry/types/user';
 import {buildTeamId} from 'sentry/utils';
 import {useUser} from 'sentry/utils/useUser';
 
+const DEFAULT_SIZE_LIMIT = 150;
+
 const suggestedReasonTable: Record<SuggestedOwnerReason, string> = {
   suspectCommit: t('Suspect Commit'),
   ownershipRule: t('Ownership Rule'),
@@ -99,10 +101,6 @@ interface AssigneeSelectorDropdownProps {
    * Optional list of suggested owners of the group
    */
   owners?: Array<Omit<SuggestedAssignee, 'assignee'>>;
-  /**
-   * Maximum number of teams/users to display in the dropdown
-   */
-  sizeLimit?: number;
   /**
    * Optional trigger for the assignee selector. If nothing passed in,
    * the default trigger will be used
@@ -215,7 +213,6 @@ export function AssigneeSelectorDropdown({
   onAssign,
   onClear,
   owners,
-  sizeLimit = 150,
   trigger,
   additionalMenuFooterItems,
 }: AssigneeSelectorDropdownProps) {
@@ -538,7 +535,7 @@ export function AssigneeSelectorDropdown({
             {additionalMenuFooterItems}
           </Flex>
         )}
-        sizeLimit={sizeLimit}
+        sizeLimit={DEFAULT_SIZE_LIMIT}
         sizeLimitMessage="Use search to find more users and teams..."
         strategy="fixed"
       />

static/app/components/carousel.spec.tsx

@@ -109,7 +109,7 @@ describe('Carousel', () => {
 
   it('skips an element when it is past the visibleRatio', async () => {
     render(
-      <Carousel visibleRatio={0.9}>
+      <Carousel>
         <div data-test-id="child-1" />
         <div data-test-id="child-2" />
         <div data-test-id="child-3" />

static/app/components/carousel.tsx

@@ -10,26 +10,16 @@ import {useRefChildrenVisibility} from 'sentry/utils/useRefChildrenVisibility';
 
 interface CarouselProps {
   children?: React.ReactNode;
-  /**
-   * This number determines what percentage of an element must be within the
-   * visible scroll region for it to be considered 'visible'. If it is visible
-   * but slightly off screen it will be skipped when scrolling
-   *
-   * For example, if set to 0.8, and 10% of the element is out of the scroll
-   * area to the right, pressing the right arrow will skip over scrolling to
-   * this element, and will scroll to the next invisible one.
-   *
-   * @default 0.8
-   */
-  visibleRatio?: number;
 }
 
-export function Carousel({children, visibleRatio = 0.8}: CarouselProps) {
+const VISIBLE_RATIO = 0.8;
+
+export function Carousel({children}: CarouselProps) {
   const scrollContainerRef = useRef<HTMLDivElement | null>(null);
   const {visibility, childrenEls} = useRefChildrenVisibility({
     children,
     scrollContainerRef,
-    visibleRatio,
+    visibleRatio: VISIBLE_RATIO,
   });
 
   const isAtStart = visibility[0];

static/app/components/commitRow.spec.tsx

@@ -46,11 +46,6 @@ const baseCommit: Commit = {
 
 // static/app/components/hovercard.tsx
 describe('commitRow', () => {
-  it('renders custom avatar', () => {
-    render(<CommitRow commit={baseCommit} customAvatar="Custom Avatar" />);
-    expect(screen.getByText(/Custom Avatar/)).toBeInTheDocument();
-  });
-
   it('renders invite flow for non associated users', async () => {
     const commit = {
       ...baseCommit,

static/app/components/commitRow.tsx

@@ -32,19 +32,12 @@ export function formatCommitMessage(message: string | null) {
 
 export interface CommitRowProps {
   commit: Commit;
-  customAvatar?: React.ReactNode;
   onCommitClick?: (commit: Commit) => void;
   onPullRequestClick?: () => void;
   project?: AvatarProject;
 }
 
-function CommitRow({
-  commit,
-  customAvatar,
-  onPullRequestClick,
-  onCommitClick,
-  project,
-}: CommitRowProps) {
+function CommitRow({commit, onPullRequestClick, onCommitClick, project}: CommitRowProps) {
   const user = useUser();
   const organization = useOrganization();
   const handleInviteClick = useCallback(() => {
@@ -87,11 +80,7 @@ function CommitRow({
         <Message>{formatCommitMessage(commit.message)}</Message>
       )}
       <MetaWrapper>
-        {customAvatar ? (
-          customAvatar
-        ) : commit.author ? (
-          <UserAvatar size={16} user={commit.author} />
-        ) : null}
+        {commit.author ? <UserAvatar size={16} user={commit.author} /> : null}
         <Meta>
           <Tooltip
             title={tct(

static/app/components/duration/duration.spec.tsx

@@ -10,13 +10,6 @@ describe('Duration', () => {
     expect(time).toBeInTheDocument();
   });
 
-  it('should render the duration in the specified format', () => {
-    render(<Duration duration={[83_456, 'ms']} precision="ms" format="h:mm:ss.sss" />);
-
-    const time = screen.getByText('1:23.456');
-    expect(time).toBeInTheDocument();
-  });
-
   it('should include `dateTime` & `title` attributes for accessibility', () => {
     // See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time
 

static/app/components/duration/duration.tsx

@@ -1,9 +1,12 @@
 import type {HTMLAttributes} from 'react';
 import styled from '@emotion/styled';
 
-import {formatDuration, type Format} from 'sentry/utils/duration/formatDuration';
+import {formatDuration} from 'sentry/utils/duration/formatDuration';
 import type {Duration as TDuration, Unit} from 'sentry/utils/duration/types';
 
+const DURATION_MS_FORMAT = 'hh:mm:ss.sss';
+const DURATION_FORMAT = 'hh:mm:ss';
+
 interface Props extends HTMLAttributes<HTMLTimeElement> {
   /**
    * The Duration that you want to render
@@ -15,19 +18,12 @@ interface Props extends HTMLAttributes<HTMLTimeElement> {
    * that has `ms` precision but only show the total number of seconds.
    */
   precision: Unit;
-
-  /**
-   * The style/format to render into.
-   *
-   * Default is `hh:mm:ss.sss` if the precision is `ms`
-   */
-  format?: Format;
 }
 
-export const Duration = styled(({duration, format, precision, ...props}: Props) => {
+export const Duration = styled(({duration, precision, ...props}: Props) => {
   // Style and precision should match, otherwise style will pad out missing or
   // truncated values which we don't want in this component.
-  const style = format ?? (precision === 'ms' ? 'hh:mm:ss.sss' : 'hh:mm:ss');
+  const style = precision === 'ms' ? DURATION_MS_FORMAT : DURATION_FORMAT;
 
   return (
     <time

static/app/components/highlight.spec.tsx

@@ -59,16 +59,6 @@ describe('MultiHighlight', () => {
     );
   });
 
-  it('renders plain text when disabled', () => {
-    render(
-      <MultiHighlight disabled terms={['error']}>
-        error occurred
-      </MultiHighlight>
-    );
-
-    expect(screen.getByText('error occurred').tagName.toLowerCase()).not.toBe('span');
-  });
-
   it('highlights the longest term when a shorter term overlaps it', () => {
     render(
       <MultiHighlight terms={['work', 'workflow']}>workflow then work</MultiHighlight>

static/app/components/highlight.tsx

@@ -14,17 +14,12 @@ interface MultiHighlightProps {
    */
   caseSensitive?: boolean;
   className?: string;
-  /**
-   * Should highlighting be disabled?
-   */
-  disabled?: boolean;
 }
 
 export function MultiHighlight({
   caseSensitive,
   className,
   children,
-  disabled,
   terms,
 }: MultiHighlightProps) {
   const {validTerms, pattern} = useMemo(() => {
@@ -40,7 +35,7 @@ export function MultiHighlight({
     };
   }, [terms, caseSensitive]);
 
-  if (disabled || !pattern || typeof children !== 'string') {
+  if (!pattern || typeof children !== 'string') {
     return children;
   }
 

static/app/components/list/utils.tsx

@@ -10,15 +10,10 @@ const bulletStyle = (theme: Theme) => css`
 `;
 
 type Options = {
-  // setting initialCounterValue to 0 means the first visible step is 1
-  initialCounterValue?: number;
   isSolid?: boolean;
 };
 
-const numericStyle = (
-  theme: Theme,
-  {isSolid = false, initialCounterValue = 0}: Options
-) => css`
+const numericStyle = (theme: Theme, {isSolid = false}: Options) => css`
   & > li {
     padding-left: ${theme.space['3xl']};
     :before {
@@ -53,7 +48,7 @@ const numericStyle = (
       }
     }
   }
-  counter-reset: numberedList ${initialCounterValue};
+  counter-reset: numberedList 0;
 `;
 
 export const listSymbol = {
@@ -62,16 +57,12 @@ export const listSymbol = {
   bullet: 'bullet',
 };
 
-export function getListSymbolStyle(
-  theme: Theme,
-  symbol: keyof typeof listSymbol,
-  initialCounterValue?: number
-) {
+export function getListSymbolStyle(theme: Theme, symbol: keyof typeof listSymbol) {
   switch (symbol) {
     case 'numeric':
-      return numericStyle(theme, {initialCounterValue});
+      return numericStyle(theme, {});
     case 'colored-numeric':
-      return numericStyle(theme, {isSolid: true, initialCounterValue});
+      return numericStyle(theme, {isSolid: true});
     default:
       return bulletStyle(theme);
   }

static/app/components/messagingIntegrations/setupMessagingIntegrationButton.spec.tsx

@@ -24,7 +24,6 @@ describe('SetupAlertIntegrationButton', () => {
 
   const getComponent = () => (
     <SetupMessagingIntegrationButton
-      refetchConfigs={jest.fn()}
       analyticsView={MessagingIntegrationAnalyticsView.ALERT_RULE_CREATION}
     />
   );

static/app/components/messagingIntegrations/setupMessagingIntegrationButton.tsx

@@ -24,26 +24,18 @@ export enum MessagingIntegrationAnalyticsView {
 
 type Props = {
   analyticsView: MessagingIntegrationAnalyticsView;
-  refetchConfigs?: () => void;
   // `analyticsView` identifies the flow; `variant` identifies the SCM or legacy
   // project-creation experience. Alert-rule creation leaves `variant` undefined.
   variant?: 'scm' | 'legacy';
 };
 
-export function SetupMessagingIntegrationButton({
-  refetchConfigs,
-  analyticsView,
-  variant,
-}: Props) {
+export function SetupMessagingIntegrationButton({analyticsView, variant}: Props) {
   const {openModal} = useModal();
 
   const organization = useOrganization();
 
   const onAddIntegration = () => {
     messagingIntegrationsQuery.refetch();
-    if (refetchConfigs) {
-      refetchConfigs();
-    }
   };
 
   const messagingIntegrationsQuery = useQuery(

static/app/components/notAvailable.spec.tsx

@@ -1,4 +1,4 @@
-import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
+import {render, screen} from 'sentry-test/reactTestingLibrary';
 
 import {NotAvailable} from 'sentry/components/notAvailable';
 
@@ -7,14 +7,4 @@ describe('NotAvailable', () => {
     render(<NotAvailable />);
     expect(screen.getByText('\u2014')).toBeInTheDocument();
   });
-
-  it('renders with tooltip', async () => {
-    render(<NotAvailable tooltip="Tooltip text" />);
-    expect(screen.getByText('\u2014')).toBeInTheDocument();
-    expect(screen.queryByText('Tooltip text')).not.toBeInTheDocument();
-
-    await userEvent.hover(screen.getByText('\u2014'));
-
-    expect(await screen.findByText('Tooltip text')).toBeInTheDocument();
-  });
 });

static/app/components/notAvailable.tsx

@@ -1,18 +1,11 @@
 import styled from '@emotion/styled';
 
-import {Tooltip} from '@sentry/scraps/tooltip';
-
 type Props = {
   className?: string;
-  tooltip?: React.ReactNode;
 };
 
-export function NotAvailable({tooltip, className}: Props) {
-  return (
-    <Tooltip title={tooltip} skipWrapper disabled={tooltip === undefined}>
-      <Wrapper className={className}>{'\u2014'}</Wrapper>
-    </Tooltip>
-  );
+export function NotAvailable({className}: Props) {
+  return <Wrapper className={className}>{'\u2014'}</Wrapper>;
 }
 
 const Wrapper = styled('div')`