Doc run-through updates, fix typeahead and table sizes, add help (#84)

* Update app name to be per org

* Fix repo switcher not working

* Add max width to page content

* Increase user and url column widths

* Fix pull request autocomplete search

* Add help link

docs/getting-started/1-github-app.md

@@ -5,7 +5,7 @@ In order to be able to listen and respond to pull request events, we need to cre
 ![Setup GitHub App](../assets/images/screenshots/getting-started/github-app.png)
 {: style="margin: 30px 0 60px 0; box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 3px -2px, rgba(0, 0, 0, 0.14) 0px 3px 4px 0px, rgba(0, 0, 0, 0.12) 0px 1px 8px 0px;"}
 
-1. Navigate to https://github.com and sign in.
+1. Navigate to [https://github.com](https://github.com) and sign in.
 2. Click on your profile photo in the top right and choose **Your Organizations**.
 3. Click on the organization you want to add **prdeploy** to.
 4. Select the **Settings** tab, expand **Developer settings** on the left nav and choose **GitHub Apps**.
@@ -14,7 +14,7 @@ In order to be able to listen and respond to pull request events, we need to cre
 
     | Field           | Value                                                                       |
     | --------------- | --------------------------------------------------------------------------- |
-    | GitHub App Name | prdeploy                                                                    |
+    | GitHub App Name | prdeploy myorg                                                              |
     | Description     | Allows the entire build-deploy lifecycle to happen within a feature branch. |
     | Homepage URL    | https://prdeploy.myorg.com                                                  |
     | Webhook URL     | https://prdeploy.myorg.com/webhooks                                         |
@@ -66,6 +66,7 @@ Issue comment
 Pull request
 Workflow run
 ```
+
 3. **Where can this GitHub App be installed?** should be set to **Only on this account**.
 4. Click **Create GitHub App**.
 

docs/getting-started/2-github-oauth-app.md

@@ -11,7 +11,7 @@ For authorization of the portal to view deployments, we need to create an GitHub
 
 | Field                      | Value                                                                       |
 | -------------------------- | --------------------------------------------------------------------------- |
-| Aopplication name          | prdeploy                                                                    |
+| Aopplication name          | prdeploy myorg                                                              |
 | Homepage URL               | https://prdeploy.myorg.com                                                  |
 | Description                | Allows the entire build-deploy lifecycle to happen within a feature branch. |
 | Authorization callback URL | https://prdeploy.myorg.com/login/callback                                   |

prdeploy-app/src/app/app-navigation.ts

@@ -2,6 +2,7 @@ export interface NavItem {
   text: string;
   path: string;
   icon: string;
+  external?: boolean;
   expanded?: boolean;
   children?: NavItem[];
 }
@@ -36,6 +37,12 @@ export const navigation = (owner: string, repo: string) => {
         text: 'Settings',
         path: `${owner}/${repo}/settings`,
         icon: 'settings'
+      },
+      {
+        text: 'Help',
+        path: 'https://prdeploy.readthedocs.io/en/latest/prdeploy-portal/',
+        external: true,
+        icon: 'help_outlined'
       }
     ] as NavItem[];
   }

prdeploy-app/src/app/app.component.scss

@@ -12,6 +12,10 @@ $side-nav-animation-speed: 0.3s;
 $side-nav-large: 190px;
 $side-nav-small: 55px;
 
+.page-content {
+  max-width: 1900px;
+}
+
 ::ng-deep .sidenav-full {
 
   .app-sidenav {

prdeploy-app/src/app/deployments/add-pr-service-dialog/add-pr-service-dialog.component.ts

@@ -93,6 +93,10 @@ export class AddPrServiceDialogComponent {
       });
 
     this.filterPullRequests();
+
+    this.form.controls.pullRequest.valueChanges
+      .pipe(takeUntilDestroyed())
+      .subscribe(value => this.filterPullRequests(value));
   }
 
   async filterPullRequests(search: string = '') {

prdeploy-app/src/app/deployments/environment-list/environment-list.component.scss

@@ -16,11 +16,11 @@
 }
 
 .mat-column-user {
-  width: 140px;
+  width: 200px;
 }
 
 .mat-column-url {
-  width: 225px;
+  width: 270px;
 }
 
 .mat-column-actions {

prdeploy-app/src/app/deployments/queue-list/queue-list.component.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, DestroyRef, EventEmitter, Input, Output } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, Component, DestroyRef, EventEmitter, Input, Output } from '@angular/core';
 import { debounceTime, firstValueFrom } from 'rxjs';
 import {
   DeployQueue,
@@ -76,12 +76,14 @@ export class QueueListComponent implements AfterViewInit {
   openPullRequests: PullRequest[];
   pullRequestToAdd: PullRequest;
   processing = false;
+  searching = false;
 
   constructor(
     private _openPullRequestsGQL: OpenPullRequestsGQL,
     private _deployQueueUpdateGQL: DeployQueueUpdateGQL,
     private _repoManager: RepoManager,
-    private _destroyRef: DestroyRef
+    private _destroyRef: DestroyRef,
+    private _changeDetectorRef: ChangeDetectorRef
   ) {
     this.filterPullRequests();
   }
@@ -101,10 +103,9 @@ export class QueueListComponent implements AfterViewInit {
   ngAfterViewInit(): void {
     this.pullRequestControl.valueChanges
       .pipe(takeUntilDestroyed(this._destroyRef), debounceTime(300))
-      .subscribe(value => {
-        if (!_.isObject(value)) {
-          this.filterPullRequests(value);
-        }
+      .subscribe((value: any) => {
+        // Handle object selection.
+        this.filterPullRequests(value.title ? value.title : value);
       });
   }
 
@@ -119,7 +120,8 @@ export class QueueListComponent implements AfterViewInit {
       })
     );
 
-    this.openPullRequests = result.data.openPullRequests;
+    this.openPullRequests = [...result.data.openPullRequests];
+    this._changeDetectorRef.detectChanges();
   }
 
   selectPullRequest(event: MatAutocompleteSelectedEvent) {

prdeploy-app/src/app/shared/components/header/header.component.ts

@@ -21,9 +21,6 @@ export class HeaderComponent {
   @Output()
   menuToggle = new EventEmitter<boolean>();
 
-  @Input()
-  menuToggleEnabled = false;
-
   @Input()
   title!: string;
 

prdeploy-app/src/app/shared/components/side-navigation-menu/side-navigation-menu.component.html

@@ -1,10 +1,17 @@
 <div class="menu-container">
   <mat-tree [dataSource]="navItems" [childrenAccessor]="childrenAccessor">
     <mat-tree-node *matTreeNodeDef="let navItem">
-      <a class="nav-item" [routerLink]="navItem.path" routerLinkActive="router-link-active">
-        <mat-icon>{{ navItem.icon }}</mat-icon>
-        <span>{{ navItem.text }}</span>
-      </a>
+      @if (!navItem.external) {
+        <a class="nav-item" [routerLink]="navItem.path" routerLinkActive="router-link-active">
+          <mat-icon>{{ navItem.icon }}</mat-icon>
+          <span>{{ navItem.text }}</span>
+        </a>
+      } @else {
+        <a class="nav-item" href="{{ navItem.path }}" target="_blank">
+          <mat-icon>{{ navItem.icon }}</mat-icon>
+          <span>{{ navItem.text }}</span>
+        </a>
+      }
     </mat-tree-node>
   </mat-tree>
 </div>

prdeploy-app/src/app/shared/components/side-navigation-menu/side-navigation-menu.component.ts

@@ -1,7 +1,7 @@
-import { Component } from '@angular/core';
+import { Component, Inject } from '@angular/core';
 import { navigation, NavItem } from '../../../app-navigation';
 import { MatTreeModule, MatTreeNestedDataSource } from '@angular/material/tree';
-import { KeyValuePipe } from '@angular/common';
+import { DOCUMENT, KeyValuePipe } from '@angular/common';
 import { RouterModule } from '@angular/router';
 import { MatIconModule } from '@angular/material/icon';
 import { RepoManager } from '../../managers';
@@ -16,8 +16,12 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 })
 export class SideNavigationMenuComponent {
   navItems = new MatTreeNestedDataSource<NavItem>();
+  lastSelectedItem: NavItem;
 
-  constructor(private _repoManager: RepoManager) {
+  constructor(
+    private _repoManager: RepoManager,
+    @Inject(DOCUMENT) private _document: Document
+  ) {
     this._repoManager.valueChanged$.pipe(takeUntilDestroyed()).subscribe(() => {
       this.navItems.data = navigation(this._repoManager.owner, this._repoManager.repo);
     });

prdeploy-app/src/app/shared/managers/repo.manager.ts

@@ -41,7 +41,7 @@ export class RepoManager {
 
   set repo(value: string) {
     if (value !== this.repo) {
-      this.updateValueChanged();
+      this.updateValueChanged(this.owner, value);
     }
   }
 
@@ -51,7 +51,7 @@ export class RepoManager {
 
   set owner(value: string) {
     if (value !== this.owner) {
-      this.updateValueChanged();
+      this.updateValueChanged(value, this.repo);
     }
   }
 
@@ -78,18 +78,18 @@ export class RepoManager {
     }
 
     if (!_.isNil(ownerRepos) && ownerRepos.length === 0) {
-      this.updateValueChanged();
+      this.updateValueChanged('', '');
     }
 
     this._ownerReposChangedSubject.next(ownerRepos);
     return this.guardHasRepos(ownerRepos);
   }
 
-  private updateValueChanged() {
-    const isValid = this.repo && this.owner && this.repo.length > 0 && this.owner.length > 0;
+  private updateValueChanged(owner: string, repo: string) {
+    const isValid = repo && owner && repo.length > 0 && owner.length > 0;
     const ownerRepos = this._ownerReposChangedSubject.value;
     if (isValid) {
-      this._valueChangedSubject.next({ owner: this.owner, repo: this.repo });
+      this._valueChangedSubject.next({ owner, repo });
     } else if (this.guardHasRepos(ownerRepos) && this.hasOwnerRepos) {
       const owner = ownerRepos[0].owner;
       const repo = ownerRepos[0].repos[0];