[ACS-5645] Property Panel Feature

demo-shell/src/app/components/file-view/file-view.component.html

@@ -29,20 +29,17 @@
         </adf-info-drawer-tab>
 
         <adf-info-drawer-tab label="Properties">
-            <adf-content-metadata-card *ngIf="isPreset" [node]="node"
-                                       [multi]="multi"
-                                       [preset]="customPreset"
-                                       [readOnly]="isReadOnly"
-                                       [displayAspect]="showAspect"
-                                       [displayDefaultProperties]="displayDefaultProperties"
-                                       [displayEmpty]="displayEmptyMetadata"></adf-content-metadata-card>
-
-            <adf-content-metadata-card *ngIf="!isPreset" [node]="node"
-                                       [multi]="multi"
-                                       [readOnly]="isReadOnly"
-                                       [displayAspect]="showAspect"
-                                       [displayDefaultProperties]="displayDefaultProperties"
-                                       [displayEmpty]="displayEmptyMetadata"></adf-content-metadata-card>
+            <adf-content-metadata
+                [node]="node"
+                [multi]="multi"
+                [preset]="isPreset ? customPreset : null"
+                [readOnly]="isReadOnly"
+                [displayAspect]="showAspect"
+                [displayDefaultProperties]="displayDefaultProperties"
+                [displayTags]="false"
+                [displayCategories]="false"
+                [displayEmpty]="displayEmptyMetadata">
+            </adf-content-metadata>
 
             <p class="toggle">
                 <mat-slide-toggle

demo-shell/src/app/components/files/files.component.html

@@ -241,10 +241,12 @@
 
                 <adf-info-drawer [title]="'Details'" *ngIf="documentList.selection[0]">
                     <adf-info-drawer-tab label="Properties">
-                        <adf-content-metadata-card
+                        <adf-content-metadata
                             [node]="documentList.selection[0].entry"
-                            [displayEmpty]="displayEmptyMetadata">
-                        </adf-content-metadata-card>
+                            [displayEmpty]="displayEmptyMetadata"
+                            [displayTags]="true"
+                            [displayCategories]="true">
+                        </adf-content-metadata>
                     </adf-info-drawer-tab>
                     <adf-info-drawer-tab label="Versions">
                         <ng-container *ngIf="hasOneFileSelected();else choose_document_template">

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

@@ -13,7 +13,7 @@ Allows to create multiple tags. That component contains input and two lists. Top
 
 ```html
 <adf-tags-creator
-    [(tagNameControlVisible)]="tagNameControlVisible"
+    [tagNameControlVisible]="tagNameControlVisible"
     (tagsChange)="tags = $event"
     [mode]="tagsCreatorMode">
 </adf-tags-creator>
@@ -35,5 +35,4 @@ Allows to create multiple tags. That component contains input and two lists. Top
 | Name | Type | Description |
 | ---- | ---- | ----------- |
 | 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,18 @@ 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. |
+
 ### 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/viewer-content-services-component.e2e.ts

@@ -426,9 +426,9 @@ describe('Content Services Viewer', () => {
         await viewerPage.checkInfoSideBarIsDisplayed();
         await viewerPage.clickOnTab('Properties');
         await viewerPage.checkTabIsActive('Properties');
-        await metadataViewPage.editIconClick();
+        await metadataViewPage.clickEditIconGeneral();
         await metadataViewPage.enterPropertyText('properties.cm:name', newName);
-        await metadataViewPage.clickSaveMetadata();
+        await metadataViewPage.clickSaveGeneralMetadata();
         await viewerPage.clickCloseButton();
     }
 });

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');
+        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,9 +139,9 @@ 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');
+        await expect(await viewerPage.getActiveTab()).toEqual('Properties');
         const customType  = (await metadataViewPage.hasContentType(type.title)) || (await metadataViewPage.hasContentType(`${model.namespacePrefix}:${type.name}`));
         await expect(customType).toBe(true, 'Custom type not found');
         await expect(await metadataViewPage.getPropertyText(`properties.${model.namespacePrefix}:${property.name}`)).toContain(property.defaultValue);
@@ -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');
+        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,9 +178,9 @@ 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');
+        await expect(await viewerPage.getActiveTab()).toEqual('Properties');
         defaultType  = (await metadataViewPage.hasContentType('Content')) || (await metadataViewPage.hasContentType('cm:content'));
         await expect(defaultType).toBe(true, 'Content type not found');
         await viewerPage.clickCloseButton();

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

@@ -15,14 +15,7 @@
  * limitations under the License.
  */
 
-import { createApiService,
-    LoginPage,
-    StringUtil,
-    UploadActions,
-    UserModel,
-    UsersActions,
-    ViewerPage
-} from '@alfresco/adf-testing';
+import { createApiService, LoginPage, StringUtil, UploadActions, UserModel, UsersActions, ViewerPage } from '@alfresco/adf-testing';
 import { MetadataViewPage } from '../../core/pages/metadata-view.page';
 import { NavigationBarPage } from '../../core/pages/navigation-bar.page';
 import { FileModel } from '../../models/ACS/file.model';
@@ -31,20 +24,6 @@ import CONSTANTS = require('../../util/constants');
 import { SitesApi } from '@alfresco/js-api';
 
 describe('permissions', () => {
-
-    const METADATA = {
-        DATA_FORMAT: 'mmm dd yyyy',
-        TITLE: 'Details',
-        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'
-    };
-
     const loginPage = new LoginPage();
     const viewerPage = new ViewerPage();
     const metadataViewPage = new MetadataViewPage();
@@ -130,9 +109,7 @@ describe('permissions', () => {
         await metadataViewPage.clickOnPropertiesTab();
         await metadataViewPage.editIconIsDisplayed();
 
-        await expect(await viewerPage.getActiveTab()).toEqual(METADATA.PROPERTY_TAB);
-
-        await metadataViewPage.clickOnInformationButton();
+        await expect(await viewerPage.getActiveTab()).toEqual('Properties');
 
         await metadataViewPage.clickMetadataGroup('EXIF');
 
@@ -150,9 +127,7 @@ describe('permissions', () => {
         await metadataViewPage.clickOnPropertiesTab();
         await metadataViewPage.editIconIsDisplayed();
 
-        await expect(await viewerPage.getActiveTab()).toEqual(METADATA.PROPERTY_TAB);
-
-        await metadataViewPage.clickOnInformationButton();
+        await expect(await viewerPage.getActiveTab()).toEqual('Properties');
 
         await metadataViewPage.clickMetadataGroup('EXIF');
 

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

@@ -34,13 +34,9 @@ describe('CardView Component - properties', () => {
     const METADATA = {
         DATA_FORMAT: 'mmm dd yyyy',
         TITLE: 'Details',
-        COMMENTS_TAB: 'COMMENTS',
-        PROPERTY_TAB: '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 () => {