From 9291c98189963d69098359c6bb105762c8e3d9dd Mon Sep 17 00:00:00 2001 From: shamoon <4887959+shamoon@users.noreply.github.com> Date: Tue, 8 Aug 2023 23:59:13 -0700 Subject: [PATCH] Improve 404 navigation and styling --- src-ui/messages.xlf | 83 ++++++++++--------- src-ui/src/app/app.module.ts | 2 + .../common/logo/logo.component.html | 18 ++++ .../common/logo/logo.component.scss | 0 .../common/logo/logo.component.spec.ts | 36 ++++++++ .../components/common/logo/logo.component.ts | 18 ++++ .../dashboard/dashboard.component.html | 19 +---- .../dashboard/dashboard.component.spec.ts | 2 + .../document-asn.component.spec.ts | 2 +- .../document-asn/document-asn.component.ts | 4 +- .../document-detail.component.spec.ts | 4 +- .../document-detail.component.ts | 8 +- .../document-list.component.spec.ts | 2 +- .../document-list/document-list.component.ts | 4 +- .../not-found/not-found.component.html | 25 ++++-- .../not-found/not-found.component.spec.ts | 7 +- 16 files changed, 160 insertions(+), 74 deletions(-) create mode 100644 src-ui/src/app/components/common/logo/logo.component.html create mode 100644 src-ui/src/app/components/common/logo/logo.component.scss create mode 100644 src-ui/src/app/components/common/logo/logo.component.spec.ts create mode 100644 src-ui/src/app/components/common/logo/logo.component.ts diff --git a/src-ui/messages.xlf b/src-ui/messages.xlf index e7dd14aab..28f4b06cb 100644 --- a/src-ui/messages.xlf +++ b/src-ui/messages.xlf @@ -1247,7 +1247,7 @@ src/app/components/dashboard/dashboard.component.html - 27 + 10 src/app/components/dashboard/widgets/widget-frame/widget-frame.component.html @@ -2808,43 +2808,43 @@ Error retrieving metadata src/app/components/document-detail/document-detail.component.ts - 395 + 397 Error retrieving suggestions. src/app/components/document-detail/document-detail.component.ts - 417 + 419 Document saved successfully. src/app/components/document-detail/document-detail.component.ts - 529 + 533 src/app/components/document-detail/document-detail.component.ts - 537 + 541 Error saving document src/app/components/document-detail/document-detail.component.ts - 542 + 546 src/app/components/document-detail/document-detail.component.ts - 587 + 591 Confirm delete src/app/components/document-detail/document-detail.component.ts - 616 + 620 src/app/components/manage/management-list/management-list.component.ts @@ -2855,35 +2855,35 @@ Do you really want to delete document ""? src/app/components/document-detail/document-detail.component.ts - 617 + 621 The files for this document will be deleted permanently. This operation cannot be undone. src/app/components/document-detail/document-detail.component.ts - 618 + 622 Delete document src/app/components/document-detail/document-detail.component.ts - 620 + 624 Error deleting document: src/app/components/document-detail/document-detail.component.ts - 640,642 + 644,646 Redo OCR confirm src/app/components/document-detail/document-detail.component.ts - 663 + 667 src/app/components/document-list/bulk-editor/bulk-editor.component.ts @@ -2894,14 +2894,14 @@ This operation will permanently redo OCR for this document. src/app/components/document-detail/document-detail.component.ts - 664 + 668 This operation cannot be undone. src/app/components/document-detail/document-detail.component.ts - 665 + 669 src/app/components/document-list/bulk-editor/bulk-editor.component.ts @@ -2932,7 +2932,7 @@ Proceed src/app/components/document-detail/document-detail.component.ts - 667 + 671 src/app/components/document-list/bulk-editor/bulk-editor.component.ts @@ -2959,7 +2959,7 @@ Redo OCR operation will begin in the background. Close and re-open or reload this document after the operation has completed to see new content. src/app/components/document-detail/document-detail.component.ts - 675 + 679 @@ -2968,7 +2968,7 @@ )"/> src/app/components/document-detail/document-detail.component.ts - 686,688 + 690,692 @@ -3629,14 +3629,14 @@ View "" saved successfully. src/app/components/document-list/document-list.component.ts - 205 + 207 View "" created successfully. src/app/components/document-list/document-list.component.ts - 246 + 248 @@ -3907,7 +3907,7 @@ Do you really want to delete the correspondent ""? src/app/components/manage/correspondent-list/correspondent-list.component.ts - 55 + 67 @@ -4903,11 +4903,18 @@ 137 - - 404 Not Found + + Not Found src/app/components/not-found/not-found.component.html - 7 + 6 + + + + Go to Dashboard + + src/app/components/not-found/not-found.component.html + 12 @@ -5105,28 +5112,28 @@ Document already exists. src/app/services/consumer-status.service.ts - 16 + 17 Document with ASN already exists. src/app/services/consumer-status.service.ts - 17 + 18 File not found. src/app/services/consumer-status.service.ts - 18 + 19 Pre-consume script does not exist. src/app/services/consumer-status.service.ts - 19 + 20 Pre-Consume is a term that appears like that in the documentation as well and does not need a specific translation @@ -5134,7 +5141,7 @@ Error while executing pre-consume script. src/app/services/consumer-status.service.ts - 20 + 21 Pre-Consume is a term that appears like that in the documentation as well and does not need a specific translation @@ -5142,7 +5149,7 @@ Post-consume script does not exist. src/app/services/consumer-status.service.ts - 21 + 22 Post-Consume is a term that appears like that in the documentation as well and does not need a specific translation @@ -5150,7 +5157,7 @@ Error while executing post-consume script. src/app/services/consumer-status.service.ts - 22 + 23 Post-Consume is a term that appears like that in the documentation as well and does not need a specific translation @@ -5158,49 +5165,49 @@ Received new file. src/app/services/consumer-status.service.ts - 23 + 24 File type not supported. src/app/services/consumer-status.service.ts - 24 + 25 Processing document... src/app/services/consumer-status.service.ts - 25 + 26 Generating thumbnail... src/app/services/consumer-status.service.ts - 26 + 27 Retrieving date from document... src/app/services/consumer-status.service.ts - 27 + 28 Saving document... src/app/services/consumer-status.service.ts - 28 + 29 Finished. src/app/services/consumer-status.service.ts - 29 + 30 diff --git a/src-ui/src/app/app.module.ts b/src-ui/src/app/app.module.ts index 86b6d29c4..7a94f4316 100644 --- a/src-ui/src/app/app.module.ts +++ b/src-ui/src/app/app.module.ts @@ -92,6 +92,7 @@ import { PermissionsDialogComponent } from './components/common/permissions-dial import { PermissionsFormComponent } from './components/common/input/permissions/permissions-form/permissions-form.component' import { PermissionsFilterDropdownComponent } from './components/common/permissions-filter-dropdown/permissions-filter-dropdown.component' import { UsernamePipe } from './pipes/username.pipe' +import { LogoComponent } from './components/common/logo/logo.component' import localeAr from '@angular/common/locales/ar' import localeBe from '@angular/common/locales/be' @@ -221,6 +222,7 @@ function initializeApp(settings: SettingsService) { PermissionsFormComponent, PermissionsFilterDropdownComponent, UsernamePipe, + LogoComponent, ], imports: [ BrowserModule, diff --git a/src-ui/src/app/components/common/logo/logo.component.html b/src-ui/src/app/components/common/logo/logo.component.html new file mode 100644 index 000000000..6c688902e --- /dev/null +++ b/src-ui/src/app/components/common/logo/logo.component.html @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/src-ui/src/app/components/common/logo/logo.component.scss b/src-ui/src/app/components/common/logo/logo.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src-ui/src/app/components/common/logo/logo.component.spec.ts b/src-ui/src/app/components/common/logo/logo.component.spec.ts new file mode 100644 index 000000000..118e0e40e --- /dev/null +++ b/src-ui/src/app/components/common/logo/logo.component.spec.ts @@ -0,0 +1,36 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing' + +import { LogoComponent } from './logo.component' +import { By } from '@angular/platform-browser' + +describe('LogoComponent', () => { + let component: LogoComponent + let fixture: ComponentFixture + + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [LogoComponent], + }) + fixture = TestBed.createComponent(LogoComponent) + component = fixture.componentInstance + fixture.detectChanges() + }) + + it('should support extra classes', () => { + expect(fixture.debugElement.queryAll(By.css('.foo'))).toHaveLength(0) + component.extra_classes = 'foo' + fixture.detectChanges() + expect(fixture.debugElement.queryAll(By.css('.foo'))).toHaveLength(1) + }) + + it('should support setting height', () => { + expect(fixture.debugElement.query(By.css('svg')).attributes.height).toEqual( + '6em' + ) + component.height = '10em' + fixture.detectChanges() + expect(fixture.debugElement.query(By.css('svg')).attributes.height).toEqual( + '10em' + ) + }) +}) diff --git a/src-ui/src/app/components/common/logo/logo.component.ts b/src-ui/src/app/components/common/logo/logo.component.ts new file mode 100644 index 000000000..0c5ecefda --- /dev/null +++ b/src-ui/src/app/components/common/logo/logo.component.ts @@ -0,0 +1,18 @@ +import { Component, Input } from '@angular/core' + +@Component({ + selector: 'app-logo', + templateUrl: './logo.component.html', + styleUrls: ['./logo.component.scss'], +}) +export class LogoComponent { + @Input() + extra_classes: string + + @Input() + height = '6em' + + getClasses() { + return ['logo'].concat(this.extra_classes).join(' ') + } +} diff --git a/src-ui/src/app/components/dashboard/dashboard.component.html b/src-ui/src/app/components/dashboard/dashboard.component.html index f2dcf855e..db396a62b 100644 --- a/src-ui/src/app/components/dashboard/dashboard.component.html +++ b/src-ui/src/app/components/dashboard/dashboard.component.html @@ -1,22 +1,5 @@ - +
diff --git a/src-ui/src/app/components/dashboard/dashboard.component.spec.ts b/src-ui/src/app/components/dashboard/dashboard.component.spec.ts index 911565526..6d100510d 100644 --- a/src-ui/src/app/components/dashboard/dashboard.component.spec.ts +++ b/src-ui/src/app/components/dashboard/dashboard.component.spec.ts @@ -16,6 +16,7 @@ import { IfPermissionsDirective } from 'src/app/directives/if-permissions.direct import { NgxFileDropModule } from 'ngx-file-drop' import { RouterTestingModule } from '@angular/router/testing' import { TourNgBootstrapModule, TourService } from 'ngx-ui-tour-ng-bootstrap' +import { LogoComponent } from '../common/logo/logo.component' describe('DashboardComponent', () => { let component: DashboardComponent @@ -33,6 +34,7 @@ describe('DashboardComponent', () => { UploadFileWidgetComponent, IfPermissionsDirective, SavedViewWidgetComponent, + LogoComponent, ], providers: [ PermissionsGuard, diff --git a/src-ui/src/app/components/document-asn/document-asn.component.spec.ts b/src-ui/src/app/components/document-asn/document-asn.component.spec.ts index 62b1113db..c8ad0d13d 100644 --- a/src-ui/src/app/components/document-asn/document-asn.component.spec.ts +++ b/src-ui/src/app/components/document-asn/document-asn.component.spec.ts @@ -53,6 +53,6 @@ describe('DocumentAsnComponent', () => { .mockReturnValue(of(convertToParamMap({ id: '5578' }))) const navigateSpy = jest.spyOn(router, 'navigate') component.ngOnInit() - expect(navigateSpy).toHaveBeenCalledWith(['404']) + expect(navigateSpy).toHaveBeenCalledWith(['404'], { replaceUrl: true }) }) }) diff --git a/src-ui/src/app/components/document-asn/document-asn.component.ts b/src-ui/src/app/components/document-asn/document-asn.component.ts index 4fb9f474a..6003f1621 100644 --- a/src-ui/src/app/components/document-asn/document-asn.component.ts +++ b/src-ui/src/app/components/document-asn/document-asn.component.ts @@ -25,7 +25,9 @@ export class DocumentAsnComponent implements OnInit { if (documentId.length == 1) { this.router.navigate(['documents', documentId[0]]) } else { - this.router.navigate(['404']) + this.router.navigate(['404'], { + replaceUrl: true, + }) } }) }) diff --git a/src-ui/src/app/components/document-detail/document-detail.component.spec.ts b/src-ui/src/app/components/document-detail/document-detail.component.spec.ts index dee1435b7..bbee477cc 100644 --- a/src-ui/src/app/components/document-detail/document-detail.component.spec.ts +++ b/src-ui/src/app/components/document-detail/document-detail.component.spec.ts @@ -355,14 +355,14 @@ describe('DocumentDetailComponent', () => { .mockReturnValueOnce(throwError(() => new Error('unable to discard'))) component.discard() fixture.detectChanges() - expect(navigateSpy).toHaveBeenCalledWith(['404']) + expect(navigateSpy).toHaveBeenCalledWith(['404'], { replaceUrl: true }) }) it('should 404 on invalid id', () => { jest.spyOn(documentService, 'get').mockReturnValueOnce(of(null)) const navigateSpy = jest.spyOn(router, 'navigate') fixture.detectChanges() - expect(navigateSpy).toHaveBeenCalledWith(['404']) + expect(navigateSpy).toHaveBeenCalledWith(['404'], { replaceUrl: true }) }) it('should support save, close and show success toast', () => { diff --git a/src-ui/src/app/components/document-detail/document-detail.component.ts b/src-ui/src/app/components/document-detail/document-detail.component.ts index 7a385bebe..7337028da 100644 --- a/src-ui/src/app/components/document-detail/document-detail.component.ts +++ b/src-ui/src/app/components/document-detail/document-detail.component.ts @@ -341,7 +341,9 @@ export class DocumentDetailComponent this.openDocumentService.setDirty(doc, dirty) }, error: (error) => { - this.router.navigate(['404']) + this.router.navigate(['404'], { + replaceUrl: true, + }) }, }) @@ -513,7 +515,9 @@ export class DocumentDetailComponent this.openDocumentService.setDirty(doc, false) }, error: () => { - this.router.navigate(['404']) + this.router.navigate(['404'], { + replaceUrl: true, + }) }, }) } diff --git a/src-ui/src/app/components/document-list/document-list.component.spec.ts b/src-ui/src/app/components/document-list/document-list.component.spec.ts index 2b14747bf..6e6dd8f6c 100644 --- a/src-ui/src/app/components/document-list/document-list.component.spec.ts +++ b/src-ui/src/app/components/document-list/document-list.component.spec.ts @@ -259,7 +259,7 @@ describe('DocumentListComponent', () => { .mockReturnValue(of(convertToParamMap({ id: '10' }))) const navigateSpy = jest.spyOn(router, 'navigate') fixture.detectChanges() - expect(navigateSpy).toHaveBeenCalledWith(['404']) + expect(navigateSpy).toHaveBeenCalledWith(['404'], { replaceUrl: true }) }) it('should load saved view from query params', () => { diff --git a/src-ui/src/app/components/document-list/document-list.component.ts b/src-ui/src/app/components/document-list/document-list.component.ts index 32431167b..25a95401f 100644 --- a/src-ui/src/app/components/document-list/document-list.component.ts +++ b/src-ui/src/app/components/document-list/document-list.component.ts @@ -153,7 +153,9 @@ export class DocumentListComponent .pipe(takeUntil(this.unsubscribeNotifier)) .subscribe(({ view }) => { if (!view) { - this.router.navigate(['404']) + this.router.navigate(['404'], { + replaceUrl: true, + }) return } this.unmodifiedSavedView = view diff --git a/src-ui/src/app/components/not-found/not-found.component.html b/src-ui/src/app/components/not-found/not-found.component.html index 913132d1b..4b4dc7c09 100644 --- a/src-ui/src/app/components/not-found/not-found.component.html +++ b/src-ui/src/app/components/not-found/not-found.component.html @@ -1,8 +1,17 @@ -
- - - - - -

404 Not Found

-
+
+
+

404

+
+
+

Not Found

+

+ + + + + Go to Dashboard + +

+
+ +
diff --git a/src-ui/src/app/components/not-found/not-found.component.spec.ts b/src-ui/src/app/components/not-found/not-found.component.spec.ts index 8962d833f..2a0ab9d7c 100644 --- a/src-ui/src/app/components/not-found/not-found.component.spec.ts +++ b/src-ui/src/app/components/not-found/not-found.component.spec.ts @@ -1,5 +1,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing' import { NotFoundComponent } from './not-found.component' +import { By } from '@angular/platform-browser' +import { LogoComponent } from '../common/logo/logo.component' describe('NotFoundComponent', () => { let component: NotFoundComponent @@ -7,7 +9,7 @@ describe('NotFoundComponent', () => { beforeEach(async () => { TestBed.configureTestingModule({ - declarations: [NotFoundComponent], + declarations: [NotFoundComponent, LogoComponent], }).compileComponents() fixture = TestBed.createComponent(NotFoundComponent) @@ -18,6 +20,7 @@ describe('NotFoundComponent', () => { it('should create component', () => { expect(component).toBeTruthy() - expect(fixture.nativeElement.textContent).toContain('404 Not Found') + expect(fixture.nativeElement.textContent).toContain('Not Found') + expect(fixture.debugElement.queryAll(By.css('a'))).toHaveLength(1) }) })