ref(js): Remove dropdownAutoComplete usage in timeRangeSelector (#98105)

Co-authored-by: George Gritsouk <[email protected]>

Author: 2 people

static/app/components/charts/intervalSelector.tsx

@@ -1,7 +1,7 @@
 import {useState} from 'react';
 
 import {getInterval} from 'sentry/components/charts/utils';
-import {CompactSelect} from 'sentry/components/core/compactSelect';
+import {CompactSelect, type SelectOption} from 'sentry/components/core/compactSelect';
 import {
   _timeRangeAutoCompleteFilter,
   makeItem,
@@ -143,13 +143,6 @@ function bindInterval(
   return intervalHours < intervalOption.min || intervalHours > optionMax;
 }
 
-type Item = {
-  label: React.ReactNode;
-  textValue: string;
-  value: string;
-  searchKey?: string;
-};
-
 export default function IntervalSelector({
   displayMode,
   eventView,
@@ -176,10 +169,9 @@ export default function IntervalSelector({
     }
   }
 
-  const [items, setItems] = useState<Item[]>(() =>
+  const [items, setItems] = useState<Array<SelectOption<string>>>(() =>
     intervalOption.options.map(option => ({
       value: option,
-      searchKey: option,
       textValue: option,
       label: option,
     }))
@@ -205,12 +197,7 @@ export default function IntervalSelector({
     if (newItem) {
       const [amount, unit] = formatHoursToInterval(newItem);
       filteredResults.push(
-        makeItem(
-          amount,
-          unit,
-          SUPPORTED_RELATIVE_PERIOD_UNITS[unit]!.label,
-          results.length + 1
-        )
+        makeItem(amount, unit, SUPPORTED_RELATIVE_PERIOD_UNITS[unit]!.label)
       );
     }
 

static/app/components/timeRangeSelector/index.tsx

@@ -4,7 +4,6 @@ import styled from '@emotion/styled';
 import {Button} from 'sentry/components/core/button';
 import type {SelectOption, SingleSelectProps} from 'sentry/components/core/compactSelect';
 import {CompactSelect} from 'sentry/components/core/compactSelect';
-import type {Item} from 'sentry/components/dropdownAutoComplete/types';
 import DropdownButton from 'sentry/components/dropdownButton';
 import HookOrDefault from 'sentry/components/hookOrDefault';
 import {DesyncedFilterIndicator} from 'sentry/components/organizations/pageFilters/desyncedFilter';
@@ -29,6 +28,7 @@ import useRouter from 'sentry/utils/useRouter';
 
 import DateRange from './dateRange';
 import SelectorItems from './selectorItems';
+import type {TimeRangeItem} from './types';
 import {
   getAbsoluteSummary,
   getArbitraryRelativePeriod,
@@ -187,8 +187,8 @@ export function TimeRangeSelector({
   });
 
   const getOptions = useCallback(
-    (items: Item[]): Array<SelectOption<string>> => {
-      const makeOption = (item: Item): SelectOption<string> => {
+    (items: TimeRangeItem[]): Array<SelectOption<string>> => {
+      const makeOption = (item: TimeRangeItem): SelectOption<string> => {
         if (item.value === 'absolute') {
           return {
             value: item.value,
@@ -206,14 +206,14 @@ export function TimeRangeSelector({
                 color={isFocused || isSelected ? undefined : 'subText'}
               />
             ),
-            textValue: item.searchKey,
+            textValue: item.textValue,
           };
         }
 
         return {
           value: item.value,
           label: <OptionLabel>{item.label}</OptionLabel>,
-          textValue: item.searchKey,
+          textValue: item.textValue,
         };
       };
 
@@ -223,7 +223,7 @@ export function TimeRangeSelector({
       }
 
       const filteredItems = disallowArbitraryRelativeRanges
-        ? items.filter(i => i.searchKey?.includes(search))
+        ? items.filter(i => i.textValue?.includes(search))
         : // If arbitrary relative ranges are allowed, then generate a list of them based
           // on the search query
           timeRangeAutoCompleteFilter(items, search, {
@@ -340,8 +340,8 @@ export function TimeRangeSelector({
           value={start && end ? ABSOLUTE_OPTION_VALUE : (relative ?? '')}
           onChange={option => {
             const item = items.find(i => i.value === option.value);
-            if (item?.onClick) {
-              item.onClick();
+            if (item?.onSelect) {
+              item.onSelect();
             } else {
               handleChange(option);
             }

static/app/components/timeRangeSelector/selectorItems.tsx

@@ -1,11 +1,11 @@
-import type {Item} from 'sentry/components/dropdownAutoComplete/types';
 import {DEFAULT_RELATIVE_PERIODS} from 'sentry/constants';
 import {t} from 'sentry/locale';
 
 import TimeRangeItemLabel from './timeRangeItemLabel';
+import type {TimeRangeItem} from './types';
 
 type Props = {
-  children: (items: Item[]) => React.ReactElement;
+  children: (items: TimeRangeItem[]) => React.ReactElement;
   handleSelectRelative: (value: string) => void;
   relativePeriods?: Record<string, React.ReactNode>;
   shouldShowAbsolute?: boolean;
@@ -20,24 +20,20 @@ const SelectorItems = ({
 }: Props) => {
   const relativeArr = Object.entries(relativePeriods ?? DEFAULT_RELATIVE_PERIODS);
 
-  const items: Item[] = [
+  const items: TimeRangeItem[] = [
     ...(shouldShowRelative
-      ? relativeArr.map(([value, itemLabel], index) => ({
-          index,
+      ? relativeArr.map(([value, itemLabel]) => ({
           value,
-          searchKey: typeof itemLabel === 'string' ? itemLabel : value,
+          textValue: typeof itemLabel === 'string' ? itemLabel : value,
           label: <TimeRangeItemLabel>{itemLabel}</TimeRangeItemLabel>,
-          'data-test-id': value,
         }))
       : []),
     ...(shouldShowAbsolute
       ? [
           {
-            index: relativeArr.length,
             value: 'absolute',
-            searchKey: 'absolute',
+            textValue: 'absolute',
             label: <TimeRangeItemLabel>{t('Absolute date')}</TimeRangeItemLabel>,
-            'data-test-id': 'absolute',
           },
         ]
       : []),

static/app/components/timeRangeSelector/types.tsx

@@ -0,0 +1,8 @@
+import {type SelectOption} from 'sentry/components/core/compactSelect';
+
+export interface TimeRangeItem extends SelectOption<string> {
+  /**
+   * Alternative action handler for the time range item
+   */
+  onSelect?: () => void;
+}

static/app/components/timeRangeSelector/utils.tsx

@@ -2,8 +2,6 @@ import {Fragment} from 'react';
 import moment from 'moment-timezone';
 
 import {DateTime} from 'sentry/components/dateTime';
-import autoCompleteFilter from 'sentry/components/dropdownAutoComplete/autoCompleteFilter';
-import type {ItemsBeforeFilter} from 'sentry/components/dropdownAutoComplete/types';
 import {DEFAULT_RELATIVE_PERIODS} from 'sentry/constants';
 import {t, tn} from 'sentry/locale';
 import type {DateString} from 'sentry/types/core';
@@ -14,6 +12,7 @@ import {
 } from 'sentry/utils/dates';
 
 import TimeRangeItemLabel from './timeRangeItemLabel';
+import type {TimeRangeItem} from './types';
 
 type PeriodUnit = 's' | 'm' | 'h' | 'd' | 'w';
 type RelativePeriodUnit = Exclude<PeriodUnit, 's'>;
@@ -166,15 +165,12 @@ export function getAbsoluteSummary(
 export function makeItem(
   amount: number,
   unit: string,
-  label: (num: number) => string,
-  index: number
-) {
+  label: (num: number) => string
+): TimeRangeItem {
   return {
     value: `${amount}${unit}`,
-    ['data-test-id']: `${amount}${unit}`,
     label: <TimeRangeItemLabel>{label(amount)}</TimeRangeItemLabel>,
-    searchKey: `${amount}${unit}`,
-    index,
+    textValue: `${amount}${unit}`,
   };
 }
 
@@ -199,6 +195,17 @@ function timePeriodIsWithinLimit<T extends RelativeUnitsMapping>({
   return numberOfDays <= maxDays;
 }
 
+function filterItems(items: TimeRangeItem[], inputValue: string): TimeRangeItem[] {
+  return items.filter(item =>
+    (typeof item.textValue === 'string' && item.textValue.length > 0
+      ? item.textValue
+      : `${item.value}`
+    )
+      .toLowerCase()
+      .includes(inputValue.toLowerCase())
+  );
+}
+
 /**
  * A custom autocomplete implementation for <TimeRangeSelector />
  * This function generates relative time ranges based on the user's input (not limited to those present in the initial set).
@@ -213,7 +220,7 @@ function timePeriodIsWithinLimit<T extends RelativeUnitsMapping>({
  * If the input does not begin with a number, we do a simple filter of the preset options.
  */
 export const _timeRangeAutoCompleteFilter = function <T extends RelativeUnitsMapping>(
-  items: ItemsBeforeFilter | null,
+  items: TimeRangeItem[] | null,
   filterValue: string,
   {
     supportedPeriods,
@@ -226,7 +233,7 @@ export const _timeRangeAutoCompleteFilter = function <T extends RelativeUnitsMap
     maxDateRange?: number;
     maxDays?: number;
   }
-): ReturnType<typeof autoCompleteFilter> {
+): TimeRangeItem[] {
   if (!items) {
     return [];
   }
@@ -249,9 +256,7 @@ export const _timeRangeAutoCompleteFilter = function <T extends RelativeUnitsMap
           supportedPeriods,
         })
       )
-      .map((unit, index) =>
-        makeItem(userSuppliedAmount, unit, supportedPeriods[unit]!.label, index)
-      );
+      .map(unit => makeItem(userSuppliedAmount, unit, supportedPeriods[unit]!.label));
   }
 
   // If there is a number followed by units, show the matching number/unit option
@@ -274,30 +279,25 @@ export const _timeRangeAutoCompleteFilter = function <T extends RelativeUnitsMap
       })
     ) {
       return [
-        makeItem(
-          userSuppliedAmount,
-          matchingUnit,
-          supportedPeriods[matchingUnit]!.label,
-          0
-        ),
+        makeItem(userSuppliedAmount, matchingUnit, supportedPeriods[matchingUnit]!.label),
       ];
     }
   }
 
   // Otherwise, do a normal filter search
-  return autoCompleteFilter(items, filterValue);
+  return filterItems(items, filterValue);
 };
 
 export const timeRangeAutoCompleteFilter = function (
-  items: ItemsBeforeFilter | null,
+  items: TimeRangeItem[] | null,
   filterValue: string,
   options: {
     maxDateRange?: number;
     maxDays?: number;
     supportedPeriods?: RelativeUnitsMapping;
     supportedUnits?: RelativePeriodUnit[];
   }
-): ReturnType<typeof autoCompleteFilter> {
+): TimeRangeItem[] {
   return _timeRangeAutoCompleteFilter(items, filterValue, {
     supportedPeriods: SUPPORTED_RELATIVE_PERIOD_UNITS,
     supportedUnits: SUPPORTED_RELATIVE_UNITS_LIST,

static/gsApp/components/features/disabledSelectorItems.tsx

@@ -1,8 +1,8 @@
 import styled from '@emotion/styled';
 import omit from 'lodash/omit';
 
-import type {Item} from 'sentry/components/dropdownAutoComplete/types';
 import type SelectorItems from 'sentry/components/timeRangeSelector/selectorItems';
+import type {TimeRangeItem} from 'sentry/components/timeRangeSelector/types';
 import {DEFAULT_RELATIVE_PERIODS, MAX_PICKABLE_DAYS} from 'sentry/constants';
 import {IconBusiness} from 'sentry/icons';
 import {t} from 'sentry/locale';
@@ -45,22 +45,19 @@ function DisabledSelectorItems({
     : relativePeriods;
   const omittedRelativeArr = Object.entries(omittedRelativePeriods);
 
-  const items = (onClick: () => void, canTrial: boolean): Item[] => [
+  const items = (onSelect: () => void, canTrial: boolean): TimeRangeItem[] => [
     ...(shouldShowRelative
-      ? omittedRelativeArr.map(([value, itemLabel], index) => ({
-          index,
+      ? omittedRelativeArr.map(([value, itemLabel]) => ({
           value,
-          searchKey: typeof itemLabel === 'string' ? itemLabel : String(value),
+          textValue: typeof itemLabel === 'string' ? itemLabel : String(value),
           label: <SelectorItemLabel>{itemLabel}</SelectorItemLabel>,
-          'data-test-id': value,
         }))
       : []),
     ...(shouldOmitPremiumPeriods
       ? [
           {
-            index: omittedRelativeArr.length,
             value: '90d-trial',
-            searchKey:
+            textValue:
               typeof relativePeriods['90d'] === 'string'
                 ? relativePeriods['90d']
                 : '90d-trial',
@@ -78,19 +75,16 @@ function DisabledSelectorItems({
                 </UpsellMessage>
               </SelectorItemLabel>
             ),
-            'data-test-id': '90d',
-            onClick,
+            onSelect,
           },
         ]
       : []),
     ...(shouldShowAbsolute
       ? [
           {
-            index: omittedRelativeArr.length + 1,
             value: 'absolute',
-            searchKey: 'absolute',
+            textValue: 'absolute',
             label: <SelectorItemLabel>{t('Absolute date')}</SelectorItemLabel>,
-            'data-test-id': 'absolute',
           },
         ]
       : []),