[ACS-5645] Added edit button to each property panel

docs/content-services/components/content-metadata-card.component.md

@@ -56,12 +56,6 @@ Displays and edits metadata related to a node.
 | editable | `boolean` |  | (optional) This flag toggles editable of content. |
 | customPanels | [`ContentMetadataCustomPanel`](../interfaces/content-metadata-custom-panel.interface.md)`[]` | | (optional) List of custom metadata panels to be displayed as [`Dynamic components`](../../extensions/components/dynamic.component.md). |
 
-### Events
-
-| Name           | Type                                                                  | Description                                       |
-|----------------|-----------------------------------------------------------------------|---------------------------------------------------|
-| editableChange | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<boolean>` | Emitted when content's editable state is changed. |
-
 ## Details
 
 The component shows metadata related to a given node. It uses the
@@ -444,3 +438,4 @@ When the list of values is too long, the options selection panel will be enhance
 ## Custom metadata panels
 
 If there is a need to display some custom node properties that require additional UI or data to be fetched you can define custom metadata panels for the metadata component. After creating custom component to be displayed it has to be registered in [Extension Service](../../extensions/services/extension.service.md). Both `panelTitle` and `component` properties have to be defined.
+![Chips for multi value properties](../../docassets/images/adf-search-select.png)

docs/content-services/components/tags-creator.component.md

@@ -37,3 +37,4 @@ Allows to create multiple tags. That component contains input and two lists. Top
 | existingTagsPanelVisibilityChange | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<boolean>` | Emitted when bottom list is showing or hiding. |
 | tagNameControlVisibleChange | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<boolean>` | Emitted when input is showing or hiding. |
 | tagsChange | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<string[]>` | Emitted when tags in top list are changed. |
+

docs/tutorials/content-metadata-component.md

@@ -98,12 +98,30 @@ Now that the `my-preset` configuration is defined, let's use it in a view of the
 </adf-content-metadata-card>
 ```
 
+### Properties
+
+| Name | Type | Default value | Description |
+| ---- | ---- | ------------- | ----------- |
+| readOnly | `boolean` | false | (optional) This flag sets the metadata in read only mode preventing changes. |
+| editable | `boolean` |  | (optional) This flag toggles editable of content. |
+| editableTags | `boolean` |  | (optional) This flag toggles editable of tags content. |
+| editableCategories | `boolean` |  | (optional) This flag toggles editable of categories content. |
+
+### Events
+
+| Name | Type | Description |
+|----------------|-----------------------------------------------------------------------|---------------------------------------------------|
+| editableChange | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<boolean>` | Emitted when content's editable state is changed. |
+| editableTagsChange | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<boolean>` | Emitted when content's editableTags state is changed. |
+| editableCategoriesChange | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<boolean>` | Emitted when content's editableCategories state is changed. |
+| groupChange | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<boolean>` | Emitted when content's group state is changed. |
+
 ### Viewing the result
 
-After saving the html file, open the ADF app in a browser and dive into the `Personal Files > Sites > swsdp` folder of the Alfresco's repository. Once there, select the `documentLibrary` folder (one click only) and click on the view details icon (the `i` on the top right). Scrolling down the metadata tab on the right, click on the `More information` item at the bottom. Once clicked, you will see two different groups: `Properties` (already there by default) and `This is my preset`. Click on `This is my preset` to show the properties related.
+After saving the html file, open the ADF app in a browser and dive into the `Personal Files > Sites > swsdp` folder of the Alfresco's repository. Once there, select the `documentLibrary` folder (one click only) and click on the view details icon (the `menu_open icon` on the top right). Scrolling down the metadata tab on the right. You will see different panels: `Properties` (already there by default), `Tags`, `Categories` and `grouped properties`.
 
 In the following screenshot you can see how the result should look:
 
-![content_metadata_preset](../docassets/images/content_metadata_preset.png)
+![UI_Property_Panel](../docassets/images/UI_property_panel.png)
 
 To check it out, double click on the `documentLibrary` folder and select (with one click) the `Presentations` folder. You should see the `This is my preset` group disappear from the metadata panel, because the node doesn't have the `st:siteContainer` aspect.

e2e/content-services/components/permissions-component.e2e.ts

@@ -339,8 +339,8 @@ describe('Permissions Component', () => {
             await BrowserActions.closeMenuAndDialogs();
             await contentList.checkActionMenuIsNotDisplayed();
             await contentServicesPage.metadataContent('RoleEditor' + fileModel.name);
-            await metadataViewPage.editIconIsDisplayed();
-            await metadataViewPage.editIconClick();
+            await metadataViewPage.isEditGeneralIconDisplayed();
+            await metadataViewPage.clickEditIconGeneral();
             await metadataViewPage.editPropertyIconIsDisplayed('properties.cm:title');
             await metadataViewPage.enterPropertyText('properties.cm:title', 'newTitle1');
             await expect(await metadataViewPage.getPropertyText('properties.cm:title')).toEqual('newTitle1');
@@ -360,8 +360,8 @@ describe('Permissions Component', () => {
             await BrowserActions.closeMenuAndDialogs();
             await contentList.checkActionMenuIsNotDisplayed();
             await contentServicesPage.metadataContent('RoleCollaborator' + fileModel.name);
-            await metadataViewPage.editIconIsDisplayed();
-            await metadataViewPage.editIconClick();
+            await metadataViewPage.isEditGeneralIconDisplayed();
+            await metadataViewPage.clickEditIconGeneral();
             await metadataViewPage.editPropertyIconIsDisplayed('properties.cm:title');
             await metadataViewPage.enterPropertyText('properties.cm:title', 'newTitle2');
             await expect(await metadataViewPage.getPropertyText('properties.cm:title')).toEqual('newTitle2');
@@ -382,8 +382,8 @@ describe('Permissions Component', () => {
             await viewerPage.clickCloseButton();
             await contentList.waitForTableBody();
             await contentServicesPage.metadataContent('RoleCoordinator' + fileModel.name);
-            await metadataViewPage.editIconIsDisplayed();
-            await metadataViewPage.editIconClick();
+            await metadataViewPage.isEditGeneralIconDisplayed();
+            await metadataViewPage.clickEditIconGeneral();
             await metadataViewPage.editPropertyIconIsDisplayed('properties.cm:title');
             await metadataViewPage.enterPropertyText('properties.cm:title', 'newTitle3');
             await expect(await metadataViewPage.getPropertyText('properties.cm:title')).toEqual('newTitle3');

e2e/content-services/metadata/aspect-oriented-config.e2e.ts

@@ -122,8 +122,6 @@ describe('Aspect oriented config', () => {
         await viewerPage.clickInfoButton();
         await viewerPage.checkInfoSideBarIsDisplayed();
         await metadataViewPage.clickOnPropertiesTab();
-        await metadataViewPage.informationButtonIsDisplayed();
-        await metadataViewPage.clickOnInformationButton();
 
         await metadataViewPage.clickMetadataGroup('IMAGE');
         await metadataViewPage.checkPropertyIsVisible('properties.exif:pixelXDimension', 'textitem');
@@ -152,8 +150,6 @@ describe('Aspect oriented config', () => {
         await viewerPage.clickInfoButton();
         await viewerPage.checkInfoSideBarIsDisplayed();
         await metadataViewPage.clickOnPropertiesTab();
-        await metadataViewPage.informationButtonIsDisplayed();
-        await metadataViewPage.clickOnInformationButton();
 
         await metadataViewPage.checkMetadataGroupIsPresent('EXIF');
         await metadataViewPage.checkMetadataGroupIsPresent('properties');
@@ -170,8 +166,6 @@ describe('Aspect oriented config', () => {
         await viewerPage.clickInfoButton();
         await viewerPage.checkInfoSideBarIsDisplayed();
         await metadataViewPage.clickOnPropertiesTab();
-        await metadataViewPage.informationButtonIsDisplayed();
-        await metadataViewPage.clickOnInformationButton();
 
         await metadataViewPage.checkMetadataGroupIsPresent('EXIF');
         await metadataViewPage.checkMetadataGroupIsPresent('properties');
@@ -191,8 +185,6 @@ describe('Aspect oriented config', () => {
         await viewerPage.clickInfoButton();
         await viewerPage.checkInfoSideBarIsDisplayed();
         await metadataViewPage.clickOnPropertiesTab();
-        await metadataViewPage.informationButtonIsDisplayed();
-        await metadataViewPage.clickOnInformationButton();
 
         await metadataViewPage.checkMetadataGroupIsPresent('EXIF');
         await metadataViewPage.checkMetadataGroupIsPresent('properties');
@@ -232,9 +224,6 @@ describe('Aspect oriented config', () => {
         await viewerPage.checkInfoSideBarIsDisplayed();
         await metadataViewPage.clickOnPropertiesTab();
 
-        await metadataViewPage.informationButtonIsDisplayed();
-        await metadataViewPage.clickOnInformationButton();
-
         await metadataViewPage.checkMetadataGroupIsPresent('GROUP-TITLE1-TRANSLATION-KEY');
         await metadataViewPage.checkMetadataGroupIsPresent('GROUP-TITLE2-TRANSLATION-KEY');
 
@@ -262,10 +251,6 @@ describe('Aspect oriented config', () => {
         await CheckboxPage.check(metadataViewPage.presetSwitch);
 
         await metadataViewPage.enterPresetText('custom-preset');
-
-        await metadataViewPage.informationButtonIsDisplayed();
-        await metadataViewPage.clickOnInformationButton();
-
         await metadataViewPage.checkMetadataGroupIsPresent('properties');
         await metadataViewPage.checkMetadataGroupIsPresent('Versionable');
     });
@@ -286,9 +271,6 @@ describe('Aspect oriented config', () => {
         await viewerPage.checkInfoSideBarIsDisplayed();
         await metadataViewPage.clickOnPropertiesTab();
 
-        await metadataViewPage.informationButtonIsDisplayed();
-        await metadataViewPage.clickOnInformationButton();
-
         await metadataViewPage.checkMetadataGroupIsNotPresent(emptyAspectName);
     });
 
@@ -308,11 +290,6 @@ describe('Aspect oriented config', () => {
         await viewerPage.checkInfoSideBarIsDisplayed();
         await metadataViewPage.clickOnPropertiesTab();
 
-        await metadataViewPage.informationButtonIsDisplayed();
-        await metadataViewPage.clickOnInformationButton();
-
-        await metadataViewPage.checkMetadataGroupIsNotPresent(aspectName);
-
         await metadataViewPage.editIconClick();
 
         await metadataViewPage.checkMetadataGroupIsPresent(aspectName);

e2e/content-services/metadata/metadata-content-type.e2e.ts

@@ -114,16 +114,16 @@ describe('content type', () => {
         await viewerPage.clickInfoButton();
         await viewerPage.checkInfoSideBarIsDisplayed();
         await metadataViewPage.clickOnPropertiesTab();
-        await metadataViewPage.editIconIsDisplayed();
+        await metadataViewPage.isEditGeneralIconDisplayed();
 
         await expect(await viewerPage.getActiveTab()).toEqual('PROPERTIES');
         const defaultType  = (await metadataViewPage.hasContentType('Content')) || (await metadataViewPage.hasContentType('cm:content'));
         await expect(defaultType).toBe(true, 'Content type not found');
 
-        await metadataViewPage.editIconClick();
+        await metadataViewPage.clickEditIconGeneral();
 
         await expect(await metadataViewPage.changeContentType(type.title)).toBe(true, 'Failed to update node type.');
-        await metadataViewPage.clickSaveMetadata();
+        await metadataViewPage.clickSaveGeneralMetadata();
         await metadataViewPage.checkConfirmDialogDisplayed();
         await metadataViewPage.applyNodeProperties();
 
@@ -139,7 +139,7 @@ describe('content type', () => {
         await viewerPage.clickInfoButton();
         await viewerPage.checkInfoSideBarIsDisplayed();
         await metadataViewPage.clickOnPropertiesTab();
-        await metadataViewPage.editIconIsDisplayed();
+        await metadataViewPage.isEditGeneralIconDisplayed();
 
         await expect(await viewerPage.getActiveTab()).toEqual('PROPERTIES');
         const customType  = (await metadataViewPage.hasContentType(type.title)) || (await metadataViewPage.hasContentType(`${model.namespacePrefix}:${type.name}`));
@@ -155,16 +155,16 @@ describe('content type', () => {
         await viewerPage.clickInfoButton();
         await viewerPage.checkInfoSideBarIsDisplayed();
         await metadataViewPage.clickOnPropertiesTab();
-        await metadataViewPage.editIconIsDisplayed();
+        await metadataViewPage.isEditGeneralIconDisplayed();
 
         await expect(await viewerPage.getActiveTab()).toEqual('PROPERTIES');
         let defaultType  = (await metadataViewPage.hasContentType('Content')) || (await metadataViewPage.hasContentType('cm:content'));
         await expect(defaultType).toBe(true, 'Content type not found');
 
-        await metadataViewPage.editIconClick();
+        await metadataViewPage.clickEditIconGeneral();
 
         await expect(await metadataViewPage.changeContentType(type.title)).toBe(true, 'Failed to update node type.');
-        await metadataViewPage.clickSaveMetadata();
+        await metadataViewPage.clickSaveGeneralMetadata();
 
         await metadataViewPage.checkConfirmDialogDisplayed();
         await metadataViewPage.cancelNodeProperties();
@@ -178,7 +178,7 @@ describe('content type', () => {
         await viewerPage.clickInfoButton();
         await viewerPage.checkInfoSideBarIsDisplayed();
         await metadataViewPage.clickOnPropertiesTab();
-        await metadataViewPage.editIconIsDisplayed();
+        await metadataViewPage.isEditGeneralIconDisplayed();
 
         await expect(await viewerPage.getActiveTab()).toEqual('PROPERTIES');
         defaultType  = (await metadataViewPage.hasContentType('Content')) || (await metadataViewPage.hasContentType('cm:content'));

e2e/content-services/metadata/metadata-permissions.e2e.ts

@@ -38,10 +38,6 @@ describe('permissions', () => {
         COMMENTS_TAB: 'COMMENTS',
         PROPERTY_TAB: 'PROPERTIES',
         DEFAULT_ASPECT: 'Properties',
-        MORE_INFO_BUTTON: 'More information',
-        LESS_INFO_BUTTON: 'Less information',
-        ARROW_DOWN: 'keyboard_arrow_down',
-        ARROW_UP: 'keyboard_arrow_up',
         EDIT_BUTTON_TOOLTIP: 'Edit'
     };
 
@@ -132,7 +128,6 @@ describe('permissions', () => {
 
         await expect(await viewerPage.getActiveTab()).toEqual(METADATA.PROPERTY_TAB);
 
-        await metadataViewPage.clickOnInformationButton();
 
         await metadataViewPage.clickMetadataGroup('EXIF');
 
@@ -152,7 +147,6 @@ describe('permissions', () => {
 
         await expect(await viewerPage.getActiveTab()).toEqual(METADATA.PROPERTY_TAB);
 
-        await metadataViewPage.clickOnInformationButton();
 
         await metadataViewPage.clickMetadataGroup('EXIF');
 

e2e/content-services/metadata/metadata-properties.e2e.ts

@@ -37,10 +37,6 @@ describe('CardView Component - properties', () => {
         COMMENTS_TAB: 'COMMENTS',
         PROPERTY_TAB: 'PROPERTIES',
         DEFAULT_ASPECT: 'Properties',
-        MORE_INFO_BUTTON: 'More information',
-        LESS_INFO_BUTTON: 'Less information',
-        ARROW_DOWN: 'keyboard_arrow_down',
-        ARROW_UP: 'keyboard_arrow_up',
         EDIT_BUTTON_TOOLTIP: 'Edit'
     };
 
@@ -90,7 +86,6 @@ describe('CardView Component - properties', () => {
 
         await expect(await viewerPage.getActiveTab()).toEqual(METADATA.PROPERTY_TAB);
 
-        await metadataViewPage.clickOnInformationButton();
 
         await metadataViewPage.clickMetadataGroup('EXIF');
 
@@ -108,11 +103,9 @@ describe('CardView Component - properties', () => {
         await viewerPage.clickInfoButton();
         await viewerPage.checkInfoSideBarIsDisplayed();
         await metadataViewPage.clickOnPropertiesTab();
-        await metadataViewPage.editIconIsDisplayed();
+        await metadataViewPage.isEditGeneralIconDisplayed();
 
         await CheckboxPage.check(metadataViewPage.readonlySwitch);
-
-        await metadataViewPage.editIconIsNotDisplayed();
     });
 
     it('[C268965] Should multi property allow expand multi accordion at the same time when set', async () => {
@@ -121,15 +114,9 @@ describe('CardView Component - properties', () => {
         await viewerPage.checkInfoSideBarIsDisplayed();
         await metadataViewPage.clickOnPropertiesTab();
 
-        await metadataViewPage.clickOnInformationButton();
-
-        await metadataViewPage.checkMetadataGroupIsNotExpand('EXIF');
-        await metadataViewPage.checkMetadataGroupIsNotExpand('properties');
 
-        await metadataViewPage.clickMetadataGroup('properties');
-
-        await metadataViewPage.checkMetadataGroupIsNotExpand('EXIF');
         await metadataViewPage.checkMetadataGroupIsExpand('properties');
+        await metadataViewPage.checkMetadataGroupIsNotExpand('EXIF');
 
         await metadataViewPage.clickMetadataGroup('EXIF');
 
@@ -168,11 +155,7 @@ describe('CardView Component - properties', () => {
         await viewerPage.checkInfoSideBarIsDisplayed();
         await metadataViewPage.clickOnPropertiesTab();
 
-        await metadataViewPage.informationButtonIsDisplayed();
-
         await CheckboxPage.uncheck(metadataViewPage.defaultPropertiesSwitch);
-
-        await metadataViewPage.informationButtonIsNotDisplayed();
     });
 
     it('[C307975] Should be able to choose which aspect to show expanded in the info-drawer', async () => {