New component OverviewTable, Renaming, Small code improvements (e. g. consistent dynamic HTML class names)

Cargo.toml

@@ -187,6 +187,7 @@ uuid = "1.13.1"
 walkdir = "2.5.0"
 wasm-bindgen-futures = "0.4.50"
 wasm-bindgen-test = "0.3.50"
+web-sys = "0.3.85"
 
 # v36.x is an LTS release: https://docs.wasmtime.dev/stability-release.html
 # Will stick to v36.x for now, because v39+ contains `im-rc` as dependency which is under MPL-2.0.

opendut-lea/Cargo.toml

@@ -34,6 +34,7 @@ tracing-web = { workspace = true }
 url = { workspace = true }
 uuid = { workspace = true, features = ["js"] }
 wasm-bindgen-futures = { workspace = true }
+web-sys = { workspace = true }
 
 [build-dependencies]
 shadow-rs = { workspace = true, default-features = true }

opendut-lea/opendut-lea-components/Cargo.toml

@@ -13,6 +13,7 @@ leptos = { workspace = true, features = ["csr"] }
 leptos-use = { workspace = true }
 slotmap = { workspace = true }
 tracing = { workspace = true }
+web-sys = { workspace = true, features = ["Selection"] }
 
 [lints]
 workspace = true

opendut-lea/opendut-lea-components/src/inputs/mod.rs

@@ -5,7 +5,6 @@ pub mod user_input;
 pub mod user_textarea;
 pub mod vector_user_input;
 pub mod user_select;
-pub mod selection_table;
 
 pub type UserInputError = String;
 pub type UserInputValue = Ior<UserInputError, String>;

opendut-lea/opendut-lea-components/src/inputs/user_select.rs

@@ -42,7 +42,7 @@ pub fn UserSelect(
         <div class="field">
             <label class="label">{ label }</label>
             <div class="control">
-                <div class="select" class:is-danger=has_error>
+                <div class="select" class=("is-danger", has_error)>
                     <select
                         aria-label=move || label.get()
                         prop:value=selected_value

opendut-lea/opendut-lea-components/src/lib.rs

@@ -18,7 +18,6 @@ pub use buttons::icon_button::IconButton;
 pub use buttons::collapse_button::CollapseButton;
 pub use inputs::{UserInputError, UserInputValue};
 pub use inputs::readonly_input::ReadOnlyInput;
-pub use inputs::selection_table::{SelectionTable, SelectionTableRow};
 pub use inputs::user_input::UserInput;
 pub use inputs::user_select::{UserSelect, SelectionOption};
 pub use inputs::user_textarea::UserTextarea;
@@ -30,9 +29,12 @@ pub use warning_message::WarningMessage;
 pub use util::ior::Ior;
 pub use util::net::UserNetworkInterfaceConfiguration;
 pub use util::signal::{ButtonStateSignalProvider, ToggleSignal, Toggled};
+pub use util::table_row_selection::has_text_selection;
 pub use doorhanger::{Doorhanger, DoorhangerAlignment};
 pub use icon_text::IconText;
 pub use toggle::Toggle;
+pub use tables::selection_table::{SelectionTable, SelectionTableRow};
+pub use tables::overview_table::{TableHeading, OverviewTable, OverviewTableRow, OverviewTableCell};
 
 pub mod health;
 pub mod tooltip;
@@ -49,6 +51,7 @@ mod warning_message;
 mod util;
 mod icon_text;
 mod toggle;
+mod tables;
 
 pub const NON_BREAKING_SPACE: &str = "\u{a0}";
 

opendut-lea/opendut-lea-components/src/tables/mod.rs

@@ -0,0 +1,2 @@
+pub mod selection_table;
+pub mod overview_table;

opendut-lea/opendut-lea-components/src/tables/overview_table.rs

@@ -0,0 +1,89 @@
+use leptos::prelude::*;
+use web_sys::MouseEvent;
+use crate::LoadingSpinner;
+
+#[derive(Clone)]
+pub struct TableHeading {
+    pub title: String,
+    pub is_narrow: bool,
+}
+
+impl TableHeading {
+    pub fn new(title: String) -> Self {
+        Self {
+            title,
+            is_narrow: false,
+        }
+    }
+    pub fn set_narrow(self) -> Self {
+        Self {
+            title: self.title,
+            is_narrow: true,
+        }
+    }
+}
+
+#[component]
+pub fn OverviewTable(
+    headings: Vec<TableHeading>,
+    children: Children,
+) -> impl IntoView {
+
+    view! {
+        <table class="table is-hoverable is-fullwidth">
+            <thead>
+                <tr>
+                    <For
+                        each=move || Clone::clone(&headings)
+                        key=|heading| Clone::clone(&heading.title)
+                        children=move |heading| {
+                            let title = heading.title;
+                            let is_narrow = heading.is_narrow;
+
+                            view! {
+                                <th class=(["is-narrow", "has-text-centered"], is_narrow)>
+                                    { title }
+                                </th>
+                            }
+                        }
+                    />
+                </tr>
+            </thead>
+            <tbody>
+                <Suspense fallback=LoadingSpinner>
+                    { children() }
+                </Suspense>
+            </tbody>
+        </table>
+    }
+}
+
+#[component]
+pub fn OverviewTableRow<F>(
+    block_row_click: RwSignal<bool>,
+    navigation_on_click: F,
+    children: Children
+) -> impl IntoView
+where F: Fn(MouseEvent) + 'static {
+
+    let on_row_click = move |event: MouseEvent| {
+        if block_row_click.get_untracked() {
+            block_row_click.set(false);
+            return;
+        }
+        navigation_on_click(event);
+    };
+
+    view! {
+        <tr class="is-clickable" on:click=on_row_click>
+            { children() }
+        </tr>
+    }
+}
+
+#[component]
+pub fn OverviewTableCell(children: Children) -> impl IntoView {
+    view! {
+        <td class="is-vcentered"> { children() } </td>
+    }
+}

opendut-lea/opendut-lea-components/src/inputs/selection_table.rs → opendut-lea/opendut-lea-components/src/tables/selection_table.rs

@@ -65,7 +65,7 @@ where
 
                             view! {
                                 <tr
-                                    class:has-background-link-light=move || is_selected.get()
+                                    class=("has-background-link-light", move || is_selected.get())
                                     style=move || if is_disabled.get() {"cursor: not-allowed; opacity: 0.8;"} else {"cursor: pointer;"}
                                     on:click=move |_| {
                                         if is_disabled.get() { return }

opendut-lea/opendut-lea-components/src/tabs.rs

@@ -54,7 +54,7 @@ pub fn Tabs(
                             <li class=("is-active", is_active) class=move || ("is-hidden", is_hidden().unwrap_or_default())>
                                 <a href=tab.href>
                                     <div class="icon-text">
-                                        <span class="icon has-text-danger" class:is-hidden=move || !is_error().unwrap_or_default()>
+                                        <span class="icon has-text-danger" class=("is-hidden", move || !is_error().unwrap_or_default())>
                                             <i class=FontAwesomeIcon::CircleExclamation.as_class()></i>
                                         </span>
                                         <span>{ tab.title }</span>

opendut-lea/opendut-lea-components/src/toggle.rs

@@ -9,9 +9,12 @@ pub fn Toggle<F>(
 where F: Fn() + 'static {
 
     view! {
-        <div class="is-flex is-align-items-center is-justify-content-center">
+        <div
+            class="is-flex is-align-items-center is-justify-content-center"
+            on:click=move |event| event.stop_propagation()
+        >
             <label class="dut-toggle"
-                class:active = move || is_active.get()
+                class=("active", move || is_active.get())
                 on:click=move |_| on_action()
             />
             {

opendut-lea/opendut-lea-components/src/tooltip.rs

@@ -31,7 +31,7 @@ pub fn Tooltip(
             <div class="tooltip-trigger">
                 { children() }
             </div>
-            <div class="tooltip-container" class:is-hidden=move || is_hidden.get()>
+            <div class="tooltip-container" class=("is-hidden", move || is_hidden.get())>
                 <div class="tooltip-content p-0">
                     <div class="tooltip-item p-3">
                         { text }

opendut-lea/opendut-lea-components/src/util/mod.rs

@@ -5,3 +5,4 @@ pub use tick::Tick;
 
 pub mod signal;
 pub mod ior;
+pub mod table_row_selection;

opendut-lea/opendut-lea-components/src/util/table_row_selection.rs

@@ -0,0 +1,10 @@
+use leptos::web_sys;
+
+pub fn has_text_selection() -> bool {
+    let window = web_sys::window().unwrap();
+    if let Ok(Some(selection)) = window.get_selection() {
+        !selection.is_collapsed()
+    } else {
+        false
+    }
+}

opendut-lea/src/app.rs

@@ -1,12 +1,15 @@
 use std::sync::Arc;
 use gloo_net::http;
+use leptos::ev;
 use leptos::prelude::*;
 use leptos_oidc::{Auth, AuthParameters, AuthSignal};
+use leptos_use::{use_document, use_event_listener};
 use serde::{Deserialize, Deserializer};
 use tracing::info;
 use url::Url;
 use opendut_auth::public::Authentication;
 use opendut_carl_api::carl::wasm::CarlClient;
+use opendut_lea_components::has_text_selection;
 use opendut_model::lea::LeaConfig;
 use crate::components::Toaster;
 use crate::components::AppGlobalsResource;
@@ -70,6 +73,12 @@ pub struct AppGlobalsError {
     pub message: String
 }
 
+#[derive(Clone)]
+pub struct SelectionContext {
+    pub has_selection: RwSignal<bool>,
+}
+
+
 #[component]
 pub fn LoadingApp() -> impl IntoView {
     let _ = provide_authentication_signals_in_context();
@@ -122,6 +131,18 @@ pub fn LoadingApp() -> impl IntoView {
     let user = use_context::<UserAuthenticationSignal>().expect("UserAuthenticationSignal should be provided in the context.");
     let hide_buttons = Signal::derive(move || !user.read().is_authenticated().unwrap_or(false));
 
+    let has_selection = RwSignal::new(false);
+    provide_context(SelectionContext { has_selection });
+
+    let context = use_context::<SelectionContext>()
+        .expect("SelectionContext should be provided in the context.");
+    let _ = use_event_listener(use_document(), ev::selectionchange, move |_| {
+        let new_value = has_text_selection();
+        if context.has_selection.get_untracked() != new_value {
+            context.has_selection.set(new_value);
+        }
+    });
+
     view! {
         <Navbar menu_visible hide_buttons />
         <div class="columns is-mobile m-0">

opendut-lea/src/clusters/overview/mod.rs

@@ -4,14 +4,14 @@ use leptos::prelude::*;
 use tracing::{debug, error};
 use opendut_carl_api::carl::ClientError;
 use opendut_carl_api::carl::cluster::StoreClusterDeploymentError;
-use opendut_lea_components::{ButtonColor, ButtonSize, ButtonState, FontAwesomeIcon, IconButton};
+use opendut_lea_components::{ButtonColor, ButtonSize, ButtonState, FontAwesomeIcon, IconButton, OverviewTable, TableHeading};
 use opendut_model::cluster::{ClusterDeployment, ClusterDescriptor, ClusterId};
 
 use crate::app::use_app_globals;
 use crate::clusters::components::CreateClusterButton;
 use crate::clusters::IsDeployed;
 use crate::clusters::overview::row::Row;
-use crate::components::{use_toaster, BasePageContainer, Breadcrumb, LoadingSpinner, Toast};
+use crate::components::{use_toaster, BasePageContainer, Breadcrumb, Toast};
 
 #[component]
 pub fn ClustersOverview() -> impl IntoView {
@@ -148,10 +148,17 @@ pub fn ClustersOverview() -> impl IntoView {
         Breadcrumb::new("Clusters", "/clusters")
     ];
 
+    let table_headings = vec![
+        TableHeading::new(String::from("Deploy")).set_narrow(),
+        TableHeading::new(String::from("Health")).set_narrow(),
+        TableHeading::new(String::from("Name")),
+        TableHeading::new(String::from("Action")).set_narrow(),
+    ];
+
     view! {
         <BasePageContainer
             title="Clusters"
-            breadcrumbs=breadcrumbs
+            breadcrumbs
             controls=view! {
                 <div class="buttons">
                     <CreateClusterButton />
@@ -168,20 +175,8 @@ pub fn ClustersOverview() -> impl IntoView {
                 </div>
             }
         >
-            <table class="table is-hoverable is-fullwidth">
-                <thead>
-                    <tr>
-                        <th class="is-narrow">"Deploy"</th>
-                        <th class="is-narrow">"Health"</th>
-                        <th>"Name"</th>
-                        <th class="is-narrow has-text-centered">"Action"</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <Suspense
-                        fallback=LoadingSpinner
-                    >
-                    { move || {
+            <OverviewTable headings=table_headings>
+                { move || {
                         let on_deploy = on_deploy.clone();
                         let on_undeploy = on_undeploy.clone();
 
@@ -212,9 +207,7 @@ pub fn ClustersOverview() -> impl IntoView {
                             }
                         })
                     }}
-                    </Suspense>
-                </tbody>
-            </table>
+            </OverviewTable>
         </BasePageContainer>
     }
 }