Apply feedback

dotCMS · Nov 28, 2024 · 161f214 · 161f214
1 parent f218845
commit 161f214
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 34 deletions.
diff --git a/...let/src/lib/edit-ema-editor/components/dot-ema-bookmarks/dot-ema-bookmarks.component.html b/...let/src/lib/edit-ema-editor/components/dot-ema-bookmarks/dot-ema-bookmarks.component.html
@@ -1,9 +1,10 @@
-@if (variant === TOOLBAR_VARIANTS.NEW_UVE) {
+@if (store.$previewMode()) {
     <p-button
+        (click)="toggleBookmark()"
         [icon]="bookmarked() ? 'pi pi-star-fill' : 'pi pi-star'"
         [loading]="loading()"
-        (click)="toggleBookmark()"
-        styleClass="p-button-text" />
+        styleClass="p-button-text"
+        data-testId="bookmark-button" />
 } @else {
     <p-button
         (onClick)="toggleBookmark()"

diff --git a/.../src/lib/edit-ema-editor/components/dot-ema-bookmarks/dot-ema-bookmarks.component.spec.ts b/.../src/lib/edit-ema-editor/components/dot-ema-bookmarks/dot-ema-bookmarks.component.spec.ts
@@ -1,10 +1,11 @@
 import { describe, expect, it } from '@jest/globals';
-import { Spectator, createComponentFactory } from '@ngneat/spectator/jest';
+import { Spectator, createComponentFactory, mockProvider } from '@ngneat/spectator';
 import { of } from 'rxjs';
 
 import { AsyncPipe } from '@angular/common';
 import { HttpClient } from '@angular/common/http';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { signal } from '@angular/core';
 import { By } from '@angular/platform-browser';
 
 import { ButtonModule } from 'primeng/button';
@@ -17,6 +18,8 @@ import { LoginServiceMock, MockDotMessageService } from '@dotcms/utils-testing';
 
 import { DotEmaBookmarksComponent } from './dot-ema-bookmarks.component';
 
+import { UVEStore } from '../../../store/dot-uve.store';
+
 describe('DotEmaBookmarksComponent', () => {
     let spectator: Spectator<DotEmaBookmarksComponent>;
 
@@ -26,6 +29,13 @@ describe('DotEmaBookmarksComponent', () => {
         providers: [
             DialogService,
             HttpClient,
+            // {
+            //     provide: UVEStore,
+            //     useValue: {
+            //         $previewMode: signal(false)
+            //     }
+            // },
+            mockProvider(UVEStore, { $previewMode: signal(false) }),
             {
                 provide: LoginService,
                 useClass: LoginServiceMock
@@ -116,4 +126,16 @@ describe('DotEmaBookmarksComponent', () => {
             })
         );
     });
+
+    describe('preview mode', () => {
+        it('should render the bookmark button with new UVE toolbar style when preview mode is true', () => {
+            const store = spectator.inject(UVEStore, true);
+            jest.spyOn(store, '$previewMode').mockReturnValue(signal(true));
+
+            spectator.detectChanges();
+            const button = spectator.debugElement.query(By.css('[data-testId="bookmark-button"]'));
+
+            expect(button.componentInstance.textContent).toBe(undefined);
+        });
+    });
 });
diff --git a/...rtlet/src/lib/edit-ema-editor/components/dot-ema-bookmarks/dot-ema-bookmarks.component.ts b/...rtlet/src/lib/edit-ema-editor/components/dot-ema-bookmarks/dot-ema-bookmarks.component.ts
@@ -11,7 +11,7 @@ import { DotCMSContentlet } from '@dotcms/dotcms-models';
 import { DotFavoritePageComponent } from '@dotcms/portlets/dot-ema/ui';
 import { DotMessagePipe } from '@dotcms/ui';
 
-import { TOOLBAR_VARIANTS } from '../../../shared/enums';
+import { UVEStore } from '../../../store/dot-uve.store';
 
 @Component({
     selector: 'dot-ema-bookmarks',
@@ -22,14 +22,12 @@ import { TOOLBAR_VARIANTS } from '../../../shared/enums';
 })
 export class DotEmaBookmarksComponent implements OnInit {
     @Input() url = '';
-    @Input() variant: TOOLBAR_VARIANTS = TOOLBAR_VARIANTS.TRADITIONAL;
-
-    TOOLBAR_VARIANTS = TOOLBAR_VARIANTS;
 
     private readonly loginService = inject(LoginService);
     private readonly dotFavoritePageService = inject(DotFavoritePageService);
     private readonly dialogService = inject(DialogService);
     private readonly dotMessageService = inject(DotMessageService);
+    protected readonly store = inject(UVEStore);
 
     favoritePage: DotCMSContentlet;
 

diff --git a/...portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/dot-uve-toolbar.component.html b/...portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/dot-uve-toolbar.component.html
@@ -7,9 +7,7 @@
                 data-testId="uve-toolbar-preview"
                 (click)="togglePreviewMode(true)" />
 
-            <dot-ema-bookmarks
-                [url]="$toolbar().editor.bookmarksUrl"
-                [variant]="TOOLBAR_VARIANTS.NEW_UVE" />
+            <dot-ema-bookmarks [url]="$toolbar().editor.bookmarksUrl" />
 
             <p-button
                 icon="pi pi-external-link"

diff --git a/...a/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/dot-uve-toolbar.component.ts b/...a/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/dot-uve-toolbar.component.ts
@@ -3,7 +3,6 @@ import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { ButtonModule } from 'primeng/button';
 import { ToolbarModule } from 'primeng/toolbar';
 
-import { TOOLBAR_VARIANTS } from '../../../shared/enums';
 import { UVEStore } from '../../../store/dot-uve.store';
 import { DotEmaBookmarksComponent } from '../dot-ema-bookmarks/dot-ema-bookmarks.component';
 import { DotEmaInfoDisplayComponent } from '../dot-ema-info-display/dot-ema-info-display.component';
@@ -21,8 +20,6 @@ export class DotUveToolbarComponent {
 
     readonly $toolbar = this.#store.$uveToolbar;
 
-    TOOLBAR_VARIANTS = TOOLBAR_VARIANTS;
-
     togglePreviewMode(preview: boolean) {
         this.#store.togglePreviewMode(preview);
     }

diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/shared/enums.ts b/core-web/libs/portlets/edit-ema/portlet/src/lib/shared/enums.ts
@@ -53,23 +53,3 @@ export enum FormStatus {
     SAVED = 'SAVED',
     PRISTINE = 'PRISTINE'
 }
-
-/**
- * Defines the available toolbar variants for the UVE interface.
- *
- * @description
- * This enum represents different toolbar styles and configurations used in the
- * Universal Visual Editor, providing flexibility in user interface design and
- * feature implementation.
- *
- * - TRADITIONAL: Represents the current, existing toolbar configuration in UVE.
- *   This is the established toolbar design that users are familiar with and
- *   represents the standard editing experience prior to recent updates.
- *
- * - NEW_UVE: Represents the next-generation toolbar with an updated design and
- *   advanced features, including the new Preview mode with Future Time Machine.
- */
-export enum TOOLBAR_VARIANTS {
-    NEW_UVE = 'NEW_UVE',
-    TRADITIONAL = 'TRADITIONAL'
-}