Release whiteboard to everyone (#8853)

* chore: release whiteboards for everyone

Also, toggle it on by default

* fix: e2e test

* add onboarding tour test

---------

Co-authored-by: Konstantinos Kaloutas <[email protected]>

e2e-tests/page-search.spec.ts

@@ -61,7 +61,7 @@ test('Search CJK', async ({ page, block }) => {
 
   // check if CJK are indexed
   const results = await searchPage(page, '进度')
-  await expect(results.length).toEqual(4) // 1 page + 1 block + 1 page content
+  await expect(results.length).toEqual(5) // 1 page + 1 block + 1 page content + new whiteboard
   await closeSearchBox(page)
 })
 

e2e-tests/whiteboards.spec.ts

@@ -3,18 +3,28 @@ import { test } from './fixtures'
 import { modKey } from './utils'
 
 test('enable whiteboards', async ({ page }) => {
-  await expect(page.locator('.nav-header .whiteboard')).toBeHidden()
-  await page.click('#head .toolbar-dots-btn')
-  await page.click('#head .dropdown-wrapper >> text=Settings')
-  await page.click('.settings-modal a[data-id=features]')
-  await page.click('text=Whiteboards >> .. >> .ui__toggle')
-  await page.waitForTimeout(1000)
-  await page.keyboard.press('Escape')
+  if (await page.$('.nav-header .whiteboard') === null) {
+    await page.click('#head .toolbar-dots-btn')
+    await page.click('#head .dropdown-wrapper >> text=Settings')
+    await page.click('.settings-modal a[data-id=features]')
+    await page.click('text=Whiteboards >> .. >> .ui__toggle')
+    await page.waitForTimeout(1000)
+    await page.keyboard.press('Escape')
+  }
+
   await expect(page.locator('.nav-header .whiteboard')).toBeVisible()
 })
 
-test('create new whiteboard', async ({ page }) => {
+test('should display onboarding tour', async ({ page }) => {
   await page.click('.nav-header .whiteboard')
+  await page.waitForTimeout(1000)
+
+  await expect(page.locator('.cp__whiteboard-welcome')).toBeVisible()
+  await page.click('.cp__whiteboard-welcome button.bg-gray-600')
+  await expect(page.locator('.cp__whiteboard-welcome')).toBeHidden()
+})
+
+test('create new whiteboard', async ({ page }) => {
   await page.click('#tl-create-whiteboard')
   await expect(page.locator('.logseq-tldraw')).toBeVisible()
 })

src/main/frontend/components/settings.cljs

@@ -717,8 +717,7 @@
   (ui/toggle enabled?
              (fn []
                (let [value (not enabled?)]
-                 (when (user-handler/feature-available? :whiteboard)
-                   (config-handler/set-config! :feature/enable-whiteboards? value))))
+                 (config-handler/set-config! :feature/enable-whiteboards? value)))
              true))
 
 (defn whiteboards-switcher-row [enabled?]
@@ -749,6 +748,7 @@
             :on-key-press  (fn [e]
                              (when (= "Enter" (util/ekey e))
                                (update-home-page e)))}]]]])
+     (whiteboards-switcher-row enable-whiteboards?)
      (when (and (util/electron?) config/feature-plugin-system-on?)
        (plugin-system-switcher-row))
      (when (and (util/electron?) (state/developer-mode?))
@@ -784,8 +784,7 @@
           [:a.mx-1 {:href "https://blog.logseq.com/how-to-setup-and-use-logseq-sync/"
                     :target "_blank"}
            "here"]
-          "for instructions on how to set up and use Sync."]
-         (whiteboards-switcher-row enable-whiteboards?)]])
+          "for instructions on how to set up and use Sync."]]])
 
      ;; (when-not web-platform?
      ;;   [:<>

src/main/frontend/components/sidebar.cljs

@@ -368,11 +368,12 @@
 
          (when enable-whiteboards?
            (sidebar-item
-            {:class           "whiteboard"
-             :title           (t :right-side-bar/whiteboards)
-             :href            (rfe/href :whiteboards)
-             :active          (and (not srs-open?) (#{:whiteboard :whiteboards} route-name))
-             :icon            "whiteboard"
+            {:class            "whiteboard"
+             :title            (t :right-side-bar/whiteboards)
+             :href             (rfe/href :whiteboards)
+             :on-click-handler (fn [_e] (whiteboard-handler/onboarding-show))
+             :active           (and (not srs-open?) (#{:whiteboard :whiteboards} route-name))
+             :icon             "whiteboard"
              :icon-extension? true}))
 
          (when (state/enable-flashcards? (state/get-current-repo))

src/main/frontend/components/whiteboard.cljs

@@ -10,14 +10,11 @@
             [frontend.db.model :as model]
             [frontend.handler.common :as common-handler]
             [frontend.handler.route :as route-handler]
-            [frontend.handler.user :as user-handler]
             [frontend.handler.config :as config-handler]
             [frontend.handler.whiteboard :as whiteboard-handler]
             [frontend.rum :refer [use-bounding-client-rect use-breakpoint
                                   use-click-outside]]
             [frontend.state :as state]
-            [frontend.storage :as storage]
-            [frontend.config :as config]
             [frontend.ui :as ui]
             [frontend.util :as util]
             [promesa.core :as p]
@@ -294,27 +291,14 @@
 
 (rum/defc whiteboard-route
   [route-match]
-  (when (user-handler/feature-available? :whiteboard)
-    (let [name (get-in route-match [:parameters :path :name])
-          {:keys [block-id]} (get-in route-match [:parameters :query])]
-      (whiteboard-page name block-id))))
-
-(defn onboarding-show
-  []
-  (when (and (user-handler/feature-available? :whiteboard)
-             (not (or (state/sub :whiteboard/onboarding-tour?)
-                      (config/demo-graph?)
-                      (util/mobile?))))
-    (state/pub-event! [:whiteboard/onboarding])
-    (state/set-state! [:whiteboard/onboarding-tour?] true)
-    (storage/set :whiteboard-onboarding-tour? true)))
+  (let [name (get-in route-match [:parameters :path :name])
+        {:keys [block-id]} (get-in route-match [:parameters :query])]
+    (whiteboard-page name block-id)))
 
 (rum/defc onboarding-welcome
   [close-fn]
   [:div.cp__whiteboard-welcome
-   [:span.head-bg
-
-    [:strong (t :on-boarding/closed-feature (name (:whiteboard user-handler/feature-matrix)))]]
+   [:span.head-bg]
 
    [:h1.text-2xl.font-bold.flex-col.sm:flex-row
     (t :on-boarding/welcome-whiteboard-modal-title)]

src/main/frontend/dicts.cljc

@@ -8,7 +8,6 @@
                           :default "tutorial-en.md")
         :tutorial/dummy-notes #?(:cljs (rc/inline "dummy-notes-en.md")
                                  :default "dummy-notes-en.md")
-        :on-boarding/closed-feature "Closed {1}"
         :on-boarding/demo-graph "This is a demo graph, changes will not be saved until you open a local folder."
         :on-boarding/add-graph "Add a graph"
         :on-boarding/open-local-dir "Open a local directory"
@@ -530,7 +529,6 @@
         :notification/clear-all "Alles löschen"
 
         :on-boarding/add-graph "Graph hinzufügen"
-        :on-boarding/closed-feature "{1} geschlossen"
         :on-boarding/demo-graph "Dies ist ein Demo-Graph. Änderungen werden nicht gespeichert, solange Sie kein lokales Verzeichnis öffnen."
         :on-boarding/new-graph-desc-1 "Logseq unterstützt sowohl Markdown als auch Org-mode. Sie können ein bestehendes Verzeichnis öffnen oder auf Ihrem Rechner ein neues Verzeichnis anlegen. Ein Verzeichnis wird auch als Ordner bezeichnet. Ihre Daten werden nur auf diesem Gerät gespeichert."
         :on-boarding/new-graph-desc-2 "Nachdem Sie ein Verzeichnis geöffnet haben, werden darin drei Ordner angelegt:"
@@ -1289,7 +1287,6 @@
 
         :file/validate-existing-file-error "La page existe déjà avec un autre fichier: {1}, fichier actuel: {2}. Veuillez n'en garder qu'un et réindexer votre graphique."
         :notification/clear-all "Tout effacer"
-        :on-boarding/closed-feature "Fermé {1}"
         :on-boarding/tour-whiteboard-home "{1} Commencez pour vos tableaux blancs"
         :on-boarding/tour-whiteboard-home-description "Les tableaux blancs ont leur propre section dans l'application où vous pouvez les voir en un coup d'œil, en créer de nouveaux ou les supprimer facilement."
         :on-boarding/tour-whiteboard-new "{1} Créer un nouveau tableau blanc"
@@ -1629,7 +1626,6 @@
 
    :zh-Hant {
           :accessibility/skip-to-main-content "跳轉到主頁面"
-          :on-boarding/closed-feature "已關閉 {1}"
           :on-boarding/demo-graph "目前在 demo 用圖表，您需要打開本機目錄以保存。"
           :on-boarding/add-graph "增加圖表"
           :on-boarding/open-local-dir "打開本機目錄"
@@ -2875,7 +2871,6 @@
            :left-side-bar/create "Criar"
            :left-side-bar/new-whiteboard "Novo quadro branco"
            :notification/clear-all "Limpar tudo"
-           :on-boarding/closed-feature "Fechado {1}"
            :on-boarding/tour-whiteboard-home "{1} Início para seus quadros brancos"
            :on-boarding/tour-whiteboard-home-description "Os quadros brancos têm sua própria seção no aplicativo, onde você pode vê-los rapidamente, criar novos ou excluí-los facilmente."
            :on-boarding/tour-whiteboard-new "{1} Criar novo quadro branco"
@@ -2915,7 +2910,6 @@
                              :default "tutorial-en.md")
            :tutorial/dummy-notes #?(:cljs (rc/inline "dummy-notes-en.md")
                                     :default "dummy-notes-en.md")
-           :on-boarding/closed-feature "{1} fechado/a"
            :on-boarding/demo-graph "Isto é um grafo de demonstração, nenhuma mudança será guardada até abrir uma pasta local."
            :on-boarding/add-graph "Adicionar grafo"
            :on-boarding/open-local-dir "Abrir uma pasta local"
@@ -3997,7 +3991,6 @@
                           :default "tutorial-tr.md")
         :tutorial/dummy-notes #?(:cljs (rc/inline "dummy-notes-tr.md")
                                  :default "dummy-notes-tr.md")
-        :on-boarding/closed-feature "Kapalı {1}"
         :on-boarding/demo-graph "Bu bir demo graftır, yerel bir klasör açana kadar değişiklikler kaydedilmeyecektir."
         :on-boarding/add-graph "Bir graf ekle"
         :on-boarding/open-local-dir "Yerel bir dizin açın"
@@ -4594,7 +4587,6 @@
         :color/purple "보라색"
         :color/red "빨간색"
         :color/yellow "노란색"
-        :on-boarding/closed-feature "{1} 종료됨"
         :on-boarding/tour-whiteboard-home "{1} 홈 화이트보드"
         :on-boarding/tour-whiteboard-home-description "화이트보드는 각각 섹션이 존재합니다. 섹션에서 화이트보드를 한눈에 보고, 생성하거나 삭제할 수 있습니다."
         :on-boarding/tour-whiteboard-new "{1} 새 화이트보드 생성"
@@ -4918,7 +4910,6 @@
                                                              :default "tutorial-sk.md")
         :tutorial/dummy-notes                             #?(:cljs    (rc/inline "dummy-notes-sk.md")
                                                              :default "dummy-notes-sk.md")
-        :on-boarding/closed-feature                       "Zatvorený {1}"
         :on-boarding/demo-graph                           "Toto je ukážkový graf, zmeny nebudú uložené, kým neotvoríte lokálny adresár."
         :on-boarding/add-graph                            "Pridať graf"
         :on-boarding/open-local-dir                       "Otvoriť lokálny adresár"

src/main/frontend/handler/events.cljs

@@ -116,8 +116,7 @@
                                     (util/uuid-string? (second (:sync-meta %)))) repos)
                     (sync/<sync-start)))))
             (ui-handler/re-render-root!)
-            (file-sync/maybe-onboarding-show status)
-            (whiteboard/onboarding-show)))))))
+            (file-sync/maybe-onboarding-show status)))))))
 
 (defmethod handle :user/logout [[_]]
   (file-sync-handler/reset-session-graphs)

src/main/frontend/handler/user.cljs

@@ -223,14 +223,15 @@
   []
   (or (alpha-user?) (beta-user?)))
 
-(defonce feature-matrix {:file-sync :beta
-                         :whiteboard :beta})
-
-(defn feature-available?
-  [feature]
-  (or config/dev?
-      (when (logged-in?)
-        (case (feature feature-matrix)
-          :beta (alpha-or-beta-user?)
-          :alpha (alpha-user?)
-          false))))
+(comment
+  ;; We probably need this for some new features later
+  (defonce feature-matrix {:file-sync :beta})
+
+  (defn feature-available?
+    [feature]
+    (or config/dev?
+        (when (logged-in?)
+          (case (feature feature-matrix)
+            :beta (alpha-or-beta-user?)
+            :alpha (alpha-user?)
+            false)))))

src/main/frontend/handler/whiteboard.cljs

@@ -11,6 +11,8 @@
             [frontend.modules.outliner.core :as outliner]
             [frontend.modules.outliner.file :as outliner-file]
             [frontend.state :as state]
+            [frontend.config :as config]
+            [frontend.storage :as storage]
             [frontend.util :as util]
             [logseq.graph-parser.util :as gp-util]
             [logseq.graph-parser.whiteboard :as gp-whiteboard]
@@ -417,3 +419,12 @@
     (catch :default e
       (js/console.error e)))
   (history/resume-listener!))
+
+(defn onboarding-show
+  []
+  (when (not (or (state/sub :whiteboard/onboarding-tour?)
+                 (config/demo-graph?)
+                 (util/mobile?)))
+    (state/pub-event! [:whiteboard/onboarding])
+    (state/set-state! [:whiteboard/onboarding-tour?] true)
+    (storage/set :whiteboard-onboarding-tour? true)))

src/main/frontend/state.cljs

@@ -601,9 +601,7 @@ Similar to re-frame subscriptions"
   ([]
    (enable-whiteboards? (get-current-repo)))
   ([repo]
-   (and
-    ((resolve 'frontend.handler.user/feature-available?) :whiteboard) ;; using resolve to avoid circular dependency
-    (:feature/enable-whiteboards? (sub-config repo)))))
+   (not (false? (:feature/enable-whiteboards? (sub-config repo))))))
 
 (defn enable-git-auto-push?
   [repo]