Implement a user setting to hide draft PRs.

src/app/app.component.html

@@ -21,6 +21,13 @@
                   </label>
                   <span id="allProjectsHelp" class="help-block">Show PRs from repos across all projects.</span>
                 </div>
+                <div class="form-check">
+                  <label class="form-check-label">
+                    <input type="checkbox" class="form-check-input" id="inputHideDraftPRs" [(ngModel)]="hideDraftPRs" (ngModelChange)="onHideDraftPRsChanged($event)" name="hideDraftPRs" aria-describedby="hideDraftPRsHelp">
+                    Hide Draft PRs
+                  </label>
+                  <span id="hideDraftPRsHelp" class="help-block">Hide pull requests marked as draft.</span>
+                </div>
               </div>
             </li>
           </form>

src/app/app.component.ts

@@ -48,6 +48,8 @@ export class AppComponent implements OnInit {
 
     public allProjects: boolean = false;
 
+    public hideDraftPRs: boolean = false;
+
     public loading: boolean = false;
 
     public layout: Layout;
@@ -75,11 +77,13 @@ export class AppComponent implements OnInit {
             const filterPromise = this.settings.getRepoFilter();
             const formatPromise = this.settings.getDateFormat();
             const allProjectsPromise = this.settings.getShowAllProjects();
+            const hideDraftPRsPromise = this.settings.getHideDraftPRs();
             const currentUserPromise = this.tfsService.getCurrentUser();
 
             this.filteredRepoIds = await filterPromise;
             this.dateFormat = await formatPromise;
             this.allProjects = await allProjectsPromise;
+            this.hideDraftPRs = await hideDraftPRsPromise;
             this.currentUser = await currentUserPromise;
             await this.reloadPullRequests();
         } finally {
@@ -106,6 +110,7 @@ export class AppComponent implements OnInit {
             this.pullRequests = [];
 
             this.tfsService.getPullRequests(this.allProjects)
+                .filter((pr) => !(this.hideDraftPRs && pr.isDraft))
                 .map((pr) => new PullRequestViewModel(pr, repoById[pr.repository.id], this.currentUser))
                 .bufferTime(500)
                 .subscribe((prs) => this.zone.run(() => this.pullRequests.push(...prs)));
@@ -165,6 +170,16 @@ export class AppComponent implements OnInit {
         this.reloadPullRequests();
     }
 
+    public onHideDraftPRsChanged(hideDraftPRs: boolean) {
+        if (this.loading) {
+            return;
+        }
+
+        this.hideDraftPRs = hideDraftPRs;
+        this.settings.setHideDraftPRs(hideDraftPRs);
+        this.reloadPullRequests();
+    }
+
     private getRepoByName(name: string): GitRepository {
         for (const repo of this.repositories) {
             if (repo.name === name) {

src/app/model.ts

@@ -101,6 +101,8 @@ export abstract class AppSettingsService {
     public static dateFormatKey = "dateFormat";
     // settings key for showing PRs across all projects instead of just the current
     public static allProjectsKey = "allProjects";
+    // settings key for hiding draft PRs
+    public static hideDraftPRsKey = "hideDraftPRs";
 
     public static defaultDateFormat = "dd/MM/yyyy HH:mm";
 
@@ -148,6 +150,18 @@ export abstract class AppSettingsService {
         await this.setValue(AppSettingsService.allProjectsKey, value.toString());
     }
 
+    public async getHideDraftPRs(): Promise<boolean> {
+        const savedHideDraftPRs = await this.getValue(AppSettingsService.hideDraftPRsKey);
+        if (savedHideDraftPRs === "true") {
+            return true;
+        }
+        return false;
+    }
+
+    public async setHideDraftPRs(value: boolean): Promise<void> {
+        await this.setValue(AppSettingsService.hideDraftPRsKey, value.toString());
+    }
+
     public getLayout(): Layout {
         return this.layout;
     }

src/overview.md

@@ -51,6 +51,7 @@ At the top right of the dashboard plugin is a button which will drop down user-s
 
 * Date Format - specifies the format to display PR creation date timestamp.  Default is "dd/MM/yyyy HH:mm".
 * All Projects - show pull requests from repositories across all projects.
+* Hide Draft PRs - hide pull requests marked as draft.
 
 ![Settings](assets/screenshots/settings.png)
 

test/app.component.spec.ts

@@ -64,6 +64,7 @@ describe("AppComponent", () => {
         spyOn(settingsMock, "getDateFormat");
         spyOn(settingsMock, "getRepoFilter");
         spyOn(settingsMock, "getShowAllProjects");
+        spyOn(settingsMock, "getHideDraftPRs");
 
         zoneMock = {
             run: (action: () => void) => action(),
@@ -88,6 +89,7 @@ describe("AppComponent", () => {
         expect(settingsMock.getDateFormat).toHaveBeenCalledTimes(0);
         expect(settingsMock.getRepoFilter).toHaveBeenCalledTimes(0);
         expect(settingsMock.getShowAllProjects).toHaveBeenCalledTimes(0);
+        expect(settingsMock.getHideDraftPRs).toHaveBeenCalledTimes(0);
     });
 
 });