codecharta-visualization 1.113.0 → 1.115.0

package/app/codeCharta/ui/codeMap/threeViewer/threeStats.service.spec.ts

@@ -1,9 +1,26 @@
 import { CustomPanel, ThreeStatsService } from "./threeStats.service"
 import { ThreeRendererService } from "./threeRenderer.service"
-import Stats from "three/examples/jsm/libs/stats.module"
 import { WebGLRenderer } from "three/src/renderers/WebGLRenderer"
 import { WebGLInfo } from "three/src/renderers/webgl/WebGLInfo"
-import * as environmentDetector from "../../../util/envDetector"
+
+jest.mock("three/examples/jsm/libs/stats.module", () => {
+	function MockedStats() {
+		return {
+			addPanel: jest.fn(),
+			showPanel: jest.fn(),
+			update: jest.fn(),
+			domElement: {
+				style: {} as CSSStyleDeclaration,
+				remove: jest.fn()
+			} as unknown as HTMLDivElement
+		}
+	}
+	MockedStats.Panel = () => ({})
+	return {
+		__esModule: true,
+		default: MockedStats
+	}
+})
 
 describe("ThreeStatsService", () => {
 	let threeStatsService: ThreeStatsService
@@ -11,15 +28,10 @@ describe("ThreeStatsService", () => {
 	let element: HTMLCanvasElement
 
 	beforeEach(() => {
-		setDevelopmentMode(true)
 		restartSystem()
 	})
 
-	const setDevelopmentMode = (value: boolean) => {
-		jest.spyOn(environmentDetector, "isDevelopment").mockReturnValue(value)
-	}
-
-	const restartSystem = () => {
+	const restartSystem = (simulateDevelopmentMode = true) => {
 		threeRendererService = { getInfo: jest.fn(), getMemoryInfo: jest.fn() } as unknown as ThreeRendererService
 		threeRendererService.renderer = {} as WebGLRenderer
 		threeRendererService.renderer.info = { render: {}, memory: {} } as WebGLInfo
@@ -29,14 +41,8 @@ describe("ThreeStatsService", () => {
 		element = { ...element, append: jest.fn() }
 
 		threeStatsService = new ThreeStatsService(threeRendererService)
-		threeStatsService.stats = {} as Stats
-		threeStatsService.stats.addPanel = jest.fn()
-		threeStatsService.stats.showPanel = jest.fn()
-		threeStatsService.stats.update = jest.fn()
-		threeStatsService.stats.domElement = {
-			style: {} as CSSStyleDeclaration,
-			remove: jest.fn()
-		} as unknown as HTMLDivElement
+		threeStatsService.isDevelopmentMode = simulateDevelopmentMode
+		threeStatsService.init(element)
 	}
 
 	const mockPanels = (keys: string[]) => {
@@ -50,10 +56,8 @@ describe("ThreeStatsService", () => {
 
 	describe("init", () => {
 		it("should not do anything when not in development mode", () => {
-			setDevelopmentMode(false)
-			restartSystem()
+			restartSystem(false)
 			const generateStatPanels = jest.spyOn(threeStatsService, "generateStatPanels" as any)
-
 			threeStatsService.init(element)
 
 			expect(element.append).not.toHaveBeenCalled()
@@ -76,12 +80,6 @@ describe("ThreeStatsService", () => {
 	})
 
 	describe("generateStatPanels", () => {
-		it("should call addPanel", () => {
-			threeStatsService["generateStatPanels"]()
-
-			expect(threeStatsService.stats.addPanel).toHaveBeenCalledTimes(4)
-		})
-
 		it("should show stats", () => {
 			threeStatsService["generateStatPanels"]()
 
@@ -101,8 +99,7 @@ describe("ThreeStatsService", () => {
 		})
 
 		it("should not do anything when not in development mode", () => {
-			setDevelopmentMode(false)
-			restartSystem()
+			restartSystem(false)
 			const processPanel = jest.spyOn(threeStatsService, "processPanel" as any)
 
 			threeStatsService.updateStats()
@@ -142,8 +139,7 @@ describe("ThreeStatsService", () => {
 		})
 
 		it("should not do anything when not in development mode", () => {
-			setDevelopmentMode(false)
-			restartSystem()
+			restartSystem(false)
 
 			threeStatsService.resetPanels()
 
@@ -185,12 +181,11 @@ describe("ThreeStatsService", () => {
 
 	describe("destroy", () => {
 		it("should not do anything when not in development mode", () => {
-			setDevelopmentMode(false)
-			restartSystem()
+			restartSystem(false)
 
 			threeStatsService.destroy()
 
-			expect(threeStatsService.stats.domElement.remove).not.toHaveBeenCalled()
+			expect(threeStatsService.stats).toBe(undefined)
 		})
 
 		it("should remove dom Element", () => {

package/app/codeCharta/ui/codeMap/threeViewer/threeStats.service.ts

@@ -1,7 +1,6 @@
 import Stats from "three/examples/jsm/libs/stats.module"
 import { ThreeRendererService } from "./threeRenderer.service"
-import { isDevelopment } from "../../../util/envDetector"
-import { Inject, Injectable } from "@angular/core"
+import { Injectable, isDevMode } from "@angular/core"
 
 const ONE_SECOND = 1000
 export interface CustomPanel {
@@ -17,9 +16,9 @@ export class ThreeStatsService {
 	geometryMemoryPanel: CustomPanel
 	textureMemoryPanel: CustomPanel
 	prevTime: number
-	isDevelopmentMode = isDevelopment()
+	isDevelopmentMode = isDevMode()
 
-	constructor(@Inject(ThreeRendererService) private threeRendererService: ThreeRendererService) {}
+	constructor(private threeRendererService: ThreeRendererService) {}
 
 	init = (canvasElement: Element) => {
 		if (this.isDevelopmentMode) {

package/app/codeCharta/ui/codeMap/threeViewer/threeViewer.service.spec.ts

@@ -5,7 +5,7 @@ import { ThreeOrbitControlsService } from "./threeOrbitControls.service"
 import { ThreeRendererService } from "./threeRenderer.service"
 import { ThreeViewerService } from "./threeViewer.service"
 import { PerspectiveCamera, Scene, Vector3, WebGLRenderer } from "three"
-import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
+import type { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
 import { ThreeStatsService } from "./threeStats.service"
 import { CustomComposer } from "../rendering/postprocessor/customComposer"
 
@@ -59,7 +59,7 @@ describe("ThreeViewerService", () => {
 		threeRendererService.composer = { dispose: jest.fn() } as unknown as CustomComposer
 		threeRendererService.renderer.getContext = jest.fn()
 		threeRendererService.renderer.setPixelRatio = jest.fn()
-		threeOrbitControlsService.controls = { enableKeys: null } as OrbitControls
+		threeOrbitControlsService.controls = { enableKeys: null } as unknown as OrbitControls
 		threeOrbitControlsService.controls.update = jest.fn()
 		threeSceneService.scene = { position: new Vector3(1, 2, 3) } as Scene
 		threeSceneService.scene.add = jest.fn()

package/app/codeCharta/ui/codeMap/threeViewer/threeViewer.service.ts

@@ -1,4 +1,4 @@
-import { Inject, Injectable } from "@angular/core"
+import { Injectable } from "@angular/core"
 import { ThreeSceneService } from "./threeSceneService"
 import { ThreeCameraService } from "./threeCamera.service"
 import { ThreeOrbitControlsService } from "./threeOrbitControls.service"
@@ -10,11 +10,11 @@ export class ThreeViewerService {
 	private animationFrameId: number
 
 	constructor(
-		@Inject(ThreeSceneService) private threeSceneService: ThreeSceneService,
-		@Inject(ThreeCameraService) private threeCameraService: ThreeCameraService,
-		@Inject(ThreeOrbitControlsService) private threeOrbitControlsService: ThreeOrbitControlsService,
-		@Inject(ThreeRendererService) private threeRendererService: ThreeRendererService,
-		@Inject(ThreeStatsService) private threeStatsService: ThreeStatsService
+		private threeSceneService: ThreeSceneService,
+		private threeCameraService: ThreeCameraService,
+		private threeOrbitControlsService: ThreeOrbitControlsService,
+		private threeRendererService: ThreeRendererService,
+		private threeStatsService: ThreeStatsService
 	) {}
 
 	init(target: Element) {

package/app/codeCharta/ui/colorPicker/colorPicker.component.spec.ts

@@ -41,8 +41,11 @@ describe("colorPicker", () => {
 		expectColorPickerInDom(true)
 		expect(screen.queryByText("isOpen: true")).toBeTruthy()
 
-		// @ts-ignore
-		ng.probe(screen.queryByRole("colorpicker")).componentInstance.onChangeComplete.emit({ $event: {}, color: { hex: "#000000" } })
+		// @ts-expect-error
+		ng.getComponent(screen.queryByRole("colorpicker")).onChangeComplete.emit({
+			$event: {},
+			color: { hex: "#000000" }
+		})
 		expect(await screen.findByText("color: #000000")).toBeTruthy()
 
 		fireEvent.click(document)

package/app/codeCharta/ui/colorPicker/colorPicker.component.ts

@@ -1,9 +1,10 @@
-import { Component, EventEmitter, HostListener, Input, Output, TemplateRef, ViewChild } from "@angular/core"
+import { Component, EventEmitter, HostListener, Input, Output, TemplateRef, ViewChild, ViewEncapsulation } from "@angular/core"
 import { MatMenuTrigger, MenuPositionX } from "@angular/material/menu"
 
 @Component({
 	selector: "cc-color-picker",
-	template: require("./colorPicker.component.html")
+	templateUrl: "./colorPicker.component.html",
+	encapsulation: ViewEncapsulation.None
 })
 export class ColorPickerComponent {
 	@Input() hexColor: string

package/app/codeCharta/ui/colorPickerForMapColor/colorPickerForMapColor.component.ts

@@ -1,4 +1,4 @@
-import { Component, Inject, Input } from "@angular/core"
+import { Component, Input, ViewEncapsulation } from "@angular/core"
 
 import { MapColors } from "../../codeCharta.model"
 import { Store } from "../../state/angular-redux/store"
@@ -9,16 +9,17 @@ import { colorRangeSelector } from "../../state/store/dynamicSettings/colorRange
 
 @Component({
 	selector: "cc-color-picker-for-map-color",
-	template: require("./colorPickerForMapColor.component.html")
+	templateUrl: "./colorPickerForMapColor.component.html",
+	encapsulation: ViewEncapsulation.None
 })
 export class ColorPickerForMapColorComponent {
-	@Input() mapColorFor: keyof MapColors
+	@Input() mapColorFor: keyof Omit<MapColors, "labelColorAndAlpha" | "markingColors">
 
 	mapColors$ = this.store.select(mapColorsSelector)
 	colorRange$ = this.store.select(colorRangeSelector)
 	nodeMetricRange$ = this.store.select(selectedColorMetricDataSelector)
 
-	constructor(@Inject(Store) private store: Store) {}
+	constructor(private store: Store) {}
 
 	handleColorChange(newHexColor: string) {
 		this.store.dispatch(

package/app/codeCharta/ui/copyToClipboardButton/copyToClipboard.service.ts

@@ -1,4 +1,4 @@
-import { Inject, Injectable } from "@angular/core"
+import { Injectable } from "@angular/core"
 import { State } from "../../state/angular-redux/state"
 import { accumulatedDataSelector } from "../../state/selectors/accumulatedData/accumulatedData.selector"
 import { buildTextOfFiles } from "./util/clipboardString"
@@ -6,7 +6,7 @@ import { getFilenamesWithHighestMetrics } from "./util/getFilenamesWithHighestMe
 
 @Injectable()
 export class CopyToClipboardService {
-	constructor(@Inject(State) private state: State) {}
+	constructor(private state: State) {}
 
 	private getUnifiedMapNode() {
 		const { unifiedMapNode } = accumulatedDataSelector(this.state.getValue())

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

@@ -1,12 +1,13 @@
-import { Component, Inject } from "@angular/core"
+import { Component, ViewEncapsulation } from "@angular/core"
 import { CopyToClipboardService } from "./copyToClipboard.service"
 
 @Component({
 	selector: "cc-copy-to-clipboard-button",
-	template: require("./copyToClipboardButton.component.html")
+	templateUrl: "./copyToClipboardButton.component.html",
+	encapsulation: ViewEncapsulation.None
 })
 export class CopyToClipboardButtonComponent {
-	constructor(@Inject(CopyToClipboardService) private service: CopyToClipboardService) {}
+	constructor(private service: CopyToClipboardService) {}
 
 	async copyNamesToClipBoard() {
 		await navigator.clipboard.writeText(this.service.getClipboardText())

package/app/codeCharta/ui/customConfigs/addCustomConfigButton/addCustomConfigButton.component.spec.ts

@@ -1,13 +1,14 @@
 import { TestBed } from "@angular/core/testing"
 import { AddCustomConfigButtonModule } from "./addCustomConfigButton.module"
-import { fireEvent, render, screen } from "@testing-library/angular"
+import { render, screen } from "@testing-library/angular"
 import { AddCustomConfigButtonComponent } from "./addCustomConfigButton.component"
 import userEvent from "@testing-library/user-event"
-import { waitForElementToBeRemoved } from "@testing-library/dom"
 import { CustomConfigHelper } from "../../../util/customConfigHelper"
 import { Vector3 } from "three"
 import { ThreeCameraService } from "../../codeMap/threeViewer/threeCamera.service"
 import { ThreeOrbitControlsService } from "../../codeMap/threeViewer/threeOrbitControls.service"
+import { TestbedHarnessEnvironment } from "@angular/cdk/testing/testbed"
+import { MatDialogHarness } from "@angular/material/dialog/testing"
 
 describe("addCustomConfigButtonComponent", () => {
 	beforeEach(async () => {
@@ -21,18 +22,24 @@ describe("addCustomConfigButtonComponent", () => {
 	})
 
 	it("should let a user save a custom config", async () => {
+		const configName = "myCustomConfig"
+		const configNote = "My Custom Note"
 		const addCustomConfigSpy = jest.spyOn(CustomConfigHelper, "addCustomConfig")
-		await render(AddCustomConfigButtonComponent, { excludeComponentDeclaration: true })
+		const { fixture } = await render(AddCustomConfigButtonComponent, { excludeComponentDeclaration: true })
+		const loader = TestbedHarnessEnvironment.documentRootLoader(fixture)
+		let currentlyOpenedDialogs = await loader.getAllHarnesses(MatDialogHarness)
+		expect(currentlyOpenedDialogs.length).toBe(0)
 
-		const button = screen.getByRole("button")
-		fireEvent.click(button)
+		await userEvent.click(screen.getByRole("button"))
+		currentlyOpenedDialogs = await loader.getAllHarnesses(MatDialogHarness)
+		expect(currentlyOpenedDialogs.length).toBe(1)
 
-		await screen.findByText("Add Custom View")
+		await userEvent.type(screen.getAllByRole("textbox")[0], configName)
+		await userEvent.type(screen.getAllByRole("textbox")[1], configNote)
+		await userEvent.click(screen.getByRole("button", { name: "ADD" }))
+		currentlyOpenedDialogs = await loader.getAllHarnesses(MatDialogHarness)
 
-		await userEvent.type(screen.getByRole("textbox"), "myCustomConfig")
-		fireEvent.click(screen.getByRole("button", { name: "ADD" }))
-
-		await waitForElementToBeRemoved(screen.getByText("Add Custom View"))
+		expect(currentlyOpenedDialogs.length).toBe(0)
 		expect(addCustomConfigSpy).toHaveBeenCalledTimes(1)
 	})
 })

package/app/codeCharta/ui/customConfigs/addCustomConfigButton/addCustomConfigButton.component.ts

@@ -1,13 +1,14 @@
-import { Component, Inject } from "@angular/core"
+import { Component, ViewEncapsulation } from "@angular/core"
 import { MatDialog } from "@angular/material/dialog"
 import { AddCustomConfigDialogComponent } from "./addCustomConfigDialog/addCustomConfigDialog.component"
 
 @Component({
 	selector: "cc-add-custom-config-button",
-	template: require("./addCustomConfigButton.component.html")
+	templateUrl: "./addCustomConfigButton.component.html",
+	encapsulation: ViewEncapsulation.None
 })
 export class AddCustomConfigButtonComponent {
-	constructor(@Inject(MatDialog) private dialog: MatDialog) {}
+	constructor(private dialog: MatDialog) {}
 
 	showAddCustomConfigDialog() {
 		this.dialog.open(AddCustomConfigDialogComponent, { panelClass: "cc-add-custom-config-dialog" })

package/app/codeCharta/ui/customConfigs/addCustomConfigButton/addCustomConfigButton.module.ts

@@ -5,11 +5,11 @@ import { AddCustomConfigDialogComponent } from "./addCustomConfigDialog/addCusto
 import { FormsModule, ReactiveFormsModule } from "@angular/forms"
 import { CommonModule } from "@angular/common"
 import { DownloadAndPurgeConfigsComponent } from "./addCustomConfigDialog/downloadAndPurgeConfigs/downloadAndPurgeConfigs.component"
+import { CustomConfigNoteDialogButtonModule } from "../customConfigNoteDialogButton/customConfigNoteDialogButton.module"
 
 @NgModule({
-	imports: [MaterialModule, ReactiveFormsModule, FormsModule, CommonModule],
+	imports: [MaterialModule, ReactiveFormsModule, FormsModule, CommonModule, CustomConfigNoteDialogButtonModule],
 	declarations: [AddCustomConfigButtonComponent, AddCustomConfigDialogComponent, DownloadAndPurgeConfigsComponent],
-	exports: [AddCustomConfigButtonComponent],
-	entryComponents: [AddCustomConfigDialogComponent]
+	exports: [AddCustomConfigButtonComponent]
 })
 export class AddCustomConfigButtonModule {}

package/app/codeCharta/ui/customConfigs/addCustomConfigButton/addCustomConfigDialog/addCustomConfigDialog.component.html

@@ -1,4 +1,4 @@
-<mat-toolbar class="header">
+<mat-toolbar class="header" xmlns="http://www.w3.org/1999/html">
 	<h2>Add Custom View</h2>
 </mat-toolbar>
 
@@ -7,9 +7,21 @@
 		<mat-form-field>
 			<label>Save individual configurations for your map.</label>
 			<input matInput class="custom-config-input" [formControl]="customConfigName" required />
-			<mat-hint align="start">View Name</mat-hint>
+			<mat-hint align="start">Config View Name</mat-hint>
 			<mat-error *ngIf="customConfigName.invalid">{{ getErrorMessage() }}</mat-error>
 		</mat-form-field>
+		<mat-form-field class="custom-config-note">
+			<label>Provide custom note for configuration (optional)</label>
+			<textarea
+				cdkAutosizeMinRows="8"
+				cdkTextareaAutosize
+				matInput
+				class="custom-config-input"
+				[(ngModel)]="customConfigNote"
+				required
+			></textarea>
+			<mat-hint align="start">Config Note</mat-hint>
+		</mat-form-field>
 	</div>
 </mat-dialog-content>
 

package/app/codeCharta/ui/customConfigs/addCustomConfigButton/addCustomConfigDialog/addCustomConfigDialog.component.ts

@@ -1,6 +1,5 @@
-import "./addCustomDialog.component.scss"
-import { Component, Inject, OnInit } from "@angular/core"
-import { FormControl, Validators, AbstractControl, ValidatorFn } from "@angular/forms"
+import { Component, OnInit, ViewEncapsulation } from "@angular/core"
+import { UntypedFormControl, Validators, AbstractControl, ValidatorFn } from "@angular/forms"
 import { CustomConfigHelper } from "../../../../util/customConfigHelper"
 import { buildCustomConfigFromState } from "../../../../util/customConfigBuilder"
 import { State } from "../../../../state/angular-redux/state"
@@ -9,20 +8,26 @@ import { ThreeOrbitControlsService } from "../../../codeMap/threeViewer/threeOrb
 import { VisibleFilesBySelectionMode, visibleFilesBySelectionModeSelector } from "../../visibleFilesBySelectionMode.selector"
 
 @Component({
-	template: require("./addCustomConfigDialog.component.html")
+	templateUrl: "./addCustomConfigDialog.component.html",
+	styleUrls: ["./addCustomDialog.component.scss"],
+	encapsulation: ViewEncapsulation.None
 })
 export class AddCustomConfigDialogComponent implements OnInit {
-	customConfigName: FormControl
+	customConfigName: UntypedFormControl
+	customConfigNote: string
 
 	constructor(
-		@Inject(State) private state: State,
-		@Inject(ThreeCameraService) private threeCameraService: ThreeCameraService,
-		@Inject(ThreeOrbitControlsService) private threeOrbitControlsService: ThreeOrbitControlsService
+		private state: State,
+		private threeCameraService: ThreeCameraService,
+		private threeOrbitControlsService: ThreeOrbitControlsService
 	) {}
 
 	ngOnInit(): void {
 		const visibleFilesBySelectionMode = visibleFilesBySelectionModeSelector(this.state.getValue())
-		this.customConfigName = new FormControl("", [Validators.required, createCustomConfigNameValidator(visibleFilesBySelectionMode)])
+		this.customConfigName = new UntypedFormControl("", [
+			Validators.required,
+			createCustomConfigNameValidator(visibleFilesBySelectionMode)
+		])
 		this.customConfigName.setValue(CustomConfigHelper.getConfigNameSuggestionByFileState(visibleFilesBySelectionMode))
 	}
 
@@ -34,10 +39,15 @@ export class AddCustomConfigDialogComponent implements OnInit {
 	}
 
 	addCustomConfig() {
-		const newCustomConfig = buildCustomConfigFromState(this.customConfigName.value, this.state.getValue(), {
-			camera: this.threeCameraService.camera.position,
-			cameraTarget: this.threeOrbitControlsService.controls.target
-		})
+		const newCustomConfig = buildCustomConfigFromState(
+			this.customConfigName.value,
+			this.state.getValue(),
+			{
+				camera: this.threeCameraService.camera.position,
+				cameraTarget: this.threeOrbitControlsService.controls.target
+			},
+			this.customConfigNote
+		)
 		CustomConfigHelper.addCustomConfig(newCustomConfig)
 	}
 }

package/app/codeCharta/ui/customConfigs/addCustomConfigButton/addCustomConfigDialog/addCustomConfigDialog.spec.ts

@@ -4,10 +4,10 @@ import { render, screen } from "@testing-library/angular"
 import { AddCustomConfigDialogComponent } from "./addCustomConfigDialog.component"
 import { CustomConfigHelper } from "../../../../util/customConfigHelper"
 import userEvent from "@testing-library/user-event"
-import { MatDialog } from "@angular/material/dialog"
 import { Vector3 } from "three"
 import { ThreeCameraService } from "../../../codeMap/threeViewer/threeCamera.service"
 import { ThreeOrbitControlsService } from "../../../codeMap/threeViewer/threeOrbitControls.service"
+import { MatDialog } from "@angular/material/dialog"
 
 describe("addCustomConfigDialogComponent", () => {
 	jest.spyOn(CustomConfigHelper, "getConfigNameSuggestionByFileState").mockReturnValue("new custom view name")
@@ -27,18 +27,30 @@ describe("addCustomConfigDialogComponent", () => {
 	it("should suggest a valid custom view name and 'add' button is enabled", async () => {
 		await render(AddCustomConfigDialogComponent, { excludeComponentDeclaration: true })
 
-		const input = screen.getByRole("textbox") as HTMLInputElement
+		const input = screen.getAllByRole("textbox") as HTMLInputElement[]
+		const nameTextField = input[0]
 
-		expect(input.value).toBe("new custom view name")
+		expect(nameTextField.value).toBe("new custom view name")
+		expect((screen.getByRole("button") as HTMLButtonElement).disabled).toBe(false)
+	})
+
+	it("should show an empty comment text field, with optional entry", async () => {
+		await render(AddCustomConfigDialogComponent, { excludeComponentDeclaration: true })
+
+		const input = screen.getAllByRole("textbox") as HTMLInputElement[]
+		const commentTextField = input[1]
+
+		expect(commentTextField.value).toBe("")
 		expect((screen.getByRole("button") as HTMLButtonElement).disabled).toBe(false)
 	})
 
 	it("should show error message when input field is empty and disable 'add' button", async () => {
 		await render(AddCustomConfigDialogComponent, { excludeComponentDeclaration: true })
 
-		const input = screen.getByRole("textbox") as HTMLInputElement
-		await userEvent.clear(input)
-		input.blur()
+		const input = screen.getAllByRole("textbox") as HTMLInputElement[]
+		const nameTextField = input[0]
+		await userEvent.clear(nameTextField)
+		nameTextField.blur()
 
 		expect(await screen.findByText("Please enter a view name.")).not.toBeNull()
 		expect((screen.getByRole("button") as HTMLButtonElement).disabled).toBe(true)
@@ -48,9 +60,11 @@ describe("addCustomConfigDialogComponent", () => {
 		await render(AddCustomConfigDialogComponent, { excludeComponentDeclaration: true })
 		jest.spyOn(CustomConfigHelper, "hasCustomConfigByName").mockReturnValue(true)
 
-		const input = screen.getByRole("textbox") as HTMLInputElement
-		await userEvent.type(input, "file name already exists")
-		input.blur()
+		const input = screen.getAllByRole("textbox") as HTMLInputElement[]
+		const nameTextField = input[0]
+
+		await userEvent.type(nameTextField, "file name already exists")
+		nameTextField.blur()
 
 		expect(await screen.findByText("A Custom View with this name already exists.")).not.toBeNull()
 		expect((screen.getByRole("button") as HTMLButtonElement).disabled).toBe(true)

package/app/codeCharta/ui/customConfigs/addCustomConfigButton/addCustomConfigDialog/addCustomDialog.component.scss

@@ -1,6 +1,6 @@
 @use "../../../../../material/theme";
 
-.cc-add-custom-config-dialog .mat-dialog-container {
+.cc-add-custom-config-dialog .mat-mdc-dialog-container {
 	padding: 0;
 	width: 500px;
 	overflow: hidden;
@@ -15,11 +15,12 @@
 	}
 
 	.dialog-content {
-		padding: 0 24px;
-		margin: 10px 0;
-
 		mat-form-field {
 			width: 100%;
+
+			&.custom-config-note {
+				padding-top: 30px;
+			}
 		}
 
 		label {
@@ -32,7 +33,7 @@
 		}
 	}
 
-	.mat-dialog-actions {
+	.mat-mdc-dialog-actions {
 		margin: 0;
 		padding: 0 8px;
 		position: relative;
@@ -51,7 +52,7 @@
 			}
 		}
 
-		.mat-button {
+		.mat-mdc-button {
 			padding: 0 8px;
 			margin: 8px 0 8px 8px;
 

package/app/codeCharta/ui/customConfigs/addCustomConfigButton/addCustomConfigDialog/downloadAndPurgeConfigs/downloadAndPurgeConfigs.component.ts

@@ -1,4 +1,4 @@
-import { Component, Inject, OnInit } from "@angular/core"
+import { Component, OnInit, ViewEncapsulation } from "@angular/core"
 import { ErrorDialogComponent } from "../../../../dialogs/errorDialog/errorDialog.component"
 import { ConfirmationDialogComponent } from "../../../../dialogs/confirmationDialog/confirmationDialog.component"
 import { CustomConfigHelper } from "../../../../../util/customConfigHelper"
@@ -7,13 +7,14 @@ import { validateLocalStorageSize } from "../validateLocalStorageSize"
 import { downloadAndCollectPurgeableConfigs } from "../downloadAndCollectPurgeableConfigs"
 
 @Component({
-	template: require("./downloadAndPurgeConfigs.component.html"),
-	selector: "cc-download-and-purge-configs"
+	selector: "cc-download-and-purge-configs",
+	templateUrl: "./downloadAndPurgeConfigs.component.html",
+	encapsulation: ViewEncapsulation.None
 })
 export class DownloadAndPurgeConfigsComponent implements OnInit {
 	isLocalStorageSizeValid = true
 
-	constructor(@Inject(MatDialog) private dialog: MatDialog) {}
+	constructor(private dialog: MatDialog) {}
 
 	ngOnInit(): void {
 		this.isLocalStorageSizeValid = validateLocalStorageSize()

package/app/codeCharta/ui/customConfigs/addCustomConfigButton/addCustomConfigDialog/downloadAndPurgeConfigs/downloadAndPurgeConfigs.spec.ts

@@ -1,5 +1,4 @@
 import { validateLocalStorageSize } from "../validateLocalStorageSize"
-import { mocked } from "ts-jest/utils"
 import { DownloadAndPurgeConfigsComponent } from "./downloadAndPurgeConfigs.component"
 import { render, screen } from "@testing-library/angular"
 import { TestBed } from "@angular/core/testing"
@@ -14,10 +13,10 @@ import { CustomConfigHelper } from "../../../../../util/customConfigHelper"
 import { InteractivityChecker } from "@angular/cdk/a11y"
 
 jest.mock("../validateLocalStorageSize", () => ({ validateLocalStorageSize: jest.fn() }))
-const mockedValidateLocalStorageSize = mocked(validateLocalStorageSize)
+const mockedValidateLocalStorageSize = jest.mocked(validateLocalStorageSize)
 
 jest.mock("../downloadAndCollectPurgeableConfigs", () => ({ downloadAndCollectPurgeableConfigs: jest.fn() }))
-const mockedDownloadAndCollectPurgeableOldConfigs = mocked(downloadAndCollectPurgeableConfigs)
+const mockedDownloadAndCollectPurgeableOldConfigs = jest.mocked(downloadAndCollectPurgeableConfigs)
 
 describe("downloadAndPurgeConfigsComponent", () => {
 	@NgModule({
@@ -29,6 +28,7 @@ describe("downloadAndPurgeConfigsComponent", () => {
 	class TestModule {}
 
 	beforeEach(() => {
+		document.body.innerHTML = ""
 		TestBed.configureTestingModule({
 			imports: [TestModule]
 		})

package/app/codeCharta/ui/customConfigs/customConfigHelper.service.ts

@@ -1,7 +1,7 @@
 import { combineLatest, map } from "rxjs"
 import { CustomConfigHelper } from "../../util/customConfigHelper"
 import { getDownloadableCustomConfigs } from "./downloadCustomConfigsButton/getDownloadableCustomConfigs"
-import { Inject, Injectable } from "@angular/core"
+import { Injectable } from "@angular/core"
 import { Store } from "../../state/angular-redux/store"
 import { getCustomConfigItemGroups } from "./customConfigList/getCustomConfigItemGroups"
 import { visibleFilesBySelectionModeSelector } from "./visibleFilesBySelectionMode.selector"
@@ -18,5 +18,5 @@ export class CustomConfigHelperService {
 		CustomConfigHelper.customConfigChange$
 	]).pipe(map(([visibleFilesBySelectionMode]) => getCustomConfigItemGroups(visibleFilesBySelectionMode)))
 
-	constructor(@Inject(Store) private store: Store) {}
+	constructor(private store: Store) {}
 }

package/app/codeCharta/ui/customConfigs/customConfigList/customConfigItemGroup/customConfig2ApplicableColor.pipe.ts

@@ -1,11 +1,11 @@
-import { Inject, Pipe, PipeTransform } from "@angular/core"
+import { Pipe, PipeTransform } from "@angular/core"
 import { State } from "../../../../state/angular-redux/state"
 import { CustomConfigItem } from "../../customConfigs.component"
 import { getMissingCustomConfigModeAndMaps } from "./getMissingCustomConfigModeAndMaps"
 
 @Pipe({ name: "customConfig2ApplicableColor" })
 export class CustomConfig2ApplicableColor implements PipeTransform {
-	constructor(@Inject(State) private state: State) {}
+	constructor(private state: State) {}
 
 	transform(customConfig: CustomConfigItem): string {
 		const { mapSelectionMode, mapNames } = getMissingCustomConfigModeAndMaps(customConfig, this.state)