From 880abe759cd330f07cb7a6a62b9dc66c2c14fd87 Mon Sep 17 00:00:00 2001
From: Arcadio Quintero <oidacra@gmail.com>
Date: Mon, 10 Jun 2024 14:25:48 -0400
Subject: [PATCH] feat(edit-content) change from dialog to sidebar #28764

---
 ...t-content-category-field-sidebar.component.scss |  4 +++-
 ...t-edit-content-category-field.component.spec.ts | 14 +++++++-------
 .../dot-edit-content-category-field.component.ts   |  3 ++-
 3 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-edit-content-category-field-sidebar/dot-edit-content-category-field-sidebar.component.scss b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-edit-content-category-field-sidebar/dot-edit-content-category-field-sidebar.component.scss
index d92ce35afaa6..0c6023307745 100644
--- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-edit-content-category-field-sidebar/dot-edit-content-category-field-sidebar.component.scss
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-edit-content-category-field-sidebar/dot-edit-content-category-field-sidebar.component.scss
@@ -1,10 +1,11 @@
 @use "variables" as *;
 
 .category-field__header {
+    height: 60px;
     align-items: center;
     flex-wrap: wrap;
     gap: $spacing-0;
-    padding: $spacing-1 $spacing-4;
+    padding: 0 $spacing-4;
 }
 
 .category-field__header-title {
@@ -33,6 +34,7 @@
     border: $field-border-size solid $color-palette-gray-400;
     border-radius: $border-radius-md;
     background-color: $white;
+
     padding: $spacing-3;
 }
 
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/dot-edit-content-category-field.component.spec.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/dot-edit-content-category-field.component.spec.ts
index 718afe8267cd..62dcda1cebf0 100644
--- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/dot-edit-content-category-field.component.spec.ts
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/dot-edit-content-category-field.component.spec.ts
@@ -1,12 +1,11 @@
-import { byTestId, createComponentFactory, mockProvider, Spectator } from '@ngneat/spectator/jest';
-
-import { fakeAsync } from '@angular/core/testing';
+import { expect, it } from '@jest/globals';
+import { byTestId, createComponentFactory, Spectator } from '@ngneat/spectator';
+import { mockProvider } from '@ngneat/spectator/jest';
 
 import { DotMessageService } from '@dotcms/data-access';
 
 import { DotEditContentCategoryFieldSidebarComponent } from './components/dot-edit-content-category-field-sidebar/dot-edit-content-category-field-sidebar.component';
 import { DotEditContentCategoryFieldComponent } from './dot-edit-content-category-field.component';
-import { CLOSE_SIDEBAR_CSS_DELAY_MS } from './dot-edit-content-category-field.const';
 
 describe('DotEditContentCategoryFieldComponent', () => {
     let spectator: Spectator<DotEditContentCategoryFieldComponent>;
@@ -72,7 +71,7 @@ describe('DotEditContentCategoryFieldComponent', () => {
             expect(spectator.query(DotEditContentCategoryFieldSidebarComponent)).not.toBeNull();
         });
 
-        it('should remove DotEditContentCategoryFieldSidebarComponent when `closedSidebar` emit', fakeAsync(() => {
+        it('should remove DotEditContentCategoryFieldSidebarComponent when `closedSidebar` emit', async () => {
             const selectBtn = spectator.query(byTestId('show-sidebar-btn')) as HTMLButtonElement;
             expect(selectBtn).not.toBeNull();
             spectator.click(selectBtn);
@@ -87,11 +86,12 @@ describe('DotEditContentCategoryFieldComponent', () => {
             spectator.detectComponentChanges();
 
             // Due to a delay in the pipe of the subscription
-            spectator.tick(CLOSE_SIDEBAR_CSS_DELAY_MS + 100);
+            await new Promise((resolve) => setTimeout(resolve, 400));
 
             expect(spectator.query(DotEditContentCategoryFieldSidebarComponent)).toBeNull();
 
+            spectator.detectComponentChanges();
             expect(selectBtn.disabled).toBe(false);
-        }));
+        });
     });
 });
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/dot-edit-content-category-field.component.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/dot-edit-content-category-field.component.ts
index 70ab22043ef7..a2ce3380e897 100644
--- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/dot-edit-content-category-field.component.ts
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/dot-edit-content-category-field.component.ts
@@ -23,7 +23,8 @@ import { DotCMSContentTypeField } from '@dotcms/dotcms-models';
 import { DotDynamicDirective, DotMessagePipe } from '@dotcms/ui';
 
 import { DotEditContentCategoryFieldSidebarComponent } from './components/dot-edit-content-category-field-sidebar/dot-edit-content-category-field-sidebar.component';
-import { CLOSE_SIDEBAR_CSS_DELAY_MS } from './dot-edit-content-category-field.const';
+
+const CLOSE_SIDEBAR_CSS_DELAY_MS = 300;
 
 /**
  * Component for editing content category field.