From 6e4e58aee86020bcb9de7aebc228e97643f90a42 Mon Sep 17 00:00:00 2001
From: Tymoteusz Czech <2625371+Tymek@users.noreply.github.com>
Date: Wed, 17 Jul 2024 12:02:55 +0200
Subject: [PATCH] fix: insights sticky header (#7607)

Insights header should show below banners in insights v2
---
 .../common/BreadcrumbNav/BreadcrumbNav.tsx    |  7 +++-
 frontend/src/component/insights/Insights.tsx  | 42 ++++++++++++++-----
 .../src/component/insights/InsightsCharts.tsx |  4 +-
 3 files changed, 40 insertions(+), 13 deletions(-)

diff --git a/frontend/src/component/common/BreadcrumbNav/BreadcrumbNav.tsx b/frontend/src/component/common/BreadcrumbNav/BreadcrumbNav.tsx
index f936c9f3bd05..c81a9733caee 100644
--- a/frontend/src/component/common/BreadcrumbNav/BreadcrumbNav.tsx
+++ b/frontend/src/component/common/BreadcrumbNav/BreadcrumbNav.tsx
@@ -48,10 +48,15 @@ const BreadcrumbNav = () => {
                 item !== 'features2' &&
                 item !== 'create-toggle' &&
                 item !== 'settings' &&
-                item !== 'profile',
+                item !== 'profile' &&
+                item !== 'insights',
         )
         .map(decodeURI);
 
+    if (paths.length === 0) {
+        return null;
+    }
+
     return (
         <StyledBreadcrumbContainer>
             <ConditionallyRender
diff --git a/frontend/src/component/insights/Insights.tsx b/frontend/src/component/insights/Insights.tsx
index c3f3340e3762..f76a79581235 100644
--- a/frontend/src/component/insights/Insights.tsx
+++ b/frontend/src/component/insights/Insights.tsx
@@ -1,4 +1,4 @@
-import { useState, type VFC } from 'react';
+import { useState, type FC } from 'react';
 import { Box, styled } from '@mui/material';
 import { ArrayParam, withDefault } from 'use-query-params';
 import { usePersistentTableState } from 'hooks/usePersistentTableState';
@@ -12,9 +12,26 @@ import { useInsightsData } from './hooks/useInsightsData';
 import { InsightsCharts } from './InsightsCharts';
 import { LegacyInsightsCharts } from './LegacyInsightsCharts';
 import { useUiFlag } from 'hooks/useUiFlag';
+import { Sticky } from 'component/common/Sticky/Sticky';
 import { InsightsFilters } from './InsightsFilters';
 import { FilterItemParam } from '../../utils/serializeQueryParams';
 
+const StyledWrapper = styled('div')(({ theme }) => ({
+    paddingTop: theme.spacing(1),
+}));
+
+const StickyContainer = styled(Sticky)(({ theme }) => ({
+    position: 'sticky',
+    top: 0,
+    zIndex: theme.zIndex.sticky,
+    padding: theme.spacing(2, 0),
+    background: theme.palette.background.application,
+    transition: 'padding 0.3s ease',
+}));
+
+/**
+ * @deprecated remove with insightsV2 flag
+ */
 const StickyWrapper = styled(Box, {
     shouldForwardProp: (prop) => prop !== 'scrolled',
 })<{ scrolled?: boolean }>(({ theme, scrolled }) => ({
@@ -34,7 +51,10 @@ const StyledProjectSelect = styled(ProjectSelect)(({ theme }) => ({
     },
 }));
 
-const LegacyInsights = () => {
+/**
+ * @deprecated remove with insightsV2 flag
+ */
+const LegacyInsights: FC = () => {
     const [scrolled, setScrolled] = useState(false);
     const { insights, loading, error } = useInsights();
     const stateConfig = {
@@ -63,8 +83,8 @@ const LegacyInsights = () => {
     }
 
     return (
-        <>
-            <StickyWrapper scrolled={scrolled}>
+        <StyledWrapper>
+            <StickyContainer>
                 <InsightsHeader
                     actions={
                         <StyledProjectSelect
@@ -75,13 +95,13 @@ const LegacyInsights = () => {
                         />
                     }
                 />
-            </StickyWrapper>
+            </StickyContainer>
             <LegacyInsightsCharts
                 loading={loading}
                 projects={projects}
                 {...insightsData}
             />
-        </>
+        </StyledWrapper>
     );
 };
 
@@ -116,8 +136,8 @@ const NewInsights = () => {
     }
 
     return (
-        <>
-            <StickyWrapper scrolled={scrolled}>
+        <StyledWrapper>
+            <StickyWrapper>
                 <InsightsHeader
                     actions={
                         <InsightsFilters state={state} onChange={setState} />
@@ -129,12 +149,14 @@ const NewInsights = () => {
                 projects={projects}
                 {...insightsData}
             />
-        </>
+        </StyledWrapper>
     );
 };
 
-export const Insights: VFC = () => {
+export const Insights: FC = () => {
     const isInsightsV2Enabled = useUiFlag('insightsV2');
+
     if (isInsightsV2Enabled) return <NewInsights />;
+
     return <LegacyInsights />;
 };
diff --git a/frontend/src/component/insights/InsightsCharts.tsx b/frontend/src/component/insights/InsightsCharts.tsx
index 932aa83d3f84..24ff00ddeda1 100644
--- a/frontend/src/component/insights/InsightsCharts.tsx
+++ b/frontend/src/component/insights/InsightsCharts.tsx
@@ -1,4 +1,4 @@
-import type { VFC } from 'react';
+import type { FC } from 'react';
 import { Box, styled } from '@mui/material';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { Widget } from './components/Widget/Widget';
@@ -71,7 +71,7 @@ const ChartWidget = styled(Widget)(({ theme }) => ({
     },
 }));
 
-export const InsightsCharts: VFC<IChartsProps> = ({
+export const InsightsCharts: FC<IChartsProps> = ({
     projects,
     flags,
     users,