Merge pull request #93 from yetanalytics/re-route-path-updates

[SQL-271] SPA Path Updates to prepare for re-route
yetanalytics · Jan 14, 2025 · 10dd806 · 10dd806
2 parents 311d3f7 + ab7efaa
commit 10dd806
Show file tree

Hide file tree

Showing 18 changed files with 114 additions and 67 deletions.
diff --git a/deps.edn b/deps.edn
@@ -37,6 +37,8 @@
            :build {:main-opts ["-m" "figwheel.main" "-b" "dev" "-r"]}
            :min   {:main-opts ["-m" "figwheel.main" "-O" "advanced" "-bo" "dev"]}
            :test  {:main-opts ["-m" "figwheel.main" "-co" "test.cljs.edn" "-m" "com.yetanalytics.lrs-admin-ui.test-runner"]}
-           :dev {:extra-deps
+           :dev {:extra-paths
+                 ["dev"]
+                 :extra-deps
                  {day8.re-frame/tracing      {:mvn/version "0.6.2"}
                   day8.re-frame/re-frame-10x {:mvn/version "1.2.2"}}}}}
diff --git a/dev.cljs.edn b/dev.cljs.edn
@@ -1,7 +1,9 @@
 ^{:watch-dirs ["src" "test"]
   :css-dirs ["resources/public/css"]
   :auto-testing true
-  :auto-bundle :webpack}
+  :auto-bundle :webpack
+  :ring-handler com.yetanalytics.lrs-admin-ui.server/handler
+  :open-url "http://[[server-hostname]]:[[server-port]]/admin/ui"}
 {:main            com.yetanalytics.lrs-admin-ui.core
  :closure-defines {"re_frame.trace.trace_enabled_QMARK_" true}
  :preloads        [day8.re-frame-10x.preload]}
diff --git a/dev/com/yetanalytics/lrs_admin_ui/server.clj b/dev/com/yetanalytics/lrs_admin_ui/server.clj
@@ -0,0 +1,18 @@
+(ns com.yetanalytics.lrs-admin-ui.server
+  "Ring handler only for dev/figwheel to serve multiple paths"
+  (:require [ring.util.request  :as req]
+            [ring.util.response :as resp]))
+
+(defn handler [request]
+  (cond
+    (not= :get (:request-method request))
+    {:status  405
+     :headers {"Context-Type" "text/plain"}
+     :body    "Unsupported Operation!"}
+    ;; Imitate backend redirects
+    ;; NOTE: "/" will actually not get redirected since Figwheel handles
+    ;; that separately.
+    (#{"/" "/admin" "/admin/"} (req/path-info request))
+    (resp/redirect "/admin/ui")
+    :else
+    (resp/file-response "resources/public/")))
diff --git a/resources/public/index.html b/resources/public/index.html
@@ -3,18 +3,18 @@
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
-        <link rel="apple-touch-icon" sizes="180x180" href="images/favicon/apple-touch-icon.png">
-        <link rel="icon" type="image/png" sizes="32x32" href="images/favicon/favicon-32x32.png">
-        <link rel="icon" type="image/png" sizes="16x16" href="images/favicon/favicon-16x16.png">
-        <link rel="manifest" href="images/favicon/site.webmanifest">
+        <link rel="apple-touch-icon" sizes="180x180" href="/images/favicon/apple-touch-icon.png">
+        <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon/favicon-32x32.png">
+        <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon/favicon-16x16.png">
+        <link rel="manifest" href="/images/favicon/site.webmanifest">
         <title>Yet Analytics LRS</title>
-        <link href="css/style.css" rel="stylesheet" type="text/css">
-        <link href="css/custom.css" rel="stylesheet" type="text/css">
+        <link href="/css/style.css" rel="stylesheet" type="text/css">
+        <link href="/css/custom.css" rel="stylesheet" type="text/css">
     </head>
     <body>
         <div id="app">
         </div>
-        <script src="cljs-out/dev/main_bundle.js" type="text/javascript"></script>
+        <script src="/cljs-out/dev/main_bundle.js" type="text/javascript"></script>
         <script type="text/javascript">
          //<![CDATA[
          com.yetanalytics.lrs_admin_ui.core.init("http://localhost:8080");

diff --git a/resources/public/index_prod.html b/resources/public/index_prod.html
@@ -3,18 +3,18 @@
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
-        <link rel="apple-touch-icon" sizes="180x180" href="images/favicon/apple-touch-icon.png">
-        <link rel="icon" type="image/png" sizes="32x32" href="images/favicon/favicon-32x32.png">
-        <link rel="icon" type="image/png" sizes="16x16" href="images/favicon/favicon-16x16.png">
-        <link rel="manifest" href="images/favicon/site.webmanifest">
+        <link rel="apple-touch-icon" sizes="180x180" href="{{prefix}}/admin/images/favicon/apple-touch-icon.png">
+        <link rel="icon" type="image/png" sizes="32x32" href="{{prefix}}/admin/images/favicon/favicon-32x32.png">
+        <link rel="icon" type="image/png" sizes="16x16" href="{{prefix}}/admin/images/favicon/favicon-16x16.png">
+        <link rel="manifest" href="{{prefix}}/admin/images/favicon/site.webmanifest">
         <title>Yet Analytics LRS</title>
-        <link href="css/style.css" rel="stylesheet" type="text/css">
-        <link href="css/custom.css" rel="stylesheet" type="text/css">
+        <link href="{{prefix}}/admin/css/style.css" rel="stylesheet" type="text/css">
+        <link href="{{prefix}}/admin/css/custom.css" rel="stylesheet" type="text/css">
     </head>
     <body>
         <div id="app">
         </div>
-        <script src="main.js" type="text/javascript"></script>
+        <script src="{{prefix}}/admin/main.js" type="text/javascript"></script>
         <script type="text/javascript">
          //<![CDATA[
          com.yetanalytics.lrs_admin_ui.core.init();

diff --git a/src/com/yetanalytics/lrs_admin_ui/db.cljs b/src/com/yetanalytics/lrs_admin_ui/db.cljs
@@ -82,6 +82,7 @@
 (s/def ::server-host string?)
 (s/def ::xapi-prefix string?) ;; default /xapi
 (s/def ::proxy-path (s/nilable string?)) ;; default nil
+(s/def ::resource-base string?)
 
 (s/def ::pref-lang keyword?)
 (s/def ::language map?)
@@ -197,6 +198,7 @@
                           ::accounts
                           ::new-account
                           ::server-host
+                          ::resource-base
                           ::xapi-prefix
                           ::proxy-path
                           ::language

diff --git a/src/com/yetanalytics/lrs_admin_ui/handlers.cljs b/src/com/yetanalytics/lrs_admin_ui/handlers.cljs
@@ -15,7 +15,6 @@
             [com.yetanalytics.re-oidc                         :as re-oidc]
             [ajax.core                                        :as ajax]
             [cljs.spec.alpha                                  :refer [valid?]]
-            [clojure.string                                   :refer [split]]
             [goog.string                                      :refer [format]]
             goog.string.format
             [clojure.walk                                     :as w]
@@ -71,6 +70,7 @@
                        :batch-size 10
                        :back-stack []}
          ::db/server-host (or server-host "")
+         ::db/resource-base (if server-host "/" "/admin/")
          ::db/xapi-prefix "/xapi"
          ::db/proxy-path (stor/get-item "proxy-path")
          ::db/language lang/language
@@ -93,14 +93,15 @@
 (re-frame/reg-event-fx
  :db/get-env
  (fn [{{server-host ::db/server-host} :db} _]
-   (let [path-parts (split js/window.location.pathname "/")]
+   (let [?window-host (->> js/window.location.pathname
+                           (re-matches #"(.+)/admin/ui.*")
+                           second)]
      {:http-xhrio {:method          :get
-                   ;; Check if this is prod or dev. If prod and at admin path
-                   ;; then use "env" relative path to account for proxy. If dev
-                   ;; use absolute.
-                   :uri             (if (and (some #(= "admin" %) path-parts)
-                                             (= server-host ""))
-                                      "env"
+                   ;; Check if this is prod or dev. If prod, then `server-host`
+                   ;; is empty, so take the host from the browser URL.
+                   :uri             (if (and (= server-host "")
+                                             (some? ?window-host))
+                                      (str ?window-host "/admin/env")
                                       (str server-host "/admin/env"))
                    :format          (ajax/json-request-format)
                    :response-format (ajax/json-response-format {:keywords? true})

diff --git a/src/com/yetanalytics/lrs_admin_ui/subs.cljs b/src/com/yetanalytics/lrs_admin_ui/subs.cljs
@@ -22,6 +22,25 @@
  (fn [db _]
    (::db/proxy-path db)))
 
+(reg-sub
+ ::db/resource-base
+ (fn [db _]
+   (::db/resource-base db)))
+
+(reg-sub
+ :resources/image
+ :<- [::db/proxy-path]
+ :<- [::db/resource-base]
+ (fn [[proxy-path resource-base] [_ image-name]]
+   (str proxy-path resource-base "images/" image-name)))
+
+(reg-sub
+ :resources/icon
+ :<- [::db/proxy-path]
+ :<- [::db/resource-base]
+ (fn [[proxy-path resource-base] [_ icon-name]]
+   (str proxy-path resource-base "images/icons/" icon-name)))
+
 (reg-sub
  :db/language
  (fn [db _]

diff --git a/src/com/yetanalytics/lrs_admin_ui/views/browser.cljs b/src/com/yetanalytics/lrs_admin_ui/views/browser.cljs
@@ -38,8 +38,8 @@
   [:a {:class "pointer"
        :title title
        :on-click #(dispatch [:browser/add-filter key value])}
-   [:img {:src "images/icons/add-filter.svg"
-          :width "15px"
+   [:img {:src    @(subscribe [:resources/icon "add-filter.svg"])
+          :width  "15px"
           :height "20px"}]])
 
 (defn verb-cell
@@ -127,7 +127,7 @@
        (when (seq b-s)
          [:a {:on-click #(dispatch [:browser/back])
               :class "pointer"}
-          [:img {:src "images/icons/prev.svg"
+          [:img {:src   @(subscribe [:resources/icon "prev.svg"])
                  :width "30px"}]])]
       [:div {:class "table-nav-pages"}
        [:span " Page: " (+ 1 (count b-s))]]
@@ -148,7 +148,7 @@
        (when (seq @(subscribe [:browser/get-more-link]))
          [:a {:on-click #(dispatch [:browser/more])
               :class "pointer"}
-          [:img {:src "images/icons/next.svg"
+          [:img {:src   @(subscribe [:resources/icon "next.svg"])
                  :width "30px"}]])]]]))
 
 (defn refresh-button []

diff --git a/src/com/yetanalytics/lrs_admin_ui/views/footer.cljs b/src/com/yetanalytics/lrs_admin_ui/views/footer.cljs
@@ -24,26 +24,26 @@
         [:a {:href "#"
              :on-click #(dispatch-sync [:session/set-page :credentials])}
          [:i
-          [:img {:src "images/icons/icon-mobile-credentials.svg" :alt "" :width "16"}]]
+          [:img {:src @(subscribe [:resources/icon "icon-mobile-credentials.svg"]) :alt "" :width "16"}]]
          [:span {:class "font-condensed font-10 fg-primary"} @(subscribe [:lang/get :footer.nav.credentials])]]]
        [:div {:class "col-3 text-center footer-icon pointer"}
         [:a {:href "#"
              :on-click #(dispatch-sync [:session/set-page :accounts])}
          [:i
-          [:img {:src "images/icons/icon-mobile-profle.svg" :alt "" :width "10"}]]
+          [:img {:src @(subscribe [:resources/icon "icon-mobile-profle.svg"]) :alt "" :width "10"}]]
          [:span {:class "font-condensed font-10 fg-primary"} @(subscribe [:lang/get :footer.nav.accounts])]]]
        [:div {:class "col-3 text-center footer-icon pointer"}
         [:a {:href "#"
              :on-click #(dispatch-sync [:session/set-page :browser])}
          [:i
-          [:img {:src "images/icons/icon-mobile-search.svg" :alt "" :width "16"}]]
+          [:img {:src @(subscribe [:resources/icon "icon-mobile-search.svg"]) :alt "" :width "16"}]]
          [:span {:class "font-condensed font-10 fg-primary"} @(subscribe [:lang/get :footer.nav.browser])]]]
        [:div {:class "col-3 text-center footer-icon pointer"}
         [:a {:href "#"
              :on-click #(do (ps-event %)
                             (dispatch-sync [:logout/logout]))}
          [:i
-          [:img {:src "images/icons/icon-mobile-logout.svg" :alt "Logout" :width "16"}]]
+          [:img {:src @(subscribe [:resources/icon "icon-mobile-logout.svg"]) :alt "Logout" :width "16"}]]
          [:span {:class "font-condensed font-10 fg-primary"} @(subscribe [:lang/get :footer.nav.logout])]]]])
     [:div {:class "mobile-footer-links"}
      [yet-copy]]]
@@ -54,7 +54,7 @@
       @(subscribe [:lang/get :footer.license])]"   |   "
      [:a {:class "text-white", :rel "noopener noreferrer" :href "https://github.com/yetanalytics/lrsql"}
       @(subscribe [:lang/get :footer.contribute])
-      [:img {:src "images/icons/github.png"
+      [:img {:src @(subscribe [:resources/icon "github.png"])
              :alt "Github Logo"}]]
      [:span {:class "support-note"}
       @(subscribe [:lang/get :footer.contact-note])]]]])
diff --git a/src/com/yetanalytics/lrs_admin_ui/views/form.cljs b/src/com/yetanalytics/lrs_admin_ui/views/form.cljs
@@ -150,18 +150,18 @@
    | `label`       | Dropdown label
    | `label-left?` | Whether the label should be placed to the left of the icon.
    | `options`     | The ID of the combo box in the DOM.
-   | `icon-src`    | The filepath of the icon.
+   | `icon-name`   | The file name of the icon.
    | `class`       | Custom CSS class name."
   [{:keys [select-fn
            label
            label-left?
            options
-           icon-src
+           icon-name
            class]
     :or {options     []
          select-fn   (fn [v] (println 'select v))
          label-left? false
-         icon-src    "images/icons/add.svg"
+         icon-name   "add.svg"
          class       ""}}]
   (let [state (r/atom {:dropdown-open? false
                        :dropdown-focus nil})
@@ -176,7 +176,7 @@
        [action-select-top
         {:label          label
          :label-left?    label-left?
-         :icon-src       icon-src
+         :icon-name      icon-name
          :dropdown-open? dropdown-open?}]
        [:div.action-dropdown-list
         {:class (str class (if @dropdown-open? " dropdown-open" ""))}

diff --git a/src/com/yetanalytics/lrs_admin_ui/views/form/dropdown.cljs b/src/com/yetanalytics/lrs_admin_ui/views/form/dropdown.cljs
@@ -86,20 +86,20 @@
     [:p (or label placeholder)]]
    [:span {:class "form-select-top-right"}
     [:img {:src (if @dropdown-open?
-                  "images/icons/icon-expand-less.svg"
-                  "images/icons/icon-expand-more.svg")}]]])
+                  @(subscribe [:resources/icon "icon-expand-less.svg"])
+                  @(subscribe [:resources/icon "icon-expand-more.svg"]))}]]])
 
 (defn action-select-top
   "The top pane of a select input with a custom dropdown icon."
-  [{:keys [label label-left? icon-src dropdown-open?]}]
+  [{:keys [label label-left? icon-name dropdown-open?]}]
   [:div.action-dropdown-icon
    [:a {:href "#"
         :on-click (fn [e]
                     (fns/ps-event e)
                     (reset! dropdown-open? true))}
     (when (and label label-left?)
       [:span.action-dropdown-label (str label " ")])
-    [:img {:src icon-src}]
+    [:img {:src @(subscribe [:resources/icon icon-name])}]
     (when (and label (not label-left?))
       [:span.action-dropdown-label (str " " label)])]])
 
@@ -118,7 +118,7 @@
                            (fns/ps-event e)))
           :tab-index   0
           :aria-label  "Select the text in the search bar."}
-   [:img {:src "images/icons/icon-add.svg"}]
+   [:img {:src @(subscribe [:resources/icon "icon-add.svg"])}]
    "Add"])
 
 (defn items-dropdown

diff --git a/src/com/yetanalytics/lrs_admin_ui/views/form/validation.cljs b/src/com/yetanalytics/lrs_admin_ui/views/form/validation.cljs
@@ -1,7 +1,7 @@
 (ns com.yetanalytics.lrs-admin-ui.views.form.validation
-  (:require
-   [reagent.core :as r]
-   [goog.string]))
+  (:require [reagent.core :as r]
+            [re-frame.core :refer [subscribe]]
+            [goog.string]))
 
 (defn- unescape
   "Alias for `goog.string/unescapeEntities`, where `s` is the string to
@@ -12,27 +12,27 @@
 (defn- type->div-class
   [validation-type]
   (case validation-type
-    :valid "validation-display"
+    :valid   "validation-display"
     :warning "validation-display warning"
-    :error "validation-display invalid"
+    :error   "validation-display invalid"
     :invalid "validation-display invalid"
     :loading "validation-display loading"))
 
 (defn- type->icon-path
   [validation-type]
   (case validation-type
-    :valid "images/icons/valid.svg"
-    :warning "images/icons/warning.svg"
-    :error "images/icons/invalid.svg"
-    :invalid "images/icons/invalid.svg"
-    :loading "images/icons/loading.svg"))
+    :valid   @(subscribe [:resources/icon "valid.svg"])
+    :warning @(subscribe [:resources/icon "warning.svg"])
+    :error   @(subscribe [:resources/icon "invalid.svg"])
+    :invalid @(subscribe [:resources/icon "invalid.svg"])
+    :loading @(subscribe [:resources/icon "loading.svg"])))
 
 (defn- type->item-icon-path
   [validation-type]
   (case validation-type
-    :warning "images/icons/warning-item.svg"
-    :error "images/icons/error-item.svg"
-    :invalid "images/icons/error-item.svg"))
+    :warning @(subscribe [:resources/icon "warning-item.svg"])
+    :error   @(subscribe [:resources/icon "error-item.svg"])
+    :invalid @(subscribe [:resources/icon "error-item.svg"])))
 
 (defn validation-static-display
   [validation-type message]

diff --git a/src/com/yetanalytics/lrs_admin_ui/views/header.cljs b/src/com/yetanalytics/lrs_admin_ui/views/header.cljs
@@ -20,7 +20,9 @@
    [:div {:class "header-wrapper"}
     [:div {:class "post-image"}
      [:i
-      [:img {:src "images/logo.png", :alt "logo", :class "logo-img"}]]]
+      [:img {:src   @(subscribe [:resources/image "logo.png"])
+             :alt   "logo"
+             :class "logo-img"}]]]
     [:div {:class "text-right"}
      [username]
      [:div {:class "header-actions-wrapper"}

diff --git a/src/com/yetanalytics/lrs_admin_ui/views/login.cljs b/src/com/yetanalytics/lrs_admin_ui/views/login.cljs
@@ -11,7 +11,8 @@
      [:div {:class "main-wrapper"}
       [:div {:class "logo-image"}
        [:i
-        [:img {:src "images/logo.png", :alt "LRS Logo"}]]]
+        [:img {:src @(subscribe [:resources/image "logo.png"])
+               :alt "LRS Logo"}]]]
       [:h1 @(subscribe [:lang/get :login.title])]
       [:div {:class "form-wrapper"}
        [:form {:id "login-form"}

diff --git a/src/com/yetanalytics/lrs_admin_ui/views/notification.cljs b/src/com/yetanalytics/lrs_admin_ui/views/notification.cljs
@@ -16,10 +16,9 @@
     [:span {:class "close-alert pointer"
             :on-click #(dispatch [:notification/hide id])}
      [:img {:class "close-alert"
-            :src (format "images/icons/icon-close-%s.svg"
-                         (cond
-                           error? "black"
-                           :else "white"))}]]]])
+            :src @(subscribe [:resources/icon
+                              (format "icon-close-%s.svg"
+                                      (if error? "black" "white"))])}]]]])
 
 (defn notifications []
   (let [notifications @(subscribe [:notifications/get-notifications])]