ref(ui): Remove dropdown feature from breadcrumbs (#98074)

This is unused on our standard breadcrumb component. It was reusing a
dropdown breadcrumb from the settings breadcrumbs, which use a different
component implementation from our usual breadcrumbs.

Author: evanpurkhiser

static/app/components/breadcrumbs.spec.tsx

@@ -61,42 +61,4 @@ describe('Breadcrumbs', () => {
     await userEvent.click(screen.getByText('Test 3'));
     expect(router.push).not.toHaveBeenCalled();
   });
-
-  it('renders a crumb dropdown', async () => {
-    const onSelect = jest.fn();
-    render(
-      <Breadcrumbs
-        crumbs={[
-          {
-            label: 'dropdown crumb',
-            onSelect,
-            items: [
-              {index: 0, value: 'item1', label: 'item1'},
-              {index: 1, value: 'item2', label: 'item2'},
-              {index: 2, value: 'item3', label: 'item3'},
-            ],
-          },
-          {
-            label: 'Test 2',
-            to: '/test2',
-          },
-          {
-            label: 'Test 3',
-            to: null,
-          },
-        ]}
-      />,
-      {
-        router,
-        deprecatedRouterMocks: true,
-      }
-    );
-    await userEvent.hover(screen.getByText('dropdown crumb'));
-
-    const item3 = await screen.findByText('item3');
-    expect(item3).toBeInTheDocument();
-
-    await userEvent.click(item3);
-    expect(onSelect).toHaveBeenCalledWith(expect.objectContaining({label: 'item3'}));
-  });
 });

static/app/components/breadcrumbs.stories.tsx

@@ -43,34 +43,6 @@ export default Storybook.story('Breadcrumbs', story => {
     </Fragment>
   ));
 
-  story('With Dropdown', () => (
-    <Fragment>
-      <p>
-        Breadcrumbs can include dropdown menus for selecting between multiple options.
-      </p>
-      <Storybook.SizingWindow display="block" style={{minHeight: '250px'}}>
-        <Breadcrumbs
-          crumbs={[
-            {label: 'Organization', to: '/organizations/sentry/'},
-            {
-              label: 'Select Project',
-              items: [
-                {index: 0, value: 'javascript', label: 'JavaScript Project'},
-                {index: 1, value: 'python', label: 'Python Project'},
-                {index: 2, value: 'react', label: 'React Project'},
-              ],
-              onSelect: item => {
-                // eslint-disable-next-line no-console
-                console.log('Selected:', item);
-              },
-            },
-            {label: 'Settings', to: null},
-          ]}
-        />
-      </Storybook.SizingWindow>
-    </Fragment>
-  ));
-
   story('Page Filter Preservation', () => (
     <Fragment>
       <p>

static/app/components/breadcrumbs.tsx

@@ -8,8 +8,6 @@ import type {LinkProps} from 'sentry/components/core/link';
 import {Link} from 'sentry/components/core/link';
 import GlobalSelectionLink from 'sentry/components/globalSelectionLink';
 import {space} from 'sentry/styles/space';
-import type {BreadcrumbDropdownProps} from 'sentry/views/settings/components/settingsBreadcrumb/breadcrumbDropdown';
-import BreadcrumbDropdown from 'sentry/views/settings/components/settingsBreadcrumb/breadcrumbDropdown';
 
 const BreadcrumbList = styled('nav')`
   display: flex;
@@ -41,28 +39,11 @@ export interface Crumb {
   to?: LinkProps['to'] | null;
 }
 
-export interface CrumbDropdown {
-  /**
-   * Items of the crumb dropdown
-   */
-  items: BreadcrumbDropdownProps['items'];
-
-  /**
-   * Name of the crumb
-   */
-  label: React.ReactNode;
-
-  /**
-   * Callback function for when an item is selected
-   */
-  onSelect: BreadcrumbDropdownProps['onSelect'];
-}
-
 interface Props extends React.HTMLAttributes<HTMLDivElement> {
   /**
    * Array of crumbs that will be rendered
    */
-  crumbs: Array<Crumb | CrumbDropdown>;
+  crumbs: Crumb[];
 
   /**
    * As a general rule of thumb we don't want the last item to be link as it most likely
@@ -73,10 +54,6 @@ interface Props extends React.HTMLAttributes<HTMLDivElement> {
   linkLastItem?: boolean;
 }
 
-function isCrumbDropdown(crumb: Crumb | CrumbDropdown): crumb is CrumbDropdown {
-  return (crumb as CrumbDropdown).items !== undefined;
-}
-
 /**
  * Page breadcrumbs used for navigation, not to be confused with sentry's event breadcrumbs
  */
@@ -86,27 +63,12 @@ export function Breadcrumbs({crumbs, linkLastItem = false, ...props}: Props) {
   }
 
   if (!linkLastItem) {
-    const lastCrumb = crumbs[crumbs.length - 1]!;
-    if (!isCrumbDropdown(lastCrumb)) {
-      lastCrumb.to = null;
-    }
+    crumbs[crumbs.length - 1]!.to = null;
   }
 
   return (
     <BreadcrumbList {...props} data-test-id="breadcrumb-list">
       {crumbs.map((crumb, index) => {
-        if (isCrumbDropdown(crumb)) {
-          const {label, ...crumbProps} = crumb;
-          return (
-            <BreadcrumbDropdown
-              key={index}
-              isLast={index >= crumbs.length - 1}
-              route={{}}
-              name={label}
-              {...crumbProps}
-            />
-          );
-        }
         const {label, to, preservePageFilters, key} = crumb;
         const labelKey = typeof label === 'string' ? label : '';
         const mapKey =

static/app/views/alerts/builder/builderBreadCrumbs.tsx

@@ -1,4 +1,4 @@
-import type {Crumb, CrumbDropdown} from 'sentry/components/breadcrumbs';
+import type {Crumb} from 'sentry/components/breadcrumbs';
 import Breadcrumbs from 'sentry/components/breadcrumbs';
 import {t} from 'sentry/locale';
 import type {Organization} from 'sentry/types/organization';
@@ -12,7 +12,7 @@ interface Props {
 }
 
 function BuilderBreadCrumbs({title, alertName, projectSlug, organization}: Props) {
-  const crumbs: Array<Crumb | CrumbDropdown> = [
+  const crumbs: Crumb[] = [
     {
       to: makeAlertsPathname({
         path: '/rules/',

static/app/views/settings/components/settingsBreadcrumb/breadcrumbDropdown.tsx

@@ -13,7 +13,7 @@ interface AdditionalDropdownProps
     'onChange' | 'busyItemsStillVisible'
   > {}
 
-export interface BreadcrumbDropdownProps extends AdditionalDropdownProps {
+interface BreadcrumbDropdownProps extends AdditionalDropdownProps {
   items: Item[];
   name: React.ReactNode;
   onSelect: (item: Item) => void;