[ACS-7981] UI fixes for create categories dialog (#9754)

* [ACS-7981] Fixed UI for create categories dialog

* [ACS-7981] Adding mat selectors for create categories dialog

* [ACS-7981] Create category dialog no longer allows ability to add existing categories

lib/content-services/src/lib/category/categories-management/categories-management.component.html

@@ -1,8 +1,6 @@
 <div class="adf-categories-management">
     <div *ngIf="categoryNameControlVisible" class="adf-category-name-field">
         <input #categoryNameInput
-            matInput
-            autocomplete="off"
             [formControl]="categoryNameControl"
             (keyup.enter)="addCategory()"
             placeholder="{{'CATEGORIES_MANAGEMENT.CATEGORIES_SEARCH_PLACEHOLDER' | translate }}"
@@ -52,7 +50,7 @@
                 <mat-list-item
                     *ngFor="let category of existingCategories"
                     class="adf-category"
-                    (click)='addCategoryToAssign(category)'>
+                    (click)='addCategoryToAssign(category, isCRUDMode || !multiSelect && categories.length > 0)'>
                         {{ category.name }}
                 </mat-list-item>
                 <p *ngIf="!existingCategories?.length && !existingCategoriesLoading"

lib/content-services/src/lib/category/categories-management/categories-management.component.scss

@@ -1,8 +1,9 @@
+@import 'styles/mat-selectors';
+
 .adf-categories-management {
     .adf-category-name-field {
         justify-content: space-between;
-        width: 100%;
+        padding: 0 10px;
-        color: var(--adf-metadata-property-panel-text-color);
         background: var(--adf-metadata-buttons-background-color);
         height: 32px;
         border-radius: 12px;
@@ -10,8 +11,15 @@
 
         input {
             background-color: transparent;
-            padding: 7px 8px 8px;
+            color: var(--adf-metadata-property-panel-text-color);
+            padding: 7px 0;
             width: 100%;
+            border: none;
+            outline: none;
+        }
+
+        #{$mat-form-field-error} {
+            padding-top: 5px;
         }
     }
 
@@ -46,7 +54,7 @@
         background-color: inherit;
         color: inherit;
 
-        &:hover {
+        &:not(#{$mat-list-item-disabled}):hover {
             cursor: pointer;
             background: var(--adf-theme-mat-grey-color-a200);
         }
@@ -73,4 +81,8 @@
         cursor: pointer;
         overflow-wrap: anywhere;
     }
+
+    #{$mat-list-item-disabled} #{$mat-list-item-primary-text} {
+        opacity: 1;
+    }
 }

lib/content-services/src/lib/category/categories-management/categories-management.component.ts

@@ -49,11 +49,7 @@ export class CategoriesManagementComponent implements OnInit, OnDestroy {
     private onDestroy$ = new Subject<void>();
     private _categoryNameControl = new FormControl<string>(
         '',
-        [
+        [this.validateIfNotAlreadyAdded.bind(this), this.validateEmptyCategory, Validators.required],
-            this.validateIfNotAlreadyAdded.bind(this),
-            this.validateEmptyCategory,
-            Validators.required
-        ],
         this.validateIfNotAlreadyCreated.bind(this)
     );
     private _existingCategories: Category[];
@@ -150,9 +146,7 @@ export class CategoriesManagementComponent implements OnInit, OnDestroy {
             )
             .subscribe((name: string) => this.onNameControlValueChange(name));
 
-        this.categoryNameControl.statusChanges
+        this.categoryNameControl.statusChanges.pipe(takeUntil(this.onDestroy$)).subscribe(() => this.setCategoryNameControlErrorMessageKey());
-            .pipe(takeUntil(this.onDestroy$))
-            .subscribe(() => this.setCategoryNameControlErrorMessageKey());
 
         this.setCategoryNameControlErrorMessageKey();
 
@@ -164,9 +158,7 @@ export class CategoriesManagementComponent implements OnInit, OnDestroy {
             this._categoryNameControl.removeValidators(Validators.required);
             this.categories.forEach((category) => this.initialCategories.push(category));
             if (this.classifiableChanged) {
-                this.classifiableChanged
+                this.classifiableChanged.pipe(takeUntil(this.onDestroy$)).subscribe(() => {
-                    .pipe(takeUntil(this.onDestroy$))
-                    .subscribe(() => {
                     this.categories = [];
                     this.categoryNameControlVisible = false;
                     this.categoryNameControlVisibleChange.emit(false);
@@ -235,14 +227,17 @@ export class CategoriesManagementComponent implements OnInit, OnDestroy {
      * Adds existing category to categories list and removes it from existing categories list.
      *
      * @param category - selection list change containing selected category
+     * @param disableAddCategory - allow or disallow the ability to add a new category for assigning
      */
-    addCategoryToAssign(category: Category) {
+    addCategoryToAssign(category: Category, disableAddCategory: boolean) {
+        if (!disableAddCategory) {
             const selectedCategory: Category = category;
             this.categories.push(selectedCategory);
             this._existingCategories.splice(this._existingCategories.indexOf(selectedCategory), 1);
             this.categoryNameControl.updateValueAndValidity();
             this.categoriesChange.emit(this.categories);
         }
+    }
 
     /**
      * Removes the category from categories list and adds it to existing categories list in ASSIGN mode.
@@ -283,7 +278,9 @@ export class CategoriesManagementComponent implements OnInit, OnDestroy {
                 existingCat.name = path ? `${path}/${rowEntry.entry.name}` : rowEntry.entry.name;
                 return existingCat;
             });
-            this._existingCategories = this._existingCategories.filter((existingCat) => this.categories.find((category) => existingCat.id === category.id) === undefined);
+            this._existingCategories = this._existingCategories.filter(
+                (existingCat) => this.categories.find((category) => existingCat.id === category.id) === undefined
+            );
             this.sortCategoriesList(this._existingCategories);
             this._existingCategoriesLoading = false;
             this._typing = false;
@@ -294,7 +291,9 @@ export class CategoriesManagementComponent implements OnInit, OnDestroy {
     private getChildrenCategories(searchTerm: string) {
         this.categoryService.getSubcategories(this.parentId).subscribe((childrenCategories) => {
             this._existingCategories = childrenCategories.list.entries.map((categoryEntry) => categoryEntry.entry);
-            this._existingCategories = this._existingCategories.filter((existingCat) => existingCat.name.toLowerCase().includes(searchTerm.toLowerCase()));
+            this._existingCategories = this._existingCategories.filter((existingCat) =>
+                existingCat.name.toLowerCase().includes(searchTerm.toLowerCase())
+            );
             this.sortCategoriesList(this._existingCategories);
             this._existingCategoriesLoading = false;
             this._typing = false;
@@ -310,9 +309,11 @@ export class CategoriesManagementComponent implements OnInit, OnDestroy {
 
     private validateIfNotAlreadyCreated(nameControl: FormControl<string>): Observable<CategoryNameControlErrors | null> {
         return this.existingCategoryLoaded$.pipe(
-            map<void, CategoryNameControlErrors | null>(() => this.existingCategories.some((category) => this.compareCategories(category, nameControl.value)) && this.isCRUDMode
+            map<void, CategoryNameControlErrors | null>(() =>
+                this.existingCategories.some((category) => this.compareCategories(category, nameControl.value)) && this.isCRUDMode
                     ? { duplicatedExistingCategory: true }
-                    : null),
+                    : null
+            ),
             first()
         );
     }
@@ -322,9 +323,7 @@ export class CategoriesManagementComponent implements OnInit, OnDestroy {
     }
 
     private validateEmptyCategory(categoryNameControl: FormControl<string>): CategoryNameControlErrors | null {
-        return categoryNameControl.value.length && !categoryNameControl.value.trim()
+        return categoryNameControl.value.length && !categoryNameControl.value.trim() ? { emptyCategory: true } : null;
-            ? { emptyCategory: true }
-            : null;
     }
 
     private setCategoryNameControlErrorMessageKey() {

lib/content-services/src/lib/dialogs/confirm.dialog.scss

@@ -9,9 +9,5 @@
 
     & .adf-confirm-dialog-content {
         margin: 0 -24px;
-
-        p {
-            margin-bottom: 0;
-        }
     }
 }

lib/core/src/lib/styles/_mat-selectors.scss

@@ -140,3 +140,4 @@ $mat-text-field-disabled: '.mdc-text-field--disabled';
 $mat-form-field-focus-overlay: '.mat-mdc-form-field-focus-overlay';
 $mat-form-field-error-wrapper: '.mat-mdc-form-field-error-wrapper';
 $mat-text-field-textarea: '.mdc-text-field--textarea';
+$mat-list-item-disabled: '.mdc-list-item--disabled';