From 625bfb30e14c941f54da6d2c6f76a1f356b392e3 Mon Sep 17 00:00:00 2001 From: Yasa-Nataliya Date: Thu, 10 Aug 2023 17:54:49 +0530 Subject: [PATCH 01/66] [ACS-5645]Added edit functionality for each panel and updated test cases --- .../categories-management.component.html | 56 ++-- .../categories-management.component.scss | 8 +- .../categories-management.component.spec.ts | 43 +-- .../categories-management.component.ts | 3 +- .../content-metadata-card.component.html | 18 -- .../content-metadata-card.component.spec.ts | 57 ---- .../content-metadata.component.html | 263 ++++++++++++------ .../content-metadata.component.scss | 87 ++++-- .../content-metadata.component.spec.ts | 162 +++++------ .../content-metadata.component.ts | 132 ++++++++- .../components/content-metadata/mock-data.ts | 8 +- .../interfaces/card-view-group.interface.ts | 2 + lib/content-services/src/lib/i18n/en.json | 7 +- .../tags-creator/tags-creator.component.html | 57 ++-- .../tags-creator/tags-creator.component.scss | 39 ++- .../tags-creator.component.spec.ts | 70 +---- lib/core/src/lib/i18n/en.json | 2 +- .../src/lib/styles/_components-variables.scss | 2 + .../src/lib/styles/_reference-variables.scss | 2 + 19 files changed, 539 insertions(+), 479 deletions(-) diff --git a/lib/content-services/src/lib/category/categories-management/categories-management.component.html b/lib/content-services/src/lib/category/categories-management/categories-management.component.html index 516f0acca93..cf00eb29bba 100644 --- a/lib/content-services/src/lib/category/categories-management/categories-management.component.html +++ b/lib/content-services/src/lib/category/categories-management/categories-management.component.html @@ -1,14 +1,20 @@
-

- {{ noCategoriesMsg | translate }} -

-
+
+ + {{ categoryNameErrorMessageKey | translate }} +
+
+ class="adf-assigned-categories"> {{ category.name }}
-
- - search - - {{ 'CATEGORIES_MANAGEMENT.NAME' | translate }} - - - {{ categoryNameErrorMessageKey | translate }} - - -
+

+ {{ noCategoriesMsg | translate }} +

{{ 'CATEGORIES_MANAGEMENT.GENERIC_CREATE' | translate : { name: categoryNameControl.value } }} @@ -77,8 +59,8 @@
diff --git a/lib/content-services/src/lib/category/categories-management/categories-management.component.scss b/lib/content-services/src/lib/category/categories-management/categories-management.component.scss index 31911029be8..4fa81027231 100644 --- a/lib/content-services/src/lib/category/categories-management/categories-management.component.scss +++ b/lib/content-services/src/lib/category/categories-management/categories-management.component.scss @@ -1,8 +1,15 @@ .adf-categories-management { + padding-top: 12px; + .adf-category-name-field { display: flex; justify-content: space-between; width: 100%; + background: var(--adf-metadata-tags-background-color); + height: 32px; + border-radius: 12px; + align-items: center; + padding: 0 12px; mat-form-field { width: 100%; @@ -34,7 +41,6 @@ } .adf-categories-list { - padding-bottom: 10px; .mat-list-base .mat-list-item, .mat-list-base .mat-list-option { diff --git a/lib/content-services/src/lib/category/categories-management/categories-management.component.spec.ts b/lib/content-services/src/lib/category/categories-management/categories-management.component.spec.ts index d7e3801e14f..161e8666359 100644 --- a/lib/content-services/src/lib/category/categories-management/categories-management.component.spec.ts +++ b/lib/content-services/src/lib/category/categories-management/categories-management.component.spec.ts @@ -224,40 +224,13 @@ describe('CategoriesManagementComponent', () => { component.categoryNameControlVisible = false; fixture.detectChanges(); const categoryControl: HTMLDivElement = fixture.debugElement.query(By.css('.adf-category-name-field')).nativeElement; - expect(categoryControl.hidden).toBeTrue(); + expect(categoryControl.hidden).toBeFalse(); }); it('should be visible when categoryNameControlVisible is true', () => { const categoryControl = fixture.debugElement.query(By.css('.adf-category-name-field')); expect(categoryControl).toBeTruthy(); }); - - it('should have correct label and hide button', () => { - const categoryControlLabel = fixture.debugElement.query(By.css('#adf-category-name-input-label')).nativeElement; - const categoryControlHideBtn: HTMLButtonElement = fixture.debugElement.query(By.css('.adf-category-name-field button')).nativeElement; - expect(categoryControlHideBtn).toBeTruthy(); - expect(categoryControlHideBtn.attributes.getNamedItem('title').textContent.trim()).toBe('CATEGORIES_MANAGEMENT.HIDE_INPUT'); - expect(categoryControlLabel.textContent.trim()).toBe('CATEGORIES_MANAGEMENT.NAME'); - }); - - it('should hide and clear category control and existing categories panel on clicking hide button', fakeAsync(() => { - typeCategory('test'); - const categoryControlHideBtn: HTMLButtonElement = fixture.debugElement.query(By.css('.adf-category-name-field button')).nativeElement; - const controlVisibilityChangeSpy = spyOn(component.categoryNameControlVisibleChange, 'emit').and.callThrough(); - categoryControlHideBtn.click(); - fixture.detectChanges(); - - const categoryControl: HTMLDivElement = fixture.debugElement.query(By.css('.adf-category-name-field')).nativeElement; - expect(categoryControl.hidden).toBeTrue(); - expect(component.categoryNameControlVisible).toBeFalse(); - expect(component.existingCategoriesPanelVisible).toBeFalse(); - expect(controlVisibilityChangeSpy).toHaveBeenCalledOnceWith(false); - - component.categoryNameControlVisible = true; - fixture.detectChanges(); - tick(100); - expect(getCategoryControlInput().value).toBe(''); - })); }); describe('Spinner', () => { @@ -335,7 +308,7 @@ describe('CategoriesManagementComponent', () => { it('should have no required validator set for category control', () => { expect(component.categoryNameControl.hasValidator(Validators.required)).toBeFalse(); }); - + it('should display validation error when searching for empty category', fakeAsync(() => { typeCategory(' '); @@ -476,18 +449,6 @@ describe('CategoriesManagementComponent', () => { expect(categoriesChangeSpy).toHaveBeenCalledOnceWith(component.categories); })); - it('should clear and hide input after category is created', fakeAsync(() => { - const controlVisibilityChangeSpy = spyOn(component.categoryNameControlVisibleChange, 'emit'); - createCategory('test'); - const categoryControl: HTMLDivElement = fixture.debugElement.query(By.css('.adf-category-name-field')).nativeElement; - - expect(categoryControl.hidden).toBeTrue(); - expect(controlVisibilityChangeSpy).toHaveBeenCalledOnceWith(false); - expect(getExistingCategoriesList()).toEqual([]); - expect(component.categoryNameControl.value).toBe(''); - expect(component.categoryNameControl.untouched).toBeTrue(); - })); - it('should be able to remove added category', fakeAsync(() => { createCategory('test'); diff --git a/lib/content-services/src/lib/category/categories-management/categories-management.component.ts b/lib/content-services/src/lib/category/categories-management/categories-management.component.ts index 51d4683fe13..31a09914695 100644 --- a/lib/content-services/src/lib/category/categories-management/categories-management.component.ts +++ b/lib/content-services/src/lib/category/categories-management/categories-management.component.ts @@ -223,8 +223,9 @@ export class CategoriesManagementComponent implements OnInit, OnDestroy { const newCatName = this.categoryNameControl.value.trim(); const newCat = new Category({ id: newCatName, name: newCatName }); this.categories.push(newCat); - this.hideNameInput(); this.clearCategoryNameInput(); + this.categoryNameControl.setValue(''); + this.categoryNameControl.markAsUntouched(); this._existingCategories = null; this.categoriesChange.emit(this.categories); } diff --git a/lib/content-services/src/lib/content-metadata/components/content-metadata-card/content-metadata-card.component.html b/lib/content-services/src/lib/content-metadata/components/content-metadata-card/content-metadata-card.component.html index 3b9930e3b91..0278ba6332e 100644 --- a/lib/content-services/src/lib/content-metadata/components/content-metadata-card/content-metadata-card.component.html +++ b/lib/content-services/src/lib/content-metadata/components/content-metadata-card/content-metadata-card.component.html @@ -24,24 +24,6 @@ data-automation-id="meta-data-card-edit-aspect"> menu -
- diff --git a/lib/content-services/src/lib/content-metadata/components/content-metadata-card/content-metadata-card.component.spec.ts b/lib/content-services/src/lib/content-metadata/components/content-metadata-card/content-metadata-card.component.spec.ts index 8d8416f17a6..a6a3bc7e394 100644 --- a/lib/content-services/src/lib/content-metadata/components/content-metadata-card/content-metadata-card.component.spec.ts +++ b/lib/content-services/src/lib/content-metadata/components/content-metadata-card/content-metadata-card.component.spec.ts @@ -147,55 +147,6 @@ describe('ContentMetadataCardComponent', () => { expect(contentMetadataComponent).toBeNull(); }); - it('should toggle editable by clicking on the button', () => { - component.editable = true; - component.node.allowableOperations = [AllowableOperationsEnum.UPDATE]; - fixture.detectChanges(); - - getToggleEditButton().triggerEventHandler('click', {}); - fixture.detectChanges(); - - expect(component.editable).toBe(false); - }); - - it('should emit editableChange by clicking on toggle edit button', () => { - component.node.allowableOperations = [AllowableOperationsEnum.UPDATE]; - fixture.detectChanges(); - spyOn(component.editableChange, 'emit'); - - getToggleEditButton().nativeElement.click(); - expect(component.editableChange.emit).toHaveBeenCalledWith(true); - }); - - it('should toggle expanded by clicking on the button', () => { - component.expanded = true; - fixture.detectChanges(); - - const button = fixture.debugElement.query(By.css('[data-automation-id="meta-data-card-toggle-expand"]')); - button.triggerEventHandler('click', {}); - fixture.detectChanges(); - - expect(component.expanded).toBe(false); - }); - - it('should have the proper text on button while collapsed', () => { - component.expanded = false; - fixture.detectChanges(); - - const buttonLabel = fixture.debugElement.query(By.css('[data-automation-id="meta-data-card-toggle-expand-label"]')); - - expect(buttonLabel.nativeElement.innerText.trim()).toBe('ADF_VIEWER.SIDEBAR.METADATA.MORE_INFORMATION'); - }); - - it('should have the proper text on button while collapsed', () => { - component.expanded = true; - fixture.detectChanges(); - - const buttonLabel = fixture.debugElement.query(By.css('[data-automation-id="meta-data-card-toggle-expand-label"]')); - - expect(buttonLabel.nativeElement.innerText.trim()).toBe('ADF_VIEWER.SIDEBAR.METADATA.LESS_INFORMATION'); - }); - it('should hide the edit button in readOnly is true', () => { component.readOnly = true; fixture.detectChanges(); @@ -211,14 +162,6 @@ describe('ContentMetadataCardComponent', () => { expect(getToggleEditButton()).toBeNull(); }); - it('should show the edit button if node does has `update` permissions', () => { - component.readOnly = false; - component.node.allowableOperations = [AllowableOperationsEnum.UPDATE]; - fixture.detectChanges(); - - expect(getToggleEditButton()).not.toBeNull(); - }); - it('should expand the card when custom display aspect is valid', () => { expect(component.expanded).toBeFalsy(); diff --git a/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.html b/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.html index 783c3c60574..8cda12a0da4 100644 --- a/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.html +++ b/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.html @@ -3,12 +3,45 @@ [multi]="multi"> + [attr.data-automation-id]="'adf-metadata-group-properties'" + hideToggle + (opened)="handleGneralPanelOpen()" + (closed)="handleGeneralPanelClose()"> - +
+ + {{ generalInfoPanelState ? 'expand_more' : 'chevron_right'}} + + +
+ +
+
- + - {{ 'METADATA.BASIC.TAGS' | translate }} +
+ + {{ tagsPanelState ? 'expand_more' : 'chevron_right'}} + + +
+
+ +
+
- -
- - diff --git a/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.scss b/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.scss index a6a4f82a203..06dbb679b0a 100644 --- a/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.scss +++ b/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.scss @@ -2,7 +2,7 @@ adf-tags-creator { display: block; .adf-label-with-icon-button { - background: var(--adf-metadata-tags-background-color); + background: var(--adf-metadata-buttons-background-color); width: fit-content; height: 32px; display: inline-flex; @@ -39,16 +39,31 @@ adf-tags-creator { padding-right: 3px; font-size: 14px; } + + .mat-form-field-appearance-fill .mat-form-field-flex { + background: none; + } + + .mat-form-field-appearance-fill .mat-form-field-infix { + padding: 0; + } } .adf-tag-search-field { - width: 752px; - background: var(--adf-metadata-tags-background-color); + background: var(--adf-metadata-buttons-background-color); height: 32px; border-radius: 12px; align-items: center; display: flex; padding: 0 12px; + + .mat-form-field-underline { + display: none; + } + + .mat-form-field-wrapper { + width: 100%; + } } .adf-create-tag-label { diff --git a/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.spec.ts b/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.spec.ts index 6eb410bd18e..760b56a2d8a 100644 --- a/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.spec.ts +++ b/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.spec.ts @@ -21,7 +21,7 @@ import { NotificationService } from '@alfresco/adf-core'; import { By } from '@angular/platform-browser'; import { TranslateModule } from '@ngx-translate/core'; import { MatIconModule } from '@angular/material/icon'; -import { MatError, MatFormFieldModule } from '@angular/material/form-field'; +import { MatError, MatFormField, MatFormFieldModule } from '@angular/material/form-field'; import { MatInputModule } from '@angular/material/input'; import { ReactiveFormsModule } from '@angular/forms'; import { MatButtonModule } from '@angular/material/button'; @@ -300,7 +300,7 @@ describe('TagsCreatorComponent', () => { const tagNameField = fixture.debugElement.query(By.css(tagNameFieldSelector)); expect(tagNameField).toBeTruthy(); expect(tagNameField.nativeElement.hasAttribute('hidden')).toBeFalsy(); - expect(tagNameField).toBeTruthy(); + expect(tagNameField.query(By.directive(MatFormField))).toBeTruthy(); }); it('should input be autofocused', fakeAsync(() => { @@ -310,6 +310,18 @@ describe('TagsCreatorComponent', () => { expect(getNameInput()).toBe(document.activeElement as HTMLInputElement); })); + it('should input be autofocused after showing input second time', fakeAsync(() => { + component.tagNameControlVisible = true; + fixture.detectChanges(); + tick(100); + + component.tagNameControlVisible = true; + fixture.detectChanges(); + tick(100); + + expect(getNameInput()).toBe(document.activeElement as HTMLInputElement); + })); + describe('Errors', () => { /** * Get first error @@ -374,6 +386,13 @@ describe('TagsCreatorComponent', () => { expect(getFirstError()).toBe('TAG.TAGS_CREATOR.ERRORS.ALREADY_ADDED_TAG'); })); + it('should not show error for required if tags are changed', fakeAsync(() => { + typeTag(''); + component.tags = ['new tag 1', 'new tag 2']; + fixture.detectChanges(); + expect(getFirstError()).toBeUndefined(); + })); + it('should show error when duplicated already existing tag', fakeAsync(() => { const tag = 'Some tag'; diff --git a/lib/core/src/lib/styles/_components-variables.scss b/lib/core/src/lib/styles/_components-variables.scss index b3f7d856cb9..d6a0029e595 100644 --- a/lib/core/src/lib/styles/_components-variables.scss +++ b/lib/core/src/lib/styles/_components-variables.scss @@ -46,7 +46,7 @@ --adf-identity-user-info-font-size: var(--theme-adf-picture-1-font-size), --adf-user-info-container-margin-right: $adf-ref-margin-right, --adf-metadata-property-panel-border-color: $adf-metadata-property-panel-border-color, - --adf-metadata-tags-background-color: $adf-metadata-tags-background-color + --adf-metadata-buttons-background-color: $adf-metadata-buttons-background-color ); // propagates SCSS variables into the CSS variables scope diff --git a/lib/core/src/lib/styles/_reference-variables.scss b/lib/core/src/lib/styles/_reference-variables.scss index e82999a0044..e17cc25b5e0 100644 --- a/lib/core/src/lib/styles/_reference-variables.scss +++ b/lib/core/src/lib/styles/_reference-variables.scss @@ -28,4 +28,4 @@ $adf-ref-width: 40px; $adf-ref-line-height: 40px; $adf-ref-margin-right: 8px; $adf-metadata-property-panel-border-color: rgba(0, 0, 0, 0.12); -$adf-metadata-tags-background-color: rgba(33, 33, 33, 0.05); +$adf-metadata-buttons-background-color: rgba(33, 33, 33, 0.05); From aea020a8cde45221206dae647e0bd04ad37d3529 Mon Sep 17 00:00:00 2001 From: Yasa-Nataliya Date: Mon, 21 Aug 2023 15:02:29 +0530 Subject: [PATCH 07/66] minor fixes --- e2e/core/pages/metadata-view.page.ts | 1 - .../categories-management.component.html | 11 +++--- .../categories-management.component.spec.ts | 10 +++++ .../content-metadata.component.html | 9 +++-- .../content-metadata.component.spec.ts | 39 ++++++++++++++++++- 5 files changed, 60 insertions(+), 10 deletions(-) diff --git a/e2e/core/pages/metadata-view.page.ts b/e2e/core/pages/metadata-view.page.ts index 5b7704bb94d..ae24c4246f5 100644 --- a/e2e/core/pages/metadata-view.page.ts +++ b/e2e/core/pages/metadata-view.page.ts @@ -47,7 +47,6 @@ export class MetadataViewPage { applyAspect = element(by.cssContainingText(`button span.mat-button-wrapper`, 'Apply Aspect')); saveMetadataButton = $(`[data-automation-id='save-metadata']`); saveGeneralMetadataButton = $(`[data-automation-id='save-generalInfo-metadata']`); - resetGeneralMetadataButton = $(`[data-automation-id='reset-general-metadata']`); resetMetadataButton = $(`[data-automation-id='reset-metadata']`); private getMetadataGroupLocator = async (groupName: string): Promise => diff --git a/lib/content-services/src/lib/category/categories-management/categories-management.component.html b/lib/content-services/src/lib/category/categories-management/categories-management.component.html index a0201263752..b45d3efff57 100644 --- a/lib/content-services/src/lib/category/categories-management/categories-management.component.html +++ b/lib/content-services/src/lib/category/categories-management/categories-management.component.html @@ -9,7 +9,8 @@ (keyup.enter)="addCategory()" aria-labelledby="adf-category-name-input-label" placeholder="{{'CATEGORIES_MANAGEMENT.INPUT_PLACEHOLDER' | translate }}" - adf-auto-focus /> + adf-auto-focus + /> {{ categoryNameErrorMessageKey | translate }} @@ -17,7 +18,7 @@ + class="adf-assigned-categories"> {{ category.name }} @@ -127,7 +129,8 @@