Merge pull request #4155 from penpot/niwinz-staging-onboarding-fix

🐛 Fix onboarding dialog is not loaded from profile settings

frontend/shadow-cljs.edn

@@ -35,12 +35,6 @@
     {:entries [app.main.ui.viewer]
      :depends-on #{:main :main-auth}}
 
-    :main-onboarding
-    {:entries [app.main.ui.onboarding
-               app.main.ui.onboarding.questions
-               app.main.ui.releases]
-     :depends-on #{:main}}
-
     :main-workspace
     {:entries [app.main.ui.workspace]
      :depends-on #{:main}}

frontend/src/app/main/ui.cljs

@@ -15,6 +15,9 @@
    [app.main.ui.frame-preview :as frame-preview]
    [app.main.ui.icons :as i]
    [app.main.ui.messages :as msgs]
+   [app.main.ui.onboarding :refer [onboarding-modal]]
+   [app.main.ui.onboarding.questions :refer [questions-modal]]
+   [app.main.ui.releases :refer [release-notes-modal]]
    [app.main.ui.static :as static]
    [app.util.dom :as dom]
    [app.util.i18n :refer [tr]]
@@ -39,15 +42,6 @@
 (def workspace-page
   (mf/lazy-component app.main.ui.workspace/workspace))
 
-(def questions-modal
-  (mf/lazy-component app.main.ui.onboarding.questions/questions))
-
-(def onboarding-modal
-  (mf/lazy-component app.main.ui.onboarding/onboarding-modal))
-
-(def release-modal
-  (mf/lazy-component app.main.ui.releases/release-notes-modal))
-
 (mf/defc on-main-error
   [{:keys [error] :as props}]
   (mf/with-effect
@@ -55,7 +49,8 @@
   [:span "Internal application error"])
 
 (mf/defc main-page
-  {::mf/wrap [#(mf/catch % {:fallback on-main-error})]}
+  {::mf/wrap [#(mf/catch % {:fallback on-main-error})]
+   ::mf/props :obj}
   [{:keys [route profile]}]
   (let [{:keys [data params]} route]
     [:& (mf/provider ctx/current-route) {:value route}
@@ -116,7 +111,7 @@
                  (:onboarding-viewed props)
                  (not= (:release-notes-viewed props) (:main cf/version))
                  (not= "0.0" (:main cf/version)))
-            [:& release-modal {:version (:main cf/version)}]))
+            [:& release-notes-modal {:version (:main cf/version)}]))
 
         (when profile
           [:& dashboard-page {:route route :profile profile}])]

frontend/src/app/main/ui/onboarding.cljs

@@ -133,7 +133,6 @@
                  :data-test "onboarding-next-btn"}
         (tr "labels.continue")]]]]))
 
-
 (mf/defc onboarding-modal
   {::mf/register modal/components
    ::mf/register-as :onboarding}

frontend/src/app/main/ui/onboarding/questions.cljs

@@ -206,8 +206,11 @@
                      :default ""
                      :name :team-size}]]]))
 
-(mf/defc questions
+;; NOTE: we don't register it on registry modal because we reference
-  [{:keys []}]
+;; this modal directly on the ui namespace.
+
+(mf/defc questions-modal
+  []
   (let [container   (mf/use-ref)
         step        (mf/use-state 1)
         clean-data  (mf/use-state {})

frontend/src/app/main/ui/releases.cljs

@@ -33,7 +33,7 @@
 ;;; --- RELEASE NOTES MODAL
 
 (mf/defc release-notes
-  {::mf/wrap-props false}
+  {::mf/props :obj}
   [{:keys [version]}]
   (let [slide* (mf/use-state :start)
         slide  (deref slide*)
@@ -90,4 +90,4 @@
 
 (defmethod rc/render-release-notes "0.0"
   [params]
-  (rc/render-release-notes (assoc params :version "1.18")))
+  (rc/render-release-notes (assoc params :version "1.19")))

frontend/src/app/main/ui/settings/sidebar.cljs

@@ -20,52 +20,44 @@
    [potok.v2.core :as ptk]
    [rumext.v2 :as mf]))
 
+(def ^:private go-settings-profile
+  #(st/emit! (rt/nav :settings-profile)))
+
+(def ^:private go-settings-feedback
+  #(st/emit! (rt/nav :settings-feedback)))
+
+(def ^:private go-settings-password
+  #(st/emit! (rt/nav :settings-password)))
+
+(def ^:private go-settings-options
+  #(st/emit! (rt/nav :settings-options)))
+
+(def ^:private go-settings-access-tokens
+  #(st/emit! (rt/nav :settings-access-tokens)))
+
+(defn- show-release-notes
+  [event]
+  (let [version (:main cf/version)]
+    (st/emit! (ptk/event ::ev/event {::ev/name "show-release-notes" :version version}))
+
+    (if (and (kbd/alt? event) (kbd/mod? event))
+      (st/emit! (modal/show {:type :onboarding}))
+      (st/emit! (modal/show {:type :release-notes :version version})))))
+
 (mf/defc sidebar-content
-  [{:keys [profile section] :as props}]
+  {::mf/props :obj}
+  [{:keys [profile section]}]
   (let [profile?       (= section :settings-profile)
         password?      (= section :settings-password)
         options?       (= section :settings-options)
         feedback?      (= section :settings-feedback)
         access-tokens? (= section :settings-access-tokens)
+        team-id        (du/get-current-team-id profile)
 
         go-dashboard
-        (mf/use-callback
+        (mf/use-fn
-         (mf/deps profile)
+         (mf/deps team-id)
-         #(st/emit! (rt/nav :dashboard-projects {:team-id (du/get-current-team-id profile)})))
+         #(st/emit! (rt/nav :dashboard-projects {:team-id team-id})))]
-
-        go-settings-profile
-        (mf/use-callback
-         (mf/deps profile)
-         #(st/emit! (rt/nav :settings-profile)))
-
-        go-settings-feedback
-        (mf/use-callback
-         (mf/deps profile)
-         #(st/emit! (rt/nav :settings-feedback)))
-
-        go-settings-password
-        (mf/use-callback
-         (mf/deps profile)
-         #(st/emit! (rt/nav :settings-password)))
-
-        go-settings-options
-        (mf/use-callback
-         (mf/deps profile)
-         #(st/emit! (rt/nav :settings-options)))
-
-        go-settings-access-tokens
-        (mf/use-callback
-         (mf/deps profile)
-         #(st/emit! (rt/nav :settings-access-tokens)))
-
-        show-release-notes
-        (mf/use-callback
-         (fn [event]
-           (let [version (:main cf/version)]
-             (st/emit! (ptk/event ::ev/event {::ev/name "show-release-notes" :version version}))
-             (if (and (kbd/alt? event) (kbd/mod? event))
-               (st/emit! (modal/show {:type :onboarding}))
-               (st/emit! (modal/show {:type :release-notes :version version}))))))]
 
     [:div {:class (stl/css :sidebar-content)}
      [:div {:class (stl/css :sidebar-content-section)}
@@ -73,6 +65,7 @@
              :on-click go-dashboard}
        [:span {:class (stl/css :icon)} i/arrow-down]
        [:span {:class (stl/css :text)} (tr "labels.dashboard")]]]
+
      [:hr]
 
      [:div {:class (stl/css :sidebar-content-section)}
@@ -108,7 +101,8 @@
           [:span {:class (stl/css :element-title)} (tr "labels.give-feedback")]])]]]))
 
 (mf/defc sidebar
-  {::mf/wrap [mf/memo]}
+  {::mf/wrap [mf/memo]
+   ::mf/props :obj}
   [{:keys [profile locale section]}]
   [:div {:class (stl/css :dashboard-sidebar :settings)}
    [:& sidebar-content {:profile profile