chore(Preview Mode): Add SEO results to device dropdown for traditional pages

core-web/libs/dotcms-models/src/lib/meta-tags-model.ts

@@ -132,11 +132,21 @@ export interface MetaTagsPreview {
     twitterImage?: string;
 }
 
-export enum SEO_MEDIA_TYPES {
-    GOOGLE = 'Google',
+export enum SOCIAL_MEDIA_TYPES {
+    FACEBOOK = 'Facebook',
     TWITTER = 'Twitter',
-    LINKEDIN = 'LinkedIn',
-    FACEBOOK = 'Facebook'
+    LINKEDIN = 'LinkedIn'
+}
+
+export enum SEARCH_ENGINE_TYPES {
+    GOOGLE = 'Google'
+}
+
+export enum SEO_MEDIA_TYPES {
+    FACEBOOK = SOCIAL_MEDIA_TYPES.FACEBOOK,
+    TWITTER = SOCIAL_MEDIA_TYPES.TWITTER,
+    LINKEDIN = SOCIAL_MEDIA_TYPES.LINKEDIN,
+    GOOGLE = SEARCH_ENGINE_TYPES.GOOGLE
 }
 
 export const SEO_TAGS = [
@@ -149,33 +159,41 @@ export const SEO_TAGS = [
     SEO_OPTIONS.TWITTER_IMAGE
 ];
 
-export const socialMediaTiles: Record<SEO_MEDIA_TYPES, SocialMediaOption> = {
-    [SEO_MEDIA_TYPES.FACEBOOK]: {
+export const socialMediaTiles: Record<SOCIAL_MEDIA_TYPES, SocialMediaOption> = {
+    [SOCIAL_MEDIA_TYPES.FACEBOOK]: {
         label: 'Facebook',
         value: SEO_MEDIA_TYPES.FACEBOOK,
         icon: 'pi pi-facebook',
         description: 'seo.rules.media.preview.tile'
     },
-    [SEO_MEDIA_TYPES.TWITTER]: {
+    [SOCIAL_MEDIA_TYPES.TWITTER]: {
         label: 'X (Formerly Twitter)',
         value: SEO_MEDIA_TYPES.TWITTER,
         icon: 'pi pi-twitter',
         description: 'seo.rules.media.preview.tile'
     },
-    [SEO_MEDIA_TYPES.LINKEDIN]: {
+    [SOCIAL_MEDIA_TYPES.LINKEDIN]: {
         label: 'Linkedin',
         value: SEO_MEDIA_TYPES.LINKEDIN,
         icon: 'pi pi-linkedin',
         description: 'seo.rules.media.preview.tile'
-    },
-    [SEO_MEDIA_TYPES.GOOGLE]: {
+    }
+};
+
+export const searchEngineTile: Record<SEARCH_ENGINE_TYPES, SocialMediaOption> = {
+    [SEARCH_ENGINE_TYPES.GOOGLE]: {
         label: 'Google',
         value: SEO_MEDIA_TYPES.GOOGLE,
         icon: 'pi pi-google',
         description: 'seo.rules.media.search.engine'
     }
 };
 
+export const seoTiles: Record<SEO_MEDIA_TYPES, SocialMediaOption> = {
+    ...socialMediaTiles,
+    ...searchEngineTile
+};
+
 export interface SocialMediaOption {
     label: string;
     value: SEO_MEDIA_TYPES;

core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/components/dot-ema-info-display/dot-ema-info-display.component.spec.ts

@@ -138,7 +138,6 @@ describe('DotEmaInfoDisplayComponent', () => {
     describe('socialMedia', () => {
         beforeEach(() => {
             spectator = createComponent();
-
             store = spectator.inject(UVEStore);
 
             store.loadPageAsset({
@@ -147,18 +146,19 @@ describe('DotEmaInfoDisplayComponent', () => {
                 language_id: '1',
                 'com.dotmarketing.persona.id': DEFAULT_PERSONA.identifier
             });
+
             store.setSocialMedia('facebook');
+            spectator.detectChanges();
         });
+
         it('should text for current social media', () => {
-            spectator.detectChanges();
             expect(spectator.query(byTestId('info-text')).textContent.trim()).toBe(
                 'Viewing facebook social media preview'
             );
             expect(spectator.query(byTestId('info-icon'))).not.toBeNull();
         });
-        it('should call clearDeviceAndSocialMedia when action button is clicked', () => {
-            spectator.detectChanges();
 
+        it('should call clearDeviceAndSocialMedia when action button is clicked', () => {
             const clearDeviceAndSocialMediaSpy = jest.spyOn(store, 'clearDeviceAndSocialMedia');
 
             const infoAction = spectator.debugElement.query(By.css('[data-testId="info-action"]'));

core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/components/dot-ema-info-display/dot-ema-info-display.component.ts

@@ -29,29 +29,31 @@ export class DotEmaInfoDisplayComponent {
      * @memberof DotEmaInfoDisplayComponent
      */
     protected handleAction() {
-        const options = this.$options();
+        const optionId = this.$options().id;
 
-        if (options.id === 'device' || options.id === 'socialMedia') {
+        if (optionId === 'device' || optionId === 'socialMedia') {
             this.uveStore.clearDeviceAndSocialMedia();
-        } else if (options.id === 'variant') {
-            const currentExperiment = this.uveStore.experiment();
-
-            this.router.navigate(
-                [
-                    '/edit-page/experiments/',
-                    currentExperiment.pageId,
-                    currentExperiment.id,
-                    'configuration'
-                ],
-                {
-                    queryParams: {
-                        mode: null,
-                        variantName: null,
-                        experimentId: null
-                    },
-                    queryParamsHandling: 'merge'
-                }
-            );
+
+            return;
         }
+
+        const currentExperiment = this.uveStore.experiment();
+
+        this.router.navigate(
+            [
+                '/edit-page/experiments/',
+                currentExperiment.pageId,
+                currentExperiment.id,
+                'configuration'
+            ],
+            {
+                queryParams: {
+                    mode: null,
+                    variantName: null,
+                    experimentId: null
+                },
+                queryParamsHandling: 'merge'
+            }
+        );
     }
 }

core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/components/dot-uve-device-selector/dot-uve-device-selector.component.html

@@ -33,10 +33,10 @@
         icon="pi pi-chevron-down"
         iconPos="right"
         [label]="'more' | dm"
-        [ngClass]="{ active: !$isADefaultDeviceActive() }"
+        [ngClass]="{ active: $isMoreButtonActive() }"
         styleClass="p-button-text p-button-sm"
         (click)="menu.toggle($event)"
         data-testId="more-button" />
 
-    <p-menu #menu [popup]="true" [model]="$menuItems()"></p-menu>
+    <p-menu #menu [popup]="true" [model]="$menuItems()" data-testId="more-options-btn" />
 }