Add help modal

src/cljs/xt_play/components/popup.cljs

@@ -0,0 +1,86 @@
+(ns xt-play.components.popup
+  (:require [re-frame.core :as rf]
+            [clojure.string :as str]))
+
+(rf/reg-event-db
+ ::open
+ (fn [db [_ id]]
+   ;; only one popup open at a time
+   (assoc db ::open id)))
+
+(rf/reg-sub
+ ::open
+ :-> ::open)
+
+(rf/reg-event-fx
+ ::toggle
+ (fn [{:keys [db]} [_ id]]
+   {:dispatch (if (= id (::open db))
+                [::close]
+                [::open id])}))
+
+(rf/reg-event-db
+ ::close
+ (fn [db]
+   (dissoc db ::open)))
+
+(defn- close [_] (rf/dispatch [::close]))
+
+(def close-btn
+  [:div {:class ["absolute" "right-5" "top-0" "-ml-8" "flex"
+                 "pr-2" "pt-4" "sm:-ml-10" "sm:pr-4"]}
+   [:button {:type "button"
+             :on-click close
+             :class ["relative" "rounded-md" "text-gray-400" "hover:text-gray-500"
+                     "hover:ring-gray-500" "hover:ring-2"
+                     "focus:outline-none" "focus:ring-2" "focus:ring-white"]}
+    [:span {:class "absolute -inset-2.5"}]
+    [:span {:class "sr-only"} "Close panel"]
+    [:svg {:class "size-6"
+           :fill "none"
+           :viewBox "0 0 24 24"
+           :stroke-width "1.5"
+           :stroke "currentColor"
+           :aria-hidden "true"
+           :data-slot "icon"}
+     [:path {:stroke-linecap "round"
+             :stroke-linejoin "round"
+             :d "M6 18 18 6M6 6l12 12"}]]]])
+
+(def backdrop
+  [:div {:class "fixed inset-0 bg-gray-500/75 transition-opacity"
+         :aria-hidden "true"
+         :on-click close}])
+
+(defn heading [title]
+  [:h1 {:class "text-2xl font-semibold text-gray-900 "
+        :id "slide-over-title"}
+   (str/capitalize title)])
+
+(defn content [body]
+  [:div {:class "relative mt-6 flex-1"}
+         body])
+
+(defn slide-over-panel [{:keys [title body backdrop?]}]
+  [:div {:class "relative  z-[100] bg-blue"
+         :aria-labelledby "slide-over-title"
+         :role "dialog"
+         :aria-modal "true"}
+   (when backdrop? backdrop)
+   [:div {:class "absolute overflow-hidden"}
+    [:div {:class "absolute inset-0 overflow-hidden"}
+     [:div {:class "fixed inset-y-0 right-0 flex max-w-full pl-10"}
+      [:div {:class "relative w-screen max-w-md"}
+       [:div {:class ["px-4 sm:px-6" "flex h-full flex-col overflow-y-scroll bg-white py-6 shadow-xl"]}
+        close-btn
+        [heading title]
+        [content body]]]]]]])
+
+(defn view [content]
+  (when @(rf/subscribe [::open])
+    [slide-over-panel content]))
+
+;;(rf/dispatch [::open :help])
+
+;;(rf/dispatch [::close])
+

src/cljs/xt_play/view.cljs

@@ -9,11 +9,13 @@
             [xt-play.components.dropdown :refer [dropdown]]
             [xt-play.components.editor :as editor]
             [xt-play.components.highlight :as hl]
+            [xt-play.components.popup :as popup]
             [xt-play.config :as config]
             [xt-play.model.client :as model]
             [xt-play.model.interval :as i]
             [xt-play.model.run :as run]
-            [xt-play.model.tx-batch :as tx-batch]))
+            [xt-play.model.tx-batch :as tx-batch]
+            [xt-play.views.help :as help]))
 
 ;; Todo
 ;; - pull out components to own ns
@@ -127,7 +129,8 @@
     [:div {:class "w-full flex flex-row items-center gap-4"}
      logo
      [:span {:class "text-sm text-gray-400"}
-      @(rf/subscribe [:version])]]
+      @(rf/subscribe [:version])]
+     [help/slider]]
     [:div {:class "max-md:hidden flex-grow"}]
     [:div {:class "w-full flex flex-row items-center gap-1 md:justify-end"}
      [language-dropdown tx-type]
@@ -209,8 +212,8 @@
                      ;; stop editor expanding beyond the viewport
                      "md:max-w-[48vw] lg:max-w-[49vw]")}
    [:h2 "Transactions:"]
-   ; NOTE: The min-h-0 somehow makes sure the editor doesn't
-   ;       overflow the flex container
+                                        ; NOTE: The min-h-0 somehow makes sure the editor doesn't
+                                        ;       overflow the flex container
    [:div {:class "grow min-h-0 overflow-y-auto flex flex-col gap-2"}
     (let [tx-batches @(rf/subscribe [::tx-batch/id-batch-pairs])]
       (if (= 1 (count tx-batches))

src/cljs/xt_play/views/help.cljs

@@ -0,0 +1,69 @@
+(ns xt-play.views.help
+  (:require ["@heroicons/react/24/outline" :refer [QuestionMarkCircleIcon]]
+            [re-frame.core :as rf]
+            [xt-play.components.popup :as popup]))
+
+(defn- mono [t] [:span.font-mono.bg-gray-100.text-sm.p-1.rounded t])
+(defn- link [t [href]] [:a.hover:underline.text-orange-700.font-medium.cursor-pointer {:href href
+                                                                                       :target "_blank"} t ])
+
+(defn- subheading [& t]
+  [:h2 {:class "pt-2 text-xl font-semibold text-gray-900"}
+   t
+   [:hr]])
+
+(defn- paragraph [& t]
+  [:p {:class "py-2"} t])
+
+(def help-body
+  [:div
+   [:p {:class "text-lg text-gray-900 my-1"}
+    "Welcome to xt-fiddle, a playground for "
+    [link "xtdb" ["https://docs.xtdb.com/index.html"]] "."]
+   [subheading "Usage"]
+
+   [paragraph
+    "Below the navbar you'll see two panels: " [mono "transactions"] " and " [mono "query"] "."]
+
+   [paragraph
+    "In the " [mono "transactions"] " panel you can write colon (" [mono ";"] ") separated "
+    [link "transactions" ["https://docs.xtdb.com/reference/main/sql/txs"]]
+    " that will all be executed at the same "
+    [link "system time" ["https://docs.xtdb.com/quickstart/sql-overview.html#system-time-columns-automatic-time-versioning-of-rows-without-audit-tables"]]
+    ". To execute transactions at a different or multiple system times then click the " [mono "+"] " button and adjust the date above each panel. "
+    "Make sure that each system time is greater or equal to the previous one, just like when you execute transactions in real time!"]
+
+   [paragraph
+    "In the " [mono "query"] " panel you can write a single " [link "query" ["https://docs.xtdb.com/reference/main/sql/queries.html"]] [:span.italic " after "] "all the transactions have been run. "]
+
+   [paragraph
+    "You can use the " [mono "run"] " button to execute the transactions then run the query."]
+
+   [paragraph
+    "Share your current state by clicking the " [mono "copy url button"] " then share the generated url."]
+
+   [subheading "Docs"]
+
+   [paragraph
+    "For more information on xtdb and tutorials, here are the " [link "docs" ["https://docs.xtdb.com/index.html"]] "."]
+
+   [paragraph
+    "Something not working as you expect with xtdb-play? Open an issue "
+    ;; todo - could template a more meaningul issue, including the session link
+    [link "here" ["https://github.com/xtdb/xt-fiddle/issues/new?template=Blank+issue"]] "."]
+
+   [paragraph
+    "Found a bug in xtdb? Open an issue "
+    ;; todo - could template a more meaningul issue, including the session link
+    [link "here" ["https://github.com/xtdb/xtdb/issues/new?template=Blank+issue"]] "."]
+
+   ;; todo - get the exact wording before spending time on formatting!
+   ])
+
+(defn slider []
+  [:<>
+   [:div {:class "cursor-pointer"
+          :on-click #(rf/dispatch [::popup/toggle :help])}
+    [:> QuestionMarkCircleIcon {:class ["h-5 w-5"
+                                        "hover:text-gray-500"]}]]
+   [popup/view {:title "help" :body help-body}]])