feat: add welcome hint for scanner

trustification · Sep 7, 2023 · 6dcfe05 · 6dcfe05
1 parent 247dbd7
commit 6dcfe05
Show file tree

Hide file tree

Showing 7 changed files with 80 additions and 6 deletions.
diff --git a/spog/ui/Cargo.lock b/spog/ui/Cargo.lock
diff --git a/spog/ui/Cargo.toml b/spog/ui/Cargo.toml
@@ -73,7 +73,7 @@ features = [
 #yew-nested-router = { git = "https://github.com/ctron/yew-nested-router", rev = "9689db446dee7030325884df768d0c2e84f353d6" }
 #yew-more-hooks = { git = "https://github.com/ctron/yew-more-hooks", rev = "fc0af774aa925edcd5a544e562619ecb539942f8" }
 #yew-more-hooks = { path = "../../../yew-more-hooks" }
-patternfly-yew = { git = "https://github.com/ctron/patternfly-yew", rev = "c51de86412a7d0af352a19ae61d610ef2da6793b" } # FIXME: awaiting release
+patternfly-yew = { git = "https://github.com/ctron/patternfly-yew", rev = "5ca949a9ed37294a394f7d8f8bebd365a17426a8" } # FIXME: awaiting release
 #patternfly-yew = { path = "../../../patternfly-yew" }
 
 analytics-next = { git = "https://github.com/ctron/analytics-next-rs", rev = "9c95122f4e6dc308c90b945bd0f1925faf7cb828" } # FIXME: awaiting release

diff --git a/spog/ui/src/console/mod.rs b/spog/ui/src/console/mod.rs
@@ -6,6 +6,7 @@ use crate::{
         common::{ExternalLinkMarker, ExternalNavLink},
         theme::DarkModeEntry,
     },
+    hints::clear_hints,
     hooks::{use_backend, use_config},
     pages::{self, AppRoute, View},
     utils::auth::from_auth,
@@ -118,6 +119,8 @@ fn authenticated_page(props: &ChildrenProperties) -> Html {
     let onconsent = use_consent_dialog();
     let manage_consent = use_consent_context::<()>().is_some();
 
+    let onclearhints = use_callback(|_, _| clear_hints(), ());
+
     let tools = html!(
         <Toolbar>
             <ToolbarContent>
@@ -156,6 +159,9 @@ fn authenticated_page(props: &ChildrenProperties) -> Html {
                         <Raw>
                             <DarkModeEntry />
                         </Raw>
+                        <MenuAction onclick={onclearhints}>
+                            { "Clear hints" }
+                        </MenuAction>
                         <ListDivider/>
 
                         { manage_consent.then(|| {

diff --git a/spog/ui/src/hints.rs b/spog/ui/src/hints.rs
@@ -0,0 +1,15 @@
+use gloo_storage::Storage;
+use strum::VariantNames;
+
+#[derive(Copy, Clone, PartialEq, Eq, strum::AsRefStr, strum::Display, strum::EnumVariantNames)]
+pub enum Hints {
+    #[strum(serialize = "hint.scanner.welcome")]
+    ScannerWelcome,
+}
+
+/// Clears all hints
+pub fn clear_hints() {
+    for hint in Hints::VARIANTS {
+        gloo_storage::LocalStorage::delete(hint);
+    }
+}
diff --git a/spog/ui/src/main.rs b/spog/ui/src/main.rs
@@ -6,6 +6,7 @@ mod app;
 mod backend;
 mod components;
 mod console;
+mod hints;
 mod hooks;
 mod model;
 mod pages;

diff --git a/spog/ui/src/pages/scanner/mod.rs b/spog/ui/src/pages/scanner/mod.rs
@@ -4,6 +4,7 @@ mod report;
 mod upload;
 
 use crate::analytics::use_tracking;
+use crate::hints::Hints;
 use crate::hooks::use_config;
 use analytics_next::TrackingEvent;
 use anyhow::bail;
@@ -15,6 +16,7 @@ use serde_json::{json, Value};
 use std::rc::Rc;
 use upload::Upload;
 use yew::prelude::*;
+use yew_hooks::use_local_storage;
 
 pub struct ClickLearn;
 
@@ -89,13 +91,17 @@ pub fn scanner() -> Html {
             html!(
                 <>
                     <CommonHeader />
-                    <PageSection variant={PageSectionVariant::Default} fill=true>
+
+                    <WelcomeHint />
+
+                    <PageSection variant={PageSectionVariant::Light} fill=true>
                         <Card
-                            title={html!(<Title> {"SBOM content"} </Title>)}
                             full_height=true
+                            style="--pf-v5-c-card--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);"
+                            compact=true
                         >
                             <CardBody>
-                                <Upload {onsubmit} {onvalidate}/>
+                                <Upload {onsubmit} {onvalidate} />
                             </CardBody>
                         </Card>
                     </PageSection>
@@ -105,6 +111,52 @@ pub fn scanner() -> Html {
     }
 }
 
+#[function_component(WelcomeHint)]
+fn welcome_hint() -> Html {
+    let hint_state = use_local_storage::<bool>(Hints::ScannerWelcome.to_string());
+
+    let hide = (*hint_state).unwrap_or_default();
+
+    let onhide = use_callback(
+        |_, hint_state| {
+            hint_state.set(true);
+        },
+        hint_state.clone(),
+    );
+
+    let title = html!(<Title>{ "Receive a detailed summary of your SBOM stack including:" }</Title>);
+    let actions = Some(html!(
+        <Button onclick={onhide} variant={ButtonVariant::Plain}> { Icon::Times } </Button>
+    ));
+
+    html!(
+        if !hide {
+            <PageSection
+                variant={PageSectionVariant::Light}
+                r#type={PageSectionType::Breadcrumbs}
+            >
+                <Card {actions} {title}
+                    style="--pf-v5-c-card--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);"
+                >
+                    <CardBody>
+                        <Flex>
+                            <FlexItem>
+                                {"Security issues"}
+                            </FlexItem>
+                            <FlexItem>
+                                {"Licenses"}
+                            </FlexItem>
+                            <FlexItem>
+                                {"Dependency details"}
+                            </FlexItem>
+                        </Flex>
+                    </CardBody>
+                </Card>
+            </PageSection>
+        }
+    )
+}
+
 #[derive(PartialEq, Properties)]
 pub struct CommonHeaderProperties {
     #[prop_or_default]

diff --git a/spog/ui/src/pages/scanner/upload.rs b/spog/ui/src/pages/scanner/upload.rs
@@ -296,7 +296,7 @@ pub fn upload(props: &UploadProperties) -> Html {
     // render
 
     html!(
-        <div ref={node.clone()} {class}>
+        <div ref={node.clone()} {class} style="background-color: var(--pf-v5-global--BackgroundColor--100);">
             <input ref={file_input_ref.clone()} style="display: none;" type="file" onchange={onchange_open} />
             <Stack gutter=true>
                 <StackItem fill=true>