fix: CDK uploads data to online service without end-user consent (#127)

This change ads a screen the user will see after they click the report issue menu option. This screen will both educate the user that data will get uploaded as well as provide an opportunity for them to cancel if they choose to.

src/app/editor/layout/layout.module.ts

@@ -11,6 +11,7 @@ import { ControlsConsoleModule } from '../controls-console/controls-console.modu
 import { ControlsModule } from '../controls/controls.module';
 import { NewProjectModule } from '../new-project/new-project.module';
 import { ProjectModule } from '../project/project.module';
+import { ReportIssueModule } from '../report-issue/report-issue.module';
 import { SchemaModule } from '../schema/schema.module';
 import { SharedModule } from '../shared/shared.module';
 import { MenuBarModule } from '../ui/menu-bar/menu-bar.module';
@@ -39,6 +40,7 @@ import { WorkspaceComponent } from './workspace/workspace.component';
     MenuBarModule,
     NewProjectModule,
     ProjectModule,
+    ReportIssueModule,
     SchemaModule,
     SharedModule,
     StoreModule.forFeature('layout', layoutReducer),

src/app/editor/layout/topnav/topnav.component.ts

@@ -5,14 +5,14 @@ import { map, take } from 'rxjs/operators';
 
 import { AboutModalComponent } from '../../about/about-modal/about-modal.component';
 import { RequireAuth } from '../../account/account.actions';
-import { ReportGenericError } from '../../bedrock.actions';
 import * as fromRoot from '../../bedrock.reducers';
 import { LocateWebpackConfig, RestartWebpack } from '../../controls/controls.actions';
 import { NewProjectDialogComponent } from '../../new-project/new-project-dialog/new-project-dialog.component';
 import { CloseProject, RequireLink, StartOpenProject } from '../../project/project.actions';
 import { RemoteConnectionDialogComponent } from '../../remote-connect/dialog/dialog.component';
 import { RemoteState, SetRemoteState } from '../../remote-connect/remote-connect.actions';
 import { isRemoteConnected } from '../../remote-connect/remote-connect.reducer';
+import { ReportIssueModalComponent } from '../../report-issue/report-issue-modal/report-issue-modal.component';
 import { OpenSnapshotDialogComponent } from '../../schema/open-snapshot-dialog/open-snapshot-dialog.component';
 import { SaveSnapshotDialogComponent } from '../../schema/save-snapshot-dialog/save-snapshot-dialog.component';
 import { CopyWorldSchema, QuickUploadWorldSchema } from '../../schema/schema.actions';
@@ -106,7 +106,7 @@ export class TopNavComponent {
    * Pops a window to submit an issue to the project.
    */
   public openIssue() {
-    this.store.dispatch(new ReportGenericError('My Error Report', 'Enter your details here'));
+    this.dialog.open(ReportIssueModalComponent);
   }
 
   /**

src/app/editor/report-issue/report-issue-modal/report-issue-modal.component.html

@@ -0,0 +1,13 @@
+<div mat-dialog-content>
+  <div class="header layout-row layout-align-start-center">
+    <h1>
+      Report Issue
+      <small>Thank you for taking the time to report an issue. When you click the the Report Issue button, Microsoft will send information about your local development environment to assist with troubleshooting.</small>
+    </h1>
+  </div>
+</div>
+
+<div mat-dialog-actions>
+  <button mat-button (click)="reportIssue()">Report Issue</button>
+  <button mat-button (click)="dialog.close()">Close</button>
+</div>

src/app/editor/report-issue/report-issue-modal/report-issue-modal.component.scss

@@ -0,0 +1,12 @@
+@import '../../../assets/styles/declarations';
+
+.header {
+  h1 {
+    font-weight: normal;
+
+    small {
+      display: block;
+      font-size: 0.4em;
+    }
+  }
+}

src/app/editor/report-issue/report-issue-modal/report-issue-modal.component.ts

@@ -0,0 +1,25 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { MatDialogRef } from '@angular/material';
+import { Store } from '@ngrx/store';
+import { ReportGenericError } from '../../bedrock.actions';
+import * as fromRoot from '../../bedrock.reducers';
+
+/**
+ * The ReportIssueModalComponent lets the user know that Microsoft will
+ * send diagnostic data from their local dev environment to assist with
+ * troubleshooting.
+ */
+@Component({
+  selector: 'report-issue-modal',
+  templateUrl: './report-issue-modal.component.html',
+  styleUrls: ['./report-issue-modal.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ReportIssueModalComponent {
+  constructor(private readonly dialog: MatDialogRef<void>, private readonly store: Store<fromRoot.IState>) {}
+
+  public reportIssue() {
+    this.store.dispatch(new ReportGenericError('My Error Report', 'Enter your details here'));
+    this.dialog.close();
+  }
+}

src/app/editor/report-issue/report-issue.module.ts

@@ -0,0 +1,16 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { MomentModule } from 'angular2-moment';
+
+import { MatButtonModule, MatDialogModule } from '@angular/material';
+import { ReportIssueModalComponent } from './report-issue-modal/report-issue-modal.component';
+
+/**
+ * Module that displays the "Report Issue" dialog.
+ */
+@NgModule({
+  imports: [MomentModule, CommonModule, MatButtonModule, MatDialogModule],
+  declarations: [ReportIssueModalComponent],
+  entryComponents: [ReportIssueModalComponent],
+})
+export class ReportIssueModule {}