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: edit impact metrics (#10614)

Browse Source
This commit is contained in:
Mateusz Kwasniewski 2025-09-03 16:55:34 +02:00 committed by GitHub
parent cc8a950348
commit f8990a40ba
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 59 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -13,6 +13,7 @@ import PermissionButton from 'component/common/PermissionButton/PermissionButton
import { ADMIN } from 'component/providers/AccessProvider/permissions.ts';
import useToast from 'hooks/useToast.tsx';
import { formatUnknownError } from 'utils/formatUnknownError.ts';
import type { ChartConfig } from '../../../impact-metrics/types.ts';
const StyledHeaderTitle = styled(Typography)(({ theme }) => ({
fontSize: theme.fontSizes.mainHeader,
@ -20,9 +21,18 @@ const StyledHeaderTitle = styled(Typography)(({ theme }) => ({
lineHeight: theme.spacing(5),
}));
type ModalState =
| { type: 'closed' }
| { type: 'creating' }
| { type: 'editing'; config: ChartConfig };
export const FeatureImpactMetrics: FC = () => {
const feature = useRequiredPathParam('featureId');
const [modalOpen, setModalOpen] = useState(false);
const [modalState, setModalState] = useState<ModalState>({
type: 'closed',
});
const { createImpactMetric, deleteImpactMetric } = useImpactMetricsApi();
const { impactMetrics, refetch } = useFeatureImpactMetrics(feature);
const { setToastApiError } = useToast();
@ -34,7 +44,43 @@ export const FeatureImpactMetrics: FC = () => {
} = useImpactMetricsMetadata();
const handleAddChart = () => {
setModalOpen(true);
setModalState({ type: 'creating' });
};
const handleEditChart = (config: ChartConfig) => {
setModalState({ type: 'editing', config });
};
const handleCloseModal = () => {
setModalState({ type: 'closed' });
};
const handleSaveChart = async (data: Omit<ChartConfig, 'id'>) => {
try {
let configId: string | undefined = undefined;
if (modalState.type === 'editing') {
configId = modalState.config.id;
}
await createImpactMetric({
...data,
feature,
id: configId,
});
refetch();
handleCloseModal();
} catch (error: unknown) {
setToastApiError(formatUnknownError(error));
}
};
const handleDeleteChart = async (configId: string) => {
try {
await deleteImpactMetric(configId);
refetch();
} catch (error: unknown) {
setToastApiError(formatUnknownError(error));
}
};
const metricSeries = useMemo(() => {
@ -47,6 +93,10 @@ export const FeatureImpactMetrics: FC = () => {
}));
}, [metadata]);
const isModalOpen = modalState.type !== 'closed';
const editingChart =
modalState.type === 'editing' ? modalState.config : undefined;
return (
<PageContent>
<PageHeader
@ -69,32 +119,19 @@ export const FeatureImpactMetrics: FC = () => {
<>
{impactMetrics.configs.map((config) => (
<ChartItem
key={config.id}
config={config}
onEdit={() => {}}
onDelete={async () => {
try {
await deleteImpactMetric(config.id);
refetch();
} catch (error: unknown) {
setToastApiError(formatUnknownError(error));
}
}}
onEdit={() => handleEditChart(config)}
onDelete={() => handleDeleteChart(config.id)}
/>
))}
</>
<ChartConfigModal
open={modalOpen}
onClose={() => setModalOpen(false)}
onSave={async (data) => {
try {
await createImpactMetric({ ...data, feature });
refetch();
} catch (error: unknown) {
setToastApiError(formatUnknownError(error));
}
}}
initialConfig={undefined}
open={isModalOpen}
onClose={handleCloseModal}
onSave={handleSaveChart}
initialConfig={editingChart}
metricSeries={metricSeries}
loading={metadataLoading}
/>