From 8e205268443f178a79526cf936fabf787691ec5d Mon Sep 17 00:00:00 2001 From: Sophie Zhang Date: Fri, 7 Jul 2023 21:39:38 -0400 Subject: api key, with mui --- src/client/util/ReportManager.tsx | 235 +++++++++++++++++++++++++------------- 1 file changed, 156 insertions(+), 79 deletions(-) (limited to 'src/client/util/ReportManager.tsx') diff --git a/src/client/util/ReportManager.tsx b/src/client/util/ReportManager.tsx index 4c1020455..a08ef9979 100644 --- a/src/client/util/ReportManager.tsx +++ b/src/client/util/ReportManager.tsx @@ -17,12 +17,14 @@ import { GroupManager } from './GroupManager'; import './SettingsManager.scss'; import './ReportManager.scss'; import { undoBatch } from './UndoManager'; -import { Octokit } from "@octokit/core"; +import { Octokit } from '@octokit/core'; import { CheckBox } from '../views/search/CheckBox'; 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'; const higflyout = require('@hig/flyout'); export const { anchorPoints } = higflyout; export const Flyout = higflyout.default; @@ -35,21 +37,25 @@ export class ReportManager extends React.Component<{}> { private octokit: Octokit; @observable public issues: any[] = []; - @action setIssues = action((issues: any[]) => { this.issues = issues; }); - + @action setIssues = action((issues: any[]) => { + this.issues = issues; + }); + // undefined is the default - null is if the user is making an issue @observable public selectedIssue: any = undefined; - @action setSelectedIssue = action((issue: any) => { this.selectedIssue = issue; }); + @action setSelectedIssue = action((issue: any) => { + 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())); + this.shownIssues = this.issues.filter(issue => issue.title.toLowerCase().includes(query.toLowerCase())); }); constructor(props: {}) { @@ -57,7 +63,7 @@ export class ReportManager extends React.Component<{}> { ReportManager.Instance = this; this.octokit = new Octokit({ - auth: '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' + auth: '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', }); } @@ -72,25 +78,33 @@ export class ReportManager extends React.Component<{}> { }) .catch(err => console.log(err)); } - (this.isOpen = true) + this.isOpen = true; }); @observable private bugTitle = ''; - @action setBugTitle = action((title: string) => { this.bugTitle = title; }); + @action setBugTitle = action((title: string) => { + this.bugTitle = title; + }); @observable private bugDescription = ''; - @action setBugDescription = action((description: string) => { this.bugDescription = description; }); + @action setBugDescription = action((description: string) => { + this.bugDescription = description; + }); @observable private bugType = ''; - @action setBugType = action((type: string) => { this.bugType = type; }); + @action setBugType = action((type: string) => { + this.bugType = type; + }); @observable private bugPriority = ''; - @action setBugPriority = action((priortiy: string) => { this.bugPriority = priortiy; }); + @action setBugPriority = action((priortiy: string) => { + this.bugPriority = priortiy; + }); // private toGithub = false; // will always be set to true - no alterntive option yet private toGithub = true; - private formatTitle = (title: string, userEmail: string) => `${title} - ${userEmail.replace('@brown.edu', '')}`; + private formatTitle = (title: string, userEmail: string) => `${title} - ${userEmail.replace('@brown.edu', '')}`; - public async getAllIssues() : Promise { + public async getAllIssues(): Promise { const res = await this.octokit.request('GET /repos/{owner}/{repo}/issues', { owner: 'brown-dash', repo: 'Dash-Web', @@ -105,40 +119,34 @@ export class ReportManager extends React.Component<{}> { } // turns an upload link into a servable link - // ex: + // ex: // C: /Users/dash/Documents/GitHub/Dash-Web/src/server/public/files/images/upload_8008dbc4b6424fbff14da7345bb32eb2.png // -> http://localhost:1050/files/images/upload_8008dbc4b6424fbff14da7345bb32eb2_l.png private fileLinktoServerLink = (fileLink: string) => { const serverUrl = 'https://browndash.com/'; - const regex = 'public' + const regex = 'public'; const publicIndex = fileLink.indexOf(regex) + regex.length; const finalUrl = `${serverUrl}${fileLink.substring(publicIndex + 1).replace('.', '_l.')}`; return finalUrl; - } + }; public async reportIssue() { - if (this.bugTitle === '' || this.bugDescription === '' - || this.bugType === '' || this.bugPriority === '') { + if (this.bugTitle === '' || this.bugDescription === '' || this.bugType === '' || this.bugPriority === '') { alert('Please fill out all required fields to report an issue.'); return; } if (this.toGithub) { + const formattedLinks = (this.fileLinks ?? []).map(this.fileLinktoServerLink); - const formattedLinks = (this.fileLinks ?? []).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 - ] + labels: ['from-dash-app', this.bugType, this.bugPriority], }); // 201 status means success @@ -147,8 +155,7 @@ export class ReportManager extends React.Component<{}> { // on error, don't close the modal return; } - } - else { + } else { // if not going to github issues, not sure what to do yet... } @@ -163,9 +170,13 @@ export class ReportManager extends React.Component<{}> { } @observable public fileLinks: any = []; - @action setFileLinks = action((links: any) => { this.fileLinks = links; }); + @action setFileLinks = action((links: any) => { + this.fileLinks = links; + }); - private getServerPath = (link: any) => { return link.result.accessPaths.agnostic.server } + private getServerPath = (link: any) => { + return link.result.accessPaths.agnostic.server; + }; private uploadFiles = (input: any) => { // keep null while uploading @@ -173,112 +184,177 @@ export class ReportManager extends React.Component<{}> { // upload the files to the server if (input.files && input.files.length !== 0) { const fileArray: File[] = Array.from(input.files); - (Networking.UploadFilesToServer(fileArray.map(file =>({file})))).then(links => { + Networking.UploadFilesToServer(fileArray.map(file => ({ file }))).then(links => { console.log('finshed uploading', links.map(this.getServerPath)); this.setFileLinks((links ?? []).map(this.getServerPath)); - }) + }); } - - } + }; + @observable private age = ''; - private renderIssue = (issue: any) => { + @action private setAge = (e: SelectChangeEvent) => { + this.age = e.target.value as string; + }; + + private reportIssueComponent = () => { + return ( +
+

Report an issue

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