🎉 Refactor notifications and ask user for updates

frontend/src/app/main/data/messages.cljs

@@ -23,6 +23,15 @@
 
 (def +animation-timeout+ 600)
 
+(s/def ::message-type #{:success :error :info :warning})
+(s/def ::message-position #{:fixed :floating :inline})
+(s/def ::message-status #{:visible :hide})
+(s/def ::message-controls #{:none :close :inline-actions :bottom-actions})
+(s/def ::label string?)
+(s/def ::callback fn?)
+(s/def ::message-action (s/keys :req-un [::label ::callback]))
+(s/def ::message-actions (s/nilable (s/coll-of ::message-action :kind vector?)))
+
 (defn show
   [data]
   (ptk/reify ::show
@@ -79,3 +88,11 @@
    (show {:content content
           :type :warning
           :timeout timeout})))
+
+(defn info-dialog
+  [content controls actions]
+  (show {:content content
+         :type :info
+         :controls controls
+         :actions actions}))
+

frontend/src/app/main/data/workspace/notifications.cljs

@@ -13,6 +13,7 @@
    [app.common.geom.point :as gpt]
    [app.common.pages :as cp]
    [app.common.spec :as us]
+   [app.main.data.messages :as dm]
    [app.main.data.workspace.common :as dwc]
    [app.main.data.workspace.persistence :as dwp]
    [app.main.data.workspace.libraries :as dwl]
@@ -23,6 +24,7 @@
    [app.util.time :as dt]
    [app.util.transit :as t]
    [app.util.websockets :as ws]
+   [app.util.i18n :as i18n :refer [tr]]
    [beicon.core :as rx]
    [cljs.spec.alpha :as s]
    [clojure.set :as set]
@@ -211,6 +213,16 @@
     ptk/WatchEvent
     (watch [_ state stream]
       (when (contains? (:workspace-libraries state) file-id)
-        (rx/of (dwl/ext-library-changed file-id changes)
-               (dwl/sync-file file-id))))))
+        (let [do-update #(do
+                           (st/emit! (dwl/sync-file file-id))
+                           (st/emit! dm/hide))
+              do-dismiss #(st/emit! dm/hide)]
+          (rx/of (dwl/ext-library-changed file-id changes)
+                 (dm/info-dialog
+                   (tr "workspace.updates.there-are-updates")
+                   :inline-actions
+                   [{:label (tr "workspace.updates.update")
+                     :callback do-update}
+                    {:label (tr "workspace.updates.dismiss")
+                     :callback do-dismiss}])))))))
 

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

@@ -10,6 +10,9 @@
 (ns app.main.ui.messages
   (:require
    [rumext.alpha :as mf]
+   [clojure.spec.alpha :as s]
+   [app.common.uuid :as uuid]
+   [app.common.spec :as us]
    [app.main.ui.icons :as i]
    [app.main.data.messages :as dm]
    [app.main.refs :as refs]
@@ -19,57 +22,69 @@
    [app.util.i18n :as i18n :refer [t]]
    [app.util.timers :as ts]))
 
-(defn- type->icon
-  [type]
-  (case type
-    :warning i/msg-warning
-    :error i/msg-error
-    :success i/msg-success
-    :info i/msg-info
-    i/msg-error))
-
-(mf/defc notification-item
-  [{:keys [type status on-close quick? content] :as props}]
-  (let [klass (dom/classnames
-               :fixed   true
-               :success (= type :success)
-               :error   (= type :error)
-               :info    (= type :info)
-               :warning (= type :warning)
-               :hide    (= status :hide)
-               :quick   quick?)]
-    [:section.banner {:class klass}
-     [:div.content
-      [:div.icon (type->icon type)]
-      [:span content]]
-     [:div.btn-close {:on-click on-close} i/close]]))
+(mf/defc banner
+  [{:keys [type position status controls content actions on-close] :as props}]
+  (us/assert ::dm/message-type type)
+  (us/assert ::dm/message-position position)
+  (us/assert ::dm/message-status status)
+  (us/assert ::dm/message-controls controls)
+  (us/assert ::dm/message-actions actions)
+  (us/assert (s/nilable ::us/fn) on-close)
+  [:div.banner {:class (dom/classnames
+                         :warning  (= type :warning)
+                         :error    (= type :error)
+                         :success  (= type :success)
+                         :info     (= type :info)
+                         :fixed    (= position :fixed)
+                         :floating (= position :floating)
+                         :inline   (= position :inline)
+                         :hide     (= status :hide))}
+   [:div.wrapper
+     [:div.icon (case type
+                  :warning i/msg-warning
+                  :error i/msg-error
+                  :success i/msg-success
+                  :info i/msg-info
+                  i/msg-error)]
+     [:div.content {:class (dom/classnames
+                             :inline-actions (= controls :inline-actions)
+                             :bottom-actions (= controls :bottom-actions))}
+      content
+      (when (or (= controls :bottom-actions) (= controls :inline-actions))
+        [:div.actions
+          (for [action actions]
+            [:div.btn-secondary.btn-small {:key (uuid/next)
+                                           :on-click (:callback action)}
+             (:label action)])])]
+   (when (= controls :close)
+     [:div.btn-close {:on-click on-close} i/close])]])
 
 (mf/defc notifications
   []
   (let [message  (mf/deref refs/message)
         on-close #(st/emit! dm/hide)]
     (when message
-      [:& notification-item {:type (:type message)
-                             :quick? (boolean (:timeout message))
-                             :status (:status message)
-                             :content (:content message)
-                             :on-close on-close}])))
+      [:& banner (assoc message
+                        :position :floating
+                        :controls (if (some? (:controls message))
+                                    (:controls message)
+                                    (if (some? (:timeout message))
+                                      :none
+                                      :close))
+                        :on-close on-close)])))
 
 (mf/defc inline-banner
   {::mf/wrap [mf/memo]}
-  [{:keys [type on-close content children] :as props}]
-  [:div.inline-banner {:class (dom/classnames
-                               :warning (= type :warning)
-                               :error   (= type :error)
-                               :success (= type :success)
-                               :info    (= type :info)
-                               :quick   (not on-close))}
-   [:div.icon (type->icon type)]
-   [:div.content
-    [:div.main
-     [:span.text content]
-     [:div.btn-close {:on-click on-close} i/close]]
-    (when children
-      [:div.extra
-       children])]])
+  [{:keys [type content on-close actions] :as props}]
+  [:& banner {:type type
+              :position :inline
+              :status :visible
+              :controls (if (some? on-close)
+                          :close
+                          (if (some? actions)
+                            :bottom-actions
+                            :none))
+              :content content
+              :on-close on-close
+              :actions actions}])
 

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

@@ -75,10 +75,12 @@
        (not= (:pending-email prof) (:email prof))
        [:& msgs/inline-banner
         {:type :info
-         :content (t locale "settings.change-email-info3" (:pending-email prof))}
-        [:div.btn-secondary.btn-small
-         {:on-click #(st/emit! udu/cancel-email-change)}
-         (t locale "settings.cancel-email-change")]]
+         :content (t locale "settings.change-email-info3" (:pending-email prof))
+         :actions [{:label (t locale "settings.cancel-email-change")
+                    :callback #(st/emit! udu/cancel-email-change)}]}]
+        ;; [:div.btn-secondary.btn-small
+        ;;  {:on-click #(st/emit! udu/cancel-email-change)}
+        ;;  (t locale "settings.cancel-email-change")]]
 
        :else
        [:& msgs/inline-banner