[ACS-5645] Property Panel Feature (#8995)

* [ACS-5645]Added edit functionality for each panel and updated test cases * metadata e2e fix * [ACS-5725]fixed failing e2es * added unit test cases for new functionality * minor fixes * minor fixes * minor fixes * [ACS-5645]code modification * [ACS-5645]removed unwanted code * [ACS-5645]modified the changes * [ACS-5645]removed unwanted space * [ACS-5645]removed unwanted code * [ACS-5645]Implemented changes as per the review comments * linting fixes * [ACS-5645]minor fixes * [ACS-5645] removed unwanted code * [ACS-5645]modified the change * [ACS-5645]aligned input * [ACS-5645]modified changes * [ACS-5645]Implemented the changes as per the review comments * [ACS-5645]linting fixes * [ACS-5645]fixed sonarcloud issue * [ACS-5645]fixed errors * [ACS-5645]rename the function * [ACS-5645]fixes linting * [ACS-5540]lint fixes * [ACS-5645]Implemented the changes as per review comments * [ACS-5645] Removed unused code * [ACS-5645]linting fixes * [ACS-5645]fixes for lint * [ACS-5645] e2e fixes * [ACS-5645]Added translation * [ACS-5645]fixes for e2e * [ACS-5645]fixes for e2e * [ACS-5645]e2e fixes * [ACS-5645] Renamed the theme * [ACS-5645]modified changes * [ACS-5645] fixed lock-file bug * [ACS-5645] added tooltips for save and cancel icons * [ACS-5645] Modified the changes * [ACS-5645]Modified the changes * [ACS-5645] Implemented the changes as per the review comments * [ACS-5645] Implemented the changes as per the review comments * [ACS-5645]Modified the changes * [ACS-5645] added group panel lock changes * [ACS-5645] Resolved sonarcloud issue * [ACS-5645] added test cases for tags component * [ACS-5645] updated the documentation * [ACS-5645] updated the documentation * [ACS-5645] updated the documentation * [ACS-5645] Implemented changes as per review comments * [ACS-5645] lint fixes * [ACS-5645] Implemented the review comments * [ACS-5645] added focus * [ACS-5645] modified the changes * [ACS-5645] Lint fixes * [ACS-5645] Lint fixes * [ACS-5645] Lint fixes * [ACS-5645] Removed unwanted code * [ACS-5645] fixed sonarcloud issue * [ACS-5645] Added missing translation key * [ACS-5645] renamed the methods * [ACS-5645]Added edit functionality for each panel and updated test cases * [ACS-5645]code modification * [ACS-5645]removed unwanted code * [ACS-5645]Implemented changes as per the review comments * [ACS-5645]Implemented the changes as per review comments * [ACS-5645]linting fixes * [ACS-5645] fixed lock-file bug * [ACS-5645] Modified the changes * [ACS-5645] added group panel lock changes * [ACS-5645]Added edit functionality for each panel and updated test cases * minor fixes * [ACS-5645] Modified the changes * [ACS-5645] added group panel lock changes * [ACS-5645]Added edit functionality for each panel and updated test cases * metadata e2e fix * [ACS-5725]fixed failing e2es * minor fixes * [ACS-5645]removed unwanted code * [ACS-5645]Implemented changes as per the review comments * [ACS-5551] property panel design * [ACS-5551] minor changes * [ACS-5551]minor change * [ACS-5551] updated checks for non -editable field * [ACS-5551] modified the changes * [ACS-5551] modified changes * [ACS-5551] content-metadata updated * [ACS-5551] code updated * [ACS-5551] remove extra space * fixed scrollbar issue * [ACS-5551] margin adjusted * Fixed ACS-6110 * [ACS-5551] design updated * [ACCS-5551] unit test added * [ACS-5551] margin issue fixed * scroll issue fixed * [ACS-5551] color updated * [ACS-5551] design modify * [ACS-5551] add missing methods * [ACS-5654] translation added * [ACS-5645] style updated * [ACS-5654] hide toggle button for aspects * [ACS-5645] theme updated * [ACS-5645] tags and category tyle update * [ACS-5645] unit test update * [ACS-5645] code updated as per comments * [ACS-5645] linting issue fix * [ACS-5645] fixed the failed unit test cases * [ACS-5645] e2e fixes * [ACS-5645] e2e modify * [ACS-5645] aspect issue resolved * [ACS-5645] Address the comments * [ACS-5645] Address the comments * [ACS-5645] tags list design modify * [ACS-5645] design modify for chips * [ACS-5645] Removed unused property * [ACS-5645] Stop reload on panel cancel changes * [ACS-5645] Linting issue fixed * revert file change * [ACS-5645] update aspect issue fix * Revert "[ACS-5645] update aspect issue fix" This reverts commit 5212112. * reduce layout duplicates, header panel component * code improvements * remove useless logging * cleanup css, remove mat-divider, fix tests * remove useless styles * cleanup e2e * cleanup useless events * rename nodeIcon to just icon * disable transition animation for tabs * remove "editable" hacks * improved naming for state properties * bug fixes for process cloud * css stylelint fixes * rework component, cleanup useless code * fix allowable operations and readonly state * wait for button * cleanup css, disable e2e * remove demo-shell only content, fix metadata * restore reset date functionality * fix incorrect styling * fix clear date button styles * cleanup text item styles * remove useless classes * text item rework, code cleanup * style bug fixes * cleanup useless tests * fix styles and tests * bug fixes for select item styles, revert PR changes * rework categories styles * rework tags creator styles * rollback divider module * fix css variable naming * fix issue with hidden properties * fix key value pairs layout and styles * fix tag creator validation * remove incorrect styles, raise proper errors * fix unit tests * fix theme vars naming * remove css hacks for date items * fix error borders * fix css bugs * reduce code * cleanup e2e and en.json * fix css linting * cleanup unused template refs * remove useless div for metadata container * cleanup expanders api * cleanup and remove useless tests * cleanup i18n * cleanup tests * cleanup css * cleanup css * [ACS-5654] added the missing theme variables * review comments resolved * fixed css issue * [ACS-5654] removesd extra div * [ACS-5654] save and cancel button bug fix * [ACS-5654] unit test fix for expand the panel * [ACS-5645] design issues fix * [ACS-5654] cards design fixed * [ACS-5654] node icon added to thumbnail service * [ACS-5645] linting issue fixed * [ACS-5645] thumbnail unit test updated * [ACS-5645] linting updated * [ACS-5645] removed extra div * [ACS-5645] important removed * [ACS-5645] tags text issue fix * [ACS-5645] add missed class * [ACS-5645] removed unused classes * [ACS-5645] removed unused code * revert flags to original state * fix missing semicolon * fix linting issues * reduce code duplication * code cleanup * [ACS-5645] unit test fix * [ACS-5645] e2e fix for edit button * fix linting issue for e2e * Replaced getNodeIcon from thumbnail to content service * fix indentation * refactor css variable * use rgba color value --------- Co-authored-by: Yasa-Nataliya <yasa.nataliya@globallogic.com> Co-authored-by: pkundu <priyanka.kundu@hyland.com> Co-authored-by: rbahirsheth <raviraj.bahirsheth@globallogic.com> Co-authored-by: Denys Vuika <denys.vuika@gmail.com>
Alfresco · Dec 21, 2023 · a900dd2 · a900dd2
1 parent a7d18cb
commit a900dd2
Show file tree

Hide file tree

Showing 74 changed files with 1,804 additions and 1,642 deletions.
diff --git a/demo-shell/src/app/components/file-view/file-view.component.html b/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

diff --git a/demo-shell/src/app/components/files/files.component.html b/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">

diff --git a/docs/content-services/components/content-metadata-card.component.md b/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)
diff --git a/docs/content-services/components/tags-creator.component.md b/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. |
diff --git a/docs/docassets/images/UI_property_panel.png b/docs/docassets/images/UI_property_panel.png
diff --git a/docs/tutorials/content-metadata-component.md b/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.
diff --git a/e2e/content-services/components/viewer-content-services-component.e2e.ts b/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();
     }
 });
diff --git a/e2e/content-services/metadata/metadata-content-type.e2e.ts b/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();

diff --git a/e2e/content-services/metadata/metadata-permissions.e2e.ts b/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');
 

diff --git a/e2e/content-services/metadata/metadata-properties.e2e.ts b/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 () => {