feat(edit-content) change from dialog to sidebar #28764

dotCMS · Jun 26, 2024 · 880abe7 · 880abe7
1 parent 3b89971
commit 880abe7
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 9 deletions.
diff --git a/...dit-content-category-field-sidebar/dot-edit-content-category-field-sidebar.component.scss b/...dit-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/.../fields/dot-edit-content-category-field/dot-edit-content-category-field.component.spec.ts b/.../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/...c/lib/fields/dot-edit-content-category-field/dot-edit-content-category-field.component.ts b/...c/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.