Feature/adjust documentation to new design (#147)

* Update images for first page of getting started

* Add menu images for doc

* Update menu-file.png

* Adjust image path

* Adjust getting started guide for ui overview adoc

* Change images

* Update ui-overview.adoc

* Adjust settings.adoc

* Update load and save model adoc

* Update last section of getting started guide edit models

* Update section modelling

* Fix size of image

* Adjust documentation and fix example value bug

* Fix refreshing workspace after saving it

* Update use-external-references.adoc

* Change images for external references adoc

* Adjust use references

* Adjust generate topic in antora

* Update use-references.adoc

* Update ui-overview.adoc

* Add images to antora doc

* Fix loading problem on sidebar

* Update file-handling.service.ts

* Fix images of documentation

* Remove unused images from doc and fix some issues

* Update edit-abstract-entity.cy.ts

---------

Co-authored-by: Larisa Vasile <[email protected]>

Author: michelu89

core/apps/ame-e2e/src/integration/editor/edit-abstract-entity.cy.ts

@@ -305,6 +305,7 @@ describe('Create and Edit Abstract Entity', () => {
     it('should create model', () => {
       cy.visitDefault();
       cy.startModelling()
+        .wait(500)
         .then(() => cy.get(SELECTOR_elementBtn).click())
         .then(() => cy.clickAddShapePlusIcon('Characteristic1'))
         .then(() => cy.dragElement(SELECTOR_ecAbstractEntity, 350, 300).then(() => cy.clickShape('AbstractEntity1')))

core/apps/ame-e2e/src/integration/editor/edit-abstract-property.cy.ts

@@ -131,6 +131,7 @@ describe('Create and Edit Abstract Property', () => {
       cy.fixture('abstract-property')
         .as('rdfString')
         .then(rdfString => cy.loadModel(rdfString))
+        .wait(500)
         .then(() => cy.clickShape('abstractProperty1'));
     });
 
@@ -155,6 +156,7 @@ describe('Create and Edit Abstract Property', () => {
     it('should create model', () => {
       cy.visitDefault();
       cy.startModelling()
+        .wait(500)
         .then(() => cy.get(SELECTOR_elementBtn).click())
         .then(() => cy.dragElement(SELECTOR_ecAbstractEntity, 350, 300))
         .then(() => cy.clickShape('AbstractEntity1'));

core/apps/ame-e2e/src/integration/editor/edit-enumeration-entity-values.cy.ts

@@ -44,6 +44,7 @@ describe('Test enumeration entity value', () => {
     cy.intercept('POST', 'http://localhost:9091/ame/api/models/validate', {fixture: 'model-validation-response.json'});
     cy.visitDefault();
     cy.startModelling()
+      .wait(500)
       .then(() => cy.get(SELECTOR_elementBtn).click())
       .then(() => cy.dbClickShape('Characteristic1'))
       .then(() => cy.get(FIELD_clearDataTypeBtn).click({force: true}))
@@ -152,6 +153,7 @@ describe('Test enumeration entity value', () => {
   it('add entity values with one property', () => {
     cy.visitDefault();
     cy.startModelling()
+      .wait(500)
       .then(() => cy.get(SELECTOR_elementBtn).click())
       .then(() => cy.shapeExists('Characteristic1'))
       .then(() => cy.clickAddShapePlusIcon('Characteristic1'))
@@ -210,6 +212,7 @@ describe('Test enumeration entity value', () => {
   it('add entity value without property', () => {
     cy.visitDefault();
     cy.startModelling()
+      .wait(500)
       .then(() => cy.get(SELECTOR_elementBtn).click())
       .then(() => cy.shapeExists('Characteristic1'))
       .then(() => cy.clickAddShapePlusIcon('Characteristic1'))
@@ -236,6 +239,7 @@ describe('Test enumeration entity value', () => {
   it('show searchbar when complex values enumeration is selected', () => {
     cy.visitDefault();
     cy.startModelling()
+      .wait(500)
       .then(() => cy.get(SELECTOR_elementBtn).click())
       .then(() => cy.shapeExists('Characteristic1'))
       .then(() => cy.dbClickShape('Characteristic1'))
@@ -474,6 +478,7 @@ describe('Test enumeration entity value', () => {
   it('it should add manually new entity value shape', () => {
     cy.visitDefault();
     cy.startModelling()
+      .wait(500)
       .then(() => cy.get(SELECTOR_elementBtn).click())
       .then(() => cy.shapeExists('Characteristic1'))
       .then(() => cy.clickAddShapePlusIcon('Characteristic1'))
@@ -550,6 +555,7 @@ describe('Test enumeration entity value', () => {
   it('should create NewEntity', () => {
     cy.visitDefault();
     cy.startModelling()
+      .wait(500)
       .then(() => cy.get(SELECTOR_elementBtn).click())
       .then(() => cy.intercept('POST', 'http://localhost:9091/ame/api/models/validate', {fixture: 'model-validation-response.json'}))
       .then(() => cy.dbClickShape('Characteristic1'))
@@ -570,6 +576,7 @@ describe('Test enumeration entity value', () => {
   it('should create NewEntity and new entity values', () => {
     cy.visitDefault();
     cy.startModelling()
+      .wait(500)
       .then(() => cy.get(SELECTOR_elementBtn).click())
       .then(() => cy.intercept('POST', 'http://localhost:9091/ame/api/models/validate', {fixture: 'model-validation-response.json'}))
       .then(() => cy.dbClickShape('Characteristic1'))
@@ -595,6 +602,7 @@ describe('Test enumeration entity value', () => {
   it('should create enumeration with lang string values', () => {
     cy.visitDefault();
     cy.startModelling()
+      .wait(500)
       .then(() => cy.get(SELECTOR_elementBtn).click())
       .then(() => cy.intercept('POST', 'http://localhost:9091/ame/api/models/validate', {fixture: 'model-validation-response.json'}))
       .then(() => cy.clickAddShapePlusIcon('Characteristic1'))
@@ -703,7 +711,7 @@ describe('Test enumeration entity value', () => {
   it('should create nested enumerations', () => {
     cy.visitDefault();
     cy.startModelling()
-      .then(() => cy.intercept('POST', 'http://localhost:9091/ame/api/models/validate', {fixture: 'model-validation-response.json'}))
+      .wait(500)
       .then(() => cy.clickAddShapePlusIcon('Characteristic1'))
       .then(() => cy.clickAddShapePlusIcon('Entity1'))
       .then(() => cy.clickAddShapePlusIcon('property2'))

core/apps/ame-e2e/src/integration/editor/edit-property.cy.ts

@@ -44,6 +44,7 @@ describe('Test edit property', () => {
   it('should rename first property and new property', () => {
     cy.visitDefault();
     cy.startModelling()
+      .wait(500)
       .then(() => cy.get(SELECTOR_elementBtn).click())
       .then(() => cy.shapeExists('property1'))
       .then(() => cy.dbClickShape('property1'))
@@ -92,6 +93,7 @@ describe('Test edit property', () => {
 
     cy.visitDefault();
     cy.startModelling()
+      .wait(500)
       .then(() => cy.shapeExists('property1'))
       .then(() => cy.dbClickShape('property1'))
       .then(() => cy.get(FIELD_name).clear({force: true}).type('externalPropertyWithChildren ', {force: true}).wait(1000))
@@ -224,6 +226,7 @@ describe('Test edit property', () => {
   it('should rename first property and rename new added property', () => {
     cy.visitDefault();
     cy.startModelling()
+      .wait(500)
       .then(() => cy.get(SELECTOR_elementBtn).click())
       .then(() => cy.shapeExists('property1'))
       .then(() => cy.dbClickShape('property1'))
@@ -249,6 +252,7 @@ describe('Test edit property', () => {
   it('should rename first property and rename second added second property and add new default property', () => {
     cy.visitDefault();
     cy.startModelling()
+      .wait(500)
       .then(() => cy.get(SELECTOR_elementBtn).click())
       .then(() => cy.shapeExists('property1'))
       .then(() => cy.dbClickShape('property1'))
@@ -276,6 +280,7 @@ describe('Test edit property', () => {
   it('should rename property and rename second added property and rename third added default property', () => {
     cy.visitDefault();
     cy.startModelling()
+      .wait(500)
       .then(() => cy.get(SELECTOR_elementBtn).click())
       .then(() => cy.shapeExists('property1'))
       .then(() => cy.dbClickShape('property1'))
@@ -309,6 +314,7 @@ describe('Test edit property', () => {
 
     cy.visitDefault();
     cy.startModelling()
+      .wait(500)
       .then(() => cy.get(SELECTOR_elementBtn).click())
       // create a
       .then(() => cy.shapeExists('property1'))
@@ -359,6 +365,7 @@ describe('Test edit property', () => {
   it('should rename aspect after rename property and create new default property', () => {
     cy.visitDefault();
     cy.startModelling()
+      .wait(500)
       .then(() => cy.get(SELECTOR_elementBtn).click())
       .then(() => cy.shapeExists('property1'))
       .then(() => cy.dbClickShape('property1'))
@@ -388,6 +395,7 @@ describe('Test edit property', () => {
   it('should create entity rename new created property and create new default entity property', () => {
     cy.visitDefault();
     cy.startModelling()
+      .wait(500)
       .then(() => cy.get(SELECTOR_elementBtn).click())
       .then(() => cy.clickAddShapePlusIcon('Characteristic1'))
       .then(() => cy.shapeExists('Entity1'))
@@ -416,6 +424,7 @@ describe('Test edit property', () => {
   it('should rename entity after rename new created property and create new default entity property', () => {
     cy.visitDefault();
     cy.startModelling()
+      .wait(500)
       .then(() => cy.get(SELECTOR_elementBtn).click())
       .then(() => cy.clickAddShapePlusIcon('Characteristic1'))
       .then(() => cy.shapeExists('Entity1'))
@@ -450,6 +459,7 @@ describe('Test edit property', () => {
   it('should rename entity property and create new default property and then create aspect property and rename the aspect', () => {
     cy.visitDefault();
     cy.startModelling()
+      .wait(500)
       .then(() => cy.get(SELECTOR_elementBtn).click())
       .then(() => cy.clickAddShapePlusIcon('Characteristic1'))
       .then(() => cy.shapeExists('Entity1'))
@@ -496,6 +506,7 @@ describe('Test edit property', () => {
     it('should overwrite property with optional and notInPayload should not be present', () => {
       cy.visitDefault();
       cy.startModelling()
+        .wait(500)
         .then(() => cy.get(SELECTOR_elementBtn).click())
         .then(() => cy.dbClickShape('AspectDefault'))
         .then(() => cy.get('[data-cy="properties-modal-button"]').click({force: true}))
@@ -525,6 +536,7 @@ describe('Test edit property', () => {
     it('should overwrite property of complex enumeration with notInPayload', () => {
       cy.visitDefault();
       cy.startModelling()
+        .wait(500)
         .then(() => cy.get(SELECTOR_elementBtn).click())
         .then(() => cy.clickAddShapePlusIcon('Characteristic1'))
         .then(() => cy.shapeExists('Entity1'))
@@ -560,6 +572,7 @@ describe('Test edit property', () => {
     it('should overwrite property with payloadName', () => {
       cy.visitDefault();
       cy.startModelling()
+        .wait(500)
         .then(() => cy.get(SELECTOR_elementBtn).click())
         .then(() => cy.dbClickShape('AspectDefault'))
         .then(() => cy.get('[data-cy="properties-modal-button"]').click({force: true}))

core/apps/ame-e2e/src/integration/editor/edit-time-series-entity.cy.ts

@@ -28,6 +28,7 @@ describe('Time Series Entity', () => {
   it('should create TimeSeriesEntity with its properties', () => {
     cy.visitDefault();
     cy.startModelling()
+      .wait(500)
       .then(() => cy.get(SELECTOR_elementBtn).click())
       .then(() => cy.clickAddShapePlusIcon('Characteristic1'))
       .then(() => createTimeSeriesEntity())
@@ -141,6 +142,7 @@ describe('Time Series Entity', () => {
     cy.fixture('time-series-entity')
       .as('rdfString')
       .then(rdfString => cy.loadModel(rdfString))
+      .wait(500)
       .then(() => cy.clickShape('Entity1'))
       .then(() => cy.getCellLabel('Entity1', 'preferredName').should('eq', 'Inherited\npreferredName = Time Series Entity @en'))
       .then(() =>

core/apps/ame-e2e/src/integration/editor/file-resource-entity.cy.ts

@@ -28,6 +28,7 @@ describe('Time Series Entity', () => {
   it('should create FileResource with its properties', () => {
     cy.visitDefault();
     cy.startModelling()
+      .wait(500)
       .then(() => cy.clickAddShapePlusIcon('Characteristic1'))
       .then(() => createFileResourceEntity())
 

core/apps/ame-e2e/src/integration/editor/load-external-references-different-namespace.cy.ts

@@ -36,6 +36,7 @@ describe('Test drag and drop', () => {
     cy.fixture('/external-reference/different-namespace/model-with-external-property-reference-with-childrens')
       .as('rdfString')
       .then(rdfString => cy.loadModel(rdfString))
+      .wait(500)
       .then(() => cy.getAspect())
       .then(aspect => {
         expect(aspect.name).to.equal('AspectDefault');
@@ -91,6 +92,7 @@ describe('Test drag and drop', () => {
     cy.fixture('/external-reference/different-namespace/entity-external-property-with-children-reference')
       .as('rdfString')
       .then(rdfString => cy.loadModel(rdfString))
+      .wait(500)
       .then(() => cy.getAspect())
       .then(aspect => {
         const aspectParams = {name: 'AspectDefault'};
@@ -143,6 +145,7 @@ describe('Test drag and drop', () => {
     cy.fixture('/external-reference/different-namespace/model-with-external-operation-reference-with-children')
       .as('rdfString')
       .then(rdfString => cy.loadModel(rdfString))
+      .wait(500)
       .then(() => cy.getAspect())
       .then(aspect => {
         expect(aspect.name).to.equal('AspectDefault');
@@ -217,6 +220,7 @@ describe('Test drag and drop', () => {
     cy.fixture('/external-reference/different-namespace/model-with-external-characteristic-reference-with-childrens')
       .as('rdfString')
       .then(rdfString => cy.loadModel(rdfString))
+      .wait(500)
       .then(() => cy.getAspect())
       .then(aspect => {
         expect(aspect.name).to.equal('AspectDefault');
@@ -273,6 +277,7 @@ describe('Test drag and drop', () => {
     cy.fixture('/external-reference/different-namespace/model-with-external-entity-reference-with-childrens')
       .as('rdfString')
       .then(rdfString => cy.loadModel(rdfString))
+      .wait(500)
       .then(() => cy.getAspect())
       .then(aspect => {
         expect(aspect.name).to.equal('AspectDefault');
@@ -328,6 +333,7 @@ describe('Test drag and drop', () => {
     cy.fixture('/external-reference/different-namespace/model-with-external-unit-reference')
       .as('rdfString')
       .then(rdfString => cy.loadModel(rdfString))
+      .wait(500)
       .then(() => cy.getAspect())
       .then(aspect => {
         expect(aspect.name).to.equal('AspectDefault');
@@ -435,6 +441,7 @@ describe('Test drag and drop', () => {
     cy.fixture('/external-reference/different-namespace/model-with-several-external-reference')
       .as('rdfString')
       .then(rdfString => cy.loadModel(rdfString))
+      .wait(500)
       .then(() => cy.getAspect())
       .then(aspect => {
         expect(aspect.name).to.equal('AspectDefault');

core/apps/ame-e2e/src/integration/editor/load-external-references-same-namespace.cy.ts

@@ -39,6 +39,7 @@ describe('Test load external reference with same namespace', () => {
     cy.fixture('/external-reference/same-namespace/model-with-external-property-reference-with-children')
       .as('rdfString')
       .then(rdfString => cy.loadModel(rdfString))
+      .wait(500)
       .then(() => cy.getAspect())
       .then(aspect => {
         expect(aspect.name).to.equal('AspectDefault');
@@ -97,6 +98,7 @@ describe('Test load external reference with same namespace', () => {
     cy.fixture('/external-reference/same-namespace/model-with-external-operation-reference-with-children')
       .as('rdfString')
       .then(rdfString => cy.loadModel(rdfString))
+      .wait(500)
       .then(() => cy.getAspect())
       .then(aspect => {
         expect(aspect.name).to.equal('AspectDefault');
@@ -174,6 +176,7 @@ describe('Test load external reference with same namespace', () => {
     cy.fixture('/external-reference/same-namespace/model-with-external-characteristic-reference-with-children')
       .as('rdfString')
       .then(rdfString => cy.loadModel(rdfString))
+      .wait(500)
       .then(() => cy.getAspect())
       .then(aspect => {
         expect(aspect.name).to.equal('AspectDefault');
@@ -230,6 +233,7 @@ describe('Test load external reference with same namespace', () => {
     cy.fixture('/external-reference/same-namespace/model-with-external-unit-reference')
       .as('rdfString')
       .then(rdfString => cy.loadModel(rdfString))
+      .wait(500)
       .then(() => cy.getAspect())
       .then(aspect => {
         expect(aspect.name).to.equal('AspectDefault');
@@ -278,6 +282,7 @@ describe('Test load external reference with same namespace', () => {
     cy.fixture('/external-reference/same-namespace/model-with-external-entity-reference-with-children')
       .as('rdfString')
       .then(rdfString => cy.loadModel(rdfString))
+      .wait(500)
       .then(() => cy.getAspect())
       .then(aspect => {
         expect(aspect.name).to.equal('AspectDefault');
@@ -395,6 +400,7 @@ describe('Test load external reference with same namespace', () => {
     cy.fixture('/external-reference/same-namespace/model-with-several-external-reference')
       .as('rdfString')
       .then(rdfString => cy.loadModel(rdfString))
+      .wait(500)
       .then(() => cy.getAspect())
       .then(aspect => {
         expect(aspect.name).to.equal('AspectDefault');

core/apps/ame-e2e/src/integration/editor/load-external-references-with-cross-reference.cy.ts

@@ -128,6 +128,7 @@ describe('Test load external reference with cross references', () => {
     cy.fixture('/external-reference/cross-references/model-with-cross-referenced-element')
       .as('rdfString')
       .then(rdfString => cy.loadModel(rdfString))
+      .wait(500)
       .then(() => cyHelp.checkAspectDefaultExists())
       .then(() => cy.getAspect())
       .then(aspect => {
@@ -241,6 +242,7 @@ describe('Test load external reference with cross references', () => {
     cy.fixture('/external-reference/cross-references/model-with-cross-referenced-element-with-mixing-namespaces')
       .as('rdfString')
       .then(rdfString => cy.loadModel(rdfString))
+      .wait(500)
       .then(() => cyHelp.checkAspectDefaultExists())
       .then(() => cy.getAspect())
       .then(aspect => {

core/apps/ame-e2e/src/support/commands.ts

@@ -22,6 +22,7 @@ import {cyHelp} from './helpers';
 import {FileHandlingService, GenerateHandlingService} from '@ame/editor';
 import {SearchesStateService} from '@ame/utils';
 import {NamespacesManagerService} from '@ame/namespace-manager';
+import {Aspect} from '@ame/meta-model';
 
 const {mxEventObject, mxEvent} = mxgraphFactory({});
 
@@ -283,7 +284,7 @@ declare global {
 
 Cypress.Commands.add('visitDefault', () => cy.visit('?e2e=true'));
 
-Cypress.Commands.add('getAspect', () => cy.window().then(win => win['angular.modelService'].loadedAspect));
+Cypress.Commands.add('getAspect', () => cy.window().then(win => win['angular.modelService'].loadedAspect as Aspect));
 
 Cypress.Commands.add('getEditorService', () => cy.window().then(win => win['angular.editorService']));
 Cypress.Commands.add('getMxgraphService', () => cy.window().then(win => win['angular.mxGraphService']));