Merge branch 'master' of https://github.com/dotCMS/core into issue-24482

dotCMS · Sep 28, 2023 · f04c2fa · f04c2fa
2 parents 6aed544 + d0f3abe
commit f04c2fa
Show file tree

Hide file tree

Showing 110 changed files with 3,502 additions and 555 deletions.
diff --git a/core-web/apps/dotcms-ui/.storybook/main.js b/core-web/apps/dotcms-ui/.storybook/main.js
@@ -13,7 +13,8 @@ module.exports = {
         '../../../libs/template-builder/**/*.stories.@(js|jsx|ts|tsx|mdx)',
         '../../../libs/block-editor/**/*.stories.@(js|jsx|ts|tsx|mdx)',
         '../../../libs/contenttype-fields/**/*.stories.@(js|jsx|ts|tsx|mdx)',
-        '../../../libs/ui/**/*.stories.@(js|jsx|ts|tsx|mdx)'
+        '../../../libs/ui/**/*.stories.@(js|jsx|ts|tsx|mdx)',
+        '../../../libs/portlets/**/*.stories.@(js|jsx|ts|tsx|mdx)'
     ],
     addons: ['storybook-design-token', '@storybook/addon-essentials', ...rootMain.addons],
     features: {

diff --git a/core-web/apps/dotcms-ui/.storybook/tsconfig.json b/core-web/apps/dotcms-ui/.storybook/tsconfig.json
@@ -9,6 +9,7 @@
         "../../../**/template-builder/**/src/lib/**/*.stories.ts",
         "../../../**/block-editor/**/src/lib/**/*.stories.ts",
         "../../../**/contenttype-fields/**/src/lib/**/*.stories.ts",
-        "../../../**/ui/**/src/lib/**/*.stories.ts"
+        "../../../**/ui/**/src/lib/**/*.stories.ts",
+        "../../../**/portlets/**/src/lib/**/*.stories.ts"
     ]
 }
diff --git a/.../dot-container-create/dot-container-code/dot-add-variable/dot-add-variable.component.html b/.../dot-container-create/dot-container-code/dot-add-variable/dot-add-variable.component.html
@@ -2,7 +2,7 @@
     <ng-template let-variable pTemplate="listItem">
         <div class="dot-add-variable-list__item">
             <div>
-                <h3>{{ variable?.name }}</h3>
+                <h3 [attr.data-testId]="'h3' + variable.variable">{{ variable?.name }}</h3>
                 <p>
                     <small>
                         {{ variable?.fieldTypeLabel }}

diff --git a/...t-container-create/dot-container-code/dot-add-variable/dot-add-variable.component.spec.ts b/...t-container-create/dot-container-code/dot-add-variable/dot-add-variable.component.spec.ts
@@ -154,7 +154,8 @@ const mockContentTypes: DotCMSContentType = {
 
 const messageServiceMock = new MockDotMessageService({
     'containers.properties.add.variable.title': 'Title',
-    Add: 'Add'
+    Add: 'Add',
+    'Content-Identifier-value': 'Content Identifier Value'
 });
 
 describe('DotAddVariableComponent', () => {
@@ -262,5 +263,13 @@ describe('DotAddVariableComponent', () => {
                 expect(content).not.toEqual(FilteredFieldTypes.Row);
             });
         });
+
+        it('should contain a field with the text "Content Identifier Value"', () => {
+            const contentIdentifier = de.query(By.css(`[data-testId="h3ContentIdentifier"]`));
+
+            expect(contentIdentifier.nativeElement.textContent.trim()).toEqual(
+                'Content Identifier Value'
+            );
+        });
     });
 });
diff --git a/...rs/dot-container-create/dot-container-code/dot-add-variable/dot-add-variable.component.ts b/...rs/dot-container-create/dot-container-code/dot-add-variable/dot-add-variable.component.ts
@@ -1,12 +1,15 @@
-import { Component, OnInit } from '@angular/core';
+import { Observable } from 'rxjs';
+
+import { Component, OnInit, inject } from '@angular/core';
 
 import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
 
 import { map } from 'rxjs/operators';
 
 import { DotAddVariableStore } from '@dotcms/app/portlets/dot-containers/dot-container-create/dot-container-code/dot-add-variable/store/dot-add-variable.store';
+import { DotMessageService } from '@dotcms/data-access';
 
-import { FilteredFieldTypes } from './dot-add-variable.models';
+import { DotVariableContent, DotVariableList, FilteredFieldTypes } from './dot-add-variable.models';
 
 @Component({
     selector: 'dot-add-variable',
@@ -15,24 +18,33 @@ import { FilteredFieldTypes } from './dot-add-variable.models';
     providers: [DotAddVariableStore]
 })
 export class DotAddVariableComponent implements OnInit {
-    vm$ = this.store.vm$.pipe(
+    private readonly dotMessage = inject(DotMessageService);
+    private readonly store = inject(DotAddVariableStore);
+    private readonly config = inject(DynamicDialogConfig);
+    private readonly ref = inject(DynamicDialogRef);
+
+    vm$: Observable<DotVariableList> = this.store.vm$.pipe(
         map((res) => {
-            const variables = res.variables.filter(
-                (variable) =>
-                    variable.fieldType !== FilteredFieldTypes.Column &&
-                    variable.fieldType !== FilteredFieldTypes.Row
-            );
+            const variables: DotVariableContent[] = res.variables
+                .filter(
+                    (variable) =>
+                        variable.fieldType !== FilteredFieldTypes.Column &&
+                        variable.fieldType !== FilteredFieldTypes.Row
+                )
+                .map((variable) => ({
+                    name: variable.name,
+                    variable: variable.variable,
+                    fieldTypeLabel: variable.fieldTypeLabel
+                }));
+            variables.push({
+                name: this.dotMessage.get('Content-Identifier-value'),
+                variable: 'ContentIdentifier'
+            });
 
             return { variables };
         })
     );
 
-    constructor(
-        private store: DotAddVariableStore,
-        private config: DynamicDialogConfig,
-        private ref: DynamicDialogRef
-    ) {}
-
     ngOnInit() {
         this.store.getVariables(this.config.data?.contentTypeVariable);
     }

diff --git a/...iners/dot-container-create/dot-container-code/dot-add-variable/dot-add-variable.models.ts b/...iners/dot-container-create/dot-container-code/dot-add-variable/dot-add-variable.models.ts
@@ -2,3 +2,13 @@ export enum FilteredFieldTypes {
     Column = 'Column',
     Row = 'Row'
 }
+
+export interface DotVariableList {
+    variables: DotVariableContent[];
+}
+
+export interface DotVariableContent {
+    name: string;
+    fieldTypeLabel?: string;
+    variable: string;
+}
diff --git a/...t/components/dot-edit-page-state-controller/dot-edit-page-state-controller.component.html b/...t/components/dot-edit-page-state-controller/dot-edit-page-state-controller.component.html
@@ -19,7 +19,7 @@
         class="p-button-tabbed"
         [(ngModel)]="mode"
         [options]="options"
-        (onChange)="stateSelectorHandler($event)"
+        (onChange)="stateSelectorHandler({ optionId: $event.value })"
         optionValue="value.id"
         data-testId="selectButton"></p-selectButton>
 </ng-template>

diff --git a/...omponents/dot-edit-page-state-controller/dot-edit-page-state-controller.component.spec.ts b/...omponents/dot-edit-page-state-controller/dot-edit-page-state-controller.component.spec.ts
@@ -389,7 +389,7 @@ describe('DotEditPageStateControllerComponent', () => {
 
             const selectButton = de.query(By.css('p-selectButton'));
             selectButton.triggerEventHandler('onChange', {
-                optionId: DotPageMode.EDIT
+                value: DotPageMode.EDIT
             });
 
             await fixtureHost.whenStable();
@@ -420,7 +420,7 @@ describe('DotEditPageStateControllerComponent', () => {
 
             const selectButton = de.query(By.css('p-selectButton'));
             selectButton.triggerEventHandler('onChange', {
-                optionId: DotPageMode.EDIT
+                value: DotPageMode.EDIT
             });
 
             await fixtureHost.whenStable();
@@ -443,7 +443,7 @@ describe('DotEditPageStateControllerComponent', () => {
 
             const selectButton = de.query(By.css('p-selectButton'));
             selectButton.triggerEventHandler('onChange', {
-                optionId: DotPageMode.EDIT
+                value: DotPageMode.EDIT
             });
 
             fixtureHost.whenStable();
@@ -482,7 +482,7 @@ describe('DotEditPageStateControllerComponent', () => {
 
             const selectButton = de.query(By.css('p-selectButton'));
             selectButton.triggerEventHandler('onChange', {
-                optionId: DotPageMode.EDIT
+                value: DotPageMode.EDIT
             });
 
             await fixtureHost.whenStable();
@@ -518,7 +518,7 @@ describe('DotEditPageStateControllerComponent', () => {
             fixtureHost.detectChanges();
             const selectButton = de.query(By.css('p-selectButton'));
             selectButton.triggerEventHandler('onChange', {
-                optionId: DotPageMode.EDIT
+                value: DotPageMode.EDIT
             });
             await fixtureHost.whenStable();
             expect(component.modeChange.emit).toHaveBeenCalledWith(DotPageMode.EDIT);

diff --git a/...p/portlets/dot-edit-page/content/services/dot-edit-content-html/models/meta-tags-model.ts b/...p/portlets/dot-edit-page/content/services/dot-edit-content-html/models/meta-tags-model.ts
@@ -54,6 +54,7 @@ export interface SeoKeyResult {
 
 export interface SeoMetaTagsResult {
     key: string;
+    title: string;
     keyIcon: string;
     keyColor: string;
     items: SeoRulesResult[];

diff --git a/...tcms-ui/src/app/portlets/dot-edit-page/content/services/html/dot-seo-meta-tags.service.ts b/...tcms-ui/src/app/portlets/dot-edit-page/content/services/html/dot-seo-meta-tags.service.ts
@@ -98,6 +98,7 @@ export class DotSeoMetaTagsService {
 
                     return {
                         key,
+                        title: key.replace('og:', '').replace('twitter:', ''),
                         keyIcon: keysValues.keyIcon,
                         keyColor: keysValues.keyColor,
                         items: items,
@@ -121,23 +122,23 @@ export class DotSeoMetaTagsService {
             [SEO_OPTIONS.DESCRIPTION]: {
                 getItems: (metaTagsObject: SeoMetaTags) =>
                     of(this.getDescriptionItems(metaTagsObject)),
-                sort: 2,
+                sort: 3,
                 info: this.dotMessageService.get('seo.rules.description.info')
             },
             [SEO_OPTIONS.OG_DESCRIPTION]: {
                 getItems: (metaTagsObject: SeoMetaTags) =>
                     of(this.getDescriptionItems(metaTagsObject)),
-                sort: 3,
+                sort: 4,
                 info: this.dotMessageService.get('seo.rules.description.info')
             },
             [SEO_OPTIONS.TITLE]: {
                 getItems: (metaTagsObject: SeoMetaTags) => of(this.getTitleItems(metaTagsObject)),
-                sort: 4,
+                sort: 2,
                 info: this.dotMessageService.get('seo.rules.title.info')
             },
             [SEO_OPTIONS.OG_TITLE]: {
                 getItems: (metaTagsObject: SeoMetaTags) => of(this.getOgTitleItems(metaTagsObject)),
-                sort: 5,
+                sort: 2,
                 info: this.dotMessageService.get('seo.rules.title.info')
             },
             [SEO_OPTIONS.OG_IMAGE]: {
@@ -148,13 +149,13 @@ export class DotSeoMetaTagsService {
             [SEO_OPTIONS.TWITTER_CARD]: {
                 getItems: (metaTagsObject: SeoMetaTags) =>
                     of(this.getTwitterCardItems(metaTagsObject)),
-                sort: 1,
+                sort: 2,
                 info: ''
             },
             [SEO_OPTIONS.TWITTER_TITLE]: {
                 getItems: (metaTagsObject: SeoMetaTags) =>
                     of(this.getTwitterTitleItems(metaTagsObject)),
-                sort: 2,
+                sort: 1,
                 info: ''
             },
             [SEO_OPTIONS.TWITTER_DESCRIPTION]: {

diff --git a/...t-edit-page/seo/components/dot-device-selector-seo/dot-device-selector-seo.component.scss b/...t-edit-page/seo/components/dot-device-selector-seo/dot-device-selector-seo.component.scss
@@ -42,6 +42,7 @@ $device-selector-name-margin: 0.375rem;
     flex-direction: row;
     gap: $spacing-1;
     color: $color-palette-gray-600;
+    width: 100%;
 }
 
 .dot-device-selector__grid {
@@ -108,8 +109,8 @@ $device-selector-name-margin: 0.375rem;
             gap: $spacing-3;
         }
 
-        border-radius: 0.75rem;
-        margin-top: 5px;
+        border-radius: $border-radius-md;
+        margin-top: $spacing-3;
     }
 
     .dot-device-selector__divider {

diff --git a/...dot-edit-page/seo/components/dot-device-selector-seo/dot-device-selector-seo.component.ts b/...dot-edit-page/seo/components/dot-device-selector-seo/dot-device-selector-seo.component.ts
@@ -149,8 +149,8 @@ export class DotDeviceSelectorSeoComponent implements OnInit {
      * Opens the device selector menu
      * @param event
      */
-    openMenu(event: Event) {
-        this.overlayPanel.toggle(event);
+    openMenu(event: Event, target?: HTMLElement) {
+        this.overlayPanel.toggle(event, target);
     }
 
     /**

diff --git a/...ler-seo/components/dot-edit-page-lock-info-seo/dot-edit-page-lock-info-seo.component.scss b/...ler-seo/components/dot-edit-page-lock-info-seo/dot-edit-page-lock-info-seo.component.scss
@@ -9,6 +9,7 @@
 .page-info {
     &__locked-by-message {
         color: $red;
+        padding: $spacing-3;
     }
 
     &__locked-by-message--blink {

diff --git a/...onents/dot-edit-page-state-controller-seo/dot-edit-page-state-controller-seo.component.ts b/...onents/dot-edit-page-state-controller-seo/dot-edit-page-state-controller-seo.component.ts
@@ -91,12 +91,15 @@ export class DotEditPageStateControllerSeoComponent implements OnInit, OnChanges
 
     readonly dotPageMode = DotPageMode;
 
-    private readonly menuOpenActions: Record<DotPageMode, (event: PointerEvent) => void> = {
+    private readonly menuOpenActions: Record<
+        DotPageMode,
+        (event: PointerEvent, target?: HTMLElement) => void
+    > = {
         [DotPageMode.EDIT]: (event: PointerEvent) => {
             this.menu.toggle(event);
         },
-        [DotPageMode.PREVIEW]: (event: PointerEvent) => {
-            this.deviceSelector.openMenu(event);
+        [DotPageMode.PREVIEW]: (event: PointerEvent, target?: HTMLElement) => {
+            this.deviceSelector.openMenu(event, target);
         },
         [DotPageMode.LIVE]: (_: PointerEvent) => {
             // No logic
@@ -246,8 +249,16 @@ export class DotEditPageStateControllerSeoComponent implements OnInit, OnChanges
      * @param {{ event: PointerEvent; menuId: string }} { event, menuId }
      * @memberof DotEditPageStateControllerSeoComponent
      */
-    handleMenuOpen({ event, menuId }: { event: PointerEvent; menuId: string }): void {
-        this.menuOpenActions[menuId as DotPageMode]?.(event);
+    handleMenuOpen({
+        event,
+        menuId,
+        target
+    }: {
+        event: PointerEvent;
+        menuId: string;
+        target?: HTMLElement;
+    }): void {
+        this.menuOpenActions[menuId as DotPageMode]?.(event, target);
     }
 
     /**

diff --git a/...ets/dot-edit-page/seo/components/dot-results-seo-tool/dot-results-seo-tool.component.html b/...ets/dot-edit-page/seo/components/dot-results-seo-tool/dot-results-seo-tool.component.html
@@ -57,7 +57,7 @@ <h5>{{ mainPreview.title }}</h5>
 <p-card class="results-seo-tool__result-card" *ngFor="let result of currentResults$ | async">
     <ng-template pTemplate="header">
         <div class="results-seo-tool__result-card-title">
-            <span data-testId="result-key"> {{ result.key | titlecase }}</span>
+            <span data-testId="result-key"> {{ result.title | titlecase }}</span>
         </div>
     </ng-template>
     <ul class="results-seo-tool__result-card-list">

diff --git a/.../dot-edit-page/seo/components/dot-results-seo-tool/dot-results-seo-tool.component.spec.ts b/.../dot-edit-page/seo/components/dot-results-seo-tool/dot-results-seo-tool.component.spec.ts
@@ -150,4 +150,17 @@ describe('DotResultsSeoToolComponent', () => {
             done();
         });
     });
+
+    it('should render the result card title with title case', () => {
+        const expectedTitle = 'Title';
+        const expectedDescription = 'Description';
+
+        const resultKeyTitle = spectator.queryAll(byTestId('result-key'))[2];
+        const resultKeyDescription = spectator.queryAll(byTestId('result-key'))[1];
+
+        expect(resultKeyTitle).toExist();
+        expect(resultKeyDescription).toExist();
+        expect(resultKeyTitle).toContainText(expectedTitle);
+        expect(resultKeyDescription).toContainText(expectedDescription);
+    });
 });