refactor: migrate node path panel to Angular (#2855)

* refactor: migrate node path panel to Angular

ref #2318

CHANGELOG.md

@@ -19,6 +19,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/)
 ### Chore 👨‍💻 👩‍💻
 
 -   Migrate changelog dialog to Angular [#2849](https://github.com/MaibornWolff/codecharta/pull/2849)
+-   Migrate node path panel to Angular [#2855](https://github.com/MaibornWolff/codecharta/pull/2855)
 
 ## [1.98.0] - 2022-06-14
 

visualization/app/app.module.ts

@@ -57,6 +57,7 @@ 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"
 
 @NgModule({
 	imports: [
@@ -96,7 +97,8 @@ import { VersionService } from "./codeCharta/services/version/version.service"
 		AreaSettingsPanelModule,
 		MetricChooserModule,
 		RibbonBarModule,
-		ChangelogDialogModule
+		ChangelogDialogModule,
+		HoveredNodePathPanelModule
 	],
 	providers: [
 		threeSceneServiceProvider,

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

@@ -0,0 +1,12 @@
+<ng-container *ngIf="hoveredNodePathPanelData$ | async; let hoveredNodePathPanelData">
+	<span *ngFor="let step of hoveredNodePathPanelData.path; let last = last">
+		<i
+			*ngIf="last"
+			class="fa"
+			[class.fa-file-o]="hoveredNodePathPanelData.isFile"
+			[class.fa-folder]="!hoveredNodePathPanelData.isFile"
+		></i>
+		<span [class.bold]="last">{{ step }}</span>
+		<i *ngIf="!last" class="fa fa-angle-right"></i>
+	</span>
+</ng-container>

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

@@ -0,0 +1,18 @@
+cc-hovered-node-path-panel {
+	width: 100%;
+	min-width: 400px;
+	display: inline-block;
+	vertical-align: middle;
+	margin: 0 8px;
+	font-size: 10pt;
+	overflow: hidden;
+	white-space: nowrap;
+
+	.bold {
+		font-weight: 600;
+	}
+
+	i {
+		margin: 0 4px;
+	}
+}

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

@@ -0,0 +1,59 @@
+import { TestBed } from "@angular/core/testing"
+import { render } from "@testing-library/angular"
+import { mocked } from "ts-jest/utils"
+import { HoveredNodePathPanelComponent } from "./hoveredNodePathPanel.component"
+import { HoveredNodePathPanelModule } from "./hoveredNodePathPanel.module"
+import { hoveredNodePathPanelDataSelector } from "./hoveredNodePathPanelData.selector"
+
+jest.mock("./hoveredNodePathPanelData.selector", () => ({
+	hoveredNodePathPanelDataSelector: jest.fn()
+}))
+const mockedHoveredNodePathPanelDataSelector = mocked(hoveredNodePathPanelDataSelector)
+
+describe("HoveredNodePathPanelComponent", () => {
+	beforeEach(() => {
+		TestBed.configureTestingModule({
+			imports: [HoveredNodePathPanelModule]
+		})
+	})
+
+	it("should be empty when there is no node hovered", async () => {
+		mockedHoveredNodePathPanelDataSelector.mockImplementation(() => undefined)
+		const { container } = await render(HoveredNodePathPanelComponent, { excludeComponentDeclaration: true })
+		expect(container.textContent).toBe("")
+	})
+
+	it("should show path to a hovered file", async () => {
+		mockedHoveredNodePathPanelDataSelector.mockImplementation(() => ({
+			path: ["root", "a.ts"],
+			isFile: true
+		}))
+		const { container } = await render(HoveredNodePathPanelComponent, { excludeComponentDeclaration: true })
+
+		const steps = container.children
+		expect(steps.length).toBe(2)
+
+		expect(steps[0].textContent).toBe("root")
+		const iconOfFirstStep = steps[0].querySelector("i")
+		expect(iconOfFirstStep.className).toBe("fa fa-angle-right")
+
+		expect(steps[1].textContent).toBe("a.ts")
+		const iconOfLastStep = steps[1].querySelector("i")
+		expect(iconOfLastStep.className).toBe("fa fa-file-o")
+	})
+
+	it("should show path to a hovered folder", async () => {
+		mockedHoveredNodePathPanelDataSelector.mockImplementation(() => ({
+			path: ["root"],
+			isFile: false
+		}))
+		const { container } = await render(HoveredNodePathPanelComponent, { excludeComponentDeclaration: true })
+
+		const steps = container.children
+		expect(steps.length).toBe(1)
+
+		expect(steps[0].textContent).toBe("root")
+		const iconOfLastStep = steps[0].querySelector("i")
+		expect(iconOfLastStep.className).toBe("fa fa-folder")
+	})
+})

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

@@ -0,0 +1,14 @@
+import "./hoveredNodePathPanel.component.scss"
+import { Component, Inject } from "@angular/core"
+import { Store } from "../../../state/angular-redux/store"
+import { hoveredNodePathPanelDataSelector } from "./hoveredNodePathPanelData.selector"
+
+@Component({
+	selector: "cc-hovered-node-path-panel",
+	template: require("./hoveredNodePathPanel.component.html")
+})
+export class HoveredNodePathPanelComponent {
+	hoveredNodePathPanelData$ = this.store.select(hoveredNodePathPanelDataSelector)
+
+	constructor(@Inject(Store) private store: Store) {}
+}

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

@@ -0,0 +1,11 @@
+import { CommonModule } from "@angular/common"
+import { NgModule } from "@angular/core"
+import { HoveredNodePathPanelComponent } from "./hoveredNodePathPanel.component"
+
+@NgModule({
+	imports: [CommonModule],
+	declarations: [HoveredNodePathPanelComponent],
+	exports: [HoveredNodePathPanelComponent],
+	entryComponents: [HoveredNodePathPanelComponent]
+})
+export class HoveredNodePathPanelModule {}

visualization/app/codeCharta/ui/toolBar/hoveredNodePathPanel/hoveredNodePathPanelData.selector.spec.ts

@@ -0,0 +1,26 @@
+import { NodeType } from "../../../codeCharta.model"
+import { _getHoveredNodePathPanelData } from "./hoveredNodePathPanelData.selector"
+
+describe("hoveredNodePathPanelDataSelector", () => {
+	it("should return undefined when there is no hovered node", () => {
+		expect(_getHoveredNodePathPanelData()).toBe(undefined)
+	})
+
+	it("should return correct data for a file", () => {
+		expect(
+			_getHoveredNodePathPanelData({
+				path: "/root/a.ts",
+				type: NodeType.FILE
+			})
+		).toEqual({ path: ["root", "a.ts"], isFile: true })
+	})
+
+	it("should return correct data for a folder", () => {
+		expect(
+			_getHoveredNodePathPanelData({
+				path: "/root",
+				type: NodeType.FOLDER
+			})
+		).toEqual({ path: ["root"], isFile: false })
+	})
+})

visualization/app/codeCharta/ui/toolBar/hoveredNodePathPanel/hoveredNodePathPanelData.selector.ts

@@ -0,0 +1,11 @@
+import { CodeMapNode } from "../../../codeCharta.model"
+import { createSelector } from "../../../state/angular-redux/createSelector"
+import { hoveredNodeSelector } from "../../../state/selectors/hoveredNode.selector"
+
+export const _getHoveredNodePathPanelData = (hoveredNode?: Pick<CodeMapNode, "path" | "type">) =>
+	hoveredNode && {
+		path: hoveredNode.path.slice(1).split("/"),
+		isFile: hoveredNode.type === "File"
+	}
+
+export const hoveredNodePathPanelDataSelector = createSelector([hoveredNodeSelector], _getHoveredNodePathPanelData)

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

@@ -5,7 +5,7 @@
 	<cc-export-threed-map-button></cc-export-threed-map-button>
 
 	<cc-file-panel ng-class="{ hidden: $ctrl._viewModel.isNodeHovered }"></cc-file-panel>
-	<node-path-panel-component ng-class="{ hidden: !$ctrl._viewModel.isNodeHovered }"></node-path-panel-component>
+	<cc-hovered-node-path-panel ng-if="$ctrl._viewModel.isNodeHovered"></cc-hovered-node-path-panel>
 
 	<div class="right-aligned">
 		<cc-loading-map-progress-spinner></cc-loading-map-progress-spinner>

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

@@ -50,8 +50,7 @@ tool-bar-component {
 	}
 }
 
-file-panel-component,
-node-path-panel-component {
+file-panel-component {
 	&.hidden {
 		display: none;
 	}

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

@@ -7,10 +7,12 @@ import { downgradeComponent } from "@angular/upgrade/static"
 import { LoadingMapProgressSpinnerComponent } from "./loadingMapProgressSpinner/loadingMapProgressSpinner.component"
 import { UploadFilesButtonComponent } from "./uploadFilesButton/uploadFilesButton.component"
 import { GlobalConfigurationButtonComponent } from "./globalConfigurationButton/globalConfigurationButton.component"
+import { HoveredNodePathPanelComponent } from "./hoveredNodePathPanel/hoveredNodePathPanel.component"
 
 angular
 	.module("app.codeCharta.ui.toolBar", ["app.codeCharta.state", "app.codeCharta.ui.dialog"])
 	.component(toolBarComponent.selector, toolBarComponent)
 	.directive("ccLoadingMapProgressSpinner", downgradeComponent({ component: LoadingMapProgressSpinnerComponent }))
 	.directive("ccUploadFilesButton", downgradeComponent({ component: UploadFilesButtonComponent }))
 	.directive("ccGlobalConfigurationButton", downgradeComponent({ component: GlobalConfigurationButtonComponent }))
+	.directive("ccHoveredNodePathPanel", downgradeComponent({ component: HoveredNodePathPanelComponent }))

visualization/app/codeCharta/ui/ui.ts

@@ -4,7 +4,6 @@ import { downgradeComponent } from "@angular/upgrade/static"
 import "./artificialIntelligence/artificialIntelligence.module"
 import "./downloadButton/downloadButton.module"
 import "./screenshotButton/screenshotButton.module"
-import "./nodePathPanel/nodePathPanel.module"
 import "./edgeSettingsPanel/edgeSettingsPanel.module"
 import "./presentationModeButton/presentationModeButton.module"
 import "./codeMap/codeMap.module"
@@ -26,7 +25,6 @@ angular
 		"app.codeCharta.ui.artificialIntelligence",
 		"app.codeCharta.ui.downloadButton",
 		"app.codeCharta.ui.screenshotButton",
-		"app.codeCharta.ui.nodePathPanel",
 		"app.codeCharta.ui.edgeSettingsPanel",
 		"app.codeCharta.ui.presentationModeButton",
 		"app.codeCharta.ui.codeMap",