Migrated extensions editors, fixed auto-close editor bug, updated edi…

…tor template Signed-off-by: StanZGenchev <stan.z.genchev@gmail.com>
eclipse-dirigible · Jan 6, 2025 · b50e20d · b50e20d
1 parent e51f0fc
commit b50e20d
Show file tree

Hide file tree

Showing 22 changed files with 640 additions and 86 deletions.
diff --git a/components/group/group-platform-ide/pom.xml b/components/group/group-platform-ide/pom.xml
@@ -233,6 +233,10 @@
 			<groupId>org.eclipse.dirigible</groupId>
 			<artifactId>dirigible-components-editor-image</artifactId>
 		</dependency>
+		<dependency>
+			<groupId>org.eclipse.dirigible</groupId>
+			<artifactId>dirigible-components-editor-extensions</artifactId>
+		</dependency>
 
 		<dependency>
 			<groupId>org.eclipse.dirigible</groupId>

diff --git a/components/platform-ide/editor-extensions/.gitignore b/components/platform-ide/editor-extensions/.gitignore
@@ -0,0 +1,17 @@
+# folders
+dist/
+.settings/
+target/
+derby/
+dirigible_local/
+
+# files
+.DS_Store
+.project
+.classpath
+*.bak
+*.class
+*.jar
+derby.log
+/bin/
+/target/
diff --git a/components/platform-ide/editor-extensions/about.html b/components/platform-ide/editor-extensions/about.html
@@ -0,0 +1,29 @@
+
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
+<title>About</title>
+</head>
+<body lang="EN-US">
+<h2>About This Content</h2>
+
+<p>April 25, 2020</p>	
+<h3>License</h3>
+
+<p>The Eclipse Foundation makes available all content in this plug-in (&quot;Content&quot;).  Unless otherwise 
+indicated below, the Content is provided to you under the terms and conditions of the
+Eclipse Public License Version 2.0 (&quot;EPL&quot;).  A copy of the EPL is available 
+at <a href="http://www.eclipse.org/legal/epl-v20.html">http://www.eclipse.org/legal/epl-v20.html</a>.
+For purposes of the EPL, &quot;Program&quot; will mean the Content.</p>
+
+<p>If you did not receive this Content directly from the Eclipse Foundation, the Content is 
+being redistributed by another party (&quot;Redistributor&quot;) and different terms and conditions may
+apply to your use of any object code in the Content.  Check the Redistributor's license that was 
+provided with the Content.  If no such license exists, contact the Redistributor.  Unless otherwise
+indicated below, the terms and conditions of the EPL still apply to any source code in the Content
+and such source code may be obtained at <a href="http://www.eclipse.org/">http://www.eclipse.org</a>.</p>
+
+</body>
+</html>
diff --git a/components/platform-ide/editor-extensions/pom.xml b/components/platform-ide/editor-extensions/pom.xml
@@ -0,0 +1,20 @@
+<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
+	<modelVersion>4.0.0</modelVersion>
+
+	<parent>
+		<groupId>org.eclipse.dirigible</groupId>
+		<artifactId>dirigible-components-parent</artifactId>
+		<version>11.0.0-SNAPSHOT</version>
+		<relativePath>../../pom.xml</relativePath>
+	</parent>
+
+	<name>Components - IDE - Extensions - Editor</name>
+	<artifactId>dirigible-components-editor-extensions</artifactId>
+	<packaging>jar</packaging>
+
+	<properties>
+		<license.header.location>../../../licensing-header.txt</license.header.location>
+		<parent.pom.folder>../../../</parent.pom.folder>
+	</properties>
+
+</project>
diff --git a/...sions/src/main/resources/META-INF/dirigible/editor-extensions/configs/extension-editor.js b/...sions/src/main/resources/META-INF/dirigible/editor-extensions/configs/extension-editor.js
@@ -0,0 +1,21 @@
+/*
+ * Copyright (c) 2024 Eclipse Dirigible contributors
+ *
+ * All rights reserved. This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v2.0
+ * which accompanies this distribution, and is available at
+ * http://www.eclipse.org/legal/epl-v20.html
+ *
+ * SPDX-FileCopyrightText: Eclipse Dirigible contributors
+ * SPDX-License-Identifier: EPL-2.0
+ */
+const editorData = {
+	id: 'extension',
+	label: 'Extension',
+	region: 'center',
+	path: '/services/web/editor-extensions/editors/extension/editor.html',
+	contentTypes: ['application/json+extension']
+};
+if (typeof exports !== 'undefined') {
+	exports.getEditor = () => editorData;
+}
diff --git a/.../src/main/resources/META-INF/dirigible/editor-extensions/configs/extensionpoint-editor.js b/.../src/main/resources/META-INF/dirigible/editor-extensions/configs/extensionpoint-editor.js
@@ -0,0 +1,21 @@
+/*
+ * Copyright (c) 2024 Eclipse Dirigible contributors
+ *
+ * All rights reserved. This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v2.0
+ * which accompanies this distribution, and is available at
+ * http://www.eclipse.org/legal/epl-v20.html
+ *
+ * SPDX-FileCopyrightText: Eclipse Dirigible contributors
+ * SPDX-License-Identifier: EPL-2.0
+ */
+const editorData = {
+	id: 'extensionpoint',
+	label: 'Extension Point',
+	region: 'center',
+	path: '/services/web/editor-extensions/editors/extensionpoint/editor.html',
+	contentTypes: ['application/json+extension-point']
+};
+if (typeof exports !== 'undefined') {
+	exports.getEditor = () => editorData;
+}
diff --git a/...ons/src/main/resources/META-INF/dirigible/editor-extensions/editors/extension/editor.html b/...ons/src/main/resources/META-INF/dirigible/editor-extensions/editors/extension/editor.html
@@ -0,0 +1,70 @@
+<!--
+
+    Copyright (c) 2010-2024 Eclipse Dirigible contributors
+
+    All rights reserved. This program and the accompanying materials
+    are made available under the terms of the Eclipse Public License v2.0
+    which accompanies this distribution, and is available at
+    http://www.eclipse.org/legal/epl-v20.html
+
+    SPDX-FileCopyrightText: Eclipse Dirigible contributors
+    SPDX-License-Identifier: EPL-2.0
+
+-->
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml" ng-app="page" ng-controller="PageController">
+
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <link rel="icon" sizes="any" href="data:;base64,iVBORw0KGgo=">
+        <title config-title></title>
+        <script type="text/javascript" src="/services/web/editor-extensions/configs/extension-editor.js"></script>
+        <script type="text/javascript" src="/services/js/platform-core/services/loader.js?id=editor-js"></script>
+        <link type="text/css" rel="stylesheet" href="/services/js/platform-core/services/loader.js?id=view-css" />
+        <script type="text/javascript" src="/services/web/editor-extensions/editors/extension/editor.js"></script>
+    </head>
+
+    <body class="bk-vbox bk-center--vertical" bk-scrollbar shortcut="'ctrl+s'" shortcut-action="save">
+        <bk-busy-indicator-extended class="bk-fill-parent" ng-hide="state.error || !state.isBusy" size="l">{{state.busyText}}</bk-busy-indicator-extended>
+        <div class="bk-restrict-width bk-full-width" ng-show="!state.error && !state.isBusy">
+            <bk-fieldset class="bk-margin--md" ng-form="forms.editor">
+                <bk-form-group label="Extension:" name="entityForm">
+                    <bk-form-item horizontal="false">
+                        <bk-form-label for="idExtensionPoint" required colon="true">Extension Point</bk-form-label>
+                        <bk-combobox-input id="idExtensionPoint" name="extensionPoint" state="{{ formErrors.extensionPoint ? 'error' : '' }}" ng-required="true" ng-model="extension.extensionPoint" dropdown-items="optionsExtensionPoints"
+                            placeholder="Search Extension Point..." btn-aria-label="show/hide extension point options" list-aria-label="extension point options" max-body-height="260">
+                        </bk-combobox-input>
+                    </bk-form-item>
+                    <bk-form-item horizontal="false">
+                        <bk-form-label for="idModule" required colon="true">Module</bk-form-label>
+                        <bk-form-input-message state="{{ forms.editor['module'].$valid ? '' : 'error' }}" message="inputErrorMessage">
+                            <bk-input id="idModule" name="module" type="text" placeholder="Enter module path" state="{{ forms.editor['module'].$valid ? '' : 'error' }}" ng-required="true" ng-model="extension.module" ng-maxlength="255"
+                                input-rules="{ patterns: ['^[a-zA-Z0-9_.-/$-]*$'] }"></bk-input>
+                        </bk-form-input-message>
+                    </bk-form-item>
+                    <bk-form-item horizontal="false">
+                        <bk-form-label for="idRole" colon="true">Role</bk-form-label>
+                        <bk-form-input-message state="{{ forms.editor['role'].$valid ? '' : 'error' }}" message="inputErrorMessage">
+                            <bk-input id="idRole" name="role" type="text" placeholder="Enter role name" state="{{ forms.editor['role'].$valid ? '' : 'error' }}" ng-required="false" ng-model="extension.role" ng-maxlength="255"
+                                input-rules="{ patterns: ['^[a-zA-Z0-9_.-/$-]*$'] }"></bk-input>
+                        </bk-form-input-message>
+                    </bk-form-item>
+                    <bk-form-item horizontal="false">
+                        <bk-form-label for="idDescription" colon="true">Description</bk-form-label>
+                        <bk-textarea id="idDescription" name="description" ng-required="false" ng-model="extension.description" placeholder="Enter description" ng-maxlength="255"></bk-textarea>
+                    </bk-form-item>
+                    <bk-form-item horizontal="false" class="bk-box--items-end">
+                        <bk-button compact="true" state="emphasized" label="Save" ng-click="save()" ng-disabled="!forms.editor.$valid || !changed"></bk-button>
+                    </bk-form-item>
+                </bk-form-group>
+            </bk-fieldset>
+        </div>
+        <bk-message-page glyph="sap-icon--error" ng-if="state.error">
+            <bk-message-page-title>Editor encounterd an error!</bk-message-page-title>
+            <bk-message-page-subtitle>{{errorMessage}}</bk-message-page-subtitle>
+        </bk-message-page>
+        <theme></theme>
+    </body>
+
+</html>
diff --git a/...sions/src/main/resources/META-INF/dirigible/editor-extensions/editors/extension/editor.js b/...sions/src/main/resources/META-INF/dirigible/editor-extensions/editors/extension/editor.js
@@ -0,0 +1,146 @@
+/*
+ * Copyright (c) 2024 Eclipse Dirigible contributors
+ *
+ * All rights reserved. This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v2.0
+ * which accompanies this distribution, and is available at
+ * http://www.eclipse.org/legal/epl-v20.html
+ *
+ * SPDX-FileCopyrightText: Eclipse Dirigible contributors
+ * SPDX-License-Identifier: EPL-2.0
+ */
+angular.module('page', ['blimpKit', 'platformView', 'platformShortcuts', 'WorkspaceService']).controller('PageController', ($scope, $http, $window, WorkspaceService, ViewParameters) => {
+	const statusBarHub = new StatusBarHub();
+	const workspaceHub = new WorkspaceHub();
+	const layoutHub = new LayoutHub();
+	let contents = '';
+	$scope.changed = false;
+	$scope.errorMessage = 'An unknown error was encountered. Please see console for more information.';
+	$scope.inputErrorMessage = 'Allowed characters include all letters, numbers, \'_\', \'.\', \'-\', \'/\', and \'$\'. Maximum length is 255.';
+	$scope.forms = {
+		editor: {},
+	};
+	$scope.state = {
+		isBusy: true,
+		error: false,
+		busyText: 'Loading...',
+	};
+
+	angular.element($window).bind('focus', () => { statusBarHub.showLabel('') });
+
+	const loadFileContents = () => {
+		if (!$scope.state.error) {
+			$scope.state.isBusy = true;
+			WorkspaceService.loadContent($scope.dataParameters.filePath).then((response) => {
+				$scope.$evalAsync(() => {
+					if (response.data === '') $scope.extension = {};
+					else $scope.extension = response.data;
+					contents = JSON.stringify($scope.extension, null, 4);
+					$scope.state.isBusy = false;
+				});
+			}, (response) => {
+				console.error(response);
+				$scope.$evalAsync(() => {
+					$scope.state.error = true;
+					$scope.errorMessage = 'Error while loading file. Please look at the console for more information.';
+					$scope.state.isBusy = false;
+				});
+			});
+		}
+	};
+
+	function saveContents(text) {
+		WorkspaceService.saveContent($scope.dataParameters.filePath, text).then(() => {
+			contents = text;
+			layoutHub.setEditorDirty({
+				path: $scope.dataParameters.filePath,
+				dirty: false,
+			});
+			workspaceHub.announceFileSaved({
+				path: $scope.dataParameters.filePath,
+				contentType: $scope.dataParameters.contentType,
+			});
+			$scope.$evalAsync(() => {
+				$scope.changed = false;
+				$scope.state.isBusy = false;
+			});
+		}, (response) => {
+			console.error(response);
+			$scope.$evalAsync(() => {
+				$scope.state.error = true;
+				$scope.errorMessage = `Error saving '${$scope.dataParameters.file}'. Please look at the console for more information.`;
+				$scope.state.isBusy = false;
+			});
+		});
+	}
+
+	$scope.save = (keySet = 'ctrl+s', event) => {
+		event?.preventDefault();
+		if (keySet === 'ctrl+s') {
+			if ($scope.changed && $scope.forms.editor.$valid && !$scope.state.error) {
+				$scope.state.busyText = 'Saving...';
+				$scope.state.isBusy = true;
+				saveContents(JSON.stringify($scope.extension, null, 4));
+			}
+		}
+	};
+
+	layoutHub.onFocusEditor((data) => {
+		if (data.path && data.path === $scope.dataParameters.filePath) statusBarHub.showLabel('');
+	});
+
+	layoutHub.onReloadEditorParams((data) => {
+		if (data.path === $scope.dataParameters.filePath) {
+			$scope.$evalAsync(() => {
+				$scope.dataParameters = ViewParameters.get();
+			});
+		};
+	});
+
+	workspaceHub.onSaveAll(() => {
+		if (!$scope.state.error && $scope.forms.editor.$valid) {
+			const extension = JSON.stringify($scope.extension, null, 4);
+			if (contents !== extension) $scope.save();
+		}
+	});
+
+	workspaceHub.onSaveFile((data) => {
+		if (data.path && data.path === $scope.dataParameters.filePath) {
+			if (!$scope.state.error && $scope.forms.editor.$valid) {
+				const extension = JSON.stringify($scope.extension, null, 4);
+				if (contents !== extension) $scope.save();
+			}
+		}
+	});
+
+	$scope.$watch('extension', () => {
+		if (!$scope.state.error && !$scope.state.isBusy) {
+			const isDirty = contents !== JSON.stringify($scope.extension, null, 4);
+			if ($scope.changed !== isDirty) {
+				$scope.changed = isDirty;
+				layoutHub.setEditorDirty({
+					path: $scope.dataParameters.filePath,
+					dirty: isDirty,
+				});
+			}
+		}
+	}, true);
+
+	$scope.dataParameters = ViewParameters.get();
+	if (!$scope.dataParameters.hasOwnProperty('filePath')) {
+		$scope.state.error = true;
+		$scope.errorMessage = 'The \'filePath\' data parameter is missing.';
+	} else if (!$scope.dataParameters.hasOwnProperty('contentType')) {
+		$scope.state.error = true;
+		$scope.errorMessage = 'The \'contentType\' data parameter is missing.';
+	} else {
+		$http.get('/services/js/service-extensions/extensionPoints.mjs').then((response) => {
+			$scope.optionsExtensionPoints = response.data.map(e => ({ text: e, value: e }));
+			loadFileContents();
+		}, (error) => {
+			console.error(error);
+			$scope.state.error = true;
+			$scope.errorMessage = error.data.message;
+		});
+	}
+});