Add bug report page
This commit is contained in:
1ilit
parent
884bd32515
commit
f2b02e5d42
107
package-lock.json
generated
107
package-lock.json
generated
@ -23,6 +23,8 @@
|
||||
"react-hotkeys-hook": "^4.4.1",
|
||||
"react-router-dom": "^6.11.2",
|
||||
"react-scripts": "5.0.1",
|
||||
"slate": "^0.94.1",
|
||||
"slate-react": "^0.98.3",
|
||||
"socket.io-client": "^4.7.2",
|
||||
"unique-names-generator": "^4.7.1",
|
||||
"url": "^0.11.1",
|
||||
@ -2469,14 +2471,6 @@
|
||||
"bezier-easing": "^2.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@douyinfe/semi-foundation/node_modules/scroll-into-view-if-needed": {
|
||||
"version": "2.2.31",
|
||||
"resolved": "https://registry.npmjs.org/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.2.31.tgz",
|
||||
"integrity": "sha512-dGCXy99wZQivjmjIqihaBQNjryrz5rueJY7eHfTdyWEiR4ttYpsajb14rn9s5d4DY4EcY6+4+U/maARBXJedkA==",
|
||||
"dependencies": {
|
||||
"compute-scroll-into-view": "^1.0.20"
|
||||
}
|
||||
},
|
||||
"node_modules/@douyinfe/semi-icons": {
|
||||
"version": "2.37.0",
|
||||
"resolved": "https://registry.npmjs.org/@douyinfe/semi-icons/-/semi-icons-2.37.0.tgz",
|
||||
@ -2547,14 +2541,6 @@
|
||||
"react-dom": "0.14.x || 15.x || 16.x || 17.x"
|
||||
}
|
||||
},
|
||||
"node_modules/@douyinfe/semi-ui/node_modules/scroll-into-view-if-needed": {
|
||||
"version": "2.2.31",
|
||||
"resolved": "https://registry.npmjs.org/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.2.31.tgz",
|
||||
"integrity": "sha512-dGCXy99wZQivjmjIqihaBQNjryrz5rueJY7eHfTdyWEiR4ttYpsajb14rn9s5d4DY4EcY6+4+U/maARBXJedkA==",
|
||||
"dependencies": {
|
||||
"compute-scroll-into-view": "^1.0.20"
|
||||
}
|
||||
},
|
||||
"node_modules/@eslint-community/eslint-utils": {
|
||||
"version": "4.4.0",
|
||||
"resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
|
||||
@ -3623,6 +3609,11 @@
|
||||
"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
|
||||
"integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw=="
|
||||
},
|
||||
"node_modules/@juggle/resize-observer": {
|
||||
"version": "3.4.0",
|
||||
"resolved": "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.4.0.tgz",
|
||||
"integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA=="
|
||||
},
|
||||
"node_modules/@leichtgewicht/ip-codec": {
|
||||
"version": "2.0.4",
|
||||
"resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz",
|
||||
@ -4349,6 +4340,11 @@
|
||||
"@types/node": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/is-hotkey": {
|
||||
"version": "0.1.7",
|
||||
"resolved": "https://registry.npmjs.org/@types/is-hotkey/-/is-hotkey-0.1.7.tgz",
|
||||
"integrity": "sha512-yB5C7zcOM7idwYZZ1wKQ3pTfjA9BbvFqRWvKB46GFddxnJtHwi/b9y84ykQtxQPg5qhdpg4Q/kWU3EGoCTmLzQ=="
|
||||
},
|
||||
"node_modules/@types/istanbul-lib-coverage": {
|
||||
"version": "2.0.4",
|
||||
"resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz",
|
||||
@ -4418,6 +4414,11 @@
|
||||
"resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
|
||||
"integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ=="
|
||||
},
|
||||
"node_modules/@types/lodash": {
|
||||
"version": "4.14.198",
|
||||
"resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.198.tgz",
|
||||
"integrity": "sha512-trNJ/vtMZYMLhfN45uLq4ShQSw0/S7xCTLLVM+WM1rmFpba/VS42jVUgaO3w/NOLiWR/09lnYk0yMaA/atdIsg=="
|
||||
},
|
||||
"node_modules/@types/mime": {
|
||||
"version": "1.3.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.2.tgz",
|
||||
@ -7111,6 +7112,18 @@
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/direction": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/direction/-/direction-1.0.4.tgz",
|
||||
"integrity": "sha512-GYqKi1aH7PJXxdhTeZBFrg8vUBeKXi+cNprXsC1kpJcbcVnV9wBsrOu1cQEdG0WeQwlfHiy3XvnKfIrJ2R0NzQ==",
|
||||
"bin": {
|
||||
"direction": "cli.js"
|
||||
},
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/wooorm"
|
||||
}
|
||||
},
|
||||
"node_modules/dlv": {
|
||||
"version": "1.1.3",
|
||||
"resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
|
||||
@ -9681,6 +9694,11 @@
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/is-hotkey": {
|
||||
"version": "0.1.8",
|
||||
"resolved": "https://registry.npmjs.org/is-hotkey/-/is-hotkey-0.1.8.tgz",
|
||||
"integrity": "sha512-qs3NZ1INIS+H+yeo7cD9pDfwYV/jqRh1JG9S9zYrNudkoUQg7OL7ziXqRKu+InFjUIDoP2o6HIkLYMh1pcWgyQ=="
|
||||
},
|
||||
"node_modules/is-map": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.2.tgz",
|
||||
@ -9754,6 +9772,14 @@
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/is-plain-object": {
|
||||
"version": "5.0.0",
|
||||
"resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
|
||||
"integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==",
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/is-potential-custom-element-name": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
|
||||
@ -15701,6 +15727,14 @@
|
||||
"url": "https://opencollective.com/webpack"
|
||||
}
|
||||
},
|
||||
"node_modules/scroll-into-view-if-needed": {
|
||||
"version": "2.2.31",
|
||||
"resolved": "https://registry.npmjs.org/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.2.31.tgz",
|
||||
"integrity": "sha512-dGCXy99wZQivjmjIqihaBQNjryrz5rueJY7eHfTdyWEiR4ttYpsajb14rn9s5d4DY4EcY6+4+U/maARBXJedkA==",
|
||||
"dependencies": {
|
||||
"compute-scroll-into-view": "^1.0.20"
|
||||
}
|
||||
},
|
||||
"node_modules/select-hose": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
|
||||
@ -15943,6 +15977,37 @@
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/slate": {
|
||||
"version": "0.94.1",
|
||||
"resolved": "https://registry.npmjs.org/slate/-/slate-0.94.1.tgz",
|
||||
"integrity": "sha512-GH/yizXr1ceBoZ9P9uebIaHe3dC/g6Plpf9nlUwnvoyf6V1UOYrRwkabtOCd3ZfIGxomY4P7lfgLr7FPH8/BKA==",
|
||||
"dependencies": {
|
||||
"immer": "^9.0.6",
|
||||
"is-plain-object": "^5.0.0",
|
||||
"tiny-warning": "^1.0.3"
|
||||
}
|
||||
},
|
||||
"node_modules/slate-react": {
|
||||
"version": "0.98.3",
|
||||
"resolved": "https://registry.npmjs.org/slate-react/-/slate-react-0.98.3.tgz",
|
||||
"integrity": "sha512-p1BnF9eRyRM0i5hkgOb11KgmpWLQm9Zyp6jVkOAj5fPdIGheKhg48Z7aWKrayeJ4nmRyi/NjRZz/io5hQcphmw==",
|
||||
"dependencies": {
|
||||
"@juggle/resize-observer": "^3.4.0",
|
||||
"@types/is-hotkey": "^0.1.1",
|
||||
"@types/lodash": "^4.14.149",
|
||||
"direction": "^1.0.3",
|
||||
"is-hotkey": "^0.1.6",
|
||||
"is-plain-object": "^5.0.0",
|
||||
"lodash": "^4.17.4",
|
||||
"scroll-into-view-if-needed": "^2.2.20",
|
||||
"tiny-invariant": "1.0.6"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8.0",
|
||||
"react-dom": ">=16.8.0",
|
||||
"slate": ">=0.65.3"
|
||||
}
|
||||
},
|
||||
"node_modules/socket.io-client": {
|
||||
"version": "4.7.2",
|
||||
"resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.7.2.tgz",
|
||||
@ -16794,6 +16859,16 @@
|
||||
"resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",
|
||||
"integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA=="
|
||||
},
|
||||
"node_modules/tiny-invariant": {
|
||||
"version": "1.0.6",
|
||||
"resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.0.6.tgz",
|
||||
"integrity": "sha512-FOyLWWVjG+aC0UqG76V53yAWdXfH8bO6FNmyZOuUrzDzK8DI3/JRY25UD7+g49JWM1LXwymsKERB+DzI0dTEQA=="
|
||||
},
|
||||
"node_modules/tiny-warning": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
|
||||
"integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
|
||||
},
|
||||
"node_modules/tmpl": {
|
||||
"version": "1.0.5",
|
||||
"resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",
|
||||
|
||||
@ -18,6 +18,8 @@
|
||||
"react-hotkeys-hook": "^4.4.1",
|
||||
"react-router-dom": "^6.11.2",
|
||||
"react-scripts": "5.0.1",
|
||||
"slate": "^0.94.1",
|
||||
"slate-react": "^0.98.3",
|
||||
"socket.io-client": "^4.7.2",
|
||||
"unique-names-generator": "^4.7.1",
|
||||
"url": "^0.11.1",
|
||||
|
||||
@ -3,6 +3,7 @@ import Editor from "./pages/editor";
|
||||
import LandingPage from "./pages/landing_page";
|
||||
import Survey from "./pages/survey";
|
||||
import Shortcuts from "./pages/shortcuts";
|
||||
import BugReport from "./pages/bug_report";
|
||||
|
||||
function App() {
|
||||
return (
|
||||
@ -13,6 +14,7 @@ function App() {
|
||||
<Route path="/editor" element={<Editor name="Untitled" />} />
|
||||
<Route path="/survey" element={<Survey />} />
|
||||
<Route path="/shortcuts" element={<Shortcuts/>}/>
|
||||
<Route path="/bug_report" element={<BugReport/>}/>
|
||||
</Routes>
|
||||
</Router>
|
||||
</>
|
||||
|
||||
@ -976,7 +976,7 @@ export default function ControlPanel(props) {
|
||||
function: () => {},
|
||||
},
|
||||
"Report a bug": {
|
||||
function: () => {},
|
||||
function: () => window.open("/bug_report", "_blank"),
|
||||
},
|
||||
"Suggest a feature": {
|
||||
function: () => {},
|
||||
|
||||
19
src/components/rich_editor.jsx
Normal file
19
src/components/rich_editor.jsx
Normal file
@ -0,0 +1,19 @@
|
||||
import React, { useState } from "react";
|
||||
import { createEditor } from "slate";
|
||||
import { Slate, Editable, withReact } from "slate-react";
|
||||
|
||||
const initialValue = [
|
||||
{
|
||||
type: "paragraph",
|
||||
children: [{ text: "A line of text in a paragraph." }],
|
||||
},
|
||||
];
|
||||
|
||||
export default function RichEditor() {
|
||||
const [editor] = useState(() => withReact(createEditor()));
|
||||
return (
|
||||
<Slate editor={editor} initialValue={initialValue}>
|
||||
<Editable />
|
||||
</Slate>
|
||||
);
|
||||
}
|
||||
@ -55,7 +55,7 @@
|
||||
|
||||
.card-theme{
|
||||
color: var(--semi-color-text-1);
|
||||
background-color: rgba(var(--semi-grey-1), 1);
|
||||
background-color: rgba(var(--semi-grey-0), 1);
|
||||
}
|
||||
|
||||
.toolbar-theme {
|
||||
|
||||
187
src/pages/bug_report.jsx
Normal file
187
src/pages/bug_report.jsx
Normal file
@ -0,0 +1,187 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import logo_light from "../assets/logo_light_46.png";
|
||||
import logo_dark from "../assets/logo_dark_46.png";
|
||||
import { Banner, Button, Input, Upload } from "@douyinfe/semi-ui";
|
||||
import {
|
||||
IconSun,
|
||||
IconMoon,
|
||||
IconGithubLogo,
|
||||
IconPaperclip,
|
||||
} from "@douyinfe/semi-icons";
|
||||
import RichEditor from "../components/rich_editor";
|
||||
|
||||
export default function BugReport() {
|
||||
const [theme, setTheme] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
const t = localStorage.getItem("theme");
|
||||
setTheme(t);
|
||||
if (t === "dark") {
|
||||
const body = document.body;
|
||||
if (body.hasAttribute("theme-mode")) {
|
||||
body.setAttribute("theme-mode", "dark");
|
||||
}
|
||||
} else {
|
||||
const body = document.body;
|
||||
if (body.hasAttribute("theme-mode")) {
|
||||
body.setAttribute("theme-mode", "light");
|
||||
}
|
||||
}
|
||||
document.title = "Report a bug - drawDB";
|
||||
document.body.setAttribute("class", "theme");
|
||||
}, [setTheme]);
|
||||
|
||||
const changeTheme = () => {
|
||||
const body = document.body;
|
||||
const t = body.getAttribute("theme-mode");
|
||||
if (t === "dark") {
|
||||
if (body.hasAttribute("theme-mode")) {
|
||||
body.setAttribute("theme-mode", "light");
|
||||
setTheme("light");
|
||||
}
|
||||
} else {
|
||||
if (body.hasAttribute("theme-mode")) {
|
||||
body.setAttribute("theme-mode", "dark");
|
||||
setTheme("dark");
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="sm:py-3 py-5 px-6 flex justify-between items-center">
|
||||
<div className="flex items-center justify-start">
|
||||
<img
|
||||
src={theme === "dark" ? logo_dark : logo_light}
|
||||
alt="logo"
|
||||
className="me-2 sm:h-[28px] md:h-[46px]"
|
||||
/>
|
||||
<div className="ms-4 sm:text-sm xl:text-lg font-semibold">
|
||||
Report a bug
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<Button
|
||||
icon={
|
||||
theme === "dark" ? (
|
||||
<IconSun size="extra-large" />
|
||||
) : (
|
||||
<IconMoon size="extra-large" />
|
||||
)
|
||||
}
|
||||
theme="borderless"
|
||||
onClick={changeTheme}
|
||||
></Button>
|
||||
</div>
|
||||
</div>
|
||||
<hr
|
||||
className={`${
|
||||
theme === "dark" ? "border-zinc-700" : "border-zinc-300"
|
||||
} my-1`}
|
||||
/>
|
||||
<div className="grid grid-cols-12 gap-8 my-6 mx-8">
|
||||
<div className="col-span-4 card-theme p-5 rounded-md">
|
||||
<div className="flex items-center">
|
||||
<IconPaperclip />
|
||||
<div className="font-bold ms-1">Describe the bug </div>
|
||||
</div>
|
||||
<div className="text-sm mt-1">
|
||||
Please provide a clear and concise description of what the bug is.
|
||||
</div>
|
||||
<div className="flex items-center mt-3">
|
||||
<IconPaperclip />
|
||||
<div className="font-bold ms-1">Steps to reproduce the bug </div>
|
||||
</div>
|
||||
<div className="text-sm mt-1">
|
||||
Please provide the steps of how to reproduce the bug.
|
||||
</div>
|
||||
<div className="flex items-center mt-3">
|
||||
<IconPaperclip />
|
||||
<div className="font-bold ms-1">Expected behaviour</div>
|
||||
</div>
|
||||
<div className="text-sm mt-1">
|
||||
Tell us what you expected to see vs what you saw.
|
||||
</div>
|
||||
<div className="flex items-center mt-3">
|
||||
<IconPaperclip />
|
||||
<div className="font-bold ms-1">Your browser and device</div>
|
||||
</div>
|
||||
<div className="text-sm mt-1">
|
||||
What web browser and device did you encounter the bug on.
|
||||
</div>
|
||||
<div className="flex items-center mt-3">
|
||||
<IconPaperclip />
|
||||
<div className="font-bold ms-1">Screenshots</div>
|
||||
</div>
|
||||
<div className="text-sm mt-1">
|
||||
Add any relevant images if possible.
|
||||
</div>
|
||||
<div className="flex items-center justify-center my-2">
|
||||
<hr
|
||||
className={`${
|
||||
theme === "dark" ? "border-zinc-700" : "border-zinc-300"
|
||||
} flex-grow`}
|
||||
/>
|
||||
<div className="text-sm font-semibold m-2">Alternatively</div>
|
||||
<hr
|
||||
className={`${
|
||||
theme === "dark" ? "border-zinc-700" : "border-zinc-300"
|
||||
} flex-grow`}
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
block
|
||||
icon={<IconGithubLogo />}
|
||||
style={{ backgroundColor: "#239144", color: "white" }}
|
||||
onClick={() => {
|
||||
window.open(
|
||||
"https://github.com/drawdb-io/drawdb-issues/issues",
|
||||
"_self"
|
||||
);
|
||||
}}
|
||||
>
|
||||
Add an issue
|
||||
</Button>
|
||||
</div>
|
||||
<div className="col-span-8">
|
||||
<Banner
|
||||
fullMode={false}
|
||||
type="info"
|
||||
icon={null}
|
||||
closeIcon={null}
|
||||
description={
|
||||
<div>
|
||||
We value your feedback! If you've encountered a bug or issue
|
||||
while using our platform, please help us improve by reporting
|
||||
it. Your input is invaluable in making our service better.
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
<div className="p-5 mt-6 card-theme rounded-md">
|
||||
<Input placeholder="Title" />
|
||||
<RichEditor />
|
||||
<Upload
|
||||
action="#"
|
||||
beforeUpload={({ file, fileList }) => {}}
|
||||
draggable={true}
|
||||
dragMainText="Click to upload the file or drag and drop the file here"
|
||||
dragSubText="Support json"
|
||||
accept="application/json,.ddb"
|
||||
onRemove={() => {}}
|
||||
onFileChange={() => {}}
|
||||
limit={5}
|
||||
></Upload>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr
|
||||
className={`${
|
||||
theme === "dark" ? "border-zinc-700" : "border-zinc-300"
|
||||
} my-1`}
|
||||
/>
|
||||
<div className="text-center text-sm py-3">
|
||||
© 2024 <strong>drawDB</strong> - All right reserved.
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user