This is an automated email from the ASF dual-hosted git repository. zehnder pushed a commit to branch 4287-migrate-angular-ui-from-constructor-injection-to-inject in repository https://gitbox.apache.org/repos/asf/streampipes.git
commit 8f85bab02cc677e2c16ef2af159b171183fb4940 Author: Philipp Zehnder <[email protected]> AuthorDate: Tue Mar 24 10:00:35 2026 +0100 migrate editor UI to inject() --- .../custom-output-strategy.component.ts | 8 +++--- .../user-defined-output.component.ts | 6 +++-- ...ine-assembly-drawing-area-pan-zoom.component.ts | 9 ++++--- .../pipeline-assembly-drawing-area.component.ts | 17 ++++++------ ...ne-assembly-options-pipeline-cache.component.ts | 10 +++----- .../pipeline-assembly-options.component.ts | 15 +++++------ .../pipeline-assembly.component.ts | 30 ++++++++++++---------- .../pipeline-element-icon-stand-row.component.ts | 6 ++--- .../pipeline-element-icon-stand.component.ts | 10 +++----- .../pipeline-element-options.component.ts | 19 ++++++++------ .../pipeline-element-preview.component.ts | 6 ++--- .../components/pipeline/pipeline.component.ts | 29 +++++++++++---------- .../add-template-dialog.component.ts | 11 ++++---- .../compatible-elements.component.ts | 11 ++++---- .../editor/dialog/customize/customize.component.ts | 23 +++++++++-------- .../matching-error/matching-error.component.ts | 6 ++--- .../missing-elements-for-tutorial.component.ts | 9 +++---- .../pipeline-element-discovery.component.ts | 11 ++++---- ui/src/app/editor/editor.component.ts | 22 ++++++++-------- ui/src/app/editor/services/editor.service.ts | 14 +++++----- .../editor/services/jsplumb-endpoint.service.ts | 4 +-- .../app/editor/services/jsplumb-factory.service.ts | 12 ++++----- ui/src/app/editor/services/jsplumb.service.ts | 12 ++++----- .../app/editor/services/object-provider.service.ts | 8 +++--- .../services/pipeline-positioning.service.ts | 10 +++----- .../app/editor/services/pipeline-style.service.ts | 8 +++--- .../editor/services/pipeline-validation.service.ts | 6 ++--- ui/src/app/editor/utils/style-sanitizer.ts | 4 +-- 28 files changed, 163 insertions(+), 173 deletions(-) diff --git a/ui/src/app/editor/components/output-strategy/custom-output/custom-output-strategy.component.ts b/ui/src/app/editor/components/output-strategy/custom-output/custom-output-strategy.component.ts index 548a9e140e..1183e35ea4 100644 --- a/ui/src/app/editor/components/output-strategy/custom-output/custom-output-strategy.component.ts +++ b/ui/src/app/editor/components/output-strategy/custom-output/custom-output-strategy.component.ts @@ -16,7 +16,7 @@ * */ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, inject } from '@angular/core'; import { CustomOutputStrategy } from '@streampipes/platform-services'; import { BaseOutputStrategy } from '../base/BaseOutputStrategy'; import { PropertySelectorService } from '../../../../services/property-selector.service'; @@ -47,13 +47,11 @@ export class CustomOutputStrategyComponent extends BaseOutputStrategy<CustomOutputStrategy> implements OnInit { + private propertySelectorService = inject(PropertySelectorService); + collectedPropertiesFirstStream: any; collectedPropertiesSecondStream: any; - constructor(private propertySelectorService: PropertySelectorService) { - super(); - } - ngOnInit() { this.parentForm.addControl('output-strategy', new UntypedFormControl()); this.collectedPropertiesFirstStream = diff --git a/ui/src/app/editor/components/output-strategy/user-defined-output/user-defined-output.component.ts b/ui/src/app/editor/components/output-strategy/user-defined-output/user-defined-output.component.ts index 3563bd911b..2ac2e5f7d3 100644 --- a/ui/src/app/editor/components/output-strategy/user-defined-output/user-defined-output.component.ts +++ b/ui/src/app/editor/components/output-strategy/user-defined-output/user-defined-output.component.ts @@ -16,7 +16,7 @@ * */ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, inject } from '@angular/core'; import { BaseOutputStrategy } from '../base/BaseOutputStrategy'; import { DataType, @@ -63,9 +63,11 @@ export class UserDefinedOutputStrategyComponent extends BaseOutputStrategy<UserDefinedOutputStrategy> implements OnInit { + private idGeneratorService = inject(IdGeneratorService); + primitiveClasses = []; - constructor(private idGeneratorService: IdGeneratorService) { + constructor() { super(); this.primitiveClasses = [ { label: 'String', id: DataType.STRING }, diff --git a/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly-drawing-area/pipeline-assembly-drawing-area-pan-zoom/pipeline-assembly-drawing-area-pan-zoom.component.ts b/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly-drawing-area/pipeline-assembly-drawing-area-pan-zoom/pipeline-assembly-drawing-area-pan-zoom.component.ts index 001cdc8b3d..fb2950cd4a 100644 --- a/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly-drawing-area/pipeline-assembly-drawing-area-pan-zoom/pipeline-assembly-drawing-area-pan-zoom.component.ts +++ b/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly-drawing-area/pipeline-assembly-drawing-area-pan-zoom/pipeline-assembly-drawing-area-pan-zoom.component.ts @@ -23,6 +23,7 @@ import { Input, OnDestroy, OnInit, + inject, } from '@angular/core'; import { JsplumbBridge } from '../../../../services/jsplumb-bridge.service'; import Panzoom, { PanzoomObject } from '@panzoom/panzoom'; @@ -39,6 +40,10 @@ import { MatDivider } from '@angular/material/divider'; export class PipelineAssemblyDrawingAreaPanZoomComponent implements OnInit, AfterViewInit, OnDestroy { + private pipelineElementDraggedService = inject( + PipelineElementDraggedService, + ); + @Input() jsplumbBridge: JsplumbBridge; @@ -49,10 +54,6 @@ export class PipelineAssemblyDrawingAreaPanZoomComponent moveSub: Subscription; currentZoomLevel = 1; - constructor( - private pipelineElementDraggedService: PipelineElementDraggedService, - ) {} - ngOnInit() { this.moveSub = this.pipelineElementDraggedService.pipelineElementMovedSubject.subscribe( diff --git a/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly-drawing-area/pipeline-assembly-drawing-area.component.ts b/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly-drawing-area/pipeline-assembly-drawing-area.component.ts index 193f8230ea..3c8c16f129 100644 --- a/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly-drawing-area/pipeline-assembly-drawing-area.component.ts +++ b/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly-drawing-area/pipeline-assembly-drawing-area.component.ts @@ -26,6 +26,7 @@ import { OnInit, Output, ViewChild, + inject, } from '@angular/core'; import { JsplumbBridge } from '../../../services/jsplumb-bridge.service'; import { PipelineComponent } from '../../pipeline/pipeline.component'; @@ -59,6 +60,13 @@ import { ErrorHintComponent } from '../../../../core-ui/error-hint/error-hint.co ], }) export class PipelineAssemblyDrawingAreaComponent implements OnInit, OnDestroy { + pipelineValidationService = inject(PipelineValidationService); + private ngZone = inject(NgZone); + private editorService = inject(EditorService); + private pipelinePositioningService = inject(PipelinePositioningService); + private livePreviewService = inject(LivePreviewService); + private objectProvider = inject(ObjectProvider); + @Input() jsplumbBridge: JsplumbBridge; @@ -97,15 +105,6 @@ export class PipelineAssemblyDrawingAreaComponent implements OnInit, OnDestroy { zoomComponent: PipelineAssemblyDrawingAreaPanZoomComponent; @ViewChild('outerCanvas') pipelineCanvas: ElementRef; - constructor( - public pipelineValidationService: PipelineValidationService, - private ngZone: NgZone, - private editorService: EditorService, - private pipelinePositioningService: PipelinePositioningService, - private livePreviewService: LivePreviewService, - private objectProvider: ObjectProvider, - ) {} - ngOnInit(): void { if (this.rawPipelineModel.length > 0) { this.displayPipelineInEditor( diff --git a/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly-options/pipeline-assembly-options-pipeline-cache/pipeline-assembly-options-pipeline-cache.component.ts b/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly-options/pipeline-assembly-options-pipeline-cache/pipeline-assembly-options-pipeline-cache.component.ts index a0f68e3752..b1de6030d6 100644 --- a/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly-options/pipeline-assembly-options-pipeline-cache/pipeline-assembly-options-pipeline-cache.component.ts +++ b/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly-options/pipeline-assembly-options-pipeline-cache/pipeline-assembly-options-pipeline-cache.component.ts @@ -16,7 +16,7 @@ * */ -import { Component, Input } from '@angular/core'; +import { Component, Input, inject } from '@angular/core'; import { PipelineElementConfig } from '../../../../model/editor.model'; import { forkJoin } from 'rxjs'; import { PipelinePositioningService } from '../../../../services/pipeline-positioning.service'; @@ -43,6 +43,9 @@ import { TranslatePipe } from '@ngx-translate/core'; ], }) export class PipelineAssemblyOptionsPipelineCacheComponent { + private pipelinePositioningService = inject(PipelinePositioningService); + private editorService = inject(EditorService); + pipelineCached = false; pipelineCacheRunning = false; @@ -52,11 +55,6 @@ export class PipelineAssemblyOptionsPipelineCacheComponent { @Input() pipelineCanvasMetadata: PipelineCanvasMetadata; - constructor( - private pipelinePositioningService: PipelinePositioningService, - private editorService: EditorService, - ) {} - triggerPipelineCacheUpdate() { setTimeout(() => { this.pipelineCacheRunning = true; diff --git a/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly-options/pipeline-assembly-options.component.ts b/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly-options/pipeline-assembly-options.component.ts index 55bd424825..fe591aebc3 100644 --- a/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly-options/pipeline-assembly-options.component.ts +++ b/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly-options/pipeline-assembly-options.component.ts @@ -22,6 +22,7 @@ import { Input, Output, ViewChild, + inject, } from '@angular/core'; import { JsplumbBridge } from '../../../services/jsplumb-bridge.service'; import { PipelinePositioningService } from '../../../services/pipeline-positioning.service'; @@ -69,6 +70,12 @@ import { TranslatePipe } from '@ngx-translate/core'; ], }) export class PipelineAssemblyOptionsComponent { + editorService = inject(EditorService); + pipelineValidationService = inject(PipelineValidationService); + private pipelinePositioningService = inject(PipelinePositioningService); + private dialog = inject(MatDialog); + private dialogService = inject(DialogService); + @Input() jsplumbBridge: JsplumbBridge; @@ -100,14 +107,6 @@ export class PipelineAssemblyOptionsComponent { @ViewChild('assemblyOptionsPipelineCacheComponent') assemblyOptionsCacheComponent: PipelineAssemblyOptionsPipelineCacheComponent; - constructor( - public editorService: EditorService, - public pipelineValidationService: PipelineValidationService, - private pipelinePositioningService: PipelinePositioningService, - private dialog: MatDialog, - private dialogService: DialogService, - ) {} - autoLayout() { this.pipelinePositioningService.layoutGraph( '#assembly', diff --git a/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly.component.ts b/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly.component.ts index 8fd3cd0769..bfae6c4e65 100644 --- a/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly.component.ts +++ b/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly.component.ts @@ -16,7 +16,13 @@ * */ -import { AfterViewInit, Component, Input, ViewChild } from '@angular/core'; +import { + AfterViewInit, + Component, + Input, + ViewChild, + inject, +} from '@angular/core'; import { JsplumbBridge } from '../../services/jsplumb-bridge.service'; import { PipelinePositioningService } from '../../services/pipeline-positioning.service'; import { PipelineValidationService } from '../../services/pipeline-validation.service'; @@ -57,6 +63,16 @@ import { FlexDirective } from '@ngbracket/ngx-layout/flex'; ], }) export class PipelineAssemblyComponent implements AfterViewInit { + private jsPlumbFactoryService = inject(JsplumbFactoryService); + private pipelinePositioningService = inject(PipelinePositioningService); + private objectProvider = inject(ObjectProvider); + editorService = inject(EditorService); + pipelineValidationService = inject(PipelineValidationService); + private dialogService = inject(DialogService); + private router = inject(Router); + private jsplumbService = inject(JsplumbService); + private translateService = inject(TranslateService); + @Input() rawPipelineModel: PipelineElementConfig[]; @@ -82,18 +98,6 @@ export class PipelineAssemblyComponent implements AfterViewInit { @ViewChild('drawingAreaComponent') drawingAreaComponent: PipelineAssemblyDrawingAreaComponent; - constructor( - private jsPlumbFactoryService: JsplumbFactoryService, - private pipelinePositioningService: PipelinePositioningService, - private objectProvider: ObjectProvider, - public editorService: EditorService, - public pipelineValidationService: PipelineValidationService, - private dialogService: DialogService, - private router: Router, - private jsplumbService: JsplumbService, - private translateService: TranslateService, - ) {} - ngAfterViewInit() { this.jsplumbBridge = this.jsPlumbFactoryService.getJsplumbBridge( this.readonly, diff --git a/ui/src/app/editor/components/pipeline-element-icon-stand/pipeline-element-icon-stand-row/pipeline-element-icon-stand-row.component.ts b/ui/src/app/editor/components/pipeline-element-icon-stand/pipeline-element-icon-stand-row/pipeline-element-icon-stand-row.component.ts index b9fda96d27..b9b761246d 100644 --- a/ui/src/app/editor/components/pipeline-element-icon-stand/pipeline-element-icon-stand-row/pipeline-element-icon-stand-row.component.ts +++ b/ui/src/app/editor/components/pipeline-element-icon-stand/pipeline-element-icon-stand-row/pipeline-element-icon-stand-row.component.ts @@ -16,7 +16,7 @@ * */ -import { Component, Input, OnInit } from '@angular/core'; +import { Component, Input, OnInit, inject } from '@angular/core'; import { PipelineElementType, PipelineElementUnion, @@ -50,6 +50,8 @@ import { MatButton } from '@angular/material/button'; ], }) export class PipelineElementIconStandRowComponent implements OnInit { + private editorService = inject(EditorService); + @Input() element: PipelineElementUnion; @@ -58,8 +60,6 @@ export class PipelineElementIconStandRowComponent implements OnInit { currentMouseOver = false; - constructor(private editorService: EditorService) {} - ngOnInit(): void { const activeType = PipelineElementTypeUtils.fromClassName( this.element['@class'], diff --git a/ui/src/app/editor/components/pipeline-element-icon-stand/pipeline-element-icon-stand.component.ts b/ui/src/app/editor/components/pipeline-element-icon-stand/pipeline-element-icon-stand.component.ts index e5864ad192..8c5f62b3ea 100644 --- a/ui/src/app/editor/components/pipeline-element-icon-stand/pipeline-element-icon-stand.component.ts +++ b/ui/src/app/editor/components/pipeline-element-icon-stand/pipeline-element-icon-stand.component.ts @@ -16,7 +16,7 @@ * */ -import { AfterViewInit, Component, Input, OnInit } from '@angular/core'; +import { AfterViewInit, Component, Input, OnInit, inject } from '@angular/core'; import { PeCategory, PipelineElementType, @@ -78,6 +78,9 @@ import { PipelineElementTypeFilterPipe } from '../../services/pipeline-element-t export class PipelineElementIconStandComponent implements OnInit, AfterViewInit { + private editorService = inject(EditorService); + private router = inject(Router); + availableTypes = [ { title: 'Data Streams', @@ -114,11 +117,6 @@ export class PipelineElementIconStandComponent description: '', }; - constructor( - private editorService: EditorService, - private router: Router, - ) {} - ngOnInit(): void { this.loadOptions(); } diff --git a/ui/src/app/editor/components/pipeline-element-options/pipeline-element-options.component.ts b/ui/src/app/editor/components/pipeline-element-options/pipeline-element-options.component.ts index 0222cc6774..e251d03133 100644 --- a/ui/src/app/editor/components/pipeline-element-options/pipeline-element-options.component.ts +++ b/ui/src/app/editor/components/pipeline-element-options/pipeline-element-options.component.ts @@ -25,6 +25,7 @@ import { OnDestroy, OnInit, Output, + inject, } from '@angular/core'; import { PipelineElementRecommendationService } from '../../services/pipeline-element-recommendation.service'; import { ObjectProvider } from '../../services/object-provider.service'; @@ -66,6 +67,15 @@ import { TranslatePipe } from '@ngx-translate/core'; ], }) export class PipelineElementOptionsComponent implements OnInit, OnDestroy { + private objectProvider = inject(ObjectProvider); + private pipelineElementRecommendationService = inject( + PipelineElementRecommendationService, + ); + private dialogService = inject(DialogService); + private editorService = inject(EditorService); + private jsplumbFactoryService = inject(JsplumbFactoryService); + private restApi = inject(RestApi); + recommendationsAvailable: any = false; possibleElements: PipelineElementUnion[]; isDataSource: boolean; @@ -103,14 +113,7 @@ export class PipelineElementOptionsComponent implements OnInit, OnDestroy { jsplumbBridge: JsplumbBridge; - constructor( - private objectProvider: ObjectProvider, - private pipelineElementRecommendationService: PipelineElementRecommendationService, - private dialogService: DialogService, - private editorService: EditorService, - private jsplumbFactoryService: JsplumbFactoryService, - private restApi: RestApi, - ) { + constructor() { this.recommendationsAvailable = false; this.possibleElements = []; this.jsplumbBridge = this.jsplumbFactoryService.getJsplumbBridge(false); diff --git a/ui/src/app/editor/components/pipeline-element-preview/pipeline-element-preview.component.ts b/ui/src/app/editor/components/pipeline-element-preview/pipeline-element-preview.component.ts index c8e2ac84b6..6dc4d14dbf 100644 --- a/ui/src/app/editor/components/pipeline-element-preview/pipeline-element-preview.component.ts +++ b/ui/src/app/editor/components/pipeline-element-preview/pipeline-element-preview.component.ts @@ -16,7 +16,7 @@ * */ -import { Component, Input, OnDestroy, OnInit } from '@angular/core'; +import { Component, Input, OnDestroy, OnInit, inject } from '@angular/core'; import { Subscription } from 'rxjs'; import { KeyValue, KeyValuePipe } from '@angular/common'; import { @@ -45,6 +45,8 @@ import { TranslatePipe } from '@ngx-translate/core'; ], }) export class PipelineElementPreviewComponent implements OnInit, OnDestroy { + private livePreviewService = inject(LivePreviewService); + @Input() pipelinePreview: PipelinePreviewModel; @@ -55,8 +57,6 @@ export class PipelineElementPreviewComponent implements OnInit, OnDestroy { runtimeDataError = false; previewSub: Subscription; - constructor(private livePreviewService: LivePreviewService) {} - ngOnInit(): void { this.getLatestRuntimeInfo(); } diff --git a/ui/src/app/editor/components/pipeline/pipeline.component.ts b/ui/src/app/editor/components/pipeline/pipeline.component.ts index 726a6e06d9..4ae6f00109 100644 --- a/ui/src/app/editor/components/pipeline/pipeline.component.ts +++ b/ui/src/app/editor/components/pipeline/pipeline.component.ts @@ -30,6 +30,7 @@ import { OnDestroy, OnInit, Output, + inject, } from '@angular/core'; import { InvocablePipelineElementUnion, @@ -94,6 +95,19 @@ import { EnabledPipelineElementFilter } from '../../filter/enabled-pipeline-elem ], }) export class PipelineComponent implements OnInit, OnDestroy { + private jsplumbService = inject(JsplumbService); + private pipelineEditorService = inject(PipelineEditorService); + private jsplumbFactoryService = inject(JsplumbFactoryService); + private objectProvider = inject(ObjectProvider); + private editorService = inject(EditorService); + private idGeneratorService = inject(IdGeneratorService); + private shepherdService = inject(ShepherdService); + private pipelineStyleService = inject(PipelineStyleService); + private pipelineValidationService = inject(PipelineValidationService); + private dialogService = inject(DialogService); + private dialog = inject(MatDialog); + private ngZone = inject(NgZone); + @Input() pipelineValid: boolean; @@ -133,20 +147,7 @@ export class PipelineComponent implements OnInit, OnDestroy { shouldOpenCustomizeSettings = false; - constructor( - private jsplumbService: JsplumbService, - private pipelineEditorService: PipelineEditorService, - private jsplumbFactoryService: JsplumbFactoryService, - private objectProvider: ObjectProvider, - private editorService: EditorService, - private idGeneratorService: IdGeneratorService, - private shepherdService: ShepherdService, - private pipelineStyleService: PipelineStyleService, - private pipelineValidationService: PipelineValidationService, - private dialogService: DialogService, - private dialog: MatDialog, - private ngZone: NgZone, - ) { + constructor() { this.currentPipelineModel = new Pipeline(); this.idCounter = 0; diff --git a/ui/src/app/editor/dialog/add-template-dialog/add-template-dialog.component.ts b/ui/src/app/editor/dialog/add-template-dialog/add-template-dialog.component.ts index 3857fe75d5..5187c594e3 100644 --- a/ui/src/app/editor/dialog/add-template-dialog/add-template-dialog.component.ts +++ b/ui/src/app/editor/dialog/add-template-dialog/add-template-dialog.component.ts @@ -16,7 +16,7 @@ * */ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, inject } from '@angular/core'; import { CompactPipelineTemplate, PipelineTemplateGenerationRequest, @@ -47,12 +47,11 @@ import { TranslatePipe } from '@ngx-translate/core'; ], }) export class AddTemplateDialogComponent implements OnInit { - pipelineTemplates: CompactPipelineTemplate[] = []; + private pipelineTemplateService = inject(PipelineTemplateService); + private dialogRef = + inject<DialogRef<AddTemplateDialogComponent>>(DialogRef); - constructor( - private pipelineTemplateService: PipelineTemplateService, - private dialogRef: DialogRef<AddTemplateDialogComponent>, - ) {} + pipelineTemplates: CompactPipelineTemplate[] = []; ngOnInit() { this.pipelineTemplateService diff --git a/ui/src/app/editor/dialog/compatible-elements/compatible-elements.component.ts b/ui/src/app/editor/dialog/compatible-elements/compatible-elements.component.ts index 1e221bef76..a4b88f47ec 100644 --- a/ui/src/app/editor/dialog/compatible-elements/compatible-elements.component.ts +++ b/ui/src/app/editor/dialog/compatible-elements/compatible-elements.component.ts @@ -16,7 +16,7 @@ * */ -import { Component, Input, OnInit } from '@angular/core'; +import { Component, Input, OnInit, inject } from '@angular/core'; import { DialogRef, FormLabelComponent, @@ -53,6 +53,10 @@ import { TranslatePipe } from '@ngx-translate/core'; ], }) export class CompatibleElementsComponent implements OnInit { + private dialogRef = + inject<DialogRef<CompatibleElementsComponent>>(DialogRef); + private JsPlumbService = inject(JsplumbService); + @Input() rawPipelineModel: PipelineElementConfig[]; @@ -64,11 +68,6 @@ export class CompatibleElementsComponent implements OnInit { styles: any[] = []; - constructor( - private dialogRef: DialogRef<CompatibleElementsComponent>, - private JsPlumbService: JsplumbService, - ) {} - ngOnInit() { this.possibleElements.sort((a, b) => a.name.localeCompare(b.name)); this.possibleElements.forEach(pe => { diff --git a/ui/src/app/editor/dialog/customize/customize.component.ts b/ui/src/app/editor/dialog/customize/customize.component.ts index 014f259894..2e9cb750c8 100644 --- a/ui/src/app/editor/dialog/customize/customize.component.ts +++ b/ui/src/app/editor/dialog/customize/customize.component.ts @@ -23,6 +23,7 @@ import { Input, OnInit, ViewEncapsulation, + inject, } from '@angular/core'; import { InvocablePipelineElementUnion, @@ -94,6 +95,17 @@ import { TranslatePipe } from '@ngx-translate/core'; ], }) export class CustomizeComponent implements OnInit, AfterViewInit { + private dialogRef = inject<DialogRef<CustomizeComponent>>(DialogRef); + private jsPlumbService = inject(JsplumbService); + private shepherdService = inject(ShepherdService); + private fb = inject(UntypedFormBuilder); + private changeDetectorRef = inject(ChangeDetectorRef); + private pipelineElementTemplateService = inject( + PipelineElementTemplateService, + ); + private pipelineStyleService = inject(PipelineStyleService); + private staticPropertyUtils = inject(StaticPropertyUtilService); + @Input() pipelineElement: PipelineElementConfig; @@ -122,17 +134,6 @@ export class CustomizeComponent implements OnInit, AfterViewInit { templateConfigs: Map<string, any>[] = []; completedConfigurations: ConfigurationInfo[] = []; - constructor( - private dialogRef: DialogRef<CustomizeComponent>, - private jsPlumbService: JsplumbService, - private shepherdService: ShepherdService, - private fb: UntypedFormBuilder, - private changeDetectorRef: ChangeDetectorRef, - private pipelineElementTemplateService: PipelineElementTemplateService, - private pipelineStyleService: PipelineStyleService, - private staticPropertyUtils: StaticPropertyUtilService, - ) {} - ngOnInit(): void { this.originalDialogWidth = this.dialogRef.currentConfig().width; this.cachedPipelineElement = this.jsPlumbService.clone( diff --git a/ui/src/app/editor/dialog/matching-error/matching-error.component.ts b/ui/src/app/editor/dialog/matching-error/matching-error.component.ts index d0d7c39afe..4257ca9e42 100644 --- a/ui/src/app/editor/dialog/matching-error/matching-error.component.ts +++ b/ui/src/app/editor/dialog/matching-error/matching-error.component.ts @@ -16,7 +16,7 @@ * */ -import { Component, Input } from '@angular/core'; +import { Component, Input, inject } from '@angular/core'; import { DialogRef, SpAlertBannerComponent } from '@streampipes/shared-ui'; import { Notification } from '@streampipes/platform-services'; import { LayoutDirective } from '@ngbracket/ngx-layout/flex'; @@ -36,14 +36,14 @@ import { TranslatePipe } from '@ngx-translate/core'; ], }) export class MatchingErrorComponent { + private dialogRef = inject<DialogRef<MatchingErrorComponent>>(DialogRef); + @Input() notifications: Notification[]; msg: any; statusDetailsVisible: any; - constructor(private dialogRef: DialogRef<MatchingErrorComponent>) {} - close() { this.dialogRef.close(); } diff --git a/ui/src/app/editor/dialog/missing-elements-for-tutorial/missing-elements-for-tutorial.component.ts b/ui/src/app/editor/dialog/missing-elements-for-tutorial/missing-elements-for-tutorial.component.ts index cf62365d1e..b88d0820f4 100644 --- a/ui/src/app/editor/dialog/missing-elements-for-tutorial/missing-elements-for-tutorial.component.ts +++ b/ui/src/app/editor/dialog/missing-elements-for-tutorial/missing-elements-for-tutorial.component.ts @@ -16,7 +16,7 @@ * */ -import { Component, Input } from '@angular/core'; +import { Component, Input, inject } from '@angular/core'; import { DialogRef } from '@streampipes/shared-ui'; import { FlexDirective, LayoutDirective } from '@ngbracket/ngx-layout/flex'; import { MatDivider } from '@angular/material/divider'; @@ -35,13 +35,12 @@ import { TranslatePipe } from '@ngx-translate/core'; ], }) export class MissingElementsForTutorialComponent { + private dialogRef = + inject<DialogRef<MissingElementsForTutorialComponent>>(DialogRef); + @Input() missingElementsForTutorial: any[]; - constructor( - private dialogRef: DialogRef<MissingElementsForTutorialComponent>, - ) {} - close() { this.dialogRef.close(); } diff --git a/ui/src/app/editor/dialog/pipeline-element-discovery/pipeline-element-discovery.component.ts b/ui/src/app/editor/dialog/pipeline-element-discovery/pipeline-element-discovery.component.ts index c4d14f4ca1..1fe4bb8cec 100644 --- a/ui/src/app/editor/dialog/pipeline-element-discovery/pipeline-element-discovery.component.ts +++ b/ui/src/app/editor/dialog/pipeline-element-discovery/pipeline-element-discovery.component.ts @@ -16,7 +16,7 @@ * */ -import { Component, Input, OnInit } from '@angular/core'; +import { Component, Input, OnInit, inject } from '@angular/core'; import { DialogRef, FormLabelComponent, @@ -55,6 +55,10 @@ import { MatButton } from '@angular/material/button'; ], }) export class PipelineElementDiscoveryComponent implements OnInit { + private dialogRef = + inject<DialogRef<PipelineElementDiscoveryComponent>>(DialogRef); + private JsPlumbService = inject(JsplumbService); + @Input() rawPipelineModel: PipelineElementConfig[]; @@ -63,11 +67,6 @@ export class PipelineElementDiscoveryComponent implements OnInit { styles: any[] = []; - constructor( - private dialogRef: DialogRef<PipelineElementDiscoveryComponent>, - private JsPlumbService: JsplumbService, - ) {} - ngOnInit() { this.currentElements.sort((a, b) => a.name.localeCompare(b.name)); this.currentElements.forEach(pe => { diff --git a/ui/src/app/editor/editor.component.ts b/ui/src/app/editor/editor.component.ts index 2aeccfdb7e..5a381a5342 100644 --- a/ui/src/app/editor/editor.component.ts +++ b/ui/src/app/editor/editor.component.ts @@ -16,7 +16,7 @@ * */ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, inject } from '@angular/core'; import { Pipeline, PipelineCanvasMetadata, @@ -64,6 +64,16 @@ import { TranslatePipe } from '@ngx-translate/core'; ], }) export class EditorComponent implements OnInit { + private pipelineElementService = inject(PipelineElementService); + private activatedRoute = inject(ActivatedRoute); + private breadcrumbService = inject(SpBreadcrumbService); + private editorService = inject(EditorService); + private pipelineService = inject(PipelineService); + private jsplumbService = inject(JsplumbService); + private pipelineCanvasMetadataService = inject( + PipelineCanvasMetadataService, + ); + allElements: PipelineElementUnion[] = []; rawPipelineModel: PipelineElementConfig[] = []; @@ -74,16 +84,6 @@ export class EditorComponent implements OnInit { pipelineCanvasMetadata: PipelineCanvasMetadata; pipelineCanvasMetadataAvailable: boolean; - constructor( - private pipelineElementService: PipelineElementService, - private activatedRoute: ActivatedRoute, - private breadcrumbService: SpBreadcrumbService, - private editorService: EditorService, - private pipelineService: PipelineService, - private jsplumbService: JsplumbService, - private pipelineCanvasMetadataService: PipelineCanvasMetadataService, - ) {} - ngOnInit() { const pipelineId = this.activatedRoute.snapshot.params.pipelineId; if (pipelineId) { diff --git a/ui/src/app/editor/services/editor.service.ts b/ui/src/app/editor/services/editor.service.ts index b232d8ca08..733a0103a2 100644 --- a/ui/src/app/editor/services/editor.service.ts +++ b/ui/src/app/editor/services/editor.service.ts @@ -16,7 +16,7 @@ * */ -import { Injectable } from '@angular/core'; +import { Injectable, inject } from '@angular/core'; import { HttpClient, HttpContext, HttpEvent } from '@angular/common/http'; import { DataProcessorInvocation, @@ -47,6 +47,11 @@ import { TopicsComponent } from '../../core-ui/topics/topics.component'; @Injectable({ providedIn: 'root' }) export class EditorService { + private http = inject(HttpClient); + private platformServicesCommons = inject(PlatformServicesCommons); + private dialogService = inject(DialogService); + private pipelineService = inject(PipelineService); + private pipelineElementConfigured = new Subject<string>(); public pipelineElementConfigured$ = @@ -54,13 +59,6 @@ export class EditorService { pipelineAssemblyEmpty = true; - constructor( - private http: HttpClient, - private platformServicesCommons: PlatformServicesCommons, - private dialogService: DialogService, - private pipelineService: PipelineService, - ) {} - get apiBasePath() { return this.platformServicesCommons.apiBasePath; } diff --git a/ui/src/app/editor/services/jsplumb-endpoint.service.ts b/ui/src/app/editor/services/jsplumb-endpoint.service.ts index 31e0438ef0..55c311e9f7 100644 --- a/ui/src/app/editor/services/jsplumb-endpoint.service.ts +++ b/ui/src/app/editor/services/jsplumb-endpoint.service.ts @@ -16,12 +16,12 @@ * */ -import { Injectable } from '@angular/core'; +import { Injectable, inject } from '@angular/core'; import { JsplumbConfigService } from './jsplumb-config.service'; @Injectable({ providedIn: 'root' }) export class JsplumbEndpointService { - constructor(private jsplumbConfigService: JsplumbConfigService) {} + private jsplumbConfigService = inject(JsplumbConfigService); getJsplumbConfig(): any { return this.jsplumbConfigService.getEditorConfig(); diff --git a/ui/src/app/editor/services/jsplumb-factory.service.ts b/ui/src/app/editor/services/jsplumb-factory.service.ts index 9d554cae82..f8541d361e 100644 --- a/ui/src/app/editor/services/jsplumb-factory.service.ts +++ b/ui/src/app/editor/services/jsplumb-factory.service.ts @@ -22,21 +22,21 @@ import { JsPlumbInstance, newInstance, } from '@jsplumb/browser-ui'; -import { Injectable } from '@angular/core'; +import { Injectable, inject } from '@angular/core'; import { JsplumbBridge } from './jsplumb-bridge.service'; import { PipelineElementDraggedService } from './pipeline-element-dragged.service'; import { JsplumbConfigService } from './jsplumb-config.service'; @Injectable({ providedIn: 'root' }) export class JsplumbFactoryService { + private pipelineElementDraggedService = inject( + PipelineElementDraggedService, + ); + private jsplumbConfigService = inject(JsplumbConfigService); + pipelineEditorInstance: BrowserJsPlumbInstance; pipelineEditorBridge: JsplumbBridge; - constructor( - private pipelineElementDraggedService: PipelineElementDraggedService, - private jsplumbConfigService: JsplumbConfigService, - ) {} - getJsplumbBridge(previewConfig: boolean): JsplumbBridge { if (!this.pipelineEditorBridge) { this.pipelineEditorInstance = previewConfig diff --git a/ui/src/app/editor/services/jsplumb.service.ts b/ui/src/app/editor/services/jsplumb.service.ts index 890018531a..787e246b92 100644 --- a/ui/src/app/editor/services/jsplumb.service.ts +++ b/ui/src/app/editor/services/jsplumb.service.ts @@ -17,7 +17,7 @@ */ import { JsplumbBridge } from './jsplumb-bridge.service'; -import { Injectable } from '@angular/core'; +import { Injectable, inject } from '@angular/core'; import { InvocablePipelineElementUnion, PipelineElementConfig, @@ -37,13 +37,11 @@ import { IdGeneratorService } from '../../core-services/id-generator/id-generato @Injectable({ providedIn: 'root' }) export class JsplumbService { - idCounter = 0; + private jsplumbFactory = inject(JsplumbFactoryService); + private jsplumbEndpointService = inject(JsplumbEndpointService); + private idGeneratorService = inject(IdGeneratorService); - constructor( - private jsplumbFactory: JsplumbFactoryService, - private jsplumbEndpointService: JsplumbEndpointService, - private idGeneratorService: IdGeneratorService, - ) {} + idCounter = 0; isFullyConnected( pipelineElementConfig: PipelineElementConfig, diff --git a/ui/src/app/editor/services/object-provider.service.ts b/ui/src/app/editor/services/object-provider.service.ts index bb5123f529..0fcc1f0bb7 100644 --- a/ui/src/app/editor/services/object-provider.service.ts +++ b/ui/src/app/editor/services/object-provider.service.ts @@ -16,7 +16,7 @@ * */ -import { Injectable } from '@angular/core'; +import { Injectable, inject } from '@angular/core'; import { PipelineElementConfig } from '../model/editor.model'; import { DataProcessorInvocation, @@ -29,10 +29,8 @@ import { JsplumbFactoryService } from './jsplumb-factory.service'; @Injectable({ providedIn: 'root' }) export class ObjectProvider { - constructor( - private editorService: EditorService, - private jsplumbFactoryService: JsplumbFactoryService, - ) {} + private editorService = inject(EditorService); + private jsplumbFactoryService = inject(JsplumbFactoryService); preparePipeline(): Pipeline { const pipeline = new Pipeline(); diff --git a/ui/src/app/editor/services/pipeline-positioning.service.ts b/ui/src/app/editor/services/pipeline-positioning.service.ts index 853568d11f..440ef54c68 100644 --- a/ui/src/app/editor/services/pipeline-positioning.service.ts +++ b/ui/src/app/editor/services/pipeline-positioning.service.ts @@ -19,7 +19,7 @@ import * as dagre from 'dagre'; import { JsplumbBridge } from './jsplumb-bridge.service'; import { JsplumbService } from './jsplumb.service'; -import { Injectable } from '@angular/core'; +import { Injectable, inject } from '@angular/core'; import { PipelineElementConfig } from '../model/editor.model'; import { DataProcessorInvocation, @@ -34,11 +34,9 @@ import { Connection } from '@jsplumb/browser-ui'; @Injectable({ providedIn: 'root' }) export class PipelinePositioningService { - constructor( - private jsplumbService: JsplumbService, - private jsplumbFactoryService: JsplumbFactoryService, - private objectProvider: ObjectProvider, - ) {} + private jsplumbService = inject(JsplumbService); + private jsplumbFactoryService = inject(JsplumbFactoryService); + private objectProvider = inject(ObjectProvider); collectPipelineElementPositions( pipelineCanvasMetadata: PipelineCanvasMetadata, diff --git a/ui/src/app/editor/services/pipeline-style.service.ts b/ui/src/app/editor/services/pipeline-style.service.ts index 7dc5e212a3..71da6b8344 100644 --- a/ui/src/app/editor/services/pipeline-style.service.ts +++ b/ui/src/app/editor/services/pipeline-style.service.ts @@ -16,7 +16,7 @@ * */ -import { Injectable } from '@angular/core'; +import { Injectable, inject } from '@angular/core'; import { JsplumbConfigService } from './jsplumb-config.service'; import { EdgeValidationStatus, @@ -31,10 +31,8 @@ import { @Injectable({ providedIn: 'root' }) export class PipelineStyleService { - constructor( - private jsPlumbConfigService: JsplumbConfigService, - private jsplumbFactoryService: JsplumbFactoryService, - ) {} + private jsPlumbConfigService = inject(JsplumbConfigService); + private jsplumbFactoryService = inject(JsplumbFactoryService); updateAllConnectorStyles(edgeValidations: PipelineEdgeValidation[]) { edgeValidations.forEach(edgeValidation => diff --git a/ui/src/app/editor/services/pipeline-validation.service.ts b/ui/src/app/editor/services/pipeline-validation.service.ts index fffb402232..7c36bce2c3 100644 --- a/ui/src/app/editor/services/pipeline-validation.service.ts +++ b/ui/src/app/editor/services/pipeline-validation.service.ts @@ -18,7 +18,7 @@ import * as dagre from 'dagre'; import { JsplumbBridge } from './jsplumb-bridge.service'; -import { Injectable } from '@angular/core'; +import { Injectable, inject } from '@angular/core'; import { PipelineElementConfig, PipelineElementConfigurationStatus, @@ -34,6 +34,8 @@ import { Connection } from '@jsplumb/browser-ui'; @Injectable({ providedIn: 'root' }) export class PipelineValidationService { + private jsplumbFactoryService = inject(JsplumbFactoryService); + errorMessages: any = []; pipelineValid = false; @@ -64,8 +66,6 @@ export class PipelineValidationService { ), ]; - constructor(private jsplumbFactoryService: JsplumbFactoryService) {} - isValidPipeline( rawPipelineModel: PipelineElementConfig[], previewConfig: boolean, diff --git a/ui/src/app/editor/utils/style-sanitizer.ts b/ui/src/app/editor/utils/style-sanitizer.ts index 1ddbd79c3f..9a59cff291 100644 --- a/ui/src/app/editor/utils/style-sanitizer.ts +++ b/ui/src/app/editor/utils/style-sanitizer.ts @@ -16,12 +16,12 @@ * */ -import { Pipe, PipeTransform } from '@angular/core'; +import { Pipe, PipeTransform, inject } from '@angular/core'; import { DomSanitizer, SafeStyle } from '@angular/platform-browser'; @Pipe({ name: 'safeCss' }) export class SafeCss implements PipeTransform { - constructor(private domSanitizer: DomSanitizer) {} + private domSanitizer = inject(DomSanitizer); transform(value: any): SafeStyle { return this.domSanitizer.bypassSecurityTrustStyle(value);
