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

feat: add borders and spacing to feature impact metrics (#10625)

Browse Source
This commit is contained in:
Tymoteusz Czech 2025-09-05 12:10:25 +02:00 committed by GitHub
parent 33d898f684
commit 82c79a8216
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 12 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
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 && (
<Box sx={(theme) => ({ marginTop: theme.spacing(3) })}>
<GridLayoutWrapper items={gridItems} /> <GridLayoutWrapper items={gridItems} />
</Box>
)} )}
<ChartConfigModal <ChartConfigModal

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

@ -52,6 +52,10 @@ type GridLayoutWrapperProps = {
rowHeight?: number; rowHeight?: number;
}; };
const ItemContainer = styled('div')(({ theme }) => ({
border: `1px solid ${theme.palette.divider}`,
}));
export const GridLayoutWrapper: FC<GridLayoutWrapperProps> = ({ export const GridLayoutWrapper: FC<GridLayoutWrapperProps> = ({
items, items,
onLayoutChange, onLayoutChange,
@ -102,7 +106,10 @@ 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.map((item) => (
<ItemContainer key={item.id}>{item.component}</ItemContainer>
)),
[items], [items],
); );