From 75e74b5880bcc00871b162c11176273481a6335d Mon Sep 17 00:00:00 2001
From: Gersh Payzer <gershp@microsoft.com>
Date: Tue, 5 Jun 2018 10:27:41 -0700
Subject: [PATCH] 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        |  2 ++
 .../editor/layout/topnav/topnav.component.ts  |  4 +--
 .../report-issue-modal.component.html         | 13 ++++++++++
 .../report-issue-modal.component.scss         | 12 +++++++++
 .../report-issue-modal.component.ts           | 25 +++++++++++++++++++
 .../report-issue/report-issue.module.ts       | 16 ++++++++++++
 6 files changed, 70 insertions(+), 2 deletions(-)
 create mode 100644 src/app/editor/report-issue/report-issue-modal/report-issue-modal.component.html
 create mode 100644 src/app/editor/report-issue/report-issue-modal/report-issue-modal.component.scss
 create mode 100644 src/app/editor/report-issue/report-issue-modal/report-issue-modal.component.ts
 create mode 100644 src/app/editor/report-issue/report-issue.module.ts

diff --git a/src/app/editor/layout/layout.module.ts b/src/app/editor/layout/layout.module.ts
index bde9560..21d8d99 100644
--- a/src/app/editor/layout/layout.module.ts
+++ b/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),
diff --git a/src/app/editor/layout/topnav/topnav.component.ts b/src/app/editor/layout/topnav/topnav.component.ts
index e7737a6..55ffffc 100644
--- a/src/app/editor/layout/topnav/topnav.component.ts
+++ b/src/app/editor/layout/topnav/topnav.component.ts
@@ -5,7 +5,6 @@ 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';
@@ -13,6 +12,7 @@ import { CloseProject, RequireLink, StartOpenProject } from '../../project/proje
 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);
   }
 
   /**
diff --git a/src/app/editor/report-issue/report-issue-modal/report-issue-modal.component.html b/src/app/editor/report-issue/report-issue-modal/report-issue-modal.component.html
new file mode 100644
index 0000000..f0e7a37
--- /dev/null
+++ b/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>
diff --git a/src/app/editor/report-issue/report-issue-modal/report-issue-modal.component.scss b/src/app/editor/report-issue/report-issue-modal/report-issue-modal.component.scss
new file mode 100644
index 0000000..33426cb
--- /dev/null
+++ b/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;
+    }
+  }
+}
diff --git a/src/app/editor/report-issue/report-issue-modal/report-issue-modal.component.ts b/src/app/editor/report-issue/report-issue-modal/report-issue-modal.component.ts
new file mode 100644
index 0000000..27a962a
--- /dev/null
+++ b/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();
+  }
+}
diff --git a/src/app/editor/report-issue/report-issue.module.ts b/src/app/editor/report-issue/report-issue.module.ts
new file mode 100644
index 0000000..9ebb530
--- /dev/null
+++ b/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 {}