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

frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureImpactMetrics.tsx

@@ -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.length > 0 && (
-                {impactMetrics.configs.map((config) => (
+                <GridLayoutWrapper items={gridItems} />
-                    <ChartItem
+            )}
-                        key={config.id}
-                        config={config}
-                        onEdit={() => handleEditChart(config)}
-                        onDelete={() => handleDeleteChart(config.id)}
-                        permission={UPDATE_FEATURE}
-                        projectId={project}
-                    />
-                ))}
-            </>
 
             <ChartConfigModal
                 open={isModalOpen}

frontend/src/component/impact-metrics/ChartItem.tsx

@@ -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}
-                <DragHandle fontSize='small' />
-            </StyledDragHandle>
             <StyledChartTitle>
                 {config.title && (
                     <Typography variant='h6'>{config.title}</Typography>

frontend/src/component/impact-metrics/ImpactMetrics.tsx

@@ -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,