feat(edit-page-2): Render RRSS Media Cards in New Editor for VTL Pages …

…dotCMS#27699 (dotCMS#27800) * centralize necessary components * Update dot-results-seo-tool.component.stories.ts * Update dot-results-seo-tool.component.stories.ts * seo results are working * fix tests * add test case * fix bug * feedback * refactor to centralize preview logic * small refactor to make Preview Mode persistent * fix broken tests * add if else * Update edit-ema-editor.component.html * address feedback * Update dot-ema.store.spec.ts * fix inconsistent render
spbolton · Mar 6, 2024 · 7591d5d · 7591d5d
1 parent 270ac3c
commit 7591d5d
Show file tree

Hide file tree

Showing 160 changed files with 655 additions and 663 deletions.
diff --git a/core-web/apps/dotcms-ui/src/app/app.module.ts b/core-web/apps/dotcms-ui/src/app/app.module.ts
@@ -9,8 +9,7 @@ import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 // App is our top level component
-import { DotMessagePipe } from '@dotcms/ui';
-import { DotPipesModule } from '@pipes/dot-pipes.module';
+import { DotMessagePipe, DotSafeHtmlPipe } from '@dotcms/ui';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
@@ -34,7 +33,7 @@ import { SharedModule } from './shared/shared.module';
         ReactiveFormsModule,
         AppRoutingModule,
         DotDirectivesModule,
-        DotPipesModule,
+        DotSafeHtmlPipe,
         SharedModule.forRoot(),
         MonacoEditorModule,
         MarkdownModule.forRoot(),

diff --git a/...ts/dot-apps/dot-apps-configuration-detail/dot-apps-configuration-detail.component.spec.ts b/...ts/dot-apps/dot-apps-configuration-detail/dot-apps-configuration-detail.component.spec.ts
@@ -14,9 +14,8 @@ import { ButtonModule } from 'primeng/button';
 import { DotAppsService } from '@dotcms/app/api/services/dot-apps/dot-apps.service';
 import { DotMessageService, DotRouterService } from '@dotcms/data-access';
 import { DotAppsSaveData, DotAppsSecret } from '@dotcms/dotcms-models';
-import { DotCopyButtonComponent, DotMessagePipe } from '@dotcms/ui';
+import { DotCopyButtonComponent, DotMessagePipe, DotSafeHtmlPipe } from '@dotcms/ui';
 import { MockDotMessageService, MockDotRouterService } from '@dotcms/utils-testing';
-import { DotPipesModule } from '@pipes/dot-pipes.module';
 import { DotKeyValue } from '@shared/models/dot-key-value-ng/dot-key-value-ng.model';
 
 import { DotAppsConfigurationDetailResolver } from './dot-apps-configuration-detail-resolver.service';
@@ -158,7 +157,7 @@ describe('DotAppsConfigurationDetailComponent', () => {
                 CommonModule,
                 DotCopyButtonComponent,
                 DotAppsConfigurationHeaderModule,
-                DotPipesModule,
+                DotSafeHtmlPipe,
                 DotMessagePipe,
                 MarkdownModule.forRoot()
             ],

diff --git a/...p/portlets/dot-apps/dot-apps-configuration-detail/dot-apps-configuration-detail.module.ts b/...p/portlets/dot-apps/dot-apps-configuration-detail/dot-apps-configuration-detail.module.ts
@@ -4,8 +4,12 @@ import { NgModule } from '@angular/core';
 import { ButtonModule } from 'primeng/button';
 
 import { DotAppsService } from '@dotcms/app/api/services/dot-apps/dot-apps.service';
-import { DotCopyButtonComponent, DotKeyValueComponent, DotMessagePipe } from '@dotcms/ui';
-import { DotPipesModule } from '@pipes/dot-pipes.module';
+import {
+    DotCopyButtonComponent,
+    DotKeyValueComponent,
+    DotMessagePipe,
+    DotSafeHtmlPipe
+} from '@dotcms/ui';
 
 import { DotAppsConfigurationDetailFormModule } from './dot-apps-configuration-detail-form/dot-apps-configuration-detail-form.module';
 import { DotAppsConfigurationDetailResolver } from './dot-apps-configuration-detail-resolver.service';
@@ -21,7 +25,7 @@ import { DotAppsConfigurationHeaderModule } from '../dot-apps-configuration-head
         DotCopyButtonComponent,
         DotAppsConfigurationHeaderModule,
         DotAppsConfigurationDetailFormModule,
-        DotPipesModule,
+        DotSafeHtmlPipe,
         DotMessagePipe
     ],
     declarations: [DotAppsConfigurationDetailComponent],

diff --git a/...ts/dot-apps/dot-apps-configuration-header/dot-apps-configuration-header.component.spec.ts b/...ts/dot-apps/dot-apps-configuration-header/dot-apps-configuration-header.component.spec.ts
@@ -10,9 +10,8 @@ import { AvatarModule } from 'primeng/avatar';
 import { DotCopyLinkModule } from '@components/dot-copy-link/dot-copy-link.module';
 import { DotMessageService, DotRouterService } from '@dotcms/data-access';
 import { DotApp } from '@dotcms/dotcms-models';
-import { DotAvatarDirective, DotMessagePipe } from '@dotcms/ui';
+import { DotAvatarDirective, DotMessagePipe, DotSafeHtmlPipe } from '@dotcms/ui';
 import { MockDotMessageService, MockDotRouterService } from '@dotcms/utils-testing';
-import { DotPipesModule } from '@pipes/dot-pipes.module';
 
 import { DotAppsConfigurationHeaderComponent } from './dot-apps-configuration-header.component';
 
@@ -54,7 +53,7 @@ describe('DotAppsConfigurationHeaderComponent', () => {
             imports: [
                 CommonModule,
                 DotCopyLinkModule,
-                DotPipesModule,
+                DotSafeHtmlPipe,
                 DotMessagePipe,
                 DotAvatarDirective,
                 AvatarModule

diff --git a/...p/portlets/dot-apps/dot-apps-configuration-header/dot-apps-configuration-header.module.ts b/...p/portlets/dot-apps/dot-apps-configuration-header/dot-apps-configuration-header.module.ts
@@ -6,8 +6,7 @@ import { NgModule } from '@angular/core';
 import { AvatarModule } from 'primeng/avatar';
 
 import { DotCopyLinkModule } from '@components/dot-copy-link/dot-copy-link.module';
-import { DotAvatarDirective, DotMessagePipe } from '@dotcms/ui';
-import { DotPipesModule } from '@pipes/dot-pipes.module';
+import { DotAvatarDirective, DotMessagePipe, DotSafeHtmlPipe } from '@dotcms/ui';
 
 import { DotAppsConfigurationHeaderComponent } from './dot-apps-configuration-header.component';
 
@@ -17,7 +16,7 @@ import { DotAppsConfigurationHeaderComponent } from './dot-apps-configuration-he
         AvatarModule,
         DotAvatarDirective,
         DotCopyLinkModule,
-        DotPipesModule,
+        DotSafeHtmlPipe,
         MarkdownModule.forChild(),
         DotMessagePipe
     ],

diff --git a/...figuration-list/dot-apps-configuration-item/dot-apps-configuration-item.component.spec.ts b/...figuration-list/dot-apps-configuration-item/dot-apps-configuration-item.component.spec.ts
@@ -9,9 +9,8 @@ import { TooltipModule } from 'primeng/tooltip';
 
 import { DotCopyLinkModule } from '@dotcms/app/view/components/dot-copy-link/dot-copy-link.module';
 import { DotAlertConfirmService, DotMessageService } from '@dotcms/data-access';
-import { DotMessagePipe } from '@dotcms/ui';
+import { DotMessagePipe, DotSafeHtmlPipe } from '@dotcms/ui';
 import { MockDotMessageService } from '@dotcms/utils-testing';
-import { DotPipesModule } from '@pipes/dot-pipes.module';
 
 import { DotAppsConfigurationItemComponent } from './dot-apps-configuration-item.component';
 
@@ -57,7 +56,7 @@ describe('DotAppsConfigurationItemComponent', () => {
                 DotCopyLinkModule,
                 TooltipModule,
                 HttpClientTestingModule,
-                DotPipesModule,
+                DotSafeHtmlPipe,
                 ButtonModule,
                 DotMessagePipe
             ],

diff --git a/...apps-configuration-list/dot-apps-configuration-item/dot-apps-configuration-item.module.ts b/...apps-configuration-list/dot-apps-configuration-item/dot-apps-configuration-item.module.ts
@@ -5,8 +5,7 @@ import { ButtonModule } from 'primeng/button';
 import { TooltipModule } from 'primeng/tooltip';
 
 import { DotCopyLinkModule } from '@dotcms/app/view/components/dot-copy-link/dot-copy-link.module';
-import { DotMessagePipe } from '@dotcms/ui';
-import { DotPipesModule } from '@pipes/dot-pipes.module';
+import { DotMessagePipe, DotSafeHtmlPipe } from '@dotcms/ui';
 
 import { DotAppsConfigurationItemComponent } from './dot-apps-configuration-item.component';
 
@@ -17,7 +16,7 @@ import { DotAppsConfigurationItemComponent } from './dot-apps-configuration-item
         TooltipModule,
         DotMessagePipe,
         ButtonModule,
-        DotPipesModule
+        DotSafeHtmlPipe
     ],
     declarations: [DotAppsConfigurationItemComponent],
     exports: [DotAppsConfigurationItemComponent]

diff --git a/...s-configuration/dot-apps-configuration-list/dot-apps-configuration-list.component.spec.ts b/...s-configuration/dot-apps-configuration-list/dot-apps-configuration-list.component.spec.ts
@@ -7,9 +7,8 @@ import { ConfirmationService } from 'primeng/api';
 import { ButtonModule } from 'primeng/button';
 
 import { DotAlertConfirmService, DotMessageService } from '@dotcms/data-access';
-import { DotMessagePipe } from '@dotcms/ui';
+import { DotMessagePipe, DotSafeHtmlPipe } from '@dotcms/ui';
 import { MockDotMessageService } from '@dotcms/utils-testing';
-import { DotPipesModule } from '@pipes/dot-pipes.module';
 
 import { DotAppsConfigurationItemModule } from './dot-apps-configuration-item/dot-apps-configuration-item.module';
 import { DotAppsConfigurationListComponent } from './dot-apps-configuration-list.component';
@@ -44,7 +43,7 @@ describe('DotAppsConfigurationListComponent', () => {
                 ButtonModule,
                 DotAppsConfigurationItemModule,
                 HttpClientTestingModule,
-                DotPipesModule,
+                DotSafeHtmlPipe,
                 DotMessagePipe
             ],
             declarations: [DotAppsConfigurationListComponent],

diff --git a/.../dot-apps-configuration/dot-apps-configuration-list/dot-apps-configuration-list.module.ts b/.../dot-apps-configuration/dot-apps-configuration-list/dot-apps-configuration-list.module.ts
@@ -3,8 +3,7 @@ import { NgModule } from '@angular/core';
 
 import { ButtonModule } from 'primeng/button';
 
-import { DotMessagePipe } from '@dotcms/ui';
-import { DotPipesModule } from '@pipes/dot-pipes.module';
+import { DotMessagePipe, DotSafeHtmlPipe } from '@dotcms/ui';
 
 import { DotAppsConfigurationItemModule } from './dot-apps-configuration-item/dot-apps-configuration-item.module';
 import { DotAppsConfigurationListComponent } from './dot-apps-configuration-list.component';
@@ -14,7 +13,7 @@ import { DotAppsConfigurationListComponent } from './dot-apps-configuration-list
         ButtonModule,
         CommonModule,
         DotAppsConfigurationItemModule,
-        DotPipesModule,
+        DotSafeHtmlPipe,
         DotMessagePipe
     ],
     declarations: [DotAppsConfigurationListComponent],

diff --git a/...src/app/portlets/dot-apps/dot-apps-configuration/dot-apps-configuration.component.spec.ts b/...src/app/portlets/dot-apps/dot-apps-configuration/dot-apps-configuration.component.spec.ts
@@ -24,13 +24,12 @@ import {
     PaginatorService
 } from '@dotcms/data-access';
 import { CoreWebService } from '@dotcms/dotcms-js';
-import { DotMessagePipe } from '@dotcms/ui';
+import { DotMessagePipe, DotSafeHtmlPipe } from '@dotcms/ui';
 import {
     CoreWebServiceMock,
     MockDotMessageService,
     MockDotRouterService
 } from '@dotcms/utils-testing';
-import { DotPipesModule } from '@pipes/dot-pipes.module';
 
 import { DotAppsConfigurationListModule } from './dot-apps-configuration-list/dot-apps-configuration-list.module';
 import { DotAppsConfigurationResolver } from './dot-apps-configuration-resolver.service';
@@ -124,7 +123,7 @@ describe('DotAppsConfigurationComponent', () => {
                 DotAppsImportExportDialogModule,
                 DotAppsConfigurationListModule,
                 HttpClientTestingModule,
-                DotPipesModule,
+                DotSafeHtmlPipe,
                 DotMessagePipe,
                 MarkdownModule.forRoot()
             ],

diff --git a/...tcms-ui/src/app/portlets/dot-apps/dot-apps-configuration/dot-apps-configuration.module.ts b/...tcms-ui/src/app/portlets/dot-apps/dot-apps-configuration/dot-apps-configuration.module.ts
@@ -9,8 +9,7 @@ import { InputTextModule } from 'primeng/inputtext';
 import { DotActionButtonModule } from '@components/_common/dot-action-button/dot-action-button.module';
 import { DotDialogModule } from '@components/dot-dialog/dot-dialog.module';
 import { DotAppsService } from '@dotcms/app/api/services/dot-apps/dot-apps.service';
-import { DotCopyButtonComponent, DotMessagePipe } from '@dotcms/ui';
-import { DotPipesModule } from '@pipes/dot-pipes.module';
+import { DotCopyButtonComponent, DotMessagePipe, DotSafeHtmlPipe } from '@dotcms/ui';
 
 import { DotAppsConfigurationListModule } from './dot-apps-configuration-list/dot-apps-configuration-list.module';
 import { DotAppsConfigurationResolver } from './dot-apps-configuration-resolver.service';
@@ -30,7 +29,7 @@ import { DotAppsImportExportDialogModule } from '../dot-apps-import-export-dialo
         DotAppsConfigurationListModule,
         DotAppsImportExportDialogModule,
         DotDialogModule,
-        DotPipesModule,
+        DotSafeHtmlPipe,
         MarkdownModule.forChild(),
         DotMessagePipe
     ],

diff --git a/...ts/dot-apps/dot-apps-import-export-dialog/dot-apps-import-export-dialog.component.spec.ts b/...ts/dot-apps/dot-apps-import-export-dialog/dot-apps-import-export-dialog.component.spec.ts
@@ -18,9 +18,8 @@ import {
     DotAppsImportConfiguration,
     DotAppsSite
 } from '@dotcms/dotcms-models';
-import { DotAutofocusDirective, DotMessagePipe } from '@dotcms/ui';
+import { DotAutofocusDirective, DotMessagePipe, DotSafeHtmlPipe } from '@dotcms/ui';
 import { MockDotMessageService } from '@dotcms/utils-testing';
-import { DotPipesModule } from '@pipes/dot-pipes.module';
 
 import { DotAppsImportExportDialogComponent } from './dot-apps-import-export-dialog.component';
 
@@ -81,7 +80,7 @@ describe('DotAppsImportExportDialogComponent', () => {
                 DotDialogModule,
                 CommonModule,
                 ReactiveFormsModule,
-                DotPipesModule,
+                DotSafeHtmlPipe,
                 DotMessagePipe,
                 HttpClientTestingModule
             ],

diff --git a/...p/portlets/dot-apps/dot-apps-import-export-dialog/dot-apps-import-export-dialog.module.ts b/...p/portlets/dot-apps/dot-apps-import-export-dialog/dot-apps-import-export-dialog.module.ts
@@ -7,8 +7,12 @@ import { PasswordModule } from 'primeng/password';
 
 import { DotDialogModule } from '@components/dot-dialog/dot-dialog.module';
 import { DotAppsService } from '@dotcms/app/api/services/dot-apps/dot-apps.service';
-import { DotAutofocusDirective, DotFieldRequiredDirective, DotMessagePipe } from '@dotcms/ui';
-import { DotPipesModule } from '@pipes/dot-pipes.module';
+import {
+    DotAutofocusDirective,
+    DotFieldRequiredDirective,
+    DotMessagePipe,
+    DotSafeHtmlPipe
+} from '@dotcms/ui';
 
 import { DotAppsImportExportDialogComponent } from './dot-apps-import-export-dialog.component';
 
@@ -20,7 +24,7 @@ import { DotAppsImportExportDialogComponent } from './dot-apps-import-export-dia
         DotDialogModule,
         DotAutofocusDirective,
         ReactiveFormsModule,
-        DotPipesModule,
+        DotSafeHtmlPipe,
         DotFieldRequiredDirective,
         DotMessagePipe
     ],

diff --git a/...-ui/src/app/portlets/dot-apps/dot-apps-list/dot-apps-card/dot-apps-card.component.spec.ts b/...-ui/src/app/portlets/dot-apps/dot-apps-list/dot-apps-card/dot-apps-card.component.spec.ts
@@ -8,9 +8,8 @@ import { CardModule } from 'primeng/card';
 import { TooltipModule } from 'primeng/tooltip';
 
 import { DotMessageService } from '@dotcms/data-access';
-import { DotAvatarDirective, DotIconModule, DotMessagePipe } from '@dotcms/ui';
+import { DotAvatarDirective, DotIconModule, DotMessagePipe, DotSafeHtmlPipe } from '@dotcms/ui';
 import { MockDotMessageService } from '@dotcms/utils-testing';
-import { DotPipesModule } from '@pipes/dot-pipes.module';
 
 import { DotAppsCardComponent } from './dot-apps-card.component';
 
@@ -40,7 +39,7 @@ describe('DotAppsCardComponent', () => {
                 BadgeModule,
                 DotIconModule,
                 TooltipModule,
-                DotPipesModule,
+                DotSafeHtmlPipe,
                 DotMessagePipe
             ],
             declarations: [DotAppsCardComponent, MockMarkdownComponent],

diff --git a/...s/dotcms-ui/src/app/portlets/dot-apps/dot-apps-list/dot-apps-card/dot-apps-card.module.ts b/...s/dotcms-ui/src/app/portlets/dot-apps/dot-apps-list/dot-apps-card/dot-apps-card.module.ts
@@ -8,8 +8,7 @@ import { BadgeModule } from 'primeng/badge';
 import { CardModule } from 'primeng/card';
 import { TooltipModule } from 'primeng/tooltip';
 
-import { DotAvatarDirective, DotIconModule, DotMessagePipe } from '@dotcms/ui';
-import { DotPipesModule } from '@pipes/dot-pipes.module';
+import { DotAvatarDirective, DotIconModule, DotMessagePipe, DotSafeHtmlPipe } from '@dotcms/ui';
 
 import { DotAppsCardComponent } from './dot-apps-card.component';
 
@@ -22,7 +21,7 @@ import { DotAppsCardComponent } from './dot-apps-card.component';
         DotIconModule,
         MarkdownModule.forChild(),
         TooltipModule,
-        DotPipesModule,
+        DotSafeHtmlPipe,
         DotAvatarDirective,
         DotMessagePipe
     ],

diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-apps/dot-apps-list/dot-apps-list.module.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-apps/dot-apps-list/dot-apps-list.module.ts
@@ -6,8 +6,7 @@ import { InputTextModule } from 'primeng/inputtext';
 
 import { DotPortletBaseModule } from '@components/dot-portlet-base/dot-portlet-base.module';
 import { DotAppsService } from '@dotcms/app/api/services/dot-apps/dot-apps.service';
-import { DotIconModule, DotMessagePipe, DotNotLicenseComponent } from '@dotcms/ui';
-import { DotPipesModule } from '@pipes/dot-pipes.module';
+import { DotIconModule, DotMessagePipe, DotNotLicenseComponent, DotSafeHtmlPipe } from '@dotcms/ui';
 
 import { DotAppsCardModule } from './dot-apps-card/dot-apps-card.module';
 import { DotAppsListResolver } from './dot-apps-list-resolver.service';
@@ -21,7 +20,7 @@ import { DotAppsImportExportDialogModule } from '../dot-apps-import-export-dialo
         CommonModule,
         ButtonModule,
         DotAppsCardModule,
-        DotPipesModule,
+        DotSafeHtmlPipe,
         DotAppsImportExportDialogModule,
         DotNotLicenseComponent,
         DotIconModule,

diff --git a/...src/app/portlets/dot-categories/dot-categories-list/dot-categories-list.component.spec.ts b/...src/app/portlets/dot-categories/dot-categories-list/dot-categories-list.component.spec.ts
@@ -25,9 +25,8 @@ import { DotCategoriesService } from '@dotcms/app/api/services/dot-categories/do
 import { DotCategory } from '@dotcms/app/shared/models/dot-categories/dot-categories.model';
 import { DotMessageService } from '@dotcms/data-access';
 import { CoreWebService } from '@dotcms/dotcms-js';
-import { DotMessagePipe } from '@dotcms/ui';
+import { DotMessagePipe, DotSafeHtmlPipe } from '@dotcms/ui';
 import { CoreWebServiceMock, MockDotMessageService } from '@dotcms/utils-testing';
-import { DotPipesModule } from '@pipes/dot-pipes.module';
 
 import { DotCategoriesListComponent } from './dot-categories-list.component';
 
@@ -90,7 +89,7 @@ xdescribe('DotCategoriesListingTableComponent', () => {
                 MenuModule,
                 DotMenuModule,
                 HttpClientTestingModule,
-                DotPipesModule,
+                DotSafeHtmlPipe,
                 DotMessagePipe,
                 BreadcrumbModule,
                 DotPortletBaseModule,

diff --git a/...t-containers/dot-container-create/dot-container-code/dot-container-code.component.spec.ts b/...t-containers/dot-container-create/dot-container-code/dot-container-code.component.spec.ts
@@ -22,11 +22,10 @@ import { Menu, MenuModule } from 'primeng/menu';
 import { SkeletonModule } from 'primeng/skeleton';
 import { TabViewModule } from 'primeng/tabview';
 
-import { DotPipesModule } from '@dotcms/app/view/pipes/dot-pipes.module';
 import { DotMessageService } from '@dotcms/data-access';
 import { CoreWebService, CoreWebServiceMock } from '@dotcms/dotcms-js';
 import { DotCMSContentType } from '@dotcms/dotcms-models';
-import { DotMessagePipe } from '@dotcms/ui';
+import { DotMessagePipe, DotSafeHtmlPipe } from '@dotcms/ui';
 import { MockDotMessageService } from '@dotcms/utils-testing';
 
 import { DotAddVariableModule } from './dot-add-variable/dot-add-variable.module';
@@ -177,7 +176,7 @@ describe('DotContentEditorComponent', () => {
                 TabViewModule,
                 MenuModule,
                 ButtonModule,
-                DotPipesModule,
+                DotSafeHtmlPipe,
                 DotMessagePipe,
                 HttpClientTestingModule,
                 BrowserAnimationsModule,

diff --git a/...src/app/portlets/dot-edit-page/components/dot-edit-page-info/dot-edit-page-info.module.ts b/...src/app/portlets/dot-edit-page/components/dot-edit-page-info/dot-edit-page-info.module.ts
@@ -5,8 +5,12 @@ import { ButtonModule } from 'primeng/button';
 
 import { DotLinkComponent } from '@components/dot-link/dot-link.component';
 import { LOCATION_TOKEN } from '@dotcms/app/providers';
-import { DotApiLinkComponent, DotCopyButtonComponent, DotMessagePipe } from '@dotcms/ui';
-import { DotPipesModule } from '@pipes/dot-pipes.module';
+import {
+    DotApiLinkComponent,
+    DotCopyButtonComponent,
+    DotMessagePipe,
+    DotSafeHtmlPipe
+} from '@dotcms/ui';
 
 import { DotEditPageInfoComponent } from './dot-edit-page-info.component';
 
@@ -16,7 +20,7 @@ import { DotEditPageInfoComponent } from './dot-edit-page-info.component';
         ButtonModule,
         DotCopyButtonComponent,
         DotApiLinkComponent,
-        DotPipesModule,
+        DotSafeHtmlPipe,
         DotLinkComponent,
         DotMessagePipe
     ],