mirror of https://github.com/logseq/logseq
feat: bug report page & clipboard data inspector (#8317)
* feat: init page route for bug-report * feat: navigate to bug-report page in dropdown-menu * feat: add route for bug report tools * feat: export clipboard to map * fix: set-step! in promise and remove unused state * chore: there is no need to actively read from clipboard, just waiting copy-paste from user * chore: only parse dataTransfer * feat: initially done the clipboard data inspector * fix: use `util/copy-to-clipboard!` instead * feat: init page route for bug-report * feat: navigate to bug-report page in dropdown-menu * feat: add route for bug report tools * feat: export clipboard to map * fix: set-step! in promise and remove unused state * feat: initially done the clipboard data inspector * fix: use `util/copy-to-clipboard!` instead * fix: remove unused `:require` * ux: finetune clipbard inspector and bug report * feat: component `report-item-button` * fix: update text for clarity * fix: add subtext to button to fix lint error * fix: add missing argument * fix: change bg color to logseq css variable * fix: remove redundant div box in `report-item-button` Co-authored-by: Junyi Du <junyidu.cn@gmail.com> Co-authored-by: Bad3r <bad3r@protonmail.com>pull/8328/head
parent
193677b46f
commit
7fd2a9a3b6
|
@ -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)})]]])
|
|
@ -0,0 +1,7 @@
|
|||
.cp__bug-report-reporter {
|
||||
background-color: var(--ls-tertiary-background-color);
|
||||
}
|
||||
|
||||
.cp__bug-report-item-button {
|
||||
background-color: var(--ls-quaternary-background-color);
|
||||
}
|
|
@ -120,9 +120,7 @@
|
|||
|
||||
{:title [:div.flex-row.flex.justify-between.items-center
|
||||
[:span (t :help/bug)]]
|
||||
:options {:href bug-report-url
|
||||
:title "Fire a bug report on Github"
|
||||
:target "_blank"}
|
||||
:options {:href (rfe/href :bug-report)}
|
||||
:icon (ui/icon "bug")}
|
||||
|
||||
(when (and (state/sub :auth/id-token) (user-handler/logged-in?))
|
||||
|
|
|
@ -10,8 +10,9 @@
|
|||
[frontend.components.search :as search]
|
||||
[frontend.components.settings :as settings]
|
||||
[frontend.components.shortcut :as shortcut]
|
||||
[frontend.components.whiteboard :as whiteboard]
|
||||
[frontend.extensions.zotero :as zotero]))
|
||||
[frontend.components.whiteboard :as whiteboard]
|
||||
[frontend.extensions.zotero :as zotero]
|
||||
[frontend.components.bug-report :as bug-report]))
|
||||
|
||||
;; http://localhost:3000/#?anchor=fn.1
|
||||
(def routes
|
||||
|
@ -78,6 +79,14 @@
|
|||
["/import"
|
||||
{:name :import
|
||||
:view setups/importer}]
|
||||
|
||||
["/bug-report"
|
||||
{:name :bug-report
|
||||
:view bug-report/bug-report}]
|
||||
|
||||
["/bug-report-tool/:tool"
|
||||
{:name :bug-report-tools
|
||||
:view bug-report/bug-report-tool-route}]
|
||||
|
||||
["/all-journals"
|
||||
{:name :all-journals
|
||||
|
|
Loading…
Reference in New Issue