Refactor/2318/migrate add scenari settings

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/)
 ### Changed
 
 -   Changed storing format for camera position within custom views and scenarios. Loading of created custom views or scenarios in old format will stop working in 2023 [2880](https://github.com/MaibornWolff/codecharta/pull/2880)
+-   Add error messages for the user to "Add Scenario Dialog" [#2928](https://github.com/MaibornWolff/codecharta/pull/2928)
 
 ### Added 🚀
 
@@ -20,6 +21,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/)
 ### Fixed 🐞
 
 -   Fix SonarImporter requesting no metrics from SonarQube when the list of metrics was left empty [#2913](https://github.com/MaibornWolff/codecharta/pull/2913)
+-   Exclude edge metrics from custom scenarios, when there are no edge metrics available. Before it was impossible to apply those custom configs [#2928](https://github.com/MaibornWolff/codecharta/pull/2928)
 
 ## [1.101.1] - 2022-07-27
 

visualization/app/app.module.ts

@@ -58,6 +58,7 @@ 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 { AddCustomScenarioModule } from "./codeCharta/ui/scenarioDropDown/addCustomScenario/addCustomScenario.module"
 
 @NgModule({
 	imports: [
@@ -99,7 +100,8 @@ import { SplitStateActionsEffect } from "./codeCharta/state/effects/splitStateAc
 		HoveredNodePathPanelModule,
 		ActionIconModule,
 		ColorSettingsPanelModule,
-		ScreenshotButtonModule
+		ScreenshotButtonModule,
+		AddCustomScenarioModule
 	],
 	providers: [
 		threeSceneServiceProvider,

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

@@ -47,20 +47,6 @@ cc-reset-settings-button {
 	}
 }
 
-.scenario-dialog {
-	min-width: 50%;
-	.dialog-list {
-		margin: 5px 0 5px 0;
-
-		&.md-block {
-			display: block;
-		}
-	}
-	.scenario-input {
-		width: 80%;
-	}
-}
-
 .custom-config-dialog {
 	.warning {
 		color: #ff6161;

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

@@ -6,10 +6,8 @@ import "../../state/state.module"
 import { DialogService } from "./dialog.service"
 import camelCase from "lodash.camelcase"
 import { dialogDownloadComponent } from "./dialog.download.component"
-import { addScenarioSettingsComponent } from "./dialog.addScenarioSettings.component"
 
 angular
 	.module("app.codeCharta.ui.dialog", ["ngMaterial", "app.codeCharta.state"])
 	.service(camelCase(DialogService.name), DialogService)
 	.component(dialogDownloadComponent.selector, dialogDownloadComponent)
-	.component(addScenarioSettingsComponent.selector, addScenarioSettingsComponent)

visualization/app/codeCharta/ui/dialog/dialog.service.spec.ts

@@ -29,12 +29,6 @@ describe("DialogService", () => {
 		expect(dialogService.showCustomDialog).toHaveBeenCalled()
 	})
 
-	it("should show AddScenarioSettings", function () {
-		dialogService.showAddScenarioSettings()
-
-		expect(dialogService.showCustomDialog).toHaveBeenCalled()
-	})
-
 	it("should show ValidationDialog", function () {
 		const fileValidationResults: CCFileValidationResult[] = [
 			{ fileName: "file_1", errors: ["Error"], warnings: [] },

visualization/app/codeCharta/ui/dialog/dialog.service.ts

@@ -1,5 +1,4 @@
 import { dialogDownloadComponent } from "./dialog.download.component"
-import { addScenarioSettingsComponent } from "./dialog.addScenarioSettings.component"
 import { CCFileValidationResult } from "../../util/fileValidator"
 
 export class DialogService {
@@ -11,10 +10,6 @@ export class DialogService {
 		this.showCustomDialog(dialogDownloadComponent)
 	}
 
-	showAddScenarioSettings() {
-		this.showCustomDialog(addScenarioSettingsComponent)
-	}
-
 	showCustomDialog(dialog) {
 		this.$mdDialog.show(dialog)
 	}

visualization/app/codeCharta/ui/scenarioDropDown/addCustomScenario/addCustomScenario.component.html

@@ -0,0 +1,33 @@
+<mat-toolbar color="primary">Add Scenario</mat-toolbar>
+
+<div class="cc-add-custom-scenario-content">
+	<mat-form-field class="cc-add-custom-scenario-name-field">
+		<label>Scenario Name</label>
+		<input matInput [formControl]="scenarioName" />
+		<mat-error *ngIf="scenarioName.invalid">{{ scenarioName.getError("Error") }}</mat-error>
+	</mat-form-field>
+
+	<p>The scenario includes:</p>
+
+	<div>
+		<mat-slide-toggle
+			*ngFor="let property of scenarioContent"
+			[checked]="property.isSelected"
+			(change)="handleScenarioMetricPropertySelectionChange(property)"
+		>
+			{{ property.metricName ? property.metricType + " (" + property.metricName + ")" : property.metricType }}
+		</mat-slide-toggle>
+		<mat-error *ngIf="!areAnyScenarioMetricPropertiesSelected">You cannot create an empty Scenario</mat-error>
+	</div>
+
+	<div class="cc-add-custom-scenario-buttons">
+		<button
+			mat-button
+			mat-dialog-close
+			[disabled]="scenarioName.invalid || !areAnyScenarioMetricPropertiesSelected"
+			(click)="addCustomScenario()"
+		>
+			ADD
+		</button>
+	</div>
+</div>

visualization/app/codeCharta/ui/scenarioDropDown/addCustomScenario/addCustomScenario.component.scss

@@ -0,0 +1,21 @@
+.cc-add-custom-scenario .mat-dialog-container {
+	width: 50vw;
+	padding: 0;
+
+	.cc-add-custom-scenario-content {
+		margin: 8px;
+
+		.cc-add-custom-scenario-name-field {
+			width: 75%;
+		}
+
+		mat-slide-toggle {
+			display: block;
+		}
+
+		.cc-add-custom-scenario-buttons {
+			display: flex;
+			justify-content: flex-end;
+		}
+	}
+}