refactor: migrate toolbar component to Angular

CHANGELOG.md

@@ -20,6 +20,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/)
 
 -   Fix broken images to new document pages about how using SonarQube [#3012](https://github.com/MaibornWolff/codecharta/pull/3012)
 
+### Chore 👨‍💻 👩‍💻
+
+-   Migrate tool bar component to Angular [#3020](https://github.com/MaibornWolff/codecharta/pull/3020)
+
 ## [1.104.1] - 2022-08-31
 
 ### Fixed 🐞

visualization/app/app.module.ts

@@ -9,8 +9,6 @@ import { FormsModule, ReactiveFormsModule } from "@angular/forms"
 import { MaterialModule } from "./material/material.module"
 import { AttributeSideBarModule } from "./codeCharta/ui/attributeSideBar/attributeSideBar.module"
 import { AttributeSideBarComponent } from "./codeCharta/ui/attributeSideBar/attributeSideBar.component"
-import { Export3DMapButtonComponent } from "./codeCharta/ui/export3DMapButton/export3DMapButton.component"
-import { Export3DMapButtonModule } from "./codeCharta/ui/export3DMapButton/export3DMapButton.module"
 import { LegendPanelComponent } from "./codeCharta/ui/legendPanel/legendPanel.component"
 import { LegendPanelModule } from "./codeCharta/ui/legendPanel/legendPanel.module"
 import { ColorPickerForMapColorModule } from "./codeCharta/ui/colorPickerForMapColor/colorPickerForMapColor.module"
@@ -31,18 +29,13 @@ import { FocusButtonsComponent } from "./codeCharta/state/effects/nodeContextMen
 import { IdToBuildingService } from "./codeCharta/services/idToBuilding/idToBuilding.service"
 import { LoadingFileProgressSpinnerModule } from "./codeCharta/ui/loadingFileProgressSpinner/loadingFileProgressSpinner.module"
 import { LoadingFileProgressSpinnerComponent } from "./codeCharta/ui/loadingFileProgressSpinner/loadingFileProgressSpinner.component"
-import { LoadingMapProgressSpinnerModule } from "./codeCharta/ui/toolBar/loadingMapProgressSpinner/loadingMapProgressSpinner.module"
-import { LoadingMapProgressSpinnerComponent } from "./codeCharta/ui/toolBar/loadingMapProgressSpinner/loadingMapProgressSpinner.component"
 import { BlacklistSearchPatternEffect } from "./codeCharta/ui/searchPanel/searchBar/blacklistSearchPattern.effect"
 import { SearchPanelComponent } from "./codeCharta/ui/searchPanel/searchPanel.component"
 import { SearchPanelModule } from "./codeCharta/ui/searchPanel/searchPanel.module"
-import { UploadFilesButtonModule } from "./codeCharta/ui/toolBar/uploadFilesButton/uploadFilesButton.module"
 import { SliderModule } from "./codeCharta/ui/slider/slider.module"
 import { HeightSettingsPanelModule } from "./codeCharta/ui/ribbonBar/heightSettingsPanel/heightSettingsPanel.module"
-import { FilePanelModule } from "./codeCharta/ui/filePanel/filePanel.module"
 import { CustomConfigsModule } from "./codeCharta/ui/customConfigs/customConfigs.module"
 import { ResetColorRangeEffect } from "./codeCharta/state/store/dynamicSettings/colorRange/resetColorRange.effect"
-import { GlobalConfigurationButtonModule } from "./codeCharta/ui/toolBar/globalConfigurationButton/globalConfigurationButton.module"
 import { FileExtensionBarModule } from "./codeCharta/ui/fileExtensionBar/fileExtensionBar.module"
 import { AreaSettingsPanelModule } from "./codeCharta/ui/ribbonBar/areaSettingsPanel/areaSettingsPanel.module"
 import { ResetDynamicMarginEffect } from "./codeCharta/state/effects/resetDynamicMargin/resetDynamicMargin.effect"
@@ -52,15 +45,11 @@ import { RibbonBarModule } from "./codeCharta/ui/ribbonBar/ribbonBar.module"
 import { UpdateEdgePreviewsEffect } from "./codeCharta/state/effects/updateEdgePreviews/updateEdgePreviews.effect"
 import { ChangelogDialogModule } from "./codeCharta/ui/dialogs/changelogDialog/changelogDialog.module"
 import { VersionService } from "./codeCharta/services/version/version.service"
-import { HoveredNodePathPanelModule } from "./codeCharta/ui/toolBar/hoveredNodePathPanel/hoveredNodePathPanel.module"
 import { ActionIconModule } from "./codeCharta/ui/actionIcon/actionIcon.module"
 import { ColorSettingsPanelModule } from "./codeCharta/ui/ribbonBar/colorSettingsPanel/colorSettingsPanel.module"
-import { ScreenshotButtonModule } from "./codeCharta/ui/screenshotButton/screenshotButton.module"
 import { SplitStateActionsEffect } from "./codeCharta/state/effects/splitStateActionsEffect/splitStateActions.effect"
-import { CopyToClipboardButtonModule } from "./codeCharta/ui/copyToClipboardButton/copyToClipboardButton.module"
-import { DownloadButtonModule } from "./codeCharta/ui/toolBar/downloadButton/downloadButton.module"
 import { ViewCubeModule } from "./codeCharta/ui/viewCube/viewCube.module"
-import { PresentationModeButtonModule } from "./codeCharta/ui/toolBar/presentationModeButton/presentationModeButton.module"
+import { ToolBarModule } from "./codeCharta/ui/toolBar/toolBar.module"
 
 @NgModule({
 	imports: [
@@ -81,32 +70,23 @@ import { PresentationModeButtonModule } from "./codeCharta/ui/toolBar/presentati
 		AttributeSideBarModule,
 		MaterialModule,
 		FormsModule,
-		Export3DMapButtonModule,
 		LegendPanelModule,
 		ColorPickerForMapColorModule,
 		NodeContextMenuCardModule,
 		ReactiveFormsModule,
 		LoadingFileProgressSpinnerModule,
-		LoadingMapProgressSpinnerModule,
 		SearchPanelModule,
 		CustomConfigsModule,
-		FilePanelModule,
 		HeightSettingsPanelModule,
 		ViewCubeModule,
-		GlobalConfigurationButtonModule,
 		FileExtensionBarModule,
 		AreaSettingsPanelModule,
 		MetricChooserModule,
 		RibbonBarModule,
 		ChangelogDialogModule,
-		HoveredNodePathPanelModule,
 		ActionIconModule,
 		ColorSettingsPanelModule,
-		ScreenshotButtonModule,
-		DownloadButtonModule,
-		UploadFilesButtonModule,
-		CopyToClipboardButtonModule,
-		PresentationModeButtonModule
+		ToolBarModule
 	],
 	providers: [
 		threeSceneServiceProvider,
@@ -126,11 +106,9 @@ import { PresentationModeButtonModule } from "./codeCharta/ui/toolBar/presentati
 	declarations: [...dialogs],
 	entryComponents: [
 		AttributeSideBarComponent,
-		Export3DMapButtonComponent,
 		LegendPanelComponent,
 		FocusButtonsComponent,
 		LoadingFileProgressSpinnerComponent,
-		LoadingMapProgressSpinnerComponent,
 		SearchPanelComponent,
 		...dialogs
 	]

visualization/app/codeCharta/codeCharta.component.html

@@ -1,5 +1,5 @@
 <div>
-	<tool-bar-component></tool-bar-component>
+	<cc-tool-bar></cc-tool-bar>
 
 	<cc-file-extension-bar></cc-file-extension-bar>
 	<div class="ribbon-bar-wrapper">

visualization/app/codeCharta/codeCharta.module.ts

@@ -11,6 +11,7 @@ import { CodeChartaService } from "./codeCharta.service"
 import { downgradeComponent } from "@angular/upgrade/static"
 import { LoadingFileProgressSpinnerComponent } from "./ui/loadingFileProgressSpinner/loadingFileProgressSpinner.component"
 import { FileExtensionBarComponent } from "./ui/fileExtensionBar/fileExtensionBar.component"
+import { ToolBarComponent } from "./ui/toolBar/toolBar.component"
 
 angular.module("app.codeCharta", ["app.codeCharta.state", "app.codeCharta.ui"])
 
@@ -20,3 +21,4 @@ angular
 	.service(camelCase(CodeChartaService.name), CodeChartaService)
 	.directive("ccLoadingFileProgressSpinner", downgradeComponent({ component: LoadingFileProgressSpinnerComponent }))
 	.directive("ccFileExtensionBar", downgradeComponent({ component: FileExtensionBarComponent }))
+	.directive("ccToolBar", downgradeComponent({ component: ToolBarComponent }))

visualization/app/codeCharta/ui/copyToClipboardButton/copyToClipboardButton.component.ts

@@ -2,6 +2,7 @@ import { Component, Inject } from "@angular/core"
 import { CopyToClipboardService } from "./copyToClipboard.service"
 
 @Component({
+	selector: "cc-copy-to-clipboard-button",
 	template: require("./copyToClipboardButton.component.html")
 })
 export class CopyToClipboardButtonComponent {

visualization/app/codeCharta/ui/copyToClipboardButton/copyToClipboardButton.module.ts

@@ -8,7 +8,6 @@ import { CopyToClipboardButtonComponent } from "./copyToClipboardButton.componen
 	imports: [CommonModule, ActionIconModule],
 	declarations: [CopyToClipboardButtonComponent],
 	exports: [CopyToClipboardButtonComponent],
-	entryComponents: [CopyToClipboardButtonComponent],
 	providers: [CopyToClipboardService]
 })
 export class CopyToClipboardButtonModule {}

visualization/app/codeCharta/ui/filePanel/filePanel.module.ts

@@ -20,7 +20,6 @@ import { FilePanelComponent } from "./filePanel.component"
 		FilePanelComponent
 	],
 	providers: [FileSelectionModeService],
-	exports: [FilePanelComponent],
-	entryComponents: [FilePanelComponent]
+	exports: [FilePanelComponent]
 })
 export class FilePanelModule {}

visualization/app/codeCharta/ui/screenshotButton/screenshotButton.module.ts

@@ -6,7 +6,6 @@ import { ScreenshotButtonComponent } from "./screenshotButton.component"
 @NgModule({
 	imports: [CommonModule, ActionIconModule],
 	declarations: [ScreenshotButtonComponent],
-	exports: [ScreenshotButtonComponent],
-	entryComponents: [ScreenshotButtonComponent]
+	exports: [ScreenshotButtonComponent]
 })
 export class ScreenshotButtonModule {}

visualization/app/codeCharta/ui/toolBar/downloadButton/downloadButton.module.ts

@@ -9,6 +9,6 @@ import { DownloadDialogComponent } from "./downloadDialog/downloadDialog.compone
 	imports: [ActionIconModule, MaterialModule, FormsModule],
 	declarations: [DownloadButtonComponent, DownloadDialogComponent],
 	exports: [DownloadButtonComponent],
-	entryComponents: [DownloadButtonComponent, DownloadDialogComponent]
+	entryComponents: [DownloadDialogComponent]
 })
 export class DownloadButtonModule {}

visualization/app/codeCharta/ui/toolBar/globalConfigurationButton/globalConfigurationButton.module.ts

@@ -11,6 +11,6 @@ import { MapLayoutSelectionModule } from "./globalConfigurationDialog/mapLayoutS
 	imports: [MaterialModule, ResetSettingsButtonModule, MapLayoutSelectionModule, DisplayQualitySelectionModule, ActionIconModule],
 	declarations: [GlobalConfigurationButtonComponent, GlobalConfigurationDialogComponent],
 	exports: [GlobalConfigurationButtonComponent],
-	entryComponents: [GlobalConfigurationButtonComponent, GlobalConfigurationDialogComponent]
+	entryComponents: [GlobalConfigurationDialogComponent]
 })
 export class GlobalConfigurationButtonModule {}

visualization/app/codeCharta/ui/toolBar/hoveredNodePathPanel/hoveredNodePathPanel.module.ts

@@ -5,7 +5,6 @@ import { HoveredNodePathPanelComponent } from "./hoveredNodePathPanel.component"
 @NgModule({
 	imports: [CommonModule],
 	declarations: [HoveredNodePathPanelComponent],
-	exports: [HoveredNodePathPanelComponent],
-	entryComponents: [HoveredNodePathPanelComponent]
+	exports: [HoveredNodePathPanelComponent]
 })
 export class HoveredNodePathPanelModule {}

visualization/app/codeCharta/ui/toolBar/presentationModeButton/presentationModeButton.module.ts

@@ -6,7 +6,6 @@ import { PresentationModeButtonComponent } from "./presentationModeButton.compon
 @NgModule({
 	imports: [CommonModule, MaterialModule],
 	declarations: [PresentationModeButtonComponent],
-	exports: [PresentationModeButtonComponent],
-	entryComponents: [PresentationModeButtonComponent]
+	exports: [PresentationModeButtonComponent]
 })
 export class PresentationModeButtonModule {}

visualization/app/codeCharta/ui/toolBar/toolBar.component.html

@@ -1,16 +1,14 @@
-<div class="tool-bar">
-	<cc-upload-files-button></cc-upload-files-button>
-	<cc-download-button ng-show="!$ctrl._viewModel.experimentalFeaturesEnabled"></cc-download-button>
-	<cc-screenshot-button></cc-screenshot-button>
-	<cc-copy-to-clipboard-button></cc-copy-to-clipboard-button>
-	<cc-export-threed-map-button></cc-export-threed-map-button>
+<cc-upload-files-button></cc-upload-files-button>
+<cc-download-button *ngIf="!(experimentalFeaturesEnabled$ | async)"></cc-download-button>
+<cc-screenshot-button></cc-screenshot-button>
+<cc-copy-to-clipboard-button></cc-copy-to-clipboard-button>
+<cc-export-threed-map-button></cc-export-threed-map-button>
 
-	<cc-file-panel ng-class="{ hidden: $ctrl._viewModel.isNodeHovered }"></cc-file-panel>
-	<cc-hovered-node-path-panel ng-if="$ctrl._viewModel.isNodeHovered"></cc-hovered-node-path-panel>
+<cc-file-panel *ngIf="(hoveredNodeId$ | async) === null"></cc-file-panel>
+<cc-hovered-node-path-panel *ngIf="(hoveredNodeId$ | async) !== null"></cc-hovered-node-path-panel>
 
-	<div class="right-aligned">
-		<cc-loading-map-progress-spinner></cc-loading-map-progress-spinner>
-		<cc-presentation-mode-button></cc-presentation-mode-button>
-		<cc-global-configuration-button></cc-global-configuration-button>
-	</div>
+<div class="right-aligned">
+	<cc-loading-map-progress-spinner></cc-loading-map-progress-spinner>
+	<cc-presentation-mode-button></cc-presentation-mode-button>
+	<cc-global-configuration-button></cc-global-configuration-button>
 </div>

visualization/app/codeCharta/ui/toolBar/toolBar.component.scss

@@ -1,22 +1,16 @@
 @use "../../../material/theme";
 
-tool-bar-component {
-	.tool-bar {
-		display: flex;
-		align-items: center;
-		background-color: #f0f0f0;
-		height: 35px;
-		border-bottom: 1px solid #cdcdcd;
-	}
+cc-tool-bar {
+	display: flex;
+	align-items: center;
+	background-color: #f0f0f0;
+	height: 35px;
+	border-bottom: 1px solid #cdcdcd;
 
 	cc-action-icon {
 		margin-left: 8px;
 	}
 
-	.md-focused {
-		background-color: rgb(0, 150, 136) !important;
-	}
-
 	.right-aligned {
 		position: absolute;
 		right: 4px;
@@ -29,15 +23,4 @@ tool-bar-component {
 	span {
 		font-size: 10pt;
 	}
-
-	loading-gif-map-component {
-		margin-right: 15px;
-		width: 15px;
-	}
-}
-
-file-panel-component {
-	&.hidden {
-		display: none;
-	}
 }

visualization/app/codeCharta/ui/toolBar/toolBar.component.spec.ts

@@ -1,40 +1,45 @@
-import "./toolBar.module"
-import { ToolBarController } from "./toolBar.component"
-import { instantiateModule, getService } from "../../../../mocks/ng.mockhelper"
-import { IRootScopeService } from "angular"
-
-describe("ToolBarController", () => {
-	let $rootScope: IRootScopeService
-	let toolBarController: ToolBarController
-
+import { TestBed } from "@angular/core/testing"
+import { render } from "@testing-library/angular"
+import { mocked } from "ts-jest/utils"
+import {
+	CodeChartaServiceToken,
+	ThreeCameraServiceToken,
+	ThreeRendererServiceToken,
+	ThreeSceneServiceToken
+} from "../../services/ajs-upgraded-providers"
+import { hoveredNodeIdSelector } from "../../state/store/appStatus/hoveredNodeId/hoveredNodeId.selector"
+import { ToolBarComponent } from "./toolBar.component"
+import { ToolBarModule } from "./toolBar.module"
+
+jest.mock("../../state/store/appStatus/hoveredNodeId/hoveredNodeId.selector", () => ({
+	hoveredNodeIdSelector: jest.fn()
+}))
+const mockedHoveredNodeIdSelector = mocked(hoveredNodeIdSelector)
+
+describe("ToolBarComponent", () => {
 	beforeEach(() => {
-		restartSystem()
-		rebuildController()
-	})
-
-	function restartSystem() {
-		instantiateModule("app.codeCharta.ui.toolBar")
-
-		$rootScope = getService<IRootScopeService>("$rootScope")
-	}
-
-	function rebuildController() {
-		toolBarController = new ToolBarController($rootScope)
-	}
-
-	describe("onBuildingHovered", () => {
-		it("should set isNodeHovered to true if node is hovered", () => {
-			toolBarController.onBuildingHovered()
-
-			expect(toolBarController["_viewModel"].isNodeHovered).toBe(true)
+		TestBed.configureTestingModule({
+			imports: [ToolBarModule],
+			providers: [
+				{ provide: CodeChartaServiceToken, useValue: {} },
+				{ provide: ThreeCameraServiceToken, useValue: {} },
+				{ provide: ThreeSceneServiceToken, useValue: {} },
+				{ provide: ThreeRendererServiceToken, useValue: {} }
+			]
 		})
 	})
 
-	describe("onBuildingUnhovered", () => {
-		it("should set isNodeHovered to false if no node is hovered", () => {
-			toolBarController.onBuildingUnhovered()
+	it("should show file panel and not hovered node path panel, when there is no node hovered", async () => {
+		mockedHoveredNodeIdSelector.mockImplementation(() => null)
+		const { container } = await render(ToolBarComponent, { excludeComponentDeclaration: true })
+		expect(container.querySelector("cc-file-panel")).not.toBe(null)
+		expect(container.querySelector("cc-hovered-node-path-panel")).toBe(null)
+	})
 
-			expect(toolBarController["_viewModel"].isNodeHovered).toBe(false)
-		})
+	it("should show hovered node path panel and not file panel, when there is a node hovered", async () => {
+		mockedHoveredNodeIdSelector.mockImplementation(() => 0)
+		const { container } = await render(ToolBarComponent, { excludeComponentDeclaration: true })
+		expect(container.querySelector("cc-hovered-node-path-panel")).not.toBe(null)
+		expect(container.querySelector("cc-file-panel")).toBe(null)
 	})
 })

visualization/app/codeCharta/ui/toolBar/toolBar.component.ts

@@ -1,42 +1,17 @@
 import "./toolBar.component.scss"
-import { CodeMapMouseEventService, BuildingUnhoveredSubscriber, BuildingHoveredSubscriber } from "../codeMap/codeMap.mouseEvent.service"
-import { IRootScopeService } from "angular"
-import {
-	ExperimentalFeaturesEnabledService,
-	ExperimentalFeaturesEnabledSubscriber
-} from "../../state/store/appSettings/enableExperimentalFeatures/experimentalFeaturesEnabled.service"
 
-export class ToolBarController implements BuildingHoveredSubscriber, BuildingUnhoveredSubscriber, ExperimentalFeaturesEnabledSubscriber {
-	private _viewModel: {
-		isNodeHovered: boolean
-		experimentalFeaturesEnabled: boolean
-	} = {
-		isNodeHovered: null,
-		experimentalFeaturesEnabled: false
-	}
+import { Component, Inject } from "@angular/core"
+import { Store } from "../../state/angular-redux/store"
+import { hoveredNodeIdSelector } from "../../state/store/appStatus/hoveredNodeId/hoveredNodeId.selector"
+import { experimentalFeaturesEnabledSelector } from "../../state/store/appSettings/enableExperimentalFeatures/experimentalFeaturesEnabled.selector"
 
-	constructor(private $rootScope: IRootScopeService) {
-		"ngInject"
-		CodeMapMouseEventService.subscribeToBuildingHovered(this.$rootScope, this)
-		CodeMapMouseEventService.subscribeToBuildingUnhovered(this.$rootScope, this)
-		ExperimentalFeaturesEnabledService.subscribe(this.$rootScope, this)
-	}
+@Component({
+	selector: "cc-tool-bar",
+	template: require("./toolBar.component.html")
+})
+export class ToolBarComponent {
+	hoveredNodeId$ = this.store.select(hoveredNodeIdSelector)
+	experimentalFeaturesEnabled$ = this.store.select(experimentalFeaturesEnabledSelector)
 
-	onBuildingHovered() {
-		this._viewModel.isNodeHovered = true
-	}
-
-	onBuildingUnhovered() {
-		this._viewModel.isNodeHovered = false
-	}
-
-	onExperimentalFeaturesEnabledChanged(experimentalFeaturesEnabled: boolean) {
-		this._viewModel.experimentalFeaturesEnabled = experimentalFeaturesEnabled
-	}
-}
-
-export const toolBarComponent = {
-	selector: "toolBarComponent",
-	template: require("./toolBar.component.html"),
-	controller: ToolBarController
+	constructor(@Inject(Store) private store: Store) {}
 }