fix(ui): upgrade tui to latest version and fix breaking changes (#190)

* fix(ui): upgrade tui to latest version and fix for breaking changes in the api

* fix(style): address PR comments

8 files changed, 94 insertions, 84 deletions

diff --git a/src/display/components/header_details.rs b/src/display/components/header_details.rs
index 042d667..c321265 100644
--- a/src/display/components/header_details.rs
+++ b/src/display/components/header_details.rs
@@ -4,7 +4,8 @@ use ::tui::backend::Backend;
 use ::tui::layout::{Alignment, Rect};
 use ::tui::style::{Color, Modifier, Style};
 use ::tui::terminal::Frame;
-use ::tui::widgets::{Paragraph, Text, Widget};
+use ::tui::text::Span;
+use ::tui::widgets::Paragraph;
 
 const SECONDS_IN_DAY: u64 = 86400;
 
@@ -53,16 +54,13 @@ impl<'a> HeaderDetails<'a> {
         bandwidth: &str,
         color: Color,
     ) {
-        let bandwidth_text = {
-            [Text::styled(
-                bandwidth,
-                Style::default().fg(color).modifier(Modifier::BOLD),
-            )]
-        };
+        let bandwidth_text = Span::styled(
+            bandwidth,
+            Style::default().fg(color).add_modifier(Modifier::BOLD),
+        );
 
-        Paragraph::new(bandwidth_text.iter())
-            .alignment(Alignment::Left)
-            .render(frame, rect);
+        let paragraph = Paragraph::new(bandwidth_text).alignment(Alignment::Left);
+        frame.render_widget(paragraph, rect);
     }
 
     fn bandwidth_string(&self) -> String {
@@ -88,13 +86,12 @@ impl<'a> HeaderDetails<'a> {
         elapsed_time: &str,
         color: Color,
     ) {
-        let elapsed_time_text = [Text::styled(
+        let elapsed_time_text = Span::styled(
             elapsed_time,
-            Style::default().fg(color).modifier(Modifier::BOLD),
-        )];
-        Paragraph::new(elapsed_time_text.iter())
-            .alignment(Alignment::Right)
-            .render(frame, rect);
+            Style::default().fg(color).add_modifier(Modifier::BOLD),
+        );
+        let paragraph = Paragraph::new(elapsed_time_text).alignment(Alignment::Right);
+        frame.render_widget(paragraph, rect);
     }
 
     fn days_string(&self) -> String {
diff --git a/src/display/components/help_text.rs b/src/display/components/help_text.rs
index 7d66ad8..29c8267 100644
--- a/src/display/components/help_text.rs
+++ b/src/display/components/help_text.rs
@@ -2,7 +2,8 @@ use ::tui::backend::Backend;
 use ::tui::layout::{Alignment, Rect};
 use ::tui::style::{Modifier, Style};
 use ::tui::terminal::Frame;
-use ::tui::widgets::{Paragraph, Text, Widget};
+use ::tui::text::Span;
+use ::tui::widgets::Paragraph;
 
 pub struct HelpText {
     pub paused: bool,
@@ -20,34 +21,31 @@ const TEXT_TAB_TIP: &str = " Use <TAB> to rearrange tables.";
 
 impl HelpText {
     pub fn render(&self, frame: &mut Frame<impl Backend>, rect: Rect) {
-        let text = {
-            let pause_content = if self.paused {
-                TEXT_WHEN_PAUSED
-            } else {
-                TEXT_WHEN_NOT_PAUSED
-            };
-
-            let dns_content = if rect.width <= FIRST_WIDTH_BREAKPOINT {
-                ""
-            } else if self.show_dns {
-                TEXT_WHEN_DNS_SHOWN
-            } else {
-                TEXT_WHEN_DNS_NOT_SHOWN
-            };
+        let pause_content = if self.paused {
+            TEXT_WHEN_PAUSED
+        } else {
+            TEXT_WHEN_NOT_PAUSED
+        };
 
-            let tab_text = if rect.width <= SECOND_WIDTH_BREAKPOINT {
-                ""
-            } else {
-                TEXT_TAB_TIP
-            };
+        let dns_content = if rect.width <= FIRST_WIDTH_BREAKPOINT {
+            ""
+        } else if self.show_dns {
+            TEXT_WHEN_DNS_SHOWN
+        } else {
+            TEXT_WHEN_DNS_NOT_SHOWN
+        };
 
-            [Text::styled(
-                format!("{}{}{}", pause_content, tab_text, dns_content),
-                Style::default().modifier(Modifier::BOLD),
-            )]
+        let tab_text = if rect.width <= SECOND_WIDTH_BREAKPOINT {
+            ""
+        } else {
+            TEXT_TAB_TIP
         };
-        Paragraph::new(text.iter())
-            .alignment(Alignment::Left)
-            .render(frame, rect);
+
+        let text = Span::styled(
+            [pause_content, tab_text, dns_content].concat(),
+            Style::default().add_modifier(Modifier::BOLD),
+        );
+        let paragraph = Paragraph::new(text).alignment(Alignment::Left);
+        frame.render_widget(paragraph, rect);
     }
 }
diff --git a/src/display/components/table.rs b/src/display/components/table.rs
index 8628054..65de8be 100644
--- a/src/display/components/table.rs
+++ b/src/display/components/table.rs
@@ -3,10 +3,10 @@ use ::std::iter::FromIterator;
 use ::unicode_width::UnicodeWidthChar;
 
 use ::tui::backend::Backend;
-use ::tui::layout::Rect;
+use ::tui::layout::{Constraint, Rect};
 use ::tui::style::{Color, Style};
 use ::tui::terminal::Frame;
-use ::tui::widgets::{Block, Borders, Row, Widget};
+use ::tui::widgets::{Block, Borders, Row};
 
 use crate::display::{Bandwidth, DisplayBandwidth, UIState};
 use crate::network::{display_connection_string, display_ip_or_host};
@@ -216,7 +216,7 @@ impl<'a> Table<'a> {
             0,
             ColumnData {
                 column_count: ColumnCount::Two,
-                column_widths: vec![12, 23],
+                column_widths: vec![15, 20],
             },
         );
         breakpoints.insert(
@@ -290,13 +290,14 @@ impl<'a> Table<'a> {
         });
 
         let table_rows = rows.map(|row| Row::StyledData(row.into_iter(), Style::default()));
-
-        ::tui::widgets::Table::new(column_names.into_iter(), table_rows)
+        let width_constraints: Vec<Constraint> =
+            widths.iter().map(|w| Constraint::Length(*w)).collect();
+        let table = ::tui::widgets::Table::new(column_names.into_iter(), table_rows)
             .block(Block::default().title(self.title).borders(Borders::ALL))
             .header_style(Style::default().fg(Color::Yellow))
-            .widths(&widths[..])
+            .widths(&width_constraints)
             .style(Style::default())
-            .column_spacing(column_spacing)
-            .render(frame, rect);
+            .column_spacing(column_spacing);
+        frame.render_widget(table, rect);
     }
 }
diff --git a/src/main.rs b/src/main.rs
index c9ff945..93f4c76 100644
--- a/src/main.rs
+++ b/src/main.rs
@@ -84,7 +84,8 @@ fn try_main() -> Result<(), failure::Error> {
     } else {
         match terminal::enable_raw_mode() {
             Ok(()) => {
-                let terminal_backend = CrosstermBackend::new();
+                let stdout = std::io::stdout();
+                let terminal_backend = CrosstermBackend::new(stdout);
                 start(terminal_backend, os_input, opts);
             }
             Err(_) => failure::bail!(
diff --git a/src/tests/cases/snapshots/ui__layout_under_50_width_under_50_height-2.snap b/src/tests/cases/snapshots/ui__layout_under_50_width_under_50_height-2.snap
index d614423..2c8abf1 100644
--- a/src/tests/cases/snapshots/ui__layout_under_50_width_under_50_height-2.snap
+++ b/src/tests/cases/snapshots/ui__layout_under_50_width_under_50_height-2.snap
@@ -29,10 +29,10 @@ expression: "&terminal_draw_events_mirror[1]"
                                                  
                                                  
                                                  
- 3.3.3.3            0Bps / 28Bps                 
- 2.2.2.2            0Bps / 26Bps                 
- 1.1.1.1            0Bps / 22Bps                 
- 4.4.4.4            0Bps / 21Bps                 
+ 3.3.3.3               0Bps / 28Bps              
+ 2.2.2.2               0Bps / 26Bps              
+ 1.1.1.1               0Bps / 22Bps              
+ 4.4.4.4               0Bps / 21Bps              
                                                  
                                                  
                                                  
diff --git a/src/tests/cases/snapshots/ui__layout_under_50_width_under_50_height.snap b/src/tests/cases/snapshots/ui__layout_under_50_width_under_50_height.snap
index a3b00e3..05185f5 100644
--- a/src/tests/cases/snapshots/ui__layout_under_50_width_under_50_height.snap
+++ b/src/tests/cases/snapshots/ui__layout_under_50_width_under_50_height.snap
@@ -27,7 +27,7 @@ expression: "&terminal_draw_events_mirror[0]"
 │                                               │
 └───────────────────────────────────────────────┘
 ┌Utilization by remote address──────────────────┐
-│Remote Address     Up / Down                   │
+│Remote Address        Up / Down                │
 │                                               │
 │                                               │
 │                                               │
diff --git a/src/tests/cases/snapshots/ui__two_windows_split_horizontally.snap b/src/tests/cases/snapshots/ui__two_windows_split_horizontally.snap
index 5e4e972..d59324a 100644
--- a/src/tests/cases/snapshots/ui__two_windows_split_horizontally.snap
+++ b/src/tests/cases/snapshots/ui__two_windows_split_horizontally.snap
@@ -4,7 +4,7 @@ expression: "&terminal_draw_events_mirror[0]"
 ---
  Total Up / Down: 0Bps / 0Bps                               
 ┌Utilization by remote address─────────────────────────────┐
-│Remote Address          Up / Down                         │
+│Remote Address             Up / Down                      │
 │                                                          │
 │                                                          │
 │                                                          │
diff --git a/src/tests/cases/ui.rs b/src/tests/cases/ui.rs
index 9bbcf86..d526021 100644
--- a/src/tests/cases/ui.rs
+++ b/src/tests/cases/ui.rs
@@ -32,7 +32,9 @@ fn basic_startup() {
     start(backend, os_input, opts);
     let terminal_draw_events_mirror = terminal_draw_events.lock().unwrap();
 
-    let expected_terminal_events = vec![Clear, HideCursor, Draw, Flush, Clear, ShowCursor];
+    let expected_terminal_events = vec![
+        Clear, HideCursor, Draw, HideCursor, Flush, Clear, ShowCursor,
+    ];
     assert_eq!(
         &terminal_events.lock().unwrap()[..],
         &expected_terminal_events[..]
@@ -88,7 +90,8 @@ fn pause_by_space() {
     start(backend, os_input, opts);
     let terminal_draw_events_mirror = terminal_draw_events.lock().unwrap();
     let expected_terminal_events = vec![
-        Clear, HideCursor, Draw, Flush, Draw, Flush, Draw, Flush, Clear, ShowCursor,
+        Clear, HideCursor, Draw, HideCursor, Flush, Draw, HideCursor, Flush, Draw, HideCursor,
+        Flush, Clear, ShowCursor,
     ];
     assert_eq!(
         &terminal_events.lock().unwrap()[..],
@@ -143,8 +146,8 @@ fn rearranged_by_tab() {
     start(backend, os_input, opts);
     let terminal_draw_events_mirror = terminal_draw_events.lock().unwrap();
     let expected_terminal_events = vec![
-        Clear, HideCursor, Draw, Flush, Draw, Flush, Draw, Flush, Draw, Flush, Draw, Flush, Clear,
-        ShowCursor,
+        Clear, HideCursor, Draw, HideCursor, Flush, Draw, HideCursor, Flush, Draw, HideCursor,
+        Flush, Draw, HideCursor, Flush, Draw, HideCursor, Flush, Clear, ShowCursor,
     ];
     assert_eq!(
         &terminal_events.lock().unwrap()[..],
@@ -405,7 +408,7 @@ fn one_packet_of_traffic() {
     let terminal_draw_events_mirror = terminal_draw_events.lock().unwrap();
 
     let expected_terminal_events = vec![
-        Clear, HideCursor, Draw, Flush, Draw, Flush, Clear, ShowCursor,
+        Clear, HideCursor, Draw, HideCursor, Flush, Draw, HideCursor, Flush, Clear, ShowCursor,
     ];
     assert_eq!(
         &terminal_events.lock().unwrap()[..],
@@ -428,7 +431,7 @@ fn bi_directional_traffic() {
     let terminal_draw_events_mirror = terminal_draw_events.lock().unwrap();
 
     let expected_terminal_events = vec![
-        Clear, HideCursor, Draw, Flush, Draw, Flush, Clear, ShowCursor,
+        Clear, HideCursor, Draw, HideCursor, Flush, Draw, HideCursor, Flush, Clear, ShowCursor,
     ];
     assert_eq!(
         &terminal_events.lock().unwrap()[..],
@@ -466,7 +469,7 @@ fn multiple_packets_of_traffic_from_different_connections() {
     let terminal_draw_events_mirror = terminal_draw_events.lock().unwrap();
 
     let expected_terminal_events = vec![
-        Clear, HideCursor, Draw, Flush, Draw, Flush, Clear, ShowCursor,
+        Clear, HideCursor, Draw, HideCursor, Flush, Draw, HideCursor, Flush, Clear, ShowCursor,
     ];
     assert_eq!(
         &terminal_events.lock().unwrap()[..],
@@ -504,7 +507,7 @@ fn multiple_packets_of_traffic_from_single_connection() {
     let terminal_draw_events_mirror = terminal_draw_events.lock().unwrap();
 
     let expected_terminal_events = vec![
-        Clear, HideCursor, Draw, Flush, Draw, Flush, Clear, ShowCursor,
+        Clear, HideCursor, Draw, HideCursor, Flush, Draw, HideCursor, Flush, Clear, ShowCursor,
     ];
     assert_eq!(
         &terminal_events.lock().unwrap()[..],
@@ -542,7 +545,7 @@ fn one_process_with_multiple_connections() {
     let terminal_draw_events_mirror = terminal_draw_events.lock().unwrap();
 
     let expected_terminal_events = vec![
-        Clear, HideCursor, Draw, Flush, Draw, Flush, Clear, ShowCursor,
+        Clear, HideCursor, Draw, HideCursor, Flush, Draw, HideCursor, Flush, Clear, ShowCursor,
     ];
     assert_eq!(
         &terminal_events.lock().unwrap()[..],
@@ -594,7 +597,7 @@ fn multiple_processes_with_multiple_connections() {
     let terminal_draw_events_mirror = terminal_draw_events.lock().unwrap();
 
     let expected_terminal_events = vec![
-        Clear, HideCursor, Draw, Flush, Draw, Flush, Clear, ShowCursor,
+        Clear, HideCursor, Draw, HideCursor, Flush, Draw, HideCursor, Flush, Clear, ShowCursor,
     ];
     assert_eq!(
         &terminal_events.lock().unwrap()[..],
@@ -632,7 +635,7 @@ fn multiple_connections_from_remote_address() {
     let terminal_draw_events_mirror = terminal_draw_events.lock().unwrap();
 
     let expected_terminal_events = vec![
-        Clear, HideCursor, Draw, Flush, Draw, Flush, Clear, ShowCursor,
+        Clear, HideCursor, Draw, HideCursor, Flush, Draw, HideCursor, Flush, Clear, ShowCursor,
     ];
     assert_eq!(
         &terminal_events.lock().unwrap()[..],
@@ -672,7 +675,8 @@ fn sustained_traffic_from_one_process() {
     let terminal_draw_events_mirror = terminal_draw_events.lock().unwrap();
 
     let expected_terminal_events = vec![
-        Clear, HideCursor, Draw, Flush, Draw, Flush, Draw, Flush, Clear, ShowCursor,
+        Clear, HideCursor, Draw, HideCursor, Flush, Draw, HideCursor, Flush, Draw, HideCursor,
+        Flush, Clear, ShowCursor,
     ];
     assert_eq!(
         &terminal_events.lock().unwrap()[..],
@@ -713,7 +717,8 @@ fn sustained_traffic_from_one_process_total() {
     let terminal_draw_events_mirror = terminal_draw_events.lock().unwrap();
 
     let expected_terminal_events = vec![
-        Clear, HideCursor, Draw, Flush, Draw, Flush, Draw, Flush, Clear, ShowCursor,
+        Clear, HideCursor, Draw, HideCursor, Flush, Draw, HideCursor, Flush, Draw, HideCursor,
+        Flush, Clear, ShowCursor,
     ];
     assert_eq!(
         &terminal_events.lock().unwrap()[..],
@@ -767,7 +772,8 @@ fn sustained_traffic_from_multiple_processes() {
     let terminal_draw_events_mirror = terminal_draw_events.lock().unwrap();
 
     let expected_terminal_events = vec![
-        Clear, HideCursor, Draw, Flush, Draw, Flush, Draw, Flush, Clear, ShowCursor,
+        Clear, HideCursor, Draw, HideCursor, Flush, Draw, HideCursor, Flush, Draw, HideCursor,
+        Flush, Clear, ShowCursor,
     ];
     assert_eq!(
         &terminal_events.lock().unwrap()[..],
@@ -822,7 +828,8 @@ fn sustained_traffic_from_multiple_processes_total() {
     let terminal_draw_events_mirror = terminal_draw_events.lock().unwrap();
 
     let expected_terminal_events = vec![
-        Clear, HideCursor, Draw, Flush, Draw, Flush, Draw, Flush, Clear, ShowCursor,
+        Clear, HideCursor, Draw, HideCursor, Flush, Draw, HideCursor, Flush, Draw, HideCursor,
+        Flush, Clear, ShowCursor,
     ];
     assert_eq!(
         &terminal_events.lock().unwrap()[..],
@@ -904,7 +911,8 @@ fn sustained_traffic_from_multiple_processes_bi_directional() {
     let terminal_draw_events_mirror = terminal_draw_events.lock().unwrap();
 
     let expected_terminal_events = vec![
-        Clear, HideCursor, Draw, Flush, Draw, Flush, Draw, Flush, Clear, ShowCursor,
+        Clear, HideCursor, Draw, HideCursor, Flush, Draw, HideCursor, Flush, Draw, HideCursor,
+        Flush, Clear, ShowCursor,
     ];
     assert_eq!(
         &terminal_events.lock().unwrap()[..],
@@ -987,7 +995,8 @@ fn sustained_traffic_from_multiple_processes_bi_directional_total() {
     let terminal_draw_events_mirror = terminal_draw_events.lock().unwrap();
 
     let expected_terminal_events = vec![
-        Clear, HideCursor, Draw, Flush, Draw, Flush, Draw, Flush, Clear, ShowCursor,
+        Clear, HideCursor, Draw, HideCursor, Flush, Draw, HideCursor, Flush, Draw, HideCursor,
+        Flush, Clear, ShowCursor,
     ];
     assert_eq!(
         &terminal_events.lock().unwrap()[..],
@@ -1092,7 +1101,8 @@ fn traffic_with_host_names() {
     let terminal_draw_events_mirror = terminal_draw_events.lock().unwrap();
 
     let expected_terminal_events = vec![
-        Clear, HideCursor, Draw, Flush, Draw, Flush, Draw, Flush, Clear, ShowCursor,
+        Clear, HideCursor, Draw, HideCursor, Flush, Draw, HideCursor, Flush, Draw, HideCursor,
+        Flush, Clear, ShowCursor,
     ];
     assert_eq!(
         &terminal_events.lock().unwrap()[..],
@@ -1197,7 +1207,8 @@ fn truncate_long_hostnames() {
     let terminal_draw_events_mirror = terminal_draw_events.lock().unwrap();
 
     let expected_terminal_events = vec![
-        Clear, HideCursor, Draw, Flush, Draw, Flush, Draw, Flush, Clear, ShowCursor,
+        Clear, HideCursor, Draw, HideCursor, Flush, Draw, HideCursor, Flush, Draw, HideCursor,
+        Flush, Clear, ShowCursor,
     ];
     assert_eq!(
         &terminal_events.lock().unwrap()[..],
@@ -1301,7 +1312,8 @@ fn no_resolve_mode() {
     let terminal_draw_events_mirror = terminal_draw_events.lock().unwrap();
 
     let expected_terminal_events = vec![
-        Clear, HideCursor, Draw, Flush, Draw, Flush, Draw, Flush, Clear, ShowCursor,
+        Clear, HideCursor, Draw, HideCursor, Flush, Draw, HideCursor, Flush, Draw, HideCursor,
+        Flush, Clear, ShowCursor,
     ];
     assert_eq!(
         &terminal_events.lock().unwrap()[..],
@@ -1341,7 +1353,8 @@ fn traffic_with_winch_event() {
     let terminal_draw_events_mirror = terminal_draw_events.lock().unwrap();
 
     let expected_terminal_events = vec![
-        Clear, HideCursor, Draw, Flush, Draw, Flush, Draw, Flush, Clear, ShowCursor,
+        Clear, HideCursor, Draw, HideCursor, Flush, Draw, HideCursor, Flush, Draw, HideCursor,
+        Flush, Clear, ShowCursor,
     ];
     assert_eq!(
         &terminal_events.lock().unwrap()[..],
@@ -1395,7 +1408,7 @@ fn layout_full_width_under_30_height() {
     let terminal_draw_events_mirror = terminal_draw_events.lock().unwrap();
 
     let expected_terminal_events = vec![
-        Clear, HideCursor, Draw, Flush, Draw, Flush, Clear, ShowCursor,
+        Clear, HideCursor, Draw, HideCursor, Flush, Draw, HideCursor, Flush, Clear, ShowCursor,
     ];
     assert_eq!(
         &terminal_events.lock().unwrap()[..],
@@ -1447,7 +1460,7 @@ fn layout_under_120_width_full_height() {
     let terminal_draw_events_mirror = terminal_draw_events.lock().unwrap();
 
     let expected_terminal_events = vec![
-        Clear, HideCursor, Draw, Flush, Draw, Flush, Clear, ShowCursor,
+        Clear, HideCursor, Draw, HideCursor, Flush, Draw, HideCursor, Flush, Clear, ShowCursor,
     ];
     assert_eq!(
         &terminal_events.lock().unwrap()[..],
@@ -1498,7 +1511,7 @@ fn layout_under_120_width_under_30_height() {
     let terminal_draw_events_mirror = terminal_draw_events.lock().unwrap();
 
     let expected_terminal_events = vec![
-        Clear, HideCursor, Draw, Flush, Draw, Flush, Clear, ShowCursor,
+        Clear, HideCursor, Draw, HideCursor, Flush, Draw, HideCursor, Flush, Clear, ShowCursor,
     ];
     assert_eq!(
         &terminal_events.lock().unwrap()[..],
@@ -1549,7 +1562,7 @@ fn layout_under_50_width_under_50_height() {
     let terminal_draw_events_mirror = terminal_draw_events.lock().unwrap();
 
     let expected_terminal_events = vec![
-        Clear, HideCursor, Draw, Flush, Draw, Flush, Clear, ShowCursor,
+        Clear, HideCursor, Draw, HideCursor, Flush, Draw, HideCursor, Flush, Clear, ShowCursor,
     ];
     assert_eq!(
         &terminal_events.lock().unwrap()[..],
@@ -1600,7 +1613,7 @@ fn layout_under_70_width_under_30_height() {
     let terminal_draw_events_mirror = terminal_draw_events.lock().unwrap();
 
     let expected_terminal_events = vec![
-        Clear, HideCursor, Draw, Flush, Draw, Flush, Clear, ShowCursor,
+        Clear, HideCursor, Draw, HideCursor, Flush, Draw, HideCursor, Flush, Clear, ShowCursor,
     ];
     assert_eq!(
         &terminal_events.lock().unwrap()[..],