From bb77cea2580144ab51903aa3d7b47ea776f6648f Mon Sep 17 00:00:00 2001
From: Ben White <ben@posthog.com>
Date: Tue, 5 Dec 2023 16:29:59 +0100
Subject: [PATCH] feat: Added new tag to Notebooks

---
 .../components/NavbarButton.tsx               | 33 ++++++++-----------
 .../navigation-3000/navigationLogic.tsx       |  1 +
 frontend/src/layout/navigation-3000/types.ts  |  2 +-
 3 files changed, 15 insertions(+), 21 deletions(-)

diff --git a/frontend/src/layout/navigation-3000/components/NavbarButton.tsx b/frontend/src/layout/navigation-3000/components/NavbarButton.tsx
index 16b174b3428bc..67d3a496a5a83 100644
--- a/frontend/src/layout/navigation-3000/components/NavbarButton.tsx
+++ b/frontend/src/layout/navigation-3000/components/NavbarButton.tsx
@@ -19,7 +19,7 @@ export interface NavbarButtonProps {
     title?: string
     shortTitle?: string
     forceTooltipOnHover?: boolean
-    tag?: 'alpha' | 'beta'
+    tag?: 'alpha' | 'beta' | 'new'
     onClick?: () => void
     to?: string
     active?: boolean
@@ -53,25 +53,18 @@ export const NavbarButton: FunctionComponent<NavbarButtonProps> = React.forwardR
         if (!isNavCollapsedActually) {
             content = shortTitle || title
             if (tag) {
-                if (tag === 'alpha') {
-                    content = (
-                        <>
-                            <span className="grow">{content}</span>
-                            <LemonTag type="completion" size="small" className="ml-2">
-                                ALPHA
-                            </LemonTag>
-                        </>
-                    )
-                } else if (tag === 'beta') {
-                    content = (
-                        <>
-                            <span className="grow">{content}</span>
-                            <LemonTag type="warning" size="small" className="ml-2">
-                                BETA
-                            </LemonTag>
-                        </>
-                    )
-                }
+                content = (
+                    <>
+                        <span className="grow">{content}</span>
+                        <LemonTag
+                            type={tag === 'alpha' ? 'completion' : tag === 'beta' ? 'warning' : 'warning'}
+                            size="small"
+                            className="ml-2"
+                        >
+                            {tag.toUpperCase()}
+                        </LemonTag>
+                    </>
+                )
             }
         }
 
diff --git a/frontend/src/layout/navigation-3000/navigationLogic.tsx b/frontend/src/layout/navigation-3000/navigationLogic.tsx
index 2b1579e7f2816..4ed8efa755950 100644
--- a/frontend/src/layout/navigation-3000/navigationLogic.tsx
+++ b/frontend/src/layout/navigation-3000/navigationLogic.tsx
@@ -335,6 +335,7 @@ export const navigation3000Logic = kea<navigation3000LogicType>([
                             icon: <IconNotebook />,
                             to: urls.notebooks(),
                             featureFlag: FEATURE_FLAGS.NOTEBOOKS,
+                            tag: 'new' as const,
                         },
                         {
                             identifier: Scene.Events,
diff --git a/frontend/src/layout/navigation-3000/types.ts b/frontend/src/layout/navigation-3000/types.ts
index dbd576dd6e04c..f4ed52d707840 100644
--- a/frontend/src/layout/navigation-3000/types.ts
+++ b/frontend/src/layout/navigation-3000/types.ts
@@ -29,7 +29,7 @@ interface NavbarItemBase {
     label: string
     icon: JSX.Element
     featureFlag?: (typeof FEATURE_FLAGS)[keyof typeof FEATURE_FLAGS]
-    tag?: 'alpha' | 'beta'
+    tag?: 'alpha' | 'beta' | 'new'
 }
 export interface SceneNavbarItem extends NavbarItemBase {
     to: string