🎉 Add AB test descriptive board tooltip (#5936)

* 🎉 Add AB test descriptive board tooltip

* 📎 Add changes from feedback

backend/src/app/rpc/commands/profile.clj

@@ -58,7 +58,8 @@
    [:welcome-file-id {:optional true} [:maybe ::sm/boolean]]
    [:release-notes-viewed {:optional true}
     [::sm/text {:max 100}]]
-   [:notifications {:optional true} schema:props-notifications]])
+   [:notifications {:optional true} schema:props-notifications]
+   [:workspace-visited {:optional true} ::sm/boolean]])
 
 (def schema:profile
   [:map {:title "Profile"}

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

@@ -51,6 +51,7 @@
    [app.main.data.workspace.collapse :as dwco]
    [app.main.data.workspace.colors :as dwcl]
    [app.main.data.workspace.comments :as dwcm]
+   [app.main.data.workspace.common :as dwc]
    [app.main.data.workspace.drawing :as dwd]
    [app.main.data.workspace.edition :as dwe]
    [app.main.data.workspace.fix-broken-shapes :as fbs]
@@ -393,7 +394,7 @@
 
 (defn finalize-workspace
   [file-id]
-  (ptk/reify ::finalize-file
+  (ptk/reify ::finalize-workspace
     ptk/UpdateEvent
     (update [_ state]
       (-> state
@@ -416,6 +417,7 @@
                (dpj/finalize-project project-id)
                (dwsl/finalize-shape-layout)
                (dwcl/stop-picker)
+               (dwc/set-workspace-visited)
                (modal/hide)
                (ntf/hide))))))
 

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

@@ -7,6 +7,8 @@
 (ns app.main.data.workspace.common
   (:require
    [app.common.logging :as log]
+   [app.config :as cf]
+   [app.main.data.profile :as du]
    [app.main.data.workspace.layout :as dwl]
    [beicon.v2.core :as rx]
    [potok.v2.core :as ptk]))
@@ -29,6 +31,15 @@
   [e]
   (= e :interrupt))
 
+(defn set-workspace-visited
+  []
+  (ptk/reify ::set-workspace-visited
+    ptk/WatchEvent
+    (watch [_ state _]
+      (let [profile (:profile state)
+            props   (get profile :props)]
+        (when (and (cf/external-feature-flag "boards-03" "test") (not (:workspace-visited props)))
+          (rx/of (du/update-profile-props {:workspace-visited true})))))))
 
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; UNDO

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

@@ -14,6 +14,7 @@
    [app.main.data.changes :as dch]
    [app.main.data.helpers :as dsh]
    [app.main.data.persistence :as-alias dps]
+   [app.main.data.workspace.common :as dwc]
    [app.main.data.workspace.notifications :as-alias wnt]
    [app.main.rasterizer :as thr]
    [app.main.refs :as refs]
@@ -291,4 +292,10 @@
                    (rx/mapcat #(into #{} %))
                    (rx/map #(update-thumbnail file-id page-id % "frame" "watch-state-changes"))))
 
+             ;; WARNING: This is a workaround for an AB test, in case we consolidate this change we should
+             ;; find a better way to handle this.
+             (->> notifier-s
+                  (rx/take 1)
+                  (rx/map dwc/set-workspace-visited))
+
              (rx/take-until stopper-s))))))

frontend/src/app/main/ui/workspace/top_toolbar.cljs

@@ -10,6 +10,7 @@
    [app.common.data.macros :as dm]
    [app.common.geom.point :as gpt]
    [app.common.media :as cm]
+   [app.config :as cf]
    [app.main.data.event :as ev]
    [app.main.data.modal :as modal]
    [app.main.data.workspace :as dw]
@@ -120,7 +121,15 @@
         (mf/use-fn
          (fn [event]
            (dom/blur! (dom/get-target event))
-           (st/emit! (dwc/toggle-toolbar-visibility))))]
+           (st/emit! (dwc/toggle-toolbar-visibility))))
+
+        profile (mf/deref refs/profile)
+        props   (get profile :props)
+        test-tooltip-board-text
+        (if (and (cf/external-feature-flag "boards-03" "test")
+                 (not (:workspace-visited props)))
+          (tr "workspace.toolbar.frame-first-time" (sc/get-tooltip :draw-frame))
+          (tr "workspace.toolbar.frame" (sc/get-tooltip :draw-frame)))]
 
     (when-not ^boolean read-only?
       [:aside {:class (stl/css-case :main-toolbar true
@@ -140,7 +149,7 @@
         [:*
          [:li
           [:button
-           {:title (tr "workspace.toolbar.frame" (sc/get-tooltip :draw-frame))
+           {:title test-tooltip-board-text
             :aria-label (tr "workspace.toolbar.frame" (sc/get-tooltip :draw-frame))
             :class  (stl/css-case :main-toolbar-options-button true :selected (= selected-drawtool :frame))
             :on-click select-drawtool

frontend/translations/en.po

@@ -6664,10 +6664,14 @@ msgstr "Curve (%s)"
 msgid "workspace.toolbar.ellipse"
 msgstr "Ellipse (%s)"
 
-#: src/app/main/ui/workspace/top_toolbar.cljs:143, src/app/main/ui/workspace/top_toolbar.cljs:144
+#: src/app/main/ui/workspace/top_toolbar.cljs:128, src/app/main/ui/workspace/top_toolbar.cljs:144
 msgid "workspace.toolbar.frame"
 msgstr "Board (%s)"
 
+#: src/app/main/ui/workspace/top_toolbar.cljs:128, src/app/main/ui/workspace/top_toolbar.cljs:144
+msgid "workspace.toolbar.frame-first-time"
+msgstr "Create board. Click and drag to define its size. (%s)"
+
 #: src/app/main/ui/workspace/top_toolbar.cljs:60, src/app/main/ui/workspace/top_toolbar.cljs:61
 msgid "workspace.toolbar.image"
 msgstr "Image (%s)"

frontend/translations/es.po

@@ -6671,10 +6671,14 @@ msgstr "Curva (%s)"
 msgid "workspace.toolbar.ellipse"
 msgstr "Elipse (%s)"
 
-#: src/app/main/ui/workspace/top_toolbar.cljs:143, src/app/main/ui/workspace/top_toolbar.cljs:144
+#: src/app/main/ui/workspace/top_toolbar.cljs:128, src/app/main/ui/workspace/top_toolbar.cljs:144
 msgid "workspace.toolbar.frame"
 msgstr "Tablero (%s)"
 
+#: src/app/main/ui/workspace/top_toolbar.cljs:128, src/app/main/ui/workspace/top_toolbar.cljs:144
+msgid "workspace.toolbar.frame-first-time"
+msgstr "Crear tablero. Click y arrastrar para definir el tamaño. (%s)"
+
 #: src/app/main/ui/workspace/top_toolbar.cljs:60, src/app/main/ui/workspace/top_toolbar.cljs:61
 msgid "workspace.toolbar.image"
 msgstr "Imagen (%s)"