From 8122f7772b9c44c1d177f4ca33abb8d4143b5e12 Mon Sep 17 00:00:00 2001
From: Dan <39170265+chillenberger@users.noreply.github.com>
Date: Thu, 25 Apr 2024 13:36:28 -0600
Subject: [PATCH] left nav works with shift checkpoint

---
 pgml-dashboard/Cargo.lock                     | 19 +++---
 .../src/components/dropdown/template.html     |  2 +-
 .../components/left_nav_menu/left-nav-menu.js | 13 ++--
 .../components/left_nav_menu/template.html    |  4 +-
 .../navigation/left_nav/web_app/template.html | 17 ++---
 .../left_nav/web_app/web_app_controller.js    | 22 ++++++-
 .../navigation/navbar/web_app/mod.rs          |  6 +-
 .../navigation/navbar/web_app/template.html   | 63 ++++++++++---------
 .../navigation/navbar/web_app/web_app.scss    | 20 ++++++
 .../src/components/postgres_logo/mod.rs       |  7 +++
 .../components/postgres_logo/template.html    |  2 +-
 .../static/css/scss/components/_icon.scss     | 31 +++++----
 .../templates/layout/web_app_base.html        |  2 +-
 13 files changed, 137 insertions(+), 71 deletions(-)

diff --git a/pgml-dashboard/Cargo.lock b/pgml-dashboard/Cargo.lock
index 774c60038..0fe0b481d 100644
--- a/pgml-dashboard/Cargo.lock
+++ b/pgml-dashboard/Cargo.lock
@@ -1247,9 +1247,9 @@ checksum = "00b0228411908ca8685dba7fc2cdd70ec9990a6e753e89b6ac91a84c40fbaf4b"
 
 [[package]]
 name = "form_urlencoded"
-version = "1.2.0"
+version = "1.2.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a62bc1cf6f830c2ec14a513a9fb124d0a213a629668a4186f329db21fe045652"
+checksum = "e13624c2627564efccf4934284bdd98cbaa14e79b0b5a141218e507b3a823456"
 dependencies = [
  "percent-encoding",
 ]
@@ -1707,9 +1707,9 @@ checksum = "b9e0384b61958566e926dc50660321d12159025e767c18e043daf26b70104c39"
 
 [[package]]
 name = "idna"
-version = "0.4.0"
+version = "0.5.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "7d20d6b07bfbc108882d88ed8e37d39636dcc260e15e30c45e6ba089610b917c"
+checksum = "634d9b1461af396cad843f47fdba5597a4f9e6ddd4bfb6ff5d85028c25cb12f6"
 dependencies = [
  "unicode-bidi",
  "unicode-normalization",
@@ -2538,13 +2538,13 @@ dependencies = [
 
 [[package]]
 name = "percent-encoding"
-version = "2.3.0"
+version = "2.3.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9b2a4787296e9989611394c33f193f676704af1686e70b8f8033ab5ba9a35a94"
+checksum = "e3148f5046208a5d56bcfc03053e3ca6334e51da8dfb19b6cdc8b306fae3283e"
 
 [[package]]
 name = "pgml"
-version = "1.0.1"
+version = "1.0.2"
 dependencies = [
  "anyhow",
  "async-trait",
@@ -2572,6 +2572,7 @@ dependencies = [
  "tokio",
  "tracing",
  "tracing-subscriber",
+ "url",
  "uuid",
  "walkdir",
 ]
@@ -4956,9 +4957,9 @@ dependencies = [
 
 [[package]]
 name = "url"
-version = "2.4.1"
+version = "2.5.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "143b538f18257fac9cad154828a57c6bf5157e1aa604d4816b5995bf6de87ae5"
+checksum = "31e6302e3bb753d46e83516cae55ae196fc0c309407cf11ab35cc51a4c2a4633"
 dependencies = [
  "form_urlencoded",
  "idna",
diff --git a/pgml-dashboard/src/components/dropdown/template.html b/pgml-dashboard/src/components/dropdown/template.html
index ae273980a..86762164d 100644
--- a/pgml-dashboard/src/components/dropdown/template.html
+++ b/pgml-dashboard/src/components/dropdown/template.html
@@ -5,7 +5,7 @@
 <div class="dropdown <% if expandable { %>expandable<% } %>">
   <% if let DropdownValue::Icon(icon) = value { %>
   <a
-    class="topnav-controlls dropdown-toggle"
+    class="top-nav-controls dropdown-toggle"
     role="button"
     data-bs-toggle="dropdown"
     data-bs-offset="<%= offset %>"
diff --git a/pgml-dashboard/src/components/left_nav_menu/left-nav-menu.js b/pgml-dashboard/src/components/left_nav_menu/left-nav-menu.js
index 561cc4640..477a1fb99 100644
--- a/pgml-dashboard/src/components/left_nav_menu/left-nav-menu.js
+++ b/pgml-dashboard/src/components/left_nav_menu/left-nav-menu.js
@@ -17,16 +17,16 @@ export default class extends Controller {
     document.addEventListener("turbo:load", this.callback);
   }
 
+  // Find link element in the left nav that matches the current window 
+  // location and set to active
   setLeftNavToLocation() {
     this.removeAllActive();
 
-    let tag = "a[href='" + window.location.pathname + "']";
-    console.log("tag: " + tag)
-    let elements = this.element.querySelectorAll(tag);
+    let tag = "a[href='" + window.location.pathname + window.location.search + "']";
+    let element = this.element.querySelector(tag);
     
-    if (elements.length > 0) {
-      console.log("found element " + elements[0].href)
-      elements[0].classList.add("active");
+    if (element) {
+      element.classList.add("active");
     }
   }
 
@@ -37,6 +37,7 @@ export default class extends Controller {
     }
   }
 
+  // Remove event listener when controller is disconnected
   disconnect() {
     document.removeEventListener("turbo:load", this.callback);
   }
diff --git a/pgml-dashboard/src/components/left_nav_menu/template.html b/pgml-dashboard/src/components/left_nav_menu/template.html
index 6418d50ec..f097eb9a1 100644
--- a/pgml-dashboard/src/components/left_nav_menu/template.html
+++ b/pgml-dashboard/src/components/left_nav_menu/template.html
@@ -2,7 +2,7 @@
     <ul class="nav flex-column justify-content-end">
         <% for link in nav.links { %>
         <% if !link.hide_for_lg_screens { %>
-        <li class="menu-item leftnav-collapse-affect expanded <% if link.disabled { %>disabled<% } %>" >
+        <li class="menu-item leftnav-collapse-affect collapsed <% if link.disabled { %>disabled<% } %>" >
             <a
             data-left-nav-menu-target="link"
             class="d-flex align-items-center justify-content-start gap-2 <% if link.disabled  { %> disabled <% } %> <% if link.active { %> active <% } %>"
@@ -11,7 +11,7 @@
             <% if link.icon.as_ref().is_some() { %>
             <span class="material-symbols-outlined"><%- link.icon.unwrap() %></span>
             <% } %>
-            <span class="collapse collapse-horizontal leftnav-collapse show"><%= link.name %></span>
+            <span class="collapse collapse-horizontal leftnav-collapse"><%= link.name %></span>
             </a>
         </li>
         <% } %>
diff --git a/pgml-dashboard/src/components/navigation/left_nav/web_app/template.html b/pgml-dashboard/src/components/navigation/left_nav/web_app/template.html
index df8041374..766add434 100644
--- a/pgml-dashboard/src/components/navigation/left_nav/web_app/template.html
+++ b/pgml-dashboard/src/components/navigation/left_nav/web_app/template.html
@@ -1,19 +1,22 @@
 
 <% use crate::components::{LeftNavMenu, Dropdown}; %>
 <div class="leftnav-container py-3 font-family-primary" data-controller="navigation-left-nav-web-app" data-turbo-permanent id='<%- id.unwrap_or_else(|| String::from("defaultId"))%>'>
-  <nav class="leftnav nav-pills h-100" data-controller="extend-bs-collapse" data-extend-bs-collapse-affected-value=".leftnav-collapse-affect">
-    <div class="d-flex flex-column justify-content-between h-100 menu-container leftnav-collapse-affect expanded">
+  <nav 
+    class="leftnav nav-pills h-100" 
+    data-controller="extend-bs-collapse" 
+    data-extend-bs-collapse-affected-value=".leftnav-collapse-affect" 
+    data-action="mousemove@document->navigation-left-nav-web-app#checkIfHover">
+    <div class="d-flex flex-column justify-content-between h-100 menu-container leftnav-collapse-affect collapsed">
       <div class="d-flex flex-column">
-        <button class="btn btn-left-nav-toggle mb-4" type="button" data-bs-toggle="collapse" data-bs-target=".leftnav-collapse" aria-expanded="true">
+
+        <!-- <button class="btn btn-left-nav-toggle mb-4" type="button" data-bs-toggle="collapse" data-bs-target=".leftnav-collapse" aria-expanded="true">
           <span class="left-nav-toggle-icon material-symbols-outlined leftnav-collapse-affect expanded">
             keyboard_double_arrow_left
           </span>
           <span class="collapse collapse-horizontal leftnav-collapse show" data-extend-bs-collapse-target="stateReference"></span>
-        </button>
+        </button> -->
 
-        <div class="mb-4">
-          <%+ Dropdown::nav(dropdown_nav.links).collapsable() %>
-        </div>
+        <span class="leftnav-collapse collapse" data-extend-bs-collapse-target="stateReference" data-navigation-left-nav-web-app-target="stateReference"></span>
         <%+ LeftNavMenu { nav: upper_nav } %>
       </div>
       <%+ LeftNavMenu { nav: lower_nav} %>
diff --git a/pgml-dashboard/src/components/navigation/left_nav/web_app/web_app_controller.js b/pgml-dashboard/src/components/navigation/left_nav/web_app/web_app_controller.js
index a49b3159e..7007e52c2 100644
--- a/pgml-dashboard/src/components/navigation/left_nav/web_app/web_app_controller.js
+++ b/pgml-dashboard/src/components/navigation/left_nav/web_app/web_app_controller.js
@@ -1,8 +1,26 @@
 import { Controller } from "@hotwired/stimulus";
 
 export default class extends Controller {
-  static targets = [];
+  static targets = ['stateReference']
+  expand() {
+    if( !this.stateReferenceTarget.classList.contains("show")) {
+      const elements = this.element.getElementsByClassName('leftnav-collapse')
+      for( const element of elements) {
+        bootstrap.Collapse.getOrCreateInstance(element).show()
+      }
+    }
+  }
 
-  connect() {}
+  collapse() {
+    if( this.stateReferenceTarget.classList.contains("show")) {
+      const elements = this.element.getElementsByClassName('leftnav-collapse')
+      for( const element of elements) {
+        bootstrap.Collapse.getOrCreateInstance(element, {toggle: false}).hide()
+      }
+    }
+  }
 
+  checkIfHover() {
+    this.element.matches(':hover') ? this.expand() : this.collapse()
+  }
 }
diff --git a/pgml-dashboard/src/components/navigation/navbar/web_app/mod.rs b/pgml-dashboard/src/components/navigation/navbar/web_app/mod.rs
index c4df12a77..bc36e8258 100644
--- a/pgml-dashboard/src/components/navigation/navbar/web_app/mod.rs
+++ b/pgml-dashboard/src/components/navigation/navbar/web_app/mod.rs
@@ -9,14 +9,16 @@ pub struct WebApp {
     pub standalone_dashboard: bool,
     pub links: Vec<StaticNavLink>,
     pub account_management_nav: StaticNav,
+    pub deployment_controls: StaticNav,
 }
 
 impl WebApp {
-    pub fn new(links: Vec<StaticNavLink>, account_management_nav: StaticNav) -> WebApp {
+    pub fn new(links: Vec<StaticNavLink>, deployment_controls: StaticNav) -> WebApp {
         WebApp {
             standalone_dashboard: config::standalone_dashboard(),
             links,
-            account_management_nav,
+            account_management_nav: StaticNav::default(),
+            deployment_controls,
         }
     }
 }
diff --git a/pgml-dashboard/src/components/navigation/navbar/web_app/template.html b/pgml-dashboard/src/components/navigation/navbar/web_app/template.html
index 20c6bf16b..1e1c83c7b 100644
--- a/pgml-dashboard/src/components/navigation/navbar/web_app/template.html
+++ b/pgml-dashboard/src/components/navigation/navbar/web_app/template.html
@@ -9,19 +9,23 @@
       
       <div class="controls">
         <!-- Toggles items that come from left nav -->
-        <button class="navbar-toggler collapsed topnav-controlls" type="button" data-bs-toggle="collapse" data-bs-target="#leftNavItems" aria-controls="LeftNavItems" aria-expanded="false" aria-label="Toggle navigation">
-          <span class="material-symbols-outlined" style="font-size: 44px">
-            menu
-          </span>
+        <button class="navbar-toggler collapsed top-nav-controls" type="button" data-bs-toggle="collapse" data-bs-target="#leftNavItems" aria-controls="LeftNavItems" aria-expanded="false" aria-label="Toggle navigation">
+          <div class="mobile-left-nav-controls rounded-1">
+            <img class="m-2" src="/dashboard/static/images/owl_white.webp" alt="postgresml_owl" width="12" height="16">
+          </div>
         </button>
 
         <div class="web-app-left-nav-sized-container">
-          <%+ PostgresLogo::new("/") %>
+          <%+ PostgresLogo::new("/").hide_owl() %>
         </div>
   
         <!-- Button to toggle collapsed menu for less than lg screens -->
-        <button class="navbar-toggler collapsed topnav-controlls" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-          <%+ ProfileIcon::new() %>
+        <button class="navbar-toggler collapsed top-nav-controls" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+          <svg xmlns="http://www.w3.org/2000/svg" width="33" height="18" viewBox="0 0 33 18" fill="none">
+            <line x1="8.04297" y1="17.25" x2="24.543" y2="17.25" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
+            <line x1="5.04297" y1="9.25" x2="27.543" y2="9.25" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
+            <line x1="1.04297" y1="1.25" x2="31.543" y2="1.25" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
+          </svg>
         </button>
       </div>
 
@@ -31,33 +35,31 @@
         <div class="nav-item w-100 d-flex flex-column flex-lg-row align-items-lg-center collapse collapse-horizontal horizontal-collapse show drawer-submenu">
           <ul class="navbar-nav flex-grow-1 ps-4 p-lg-0 d-none d-lg-block">
             <li class="nav-item d-flex align-items-center">
-              <button type="text" class="btn-search d-flex justify-content-between" name="search" data-bs-toggle="modal" data-bs-target="#search" autocomplete="off" data-search-target="searchTrigger" data-action="search#openSearch">
-                Search
-                <span class="material-symbols-outlined">
-                  search
-                </span>
-              </button>
+              <div class="deployment_controls">
+                <%+ Dropdown::nav(deployment_controls.links) %>
+              </div>
             </li>
           </ul>
           
           <!-- Main nav links for lg screens -->
           <ul class="navbar-nav gap-3 mb-0 d-none d-lg-flex">
             <li class="align-items-center d-none d-lg-flex">
-              <%- GithubIcon{show_stars: false}.render_once().unwrap() %>
-            </li>
-            <li class="align-items-center d-flex d-lg-none">
-              <a class="nav-link p-lg-0" href="https://github.com/postgresml/postgresml">Open Source</a>
+              <button type="text" class="btn nav-link btn-search-input-webapp border-0 p-0" name="search" data-bs-toggle="modal" data-bs-target="#search" autocomplete="off" data-search-target="searchTrigger" data-action="search#openSearch">
+                <span class="material-symbols-outlined">search</span>
+              </button>
             </li>
   
             <li class="nav-item d-flex align-items-center">
               <a class="nav-link p-lg-0" href="/docs">Docs</a>
             </li>
 
-            <div class="vr my-2 opacity-100 d-lg-block d-none" style="width: 2px"></div>
-
             <li class="nav-item d-flex align-items-center">
               <a class="nav-link p-lg-0" href="/blog">Blog</a>
             </li>
+
+            <li class="nav-item d-flex align-items-center">
+              <a class="nav-link p-lg-0" href="/support">Support</a>
+            </li>
   
             <% if !account_management_nav.links.is_empty() { %>
             <li class="d-none d-lg-flex nav-item align-items-center">
@@ -75,8 +77,13 @@
 
           <!-- Main nav links for less than lg screens -->
           <ul class="sub-menu-dropdown mb-2 d-lg-none">
-            <li class="menu-item rounded-0 d-flex align-items-center">
-              <a href="https://github.com/postgresml/postgresml">Open Source</a>
+            <li class="nav-item d-flex align-items-center">
+              <button type="text" class="btn-search d-flex justify-content-between w-100 mx-4 mb-4" name="search" data-bs-toggle="modal" data-bs-target="#search" autocomplete="off" data-search-target="searchTrigger" data-action="search#openSearch">
+                Search
+                <span class="material-symbols-outlined">
+                  search
+                </span>
+              </button>
             </li>
   
             <li class="menu-item rounded-0 d-flex align-items-center">
@@ -86,12 +93,18 @@
             <li class="menu-item rounded-0 d-flex align-items-center">
               <a href="/blog">Blog</a>
             </li>
+
+            <li class="menu-item rounded-0 d-flex align-items-center">
+              <a href="/support">Support</a>
+            </li>
   
             <% if !standalone_dashboard { %>
+            <% if !account_management_nav.links.is_empty() { %>
             <li class="menu-item rounded-0 d-flex align-items-center">
               <a href="#" data-bs-toggle="collapse" data-bs-target=".horizontal-collapse">Account Management</a>
             </li>
             <% } %>
+            <% } %>
           </ul>
         </div>
 
@@ -123,14 +136,6 @@
         <div class="collapse navbar-collapse" id="leftNavItems">
           <div class="nav-item w-100 d-flex flex-column flex-lg-row collapse show drawer-submenu">
             <ul class="sub-menu-dropdown mb-2 d-lg-none">
-              <li class="nav-item d-flex align-items-center">
-                <button type="text" class="btn-search d-flex justify-content-between w-100 mx-4 mb-4" name="search" data-bs-toggle="modal" data-bs-target="#search" autocomplete="off" data-search-target="searchTrigger" data-action="search#openSearch">
-                  Search
-                  <span class="material-symbols-outlined">
-                    search
-                  </span>
-                </button>
-              </li>
               <% for link in links { %>
               <li class="menu-item rounded-0 d-flex align-items-center">
                 <a
diff --git a/pgml-dashboard/src/components/navigation/navbar/web_app/web_app.scss b/pgml-dashboard/src/components/navigation/navbar/web_app/web_app.scss
index 13064e10f..9bbe5305c 100644
--- a/pgml-dashboard/src/components/navigation/navbar/web_app/web_app.scss
+++ b/pgml-dashboard/src/components/navigation/navbar/web_app/web_app.scss
@@ -45,4 +45,24 @@
             }
         }
     }
+
+    .deployment_controls {
+        min-width: 300px;
+    }
+
+    .sub-menu-dropdown {
+        background-color: #{$gray-800};
+    }
+
+    .top-nav-controls {
+        &:not(.collapsed) {
+            .mobile-left-nav-controls {
+                background-color: #{$neon-tint-100};
+            }
+        }
+
+        .mobile-left-nav-controls {
+            background-color: #{$gray-700};
+        }
+    }
 }
diff --git a/pgml-dashboard/src/components/postgres_logo/mod.rs b/pgml-dashboard/src/components/postgres_logo/mod.rs
index 49ca8b888..ce20efe4a 100644
--- a/pgml-dashboard/src/components/postgres_logo/mod.rs
+++ b/pgml-dashboard/src/components/postgres_logo/mod.rs
@@ -6,6 +6,7 @@ use sailfish::TemplateOnce;
 pub struct PostgresLogo {
     link: String,
     bigger: bool,
+    hide_owl: bool,
 }
 
 impl PostgresLogo {
@@ -13,6 +14,7 @@ impl PostgresLogo {
         PostgresLogo {
             link: link.to_owned(),
             bigger: false,
+            hide_owl: false,
         }
     }
 
@@ -20,6 +22,11 @@ impl PostgresLogo {
         self.bigger = true;
         self
     }
+
+    pub fn hide_owl(mut self) -> PostgresLogo {
+        self.hide_owl = true;
+        self
+    }
 }
 
 component!(PostgresLogo);
diff --git a/pgml-dashboard/src/components/postgres_logo/template.html b/pgml-dashboard/src/components/postgres_logo/template.html
index 0d5be76dc..a928c9778 100644
--- a/pgml-dashboard/src/components/postgres_logo/template.html
+++ b/pgml-dashboard/src/components/postgres_logo/template.html
@@ -5,7 +5,7 @@
 %>
 
 <a class="postgres-logo navbar-brand" href="<%- link %>">
-    <img src="/dashboard/static/images/owl_gradient.svg" alt="PostgresML Logo" height="<%- image_dimensions%>" width="<%- image_dimensions%>">
+    <img <% if hide_owl {%>class="d-none"<% } %>" src="/dashboard/static/images/owl_gradient.svg" alt="PostgresML Logo" height="<%- image_dimensions%>" width="<%- image_dimensions%>">
     <span class="position-relative overflow-visible text-white <%- postgres_size %> mb-0">
         Postgres<span class="<%- ml_size %>">ML</span>
     </span>
diff --git a/pgml-dashboard/static/css/scss/components/_icon.scss b/pgml-dashboard/static/css/scss/components/_icon.scss
index b9aa24203..2bc44e703 100644
--- a/pgml-dashboard/static/css/scss/components/_icon.scss
+++ b/pgml-dashboard/static/css/scss/components/_icon.scss
@@ -109,21 +109,11 @@
     box-shadow: 8px 8px 24px rgba(163, 116, 253, 0.32);
 }
 
-.topnav-controlls {
+.top-nav-controls {
     &:hover, &.show, &[aria-expanded="true"] {
         &>span {
             color: #{$neon-tint-100};
         }
-
-        svg {
-            border-color: #{$neon-tint-100};
-        }
-
-    }
-
-    svg {
-        border: 2px solid #{$gray-700};
-        background-color: #{$gray-500};
     }
 
     path {
@@ -132,6 +122,25 @@
     &::after {
         display: none;
     }
+
+    svg {
+        * {
+            transform: rotate(0deg);
+            transform-origin: center;
+            transition: transform $animation-timer;
+        }
+    }
+
+    &:not(.collapsed) {
+        svg {
+            * {
+                stroke: #{$neon-tint-100};
+                transform-origin: center;
+                transform: rotate(180deg);
+                transition: transform $animation-timer;
+            }
+        }
+    }
 }
 
 .icon-back-btn {
diff --git a/pgml-dashboard/templates/layout/web_app_base.html b/pgml-dashboard/templates/layout/web_app_base.html
index d121d7282..b3b9fd557 100644
--- a/pgml-dashboard/templates/layout/web_app_base.html
+++ b/pgml-dashboard/templates/layout/web_app_base.html
@@ -24,7 +24,7 @@
         <main>
             <div class="container-fluid p-0 min-vh-lg-100">
                 <div class="row gx-0 min-vh-lg-100 gy-0">
-                    <%+ WebAppNavbar::new(left_nav_links, account_management_nav) %>
+                    <%+ WebAppNavbar::new(left_nav_links, dropdown_nav.clone()) %>
 
                     <div class="d-flex">
                         <%+ WebAppLeftNav::new( upper_left_nav.clone(), lower_left_nav, dropdown_nav ).id(&upper_left_nav.unique_id()) %>