Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-03-18 00:19:49 +01:00
Code Issues Projects Releases Wiki Activity

fix: insights sticky header (#7607)

Browse Source 
Insights header should show below banners in insights v2
This commit is contained in:
Tymoteusz Czech 2024-07-17 12:02:55 +02:00 committed by GitHub
parent 39f6cbd66c
commit 6e4e58aee8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 40 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/src/component/common/BreadcrumbNav/BreadcrumbNav.tsx
View File

@ -48,10 +48,15 @@ const BreadcrumbNav = () => {
item !== 'features2' && item !== 'features2' &&
item !== 'create-toggle' && item !== 'create-toggle' &&
item !== 'settings' && item !== 'settings' &&
item !== 'profile', item !== 'profile' &&
item !== 'insights',
) )
.map(decodeURI); .map(decodeURI);
if (paths.length === 0) {
return null;
}
return ( return (
<StyledBreadcrumbContainer> <StyledBreadcrumbContainer>
<ConditionallyRender <ConditionallyRender

42
frontend/src/component/insights/Insights.tsx
View File

@ -1,4 +1,4 @@
import { useState, type VFC } from 'react'; import { useState, type FC } from 'react';
import { Box, styled } from '@mui/material'; import { Box, styled } from '@mui/material';
import { ArrayParam, withDefault } from 'use-query-params'; import { ArrayParam, withDefault } from 'use-query-params';
import { usePersistentTableState } from 'hooks/usePersistentTableState'; import { usePersistentTableState } from 'hooks/usePersistentTableState';
@ -12,9 +12,26 @@ import { useInsightsData } from './hooks/useInsightsData';
import { InsightsCharts } from './InsightsCharts'; import { InsightsCharts } from './InsightsCharts';
import { LegacyInsightsCharts } from './LegacyInsightsCharts'; import { LegacyInsightsCharts } from './LegacyInsightsCharts';
import { useUiFlag } from 'hooks/useUiFlag'; import { useUiFlag } from 'hooks/useUiFlag';
import { Sticky } from 'component/common/Sticky/Sticky';
import { InsightsFilters } from './InsightsFilters'; import { InsightsFilters } from './InsightsFilters';
import { FilterItemParam } from '../../utils/serializeQueryParams'; 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, { const StickyWrapper = styled(Box, {
shouldForwardProp: (prop) => prop !== 'scrolled', shouldForwardProp: (prop) => prop !== 'scrolled',
})<{ scrolled?: boolean }>(({ theme, 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 [scrolled, setScrolled] = useState(false);
const { insights, loading, error } = useInsights(); const { insights, loading, error } = useInsights();
const stateConfig = { const stateConfig = {
@ -63,8 +83,8 @@ const LegacyInsights = () => {
} }
return ( return (
<> <StyledWrapper>
<StickyWrapper scrolled={scrolled}> <StickyContainer>
<InsightsHeader <InsightsHeader
actions={ actions={
<StyledProjectSelect <StyledProjectSelect
@ -75,13 +95,13 @@ const LegacyInsights = () => {
/> />
} }
/> />
</StickyWrapper> </StickyContainer>
<LegacyInsightsCharts <LegacyInsightsCharts
loading={loading} loading={loading}
projects={projects} projects={projects}
{...insightsData} {...insightsData}
/> />
</> </StyledWrapper>
); );
}; };
@ -116,8 +136,8 @@ const NewInsights = () => {
} }
return ( return (
<> <StyledWrapper>
<StickyWrapper scrolled={scrolled}> <StickyWrapper>
<InsightsHeader <InsightsHeader
actions={ actions={
<InsightsFilters state={state} onChange={setState} /> <InsightsFilters state={state} onChange={setState} />
@ -129,12 +149,14 @@ const NewInsights = () => {
projects={projects} projects={projects}
{...insightsData} {...insightsData}
/> />
</> </StyledWrapper>
); );
}; };
export const Insights: VFC = () => { export const Insights: FC = () => {
const isInsightsV2Enabled = useUiFlag('insightsV2'); const isInsightsV2Enabled = useUiFlag('insightsV2');
if (isInsightsV2Enabled) return <NewInsights />; if (isInsightsV2Enabled) return <NewInsights />;
return <LegacyInsights />; return <LegacyInsights />;
}; };

4
frontend/src/component/insights/InsightsCharts.tsx
View File

@ -1,4 +1,4 @@
import type { VFC } from 'react'; import type { FC } from 'react';
import { Box, styled } from '@mui/material'; import { Box, styled } from '@mui/material';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { Widget } from './components/Widget/Widget'; 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, projects,
flags, flags,
users, users,