From 1838ff6f54b47e59c7b4d91c383282dac6dfcea3 Mon Sep 17 00:00:00 2001 From: thecodrr Date: Wed, 24 Nov 2021 12:40:16 +0500 Subject: [PATCH] feat: add github issue creation dialog --- apps/web/package.json | 1 + apps/web/src/common/db.js | 1 + apps/web/src/common/dialogcontroller.js | 10 ++ apps/web/src/components/dialogs/dialog.js | 1 - apps/web/src/components/dialogs/index.js | 2 + .../web/src/components/dialogs/issuedialog.js | 139 ++++++++++++++++++ apps/web/src/components/field/index.js | 2 + apps/web/src/components/icons/index.js | 6 +- apps/web/src/components/status-bar/index.js | 14 ++ apps/web/src/views/settings.js | 8 +- 10 files changed, 177 insertions(+), 7 deletions(-) create mode 100644 apps/web/src/components/dialogs/issuedialog.js diff --git a/apps/web/package.json b/apps/web/package.json index f88058569..fba16c20d 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -34,6 +34,7 @@ "nncrypto": "file:packages/nncrypto", "nncryptoworker": "file:packages/nncryptoworker", "notes-core": "npm:@streetwriters/notesnook-core@latest", + "platform": "^1.3.6", "print-js": "^1.6.0", "qclone": "^1.0.4", "rangy": "^1.3.0", diff --git a/apps/web/src/common/db.js b/apps/web/src/common/db.js index c0fbbb451..00909de88 100644 --- a/apps/web/src/common/db.js +++ b/apps/web/src/common/db.js @@ -33,6 +33,7 @@ async function initializeDatabase() { API_HOST: "http://192.168.10.29:5264", AUTH_HOST: "http://192.168.10.29:8264", SSE_HOST: "http://192.168.10.29:7264", + ISSUES_HOST: "http://192.168.10.29:2624", }); // } diff --git a/apps/web/src/common/dialogcontroller.js b/apps/web/src/common/dialogcontroller.js index 1508a4aaf..1c16b46fc 100644 --- a/apps/web/src/common/dialogcontroller.js +++ b/apps/web/src/common/dialogcontroller.js @@ -563,3 +563,13 @@ export function showAnnouncementDialog(announcement, remove) { /> )); } + +export function showIssueDialog() { + return showDialog((Dialogs, perform) => ( + { + perform(res); + }} + /> + )); +} diff --git a/apps/web/src/components/dialogs/dialog.js b/apps/web/src/components/dialogs/dialog.js index 638c98e6c..1f3dcf478 100644 --- a/apps/web/src/components/dialogs/dialog.js +++ b/apps/web/src/components/dialogs/dialog.js @@ -137,7 +137,6 @@ function Dialog(props) { opacity: props.positiveButton.disabled ? 0.7 : 1, ":hover": { bg: "bgSecondary" }, }} - autoFocus disabled={props.positiveButton.disabled || false} onClick={ !props.positiveButton.disabled diff --git a/apps/web/src/components/dialogs/index.js b/apps/web/src/components/dialogs/index.js index 71cf78949..2be9599db 100644 --- a/apps/web/src/components/dialogs/index.js +++ b/apps/web/src/components/dialogs/index.js @@ -14,6 +14,7 @@ import FeatureDialog from "./feature-dialog"; import TrackingDetailsDialog from "./trackingdetailsdialog"; import ReminderDialog from "./reminderdialog"; import AnnouncementDialog from "./announcementdialog"; +import IssueDialog from "./issuedialog"; const Dialogs = { AddNotebookDialog, @@ -32,5 +33,6 @@ const Dialogs = { ProgressDialog, ReminderDialog, AnnouncementDialog, + IssueDialog, }; export default Dialogs; diff --git a/apps/web/src/components/dialogs/issuedialog.js b/apps/web/src/components/dialogs/issuedialog.js new file mode 100644 index 000000000..593bf4907 --- /dev/null +++ b/apps/web/src/components/dialogs/issuedialog.js @@ -0,0 +1,139 @@ +import { Flex, Text } from "rebass"; +import { getAppVersion } from "../../utils/useVersion"; +import Field from "../field"; +import Dialog from "./dialog"; +import platform from "platform"; +import { useState } from "react"; +import { db } from "../../common/db"; +import { confirm } from "../../common/dialog-controller"; + +const PLACEHOLDERS = { + title: "Briefly describe what happened", + body: `Tell us more about the issue you are facing. + +For example things like: + 1. Steps to reproduce the issue + 2. Things you have tried so far + 3. etc. + +This is all optional, of course.`, +}; + +function getDeviceInfo() { + const appVersion = getAppVersion().formatted; + const os = platform.os; + const browser = `${platform.name} ${platform.version}`; + + return `App version: ${appVersion} +OS: ${os} +Browser: ${browser}`; +} +const BODY_TEMPLATE = (body) => { + const info = `**Device information:**\n${getDeviceInfo()}`; + if (!body) return info; + return `${body}\n\n${info}`; +}; + +function IssueDialog(props) { + const [isSubmitting, setIsSubmitting] = useState(false); + const [error, setError] = useState(); + + return ( + + { + e.preventDefault(); + try { + setIsSubmitting(true); + setError(); + + const formData = new FormData(e.target); + const requestData = Object.fromEntries(formData.entries()); + if (!requestData.title.trim() || !requestData.body.trim()) return; + requestData.body = BODY_TEMPLATE(requestData.body); + const url = await db.debug.report( + requestData.title, + requestData.body + ); + confirm({ + title: "Thank you for reporting!", + message: ( + <> + You can track your issue at{" "} + + {url} + + + ), + }); + } catch (e) { + setError(e.message); + } finally { + setIsSubmitting(false); + } + }} + > + + + + {getDeviceInfo() + .split("\n") + .map((t) => ( + <> + {t} +
+ + ))} + + {error && ( + + Error: {error} + + )} + + + ); +} + +export default IssueDialog; diff --git a/apps/web/src/components/field/index.js b/apps/web/src/components/field/index.js index 948bd0721..b5bd59a69 100644 --- a/apps/web/src/components/field/index.js +++ b/apps/web/src/components/field/index.js @@ -49,6 +49,7 @@ function Field(props) { validatePassword, onError, variant = "input", + as = "input", } = props; const [isPasswordVisible, setIsPasswordVisible] = useState(false); const [rules, setRules] = useState(passwordValidationRules); @@ -83,6 +84,7 @@ function Field(props) { state.user); @@ -80,6 +82,18 @@ function StatusBar() { )} + {processingStatuses?.map(({ key, status, progress }) => ( diff --git a/apps/web/src/views/settings.js b/apps/web/src/views/settings.js index a9860a4ea..da3946597 100644 --- a/apps/web/src/views/settings.js +++ b/apps/web/src/views/settings.js @@ -10,6 +10,7 @@ import AccentItem from "../components/accent-item"; import accents from "../theme/accents"; import { showEmailVerificationDialog, + showIssueDialog, showTrackingDetailsDialog, } from "../common/dialog-controller"; import { showLogoutConfirmation } from "../common/dialog-controller"; @@ -96,8 +97,8 @@ const otherItems = [ }, { title: "Report an issue", - description: "Facing an issue? Report it on our Github Repo.", - link: "https://github.com/streetwriters/notesnook/issues/new", + description: "Facing an issue? Click here to create a bug report.", + onClick: () => showIssueDialog(), }, { title: "Join our Discord community", @@ -629,7 +630,8 @@ function Settings(props) { key={item.title} variant="list" onClick={() => { - window.open(item.link, "_blank"); + if (item.onClick) item.onClick(); + else if (item.link) window.open(item.link, "_blank"); }} >