diff --git a/desktop/plugins/network/ManageMockResponsePanel.tsx b/desktop/plugins/network/ManageMockResponsePanel.tsx index 771e91e55..1d6d59c8b 100644 --- a/desktop/plugins/network/ManageMockResponsePanel.tsx +++ b/desktop/plugins/network/ManageMockResponsePanel.tsx @@ -95,17 +95,18 @@ function _duplicateIds(routes: {[id: string]: Route}): Array { function _buildRows( routes: {[id: string]: Route}, duplicatedIds: Array, + handleRemoveId: (id: string) => void, ) { return Object.entries(routes).map(([id, route]) => ({ columns: { route: { - value: duplicatedIds.includes(id) ? ( - - - {route.requestUrl} - - ) : ( - {route.requestUrl} + value: ( + handleRemoveId(id)} + /> ), }, }, @@ -113,6 +114,32 @@ function _buildRows( })); } +function RouteRow(props: { + text: string; + showWarning: boolean; + handleRemoveId: () => void; +}) { + const [showCloseButton, setShowCloseButton] = useState(false); + return ( + setShowCloseButton(true)} + onMouseLeave={() => setShowCloseButton(false)}> + + {props.showWarning && ( + + )} + {props.text} + + {showCloseButton && ( + + + + )} + + ); +} + function ManagedMockResponseRightPanel(props: { id: string; route: Route; @@ -173,7 +200,10 @@ export function ManageMockResponsePanel(props: Props) { multiline={true} columnSizes={ColumnSizes} columns={Columns} - rows={_buildRows(routes, duplicatedIds)} + rows={_buildRows(routes, duplicatedIds, id => { + networkRouteManager.removeRoute(id); + setSelectedId(null); + })} stickyBottom={true} autoHeight={false} floating={false}