Browse Source

feat(insights): show is new badge insights/explore (#71929)

Show new badge for insights and explore menus, these badges get removed
as soon as the accordion gets expanded.

![image](https://github.com/getsentry/sentry/assets/44422760/d8af2178-7f4e-4779-b0ea-239eb20b7d58)

If the parent item does not have a link, we won't show the new badge
when the accordion is floating (otherwise the new badge would be
permanent here as the item is non-clickable)
I.e Insights in this state would never show `New`

![image](https://github.com/getsentry/sentry/assets/44422760/58f6ac27-a55f-4de9-bd56-c5a9c169508a)

---------

Co-authored-by: George Gritsouk <989898+gggritso@users.noreply.github.com>
Dominik Buszowiecki 9 months ago
parent
commit
78c8b443a4

+ 1 - 0
static/app/components/sidebar/index.tsx

@@ -600,6 +600,7 @@ function Sidebar() {
       icon={<IconGraph />}
       label={<GuideAnchor target="insights">{t('Insights')}</GuideAnchor>}
       id="insights"
+      isNew
       exact={!shouldAccordionFloat}
     >
       {requests}

+ 3 - 2
static/app/components/sidebar/sidebarItem.tsx

@@ -157,6 +157,7 @@ function SidebarItem({
     !hasPanel && router && isItemActive({to, label: labelString}, exact);
 
   const isInFloatingAccordion = (isNested || isMainItem) && shouldAccordionFloat;
+  const hasLink = Boolean(to);
 
   const isActive = defined(active) ? active : isActiveRouter;
   const isTop = orientation === 'top' && !isInFloatingAccordion;
@@ -164,7 +165,8 @@ function SidebarItem({
 
   const seenSuffix = isNewSeenKeySuffix ?? '';
   const isNewSeenKey = `sidebar-new-seen:${id}${seenSuffix}`;
-  const showIsNew = isNew && !localStorage.getItem(isNewSeenKey);
+  const showIsNew =
+    isNew && !localStorage.getItem(isNewSeenKey) && !(isInFloatingAccordion && !hasLink);
 
   const organization = useOrganization({allowNull: true});
 
@@ -201,7 +203,6 @@ function SidebarItem({
   );
 
   const isInCollapsedState = !isInFloatingAccordion && collapsed;
-  const hasLink = Boolean(to);
 
   return (
     <Tooltip