Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-09-24 17:51:14 +02:00
Code Issues Projects Releases Wiki Activity

feat: add borders and spacing to feature impact metrics

Browse Source
This commit is contained in:
Tymoteusz Czech 2025-09-05 11:50:39 +02:00
parent 33d898f684
commit 08988f7d7d
No known key found for this signature in database
GPG Key ID: 133555230D88D75F
2 changed files with 19 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureImpactMetrics.tsx
View File

@ -1,6 +1,6 @@
import { PageContent } from 'component/common/PageContent/PageContent.tsx'; import { PageContent } from 'component/common/PageContent/PageContent.tsx';
import { PageHeader } from '../../../common/PageHeader/PageHeader.tsx'; import { PageHeader } from '../../../common/PageHeader/PageHeader.tsx';
import { styled, Typography } from '@mui/material'; import { Box, styled, Typography } from '@mui/material';
import Add from '@mui/icons-material/Add'; import Add from '@mui/icons-material/Add';
import { useImpactMetricsMetadata } from 'hooks/api/getters/useImpactMetricsMetadata/useImpactMetricsMetadata.ts'; import { useImpactMetricsMetadata } from 'hooks/api/getters/useImpactMetricsMetadata/useImpactMetricsMetadata.ts';
import { type FC, useMemo, useState } from 'react'; import { type FC, useMemo, useState } from 'react';
@ -151,7 +151,9 @@ export const FeatureImpactMetrics: FC = () => {
/> />
{impactMetrics.configs.length > 0 && ( {impactMetrics.configs.length > 0 && (
<GridLayoutWrapper items={gridItems} /> <Box sx={(theme) => ({ marginTop: theme.spacing(3) })}>
<GridLayoutWrapper items={gridItems} borders />
</Box>
)} )}
<ChartConfigModal <ChartConfigModal

17
frontend/src/component/impact-metrics/GridLayoutWrapper.tsx
View File

@ -50,13 +50,21 @@ type GridLayoutWrapperProps = {
onLayoutChange?: (layout: LayoutItem[]) => void; onLayoutChange?: (layout: LayoutItem[]) => void;
cols?: { lg: number; md: number; sm: number; xs: number; xxs: number }; cols?: { lg: number; md: number; sm: number; xs: number; xxs: number };
rowHeight?: number; rowHeight?: number;
borders?: boolean;
}; };
const ItemContainer = styled('div', {
shouldForwardProp: (prop) => prop !== 'borders',
})<{ borders: boolean }>(({ theme, borders }) => ({
...(borders && { border: `1px solid ${theme.palette.divider}` }),
}));
export const GridLayoutWrapper: FC<GridLayoutWrapperProps> = ({ export const GridLayoutWrapper: FC<GridLayoutWrapperProps> = ({
items, items,
onLayoutChange, onLayoutChange,
cols = { lg: 12, md: 12, sm: 6, xs: 4, xxs: 2 }, cols = { lg: 12, md: 12, sm: 6, xs: 4, xxs: 2 },
rowHeight = 180, rowHeight = 180,
borders = false,
}) => { }) => {
const theme = useTheme(); const theme = useTheme();
const isMobileBreakpoint = useMediaQuery(theme.breakpoints.down('md')); const isMobileBreakpoint = useMediaQuery(theme.breakpoints.down('md'));
@ -102,8 +110,13 @@ export const GridLayoutWrapper: FC<GridLayoutWrapperProps> = ({
}, [items, cols, isMobileBreakpoint]); }, [items, cols, isMobileBreakpoint]);
const children = useMemo( const children = useMemo(
() => items.map((item) => <div key={item.id}>{item.component}</div>), () =>
[items], items.map((item) => (
<ItemContainer key={item.id} borders={borders}>
{item.component}
</ItemContainer>
)),
[items, borders],
); );
const handleLayoutChange = useCallback( const handleLayoutChange = useCallback(