From 15778ac05ccd70337a0b889c4887b9448130b6ce Mon Sep 17 00:00:00 2001 From: "Gregg B. Jensen" Date: Tue, 27 Aug 2024 08:43:11 -0600 Subject: [PATCH] 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 +++-- docs/getting-started/2-github-oauth-app.md | 2 +- prdeploy-app/src/app/app-navigation.ts | 7 +++++++ prdeploy-app/src/app/app.component.scss | 4 ++++ .../add-pr-service-dialog.component.ts | 4 ++++ .../environment-list.component.scss | 4 ++-- .../queue-list/queue-list.component.ts | 16 +++++++++------- .../shared/components/header/header.component.ts | 3 --- .../side-navigation-menu.component.html | 15 +++++++++++---- .../side-navigation-menu.component.ts | 10 +++++++--- .../src/app/shared/managers/repo.manager.ts | 12 ++++++------ 11 files changed, 54 insertions(+), 28 deletions(-) diff --git a/docs/getting-started/1-github-app.md b/docs/getting-started/1-github-app.md index c44f09a..27c3d27 100644 --- a/docs/getting-started/1-github-app.md +++ b/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**. diff --git a/docs/getting-started/2-github-oauth-app.md b/docs/getting-started/2-github-oauth-app.md index 683c587..6eecfe5 100644 --- a/docs/getting-started/2-github-oauth-app.md +++ b/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 | diff --git a/prdeploy-app/src/app/app-navigation.ts b/prdeploy-app/src/app/app-navigation.ts index b1385a3..ea5e60b 100644 --- a/prdeploy-app/src/app/app-navigation.ts +++ b/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[]; } diff --git a/prdeploy-app/src/app/app.component.scss b/prdeploy-app/src/app/app.component.scss index 64b81b8..447ac30 100644 --- a/prdeploy-app/src/app/app.component.scss +++ b/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 { diff --git a/prdeploy-app/src/app/deployments/add-pr-service-dialog/add-pr-service-dialog.component.ts b/prdeploy-app/src/app/deployments/add-pr-service-dialog/add-pr-service-dialog.component.ts index e3d5aed..a189bc5 100644 --- a/prdeploy-app/src/app/deployments/add-pr-service-dialog/add-pr-service-dialog.component.ts +++ b/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 = '') { diff --git a/prdeploy-app/src/app/deployments/environment-list/environment-list.component.scss b/prdeploy-app/src/app/deployments/environment-list/environment-list.component.scss index c985b7a..b9e9247 100644 --- a/prdeploy-app/src/app/deployments/environment-list/environment-list.component.scss +++ b/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 { diff --git a/prdeploy-app/src/app/deployments/queue-list/queue-list.component.ts b/prdeploy-app/src/app/deployments/queue-list/queue-list.component.ts index 1464e9a..3f80d27 100644 --- a/prdeploy-app/src/app/deployments/queue-list/queue-list.component.ts +++ b/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) { diff --git a/prdeploy-app/src/app/shared/components/header/header.component.ts b/prdeploy-app/src/app/shared/components/header/header.component.ts index cb6da1d..ee4acb1 100644 --- a/prdeploy-app/src/app/shared/components/header/header.component.ts +++ b/prdeploy-app/src/app/shared/components/header/header.component.ts @@ -21,9 +21,6 @@ export class HeaderComponent { @Output() menuToggle = new EventEmitter(); - @Input() - menuToggleEnabled = false; - @Input() title!: string; diff --git a/prdeploy-app/src/app/shared/components/side-navigation-menu/side-navigation-menu.component.html b/prdeploy-app/src/app/shared/components/side-navigation-menu/side-navigation-menu.component.html index e96500c..0806377 100644 --- a/prdeploy-app/src/app/shared/components/side-navigation-menu/side-navigation-menu.component.html +++ b/prdeploy-app/src/app/shared/components/side-navigation-menu/side-navigation-menu.component.html @@ -1,10 +1,17 @@ diff --git a/prdeploy-app/src/app/shared/components/side-navigation-menu/side-navigation-menu.component.ts b/prdeploy-app/src/app/shared/components/side-navigation-menu/side-navigation-menu.component.ts index 041b5ec..1f29e8d 100644 --- a/prdeploy-app/src/app/shared/components/side-navigation-menu/side-navigation-menu.component.ts +++ b/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(); + 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); }); diff --git a/prdeploy-app/src/app/shared/managers/repo.manager.ts b/prdeploy-app/src/app/shared/managers/repo.manager.ts index a7a0076..6f57c38 100644 --- a/prdeploy-app/src/app/shared/managers/repo.manager.ts +++ b/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];