Feature/container properties form (#23020)

* Added Tabs to Container Create Page and updated translation strings

* Added container properties component and added Inplace editor to it

* Removed unused comment

* [WIP] Properties form UI updated

* Added Monaco Editor to Properties Form

* add history and permission iframe

* refactoring

* create edit route for container and resolver

* Added controls to container form

* change component and folders name

* Added method docs, Added translations, Minor fixes

* Added missing translations

* Added MonacoEditor type model for reusability

* CSS refactor

* CSS refactor

* Renamed container create component as DotContainerCreateComponent

* Component and SCSS refactor

* Refactored Loop editor to new component

* Update core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-history/dot-container-history.component.ts

Co-authored-by: Rafael Velazco <rjvelazco21@gmail.com>

* Update core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-permissions/dot-container-permissions.component.ts

Co-authored-by: Rafael Velazco <rjvelazco21@gmail.com>

* Refactored Content Editor to new component

* Fixed Permissions and History componanets

* change css style and remove unnecessary ng deep

* change css style and remove unnecessary ng deep

* Update core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-create.component.scss

Co-authored-by: Freddy Montes <freddymontes@gmail.com>

* Update core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-content-editor/store/dot-content-editor.store.ts

Co-authored-by: Freddy Montes <freddymontes@gmail.com>

* Removed unnecessary monaco editor initializations

* fixed box height issue

Co-authored-by: Zulqarnain Huda <zulqarnain.huda@venturedive.com>
Co-authored-by: zulqarnainvd <113915849+zulqarnainvd@users.noreply.github.com>
Co-authored-by: Rafael Velazco <rjvelazco21@gmail.com>
Co-authored-by: Freddy Montes <freddymontes@gmail.com>

core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-create-routing.module.ts → core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-create-routing.module.ts

@@ -1,16 +1,16 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import { ContainerCreateComponent } from './container-create.component';
+import { DotContainerCreateComponent } from './dot-container-create.component';
 
 const routes: Routes = [
     {
         path: '',
-        component: ContainerCreateComponent
+        component: DotContainerCreateComponent
     }
 ];
 
 @NgModule({
     imports: [RouterModule.forChild(routes)],
     exports: [RouterModule]
 })
-export class ContainerCreateRoutingModule {}
+export class DotContainerCreateRoutingModule {}

core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-create.component.html → core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-create.component.html

@@ -2,13 +2,15 @@
     <div class="container-create__tab-container">
         <p-tabView class="container-create__tabs">
             <p-tabPanel [header]="'message.containers.tab.properties' | dm">
-                <ng-template pTemplate="content"> Complex Content to Lazy Load 1 </ng-template>
+                <ng-template pTemplate="content">
+                    <dot-container-properties></dot-container-properties>
+                </ng-template>
             </p-tabPanel>
             <p-tabPanel [header]="'message.containers.tab.permissions' | dm">
-                <ng-template pTemplate="content"> Complex Content to Lazy Load 2 </ng-template>
+                <dot-container-permissions></dot-container-permissions>
             </p-tabPanel>
             <p-tabPanel [header]="'message.containers.tab.history' | dm">
-                <ng-template pTemplate="content"> Complex Content to Lazy Load 3 </ng-template>
+                <dot-container-history></dot-container-history>
             </p-tabPanel>
         </p-tabView>
     </div>

core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-create.component.scss

@@ -0,0 +1,33 @@
+@use "variables" as *;
+
+.container-create__tab-container ::ng-deep {
+    .p-tabview {
+        height: 100%;
+    }
+    .p-tabview-panels {
+        height: 100%;
+        flex-grow: 1;
+        flex-basis: 0;
+        overflow: scroll;
+    }
+    .p-tabview-nav {
+        padding: 0 $spacing-4;
+        background: $white;
+    }
+
+    .p-tabview-panel {
+        height: 100%;
+        padding: 0 $spacing-4;
+        padding-top: $spacing-4;
+    }
+}
+
+.container-create__tab-container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+.container-create__tabs {
+    height: 100%;
+}

core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-create.component.spec.ts

@@ -0,0 +1,35 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DotContainerCreateComponent } from './dot-container-create.component';
+import { DotMessagePipeModule } from '@pipes/dot-message/dot-message-pipe.module';
+import { DotMessageService } from '@services/dot-message/dot-messages.service';
+import { CoreWebService } from '@dotcms/dotcms-js';
+import { CoreWebServiceMock } from '@tests/core-web.service.mock';
+import { MockDotMessageService } from '@tests/dot-message-service.mock';
+
+const messages = {};
+
+describe('ContainerCreateComponent', () => {
+    let component: DotContainerCreateComponent;
+    let fixture: ComponentFixture<DotContainerCreateComponent>;
+    const messageServiceMock = new MockDotMessageService(messages);
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            declarations: [DotContainerCreateComponent],
+            imports: [DotMessagePipeModule],
+            providers: [
+                { provide: DotMessageService, useValue: messageServiceMock },
+                { provide: CoreWebService, useClass: CoreWebServiceMock }
+            ]
+        }).compileComponents();
+
+        fixture = TestBed.createComponent(DotContainerCreateComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});

core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-create.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'dot-container-create',
+    templateUrl: './dot-container-create.component.html',
+    styleUrls: ['./dot-container-create.component.scss']
+})
+export class DotContainerCreateComponent {}

core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-create.module.ts

@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { DotContainerCreateRoutingModule } from './dot-container-create-routing.module';
+import { DotContainerCreateComponent } from './dot-container-create.component';
+import { DotPortletBaseModule } from '@components/dot-portlet-base/dot-portlet-base.module';
+import { TabViewModule } from 'primeng/tabview';
+import { DotMessagePipeModule } from '@pipes/dot-message/dot-message-pipe.module';
+import { DotContainerPropertiesModule } from '@portlets/dot-containers/dot-container-create/dot-container-properties/dot-container-properties.module';
+import { DotContainerPermissionsModule } from '@dotcms/app/portlets/dot-containers/dot-container-create/dot-container-permissions/dot-container-permissions.module';
+import { DotContainerHistoryModule } from '@dotcms/app/portlets/dot-containers/dot-container-create/dot-container-history/dot-container-history.module';
+
+@NgModule({
+    declarations: [DotContainerCreateComponent],
+    imports: [
+        CommonModule,
+        DotContainerCreateRoutingModule,
+        DotPortletBaseModule,
+        TabViewModule,
+        DotMessagePipeModule,
+        DotContainerPropertiesModule,
+        DotContainerPermissionsModule,
+        DotContainerHistoryModule
+    ]
+})
+export class DotContainerCreateModule {}

core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-history/dot-container-history.component.html

@@ -0,0 +1,3 @@
+<dot-portlet-box>
+    <dot-iframe data-testId="historyIframe" [src]="historyUrl"></dot-iframe>
+</dot-portlet-box>

core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-history/dot-container-history.component.scss

@@ -0,0 +1,5 @@
+dot-portlet-box {
+    height: 100%;
+    overflow-x: auto;
+    margin: 0;
+}

core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-history/dot-container-history.component.spec.ts

@@ -0,0 +1,47 @@
+import { Component, DebugElement, ElementRef, Input, ViewChild } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DotContainerHistoryComponent } from './dot-container-history.component';
+import { DotPortletBoxModule } from '@components/dot-portlet-base/components/dot-portlet-box/dot-portlet-box.module';
+
+@Component({
+    selector: 'dot-iframe',
+    template: ''
+})
+export class IframeMockComponent {
+    @Input() src: string;
+    @ViewChild('iframeElement') iframeElement: ElementRef;
+}
+
+describe('ContainerHistoryComponent', () => {
+    let component: DotContainerHistoryComponent;
+    let fixture: ComponentFixture<DotContainerHistoryComponent>;
+    let de: DebugElement;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            declarations: [DotContainerHistoryComponent, IframeMockComponent],
+            imports: [DotPortletBoxModule]
+        }).compileComponents();
+
+        fixture = TestBed.createComponent(DotContainerHistoryComponent);
+        de = fixture.debugElement;
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+
+    describe('history', () => {
+        beforeEach(() => {
+            fixture.detectChanges();
+        });
+
+        it('should set iframe history url', () => {
+            const permissions = de.query(By.css('[data-testId="historyIframe"]'));
+            expect(permissions.componentInstance.src).toBe('/html/containers/push_history.jsp');
+        });
+    });
+});

core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-history/dot-container-history.component.ts

@@ -0,0 +1,18 @@
+import { Component, OnChanges, ViewChild } from '@angular/core';
+import { IframeComponent } from '@components/_common/iframe/iframe-component';
+
+@Component({
+    selector: 'dot-container-history',
+    templateUrl: './dot-container-history.component.html',
+    styleUrls: ['./dot-container-history.component.scss']
+})
+export class DotContainerHistoryComponent implements OnChanges {
+    @ViewChild('historyIframe') historyIframe: IframeComponent;
+    historyUrl = '/html/containers/push_history.jsp';
+
+    ngOnChanges(): void {
+        if (this.historyIframe) {
+            this.historyIframe.iframeElement.nativeElement.contentWindow.location.reload();
+        }
+    }
+}

core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-history/dot-container-history.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { DotContainerHistoryComponent } from './dot-container-history.component';
+import { DotPortletBoxModule } from '@components/dot-portlet-base/components/dot-portlet-box/dot-portlet-box.module';
+import { IFrameModule } from '@components/_common/iframe';
+
+@NgModule({
+    declarations: [DotContainerHistoryComponent],
+    exports: [DotContainerHistoryComponent],
+    imports: [CommonModule, DotPortletBoxModule, IFrameModule]
+})
+export class DotContainerHistoryModule {}

core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-permissions/dot-container-permissions.component.html

@@ -0,0 +1,3 @@
+<dot-portlet-box>
+    <dot-iframe data-testId="permissionsIframe" [src]="permissionsUrl"></dot-iframe>
+</dot-portlet-box>

core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-permissions/dot-container-permissions.component.scss

@@ -0,0 +1,5 @@
+dot-portlet-box {
+    height: 100%;
+    overflow-x: auto;
+    margin: 0;
+}

core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-permissions/dot-container-permissions.component.spec.ts

@@ -0,0 +1,47 @@
+import { Component, DebugElement, ElementRef, Input, ViewChild } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DotContainerPermissionsComponent } from './dot-container-permissions.component';
+import { DotPortletBoxModule } from '@components/dot-portlet-base/components/dot-portlet-box/dot-portlet-box.module';
+
+@Component({
+    selector: 'dot-iframe',
+    template: ''
+})
+export class IframeMockComponent {
+    @Input() src: string;
+    @ViewChild('iframeElement') iframeElement: ElementRef;
+}
+
+describe('ContainerPermissionsComponent', () => {
+    let component: DotContainerPermissionsComponent;
+    let fixture: ComponentFixture<DotContainerPermissionsComponent>;
+    let de: DebugElement;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            declarations: [DotContainerPermissionsComponent, IframeMockComponent],
+            imports: [DotPortletBoxModule]
+        }).compileComponents();
+
+        fixture = TestBed.createComponent(DotContainerPermissionsComponent);
+        de = fixture.debugElement;
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+
+    describe('permissions', () => {
+        beforeEach(() => {
+            fixture.detectChanges();
+        });
+
+        it('should set iframe permissions url', () => {
+            const permissions = de.query(By.css('[data-testId="permissionsIframe"]'));
+            expect(permissions.componentInstance.src).toBe('/html/containers/permissions.jsp');
+        });
+    });
+});

core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-permissions/dot-container-permissions.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'dot-container-permissions',
+    templateUrl: './dot-container-permissions.component.html',
+    styleUrls: ['./dot-container-permissions.component.scss']
+})
+export class DotContainerPermissionsComponent {
+    permissionsUrl = '/html/containers/permissions.jsp';
+}

core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-permissions/dot-container-permissions.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { DotContainerPermissionsComponent } from './dot-container-permissions.component';
+import { DotPortletBoxModule } from '@components/dot-portlet-base/components/dot-portlet-box/dot-portlet-box.module';
+import { IFrameModule } from '@components/_common/iframe';
+
+@NgModule({
+    declarations: [DotContainerPermissionsComponent],
+    exports: [DotContainerPermissionsComponent],
+    imports: [CommonModule, DotPortletBoxModule, IFrameModule]
+})
+export class DotContainerPermissionsModule {}