add option to select labels for bug. other style changes and bug fixes.

1 files changed, 41 insertions, 5 deletions

diff --git a/src/client/util/ReportManager.tsx b/src/client/util/ReportManager.tsx
index 223c7ff7d..ed9a4fc89 100644
--- a/src/client/util/ReportManager.tsx
+++ b/src/client/util/ReportManager.tsx
@@ -79,6 +79,10 @@ export class ReportManager extends React.Component<{}> {
     @action setBugTitle = action((title: string) => { this.bugTitle = title; });
     @observable private bugDescription = '';
     @action setBugDescription = action((description: string) => { this.bugDescription = description; });
+    @observable private bugType = '';
+    @action setBugType = action((type: string) => { this.bugType = type; });
+    @observable private bugPriority = '';
+    @action setBugPriority = action((priortiy: string) => { this.bugPriority = priortiy; });
 
     // private toGithub = false;
     // will always be set to true - no alterntive option yet
@@ -101,6 +105,13 @@ export class ReportManager extends React.Component<{}> {
     }
 
     public async reportIssue() {
+        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 req = await this.octokit.request('POST /repos/{owner}/{repo}/issues', {
@@ -110,6 +121,8 @@ export class ReportManager extends React.Component<{}> {
                 body: `${this.bugDescription} \n\nfileLinks:\n${(this.fileLinks ?? []).join('\n')}`,
                 labels: [
                     'from-dash-app',
+                    this.bugType,
+                    this.bugPriority
                 ]
             });
 
@@ -124,11 +137,13 @@ export class ReportManager extends React.Component<{}> {
             // if not going to github issues, not sure what to do yet...
         }
 
-        // if we're down here, then we're good to go.
+        // if we're down here, then we're good to go. reset the fields.
         this.setBugTitle('');
         this.setBugDescription('');
         this.toGithub = false;
-        this.setFileLinks([])
+        this.setFileLinks([]);
+        this.setBugType('');
+        this.setBugPriority('');
         this.close();
     }
 
@@ -138,6 +153,7 @@ export class ReportManager extends React.Component<{}> {
     private getServerPath = (link: any) => { return link.result.accessPaths.agnostic.server }
 
     private uploadFiles = (input: any) => {
+        // keep null while uploading
         this.setFileLinks(null);
         // upload the files to the server
         if (input.files && input.files.length !== 0) {
@@ -164,17 +180,36 @@ export class ReportManager extends React.Component<{}> {
                 <br />
                 <label>Please leave a description for the bug and how it can be recreated.</label>
                 <textarea placeholder='description' onChange={(e) => this.bugDescription = e.target.value} required/>
-                <br /><br />
+                <br />
                 {/* {<label>Send to github issues? </label>
                 <input type="checkbox" onChange={(e) => this.toGithub = e.target.checked} />
                 <br /> } */}
 
+                <label>Please label the issue</label>
+                <div className='flex-select'>
+                    <select name="bugType">
+                    <option value="" disabled selected>Type</option>
+                    <option value="bug">Bug</option>
+                    <option value="cosmetic">Poor Design or Cosmetic</option>
+                    <option value="documentation">Poor Documentation</option>
+                    </select>
+
+                    <select name="bigPriority">
+                        <option value="" disabled selected>Priority</option>
+                        <option value="priority-low">Low</option>
+                        <option value="priority-medium">Medium</option>
+                        <option value="priority-high">High</option>
+                    </select>
+                </div>
+
+
                 <div>
-                    <label>Choose file(s) to upload to show the bug (optional)</label>
+                    <label>Upload media that shows the bug (optional)</label>
                     <input type="file" name="file" multiple accept='audio/*, video/*' onChange={e => this.uploadFiles(e.target)}/>
                 </div>
                 <br />
-                <button onClick={() => this.reportIssue()} disabled={this.fileLinks === null} style={{ backgroundColor: this.fileLinks === null ? 'grey' : 'inherit'}}>{this.fileLinks === null ? 'Uploading...' : 'Submit'}</button>
+
+                <button onClick={() => this.reportIssue()} disabled={this.fileLinks === null} style={{ backgroundColor: this.fileLinks === null ? 'grey' : '' }}>{this.fileLinks === null ? 'Uploading...' : 'Submit'}</button>
             </div>)
             :
             // view issue
@@ -222,6 +257,7 @@ export class ReportManager extends React.Component<{}> {
                 </div>
 
                 <div className='report-issue-fab'>
+                    <span className='report-disclaimer' hidden={!isReportingIssue}>Note: issue reporting is not anonymous.</span>
                     <button
                         onClick={() => isReportingIssue ? this.closeReportIssueScreen() : this.showReportIssueScreen()}
                     >{isReportingIssue ? 'Cancel' : 'Report New Issue'}</button>