Refactor/2318/migrate file chooser component

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/)
 
 ## [unreleased] (Added 🚀 | Changed | Removed 🗑 | Fixed 🐞 | Chore 👨‍💻 👩‍💻)
 
+## Changed
+
+-   Restrict upload in custom configs view to custom configs. Custom configs uploaded in the custom configs view are now allowed to have an arbitrary file suffix [#2773](https://github.com/MaibornWolff/codecharta/pull/2773)
+
 ### Chore 👨‍💻 👩‍💻
 
 -   Migrate reset-settings-button-component to Angular [#2774](https://github.com/MaibornWolff/codecharta/pull/2774)

visualization/app/app.module.ts

@@ -23,7 +23,7 @@ import { UnfocusNodesOnLoadingMapEffect } from "./codeCharta/state/effects/unfoc
 import { TrackEventUsageDataEffect } from "./codeCharta/state/effects/trackEventUsageData/trackEventUsageData.effect"
 import { AddBlacklistItemsIfNotResultsInEmptyMapEffect } from "./codeCharta/state/effects/addBlacklistItemsIfNotResultsInEmptyMap/addBlacklistItemsIfNotResultsInEmptyMap.effect"
 import { dialogs } from "./codeCharta/ui/dialogs/dialogs"
-import { threeSceneServiceProvider } from "./codeCharta/services/ajs-upgraded-providers"
+import { threeSceneServiceProvider, codeChartaServiceProvider } from "./codeCharta/services/ajs-upgraded-providers"
 import { NodeContextMenuCardModule } from "./codeCharta/state/effects/nodeContextMenu/nodeContextMenuCard/nodeContextMenuCard.module"
 import { OpenNodeContextMenuEffect } from "./codeCharta/state/effects/nodeContextMenu/openNodeContextMenu.effect"
 import { InvertAreaOptionComponent } from "./codeCharta/ui/areaSettingsPanel/invertAreaOption/invertAreaOption.component"
@@ -42,6 +42,8 @@ import { SearchPanelComponent } from "./codeCharta/ui/searchPanel/searchPanel.co
 import { SearchPanelModule } from "./codeCharta/ui/searchPanel/searchPanel.module"
 import { DownloadCustomConfigButtonModule } from "./codeCharta/ui/customConfigs/downloadCustomConfigsButton/downloadCustomConfigButton.module"
 import { MetricValueHoveredModule } from "./codeCharta/ui/metricChooser/metricValueHovered/metricValueHovered.module"
+import { UploadCustomConfigButtonModule } from "./codeCharta/ui/customConfigs/uploadCustomConfigButton/uploadCustomConfigButton.module"
+import { UploadFilesButtonComponent } from "./codeCharta/ui/toolBar/uploadFilesButton/uploadFilesButton.component"
 import { MetricTypeHoveredModule } from "./codeCharta/ui/metricChooser/metricTypeHovered/metricTypeHovered.module"
 import { ResetSettingsButtonComponent } from "./codeCharta/ui/resetSettingsButton/resetSettingsButton.component"
 
@@ -70,16 +72,18 @@ import { ResetSettingsButtonComponent } from "./codeCharta/ui/resetSettingsButto
 		SearchPanelModule,
 		MetricTypeHoveredModule,
 		DownloadCustomConfigButtonModule,
-		MetricValueHoveredModule
+		MetricValueHoveredModule,
+		UploadCustomConfigButtonModule
 	],
-	providers: [threeSceneServiceProvider, IdToBuildingService],
+	providers: [threeSceneServiceProvider, codeChartaServiceProvider, IdToBuildingService],
 	declarations: [
 		FilePanelFileSelectorComponent,
 		FilePanelStateButtonsComponent,
 		FilePanelDeltaSelectorComponent,
 		InvertAreaOptionComponent,
 		EdgeMetricToggleComponent,
 		RemoveFileButtonComponent,
+		UploadFilesButtonComponent,
 		ResetSettingsButtonComponent,
 		...dialogs
 	],
@@ -100,6 +104,7 @@ import { ResetSettingsButtonComponent } from "./codeCharta/ui/resetSettingsButto
 		LoadingMapProgressSpinnerComponent,
 		EdgeMetricToggleComponent,
 		SearchPanelComponent,
+		UploadFilesButtonComponent,
 		ResetSettingsButtonComponent,
 		...dialogs
 	]

visualization/app/codeCharta/services/ajs-upgraded-providers.ts

@@ -1,13 +1,19 @@
 import { InjectionToken, Injector } from "@angular/core"
 
 export const ThreeSceneServiceToken = new InjectionToken("ThreeSceneService")
-
-export function ThreeSceneServiceFactory(injector: Injector) {
-	return injector.get("threeSceneService")
-}
-
 export const threeSceneServiceProvider = {
 	provide: ThreeSceneServiceToken,
-	useFactory: ThreeSceneServiceFactory,
+	useFactory: function ThreeSceneServiceFactory(injector: Injector) {
+		return injector.get("threeSceneService")
+	},
+	deps: ["$injector"]
+}
+
+export const CodeChartaServiceToken = new InjectionToken("CodeChartaService")
+export const codeChartaServiceProvider = {
+	provide: CodeChartaServiceToken,
+	useFactory: function CodeChartaServiceFactory(injector: Injector) {
+		return injector.get("codeChartaService")
+	},
 	deps: ["$injector"]
 }

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

@@ -1,4 +1,3 @@
-import "./addCustomConfig.component.scss"
 import { Component, Inject } from "@angular/core"
 import { MatDialog } from "@angular/material/dialog"
 import { AddCustomConfigDialogComponent } from "./addCustomConfigDialog/addCustomConfigDialog.component"

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

@@ -8,13 +8,7 @@
 			<md-menu-item class="custom-configs-item">
 				<md-button class="custom-configs-dialog-name" ng-disabled="true">Custom Views</md-button>
 
-				<md-button
-					class="action-button"
-					onclick="document.getElementById('input-file-id').click()"
-					title="Upload Custom View (.cc.config.json file)."
-				>
-					<i class="fa fa-folder-open" aria-hidden="true"></i>
-				</md-button>
+				<cc-upload-custom-config-button></cc-upload-custom-config-button>
 				<cc-download-custom-configs-button></cc-download-custom-configs-button>
 				<cc-add-custom-config-button class="custom-configs-button-in-custom-views"></cc-add-custom-config-button>
 			</md-menu-item>

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

@@ -10,7 +10,8 @@
 
 	cc-add-custom-config-button.custom-configs-button-in-ribbonbar button {
 		height: 22px;
-		min-height: 0;
+		width: 45px;
+		margin: 0;
 		line-height: 23px;
 		font-size: 9pt;
 		text-transform: none;
@@ -64,14 +65,29 @@
 
 	.custom-configs-item {
 		cc-download-custom-configs-button,
+		cc-upload-custom-config-button,
 		cc-add-custom-config-button.custom-configs-button-in-custom-views {
 			padding: 0;
-			margin: 0;
 			display: inline-block;
 			width: 65px;
 
-			i.fa {
-				color: #ffffff;
+			button {
+				margin: 0;
+				padding: 0 16px;
+				height: 48px;
+				width: 100%;
+				background-color: #00a091;
+				vertical-align: middle;
+
+				&:disabled {
+					background-color: rgba(230, 230, 230, 0.96);
+				}
+
+				i.fa {
+					vertical-align: middle;
+					font-size: 12px;
+					color: #ffffff;
+				}
 			}
 		}
 

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

@@ -4,9 +4,11 @@ import { customConfigsComponent } from "./customConfigs.component"
 import { AddCustomConfigButtonComponent } from "./addCustomConfigButton/addCustomConfigButton.component"
 import { downgradeComponent } from "@angular/upgrade/static"
 import { DownloadCustomConfigsButtonComponent } from "./downloadCustomConfigsButton/downloadCustomConfigsButton.component"
+import { UploadCustomConfigButtonComponent } from "./uploadCustomConfigButton/uploadCustomConfigButton.component"
 
 angular
 	.module("app.codeCharta.ui.customConfigs", ["app.codeCharta.state"])
 	.component(customConfigsComponent.selector, customConfigsComponent)
 	.directive("ccAddCustomConfigButton", downgradeComponent({ component: AddCustomConfigButtonComponent }))
 	.directive("ccDownloadCustomConfigsButton", downgradeComponent({ component: DownloadCustomConfigsButtonComponent }))
+	.directive("ccUploadCustomConfigButton", downgradeComponent({ component: UploadCustomConfigButtonComponent }))

visualization/app/codeCharta/ui/customConfigs/downloadCustomConfigsButton/downloadCustomConfigsButton.component.ts

@@ -1,4 +1,3 @@
-import "./downloadCustomConfigsButton.component.scss"
 import { Component, Inject, OnDestroy, OnInit } from "@angular/core"
 import { DownloadableConfigs } from "./getDownloadableCustomConfigs"
 

visualization/app/codeCharta/ui/customConfigs/uploadCustomConfigButton/uploadCustomConfigButton.component.html

@@ -0,0 +1,3 @@
+<button class="action-button" title="Upload Custom View (.cc.config.json file)." (click)="upload()">
+	<i class="fa fa-folder-open"></i>
+</button>

visualization/app/codeCharta/ui/customConfigs/uploadCustomConfigButton/uploadCustomConfigButton.component.spec.ts

@@ -0,0 +1,9 @@
+import { render, screen } from "@testing-library/angular"
+import { UploadCustomConfigButtonComponent } from "./uploadCustomConfigButton.component"
+
+describe("uploadCustomConfigButtonComponent", () => {
+	it("should render", async () => {
+		await render(UploadCustomConfigButtonComponent)
+		expect(screen.getByRole("button")).toBeTruthy()
+	})
+})

visualization/app/codeCharta/ui/customConfigs/uploadCustomConfigButton/uploadCustomConfigButton.component.ts

@@ -0,0 +1,25 @@
+import { Component } from "@angular/core"
+import { CustomConfigHelper } from "../../../util/customConfigHelper"
+import { createCCFileInput } from "../../../util/uploadFiles/createCCFileInput"
+import { readFiles } from "../../../util/uploadFiles/readFiles"
+
+@Component({
+	selector: "cc-upload-custom-config-button",
+	template: require("./uploadCustomConfigButton.component.html")
+})
+export class UploadCustomConfigButtonComponent {
+	upload() {
+		const fileInput = createCCFileInput()
+		fileInput.addEventListener("change", async () => {
+			const customConfigsContent = await Promise.all(readFiles(fileInput.files))
+			for (const customConfigContent of customConfigsContent) {
+				try {
+					CustomConfigHelper.importCustomConfigs(customConfigContent)
+				} catch {
+					// Explicitly ignored
+				}
+			}
+		})
+		fileInput.click()
+	}
+}

visualization/app/codeCharta/ui/customConfigs/uploadCustomConfigButton/uploadCustomConfigButton.module.ts

@@ -0,0 +1,9 @@
+import { NgModule } from "@angular/core"
+import { UploadCustomConfigButtonComponent } from "./uploadCustomConfigButton.component"
+
+@NgModule({
+	declarations: [UploadCustomConfigButtonComponent],
+	exports: [UploadCustomConfigButtonComponent],
+	entryComponents: [UploadCustomConfigButtonComponent]
+})
+export class UploadCustomConfigButtonModule {}

visualization/app/codeCharta/ui/dialog/dialog.globalSettings.e2e.ts

@@ -1,22 +1,22 @@
 import { goto } from "../../../puppeteer.helper"
 import { SharpnessMode } from "../../codeCharta.model"
-import { FileChooserPageObject } from "../fileChooser/fileChooser.po"
+import { UploadFileButtonPageObject } from "../toolBar/uploadFilesButton/uploadFilesButton.po"
 import { DialogGlobalSettingsPageObject } from "./dialog.globalSettings.po"
 
 describe("DialogGlobalSettings", () => {
 	let globalSettingsPageObject: DialogGlobalSettingsPageObject
-	let fileChooser: FileChooserPageObject
+	let uploadFilesButton: UploadFileButtonPageObject
 
 	beforeEach(async () => {
 		globalSettingsPageObject = new DialogGlobalSettingsPageObject()
-		fileChooser = new FileChooserPageObject()
+		uploadFilesButton = new UploadFileButtonPageObject()
 
 		await goto()
 		await setupTest()
 	})
 
 	async function setupTest() {
-		await fileChooser.openFiles(["./app/codeCharta/resources/sample1_with_different_edges.cc.json"])
+		await uploadFilesButton.openFiles(["./app/codeCharta/resources/sample1_with_different_edges.cc.json"])
 		await globalSettingsPageObject.openGlobalSettings()
 	}
 

visualization/app/codeCharta/ui/edgeChooser/edgeChooser.e2e.ts

@@ -1,18 +1,18 @@
 import { goto } from "../../../puppeteer.helper"
 import { EdgeChooserPageObject } from "./edgeChooser.po"
-import { FileChooserPageObject } from "../fileChooser/fileChooser.po"
 import { MapTreeViewLevelPageObject } from "../searchPanel/mapTreeView/mapTreeView.level.po"
 import { SearchPanelPageObject } from "../searchPanel/searchPanel.po"
+import { UploadFileButtonPageObject } from "../toolBar/uploadFilesButton/uploadFilesButton.po"
 
 describe("MapTreeViewLevel", () => {
 	let edgeChooser: EdgeChooserPageObject
-	let fileChooser: FileChooserPageObject
+	let uploadFilesButton: UploadFileButtonPageObject
 	let mapTreeViewLevel: MapTreeViewLevelPageObject
 	let searchPanel: SearchPanelPageObject
 
 	beforeEach(async () => {
 		edgeChooser = new EdgeChooserPageObject()
-		fileChooser = new FileChooserPageObject()
+		uploadFilesButton = new UploadFileButtonPageObject()
 		mapTreeViewLevel = new MapTreeViewLevelPageObject()
 		searchPanel = new SearchPanelPageObject()
 
@@ -21,7 +21,7 @@ describe("MapTreeViewLevel", () => {
 
 	describe("EdgeChooser", () => {
 		it("should update metrics correctly after switching to a map with different metrics", async () => {
-			await fileChooser.openFiles(["./app/codeCharta/resources/sample1_with_different_edges.cc.json"])
+			await uploadFilesButton.openFiles(["./app/codeCharta/resources/sample1_with_different_edges.cc.json"])
 			await edgeChooser.open()
 			const metrics = await edgeChooser.getMetrics()