From 5f44a6cf1f16023a4c39872f2ccfc129c65ea812 Mon Sep 17 00:00:00 2001 From: James Hu <51237606+jameshu111@users.noreply.github.com> Date: Mon, 26 Jun 2023 10:37:11 -0400 Subject: temp working version --- package.json | 1 + 1 file changed, 1 insertion(+) (limited to 'package.json') diff --git a/package.json b/package.json index 6cd271c96..3a3d17517 100644 --- a/package.json +++ b/package.json @@ -130,6 +130,7 @@ "webpack-hot-middleware": "^2.25.1" }, "dependencies": { + "@azure/storage-blob": "^12.14.0", "@emotion/react": "^11.11.0", "@emotion/styled": "^11.11.0", "@ffmpeg/core": "0.10.0", -- cgit v1.2.3-70-g09d2 From 5a1c452941032c8a5c468e54674450f452d8bda9 Mon Sep 17 00:00:00 2001 From: James Hu <51237606+jameshu111@users.noreply.github.com> Date: Thu, 6 Jul 2023 11:22:44 -0400 Subject: flag with comments --- package.json | 2 +- src/client/documents/Documents.ts | 3 ++- src/server/DashUploadUtils.ts | 24 ++++++++++++++++++------ 3 files changed, 21 insertions(+), 8 deletions(-) (limited to 'package.json') diff --git a/package.json b/package.json index 3a3d17517..2b37d5171 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,7 @@ "start-release": "cross-env RELEASE=true NODE_OPTIONS=--max_old_space_size=4096 ts-node-dev -- src/server/index.ts", "start": "cross-env NODE_OPTIONS=--max_old_space_size=4096 ts-node-dev --debug --transpile-only -- src/server/index.ts", "oldstart": "cross-env NODE_OPTIONS=--max_old_space_size=4096 ts-node-dev --debug -- src/server/index.ts", - "debug": "cross-env NODE_OPTIONS=--max_old_space_size=8192 ts-node-dev --transpile-only --inspect -- src/server/index.ts", + "debug": "cross-env USE_AZURE=true NODE_OPTIONS=--max_old_space_size=8192 ts-node-dev --transpile-only --inspect -- src/server/index.ts", "monitor": "cross-env MONITORED=true NODE_OPTIONS=--max_old_space_size=4096 ts-node src/server/index.ts", "build": "cross-env NODE_OPTIONS=--max_old_space_size=8192 webpack --env production", "test": "mocha -r ts-node/register test/**/*.ts", diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 93043e517..43c9d2e7a 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -1737,7 +1737,8 @@ export namespace DocUtils { } const full = { ...options, _width: 400, title: name }; // const pathname = Utils.prepend(result.accessPaths.agnostic.client); - const pathname = result.accessPaths.azure.client; + const pathname = result.accessPaths.agnostic.client; + // const pathname = result.accessPaths.azure.client; const doc = await DocUtils.DocumentFromType(type, pathname, full, overwriteDoc); if (doc) { const proto = Doc.GetProto(doc); diff --git a/src/server/DashUploadUtils.ts b/src/server/DashUploadUtils.ts index 7abefed8a..74c4786b6 100644 --- a/src/server/DashUploadUtils.ts +++ b/src/server/DashUploadUtils.ts @@ -43,6 +43,10 @@ function isLocal() { return /Dash-Web[0-9]*[\\\/]src[\\\/]server[\\\/]public[\\\/](.*)/; } +function usingAzure(){ + return process.env.USE_AZURE === 'true'; +} + export namespace DashUploadUtils { export interface Size { width: number; @@ -183,6 +187,8 @@ export namespace DashUploadUtils { } export async function upload(file: File, overwriteGuid?: string): Promise { + const isAzureOn = usingAzure(); + console.log("Azure usage: ", isAzureOn); const { type, path, name } = file; const types = type?.split('/') ?? []; uploadProgress.set(overwriteGuid ?? name, 'uploading'); // If the client sent a guid it uses to track upload progress, use that guid. Otherwise, use the file's name. @@ -486,11 +492,15 @@ export namespace DashUploadUtils { const { images } = Directory; const information: Upload.ImageInformation = { accessPaths: { - agnostic: getAccessPaths(images, resolved), - azure: { + // agnostic: getAccessPaths(images, resolved), + // azure: { + // client: `https://dashblobstore.blob.core.windows.net/dashmedia/${filename}`, + // server: `https://dashblobstore.blob.core.windows.net/dashmedia/${filename}` + // } + agnostic: usingAzure() ? { client: `https://dashblobstore.blob.core.windows.net/dashmedia/${filename}`, server: `https://dashblobstore.blob.core.windows.net/dashmedia/${filename}` - } + } : getAccessPaths(images, resolved) }, ...metadata, }; @@ -540,7 +550,7 @@ export namespace DashUploadUtils { }; export async function outputResizedImages(streamProvider: () => Stream | Promise, outputFileName: string, outputDirectory: string, originalFilename?: string, contentType?: string) { - console.log("resized original filename: ", originalFilename); + const start = Date.now(); const writtenFiles: { [suffix: string]: string } = {}; for (const { resizer, suffix } of resizers(path.extname(outputFileName))) { const outputPath = path.resolve(outputDirectory, (writtenFiles[suffix] = InjectSize(outputFileName, suffix))); @@ -552,13 +562,15 @@ export namespace DashUploadUtils { if (resizer) { readStream = readStream.pipe(resizer.withMetadata()); } - if(originalFilename && contentType) { - AzureManager.UploadBlobStream(readStream as Readable, InjectSize(originalFilename, suffix), contentType); + if(contentType && usingAzure()) { + // AzureManager.UploadBlobStream(readStream as Readable, InjectSize(originalFilename, suffix), contentType); AzureManager.UploadBlobStream(readStream as Readable, InjectSize(outputFileName, suffix), contentType); } readStream.pipe(createWriteStream(outputPath)).on('close', resolve).on('error', reject); }); } + const end = Date.now(); + console.log(`Time taken: ${end - start}ms`); return writtenFiles; } -- cgit v1.2.3-70-g09d2 From c8eb4ac0242181744d3268b1052582b61dbaf477 Mon Sep 17 00:00:00 2001 From: Sophie Zhang Date: Sat, 8 Jul 2023 02:58:04 -0400 Subject: feat: updated github key and ui --- package-lock.json | 82 +++ package.json | 2 + src/client/theme.ts | 47 +- src/client/util/ReportManager.scss | 383 +++++++++++--- src/client/util/ReportManager.tsx | 478 ++++++++++++------ src/client/util/reportManagerSchema.ts | 877 +++++++++++++++++++++++++++++++++ 6 files changed, 1614 insertions(+), 255 deletions(-) create mode 100644 src/client/util/reportManagerSchema.ts (limited to 'package.json') diff --git a/package-lock.json b/package-lock.json index 895dec389..5b0c4e2f6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3871,6 +3871,11 @@ "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz", "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==" }, + "attr-accept": { + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-2.2.2.tgz", + "integrity": "sha512-7prDjvt9HmqiZ0cl5CRjtS84sEyhsHP2coDkaZKRKVfCDo9s7iw7ChVmar78Gu9pC4SoR/28wFu/G5JJhTnqEg==" + }, "available-typed-arrays": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz", @@ -9291,6 +9296,14 @@ "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz", "integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA==" }, + "file-selector": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.6.0.tgz", + "integrity": "sha512-QlZ5yJC0VxHxQQsQhXvBaC7VRJ2uaxTf+Tfpu4Z/OcVQJVpZO+DGU0rkoVW5ce2SccxugvpBJoMvUs59iILYdw==", + "requires": { + "tslib": "^2.4.0" + } + }, "file-uri-to-path": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz", @@ -19757,6 +19770,16 @@ "prop-types": "^15.8.1" } }, + "react-dropzone": { + "version": "14.2.3", + "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-14.2.3.tgz", + "integrity": "sha512-O3om8I+PkFKbxCukfIR3QAGftYXDZfOE2N1mr/7qebQJHs7U+/RSL/9xomJNpRg9kM5h9soQSdf0Gc7OHF5Fug==", + "requires": { + "attr-accept": "^2.2.2", + "file-selector": "^0.6.0", + "prop-types": "^15.8.1" + } + }, "react-event-listener": { "version": "0.6.6", "resolved": "https://registry.npmjs.org/react-event-listener/-/react-event-listener-0.6.6.tgz", @@ -19880,6 +19903,55 @@ "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" }, + "react-loader-spinner": { + "version": "5.3.4", + "resolved": "https://registry.npmjs.org/react-loader-spinner/-/react-loader-spinner-5.3.4.tgz", + "integrity": "sha512-G2vw4ssX+RDZ/vfaeva06yfNqyFViv/u+tVZ3kFLy5TKNlNx2DbuwreBSpRtPespQA+VxinxUJsigwLwG9erOg==", + "requires": { + "react-is": "^18.2.0", + "styled-components": "^5.3.5", + "styled-tools": "^1.7.2" + }, + "dependencies": { + "css-to-react-native": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz", + "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==", + "requires": { + "camelize": "^1.0.0", + "css-color-keywords": "^1.0.0", + "postcss-value-parser": "^4.0.2" + } + }, + "postcss-value-parser": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", + "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==" + }, + "react-is": { + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz", + "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==" + }, + "styled-components": { + "version": "5.3.11", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.11.tgz", + "integrity": "sha512-uuzIIfnVkagcVHv9nE0VPlHPSCmXIUGKfJ42LNjxCCTDTL5sgnJ8Z7GZBq0EnLYGln77tPpEpExt2+qa+cZqSw==", + "requires": { + "@babel/helper-module-imports": "^7.0.0", + "@babel/traverse": "^7.4.5", + "@emotion/is-prop-valid": "^1.1.0", + "@emotion/stylis": "^0.8.4", + "@emotion/unitless": "^0.7.4", + "babel-plugin-styled-components": ">= 1.12.0", + "css-to-react-native": "^3.0.0", + "hoist-non-react-statics": "^3.0.0", + "shallowequal": "^1.1.0", + "supports-color": "^5.5.0" + } + } + } + }, "react-loading": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/react-loading/-/react-loading-2.0.3.tgz", @@ -21215,6 +21287,11 @@ "resolved": "https://registry.npmjs.org/shallow-equal/-/shallow-equal-1.2.1.tgz", "integrity": "sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA==" }, + "shallowequal": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz", + "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==" + }, "sharp": { "version": "0.23.4", "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.23.4.tgz", @@ -22232,6 +22309,11 @@ } } }, + "styled-tools": { + "version": "1.7.2", + "resolved": "https://registry.npmjs.org/styled-tools/-/styled-tools-1.7.2.tgz", + "integrity": "sha512-IjLxzM20RMwAsx8M1QoRlCG/Kmq8lKzCGyospjtSXt/BTIIcvgTonaxQAsKnBrsZNwhpHzO9ADx5te0h76ILVg==" + }, "stylis": { "version": "4.1.3", "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.1.3.tgz", diff --git a/package.json b/package.json index 6cd271c96..39f70ab66 100644 --- a/package.json +++ b/package.json @@ -288,9 +288,11 @@ "react-compound-slider": "^2.5.0", "react-datepicker": "^3.8.0", "react-dom": "^18.2.0", + "react-dropzone": "^14.2.3", "react-grid-layout": "^1.3.4", "react-icons": "^4.3.1", "react-jsx-parser": "^1.29.0", + "react-loader-spinner": "^5.3.4", "react-loading": "^2.0.3", "react-markdown": "^8.0.3", "react-measure": "^2.5.2", diff --git a/src/client/theme.ts b/src/client/theme.ts index 57be370cc..f0a11fe6e 100644 --- a/src/client/theme.ts +++ b/src/client/theme.ts @@ -4,39 +4,20 @@ import { createTheme } from '@mui/material/styles'; export const theme = createTheme({ palette: { primary: { - main: 'rgb(0, 149, 246)', + main: '#4476f7', + }, + }, + components: { + MuiButton: { + styleOverrides: { + root: { + fontSize: '14px', + boxShadow: 'none', + '&:hover': { + boxShadow: 'none', + }, + }, + }, }, }, - // components: { - // MuiButton: { - // styleOverrides: { - // root: { - // fontSize: '14px', - // boxShadow: 'none', - // '&:hover': { - // boxShadow: 'none', - // scale: 1, - // }, - // }, - // }, - // }, - // MuiTextField: { - // styleOverrides: { - // root: { - // '& .MuiInputBase-input': { - // fontSize: '16px', - // }, - // '& .MuiInputLabel-root': { - // fontSize: '16px', - // }, - // '& .MuiInputLabel-shrink': { - // fontSize: '16px', - // }, - // '& .MuiFormHelperText-root': { - // fontSize: '16px', - // }, - // }, - // }, - // }, - // }, }); diff --git a/src/client/util/ReportManager.scss b/src/client/util/ReportManager.scss index 969e0de74..4ff86fd9c 100644 --- a/src/client/util/ReportManager.scss +++ b/src/client/util/ReportManager.scss @@ -1,102 +1,349 @@ @import '../views/global/globalCssVariables'; +// header + +.report-header { + display: flex; + justify-content: space-between; + align-items: center; + + h2 { + margin: 0; + padding: 0; + font-size: 24px; + } +} + +.report-header-vertical { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 4px; + + h2 { + margin: 0; + padding: 0; + padding-bottom: 8px; + font-size: 24px; + } +} + +// Report + .report-issue { + width: 45vw; padding: 16px; + padding-top: 32px; display: flex; flex-direction: column; - gap: 1rem; + gap: 16px; background-color: #ffffff; text-align: left; + position: relative; - h2 { - font-size: 24px; + .report-label { + font-size: 14px; + font-weight: 400; + color: #747474; + } + + .report-section { + display: flex; + flex-direction: column; + } + + .report-textarea { + width: 100%; + height: 80px; + padding: 8px; + resize: none; + } + + .report-selects { + display: flex; + gap: 16px; + + .report-select { + flex: 1; + padding: 8px; + border-color: #c6c6c6; + + .report-opt { + padding: 8px; + } + } } } -// --------------------------------------- -.issue-list-wrapper { - position: relative; - min-width: 250px; - background-color: $light-blue; - overflow-y: scroll; +.report-input { + border: none; + outline: none; + border-bottom: 1px solid #c6c6c6; + padding: 8px; + padding-left: 0; + transition: all 0.2s ease; + + &:hover { + border-bottom-color: #7f7f7f; + } + &:focus { + border-bottom-color: #4476f7; + } } -.issue-list { +// View issues + +.view-issues { + width: 65vw; + min-width: 600px; display: flex; - align-items: center; - justify-content: space-between; - padding: 5px; - margin: 5px; - border-radius: 5px; - border: 1px solid grey; - background-color: lightgoldenrodyellow; + gap: 16px; + height: 100%; + + .left { + height: 100%; + flex: 1; + padding: 16px; + display: flex; + flex-direction: column; + gap: 16px; + background-color: #ffffff; + text-align: left; + position: relative; + + .issues { + position: relative; + flex-grow: 1; + overflow-y: auto; + overflow-x: hidden; + display: flex; + flex-direction: column; + gap: 16px; + } + } + + .right { + padding: 16px; + height: 100%; + overflow-y: auto; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + flex: 1; + } } -// issue should pop up when the user hover over the issue -.issue-list:hover { - box-shadow: 2px; +// Issue + +.issue { cursor: pointer; - border: 3px solid #252b33; + padding: 16px; + background-color: #ffffff; + border: 1px solid #d3d3d3; + transition: all 0.1s ease; + display: flex; + flex-direction: column; + gap: 8px; + border-radius: 8px; + transition: all 0.2s ease; + // box-shadow: 0 0 8px #d0d0d07c; + + .issue-label { + cursor: pointer; + font-size: 14px; + font-weight: 400; + letter-spacing: 1px; + color: #7f7f7f; + } + + .issue-title { + font-size: 16px; + font-weight: 500; + padding: 0; + margin: 0; + color: #4476f7; + } + + &:hover { + background-color: #4476f7; + border-color: #4476f7; + color: #ffffff; + + .issue-label { + color: #ffffff; + } + + .issue-title { + color: #ffffff; + } + } } -.issue-content { - background-color: white; - padding: 10px; - flex: 1 1 auto; - overflow-y: scroll; +// Dropzone + +.dropzone { + padding: 2rem; + border-radius: 0.5rem; + border: 2px dashed #ebebeb; + + .dropzone-instructions { + display: flex; + flex-direction: column; + align-items: center; + gap: 16px; + color: #7f7f7f; + + p { + text-align: center; + } + } } -.issue-title { - font-size: 20px; - font-weight: 600; - color: black; +.files { + font-size: 14px; + color: #7f7f7f; + + .file-list { + width: 100%; + list-style-type: none; + display: flex; + overflow-x: auto; + gap: 16px; + margin: 0; + padding: 0; + + .file-name { + padding: 8px 12px; + display: flex; + align-items: center; + gap: 16px; + white-space: nowrap; + } + } } -.issue-body { - padding: 0 10px; +// Detailed issue view + +.issue-view { + height: 100%; width: 100%; + display: flex; + flex-direction: column; + gap: 16px; + background-color: #ffffff; text-align: left; -} + position: relative; + overflow: auto; -.issue-body > * { - margin-top: 5px; -} + .issue-label { + color: #7f7f7f; -.issue-body img, -.issue-body video { - display: block; - max-width: 100%; -} + .issue-link { + cursor: pointer; + color: #4476f7; + } + } -.report-issue-fab { - position: fixed; - bottom: 20px; - right: 20px; - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; -} + .issue-title { + font-size: 24px; + margin: 0; + padding: 0; + } -.loading-center { - margin: auto 0; + .issue-content { + font-size: 14px; + color: #7f7f7f; + } } -.settings-content label { - margin-top: 10px; -} +// Old code -.report-disclaimer { - font-size: 8px; - color: grey; - padding-right: 50px; - font-style: italic; - text-align: left; -} +// <----------------------------------------------------------------------------> -.flex-select { - display: flex; - align-items: center; - justify-content: center; - gap: 10px; -} +// .issue-list-wrapper { +// position: relative; +// min-width: 250px; +// background-color: $light-blue; +// overflow-y: scroll; +// } + +// .issue-list { +// display: flex; +// align-items: center; +// justify-content: space-between; +// padding: 5px; +// margin: 5px; +// border-radius: 5px; +// border: 1px solid grey; +// background-color: lightgoldenrodyellow; +// } + +// // issue should pop up when the user hover over the issue +// .issue-list:hover { +// box-shadow: 2px; +// cursor: pointer; +// border: 3px solid #252b33; +// } + +// .issue-content { +// background-color: white; +// padding: 10px; +// flex: 1 1 auto; +// overflow-y: scroll; +// } + +// .issue-title { +// font-size: 20px; +// font-weight: 600; +// color: black; +// } + +// .issue-body { +// padding: 0 10px; +// width: 100%; +// text-align: left; +// } + +// .issue-body > * { +// margin-top: 5px; +// } + +// .issue-body img, +// .issue-body video { +// display: block; +// max-width: 100%; +// } + +// .report-issue-fab { +// position: fixed; +// bottom: 20px; +// right: 20px; +// display: flex; +// align-items: center; +// justify-content: center; +// cursor: pointer; +// } + +// .loading-center { +// margin: auto 0; +// } + +// .settings-content label { +// margin-top: 10px; +// } + +// .report-disclaimer { +// font-size: 8px; +// color: grey; +// padding-right: 50px; +// font-style: italic; +// text-align: left; +// } + +// .flex-select { +// display: flex; +// align-items: center; +// justify-content: center; +// gap: 10px; +// } diff --git a/src/client/util/ReportManager.tsx b/src/client/util/ReportManager.tsx index a08ef9979..3eebb8f15 100644 --- a/src/client/util/ReportManager.tsx +++ b/src/client/util/ReportManager.tsx @@ -1,62 +1,82 @@ -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { action, computed, observable, runInAction } from 'mobx'; -import { observer } from 'mobx-react'; -import * as React from 'react'; import { ColorState, SketchPicker } from 'react-color'; -import { Doc } from '../../fields/Doc'; import { Id } from '../../fields/FieldSymbols'; import { BoolCast, Cast, StrCast } from '../../fields/Types'; import { addStyleSheet, addStyleSheetRule, Utils } from '../../Utils'; import { GoogleAuthenticationManager } from '../apis/GoogleAuthenticationManager'; import { DocServer } from '../DocServer'; -import { Networking } from '../Network'; -import { MainViewModal } from '../views/MainViewModal'; import { FontIconBox } from '../views/nodes/button/FontIconBox'; import { DragManager } from './DragManager'; import { GroupManager } from './GroupManager'; +import { CheckBox } from '../views/search/CheckBox'; +import { undoBatch } from './UndoManager'; +import * as React from 'react'; import './SettingsManager.scss'; import './ReportManager.scss'; -import { undoBatch } from './UndoManager'; +import { action, computed, observable, runInAction } from 'mobx'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { BsX } from 'react-icons/bs'; +import { BiX } from 'react-icons/bi'; +import { AiOutlineUpload } from 'react-icons/ai'; +import { HiOutlineArrowLeft } from 'react-icons/hi'; +import { Issue } from './reportManagerSchema'; +import { observer } from 'mobx-react'; +import { Doc } from '../../fields/Doc'; +import { Networking } from '../Network'; +import { MainViewModal } from '../views/MainViewModal'; import { Octokit } from '@octokit/core'; -import { CheckBox } from '../views/search/CheckBox'; +import { Button, IconButton } from '@mui/material'; +import { Oval } from 'react-loader-spinner'; +import Dropzone from 'react-dropzone'; import ReactLoading from 'react-loading'; import ReactMarkdown from 'react-markdown'; import rehypeRaw from 'rehype-raw'; import remarkGfm from 'remark-gfm'; -import { Button, MenuItem, Select, SelectChangeEvent, TextField } from '@mui/material'; -import { FormControl, InputLabel } from '@material-ui/core'; +import { theme } from '../theme'; const higflyout = require('@hig/flyout'); export const { anchorPoints } = higflyout; export const Flyout = higflyout.default; +enum ViewState { + VIEW, + CREATE, +} + @observer export class ReportManager extends React.Component<{}> { public static Instance: ReportManager; @observable private isOpen = false; + @observable private query = ''; + @action private setQuery = (q: string) => { + this.query = q; + }; + private octokit: Octokit; - @observable public issues: any[] = []; - @action setIssues = action((issues: any[]) => { - this.issues = issues; + @observable viewState: ViewState = ViewState.VIEW; + @action private setViewState = (state: ViewState) => { + this.viewState = state; + }; + @observable submitting: boolean = false; + @action private setSubmitting = (submitting: boolean) => { + this.submitting = submitting; + }; + + @observable + public shownIssues: Issue[] = []; + @action setShownIssues = action((issues: Issue[]) => { + this.shownIssues = issues; }); - // undefined is the default - null is if the user is making an issue - @observable public selectedIssue: any = undefined; - @action setSelectedIssue = action((issue: any) => { + @observable selectedIssue: Issue | undefined = undefined; + @action setSelectedIssue = action((issue: Issue | undefined) => { this.selectedIssue = issue; }); - // only get the open issues - @observable public shownIssues = this.issues.filter(issue => issue.state === 'open'); - - public updateIssueSearch = action((query: string = '') => { - if (query === '') { - this.shownIssues = this.issues.filter(issue => issue.state === 'open'); - return; - } - this.shownIssues = this.issues.filter(issue => issue.title.toLowerCase().includes(query.toLowerCase())); - }); + @observable private mediaFiles: File[] = []; + @action private setMediaFiles = (files: File[]) => { + this.mediaFiles = files; + }; constructor(props: {}) { super(props); @@ -68,17 +88,18 @@ export class ReportManager extends React.Component<{}> { } public close = action(() => (this.isOpen = false)); - public open = action(() => { - if (this.issues.length === 0) { - // load in the issues if not already loaded - this.getAllIssues() - .then(issues => { - this.setIssues(issues); - this.updateIssueSearch(); - }) - .catch(err => console.log(err)); - } + public open = action(async () => { this.isOpen = true; + if (this.shownIssues.length === 0) { + try { + // load in the issues if not already loaded + const issues = (await this.getAllIssues()) as Issue[]; + this.setShownIssues(issues.filter(issue => issue.state === 'open')); + // this.updateIssueSearch(); + } catch (err) { + console.log(err); + } + } }); @observable private bugTitle = ''; @@ -98,6 +119,14 @@ export class ReportManager extends React.Component<{}> { this.bugPriority = priortiy; }); + private showReportIssueScreen = () => { + this.setSelectedIssue(undefined); + }; + + private closeReportIssueScreen = () => { + this.setSelectedIssue(undefined); + }; + // private toGithub = false; // will always be set to true - no alterntive option yet private toGithub = true; @@ -133,30 +162,31 @@ export class ReportManager extends React.Component<{}> { }; public async reportIssue() { + console.log(this.bugTitle); + console.log('reporting issue'); if (this.bugTitle === '' || this.bugDescription === '' || this.bugType === '' || this.bugPriority === '') { alert('Please fill out all required fields to report an issue.'); return; } + this.setSubmitting(true); - if (this.toGithub) { - const formattedLinks = (this.fileLinks ?? []).map(this.fileLinktoServerLink); + console.log('to github'); + const links = await this.uploadFilesToServer(); + const formattedLinks = (links ?? []).map(this.fileLinktoServerLink); - const req = await this.octokit.request('POST /repos/{owner}/{repo}/issues', { - owner: 'brown-dash', - repo: 'Dash-Web', - title: this.formatTitle(this.bugTitle, Doc.CurrentUserEmail), - body: `${this.bugDescription} \n\nfiles:\n${formattedLinks.join('\n')}`, - labels: ['from-dash-app', this.bugType, this.bugPriority], - }); + const req = await this.octokit.request('POST /repos/{owner}/{repo}/issues', { + owner: 'brown-dash', + repo: 'Dash-Web', + title: this.formatTitle(this.bugTitle, Doc.CurrentUserEmail), + body: `${this.bugDescription} \n\nfiles:\n${formattedLinks.join('\n')}`, + labels: ['from-dash-app', this.bugType, this.bugPriority], + }); - // 201 status means success - if (req.status !== 201) { - alert('Error creating issue on github.'); - // on error, don't close the modal - return; - } - } else { - // if not going to github issues, not sure what to do yet... + // 201 status means success + if (req.status !== 201) { + alert('Error creating issue on github.'); + // on error, don't close the modal + return; } // if we're down here, then we're good to go. reset the fields. @@ -166,7 +196,9 @@ export class ReportManager extends React.Component<{}> { this.setFileLinks([]); this.setBugType(''); this.setBugPriority(''); - this.close(); + this.setSubmitting(false); + alert('Successfully submitted issue.'); + // this.close(); } @observable public fileLinks: any = []; @@ -191,61 +223,216 @@ export class ReportManager extends React.Component<{}> { } }; - @observable private age = ''; + private uploadFilesToServer = async () => { + const links = await Networking.UploadFilesToServer(this.mediaFiles.map(file => ({ file }))); + console.log('finshed uploading', links.map(this.getServerPath)); + return (links ?? []).map(this.getServerPath); + // this.setFileLinks((links ?? []).map(this.getServerPath)); + }; - @action private setAge = (e: SelectChangeEvent) => { - this.age = e.target.value as string; + private onDrop = (files: File[]) => { + this.setMediaFiles(files); + }; + + private reportComponent = () => { + if (this.viewState === ViewState.VIEW) { + return this.viewIssuesComponent(); + } else { + return this.reportIssueComponent(); + } + }; + + private viewIssuesComponent = () => { + return ( +
+
+
+

Open Issues

+ +
+ { + this.setQuery(e.target.value); + }} + required + /> +
+ {this.shownIssues + .filter(issue => issue.title.toLowerCase().includes(this.query)) + .map(issue => ( + { + this.setSelectedIssue(issue); + }} + /> + ))} +
+
+
{this.selectedIssue ? :
No issue selected
}
+ + + +
+ ); }; private reportIssueComponent = () => { return (
-

Report an issue

- this.setBugTitle(e.target.value)} - /> - -