refactor: Make interactive tutorial work again (#2068)

* refactor: Make interactive tutorial work again * Link to pipeline tutorial from adapter tutorial * Close welcome dialog in user tests * Fix user test * Remove welcome screen click
apache · Oct 24, 2023 · 1a54649 · 1a54649
1 parent 40665f9
commit 1a54649
Show file tree

Hide file tree

Showing 37 changed files with 587 additions and 1,204 deletions.
diff --git a/ui/cypress/tests/userManagement/addUserAdmin.smoke.spec.ts b/ui/cypress/tests/userManagement/addUserAdmin.smoke.spec.ts
@@ -53,9 +53,11 @@ describe('Test User Management', () => {
         cy.switchUser(user);
 
         UserUtils.goToUserConfiguration();
+        cy.dataCy('close-tutorial-button').click();
 
         cy.switchUser(UserUtils.adminUser);
         UserUtils.goToUserConfiguration();
+
         UserUtils.deleteUser(user);
         // Validate that user is removed
         cy.dataCy('user-accounts-table-row', { timeout: 10000 }).should(

diff --git a/...connect/components/adapter-configuration/adapter-settings/adapter-settings.component.html b/...connect/components/adapter-configuration/adapter-settings/adapter-settings.component.html
@@ -84,6 +84,7 @@
             <button
                 class="stepper-button"
                 [disabled]="!specificAdapterSettingsFormValid"
+                data-cy="adapter-settings-next-button"
                 (click)="clickNext()"
                 color="accent"
                 mat-raised-button

diff --git a/...ts/adapter-configuration/schema-editor/event-property-row/event-property-row.component.ts b/...ts/adapter-configuration/schema-editor/event-property-row/event-property-row.component.ts
@@ -31,6 +31,7 @@ import {
 } from '@streampipes/platform-services';
 import { EditEventPropertyComponent } from '../../../../dialog/edit-event-property/edit-event-property.component';
 import { DialogService, PanelType } from '@streampipes/shared-ui';
+import { ShepherdService } from '../../../../../services/tour/shepherd.service';
 
 @Component({
     selector: 'sp-event-property-row',
@@ -65,6 +66,7 @@ export class EventPropertyRowComponent implements OnInit {
     constructor(
         private dialog: MatDialog,
         private dialogService: DialogService,
+        private shepherdService: ShepherdService,
     ) {}
 
     ngOnInit() {
@@ -175,6 +177,7 @@ export class EventPropertyRowComponent implements OnInit {
                 isEditable: this.isEditable,
             },
         });
+        this.shepherdService.trigger('adapter-edit-field-clicked');
 
         dialogRef.afterClosed().subscribe(refresh => {
             this.timestampProperty = this.isTimestampProperty(this.node.data);

diff --git a/...pter-configuration/schema-editor/event-schema-preview/event-schema-preview.component.html b/...pter-configuration/schema-editor/event-schema-preview/event-schema-preview.component.html
@@ -32,6 +32,7 @@
             [showTitle]="true"
             panelTitle="Result"
             fxFlex="100"
+            data-cy="connect-schema-update-preview"
         >
             <div header fxLayoutAlign="end center" fxFlex="100">
                 <button

diff --git a/...pter-configuration/start-adapter-configuration/start-adapter-configuration.component.html b/...pter-configuration/start-adapter-configuration/start-adapter-configuration.component.html
@@ -31,6 +31,7 @@
                         placeholder="Adapter Name"
                         data-cy="sp-adapter-name"
                         required
+                        (blur)="triggerTutorialAdapterNameAssigned()"
                     />
                 </mat-form-field>
                 <mat-form-field color="accent">

diff --git a/...dapter-configuration/start-adapter-configuration/start-adapter-configuration.component.ts b/...dapter-configuration/start-adapter-configuration/start-adapter-configuration.component.ts
@@ -177,8 +177,7 @@ export class StartAdapterConfigurationComponent implements OnInit {
                 startAdapterNow: this.startAdapterNow,
             },
         });
-
-        this.shepherdService.trigger('button-startAdapter');
+        this.shepherdService.trigger('adapter-settings-adapter-started');
 
         dialogRef.afterClosed().subscribe(() => {
             this.adapterStartedEmitter.emit();
@@ -196,5 +195,16 @@ export class StartAdapterConfigurationComponent implements OnInit {
     handlePersistOption(selected: boolean) {
         this.saveInDataLake = selected;
         this.findDefaultTimestamp(selected);
+        this.checkAndTriggerTutorial('adapter-persist-selected');
+    }
+
+    triggerTutorialAdapterNameAssigned() {
+        this.checkAndTriggerTutorial('adapter-name-assigned');
+    }
+
+    checkAndTriggerTutorial(actionId: string) {
+        if (this.adapterDescription.name === 'Tutorial') {
+            this.shepherdService.trigger(actionId);
+        }
     }
 }
diff --git a/ui/src/app/connect/components/data-marketplace/data-marketplace.component.html b/ui/src/app/connect/components/data-marketplace/data-marketplace.component.html
@@ -27,22 +27,6 @@
             (filterChangedEmitter)="applyFilter($event)"
         >
         </sp-connect-filter-toolbar>
-        <div
-            fxFlex="100"
-            fxLayout="row"
-            fxLayoutAlign="end center"
-            style="padding-left: 10px; padding-right: 10px; font-size: 14px"
-            class="page-container-nav"
-        >
-            <button
-                mat-icon-button
-                id="startAdapterTutorial3"
-                (click)="startAdapterTutorial3()"
-                matTooltip="Tutorial: Generic Adapter"
-            >
-                <mat-icon color="accent">school</mat-icon>
-            </button>
-        </div>
     </div>
     <div fxLayout="column" fxFlex="100">
         <sp-basic-header-title-component

diff --git a/ui/src/app/connect/components/data-marketplace/data-marketplace.component.ts b/ui/src/app/connect/components/data-marketplace/data-marketplace.component.ts
@@ -74,12 +74,10 @@ export class DataMarketplaceComponent implements OnInit {
         });
     }
 
-    startAdapterTutorial3() {
-        this.shepherdService.startAdapterTour3();
-    }
-
     selectAdapter(appId: string) {
-        this.router.navigate(['connect', 'create', appId]);
+        this.router.navigate(['connect', 'create', appId]).then(() => {
+            this.shepherdService.trigger('new-adapter-selected');
+        });
     }
 
     applyFilter(filter: AdapterFilterSettingsModel) {

diff --git a/ui/src/app/connect/components/existing-adapters/existing-adapters.component.html b/ui/src/app/connect/components/existing-adapters/existing-adapters.component.html
@@ -57,6 +57,22 @@
                 (filterChangedEmitter)="applyFilter($event)"
             >
             </sp-connect-filter-toolbar>
+            <div
+                fxFlex="100"
+                fxLayout="row"
+                fxLayoutAlign="end center"
+                style="padding-left: 10px; padding-right: 10px; font-size: 14px"
+                class="page-container-nav"
+            >
+                <button
+                    mat-icon-button
+                    id="startAdapterTutorial3"
+                    (click)="startAdapterTutorial()"
+                    matTooltip="Tutorial: Generic Adapter"
+                >
+                    <mat-icon color="accent">school</mat-icon>
+                </button>
+            </div>
             <button
                 mat-icon-button
                 matTooltip="Refresh adapters"

diff --git a/ui/src/app/connect/components/existing-adapters/existing-adapters.component.ts b/ui/src/app/connect/components/existing-adapters/existing-adapters.component.ts
@@ -50,6 +50,7 @@ import { AdapterFilterPipe } from '../../filter/adapter-filter.pipe';
 import { SpConnectRoutes } from '../../connect.routes';
 import { CanNotEditAdapterDialog } from '../../dialog/can-not-edit-adapter-dialog/can-not-edit-adapter-dialog.component';
 import { zip } from 'rxjs';
+import { ShepherdService } from '../../../services/tour/shepherd.service';
 
 @Component({
     selector: 'sp-existing-adapters',
@@ -84,7 +85,6 @@ export class ExistingAdaptersComponent implements OnInit {
     adapterMetrics: Record<string, SpMetricsEntry> = {};
 
     constructor(
-        public connectService: ConnectService,
         private adapterService: AdapterService,
         private dialogService: DialogService,
         private currentUserService: CurrentUserService,
@@ -94,6 +94,7 @@ export class ExistingAdaptersComponent implements OnInit {
         private adapterFilter: AdapterFilterPipe,
         private breadcrumbService: SpBreadcrumbService,
         private adapterMonitoringService: AdapterMonitoringService,
+        private shepherdService: ShepherdService,
     ) {}
 
     ngOnInit(): void {
@@ -308,8 +309,14 @@ export class ExistingAdaptersComponent implements OnInit {
         });
     }
 
+    startAdapterTutorial() {
+        this.shepherdService.startAdapterTour();
+    }
+
     createNewAdapter(): void {
-        this.router.navigate(['connect', 'create']);
+        this.router.navigate(['connect', 'create']).then(() => {
+            this.shepherdService.trigger('new-adapter-clicked');
+        });
     }
 
     applyFilter(filter: AdapterFilterSettingsModel) {

diff --git a/...-property/components/edit-schema-transformation/edit-schema-transformation.component.html b/...-property/components/edit-schema-transformation/edit-schema-transformation.component.html
@@ -34,6 +34,7 @@
                     name="runtimename"
                     id="runtimename"
                     data-cy="connect-edit-field-runtime-name"
+                    (blur)="triggerTutorialStep()"
                     [(ngModel)]="cachedProperty.runtimeName"
                 />
             </mat-form-field>

diff --git a/...nt-property/components/edit-schema-transformation/edit-schema-transformation.component.ts b/...nt-property/components/edit-schema-transformation/edit-schema-transformation.component.ts
@@ -29,6 +29,7 @@ import {
 } from 'rxjs/operators';
 import { UntypedFormControl } from '@angular/forms';
 import { Observable } from 'rxjs';
+import { ShepherdService } from '../../../../../services/tour/shepherd.service';
 
 @Component({
     selector: 'sp-edit-schema-transformation',
@@ -52,7 +53,10 @@ export class EditSchemaTransformationComponent implements OnInit {
     domainPropertyControl = new UntypedFormControl();
     semanticTypes: Observable<string[]>;
 
-    constructor(private semanticTypesService: SemanticTypesService) {}
+    constructor(
+        private semanticTypesService: SemanticTypesService,
+        private shepherdService: ShepherdService,
+    ) {}
 
     ngOnInit(): void {
         this.semanticTypes = this.domainPropertyControl.valueChanges.pipe(
@@ -81,4 +85,11 @@ export class EditSchemaTransformationComponent implements OnInit {
         }
         this.timestampSemanticsChanged.emit(this.isTimestampProperty);
     }
+
+    triggerTutorialStep(): void {
+        console.log('lu');
+        if (this.cachedProperty.runtimeName === 'temp') {
+            this.shepherdService.trigger('adapter-runtime-name-changed');
+        }
+    }
 }
diff --git a/ui/src/app/connect/dialog/edit-event-property/edit-event-property.component.ts b/ui/src/app/connect/dialog/edit-event-property/edit-event-property.component.ts
@@ -42,6 +42,7 @@ import { DialogRef } from '@streampipes/shared-ui';
 import { EditSchemaTransformationComponent } from './components/edit-schema-transformation/edit-schema-transformation.component';
 import { EditValueTransformationComponent } from './components/edit-value-transformation/edit-value-transformation.component';
 import { EditUnitTransformationComponent } from './components/edit-unit-transformation/edit-unit-transformation.component';
+import { ShepherdService } from '../../../services/tour/shepherd.service';
 
 @Component({
     selector: 'sp-edit-event-property',
@@ -77,6 +78,7 @@ export class EditEventPropertyComponent implements OnInit {
         private dataTypeService: DataTypesService,
         private semanticTypeUtilsService: SemanticTypeUtilsService,
         private semanticTypesService: SemanticTypesService,
+        private shepherdService: ShepherdService,
     ) {}
 
     ngOnInit(): void {
@@ -206,6 +208,7 @@ export class EditEventPropertyComponent implements OnInit {
             ).operator;
         }
         this.dialogRef.close({ data: this.property });
+        this.shepherdService.trigger('adapter-field-changed');
     }
 
     enableSaveBtn($event: boolean) {

diff --git a/...components/pipeline-element-icon-stand-row/pipeline-element-icon-stand-row.component.html b/...components/pipeline-element-icon-stand-row/pipeline-element-icon-stand-row.component.html
@@ -19,7 +19,7 @@
     fxLayout="row"
     class="draggable-pipeline-element"
     fxFlex="100"
-    id="{{ element.appId }}"
+    id="{{ element.appId || element.name.toLowerCase().replaceAll(' ', '_') }}"
     [attr.data-pe]="element.elementId"
     (mouseenter)="updateMouseOver(element.name)"
     (mouseleave)="updateMouseOver('')"

diff --git a/.../editor/components/pipeline-element-icon-stand/pipeline-element-icon-stand.component.html b/.../editor/components/pipeline-element-icon-stand/pipeline-element-icon-stand.component.html
@@ -56,15 +56,6 @@
                     </mat-form-field>
                 </div>
                 <span fxFlex></span>
-                <button
-                    mat-icon-button
-                    color="accent"
-                    (click)="startCreatePipelineTour()"
-                    [matTooltip]="'Tutorial'"
-                    style="margin-right: 5px"
-                >
-                    <i class="material-icons"> school </i>
-                </button>
             </div>
         </div>
     </div>

diff --git a/...pp/editor/components/pipeline-element-icon-stand/pipeline-element-icon-stand.component.ts b/...pp/editor/components/pipeline-element-icon-stand/pipeline-element-icon-stand.component.ts
@@ -16,14 +16,7 @@
  *
  */
 
-import {
-    AfterViewInit,
-    Component,
-    EventEmitter,
-    Input,
-    OnInit,
-    Output,
-} from '@angular/core';
+import { AfterViewInit, Component, Input, OnInit } from '@angular/core';
 import { RestApi } from '../../../services/rest-api.service';
 import {
     PeCategory,
@@ -69,9 +62,6 @@ export class PipelineElementIconStandComponent
     @Input()
     allElements: PipelineElementUnion[];
 
-    @Output()
-    startTourEmitter: EventEmitter<void> = new EventEmitter<void>();
-
     elementFilter = '';
     allCategories: Map<PipelineElementType, PeCategory[]> = new Map();
     categoriesReady = false;
@@ -177,10 +167,6 @@ export class PipelineElementIconStandComponent
         this.makeDraggable();
     }
 
-    startCreatePipelineTour() {
-        this.startTourEmitter.emit();
-    }
-
     changeSorting(availableType: any, sortMode: string) {
         availableType.sort = sortMode;
         this.makeDraggable();

diff --git a/ui/src/app/editor/editor.component.html b/ui/src/app/editor/editor.component.html
@@ -48,7 +48,6 @@
                 <sp-pipeline-element-icon-stand
                     [allElements]="allElements"
                     *ngIf="allElementsLoaded"
-                    (startTourEmitter)="startCreatePipelineTour()"
                 >
                 </sp-pipeline-element-icon-stand>
             </div>