[RW-183] Add rough UI for research purpose review. (#260)

api/db/changelog/db.changelog-9-ws-index-fix.xml

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<databaseChangeLog
+    xmlns="http://www.liquibase.org/xml/ns/dbchangelog/1.9"
+    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+    xsi:schemaLocation="http://www.liquibase.org/xml/ns/dbchangelog/1.9
+                      http://www.liquibase.org/xml/ns/dbchangelog/dbchangelog-1.9.xsd">
+  <changeSet author="markfickett" id="changelog-9-ws-index-fix">
+    <dropIndex indexName="idx_workspace_rp" tableName="workspace"></dropIndex>
+    <createIndex indexName="idx_workspace_rp_notunique" tableName="workspace">
+      <column name="rp_review_requested"/>
+      <column name="rp_approved"/>
+    </createIndex>
+  </changeSet>
+</databaseChangeLog>

api/db/changelog/db.changelog-master.xml

@@ -16,4 +16,5 @@
   <include file="changelog/db.changelog-6.xml"/>
   <include file="changelog/db.changelog-7.xml"/>
   <include file="changelog/db.changelog-8-ws-index.xml"/>
+  <include file="changelog/db.changelog-9-ws-index-fix.xml"/>
 </databaseChangeLog>

ui/src/app/app-routing.module.ts

@@ -10,6 +10,7 @@ import {RouterModule, Routes} from '@angular/router';
 
 import {CohortEditComponent} from 'app/views/cohort-edit/component';
 import {HomePageComponent} from 'app/views/home-page/component';
+import {ReviewComponent} from 'app/views/review/component';
 import {WorkspaceComponent} from 'app/views/workspace/component';
 import {WorkspaceEditComponent} from 'app/views/workspace-edit/component';
 
@@ -32,7 +33,10 @@ const routes: Routes = [
           data: {title: 'Create Workspace', adding: true}},
   {path: 'workspace/:ns/:wsid/edit',
           component: WorkspaceEditComponent,
-          data: {title: 'Edit Workspace', adding: false}}
+          data: {title: 'Edit Workspace', adding: false}},
+  {path: 'review',
+          component: ReviewComponent,
+          data: {title: 'Review Research Purposes'}}
 ];
 
 @NgModule({

ui/src/app/app.module.ts

@@ -18,6 +18,7 @@ import {CohortEditComponent} from 'app/views/cohort-edit/component';
 import {ErrorHandlerComponent} from 'app/views/error-handler/component';
 import {ErrorHandlingService} from 'app/services/error-handling.service';
 import {HomePageComponent} from 'app/views/home-page/component';
+import {ReviewComponent} from 'app/views/review/component';
 import {SignInService} from 'app/services/sign-in.service';
 import {WorkspaceComponent} from 'app/views/workspace/component';
 import {WorkspaceEditComponent} from 'app/views/workspace-edit/component';
@@ -61,6 +62,7 @@ export function getConfiguration(signInService: SignInService): Configuration {
     CohortEditComponent,
     ErrorHandlerComponent,
     HomePageComponent,
+    ReviewComponent,
     WorkspaceComponent,
     WorkspaceEditComponent
   ],

ui/src/app/views/app/component.html

@@ -40,8 +40,8 @@
   <clr-tabs>
     <clr-tab>
       <button clrTabLink routerLink="/" routerLinkActive="active">My Workspaces</button>
-      <button *ngIf="hasAdminPermissions" clrTabLink routerLink="/todo"
-          routerLinkActive="active">Admin</button>
+      <button *ngIf="hasReviewResearchPurpose" clrTabLink routerLink="/review"
+          routerLinkActive="active">Review Research Purposes</button>
     </clr-tab>
   </clr-tabs>
   <div>

ui/src/app/views/app/component.ts

@@ -11,6 +11,7 @@ import {SignInDetails, SignInService} from 'app/services/sign-in.service';
 import {environment} from 'environments/environment';
 import {ErrorHandlingService} from 'app/services/error-handling.service';
 
+import {Authority} from 'generated';
 import {CohortsService, Configuration, ConfigurationParameters, ProfileService} from 'generated';
 
 declare const gapi: any;
@@ -23,7 +24,7 @@ declare const gapi: any;
 export class AppComponent implements OnInit {
   private baseTitle: string;
   user: Observable<SignInDetails>;
-  hasAdminPermissions = false;
+  hasReviewResearchPurpose = false;
   private _showCreateAccount = false;
 
   constructor(
@@ -62,9 +63,7 @@ export class AppComponent implements OnInit {
     });
     this.user = this.signInService.user;
     this.errorHandlingService.retryApi(this.profileService.getMe()).subscribe(profile => {
-      // TODO(RW-85) Real UI for research purpose review. This is a standin to demonstrate that
-      // we can fetch permissions from the frontend code.
-      this.hasAdminPermissions = profile.authorities.length > 0;
+      this.hasReviewResearchPurpose = profile.authorities.includes(Authority.REVIEWRESEARCHPURPOSE);
     });
   }
 

ui/src/app/views/review/component.css

@@ -0,0 +1,14 @@
+ul {
+  list-style-item: none;
+}
+li {
+  display: flex;
+  align-items: flex-end;
+  margin: 0.5rem;
+}
+h3 {
+  margin-top: 0;
+}
+.purpose, .review-buttons {
+  flex: 1;
+}

ui/src/app/views/review/component.html

@@ -0,0 +1,23 @@
+<h2>Review Research Purposes</h2>
+<div *ngIf="contentLoaded; else contentLoading">
+  <ul>
+    <li *ngFor="let ws of workspaces">
+      <div class="purpose">
+        <h3>{{ws.name}}</h3>
+        <p>by {{ws.creator}}</p>
+        <p *ngIf="ws.description">{{ws.description}}</p>
+        <p *ngIf="ws.researchPurpose.additionalNotes">{{ws.researchPurpose.additionalNotes}}</p>
+      </div>
+      <div class="review-buttons">
+        <button (click)="approve(ws, true)">Approve</button>
+        <button (click)="approve(ws, false)">Reject</button>
+      </div>
+    </li>
+  </ul>
+</div>
+<ng-template #contentLoading>
+  <div class="loading-area">
+    <span class="spinner spinner-md" style="padding-top: 1rem"></span>
+    <span class="loading-text">Loading workspaces for review...</span>
+  </div>
+</ng-template>

ui/src/app/views/review/component.ts

@@ -0,0 +1,58 @@
+import {Component, OnInit, Inject} from '@angular/core';
+import {Router, ActivatedRoute} from '@angular/router';
+import {StringFilter, Comparator} from 'clarity-angular';
+import {DOCUMENT} from '@angular/platform-browser';
+import {Observable} from 'rxjs/Observable';
+
+import {ErrorHandlingService} from 'app/services/error-handling.service';
+
+import {Workspace} from 'generated';
+import {WorkspacesService} from 'generated';
+import {ResearchPurposeReviewRequest} from 'generated';
+
+
+/**
+ * Review Workspace research purposes. Users with the REVIEW_RESEARCH_PURPOSE permission use this
+ * to view other users' workspaces for which a review has been requested, and approve/reject them.
+ */
+// TODO(RW-85) Design this UI. Current implementation is a rough sketch.
+@Component({
+  templateUrl: './component.html',
+  styleUrls: ['./component.css']
+})
+export class ReviewComponent implements OnInit {
+  workspaces: Workspace[] = [];
+  contentLoaded = false;
+
+  constructor(
+      private router: Router,
+      private errorHandlingService: ErrorHandlingService,
+      private workspacesService: WorkspacesService
+  ) {}
+
+  ngOnInit(): void {
+    this.errorHandlingService.retryApi(this.workspacesService.getWorkspacesForReview())
+        .subscribe(
+            workspacesResp => {
+              for (const ws of workspacesResp.items) {
+                this.workspaces.push(ws);
+              }
+              this.contentLoaded = true;
+            });
+  }
+
+  approve(workspace: Workspace, approved: boolean): void {
+    const request = <ResearchPurposeReviewRequest>{
+      approved: approved,
+    };
+    this.errorHandlingService.retryApi(this.workspacesService.reviewWorkspace(
+        workspace.namespace, workspace.id, request))
+        .subscribe(
+            resp => {
+              const i = this.workspaces.indexOf(workspace, 0);
+              if (i >= 0) {
+                this.workspaces.splice(i, 1);
+              }
+            });
+  }
+}