+
{{ 'GENERATE_OPENAPI_SPEC_DIALOG.GENERATING' | translate }}
@@ -88,6 +172,6 @@
{{ 'GENERATE_OPENAPI_SPEC_DIALOG.GENERATING' | translate }}
data-cy="tbGenerateOpenApiButton"
>
{{ 'GENERATE_OPENAPI_SPEC_DIALOG.BUTTON.GENERATE' | translate }}
-
-
+
diff --git a/core/libs/editor/src/lib/editor-toolbar/components/generate-open-api/generate-open-api.component.scss b/core/libs/editor/src/lib/editor-toolbar/components/generate-open-api/generate-open-api.component.scss
index 388b151a..c2d21b29 100644
--- a/core/libs/editor/src/lib/editor-toolbar/components/generate-open-api/generate-open-api.component.scss
+++ b/core/libs/editor/src/lib/editor-toolbar/components/generate-open-api/generate-open-api.component.scss
@@ -11,22 +11,85 @@
* SPDX-License-Identifier: MPL-2.0
*/
-:host {
+.dialog {
display: flex;
flex-direction: column;
min-width: 500px;
-}
-.checkbox-margin {
- margin: 12px 12px;
-}
+ &__checkbox {
+ margin: 12px 12px;
+ }
-.loading {
- display: flex;
- flex-direction: column;
- align-items: center;
-}
+ &__loading {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+
+ &__content {
+ padding-bottom: 0;
+ }
+
+ &__border {
+ &--dashed {
+ border: 2px dashed #000;
+ }
+ &--error {
+ border: 2px dashed red;
+ }
+ }
+
+ &__title {
+ font-size: 1.5em;
+ margin-bottom: 0.5em;
+ }
+
+ &__description {
+ margin-top: 0;
+ }
+
+ &__upload-input {
+ display: none;
+ }
+
+ &__upload-content {
+ padding: 10px 0;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+
+ button {
+ order: 1;
+ }
+
+ span {
+ order: 2;
+ font-size: 10px;
+ }
+ }
+
+ &__textarea {
+ background-color: lightgray;
+ padding-top: 10px;
+ padding-left: 6px;
+ width: 100%;
+ height: 150px;
+ resize: none;
+ border: none;
+ }
+
+ &__file-name {
+ padding-left: 10px;
+ }
+
+ &__file-info {
+ display: flex;
+ align-items: center;
-mat-dialog-content {
- padding-bottom: 0;
+ &__name {
+ margin-left: 10px;
+ }
+ }
}
diff --git a/core/libs/editor/src/lib/editor-toolbar/components/generate-open-api/generate-open-api.component.ts b/core/libs/editor/src/lib/editor-toolbar/components/generate-open-api/generate-open-api.component.ts
index 3954686c..50c1c98c 100644
--- a/core/libs/editor/src/lib/editor-toolbar/components/generate-open-api/generate-open-api.component.ts
+++ b/core/libs/editor/src/lib/editor-toolbar/components/generate-open-api/generate-open-api.component.ts
@@ -11,18 +11,19 @@
* SPDX-License-Identifier: MPL-2.0
*/
-import {Component, OnInit} from '@angular/core';
+import {Component, ElementRef, HostListener, OnDestroy, OnInit, ViewChild} from '@angular/core';
import {MatDialogRef} from '@angular/material/dialog';
-import {FormControl, FormGroup} from '@angular/forms';
+import {FormControl, FormGroup, Validators} from '@angular/forms';
import * as locale from 'locale-codes';
import {SammLanguageSettingsService} from '@ame/settings-dialog';
import {EditorDialogValidators} from '../../../editor-dialog';
import {finalize, first} from 'rxjs/operators';
-import {map} from 'rxjs';
+import {map, Subscription} from 'rxjs';
import {saveAs} from 'file-saver';
import {EditorService} from '../../../editor.service';
import {ModelService} from '@ame/rdf/services';
-import {NamespacesCacheService} from '@ame/cache';
+import {LanguageTranslationService} from '@ame/translation';
+import {NotificationsService} from '@ame/shared';
export interface OpenApi {
language: string;
@@ -31,6 +32,9 @@ export interface OpenApi {
includeQueryApi: boolean;
useSemanticVersion: boolean;
paging: string;
+ resourcePath: string;
+ ymlProperties: string;
+ jsonProperties: string;
}
@Component({
@@ -38,81 +42,215 @@ export interface OpenApi {
templateUrl: './generate-open-api.component.html',
styleUrls: ['./generate-open-api.component.scss'],
})
-export class GenerateOpenApiComponent implements OnInit {
+export class GenerateOpenApiComponent implements OnInit, OnDestroy {
+ @ViewChild('dropArea') dropArea: ElementRef;
+
form: FormGroup;
languages: locale.ILocale[];
isGenerating = false;
+ linkToSpecification = 'https://eclipse-esmf.github.io/ame-guide/generate/generate-openapi-doc.html';
+ uploadedFile: File = undefined;
+ subscriptions = new Subscription();
+
+ private resourcePathValidators = [
+ Validators.required,
+ Validators.pattern(/^\/[a-zA-Z{}/]*$/),
+ Validators.pattern(/^(?!.*\/\/)(?!.*{{)(?!.*}}).*$/),
+ Validators.pattern(/.*({.*})?.*$/),
+ ];
+
+ public get output(): FormControl {
+ return this.form.get('output') as FormControl;
+ }
+
+ public get activateResourcePath(): FormControl {
+ return this.form.get('activateResourcePath') as FormControl;
+ }
+
+ public get resourcePath(): FormControl {
+ return this.form.get('resourcePath') as FormControl;
+ }
+
+ public get file(): FormControl {
+ return this.form.get('file') as FormControl;
+ }
- private get currentCachedFile() {
- return this.namespaceCacheService.currentCachedFile;
+ public get ymlProperties(): FormControl {
+ return this.form.get('ymlProperties') as FormControl;
+ }
+
+ public get jsonProperties(): FormControl {
+ return this.form.get('jsonProperties') as FormControl;
}
constructor(
private dialogRef: MatDialogRef
,
private languageService: SammLanguageSettingsService,
- private namespaceCacheService: NamespacesCacheService,
private modelService: ModelService,
private editorService: EditorService,
+ private notificationsService: NotificationsService,
+ private translate: LanguageTranslationService,
) {}
ngOnInit(): void {
+ this.initializeForm();
+ this.setupFormListeners();
+ }
+
+ ngOnDestroy(): void {
+ this.subscriptions.unsubscribe();
+ }
+
+ private initializeForm(): void {
this.languages = this.languageService.getSammLanguageCodes().map(tag => locale.getByTag(tag));
this.form = new FormGroup({
- baseUrl: new FormControl('https://example.com', {
- validators: [EditorDialogValidators.baseUrl],
- updateOn: 'blur',
- }),
+ baseUrl: new FormControl('https://example.com', Validators.compose([Validators.required, EditorDialogValidators.baseUrl])),
language: new FormControl(this.languages[0].tag),
includeQueryApi: new FormControl(false),
useSemanticVersion: new FormControl(false),
- output: new FormControl('json'),
+ activateResourcePath: new FormControl(false),
+ output: new FormControl('yaml'),
paging: new FormControl('NO_PAGING'),
+ resourcePath: new FormControl(null),
+ file: new FormControl(null),
+ ymlProperties: new FormControl(null),
+ jsonProperties: new FormControl(null),
});
}
- generateOpenApiSpec(): void {
- const openApi: OpenApi = {
- output: this.getControlValue('output') as string,
- baseUrl: this.getControlValue('baseUrl') as string,
- includeQueryApi: this.getControlValue('includeQueryApi') as boolean,
- useSemanticVersion: this.getControlValue('useSemanticVersion') as boolean,
- paging: this.getControlValue('paging') as string,
- language: this.getControlValue('language') as string,
- };
+ private setupFormListeners(): void {
+ this.subscriptions.add(this.output?.valueChanges.subscribe(() => this.removeUploadedFile()));
+
+ this.subscriptions.add(
+ this.activateResourcePath?.valueChanges.subscribe(activateResourcePath => {
+ const resourcePathControl = this.form.get('resourcePath');
+
+ if (activateResourcePath) {
+ resourcePathControl?.setValue('/resource/{resourceId}');
+ resourcePathControl?.setValidators(this.resourcePathValidators);
+ } else {
+ resourcePathControl?.setValue(null);
+ resourcePathControl?.setValidators(null);
+ }
+
+ resourcePathControl?.updateValueAndValidity();
+ }),
+ );
+
+ this.subscriptions.add(
+ this.resourcePath?.valueChanges.subscribe(resourcePath => {
+ const fileControl = this.form.get('file');
+ const hasBrackets = /{.*}/.test(resourcePath);
+ hasBrackets ? fileControl?.setValidators(Validators.required) : fileControl?.setValidators(null);
+ fileControl?.updateValueAndValidity();
+ }),
+ );
+ }
+
+ @HostListener('dragover', ['$event'])
+ preventDragDefaults(event: Event): void {
+ event.preventDefault();
+ }
+
+ @HostListener('drop', ['$event'])
+ handleFileDrop(event: DragEvent): void {
+ event.preventDefault();
+ if (!this.dropArea.nativeElement.contains(event.target)) return;
+ const files = event.dataTransfer?.files;
+ if (files && files.length) {
+ const file = files[0];
+ if (this.validateFile(file)) {
+ this.processFile(file);
+ } else {
+ this.showError();
+ }
+ }
+ }
+
+ private validateFile(file: File): boolean {
+ const fileType = this.form.value.output;
+ return fileType === 'json' ? file.name.endsWith('.json') : file.name.endsWith('.yaml') || file.name.endsWith('.yml');
+ }
+
+ private processFile(file: File): void {
+ this.uploadedFile = file;
+ this.form.patchValue({file: file});
+ this.readFileContent(file);
+ }
+
+ private readFileContent(file: File): void {
+ const reader = new FileReader();
+ reader.onload = () => this.handleFileContent(file, reader.result as string);
+ reader.readAsText(file);
+ }
+
+ private handleFileContent(file: File, content: string): void {
+ const fileType = this.getFileType(file);
+ const propertyName = fileType === 'json' ? 'jsonProperties' : 'ymlProperties';
+ this.form.patchValue({[propertyName]: content});
+ }
+
+ private getFileType(file: File): 'json' | 'yml' {
+ if (file.name.endsWith('.json')) {
+ return 'json';
+ } else if (file.name.endsWith('.yaml') || file.name.endsWith('.yml')) {
+ return 'yml';
+ }
+
+ throw new Error('Unsupported file type');
+ }
+
+ private showError(): void {
+ this.notificationsService.error({
+ title: this.translate.translateService.instant('GENERATE_OPENAPI_SPEC_DIALOG.UPLOAD_ERROR_TITLE'),
+ message: this.translate.translateService.instant('GENERATE_OPENAPI_SPEC_DIALOG.UPLOAD_ERROR_MESSAGE', {
+ output: this.form.value.output.toUpperCase(),
+ }),
+ });
+ }
+
+ generateOpenApiSpec(): void {
this.isGenerating = true;
+ const openApiSpec = this.form.value as OpenApi;
+ this.subscriptions.add(
+ this.editorService
+ .generateOpenApiSpec(this.modelService.currentRdfModel, openApiSpec)
+ .pipe(
+ first(),
+ map(data => this.handleGeneratedSpec(data, openApiSpec)),
+ finalize(() => {
+ this.isGenerating = false;
+ this.dialogRef.close();
+ }),
+ )
+ .subscribe(),
+ );
+ }
- this.editorService
- .generateOpenApiSpec(this.modelService.currentRdfModel, openApi)
- .pipe(
- first(),
- map(data => {
- if (openApi.output === 'yaml') {
- saveAs(
- new Blob([data], {
- type: 'text/yaml',
- }),
- `${this.modelService.loadedAspect.name}-open-api.yaml`,
- );
- } else {
- saveAs(
- new Blob([JSON.stringify(data, null, 2)], {
- type: 'application/json;charset=utf-8',
- }),
- !this.modelService.loadedAspect ? this.currentCachedFile.fileName : `${this.modelService.loadedAspect.name}-open-api.json`,
- );
- }
- }),
- finalize(() => {
- this.isGenerating = false;
- this.dialogRef.close();
- }),
- )
- .subscribe();
+ private handleGeneratedSpec(data: any, spec: OpenApi): void {
+ const fileType = spec.output === 'yaml' ? 'text/yaml' : 'application/json;charset=utf-8';
+ const fileData = spec.output === 'yaml' ? data : JSON.stringify(data, null, 2);
+ const fileName = `${spec.language}-open-api.${spec.output}`;
+ saveAs(new Blob([fileData], {type: fileType}), fileName);
}
- close(): void {
- this.dialogRef.close();
+ onFileBrowseHandler($event: Event): void {
+ const files = ($event.target as HTMLInputElement).files;
+
+ if (files.length) {
+ const file = files[0];
+ this.uploadedFile = file;
+ this.readFileContent(file);
+ this.file.patchValue(file);
+ }
+ }
+
+ removeUploadedFile(): void {
+ this.uploadedFile = null;
+ this.ymlProperties?.reset();
+ this.jsonProperties?.reset();
+ this.file?.reset();
}
getControl(path: string): FormControl {
@@ -122,4 +260,8 @@ export class GenerateOpenApiComponent implements OnInit {
getControlValue(path: string): string | boolean {
return this.getControl(path).value;
}
+
+ close(): void {
+ this.dialogRef.close();
+ }
}
diff --git a/core/libs/editor/src/lib/editor-toolbar/services/file-handling.service.ts b/core/libs/editor/src/lib/editor-toolbar/services/file-handling.service.ts
index eccbbe46..eebda9ff 100644
--- a/core/libs/editor/src/lib/editor-toolbar/services/file-handling.service.ts
+++ b/core/libs/editor/src/lib/editor-toolbar/services/file-handling.service.ts
@@ -91,7 +91,6 @@ export class FileHandlingService {
private namespaceCacheService: NamespacesCacheService,
private migratorService: MigratorService,
private sidebarService: SidebarStateService,
- private titleService: Title,
private translate: LanguageTranslationService,
private electronSignalsService: ElectronSignalsService,
private configurationService: ConfigurationService,
diff --git a/core/libs/editor/src/lib/editor.service.ts b/core/libs/editor/src/lib/editor.service.ts
index ca0eeaa8..ffe3602c 100644
--- a/core/libs/editor/src/lib/editor.service.ts
+++ b/core/libs/editor/src/lib/editor.service.ts
@@ -332,7 +332,16 @@ export class EditorService {
generateOpenApiSpec(rdfModel: RdfModel, openApi: OpenApi): Observable {
const serializedModel = this.rdfService.serializeModel(rdfModel);
- return this.modelApiService.generateOpenApiSpec(serializedModel, openApi);
+ return this.modelApiService.generateOpenApiSpec(serializedModel, openApi).pipe(
+ catchError(err => {
+ this.notificationsService.error({
+ title: this.translate.language.GENERATE_OPENAPI_SPEC_DIALOG.RESOURCE_PATH_ERROR,
+ message: err.error.message,
+ timeout: 5000,
+ });
+ return throwError(() => err.error);
+ }),
+ );
}
private loadCurrentModel(loadedRdfModel: RdfModel, rdfAspectModel: string, namespaceFileName: string, editElementUrn?: string): void {
diff --git a/core/libs/translation/src/lib/models/language.interface.ts b/core/libs/translation/src/lib/models/language.interface.ts
index 6eaa522d..1942b798 100644
--- a/core/libs/translation/src/lib/models/language.interface.ts
+++ b/core/libs/translation/src/lib/models/language.interface.ts
@@ -367,6 +367,20 @@ export interface GenerateOpenapiSpecDialog {
INCLUDE_QUERY_API: string;
USE_SEMANTIC_VERSION: string;
USE_SEMANTIC_VERSION_TOOLTIP: string;
+ ACTIVATE_RESOURCE_PATH: string;
+ ACTIVATE_RESOURCE_PATH_TOOLTIP: string;
+ RESOURCE_PATH: string;
+ RESOURCE_PATH_REQUIRED: string;
+ RESOURCE_PATH_PATTERN: string;
+ RESOURCE_PATH_ERROR: string;
+ UPLOAD_FILE_TITLE: string;
+ UPLOAD_FILE_DESCRIPTION: string;
+ UPLOAD_DRAG_AND_DROP_TEXT: string;
+ UPLOADED_FILE_TITLE: string;
+ UPLOAD_FILE_ACCORDION_TITLE: string;
+ UPLOAD_ERROR_TITLE: string;
+ UPLOAD_ERROR_MESSAGE: string;
+ UPLOAD_FILE_REQUIRED: string;
PAGING_TYPE_OPTION: string;
NO_PAGING: string;
CURSOR_BASED_PAGING: string;
diff --git a/core/package-lock.json b/core/package-lock.json
index e398a709..3f1d721a 100644
--- a/core/package-lock.json
+++ b/core/package-lock.json
@@ -77,6 +77,7 @@
"@typescript-eslint/parser": "5.60.1",
"coverage-istanbul-loader": "^3.0.5",
"cypress": "^13.6.6",
+ "cypress-file-upload": "^5.0.8",
"cypress-real-events": "^1.12.0",
"electron": "28.2.1",
"electron-builder": "^24.13.3",
@@ -16632,6 +16633,18 @@
"node": "^16.0.0 || ^18.0.0 || >=20.0.0"
}
},
+ "node_modules/cypress-file-upload": {
+ "version": "5.0.8",
+ "resolved": "https://registry.npmjs.org/cypress-file-upload/-/cypress-file-upload-5.0.8.tgz",
+ "integrity": "sha512-+8VzNabRk3zG6x8f8BWArF/xA/W0VK4IZNx3MV0jFWrJS/qKn8eHfa5nU73P9fOQAgwHFJx7zjg4lwOnljMO8g==",
+ "dev": true,
+ "engines": {
+ "node": ">=8.2.1"
+ },
+ "peerDependencies": {
+ "cypress": ">3.0.0"
+ }
+ },
"node_modules/cypress-real-events": {
"version": "1.12.0",
"resolved": "https://registry.npmjs.org/cypress-real-events/-/cypress-real-events-1.12.0.tgz",
diff --git a/core/package.json b/core/package.json
index 090c31b2..96c61a5c 100644
--- a/core/package.json
+++ b/core/package.json
@@ -256,6 +256,7 @@
"@typescript-eslint/parser": "5.60.1",
"coverage-istanbul-loader": "^3.0.5",
"cypress": "^13.6.6",
+ "cypress-file-upload": "^5.0.8",
"cypress-real-events": "^1.12.0",
"electron": "28.2.1",
"electron-builder": "^24.13.3",
diff --git a/documentation/ame-guide/modules/ROOT/images/generation/open-api-dialog.png b/documentation/ame-guide/modules/ROOT/images/generation/open-api-dialog.png
new file mode 100644
index 00000000..0dfa475d
Binary files /dev/null and b/documentation/ame-guide/modules/ROOT/images/generation/open-api-dialog.png differ
diff --git a/documentation/ame-guide/modules/ROOT/images/generate-api-spec.png b/documentation/ame-guide/modules/ROOT/images/generation/open-api-menu.png
similarity index 100%
rename from documentation/ame-guide/modules/ROOT/images/generate-api-spec.png
rename to documentation/ame-guide/modules/ROOT/images/generation/open-api-menu.png
diff --git a/documentation/ame-guide/modules/ROOT/pages/generate/generate-openapi-doc.adoc b/documentation/ame-guide/modules/ROOT/pages/generate/generate-openapi-doc.adoc
index 8223e85d..b736946c 100644
--- a/documentation/ame-guide/modules/ROOT/pages/generate/generate-openapi-doc.adoc
+++ b/documentation/ame-guide/modules/ROOT/pages/generate/generate-openapi-doc.adoc
@@ -7,17 +7,36 @@ A menu offers one option to generate the OpenAPI specification. +:
** *OpenAPI specification* -- continue with this one
+
-image::generate-api-spec.png[Generate document, width=100%, align="left"]
+image::generation/open-api-menu.png[Generate document, width=100%, align="left"]
+
* In case your model supports multiple languages, select the specific language for the documentation.
* Select *JSON* or *YAML* as the desired file format.
* Set the *Base URL* were the Aspect API will be served from.
-* Check the *IncludeQueryAPI* checkbox, if you need a path section for the Query API Endpoint of the Aspect API to be included in the specification.
-* Check the *UseSemanticVersion* checkbox, if you need the complete semantic version of the Aspect Model to be used as the version of the API. Otherwise, only the major part of the Aspect Version is used as the version of the API.
* Select the preferred option for paging:
** Cursor-based paging
** Offset-based paging
** Time-based paging
+* Check the *Include Query API* checkbox, if you need a path section for the Query API Endpoint of the Aspect API to be included in the specification.
+* Check the *Use Semantic Version* checkbox, if you need the complete semantic version of the Aspect Model to be used as the version of the API. Otherwise, only the major part of the Aspect Version is used as the version of the API.
+* Check the *Active Resource Path* checkbox, if you need the active resource path to be included in the specification.
* Click *Generate* and store the Open API specification file locally.
+[[resource-path]]
+== Configuring Resource Path in the OpenAPI Generation Dialog
+
+When the Resource Path is activated, additional fields are introduced in the OpenAPI Generation Dialog to allow for its configuration.
+The inclusion of certain properties in the output depends on the selected output file format:
+
+*YAML*: A property file in YAML format is required when YAML is chosen as the output file format.
+*JSON*: A property file in JSON format is needed if JSON is selected.
+
+It is crucial to ensure that the properties in the file match those specified in the resource path.
+Failure to do so will result in an error prompting a review of the mismatches.
+
+For additional details on configuring the Resource Path and generating OpenAPI specifications using the SAMM CLI, please consult our comprehensive guide:
+https://eclipse-esmf.github.io/esmf-developer-guide/2.6.1/tooling-guide/samm-cli.html#using-the-cli-to-create-a-json-openapi-specification)[Generating OpenAPI Specifications with SAMM CLI].
+
+image::generation/open-api-dialog.png[Generate document, width=100%, align="left"]
+
TIP: If you run into errors, please make sure that the graph is valid. +
If the invalid element is not highlighted with a red border, click the Validate icon to get a hint.