(Server) Add Removing Route Button

Summary:
- Add a close button when hovering over the component
- Remove the route corresponding to it when clicking on closing

Note:
- This is a part of this PR: https://github.com/facebook/flipper/pull/488

Reviewed By: mweststrate

Differential Revision: D20444419

fbshipit-source-id: 5ebe112c542b033a3e10ed10f23d6a04a730c657

desktop/plugins/network/ManageMockResponsePanel.tsx

@@ -95,17 +95,18 @@ function _duplicateIds(routes: {[id: string]: Route}): Array<RequestId> {
 function _buildRows(
   routes: {[id: string]: Route},
   duplicatedIds: Array<string>,
+  handleRemoveId: (id: string) => void,
 ) {
   return Object.entries(routes).map(([id, route]) => ({
     columns: {
       route: {
-        value: duplicatedIds.includes(id) ? (
+        value: (
-          <FlexRow>
+          <RouteRow
-            <Icon name="caution-triangle" color={colors.yellow} />
+            key={id}
-            <TextEllipsis>{route.requestUrl}</TextEllipsis>
+            text={route.requestUrl}
-          </FlexRow>
+            showWarning={duplicatedIds.includes(id)}
-        ) : (
+            handleRemoveId={() => handleRemoveId(id)}
-          <TextEllipsis>{route.requestUrl}</TextEllipsis>
+          />
         ),
       },
     },
@@ -113,6 +114,32 @@ function _buildRows(
   }));
 }
 
+function RouteRow(props: {
+  text: string;
+  showWarning: boolean;
+  handleRemoveId: () => void;
+}) {
+  const [showCloseButton, setShowCloseButton] = useState(false);
+  return (
+    <FlexRow
+      grow={true}
+      onMouseEnter={() => setShowCloseButton(true)}
+      onMouseLeave={() => setShowCloseButton(false)}>
+      <FlexRow grow={true}>
+        {props.showWarning && (
+          <Icon name="caution-triangle" color={colors.yellow} />
+        )}
+        <TextEllipsis>{props.text}</TextEllipsis>
+      </FlexRow>
+      {showCloseButton && (
+        <FlexRow onClick={props.handleRemoveId}>
+          <Icon name="cross-circle" color={colors.red} />
+        </FlexRow>
+      )}
+    </FlexRow>
+  );
+}
+
 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}