Add Pop-Out and Close functionality to dashboard [Closes #65] (#71)

.config/config.yml

@@ -23,10 +23,11 @@ mapping:
   space: Select
   f: OpenFilter
   s: OpenSort
-  "]": NextPane
-  "[": PreviousPane
+  "]": NextDetailsTab
+  "[": PreviousDetailsTab
   e: ExpandAll
   E: CollapseAll
+  enter: ShowTraceDetails
 colors:
   surface:
     bg: !Indexed 235

Cargo.toml

@@ -24,6 +24,7 @@ pretty_assertions = "1.4.0"
 chrono = "0.4.31"
 strum = "0.25.0"
 strum_macros = "0.25.3"
+derive-new = "0.6.0"
 
 [profile.release]
 debug = true

src/app.rs

@@ -6,7 +6,7 @@ use std::sync::Arc;
 use crossterm::event::KeyEvent;
 use ratatui::widgets::ScrollbarState;
 use serde::{Deserialize, Serialize};
-use strum_macros::EnumIter;
+use strum_macros::{Display, EnumIs, EnumIter};
 use tokio::sync::mpsc;
 use tokio::sync::mpsc::UnboundedSender;
 use tokio::sync::Mutex;
@@ -18,15 +18,21 @@ use crate::services::websocket::{Client, Trace};
 use crate::tui::{Event, Tui};
 use crate::wss::client;
 
-#[derive(Clone, Copy, Default, Debug, PartialEq, Eq, Serialize, Deserialize, EnumIter)]
+#[derive(Clone, Copy, Default, Debug, PartialEq, Eq, Serialize, Deserialize, Display, EnumIs, EnumIter)]
 #[repr(u8)]
 pub enum DetailsPane {
     #[default]
+    #[strum(serialize = "REQUEST DETAILS")]
     RequestDetails = 0,
+    #[strum(serialize = "QUERY PARAMS")]
     QueryParams,
+    #[strum(serialize = "REQUEST HEADERS")]
     RequestHeaders,
+    #[strum(serialize = "RESPONSE DETAILS")]
     ResponseDetails,
+    #[strum(serialize = "RESPONSE HEADERS")]
     ResponseHeaders,
+    #[strum(serialize = "TIMING")]
     Timing,
 }
 
@@ -77,10 +83,11 @@ pub struct UIState {
     pub horizontal_scroll_state: ScrollbarState,
 }
 
-#[derive(Clone, Debug, Eq, PartialEq, Serialize, Deserialize)]
+#[derive(Clone, Debug, Default, Eq, PartialEq, Serialize, Deserialize)]
 pub enum Action {
     #[serde(skip)]
     Error(String),
+    #[default]
     CopyToClipBoard,
     NavigateLeft(Option<KeyEvent>),
     NavigateDown(Option<KeyEvent>),
@@ -110,8 +117,8 @@ pub enum Action {
     SelectTrace(Option<Trace>),
     UpdateTraceIndex(usize),
     ShowTraceDetails,
-    NextPane,
-    PreviousPane,
+    NextDetailsTab,
+    PreviousDetailsTab,
     ScheduleStartWebSocketServer,
     ScheduleStopWebSocketServer,
     StartWebSocketServer,
@@ -133,6 +140,8 @@ pub enum Action {
     ExpandAll,
     CollapseAll,
     ActivateBlock(ActiveBlock),
+    PopOutDetailsTab(DetailsPane),
+    CloseDetailsPane(DetailsPane),
 }
 
 #[derive(Default)]
@@ -221,7 +230,7 @@ impl App {
 
             if let Some(Event::Render) = event {
                 for component in self.components.iter() {
-                    let c = component.lock().await;
+                    let mut c = component.lock().await;
                     t.terminal.draw(|frame| {
                         let r = c.render(frame, frame.size());
                         if let Err(e) = r {

src/components/actionable_list.rs

@@ -0,0 +1,87 @@
+use derive_new::new;
+use ratatui::widgets::ListState;
+
+use crate::app::Action;
+
+pub struct ActionableListItem {
+    pub label: String,
+    pub value: Option<String>,
+    pub action: Option<Action>,
+}
+
+impl ActionableListItem {
+    pub fn with_label(label: &str) -> Self {
+        Self {
+            label: label.to_string(),
+            value: None,
+            action: None,
+        }
+    }
+    pub fn with_labelled_value(label: &str, value: &str) -> Self {
+        Self {
+            label: label.to_string(),
+            value: Some(value.to_string()),
+            action: None,
+        }
+    }
+    pub fn with_action(label: &str, value: &str, action: Action) -> Self {
+        Self {
+            label: label.to_string(),
+            value: Some(value.to_string()),
+            action: Some(action),
+        }
+    }
+}
+
+#[derive(Default, new)]
+pub struct ActionableList {
+    pub items: Vec<ActionableListItem>,
+    pub state: ListState,
+}
+
+impl ActionableList {
+    pub fn reset(&mut self) {
+        self.state.select(Some(0));
+    }
+
+    pub fn next(&mut self) {
+        let i = match self.state.selected() {
+            Some(i) => {
+                if i >= self.items.len().saturating_sub(1) {
+                    i
+                } else {
+                    i + 1
+                }
+            }
+            None => 0,
+        };
+        self.state.select(Some(i));
+    }
+
+    pub fn previous(&mut self) {
+        let i = match self.state.selected() {
+            Some(i) => {
+                if i == 0 {
+                    i
+                } else {
+                    i - 1
+                }
+            }
+            None => 0,
+        };
+        self.state.select(Some(i));
+    }
+
+    pub fn select(&mut self) -> Option<Action> {
+        match self.state.selected() {
+            Some(i) => {
+                if let Some(item) = self.items.get(i) {
+                    item.action.clone()
+                } else {
+                    None
+                }
+            }
+            None => None,
+        }
+    }
+}

src/components/component.rs

@@ -31,7 +31,7 @@ pub trait Component {
     fn update(&mut self, action: Action) -> Result<Option<Action>, Box<dyn Error>> {
         Ok(None)
     }
-    fn render(&self, f: &mut Frame, r: Rect) -> Result<(), Box<dyn Error>>;
+    fn render(&mut self, f: &mut Frame, r: Rect) -> Result<(), Box<dyn Error>>;
 
     fn on_mount(&mut self) -> Result<Option<Action>, Box<dyn Error>>;
 }