From e032d0cef3590ff61e854d87efa8e9e760ddc4df Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thomas=20Oberm=C3=BCller?= <thomas.obermueller@gmail.com>
Date: Thu, 28 Dec 2023 10:52:12 +0100
Subject: [PATCH] chore(3000): remove legacy breadcrumbs component (#19524)

---
 .../navigation-3000/components/TopBar.scss    |  1 -
 .../navigation/Breadcrumbs/Breadcrumbs.scss   | 34 ---------
 .../navigation/Breadcrumbs/Breadcrumbs.tsx    | 72 -------------------
 .../Breadcrumbs/breadcrumbsLogic.tsx          |  2 -
 frontend/src/layout/navigation/Navigation.tsx |  2 -
 5 files changed, 111 deletions(-)
 delete mode 100644 frontend/src/layout/navigation/Breadcrumbs/Breadcrumbs.scss
 delete mode 100644 frontend/src/layout/navigation/Breadcrumbs/Breadcrumbs.tsx

diff --git a/frontend/src/layout/navigation-3000/components/TopBar.scss b/frontend/src/layout/navigation-3000/components/TopBar.scss
index d9bd2338e54fe..eb8d8a855fa45 100644
--- a/frontend/src/layout/navigation-3000/components/TopBar.scss
+++ b/frontend/src/layout/navigation-3000/components/TopBar.scss
@@ -1,7 +1,6 @@
 // TODO: Remove legacy scss files
 @import '../../navigation/TopBar/TopBar';
 @import '../../navigation/SideBar/SideBar';
-@import '../../navigation/Breadcrumbs/Breadcrumbs';
 
 .TopBar3000 {
     --breadcrumbs-compaction-rate: 0;
diff --git a/frontend/src/layout/navigation/Breadcrumbs/Breadcrumbs.scss b/frontend/src/layout/navigation/Breadcrumbs/Breadcrumbs.scss
deleted file mode 100644
index d2b210f4c7e7d..0000000000000
--- a/frontend/src/layout/navigation/Breadcrumbs/Breadcrumbs.scss
+++ /dev/null
@@ -1,34 +0,0 @@
-.Breadcrumbs {
-    display: flex;
-    align-items: center;
-    width: 100%;
-    margin-top: 1rem;
-    overflow-x: auto;
-    cursor: default;
-}
-
-.Breadcrumbs__breadcrumb {
-    display: flex;
-    gap: 0.5rem;
-    align-items: center;
-    font-weight: var(--font-medium);
-    white-space: pre;
-    user-select: none;
-
-    &--current {
-        color: var(--default);
-        cursor: default;
-    }
-
-    &--actionable {
-        color: var(--primary-3000);
-        cursor: pointer;
-    }
-}
-
-.Breadcrumbs__separator {
-    flex-shrink: 0;
-    margin: 0 0.5rem;
-    font-size: 1rem;
-    color: var(--primary-alt);
-}
diff --git a/frontend/src/layout/navigation/Breadcrumbs/Breadcrumbs.tsx b/frontend/src/layout/navigation/Breadcrumbs/Breadcrumbs.tsx
deleted file mode 100644
index 461587697bfc5..0000000000000
--- a/frontend/src/layout/navigation/Breadcrumbs/Breadcrumbs.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import './Breadcrumbs.scss'
-
-import { IconChevronDown } from '@posthog/icons'
-import clsx from 'clsx'
-import { useValues } from 'kea'
-import { IconChevronRight } from 'lib/lemon-ui/icons'
-import { Link } from 'lib/lemon-ui/Link'
-import { Popover } from 'lib/lemon-ui/Popover/Popover'
-import React, { useState } from 'react'
-
-import { Breadcrumb as IBreadcrumb } from '~/types'
-
-import { breadcrumbsLogic } from './breadcrumbsLogic'
-
-function Breadcrumb({ breadcrumb, index }: { breadcrumb: IBreadcrumb; index: number }): JSX.Element {
-    const [popoverShown, setPopoverShown] = useState(false)
-
-    let breadcrumbContent = (
-        <div
-            className={clsx(
-                'Breadcrumbs__breadcrumb',
-                (breadcrumb.path || breadcrumb.popover) && 'Breadcrumbs__breadcrumb--actionable'
-            )}
-            onClick={() => {
-                breadcrumb.popover && setPopoverShown(!popoverShown)
-            }}
-            data-attr={`breadcrumb-${index}`}
-        >
-            {breadcrumb.symbol}
-            <span>{breadcrumb.name}</span>
-            {breadcrumb.popover && <IconChevronDown className="text-muted-alt text-lg" />}
-        </div>
-    )
-
-    if (breadcrumb.path) {
-        breadcrumbContent = <Link to={breadcrumb.path}>{breadcrumbContent}</Link>
-    }
-
-    if (breadcrumb.popover) {
-        return (
-            <Popover
-                {...breadcrumb.popover}
-                visible={popoverShown}
-                onClickOutside={() => {
-                    if (popoverShown) {
-                        setPopoverShown(false)
-                    }
-                }}
-            >
-                {breadcrumbContent}
-            </Popover>
-        )
-    }
-
-    return breadcrumbContent
-}
-
-export function Breadcrumbs(): JSX.Element | null {
-    const { firstBreadcrumb, tailBreadcrumbs } = useValues(breadcrumbsLogic)
-
-    return firstBreadcrumb ? (
-        <div className="Breadcrumbs">
-            <Breadcrumb breadcrumb={firstBreadcrumb} index={0} />
-            {tailBreadcrumbs.map((breadcrumb, index) => (
-                <React.Fragment key={breadcrumb.name || '…'}>
-                    <IconChevronRight className="Breadcrumbs__separator" />
-                    <Breadcrumb breadcrumb={breadcrumb} index={index + 1} />
-                </React.Fragment>
-            ))}
-        </div>
-    ) : null
-}
diff --git a/frontend/src/layout/navigation/Breadcrumbs/breadcrumbsLogic.tsx b/frontend/src/layout/navigation/Breadcrumbs/breadcrumbsLogic.tsx
index ec769563d9777..7d15f44db066d 100644
--- a/frontend/src/layout/navigation/Breadcrumbs/breadcrumbsLogic.tsx
+++ b/frontend/src/layout/navigation/Breadcrumbs/breadcrumbsLogic.tsx
@@ -1,5 +1,3 @@
-import './Breadcrumbs.scss'
-
 import { actions, connect, kea, listeners, path, props, reducers, selectors } from 'kea'
 import { subscriptions } from 'kea-subscriptions'
 import { Lettermark } from 'lib/lemon-ui/Lettermark'
diff --git a/frontend/src/layout/navigation/Navigation.tsx b/frontend/src/layout/navigation/Navigation.tsx
index 5dbdb204a2c5f..59b2085d31383 100644
--- a/frontend/src/layout/navigation/Navigation.tsx
+++ b/frontend/src/layout/navigation/Navigation.tsx
@@ -3,7 +3,6 @@ import { BillingAlertsV2 } from 'lib/components/BillingAlertsV2'
 import { ReactNode } from 'react'
 import { SceneConfig } from 'scenes/sceneTypes'
 
-import { Breadcrumbs } from './Breadcrumbs/Breadcrumbs'
 import { ProjectNotice } from './ProjectNotice'
 import { SideBar } from './SideBar/SideBar'
 import { TopBar } from './TopBar/TopBar'
@@ -30,7 +29,6 @@ export function Navigation({
                         <>
                             <BillingAlertsV2 />
                             {!sceneConfig?.hideProjectNotice && <ProjectNotice />}
-                            <Breadcrumbs />
                         </>
                     )}
                     {children}