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

feat: grid layout for flag impact metrics (#10619)

Browse Source
This commit is contained in:
Mateusz Kwasniewski 2025-09-04 15:09:49 +02:00 committed by GitHub
parent 9388ef66d0
commit 4e4950adb7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 52 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,6 +9,10 @@ import { useImpactMetricsApi } from 'hooks/api/actions/useImpactMetricsSettingsA
import { useRequiredPathParam } from 'hooks/useRequiredPathParam.ts';
import { useFeatureImpactMetrics } from 'hooks/api/getters/useFeatureImpactMetrics/useFeatureImpactMetrics.ts';
import { ChartItem } from '../../../impact-metrics/ChartItem.tsx';
import {
GridLayoutWrapper,
type GridItem,
} from '../../../impact-metrics/GridLayoutWrapper.tsx';
import PermissionButton from 'component/common/PermissionButton/PermissionButton.tsx';
import { UPDATE_FEATURE } from 'component/providers/AccessProvider/permissions.ts';
import useToast from 'hooks/useToast.tsx';
@ -98,6 +102,28 @@ export const FeatureImpactMetrics: FC = () => {
const editingChart =
modalState.type === 'editing' ? modalState.config : undefined;
const gridItems: GridItem[] = useMemo(
() =>
impactMetrics.configs.map((config, index) => ({
id: config.id,
component: (
<ChartItem
config={config}
onEdit={() => handleEditChart(config)}
onDelete={() => handleDeleteChart(config.id)}
permission={UPDATE_FEATURE}
projectId={project}
/>
),
w: 6,
h: 2,
x: (index % 2) * 6,
y: Math.floor(index / 2) * 2,
static: true,
})),
[impactMetrics.configs, project],
);
return (
<PageContent>
<PageHeader
@ -118,18 +144,9 @@ export const FeatureImpactMetrics: FC = () => {
}
/>
<>
{impactMetrics.configs.map((config) => (
<ChartItem
key={config.id}
config={config}
onEdit={() => handleEditChart(config)}
onDelete={() => handleDeleteChart(config.id)}
permission={UPDATE_FEATURE}
projectId={project}
/>
))}
</>
{impactMetrics.configs.length > 0 && (
<GridLayoutWrapper items={gridItems} />
)}
<ChartConfigModal
open={isModalOpen}

20
frontend/src/component/impact-metrics/ChartItem.tsx
View File

@ -2,7 +2,6 @@ import type { FC } from 'react';
import { Box, Typography, styled, Paper } from '@mui/material';
import Edit from '@mui/icons-material/Edit';
import Delete from '@mui/icons-material/Delete';
import DragHandle from '@mui/icons-material/DragHandle';
import { ImpactMetricsChart } from './ImpactMetricsChart.tsx';
import type { ChartConfig, DisplayChartConfig } from './types.ts';
import PermissionIconButton from '../common/PermissionIconButton/PermissionIconButton.tsx';
@ -14,6 +13,7 @@ export interface ChartItemProps {
onDelete: (id: string) => void;
permission?: string;
projectId?: string;
dragHandle?: React.ReactNode;
}
const getConfigDescription = (config: DisplayChartConfig): string => {
@ -77,19 +77,6 @@ const StyledHeader = styled(Box)(({ theme }) => ({
borderBottom: `1px solid ${theme.palette.divider}`,
}));
const StyledDragHandle = styled(Box)(({ theme }) => ({
display: 'flex',
alignItems: 'center',
cursor: 'move',
padding: theme.spacing(0.5),
borderRadius: theme.shape.borderRadius,
color: theme.palette.text.secondary,
'&:hover': {
backgroundColor: theme.palette.action.hover,
color: theme.palette.text.primary,
},
}));
const StyledChartTitle = styled(Box)(({ theme }) => ({
display: 'flex',
flexDirection: 'column',
@ -112,12 +99,11 @@ export const ChartItem: FC<ChartItemProps> = ({
onDelete,
permission = ADMIN,
projectId,
dragHandle,
}) => (
<StyledWidget>
<StyledHeader>
<StyledDragHandle className='grid-item-drag-handle'>
<DragHandle fontSize='small' />
</StyledDragHandle>
{dragHandle}
<StyledChartTitle>
{config.title && (
<Typography variant='h6'>{config.title}</Typography>

21
frontend/src/component/impact-metrics/ImpactMetrics.tsx
View File

@ -1,7 +1,8 @@
import type { FC } from 'react';
import { useMemo, useState, useCallback } from 'react';
import { Typography, Button, Paper, styled } from '@mui/material';
import { Typography, Button, Paper, styled, Box } from '@mui/material';
import Add from '@mui/icons-material/Add';
import DragHandle from '@mui/icons-material/DragHandle';
import { PageHeader } from 'component/common/PageHeader/PageHeader.tsx';
import { useImpactMetricsMetadata } from 'hooks/api/getters/useImpactMetricsMetadata/useImpactMetricsMetadata';
import { ChartConfigModal } from './ChartConfigModal/ChartConfigModal.tsx';
@ -22,6 +23,19 @@ const StyledEmptyState = styled(Paper)(({ theme }) => ({
boxShadow: 'none',
}));
const StyledDragHandle = styled(Box)(({ theme }) => ({
display: 'flex',
alignItems: 'center',
cursor: 'move',
padding: theme.spacing(0.5),
borderRadius: theme.shape.borderRadius,
color: theme.palette.text.secondary,
'&:hover': {
backgroundColor: theme.palette.action.hover,
color: theme.palette.text.primary,
},
}));
export const ImpactMetrics: FC = () => {
const [modalOpen, setModalOpen] = useState(false);
const [editingChart, setEditingChart] = useState<ChartConfig | undefined>();
@ -112,6 +126,11 @@ export const ImpactMetrics: FC = () => {
config={config}
onEdit={handleEditChart}
onDelete={handleDeleteChart}
dragHandle={
<StyledDragHandle className='grid-item-drag-handle'>
<DragHandle fontSize='small' />
</StyledDragHandle>
}
/>
),
w: existingLayout?.w ?? 6,