fix(bridge): Fix no-services message and link

bridge/client/app/_components/ktb-no-service-info/ktb-no-service-info.component.html

@@ -1,17 +1,8 @@
 <div fxLayout="row" fxLayoutAlign="start" uitestid="keptn-noServices">
   <dt-icon fxFlex="20px" class="icon" name="information"></dt-icon>
   <p class="m-0 ml-2">
-    <ng-container *ngIf="!isQualityGatesOnly">
-      No service onboarded yet.<br />Follow the instructions to
-      <a [href]="'/manage/service/#onboard-a-service' | keptnUrl" target="_blank" rel="noopener noreferrer"
-        >onboard a service</a
-      >.
-    </ng-container>
-    <ng-container *ngIf="isQualityGatesOnly">
-      No service created yet.<br />Follow the instructions to
-      <a [href]="'/manage/service/#create-a-service' | keptnUrl" target="_blank" rel="noopener noreferrer"
-        >create a service</a
-      >.
-    </ng-container>
+    No service created yet.<br />Go to
+    <a [routerLink]="createServiceLink" [queryParams]="{ redirectTo: location.path() }">services</a> to create your
+    first service.
   </p>
 </div>

bridge/client/app/_components/ktb-no-service-info/ktb-no-service-info.component.spec.ts

@@ -2,6 +2,8 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { KtbNoServiceInfoComponent } from './ktb-no-service-info.component';
 import { AppModule } from '../../app.module';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { ActivatedRoute, convertToParamMap } from '@angular/router';
+import { of } from 'rxjs';
 
 describe('KtbNoServiceInfoComponent', () => {
   let component: KtbNoServiceInfoComponent;
@@ -10,6 +12,21 @@ describe('KtbNoServiceInfoComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [AppModule, HttpClientTestingModule],
+      providers: [
+        {
+          provide: ActivatedRoute,
+          useValue: {
+            data: of({}),
+            params: of({}),
+            paramMap: of(
+              convertToParamMap({
+                projectName: 'sockshop',
+              })
+            ),
+            queryParams: of({}),
+          },
+        },
+      ],
     }).compileComponents();
 
     fixture = TestBed.createComponent(KtbNoServiceInfoComponent);
@@ -20,4 +37,8 @@ describe('KtbNoServiceInfoComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should have the right routerLink', () => {
+    expect(component.createServiceLink).toBe('/project/sockshop/settings/services/create');
+  });
 });

bridge/client/app/_components/ktb-no-service-info/ktb-no-service-info.component.ts

@@ -1,26 +1,31 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
-import { takeUntil } from 'rxjs/operators';
-import { DataService } from '../../_services/data.service';
+import { Component, OnDestroy } from '@angular/core';
+import { filter, map, takeUntil } from 'rxjs/operators';
 import { Subject } from 'rxjs';
+import { ActivatedRoute } from '@angular/router';
+import { Location } from '@angular/common';
 
 @Component({
   selector: 'ktb-no-service-info',
   templateUrl: './ktb-no-service-info.component.html',
   styleUrls: [],
 })
-export class KtbNoServiceInfoComponent implements OnInit, OnDestroy {
+export class KtbNoServiceInfoComponent implements OnDestroy {
   private unsubscribe$: Subject<void> = new Subject();
-  public isQualityGatesOnly = false;
+  public createServiceLink = '';
 
-  constructor(private dataService: DataService) {}
-
-  ngOnInit(): void {
-    this.dataService.isQualityGatesOnly.pipe(takeUntil(this.unsubscribe$)).subscribe((isQualityGatesOnly) => {
-      this.isQualityGatesOnly = isQualityGatesOnly;
-    });
+  constructor(router: ActivatedRoute, public readonly location: Location) {
+    router.paramMap
+      .pipe(
+        map((params) => params.get('projectName')),
+        filter((projectName): projectName is string => !!projectName),
+        takeUntil(this.unsubscribe$)
+      )
+      .subscribe((projectName) => {
+        this.createServiceLink = `/project/${projectName}/settings/services/create`;
+      });
   }
 
-  ngOnDestroy(): void {
+  public ngOnDestroy(): void {
     this.unsubscribe$.next();
     this.unsubscribe$.complete();
   }

bridge/cypress/fixtures/get.projects.empty.mock.json

@@ -0,0 +1,29 @@
+{
+  "nextPageKey": "0",
+  "projects": [
+    {
+      "stages": [
+        {
+          "services": [],
+          "stageName": "dev"
+        },
+        {
+          "services": [],
+          "stageName": "staging",
+          "parentStages": ["dev"]
+        },
+        {
+          "services": [],
+          "stageName": "production",
+          "parentStages": ["staging"]
+        }
+      ],
+      "creationDate": "1631870924824247750",
+      "gitRemoteURI": "https://github.com/laneli/sockshop",
+      "gitUser": "laneli",
+      "projectName": "dynatrace",
+      "shipyard": "apiVersion: spec.keptn.sh/0.2.2\nkind: Shipyard\nmetadata:\n    name: shipyard-sockshop\nspec:\n    stages:\n        - name: dev\n          sequences:\n            - name: delivery\n              tasks:\n                - name: deployment\n                  properties:\n                    deploymentstrategy: direct\n                - name: test\n                  properties:\n                    teststrategy: functional\n                - name: evaluation\n                  properties: null\n                - name: release\n                  properties: null\n            - name: delivery-direct\n              tasks:\n                - name: deployment\n                  properties:\n                    deploymentstrategy: direct\n                - name: release\n                  properties: null\n        - name: staging\n          sequences:\n            - name: delivery\n              triggeredOn:\n                - event: dev.delivery.finished\n              tasks:\n                - name: deployment\n                  properties:\n                    deploymentstrategy: blue_green_service\n                - name: test\n                  properties:\n                    teststrategy: performance\n                - name: evaluation\n                  properties: null\n                - name: release\n                  properties: null\n            - name: rollback\n              triggeredOn:\n                - event: staging.delivery.finished\n                  selector:\n                    match:\n                        result: fail\n              tasks:\n                - name: rollback\n                  properties: null\n            - name: delivery-direct\n              triggeredOn:\n                - event: dev.delivery-direct.finished\n              tasks:\n                - name: deployment\n                  properties:\n                    deploymentstrategy: direct\n                - name: release\n                  properties: null\n        - name: production\n          sequences:\n            - name: delivery\n              triggeredOn:\n                - event: staging.delivery.finished\n              tasks:\n                - name: deployment\n                  properties:\n                    deploymentstrategy: blue_green_service\n                - name: release\n                  properties: null\n            - name: rollback\n              triggeredOn:\n                - event: production.delivery.finished\n                  selector:\n                    match:\n                        result: fail\n              tasks:\n                - name: rollback\n                  properties: null\n            - name: delivery-direct\n              triggeredOn:\n                - event: staging.delivery-direct.finished\n              tasks:\n                - name: deployment\n                  properties:\n                    deploymentstrategy: direct\n                - name: release\n                  properties: null\n            - name: remediation\n              triggeredOn:\n                - event: production.remediation.finished\n                  selector:\n                    match:\n                        evaluation.result: fail\n              tasks:\n                - name: get-action\n                  properties: null\n                - name: action\n                  properties: null\n                - name: evaluation\n                  triggeredAfter: 15m\n                  properties:\n                    timeframe: 15m\n",
+      "shipyardVersion": "spec.keptn.sh/0.2.2"
+    }
+  ]
+}

bridge/cypress/fixtures/project.empty.mock.json

@@ -0,0 +1,24 @@
+{
+  "stages": [
+    {
+      "services": [],
+      "stageName": "dev"
+    },
+    {
+      "services": [],
+      "stageName": "staging",
+      "parentStages": ["dev"]
+    },
+    {
+      "services": [],
+      "stageName": "production",
+      "parentStages": ["staging"]
+    }
+  ],
+  "creationDate": "1631870924824247750",
+  "gitRemoteURI": "https://github.com/laneli/sockshop",
+  "gitUser": "laneli",
+  "projectName": "dynatrace",
+  "shipyard": "apiVersion: spec.keptn.sh/0.2.2\nkind: Shipyard\nmetadata:\n    name: shipyard-sockshop\nspec:\n    stages:\n        - name: dev\n          sequences:\n            - name: delivery\n              tasks:\n                - name: deployment\n                  properties:\n                    deploymentstrategy: direct\n                - name: test\n                  properties:\n                    teststrategy: functional\n                - name: evaluation\n                  properties: null\n                - name: release\n                  properties: null\n            - name: delivery-direct\n              tasks:\n                - name: deployment\n                  properties:\n                    deploymentstrategy: direct\n                - name: release\n                  properties: null\n        - name: staging\n          sequences:\n            - name: delivery\n              triggeredOn:\n                - event: dev.delivery.finished\n              tasks:\n                - name: deployment\n                  properties:\n                    deploymentstrategy: blue_green_service\n                - name: test\n                  properties:\n                    teststrategy: performance\n                - name: evaluation\n                  properties: null\n                - name: release\n                  properties: null\n            - name: rollback\n              triggeredOn:\n                - event: staging.delivery.finished\n                  selector:\n                    match:\n                        result: fail\n              tasks:\n                - name: rollback\n                  properties: null\n            - name: delivery-direct\n              triggeredOn:\n                - event: dev.delivery-direct.finished\n              tasks:\n                - name: deployment\n                  properties:\n                    deploymentstrategy: direct\n                - name: release\n                  properties: null\n        - name: production\n          sequences:\n            - name: delivery\n              triggeredOn:\n                - event: staging.delivery.finished\n              tasks:\n                - name: deployment\n                  properties:\n                    deploymentstrategy: blue_green_service\n                - name: release\n                  properties: null\n            - name: rollback\n              triggeredOn:\n                - event: production.delivery.finished\n                  selector:\n                    match:\n                        result: fail\n              tasks:\n                - name: rollback\n                  properties: null\n            - name: delivery-direct\n              triggeredOn:\n                - event: staging.delivery-direct.finished\n              tasks:\n                - name: deployment\n                  properties:\n                    deploymentstrategy: direct\n                - name: release\n                  properties: null\n            - name: remediation\n              triggeredOn:\n                - event: production.remediation.finished\n                  selector:\n                    match:\n                        evaluation.result: fail\n              tasks:\n                - name: get-action\n                  properties: null\n                - name: action\n                  properties: null\n                - name: evaluation\n                  triggeredAfter: 15m\n                  properties:\n                    timeframe: 15m\n",
+  "shipyardVersion": "spec.keptn.sh/0.2.2"
+}

bridge/cypress/integration/environment.spec.ts

@@ -1,5 +1,23 @@
-import { interceptEnvironmentScreen } from '../support/intercept';
+import { interceptEmptyEnvironmentScreen, interceptEnvironmentScreen } from '../support/intercept';
 import EnvironmentPage from '../support/pageobjects/EnvironmentPage';
+import { ServicesSettingsPage } from '../support/pageobjects/ServicesSettingsPage';
+
+describe('Environment Screen empty', () => {
+  const environmentPage = new EnvironmentPage();
+  beforeEach(() => {
+    interceptEmptyEnvironmentScreen();
+    environmentPage.visit('dynatrace');
+  });
+
+  it('should redirect to create service and redirect back after creation', () => {
+    const serviceSettings = new ServicesSettingsPage();
+
+    environmentPage.clickCreateService('dev');
+    cy.location('pathname').should('eq', '/project/dynatrace/settings/services/create');
+    serviceSettings.createService('my-new-service');
+    cy.location('pathname').should('eq', '/project/dynatrace');
+  });
+});
 
 describe('Environment Screen', () => {
   const environmentPage = new EnvironmentPage();

bridge/cypress/integration/notification.spec.ts

@@ -117,8 +117,6 @@ describe('Test notifications', () => {
 
   function showSuccess(): void {
     const serviceSettings = new ServicesSettingsPage();
-
-    serviceSettings.inputService('my-new-service');
-    serviceSettings.createService();
+    serviceSettings.createService('my-new-service');
   }
 });

bridge/cypress/support/intercept.ts

@@ -1,3 +1,19 @@
+export function interceptEmptyEnvironmentScreen(): void {
+  interceptProjectBoard();
+  cy.intercept('/api/project/dynatrace?approval=true&remediation=true', { fixture: 'project.empty.mock' });
+  cy.intercept('/api/controlPlane/v1/project?disableUpstreamSync=true&pageSize=50', {
+    fixture: 'get.projects.empty.mock',
+  });
+  cy.intercept('GET', '/api/project/dynatrace/services', {
+    statusCode: 200,
+    body: [],
+  });
+  cy.intercept('POST', '/api/controlPlane/v1/project/dynatrace/service', {
+    statusCode: 200,
+    body: {},
+  });
+}
+
 export function interceptEnvironmentScreen(): void {
   const project = 'sockshop';
   const stage = 'dev';

bridge/cypress/support/pageobjects/EnvironmentPage.ts

@@ -8,6 +8,15 @@ class EnvironmentPage {
     return this;
   }
 
+  public clickCreateService(stage: string): this {
+    cy.get('ktb-selectable-tile h2')
+      .contains(stage)
+      .parentsUntil('ktb-selectable-tile')
+      .find('ktb-no-service-info a')
+      .click();
+    return this;
+  }
+
   public selectStage(stage: string): this {
     cy.get('ktb-selectable-tile h2').contains(stage).click();
     return this;

bridge/cypress/support/pageobjects/ServicesSettingsPage.ts

@@ -5,7 +5,10 @@ export class ServicesSettingsPage {
     return cy.get('input[formcontrolname="serviceName"]').type(serviceName);
   }
 
-  createService(): Chainable<JQuery<HTMLElement>> {
+  createService(serviceName?: string): Chainable<JQuery<HTMLElement>> {
+    if (serviceName) {
+      this.inputService(serviceName);
+    }
     return cy.byTestId('createServiceButton').click();
   }
 }