ref(searchBarAction): Remove V1 (#35630)

static/app/components/events/interfaces/breadcrumbs/index.tsx

@@ -13,7 +13,7 @@ import {BreadcrumbLevelType, Crumb, RawCrumb} from 'sentry/types/breadcrumbs';
 import {Event} from 'sentry/types/event';
 import {defined} from 'sentry/utils';
 
-import SearchBarAction from '../searchBarActionV2';
+import SearchBarAction from '../searchBarAction';
 
 import Level from './breadcrumb/level';
 import Type from './breadcrumb/type';

static/app/components/events/interfaces/debugMeta-v2/debugImageDetails/candidates.tsx

@@ -14,7 +14,7 @@ import {Organization, Project} from 'sentry/types';
 import {CandidateDownloadStatus, Image, ImageStatus} from 'sentry/types/debugImage';
 import {defined} from 'sentry/utils';
 
-import SearchBarAction from '../../searchBarActionV2';
+import SearchBarAction from '../../searchBarAction';
 
 import Status from './candidate/status';
 import Candidate from './candidate';

static/app/components/events/interfaces/debugMeta-v2/index.tsx

@@ -24,7 +24,7 @@ import {Image, ImageStatus} from 'sentry/types/debugImage';
 import {Event} from 'sentry/types/event';
 import {defined} from 'sentry/utils';
 
-import SearchBarAction from '../searchBarActionV2';
+import SearchBarAction from '../searchBarAction';
 
 import Status from './debugImage/status';
 import DebugImage from './debugImage';

static/app/components/events/interfaces/searchBarAction/dropDownButton.tsx

@@ -1,76 +0,0 @@
-import styled from '@emotion/styled';
-
-import DropdownButton from 'sentry/components/dropdownButton';
-import {GetActorPropsFn} from 'sentry/components/dropdownMenu';
-import {t, tn} from 'sentry/locale';
-import space from 'sentry/styles/space';
-
-type Props = {
-  checkedQuantity: number;
-  getActorProps: GetActorPropsFn;
-  isOpen: boolean;
-};
-
-function DropDownButton({isOpen, getActorProps, checkedQuantity}: Props) {
-  if (checkedQuantity > 0) {
-    return (
-      <StyledDropdownButton
-        {...getActorProps()}
-        isOpen={isOpen}
-        size="small"
-        hideBottomBorder={false}
-        priority="primary"
-      >
-        {tn('%s Active Filter', '%s Active Filters', checkedQuantity)}
-      </StyledDropdownButton>
-    );
-  }
-
-  return (
-    <StyledDropdownButton
-      {...getActorProps()}
-      isOpen={isOpen}
-      size="small"
-      hideBottomBorder={false}
-    >
-      {t('Filter By')}
-    </StyledDropdownButton>
-  );
-}
-
-export default DropDownButton;
-
-const StyledDropdownButton = styled(DropdownButton)`
-  z-index: ${p => p.theme.zIndex.dropdownAutocomplete.actor};
-  border-radius: ${p => p.theme.borderRadius};
-  max-width: 200px;
-  white-space: nowrap;
-
-  ${p =>
-    p.isOpen &&
-    `
-      :before,
-      :after {
-        position: absolute;
-        bottom: calc(${space(0.5)} + 1px);
-        right: 32px;
-        content: '';
-        width: 16px;
-        border: 8px solid transparent;
-        transform: translateY(calc(50% + 2px));
-        right: 9px;
-        border-bottom-color: ${p.theme.backgroundSecondary};
-      }
-
-      :before {
-        transform: translateY(calc(50% + 1px));
-        border-bottom-color: ${p.theme.border};
-      }
-    `}
-
-  @media (min-width: ${p => p.theme.breakpoints.small}) {
-    border-right: 0;
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-`;

static/app/components/events/interfaces/searchBarAction/index.tsx

@@ -1,86 +0,0 @@
-import {Children} from 'react';
-import styled from '@emotion/styled';
-
-import SearchBar from 'sentry/components/searchBar';
-import space from 'sentry/styles/space';
-
-type Props = {
-  onChange: (value: string) => void;
-  placeholder: string;
-  query: string;
-  className?: string;
-  /**
-   * The filter must be the SearchBarFilter component
-   */
-  filter?: React.ReactElement;
-};
-
-function SearchBarAction({onChange, query, placeholder, filter, className}: Props) {
-  return (
-    <Wrapper className={className}>
-      {filter}
-      <StyledSearchBar
-        onChange={onChange}
-        query={query}
-        placeholder={placeholder}
-        blendWithFilter={!!filter}
-      />
-    </Wrapper>
-  );
-}
-
-export default SearchBarAction;
-
-const Wrapper = styled('div')`
-  display: grid;
-  gap: ${space(2)};
-  width: 100%;
-  margin-top: ${space(1)};
-  position: relative;
-
-  @media (min-width: ${props => props.theme.breakpoints.small}) {
-    margin-top: 0;
-    gap: 0;
-    grid-template-columns: ${p =>
-      p.children && Children.toArray(p.children).length === 1
-        ? '1fr'
-        : 'max-content 1fr'};
-    justify-content: flex-end;
-  }
-
-  @media (min-width: ${props => props.theme.breakpoints.medium}) {
-    width: 400px;
-  }
-
-  @media (min-width: ${props => props.theme.breakpoints.xlarge}) {
-    width: 600px;
-  }
-`;
-
-// TODO(matej): remove this once we refactor SearchBar to not use css classes
-// - it could accept size as a prop
-const StyledSearchBar = styled(SearchBar)<{blendWithFilter?: boolean}>`
-  width: 100%;
-  position: relative;
-  .search-input {
-    height: 34px;
-  }
-  .search-clear-form,
-  .search-input-icon {
-    height: 32px;
-    display: flex;
-    align-items: center;
-  }
-
-  @media (min-width: ${props => props.theme.breakpoints.small}) {
-    ${p =>
-      p.blendWithFilter &&
-      `
-        .search-input,
-        .search-input:focus {
-          border-top-left-radius: 0;
-          border-bottom-left-radius: 0;
-        }
-      `}
-  }
-`;

static/app/components/events/interfaces/searchBarAction/searchBarActionFilter.tsx

@@ -1,160 +0,0 @@
-import {Fragment} from 'react';
-import styled from '@emotion/styled';
-
-import CheckboxFancy from 'sentry/components/checkboxFancy/checkboxFancy';
-import DropdownControl, {Content} from 'sentry/components/dropdownControl';
-import List from 'sentry/components/list';
-import ListItem from 'sentry/components/list/listItem';
-import space from 'sentry/styles/space';
-
-import DropDownButton from './dropDownButton';
-
-type Option = {
-  id: string;
-  isChecked: boolean;
-  symbol: React.ReactElement;
-  description?: string;
-};
-
-type Options = Record<string, Array<Option>>;
-
-type Props = {
-  onChange: (options: Options) => void;
-  options: Options;
-};
-
-function SearchBarActionFilter({options, onChange}: Props) {
-  const checkedQuantity = Object.values(options)
-    .flatMap(option => option)
-    .filter(option => option.isChecked).length;
-
-  function handleClick(category: string, option: Option) {
-    const updatedOptions = {
-      ...options,
-      [category]: options[category].map(groupedOption => {
-        if (option.id === groupedOption.id) {
-          return {
-            ...groupedOption,
-            isChecked: !groupedOption.isChecked,
-          };
-        }
-        return groupedOption;
-      }),
-    };
-
-    onChange(updatedOptions);
-  }
-
-  return (
-    <Wrapper>
-      <DropdownControl
-        button={({isOpen, getActorProps}) => (
-          <DropDownButton
-            isOpen={isOpen}
-            getActorProps={getActorProps}
-            checkedQuantity={checkedQuantity}
-          />
-        )}
-      >
-        {({getMenuProps, isOpen}) => (
-          <StyledContent
-            {...getMenuProps()}
-            data-test-id="filter-dropdown-menu"
-            alignMenu="left"
-            width="240px"
-            isOpen={isOpen}
-            blendWithActor
-            blendCorner
-          >
-            {Object.keys(options).map(category => (
-              <Fragment key={category}>
-                <Header>{category}</Header>
-                <StyledList>
-                  {options[category].map(groupedOption => {
-                    const {symbol, isChecked, id, description} = groupedOption;
-                    return (
-                      <StyledListItem
-                        key={id}
-                        onClick={event => {
-                          event.stopPropagation();
-                          handleClick(category, groupedOption);
-                        }}
-                        isChecked={isChecked}
-                        hasDescription={!!description}
-                      >
-                        {symbol}
-                        {description && <Description>{description}</Description>}
-                        <CheckboxFancy isChecked={isChecked} />
-                      </StyledListItem>
-                    );
-                  })}
-                </StyledList>
-              </Fragment>
-            ))}
-          </StyledContent>
-        )}
-      </DropdownControl>
-    </Wrapper>
-  );
-}
-
-export default SearchBarActionFilter;
-
-const Wrapper = styled('div')`
-  position: relative;
-  display: flex;
-`;
-
-const StyledContent = styled(Content)`
-  top: calc(100% + ${space(0.5)} - 1px);
-  border-radius: ${p => p.theme.borderRadius};
-  > ul:last-child {
-    > li:last-child {
-      border-bottom: none;
-    }
-  }
-`;
-
-const Header = styled('div')`
-  display: flex;
-  align-items: center;
-  margin: 0;
-  background-color: ${p => p.theme.backgroundSecondary};
-  color: ${p => p.theme.gray300};
-  font-weight: normal;
-  font-size: ${p => p.theme.fontSizeMedium};
-  padding: ${space(1)} ${space(2)};
-  border-bottom: 1px solid ${p => p.theme.border};
-`;
-
-const StyledList = styled(List)`
-  gap: 0;
-`;
-
-const StyledListItem = styled(ListItem, {
-  shouldForwardProp: prop =>
-    typeof prop === 'string' && !['hasDescription', 'isChecked'].includes(prop),
-})<{hasDescription: boolean; isChecked: boolean}>`
-  display: grid;
-  grid-template-columns: ${p =>
-    p.hasDescription ? 'max-content 1fr max-content' : '1fr max-content'};
-  grid-column-gap: ${space(1)};
-  padding: ${space(1)} ${space(2)};
-  border-bottom: 1px solid ${p => p.theme.border};
-  align-items: center;
-  cursor: pointer;
-  ${CheckboxFancy} {
-    opacity: ${p => (p.isChecked ? 1 : 0.3)};
-  }
-
-  :hover {
-    background-color: ${p => p.theme.backgroundSecondary};
-    ${CheckboxFancy} {
-      opacity: 1;
-    }
-  }
-`;
-
-const Description = styled('div')`
-  font-size: ${p => p.theme.fontSizeMedium};
-`;

tests/js/spec/components/events/interfaces/breadcrumbs/filter.spec.tsx

@@ -2,7 +2,7 @@ import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
 
 import Level from 'sentry/components/events/interfaces/breadcrumbs/breadcrumb/level';
 import Type from 'sentry/components/events/interfaces/breadcrumbs/breadcrumb/type';
-import SearchBarAction from 'sentry/components/events/interfaces/searchBarActionV2';
+import SearchBarAction from 'sentry/components/events/interfaces/searchBarAction';
 import {BreadcrumbLevelType, BreadcrumbType} from 'sentry/types/breadcrumbs';
 
 const options: NonNullable<