|
|
@@ -0,0 +1,118 @@
|
|
|
+(ns frontend.components.bug-report
|
|
|
+ (:require [rum.core :as rum]
|
|
|
+ [frontend.ui :as ui]
|
|
|
+ [frontend.components.header :as header]
|
|
|
+ [frontend.util :as util]
|
|
|
+ [reitit.frontend.easy :as rfe]
|
|
|
+ [clojure.string :as string]
|
|
|
+ [frontend.handler.notification :as notification]))
|
|
|
+
|
|
|
+(defn parse-clipboard-data-transfer
|
|
|
+ "parse dataTransfer
|
|
|
+
|
|
|
+ input: dataTransfer
|
|
|
+
|
|
|
+ output: {:types {:type :data} :items {:kind :type} :files {:name :size :type}}"
|
|
|
+ [data]
|
|
|
+ (let [items (.-items data)
|
|
|
+ types (.-types data)
|
|
|
+ files (.-files data)]
|
|
|
+ (conj
|
|
|
+ {:items (->> items
|
|
|
+ (map (fn [item] {:kind (.-kind item) :type (.-type item)}))
|
|
|
+ (conj))}
|
|
|
+ {:types (->> types
|
|
|
+ (map (fn [type] {:type type :data (.getData data type)}))
|
|
|
+ (conj))}
|
|
|
+ {:files (->> files
|
|
|
+ (map (fn [file] {:name (.-name file) :type (.-type file) :size (.-size file)}))
|
|
|
+ (conj))})))
|
|
|
+
|
|
|
+(rum/defc clipboard-data-inspector
|
|
|
+ "bug report tool for clipboard"
|
|
|
+ []
|
|
|
+ (let [[result set-result!] (rum/use-state {})
|
|
|
+ [step set-step!] (rum/use-state 0)
|
|
|
+ paste-handler! (fn [e]
|
|
|
+ (let [clipboard-data (.-clipboardData e)
|
|
|
+ result (parse-clipboard-data-transfer clipboard-data)
|
|
|
+ result (into {} result)]
|
|
|
+ (set-result! result)
|
|
|
+ (set-step! 1)))
|
|
|
+
|
|
|
+ copy-result-to-clipboard! (fn [result]
|
|
|
+ (util/copy-to-clipboard! result)
|
|
|
+ (notification/show! "Copied to clipboard!"))
|
|
|
+
|
|
|
+ reset-step! (fn [] ((set-step! 0)
|
|
|
+ (set-result! {})))]
|
|
|
+
|
|
|
+ (rum/use-effect!
|
|
|
+ (fn []
|
|
|
+ (cond (= step 0) (js/addEventListener "paste" paste-handler!))
|
|
|
+ (fn [] (cond (= step 0) (js/removeEventListener "paste" paste-handler!))))
|
|
|
+ [step]) ;; when step === 0
|
|
|
+
|
|
|
+ [:div.flex.flex-col
|
|
|
+ (when (= step 0)
|
|
|
+ (list [:div.mx-auto "Press Ctrl+V / ⌘+V to inspect your clipboard data"]
|
|
|
+ [:div.mx-auto "or click here to paste if you are using the mobile version"]
|
|
|
+ ;; for mobile
|
|
|
+ [:input.form-input.is-large.transition.duration-150.ease-in-out {:type "text" :placeholder "Long press here to paste if you are on mobile"}]
|
|
|
+ [:div.flex.justify-between.items-center.mt-2
|
|
|
+ [:div "Something wrong? No problem, click here to go to the previous step."]
|
|
|
+ (ui/button "Go back" :on-click #(util/open-url (rfe/href :bug-report)))]))
|
|
|
+
|
|
|
+ (when (= step 1)
|
|
|
+ (list
|
|
|
+ [:div "Here is the data read from clipboard."]
|
|
|
+ [:div.flex.justify-between.items-center.mt-2
|
|
|
+ [:div "If it is Okay, click the button to copy the result to your clipboard."]
|
|
|
+ (ui/button "Copy the result" :on-click #(copy-result-to-clipboard! (js/JSON.stringify (clj->js result) nil 2)))]
|
|
|
+ [:div.flex.justify-between.items-center.mt-2
|
|
|
+ [:div "Now you can report the result pasted to your clipboard. Please paste the result to Additional Context and state where you copied the original content from. Thanks!"]
|
|
|
+ (ui/button "Create an issue" :href header/bug-report-url)]
|
|
|
+ [:div.flex.justify-between.items-center.mt-2
|
|
|
+ [:div "Something wrong? No problem, click here to go to the previous step."]
|
|
|
+ (ui/button "Go back" :on-click reset-step!)]
|
|
|
+
|
|
|
+ [:pre.whitespace-pre-wrap [:code (js/JSON.stringify (clj->js result) nil 2)]]))]))
|
|
|
+
|
|
|
+(rum/defc bug-report-tool-route
|
|
|
+ [route-match]
|
|
|
+ (let [name (get-in route-match [:parameters :path :tool])]
|
|
|
+ [:div.flex.flex-col ;; container
|
|
|
+ [:h1.text-2xl.mx-auto.mb-4 (ui/icon "clipboard") " " (-> name (string/replace #"-" " ") (string/capitalize))]
|
|
|
+ (cond ;; TODO any fallback?
|
|
|
+ (= name "clipboard-data-inspector")
|
|
|
+ (clipboard-data-inspector))]))
|
|
|
+
|
|
|
+(rum/defc report-item-button
|
|
|
+ [title description icon-name {:keys [on-click]}]
|
|
|
+ [:a.cp__bug-report-item-button.flex.items-center.px-4.py-2.my-2.rounded-lg {:on-click on-click}
|
|
|
+ [(ui/icon icon-name)
|
|
|
+ [:div.flex.flex-col.ml-2
|
|
|
+ [:div title]
|
|
|
+ [:div.opacity-60 description]]]])
|
|
|
+
|
|
|
+(rum/defc bug-report
|
|
|
+ []
|
|
|
+ [:div.flex.flex-col
|
|
|
+ [:div.flex.flex-col.items-center
|
|
|
+ [:div.flex.items-center.mb-2
|
|
|
+ (ui/icon "bug")
|
|
|
+ [:h1.text-3xl.ml-2 "Bug report"]]
|
|
|
+ [:div.opacity-60 "Oops, looks like something went wrong.."]
|
|
|
+ [:div.opacity-60 "Can you help us out by submitting a bug report? We'll get it sorted out as soon as we can"]]
|
|
|
+ [:div.cp__bug-report-reporter.rounded-lg.p-8.mt-8
|
|
|
+ [:h1.text-2xl "Is the bug you encountered related to these fields?"]
|
|
|
+ [:div.opacity-60 "You can use these handy tools to give us additional information"]
|
|
|
+ (report-item-button "Clipboard helper"
|
|
|
+ "Inspect and collect clipboard data"
|
|
|
+ "clipboard"
|
|
|
+ {:on-click #(util/open-url (rfe/href :bug-report-tools {:tool "clipboard-data-inspector"}))})
|
|
|
+ [:div.py-2] ;; divider
|
|
|
+ [:div.flex.flex-col
|
|
|
+ [:h1.text-2xl "Or..."]
|
|
|
+ [:div.opacity-60 "If there are no tools available for you to gather additional information, please report the bug directly"]
|
|
|
+ (report-item-button "Submit a bug report" "Help Make Logseq Better!" "message-report" {:on-click #(util/open-url header/bug-report-url)})]]])
|
situ2001