refactor: migrate reset-settings-button-component to Angular

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/)
 
 ## [unreleased] (Added 🚀 | Changed | Removed 🗑 | Fixed 🐞 | Chore 👨‍💻 👩‍💻)
 
+### Chore 👨‍💻 👩‍💻
+
+-   Migrate reset-settings-button-component to Angular [#2774](https://github.com/MaibornWolff/codecharta/pull/2774)
+
 ## [1.95.1] - 2022-04-01
 
 ### Changed

visualization/app/app.module.ts

@@ -43,6 +43,7 @@ import { SearchPanelModule } from "./codeCharta/ui/searchPanel/searchPanel.modul
 import { MetricTypeModule } from "./codeCharta/ui/metricChooser/metricType/metricType.module"
 import { DownloadCustomConfigButtonModule } from "./codeCharta/ui/customConfigs/downloadCustomConfigsButton/downloadCustomConfigButton.module"
 import { MetricValueHoveredModule } from "./codeCharta/ui/metricChooser/metricValueHovered/metricValueHovered.module"
+import { ResetSettingsButtonComponent } from "./codeCharta/ui/resetSettingsButton/resetSettingsButton.component"
 
 @NgModule({
 	imports: [
@@ -80,6 +81,7 @@ import { MetricValueHoveredModule } from "./codeCharta/ui/metricChooser/metricVa
 		InvertAreaOptionComponent,
 		EdgeMetricToggleComponent,
 		RemoveFileButtonComponent,
+		ResetSettingsButtonComponent,
 		...dialogs
 	],
 	entryComponents: [
@@ -99,6 +101,7 @@ import { MetricValueHoveredModule } from "./codeCharta/ui/metricChooser/metricVa
 		LoadingMapProgressSpinnerComponent,
 		EdgeMetricToggleComponent,
 		SearchPanelComponent,
+		ResetSettingsButtonComponent,
 		...dialogs
 	]
 })

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

@@ -37,10 +37,10 @@
 		</md-checkbox>
 	</md-input-container>
 
-	<reset-settings-button-component
-		settings-names="appSettings.dynamicMargin"
+	<cc-reset-settings-button
+		[settings-keys]="['appSettings.dynamicMargin']"
 		tooltip="Reset area metric settings to their defaults"
-	></reset-settings-button-component>
+	></cc-reset-settings-button>
 </div>
 
 <cc-invert-area-option></cc-invert-area-option>

visualization/app/codeCharta/ui/areaSettingsPanel/areaSettingsPanel.po.ts

@@ -16,7 +16,7 @@ export const AreaSettingsPanelPageObject = {
 	},
 
 	async resetButtonBoundingBox() {
-		const resetBoxHandle = await page.$("cc-area-settings-panel reset-settings-button-component")
+		const resetBoxHandle = await page.$("cc-area-settings-panel cc-reset-settings-button")
 		return resetBoxHandle.boundingBox()
 	}
 }

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

@@ -9,11 +9,11 @@
 	</div>
 </md-select>
 
-<reset-settings-button-component
-	settings-names="dynamicSettings.colorRange, appSettings.mapColors.positiveDelta, appSettings.mapColors.negativeDelta"
-	tooltip=" Reset slider thresholds to default"
-	text="Reset thresholds"
-></reset-settings-button-component>
+<cc-reset-settings-button
+	[settings-keys]="['dynamicSettings.colorRange', 'appSettings.mapColors.positiveDelta', 'appSettings.mapColors.negativeDelta']"
+	tooltip="Reset slider thresholds to default"
+	label="Reset thresholds"
+></cc-reset-settings-button>
 
 <md-divider></md-divider>
 
@@ -63,9 +63,14 @@
 	</md-input-container>
 </div>
 
-<reset-settings-button-component
-	settings-names="appSettings.mapColors.positive, appSettings.mapColors.negative, appSettings.mapColors.neutral, appSettings.mapColors.selected"
+<cc-reset-settings-button
+	[settings-keys]="[
+		'appSettings.mapColors.positive',
+		'appSettings.mapColors.negative',
+		'appSettings.mapColors.neutral',
+		'appSettings.mapColors.selected'
+	]"
 	tooltip=" Reset color values to default"
-	text="Reset colors"
-	callback="$ctrl.resetInvertColorRangeCheckboxOnly()"
-></reset-settings-button-component>
+	label="Reset colors"
+	[callback]="$ctrl.resetInvertColorRangeCheckboxOnly"
+></cc-reset-settings-button>

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

@@ -100,7 +100,7 @@ export class ColorSettingsPanelController implements FilesSelectionSubscriber, C
 		)
 	}
 
-	resetInvertColorRangeCheckboxOnly() {
+	resetInvertColorRangeCheckboxOnly = () => {
 		this._viewModel.invertColorRange = null
 		this._viewModel.invertDeltaColors = null
 	}

visualization/app/codeCharta/ui/colorSettingsPanel/colorSettingsPanel.po.ts

@@ -5,7 +5,7 @@ export const ColorSettingsPageObject = {
 	},
 
 	async resetButtonBoundingBox() {
-		const resetBoxHandle = await page.$("color-settings-panel-component reset-settings-button-component")
+		const resetBoxHandle = await page.$("color-settings-panel-component cc-reset-settings-button")
 		return resetBoxHandle.boundingBox()
 	}
 }

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

@@ -7,7 +7,7 @@
 	}
 }
 
-reset-settings-button-component {
+cc-reset-settings-button {
 	text-align: right;
 }
 
@@ -68,7 +68,7 @@ reset-settings-button-component {
 		white-space: pre;
 	}
 
-	reset-settings-button-component button {
+	cc-reset-settings-button button {
 		top: 0px;
 		bottom: initial;
 		right: 0;

visualization/app/codeCharta/ui/dialog/dialog.globalSettings.component.html

@@ -3,11 +3,16 @@
 		<h2 class="md-toolbar-tools">Global Settings</h2>
 	</md-toolbar>
 
-	<reset-settings-button-component
-		autofocus="false"
-		settings-names="appSettings.hideFlatBuildings, appSettings.isWhiteBackground, appSettings.resetCameraIfNewFileIsLoaded, appSettings.layoutAlgorithm, appSettings.maxTreeMapFiles"
+	<cc-reset-settings-button
+		[settings-keys]="[
+			'appSettings.hideFlatBuildings',
+			'appSettings.isWhiteBackground',
+			'appSettings.resetCameraIfNewFileIsLoaded',
+			'appSettings.layoutAlgorithm',
+			'appSettings.maxTreeMapFiles'
+		]"
 		tooltip="Reset global settings to their defaults"
-	></reset-settings-button-component>
+	></cc-reset-settings-button>
 
 	<md-dialog-content>
 		<div class="md-dialog-content">

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

@@ -79,8 +79,13 @@
 		</md-checkbox>
 	</md-input-container>
 
-	<reset-settings-button-component
-		settings-names="appSettings.showOnlyBuildingsWithEdges, appSettings.amountOfEdgePreviews, appSettings.edgeHeight, appSettings.edgeMetricToggler"
+	<cc-reset-settings-button
+		[settings-keys]="[
+			'appSettings.showOnlyBuildingsWithEdges',
+			'appSettings.amountOfEdgePreviews',
+			'appSettings.edgeHeight',
+			'appSettings.edgeMetricToggler'
+		]"
 		tooltip="Reset edge metric settings to their defaults"
-	></reset-settings-button-component>
+	></cc-reset-settings-button>
 </div>

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

@@ -79,8 +79,8 @@
 		</md-checkbox>
 	</md-input-container>
 
-	<reset-settings-button-component
-		settings-names="appSettings.amountOfTopLabels, appSettings.scaling.y, appSettings.invertHeight"
+	<cc-reset-settings-button
+		[settings-keys]="['appSettings.amountOfTopLabels', 'appSettings.scaling.y', 'appSettings.invertHeight']"
 		tooltip="Reset height metric settings to their defaults"
-	></reset-settings-button-component>
+	></cc-reset-settings-button>
 </div>

visualization/app/codeCharta/ui/resetSettingsButton/getPartialDefaultState.ts

@@ -0,0 +1,35 @@
+import { RecursivePartial, Settings } from "../../codeCharta.model"
+import { defaultState } from "../../state/store/state.actions"
+import { convertToVectors } from "../../util/settingsHelper"
+
+export const getPartialDefaultState = (settingKeys: string[]) => {
+	const updatedSettings: RecursivePartial<Settings> = {}
+	let settingsCounter = 0
+
+	for (const token of settingKeys) {
+		const steps = token.split(".")
+		let defaultSettingsPointer = defaultState
+		let updatedSettingsPointer = updatedSettings
+
+		for (const [index, step] of steps.entries()) {
+			if (defaultSettingsPointer[step] !== undefined) {
+				if (!updatedSettingsPointer[step]) {
+					updatedSettingsPointer[step] = {}
+					settingsCounter++
+				}
+				if (index === steps.length - 1) {
+					updatedSettingsPointer[step] = defaultSettingsPointer[step]
+				} else {
+					defaultSettingsPointer = defaultSettingsPointer[step]
+					updatedSettingsPointer = updatedSettingsPointer[step]
+				}
+			}
+		}
+	}
+
+	if (settingsCounter !== 0) {
+		convertToVectors(updatedSettings)
+	}
+
+	return updatedSettings
+}

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

@@ -1,4 +1,4 @@
-<md-button class="md-primary" ng-click="$ctrl.applyDefaultSettings()" ng-attr-title="{{ $ctrl.tooltip }}">
+<button (click)="applyDefaultSettings()" [title]="tooltip">
 	<i class="fa fa-undo"></i>
-	<label class="md-button-label" ng-if="$ctrl.text">{{ $ctrl.text }}</label>
-</md-button>
+	<span *ngIf="label" class="reset-settings-button-label"> {{ label }}</span>
+</button>

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

@@ -1,13 +1,11 @@
-reset-settings-button-component {
-	display: inline-block;
-	height: 48px;
-	.md-button {
-		border-radius: 3%;
-		margin-left: 0;
-		min-width: 36px;
-	}
+cc-reset-settings-button {
+	button {
+		color: rgb(0, 150, 136);
+		background: none;
+		padding: 8px;
 
-	.md-button-label {
-		text-transform: none;
+		&:hover {
+			background-color: rgba(158, 158, 158, 0.2);
+		}
 	}
 }

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

@@ -1,99 +1,45 @@
-import "./resetSettingsButton.module"
-
+import { TestBed } from "@angular/core/testing"
+import { render, screen } from "@testing-library/angular"
+import userEvent from "@testing-library/user-event"
 import { Vector3 } from "three"
-import { ResetSettingsButtonController } from "./resetSettingsButton.component"
-import { getService, instantiateModule } from "../../../../mocks/ng.mockhelper"
-import { StoreService } from "../../state/store.service"
-import { setScaling } from "../../state/store/appSettings/scaling/scaling.actions"
-import { defaultMapColors, setMapColors } from "../../state/store/appSettings/mapColors/mapColors.actions"
-import { setColorRange } from "../../state/store/dynamicSettings/colorRange/colorRange.actions"
-
-describe("resetSettingsButtonController", () => {
-	let resetSettingsButtonController: ResetSettingsButtonController
-	let storeService: StoreService
+import { Store } from "../../state/angular-redux/store"
+import { setState } from "../../state/store/state.actions"
+import { ResetSettingsButtonComponent } from "./resetSettingsButton.component"
 
+describe("resetSettingsButtonComponent", () => {
+	const mockedStore = { dispatch: jest.fn() }
 	beforeEach(() => {
-		restartSystem()
-		rebuildController()
-	})
-
-	function restartSystem() {
-		instantiateModule("app.codeCharta.ui.resetSettingsButton")
-
-		storeService = getService<StoreService>("storeService")
-	}
-
-	function rebuildController() {
-		resetSettingsButtonController = new ResetSettingsButtonController(storeService)
-	}
-
-	describe("applyDefaultSettings", () => {
-		it("should update store with available default settings objects", () => {
-			resetSettingsButtonController["settingsNames"] =
-				"appSettings.hideFlatBuildings, appSettings.notInAppSettings, notInSettings.something"
-
-			resetSettingsButtonController.applyDefaultSettings()
-
-			expect(storeService.getState().appSettings.hideFlatBuildings).toBeFalsy()
+		mockedStore.dispatch = jest.fn()
+		TestBed.configureTestingModule({
+			providers: [{ provide: Store, useValue: mockedStore }]
 		})
+	})
 
-		it("should only reset the color options when specified", () => {
-			resetSettingsButtonController["settingsNames"] =
-				"appSettings.mapColors.positive, appSettings.mapColors.negative, appSettings.mapColors.neutral, " +
-				"appSettings.mapColors.selected"
-			const mapColors = storeService.getState().appSettings.mapColors
-			const colorRange = storeService.getState().dynamicSettings.colorRange
-
-			storeService.dispatch(setMapColors({ ...mapColors, positive: "#176666" }))
-			storeService.dispatch(setColorRange({ ...colorRange, from: 50 }))
-			resetSettingsButtonController.applyDefaultSettings()
-
-			expect(storeService.getState().appSettings.mapColors).toEqual(defaultMapColors)
-			expect(storeService.getState().dynamicSettings.colorRange.from).toEqual(50)
-		})
-
-		it("settingsNames should allow newline", () => {
-			resetSettingsButtonController["settingsNames"] = "appSettings.mapColors.neutral,\nappSettings.hideFlatBuildings"
-
-			resetSettingsButtonController.applyDefaultSettings()
-
-			expect(storeService.getState().appSettings.hideFlatBuildings).toBeFalsy()
-		})
-
-		it("should do nothing if settingsNames only contains comma characters", () => {
-			storeService.dispatch = jest.fn()
-			resetSettingsButtonController["settingsNames"] = ",,"
-
-			resetSettingsButtonController.applyDefaultSettings()
-
-			expect(storeService.dispatch).not.toHaveBeenCalled()
-		})
-
-		it("should do nothing if settingsNames only contains space characters", () => {
-			storeService.dispatch = jest.fn()
-			resetSettingsButtonController["settingsNames"] = " "
-
-			resetSettingsButtonController.applyDefaultSettings()
-
-			expect(storeService.dispatch).not.toHaveBeenCalled()
+	it("should reset given appSetting", async () => {
+		await render(ResetSettingsButtonComponent, {
+			componentProperties: {
+				settingsKeys: ["appSettings.mapColors.selected", "appSettings.scaling.x, appSettings.scaling.y, appSettings.scaling.z"]
+			}
 		})
 
-		it("should do nothing if settingsName not in defaultSettings", () => {
-			storeService.dispatch = jest.fn()
-			resetSettingsButtonController["settingsNames"] = "deltas.something.bla"
+		userEvent.click(screen.getByRole("button"))
 
-			resetSettingsButtonController.applyDefaultSettings()
+		expect(mockedStore.dispatch).toHaveBeenCalledWith(
+			setState({ appSettings: { mapColors: { selected: "#EB8319" }, scaling: new Vector3(1, 1, 1) } })
+		)
+	})
 
-			expect(storeService.dispatch).not.toHaveBeenCalled()
+	it("should execute callback", async () => {
+		const callback = jest.fn()
+		await render(ResetSettingsButtonComponent, {
+			componentProperties: {
+				settingsKeys: ["appSettings.mapColors.selected"],
+				callback
+			}
 		})
 
-		it("should update nested settings in service", () => {
-			storeService.dispatch(setScaling(new Vector3(2, 2, 2)))
-			resetSettingsButtonController["settingsNames"] = "appSettings.scaling.x, appSettings.scaling.y, appSettings.scaling.z"
-
-			resetSettingsButtonController.applyDefaultSettings()
+		userEvent.click(screen.getByRole("button"))
 
-			expect(storeService.getState().appSettings.scaling).toEqual(new Vector3(1, 1, 1))
-		})
+		expect(callback).toHaveBeenCalledTimes(1)
 	})
 })