From 9ed203b3e949b2267ba24b3ef92059a9b84428b7 Mon Sep 17 00:00:00 2001 From: Yassine Date: Thu, 8 Apr 2021 16:10:07 -0400 Subject: [PATCH] feat(angular): redirect user to an error page if the `.env` file is invalid (#140) https://coveord.atlassian.net/browse/CDX-113 --- packages/angular/package-lock.json | 17 ++++++++++++++ packages/angular/package.json | 1 + .../files/src/app/app-routing.module.ts | 15 ++++++++++++ .../files/src/app/app.component.html | 7 +----- .../files/src/app/error/error.component.html | 19 +++++++++++++++ .../files/src/app/error/error.component.scss | 23 +++++++++++++++++++ .../files/src/app/error/error.component.ts | 16 +++++++++++++ .../files/src/app/home/home.component.html | 5 ++++ .../files/src/app/home/home.component.scss | 0 .../files/src/app/home/home.component.ts | 12 ++++++++++ .../files/src/app/init.service.ts | 11 +++++++-- .../ng-add-setup-project/rules/ng-module.ts | 6 ++--- .../cli/src/commands/ui/create/angular.ts | 2 +- 13 files changed, 122 insertions(+), 12 deletions(-) create mode 100644 packages/angular/src/ng-add-setup-project/files/src/app/app-routing.module.ts create mode 100644 packages/angular/src/ng-add-setup-project/files/src/app/error/error.component.html create mode 100644 packages/angular/src/ng-add-setup-project/files/src/app/error/error.component.scss create mode 100644 packages/angular/src/ng-add-setup-project/files/src/app/error/error.component.ts create mode 100644 packages/angular/src/ng-add-setup-project/files/src/app/home/home.component.html create mode 100644 packages/angular/src/ng-add-setup-project/files/src/app/home/home.component.scss create mode 100644 packages/angular/src/ng-add-setup-project/files/src/app/home/home.component.ts diff --git a/packages/angular/package-lock.json b/packages/angular/package-lock.json index 1aabff4626..c21e6920e4 100644 --- a/packages/angular/package-lock.json +++ b/packages/angular/package-lock.json @@ -130,6 +130,23 @@ } } }, + "@angular/router": { + "version": "11.2.8", + "resolved": "https://registry.npmjs.org/@angular/router/-/router-11.2.8.tgz", + "integrity": "sha512-HkHIe0yxRFXSOlotK6jN7kU0y7MU1I9R15ahxIe33bNDXM6ZQO3ZPiaulM+nxmu6lYjjFVfbUame0vs70R5mkA==", + "dev": true, + "requires": { + "tslib": "^2.0.0" + }, + "dependencies": { + "tslib": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.1.0.tgz", + "integrity": "sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A==", + "dev": true + } + } + }, "@coveo/bueno": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/@coveo/bueno/-/bueno-0.1.0.tgz", diff --git a/packages/angular/package.json b/packages/angular/package.json index 3dff73142a..cfab5effd5 100644 --- a/packages/angular/package.json +++ b/packages/angular/package.json @@ -33,6 +33,7 @@ }, "devDependencies": { "@angular/core": "^11.2.2", + "@angular/router": "^11.1.2", "@angular/forms": "^11.2.2", "@angular/material": "^11.2.1", "@coveo/headless": "^0.1.0", diff --git a/packages/angular/src/ng-add-setup-project/files/src/app/app-routing.module.ts b/packages/angular/src/ng-add-setup-project/files/src/app/app-routing.module.ts new file mode 100644 index 0000000000..7bb407f68a --- /dev/null +++ b/packages/angular/src/ng-add-setup-project/files/src/app/app-routing.module.ts @@ -0,0 +1,15 @@ +import {NgModule} from '@angular/core'; +import {RouterModule, Routes} from '@angular/router'; +import {ErrorComponent} from './error/error.component'; +import {HomeComponent} from './home/home.component'; + +const routes: Routes = [ + {path: '', component: HomeComponent}, + {path: 'error', component: ErrorComponent}, +]; + +@NgModule({ + imports: [RouterModule.forRoot(routes)], + exports: [RouterModule], +}) +export class AppRoutingModule {} diff --git a/packages/angular/src/ng-add-setup-project/files/src/app/app.component.html b/packages/angular/src/ng-add-setup-project/files/src/app/app.component.html index a4c09025c0..0680b43f9c 100644 --- a/packages/angular/src/ng-add-setup-project/files/src/app/app.component.html +++ b/packages/angular/src/ng-add-setup-project/files/src/app/app.component.html @@ -1,6 +1 @@ - - - -
- -
+ diff --git a/packages/angular/src/ng-add-setup-project/files/src/app/error/error.component.html b/packages/angular/src/ng-add-setup-project/files/src/app/error/error.component.html new file mode 100644 index 0000000000..6ab9f263df --- /dev/null +++ b/packages/angular/src/ng-add-setup-project/files/src/app/error/error.component.html @@ -0,0 +1,19 @@ +
+
+

Invalid Environment Variables

+

+ You should have a valid .env file at the root of this + project. You can use .env.example as starting point and make + sure to replace all placeholder variables <...> by + the proper information for your organization. +

+ +
+ Error Message: {{ this.errorMessage }} +
+ +

+ Refer to the project README file for more information. +

+
+
diff --git a/packages/angular/src/ng-add-setup-project/files/src/app/error/error.component.scss b/packages/angular/src/ng-add-setup-project/files/src/app/error/error.component.scss new file mode 100644 index 0000000000..422823edeb --- /dev/null +++ b/packages/angular/src/ng-add-setup-project/files/src/app/error/error.component.scss @@ -0,0 +1,23 @@ +.warning-bg { + background-color: #fadd6e; +} + +.full-height { + height: 100%; +} + +.inner-container { + margin-top: 30vh; +} + +.center { + display: flex; + flex-direction: column; + padding: 2rem; +} + +code { + color: #cc3c52; + padding: 5px 2px; + background-color: #f5f5f5; +} diff --git a/packages/angular/src/ng-add-setup-project/files/src/app/error/error.component.ts b/packages/angular/src/ng-add-setup-project/files/src/app/error/error.component.ts new file mode 100644 index 0000000000..82503515e1 --- /dev/null +++ b/packages/angular/src/ng-add-setup-project/files/src/app/error/error.component.ts @@ -0,0 +1,16 @@ +import {Component, OnInit} from '@angular/core'; + +@Component({ + selector: 'app-error', + templateUrl: './error.component.html', + styleUrls: ['./error.component.scss'], +}) +export class ErrorComponent implements OnInit { + constructor() {} + + ngOnInit(): void {} + + get errorMessage() { + return history.state.errorMessage || ''; + } +} diff --git a/packages/angular/src/ng-add-setup-project/files/src/app/home/home.component.html b/packages/angular/src/ng-add-setup-project/files/src/app/home/home.component.html new file mode 100644 index 0000000000..019e5dc9f3 --- /dev/null +++ b/packages/angular/src/ng-add-setup-project/files/src/app/home/home.component.html @@ -0,0 +1,5 @@ + + +
+ +
diff --git a/packages/angular/src/ng-add-setup-project/files/src/app/home/home.component.scss b/packages/angular/src/ng-add-setup-project/files/src/app/home/home.component.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/angular/src/ng-add-setup-project/files/src/app/home/home.component.ts b/packages/angular/src/ng-add-setup-project/files/src/app/home/home.component.ts new file mode 100644 index 0000000000..57ac412c2b --- /dev/null +++ b/packages/angular/src/ng-add-setup-project/files/src/app/home/home.component.ts @@ -0,0 +1,12 @@ +import {Component, OnInit} from '@angular/core'; + +@Component({ + selector: 'app-home', + templateUrl: './home.component.html', + styleUrls: ['./home.component.scss'], +}) +export class HomeComponent implements OnInit { + constructor() {} + + ngOnInit(): void {} +} diff --git a/packages/angular/src/ng-add-setup-project/files/src/app/init.service.ts b/packages/angular/src/ng-add-setup-project/files/src/app/init.service.ts index fb2014a1e9..4a703f4a2f 100644 --- a/packages/angular/src/ng-add-setup-project/files/src/app/init.service.ts +++ b/packages/angular/src/ng-add-setup-project/files/src/app/init.service.ts @@ -1,3 +1,4 @@ +import {Router} from '@angular/router'; import {Injectable, APP_INITIALIZER} from '@angular/core'; import {environment} from '../environments/environment'; import {EngineService} from './engine.service'; @@ -6,11 +7,17 @@ import {EngineService} from './engine.service'; providedIn: 'root', }) export class InitService { - constructor(private engineService: EngineService) {} + constructor(private engineService: EngineService, private route: Router) {} async init() { const res = await fetch(environment.tokenEndpoint); - const {token} = await res.json(); + const data = await res.json(); + const token = data.token; + + if (!token) { + this.route.navigate(['error'], {state: {errorMessage: data.message}}); + return; + } this.engineService.init(token); } } diff --git a/packages/angular/src/ng-add-setup-project/rules/ng-module.ts b/packages/angular/src/ng-add-setup-project/rules/ng-module.ts index 867d10ccc9..254929306a 100644 --- a/packages/angular/src/ng-add-setup-project/rules/ng-module.ts +++ b/packages/angular/src/ng-add-setup-project/rules/ng-module.ts @@ -1,5 +1,4 @@ import { - insertImport, addDeclarationToModule, addSymbolToNgModuleMetadata, addImportToModule, @@ -36,7 +35,7 @@ export function updateNgModule( const changes = [ ...injectInitService(source, appModulePath), ...getAllCoveoComponentsToInject(tree, source, appModulePath), - ...injectMaterialImports(source, appModulePath), + ...injectAdditionalImports(source, appModulePath), ]; changes.map((change) => { @@ -125,7 +124,7 @@ function getAllCoveoComponentsToInject( return changes; } -export function injectMaterialImports( +export function injectAdditionalImports( source: SourceFile, appModulePath: string ) { @@ -138,6 +137,7 @@ export function injectMaterialImports( MatPaginatorModule: '@angular/material/paginator', MatSelectModule: '@angular/material/select', MatButtonModule: '@angular/material/button', + AppRoutingModule: './app-routing.module', }; const changes: InsertChange[] = []; diff --git a/packages/cli/src/commands/ui/create/angular.ts b/packages/cli/src/commands/ui/create/angular.ts index 583c814755..a08159ab4e 100644 --- a/packages/cli/src/commands/ui/create/angular.ts +++ b/packages/cli/src/commands/ui/create/angular.ts @@ -49,7 +49,7 @@ export default class Angular extends Command { } private async createProject(name: string, defaults: boolean) { - const cliArgs = ['new', name, '--style', 'scss']; + const cliArgs = ['new', name, '--style', 'scss', '--routing']; if (defaults) { cliArgs.push('--defaults');