refactor: extract mapTreeViewLevelItemIcon.component

refs #2318

visualization/app/app.module.ts

@@ -7,11 +7,20 @@ import { UpgradeModule } from "@angular/upgrade/static"
 
 import { SortingButtonComponent } from "./codeCharta/ui/sortingButton/sortingButton.component"
 import { MetricDeltaSelectedComponent } from "./codeCharta/ui/metricDeltaSelected/metricDeltaSelected.component"
+import { MapTreeViewLevelItemIcon } from "./codeCharta/ui/mapTreeView/mapTreeViewLevelItemIcon/mapTreeViewLevelItemIcon.component"
+import { MapTreeViewLevelItemIconClassPipe } from "./codeCharta/ui/mapTreeView/mapTreeViewLevelItemIcon/mapTreeViewLevelItemIconClass.pipe"
+import { MapTreeViewLevelItemIconColorPipe } from "./codeCharta/ui/mapTreeView/mapTreeViewLevelItemIcon/mapTreeViewLevelItemIconColor.pipe"
 
 @NgModule({
 	imports: [BrowserModule, UpgradeModule],
-	declarations: [SortingButtonComponent, MetricDeltaSelectedComponent],
-	entryComponents: [SortingButtonComponent, MetricDeltaSelectedComponent]
+	declarations: [
+		SortingButtonComponent,
+		MetricDeltaSelectedComponent,
+		MapTreeViewLevelItemIcon,
+		MapTreeViewLevelItemIconClassPipe,
+		MapTreeViewLevelItemIconColorPipe
+	],
+	entryComponents: [SortingButtonComponent, MetricDeltaSelectedComponent, MapTreeViewLevelItemIcon]
 })
 export class AppModule {
 	constructor(@Inject(UpgradeModule) private upgrade: UpgradeModule) {}

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

@@ -46,12 +46,6 @@ map-tree-view-component {
 			margin-top: 1px;
 		}
 
-		.node-type-icon {
-			display: inline-block;
-			width: 14px;
-			margin-left: 2px;
-		}
-
 		.node-name.flattened {
 			color: gray;
 		}
@@ -82,3 +76,9 @@ map-tree-view-component {
 		}
 	}
 }
+
+cc-map-tree-view-level-item-icon {
+	display: inline-block;
+	width: 14px;
+	margin-left: 2px;
+}

visualization/app/codeCharta/ui/mapTreeView/mapTreeView.level.component.html

@@ -13,23 +13,10 @@
 		ng-click="$ctrl.onClickNode()"
 		id="{{ ::$ctrl.node.path }}"
 	>
-		<span class="node-type-icon">
-			<span
-				role="img"
-				ng-if="!$ctrl.isLeaf() && !$ctrl._viewModel.isFolderOpened"
-				class="fa fa-folder"
-				ng-style="{ color: $ctrl.getMarkingColor() }"
-				aria-hidden="true"
-			></span>
-			<span
-				role="img"
-				ng-if="!$ctrl.isLeaf() && $ctrl._viewModel.isFolderOpened"
-				class="fa fa-folder-open"
-				ng-style="{ color: $ctrl.getMarkingColor() }"
-				aria-hidden="true"
-			></span>
-			<span role="img" ng-if="$ctrl.isLeaf()" class="fa fa-file-o" aria-hidden="true"></span>
-		</span>
+		<cc-map-tree-view-level-item-icon
+			[node]="$ctrl.node"
+			[is-folder-open]="$ctrl._viewModel.isFolderOpened"
+		></cc-map-tree-view-level-item-icon>
 
 		<span class="node-name" ng-class="{ flattened: $ctrl.node.isFlattened, 'angular-green': $ctrl.isSearched() }">
 			{{::$ctrl.node.name}}

visualization/app/codeCharta/ui/mapTreeView/mapTreeView.level.component.ts

@@ -1,6 +1,6 @@
 import { IRootScopeService } from "angular"
 import { HideNodeContextMenuSubscriber, NodeContextMenuController } from "../nodeContextMenu/nodeContextMenu.component"
-import { getMarkingColor, isLeaf } from "../../util/codeMapHelper"
+import { isLeaf } from "../../util/codeMapHelper"
 import { BuildingHoveredSubscriber, BuildingUnhoveredSubscriber, CodeMapMouseEventService } from "../codeMap/codeMap.mouseEvent.service"
 import { CodeMapNode } from "../../codeCharta.model"
 import { CodeMapBuilding } from "../codeMap/rendering/codeMapBuilding"
@@ -79,12 +79,6 @@ export class MapTreeViewLevelController implements BuildingHoveredSubscriber, Bu
 		return isLeaf(node)
 	}
 
-	getMarkingColor() {
-		const defaultColor = "#000000"
-		const markingColor = getMarkingColor(this.node, this.storeService.getState().fileSettings.markedPackages)
-		return markingColor ? markingColor : defaultColor
-	}
-
 	isSearched() {
 		if (this.node && this.storeService.getState().dynamicSettings.searchedNodePaths) {
 			return this.storeService.getState().dynamicSettings.searchedNodePaths.has(this.node.path)

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

@@ -1,4 +1,6 @@
 import angular from "angular"
+import { downgradeComponent } from "@angular/upgrade/static"
+
 import "../../state/state.module"
 import "../codeMap/codeMap.module"
 import "../../codeCharta.module"
@@ -8,6 +10,8 @@ import "./mapTreeView.component.scss"
 import { mapTreeViewComponent } from "./mapTreeView.component"
 import { mapTreeViewLevelComponent } from "./mapTreeView.level.component"
 
+import { MapTreeViewLevelItemIcon } from "./mapTreeViewLevelItemIcon/mapTreeViewLevelItemIcon.component"
+
 angular
 	.module("app.codeCharta.ui.mapTreeView", ["app.codeCharta.state", "app.codeCharta.ui.codeMap", "app.codeCharta"])
 	.component(mapTreeViewComponent.selector, mapTreeViewComponent)
@@ -23,3 +27,4 @@ angular
 			})
 		}
 	})
+	.directive("ccMapTreeViewLevelItemIcon", downgradeComponent({ component: MapTreeViewLevelItemIcon }))

visualization/app/codeCharta/ui/mapTreeView/mapTreeViewLevelItemIcon/mapTreeViewLevelItemIcon.component.html

@@ -0,0 +1,6 @@
+<span
+	role="img"
+	[class]="node | mapTreeViewLevelItemIconClass: isFolderOpen"
+	[style.color]="node | mapTreeViewLevelItemIconColor"
+	aria-hidden="true"
+></span>

visualization/app/codeCharta/ui/mapTreeView/mapTreeViewLevelItemIcon/mapTreeViewLevelItemIcon.component.ts

@@ -0,0 +1,11 @@
+import { Component, Input } from "@angular/core"
+import { CodeMapNode } from "../../../codeCharta.model"
+
+@Component({
+	selector: "cc-map-tree-view-level-item-icon",
+	template: require("./mapTreeViewLevelItemIcon.component.html")
+})
+export class MapTreeViewLevelItemIcon {
+	@Input() node: CodeMapNode
+	@Input() isFolderOpen: boolean
+}

visualization/app/codeCharta/ui/mapTreeView/mapTreeViewLevelItemIcon/mapTreeViewLevelItemIconClass.pipe.spec.ts

@@ -0,0 +1,19 @@
+import { CodeMapNode } from "../../../codeCharta.model"
+import { MapTreeViewLevelItemIconClassPipe } from "./mapTreeViewLevelItemIconClass.pipe"
+
+describe("MapTreeViewLevelItemIconClassPipe", () => {
+	it("should return 'fa fa-file-o' for leaf nodes", () => {
+		const fakeNode = {} as unknown as CodeMapNode
+		expect(new MapTreeViewLevelItemIconClassPipe().transform(fakeNode, true)).toBe("fa fa-file-o")
+	})
+
+	it("should return 'fa fa-folder-open' for open folders", () => {
+		const fakeNode = { children: [{}] } as unknown as CodeMapNode
+		expect(new MapTreeViewLevelItemIconClassPipe().transform(fakeNode, true)).toBe("fa fa-folder-open")
+	})
+
+	it("should return 'fa fa-folder' for closed folders", () => {
+		const fakeNode = { children: [{}] } as unknown as CodeMapNode
+		expect(new MapTreeViewLevelItemIconClassPipe().transform(fakeNode, false)).toBe("fa fa-folder")
+	})
+})

visualization/app/codeCharta/ui/mapTreeView/mapTreeViewLevelItemIcon/mapTreeViewLevelItemIconClass.pipe.ts

@@ -0,0 +1,13 @@
+import { Pipe, PipeTransform } from "@angular/core"
+
+import { CodeMapNode } from "../../../codeCharta.model"
+import { isLeaf } from "../../../util/codeMapHelper"
+
+@Pipe({ name: "mapTreeViewLevelItemIconClass" })
+export class MapTreeViewLevelItemIconClassPipe implements PipeTransform {
+	transform(value: CodeMapNode, isOpen: boolean): string {
+		if (isLeaf(value)) return "fa fa-file-o"
+		if (isOpen) return "fa fa-folder-open"
+		return "fa fa-folder"
+	}
+}

visualization/app/codeCharta/ui/mapTreeView/mapTreeViewLevelItemIcon/mapTreeViewLevelItemIconColor.pipe.spec.ts

@@ -0,0 +1,27 @@
+import { CodeMapNode } from "../../../codeCharta.model"
+import { Store } from "../../../state/store/store"
+import * as codeMapHelper from "../../../util/codeMapHelper"
+import { MapTreeViewLevelItemIconColorPipe } from "./mapTreeViewLevelItemIconColor.pipe"
+
+describe("MapTreeViewLevelItemIconColorPipe", () => {
+	beforeEach(() => {
+		Store["initialize"]()
+	})
+
+	it("should return undefined for leaf nodes", () => {
+		const fakeNode = {} as unknown as CodeMapNode
+		expect(new MapTreeViewLevelItemIconColorPipe().transform(fakeNode)).toBe(undefined)
+	})
+
+	it("should return default color if getMarkingColor returns undefined", () => {
+		const fakeNode = { children: [{}] } as unknown as CodeMapNode
+		jest.spyOn(codeMapHelper, "getMarkingColor").mockImplementation(() => {})
+		expect(new MapTreeViewLevelItemIconColorPipe().transform(fakeNode)).toBe(MapTreeViewLevelItemIconColorPipe.defaultColor)
+	})
+
+	it("should return color of getMarkingColor", () => {
+		const fakeNode = { children: [{}] } as unknown as CodeMapNode
+		jest.spyOn(codeMapHelper, "getMarkingColor").mockImplementation(() => "#123456")
+		expect(new MapTreeViewLevelItemIconColorPipe().transform(fakeNode)).toBe("#123456")
+	})
+})

visualization/app/codeCharta/ui/mapTreeView/mapTreeViewLevelItemIcon/mapTreeViewLevelItemIconColor.pipe.ts

@@ -0,0 +1,17 @@
+import { Pipe, PipeTransform } from "@angular/core"
+
+import { CodeMapNode } from "../../../codeCharta.model"
+import { Store } from "../../../state/store/store"
+import { getMarkingColor, isLeaf } from "../../../util/codeMapHelper"
+
+@Pipe({ name: "mapTreeViewLevelItemIconColor" })
+export class MapTreeViewLevelItemIconColorPipe implements PipeTransform {
+	static defaultColor = "#000000"
+	static store = Store.store
+
+	transform(value: CodeMapNode): string | undefined {
+		if (isLeaf(value)) return undefined
+		const markingColor = getMarkingColor(value, MapTreeViewLevelItemIconColorPipe.store.getState().fileSettings.markedPackages)
+		return markingColor ? markingColor : MapTreeViewLevelItemIconColorPipe.defaultColor
+	}
+}