greatbody
/
logseq
mirror of https://github.com/logseq/logseq
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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
situ2001 2023-01-12 20:29:56 +08:00 committed by GitHub
parent 193677b46f
commit 7fd2a9a3b6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 137 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

118
src/main/frontend/components/bug_report.cljs Normal file
View File

@ -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)})]]])

7
src/main/frontend/components/bug_report.css Normal file
View File

@ -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);
}

4
src/main/frontend/components/header.cljs
View File

@ -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?))

11
src/main/frontend/routes.cljs
View File

@ -11,7 +11,8 @@
[frontend.components.settings :as settings]
[frontend.components.shortcut :as shortcut]
[frontend.components.whiteboard :as whiteboard]
[frontend.extensions.zotero :as zotero]))
[frontend.extensions.zotero :as zotero]
[frontend.components.bug-report :as bug-report]))
;; http://localhost:3000/#?anchor=fn.1
(def routes
@ -79,6 +80,14 @@
{: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
:view journal/all-journals}]