Feature/button-to-close-flow-details-view
diff --git a/CHANGELOG.md b/CHANGELOG.md
index c64c8cca90..67531f1916 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -19,6 +19,8 @@
   ([#6747](https://github.com/mitmproxy/mitmproxy/pull/6747), @jlaine)
 * Fix a bug where async `client_connected` handlers would crash mitmproxy.
   ([#6749](https://github.com/mitmproxy/mitmproxy/pull/6749), @mhils)
+  * Add button to close flow details panel
+  ([#6734](https://github.com/mitmproxy/mitmproxy/pull/6734), @lups2000)
 
 ## 07 March 2024: mitmproxy 10.2.4
 
diff --git a/web/src/css/flowdetail.less b/web/src/css/flowdetail.less
index b7f5b8f51a..11039330ff 100644
--- a/web/src/css/flowdetail.less
+++ b/web/src/css/flowdetail.less
@@ -21,6 +21,19 @@
         }
     }
 
+    .close-button {
+        margin-top: 2px;
+        padding-left: 10px;
+        padding-right: 7px;
+        color: grey;
+        font-size: 15px;
+        border: none;
+    }
+
+    .close-button:hover {
+        color: black;
+    }
+
     .first-line {
         font-family: @font-family-monospace;
         background-color: #428bca;
diff --git a/web/src/js/__tests__/components/FlowViewSpec.tsx b/web/src/js/__tests__/components/FlowViewSpec.tsx
index 6374da9f9a..907da453fb 100644
--- a/web/src/js/__tests__/components/FlowViewSpec.tsx
+++ b/web/src/js/__tests__/components/FlowViewSpec.tsx
@@ -4,6 +4,8 @@ import FlowView from "../../components/FlowView";
 import * as flowActions from "../../ducks/flows";
 import fetchMock, { enableFetchMocks } from "jest-fetch-mock";
 import { fireEvent } from "@testing-library/react";
+import { TStore } from "../ducks/tutils";
+import { Provider } from "react-redux";
 
 enableFetchMocks();
 
@@ -58,3 +60,17 @@ test("FlowView", async () => {
     fireEvent.click(screen.getByText("Error"));
     expect(asFragment()).toMatchSnapshot();
 });
+
+test("FlowView close button", async () => {
+    const store = TStore();
+
+    const { getByTestId } = render(
+        <Provider store={store}>
+            <FlowView />
+        </Provider>
+    );
+    fireEvent.click(getByTestId("close-button-id"));
+    expect(store.getActions()).toEqual([
+        { flowIds: [], type: flowActions.SELECT },
+    ]);
+});
diff --git a/web/src/js/__tests__/components/__snapshots__/FlowViewSpec.tsx.snap b/web/src/js/__tests__/components/__snapshots__/FlowViewSpec.tsx.snap
index c0d8e6f4bc..b15f441f10 100644
--- a/web/src/js/__tests__/components/__snapshots__/FlowViewSpec.tsx.snap
+++ b/web/src/js/__tests__/components/__snapshots__/FlowViewSpec.tsx.snap
@@ -8,6 +8,14 @@ exports[`FlowView 1`] = `
     <nav
       class="nav-tabs nav-tabs-sm"
     >
+      <button
+        class="close-button"
+        data-testid="close-button-id"
+      >
+        <i
+          class="fa fa-times-circle"
+        />
+      </button>
       <a
         class="active"
         href="#"
@@ -192,6 +200,14 @@ exports[`FlowView 2`] = `
     <nav
       class="nav-tabs nav-tabs-sm"
     >
+      <button
+        class="close-button"
+        data-testid="close-button-id"
+      >
+        <i
+          class="fa fa-times-circle"
+        />
+      </button>
       <a
         class=""
         href="#"
@@ -374,6 +390,14 @@ exports[`FlowView 3`] = `
     <nav
       class="nav-tabs nav-tabs-sm"
     >
+      <button
+        class="close-button"
+        data-testid="close-button-id"
+      >
+        <i
+          class="fa fa-times-circle"
+        />
+      </button>
       <a
         class=""
         href="#"
@@ -476,6 +500,14 @@ exports[`FlowView 4`] = `
     <nav
       class="nav-tabs nav-tabs-sm"
     >
+      <button
+        class="close-button"
+        data-testid="close-button-id"
+      >
+        <i
+          class="fa fa-times-circle"
+        />
+      </button>
       <a
         class=""
         href="#"
@@ -763,6 +795,14 @@ exports[`FlowView 5`] = `
     <nav
       class="nav-tabs nav-tabs-sm"
     >
+      <button
+        class="close-button"
+        data-testid="close-button-id"
+      >
+        <i
+          class="fa fa-times-circle"
+        />
+      </button>
       <a
         class=""
         href="#"
@@ -969,6 +1009,14 @@ exports[`FlowView 6`] = `
     <nav
       class="nav-tabs nav-tabs-sm"
     >
+      <button
+        class="close-button"
+        data-testid="close-button-id"
+      >
+        <i
+          class="fa fa-times-circle"
+        />
+      </button>
       <a
         class=""
         href="#"
@@ -1038,6 +1086,14 @@ exports[`FlowView 7`] = `
     <nav
       class="nav-tabs nav-tabs-sm"
     >
+      <button
+        class="close-button"
+        data-testid="close-button-id"
+      >
+        <i
+          class="fa fa-times-circle"
+        />
+      </button>
       <a
         class=""
         href="#"
@@ -1107,6 +1163,14 @@ exports[`FlowView 8`] = `
     <nav
       class="nav-tabs nav-tabs-sm"
     >
+      <button
+        class="close-button"
+        data-testid="close-button-id"
+      >
+        <i
+          class="fa fa-times-circle"
+        />
+      </button>
       <a
         class="active"
         href="#"
@@ -1183,6 +1247,14 @@ exports[`FlowView 9`] = `
     <nav
       class="nav-tabs nav-tabs-sm"
     >
+      <button
+        class="close-button"
+        data-testid="close-button-id"
+      >
+        <i
+          class="fa fa-times-circle"
+        />
+      </button>
       <a
         class=""
         href="#"
@@ -1240,6 +1312,14 @@ exports[`FlowView 10`] = `
     <nav
       class="nav-tabs nav-tabs-sm"
     >
+      <button
+        class="close-button"
+        data-testid="close-button-id"
+      >
+        <i
+          class="fa fa-times-circle"
+        />
+      </button>
       <a
         class="active"
         href="#"
@@ -1346,6 +1426,14 @@ exports[`FlowView 11`] = `
     <nav
       class="nav-tabs nav-tabs-sm"
     >
+      <button
+        class="close-button"
+        data-testid="close-button-id"
+      >
+        <i
+          class="fa fa-times-circle"
+        />
+      </button>
       <a
         class=""
         href="#"
@@ -1508,6 +1596,14 @@ exports[`FlowView 12`] = `
     <nav
       class="nav-tabs nav-tabs-sm"
     >
+      <button
+        class="close-button"
+        data-testid="close-button-id"
+      >
+        <i
+          class="fa fa-times-circle"
+        />
+      </button>
       <a
         class=""
         href="#"
@@ -1571,6 +1667,14 @@ exports[`FlowView 13`] = `
     <nav
       class="nav-tabs nav-tabs-sm"
     >
+      <button
+        class="close-button"
+        data-testid="close-button-id"
+      >
+        <i
+          class="fa fa-times-circle"
+        />
+      </button>
       <a
         class="active"
         href="#"
@@ -1647,6 +1751,14 @@ exports[`FlowView 14`] = `
     <nav
       class="nav-tabs nav-tabs-sm"
     >
+      <button
+        class="close-button"
+        data-testid="close-button-id"
+      >
+        <i
+          class="fa fa-times-circle"
+        />
+      </button>
       <a
         class=""
         href="#"
diff --git a/web/src/js/components/FlowView.tsx b/web/src/js/components/FlowView.tsx
index 6e727c3377..5518922be5 100644
--- a/web/src/js/components/FlowView.tsx
+++ b/web/src/js/components/FlowView.tsx
@@ -16,6 +16,7 @@ import { Flow } from "../flow";
 import classnames from "classnames";
 import TcpMessages from "./FlowView/TcpMessages";
 import UdpMessages from "./FlowView/UdpMessages";
+import * as flowsActions from "../ducks/flows";
 
 type TabProps = {
     flow: Flow;
@@ -85,6 +86,13 @@ export default function FlowView() {
     return (
         <div className="flow-detail">
             <nav className="nav-tabs nav-tabs-sm">
+                <button
+                    data-testid="close-button-id"
+                    className="close-button"
+                    onClick={() => dispatch(flowsActions.select(undefined))}
+                >
+                    <i className="fa fa-times-circle"></i>
+                </button>
                 {tabs.map((tabId) => (
                     <a
                         key={tabId}

#### Description

Added a button to close the flow details panel, as discussed in issue #6725. It could be useful to have a button to immediately close the section. This is a preliminary idea, as I didn't want to alter the design significantly. What are your thoughts?

https://github.com/mitmproxy/mitmproxy/assets/100372313/732b29ac-6fff-4eff-be7b-98e4460a93a9


#### Checklist

 - [x] I have updated tests where applicable.
 - [x] I have added an entry to the CHANGELOG.
