From c9f4b49b3793bb026a3dd1f3d1459b664426a573 Mon Sep 17 00:00:00 2001
From: Motasim Hussain <motasim.hussain@venturedive.com>
Date: Tue, 6 Sep 2022 21:56:41 +0500
Subject: [PATCH 01/28] Added Tabs to Container Create Page and updated
 translation strings

---
 .../container-create.component.html           | 18 +++++++++++++---
 .../container-create.component.scss           | 21 +++++++++++++++++++
 .../container-create.module.ts                | 10 ++++++++-
 .../dot-message/dot-message-pipe.module.ts    |  4 ++--
 .../WEB-INF/messages/Language.properties      |  3 +++
 5 files changed, 50 insertions(+), 6 deletions(-)

diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-create.component.html b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-create.component.html
index 87ec3320c0d5..9a8aeac99491 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-create.component.html
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-create.component.html
@@ -1,4 +1,16 @@
-<dot-portlet-base>
-    <dot-portlet-toolbar title="Container Create"></dot-portlet-toolbar>
-    <p>container-create works!</p>
+<dot-portlet-base [boxed]="false">
+    <div class="container-create__tab-container">
+        <!--    <dot-portlet-toolbar title="Container Create"></dot-portlet-toolbar>-->
+        <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>
+            </p-tabPanel>
+            <p-tabPanel [header]="'message.containers.tab.permissions' | dm">
+                <ng-template pTemplate="content"> Complex Content to Lazy Load 2 </ng-template>
+            </p-tabPanel>
+            <p-tabPanel [header]="'message.containers.tab.history' | dm">
+                <ng-template pTemplate="content"> Complex Content to Lazy Load 3 </ng-template>
+            </p-tabPanel>
+        </p-tabView>
+    </div>
 </dot-portlet-base>
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-create.component.scss b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-create.component.scss
index e69de29bb2d1..f13b2eeae4bc 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-create.component.scss
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-create.component.scss
@@ -0,0 +1,21 @@
+@use "variables" as *;
+
+:host ::ng-deep {
+    .container-create__tab-container {
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+
+        .container-create__tabs {
+            .p-tabview-nav {
+                padding: 0 $spacing-4;
+                background: $white;
+            }
+
+            .p-tabview-panel {
+                padding: 0 $spacing-4;
+                padding-top: $spacing-8;
+            }
+        }
+    }
+}
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-create.module.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-create.module.ts
index c6d2514e4dd5..9f2c324e43bc 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-create.module.ts
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-create.module.ts
@@ -4,9 +4,17 @@ import { CommonModule } from '@angular/common';
 import { ContainerCreateRoutingModule } from './container-create-routing.module';
 import { ContainerCreateComponent } from './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';
 
 @NgModule({
     declarations: [ContainerCreateComponent],
-    imports: [CommonModule, ContainerCreateRoutingModule, DotPortletBaseModule]
+    imports: [
+        CommonModule,
+        ContainerCreateRoutingModule,
+        DotPortletBaseModule,
+        TabViewModule,
+        DotMessagePipeModule
+    ]
 })
 export class ContainerCreateModule {}
diff --git a/core-web/apps/dotcms-ui/src/app/view/pipes/dot-message/dot-message-pipe.module.ts b/core-web/apps/dotcms-ui/src/app/view/pipes/dot-message/dot-message-pipe.module.ts
index a910bf0620fd..9ccf98422048 100644
--- a/core-web/apps/dotcms-ui/src/app/view/pipes/dot-message/dot-message-pipe.module.ts
+++ b/core-web/apps/dotcms-ui/src/app/view/pipes/dot-message/dot-message-pipe.module.ts
@@ -4,7 +4,7 @@ import { DotMessagePipe } from './dot-message.pipe';
 
 @NgModule({
     imports: [CommonModule],
-    declarations: [DotMessagePipe],
-    exports: [DotMessagePipe]
+    declarations: [DotMessagePipe, DotMessagePipe],
+    exports: [DotMessagePipe, DotMessagePipe]
 })
 export class DotMessagePipeModule {}
diff --git a/dotCMS/src/main/webapp/WEB-INF/messages/Language.properties b/dotCMS/src/main/webapp/WEB-INF/messages/Language.properties
index fe5ad8e8c5a2..23ef51c23ac7 100644
--- a/dotCMS/src/main/webapp/WEB-INF/messages/Language.properties
+++ b/dotCMS/src/main/webapp/WEB-INF/messages/Language.properties
@@ -2073,6 +2073,9 @@ message.containers.hints.total.pages = Total pages of content.
 message.containers.published = Container published
 message.containers.save = Container saved
 message.containers.select.content.type = You must select a Content Type
+message.containers.tab.properties = Properties
+message.containers.tab.permissions = Permissions
+message.containers.tab.history = History
 message.containers.undelete = Container unarchived
 message.containers.unlocked = Container unlocked
 message.containers.unpublished = Container unpublished

From c227fd5db3bc7268f04b840b7dd80d87a0279fa8 Mon Sep 17 00:00:00 2001
From: Motasim Hussain <motasim.hussain@venturedive.com>
Date: Wed, 7 Sep 2022 17:18:36 +0500
Subject: [PATCH 02/28] Added container properties component and added Inplace
 editor to it

---
 .../container-create.component.html              |  4 +++-
 .../container-create.component.scss              |  2 +-
 .../container-create/container-create.module.ts  |  4 +++-
 .../dot-container-properties.component.html      | 16 ++++++++++++++++
 .../dot-container-properties.component.scss      |  0
 .../dot-container-properties.component.spec.ts   |  0
 .../dot-container-properties.component.ts        | 12 ++++++++++++
 .../dot-container-properties.module.ts           | 13 +++++++++++++
 8 files changed, 48 insertions(+), 3 deletions(-)
 create mode 100644 core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.component.html
 create mode 100644 core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.component.scss
 create mode 100644 core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.component.spec.ts
 create mode 100644 core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.component.ts
 create mode 100644 core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.module.ts

diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-create.component.html b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-create.component.html
index 9a8aeac99491..22ea397e9da4 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-create.component.html
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-create.component.html
@@ -3,7 +3,9 @@
         <!--    <dot-portlet-toolbar title="Container Create"></dot-portlet-toolbar>-->
         <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>
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-create.component.scss b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-create.component.scss
index f13b2eeae4bc..9902df016f3d 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-create.component.scss
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-create.component.scss
@@ -14,7 +14,7 @@
 
             .p-tabview-panel {
                 padding: 0 $spacing-4;
-                padding-top: $spacing-8;
+                padding-top: $spacing-4;
             }
         }
     }
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-create.module.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-create.module.ts
index 9f2c324e43bc..e60929a912ce 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-create.module.ts
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-create.module.ts
@@ -6,6 +6,7 @@ import { ContainerCreateComponent } from './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/container-create/dot-container-properties/dot-container-properties.module';
 
 @NgModule({
     declarations: [ContainerCreateComponent],
@@ -14,7 +15,8 @@ import { DotMessagePipeModule } from '@pipes/dot-message/dot-message-pipe.module
         ContainerCreateRoutingModule,
         DotPortletBaseModule,
         TabViewModule,
-        DotMessagePipeModule
+        DotMessagePipeModule,
+        DotContainerPropertiesModule
     ]
 })
 export class ContainerCreateModule {}
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.component.html b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.component.html
new file mode 100644
index 000000000000..df15b914fe4b
--- /dev/null
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.component.html
@@ -0,0 +1,16 @@
+<ng-container>
+    <div>
+        <p-inplace #editText>
+            <ng-template pTemplate="content">
+                <span class="p-input-icon-right">
+                    <i class="pi pi-times" (click)="editText.deactivate()"></i>
+                    <input type="text" pInputText />
+                </span>
+            </ng-template>
+            <ng-template pTemplate="display">
+                Click to Edit
+                <i class="pi pi-pencil"></i>
+            </ng-template>
+        </p-inplace>
+    </div>
+</ng-container>
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.component.scss b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.component.scss
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.component.spec.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.component.spec.ts
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.component.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.component.ts
new file mode 100644
index 000000000000..5832440a9cab
--- /dev/null
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'dot-container-properties',
+    templateUrl: './dot-container-properties.component.html',
+    styleUrls: ['./dot-container-properties.component.scss']
+})
+export class DotContainerPropertiesComponent {
+    constructor() {
+        //
+    }
+}
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.module.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.module.ts
new file mode 100644
index 000000000000..32adac6aaefc
--- /dev/null
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.module.ts
@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { DotContainerPropertiesComponent } from '@portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.component';
+import { CommonModule } from '@angular/common';
+import { InplaceModule } from 'primeng/inplace';
+import { SharedModule } from 'primeng/api';
+import { InputTextModule } from 'primeng/inputtext';
+
+@NgModule({
+    declarations: [DotContainerPropertiesComponent],
+    exports: [DotContainerPropertiesComponent],
+    imports: [CommonModule, InplaceModule, SharedModule, InputTextModule]
+})
+export class DotContainerPropertiesModule {}

From 35830613287a64d845a8e09006d3c4f786b18fd2 Mon Sep 17 00:00:00 2001
From: Motasim Hussain <motasim.hussain@venturedive.com>
Date: Thu, 8 Sep 2022 12:09:33 +0500
Subject: [PATCH 03/28] Removed unused comment

---
 .../container-create/container-create.component.html             | 1 -
 1 file changed, 1 deletion(-)

diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-create.component.html b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-create.component.html
index 9a8aeac99491..50ef789a170c 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-create.component.html
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-create.component.html
@@ -1,6 +1,5 @@
 <dot-portlet-base [boxed]="false">
     <div class="container-create__tab-container">
-        <!--    <dot-portlet-toolbar title="Container Create"></dot-portlet-toolbar>-->
         <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>

From e47a1fd3afc942f260b81ad891db85b9f598567b Mon Sep 17 00:00:00 2001
From: Motasim Hussain <motasim.hussain@venturedive.com>
Date: Wed, 14 Sep 2022 21:58:28 +0500
Subject: [PATCH 04/28] [WIP] Properties form UI updated

---
 .../dot-container-properties.component.html   | 35 ++++++++++++++++++-
 .../dot-container-properties.component.scss   | 21 +++++++++++
 .../dot-container-properties.module.ts        | 12 +++++--
 3 files changed, 65 insertions(+), 3 deletions(-)

diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.component.html b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.component.html
index df15b914fe4b..1c5c0da86a3e 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.component.html
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.component.html
@@ -1,5 +1,5 @@
 <ng-container>
-    <div>
+    <div class="dot-container-properties__title-container">
         <p-inplace #editText>
             <ng-template pTemplate="content">
                 <span class="p-input-icon-right">
@@ -13,4 +13,37 @@
             </ng-template>
         </p-inplace>
     </div>
+    <div class="field">
+        <label for="description" class="block">Description</label>
+        <input id="description" type="text" pInputText />
+    </div>
+    <div class="field">
+        <label for="max-contents" class="block">Max Contents</label>
+        <input id="max-contents" type="text" pInputText />
+        <button pButton class="p-button-secondary" type="button" label="Clear"></button>
+        <button pButton type="button" label="content type code"></button>
+    </div>
+
+    <div class="dot-container-properties__code-container-outer">
+        <div class="dot-container-properties__pre-post-loop">
+            <div class="dot-container-properties__pre-post-loop-inplace">
+                <button
+                    pButton
+                    class="p-button-outlined p-button-secondary"
+                    type="button"
+                    label="ADD PRE AND POST LOOP CODE"
+                ></button>
+            </div>
+        </div>
+        <div class="dot-container-properties__pre-post-loop">
+            <div class="dot-container-properties__pre-post-loop-inplace">
+                <button
+                    pButton
+                    class="p-button-outlined p-button-secondary"
+                    type="button"
+                    label="ADD PRE AND POST LOOP CODE"
+                ></button>
+            </div>
+        </div>
+    </div>
 </ng-container>
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.component.scss b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.component.scss
index e69de29bb2d1..cc8f2399b7f0 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.component.scss
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.component.scss
@@ -0,0 +1,21 @@
+@use "variables" as *;
+
+:host {
+    .dot-container-properties__title-container {
+        padding: $spacing-4 0;
+    }
+
+    .dot-container-properties__code-container-outer {
+        background: $white;
+    }
+
+    .dot-container-properties__pre-post-loop {
+        .dot-container-properties__pre-post-loop-inplace {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: $spacing-6;
+            background: #e9ebfc;
+        }
+    }
+}
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.module.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.module.ts
index 32adac6aaefc..f229e2b6e6b8 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.module.ts
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.module.ts
@@ -4,10 +4,18 @@ import { CommonModule } from '@angular/common';
 import { InplaceModule } from 'primeng/inplace';
 import { SharedModule } from 'primeng/api';
 import { InputTextModule } from 'primeng/inputtext';
-
+import { DotPortletBaseModule } from '@components/dot-portlet-base/dot-portlet-base.module';
+import { CardModule } from 'primeng/card';
 @NgModule({
     declarations: [DotContainerPropertiesComponent],
     exports: [DotContainerPropertiesComponent],
-    imports: [CommonModule, InplaceModule, SharedModule, InputTextModule]
+    imports: [
+        CommonModule,
+        InplaceModule,
+        SharedModule,
+        InputTextModule,
+        DotPortletBaseModule,
+        CardModule
+    ]
 })
 export class DotContainerPropertiesModule {}

From b0d96dc6743ef4bc575031402bb765b908155102 Mon Sep 17 00:00:00 2001
From: Motasim Hussain <motasim.hussain@venturedive.com>
Date: Mon, 19 Sep 2022 13:07:03 +0500
Subject: [PATCH 05/28] Added Monaco Editor to Properties Form

---
 .../container-create.component.scss           |  1 +
 .../dot-container-properties.component.html   | 13 +++++++
 .../dot-container-properties.component.scss   | 24 ++++++++----
 .../dot-container-properties.component.ts     | 37 +++++++++++++++++--
 .../dot-container-properties.module.ts        |  6 ++-
 5 files changed, 70 insertions(+), 11 deletions(-)

diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-create.component.scss b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-create.component.scss
index 9902df016f3d..40d807db4d56 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-create.component.scss
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-create.component.scss
@@ -5,6 +5,7 @@
         display: flex;
         flex: 1;
         flex-direction: column;
+        overflow: auto;
 
         .container-create__tabs {
             .p-tabview-nav {
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.component.html b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.component.html
index 1c5c0da86a3e..7c1b08590d18 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.component.html
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.component.html
@@ -35,6 +35,19 @@
                 ></button>
             </div>
         </div>
+        <div>
+            <form [formGroup]="form">
+                <dot-textarea-content
+                    formControlName="body"
+                    #value
+                    height="100%"
+                    formControlName="body"
+                    [show]="['code']"
+                    language="html"
+                    (monacoInit)="initEditor($event)"
+                ></dot-textarea-content>
+            </form>
+        </div>
         <div class="dot-container-properties__pre-post-loop">
             <div class="dot-container-properties__pre-post-loop-inplace">
                 <button
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.component.scss b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.component.scss
index cc8f2399b7f0..e9e514d449b4 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.component.scss
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.component.scss
@@ -7,15 +7,25 @@
 
     .dot-container-properties__code-container-outer {
         background: $white;
-    }
+        display: flex;
+        height: 100%;
+        flex-direction: column;
+
+        .dot-container-properties__pre-post-loop {
+            .dot-container-properties__pre-post-loop-inplace {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                padding: $spacing-6;
+                background: #e9ebfc;
+            }
+        }
 
-    .dot-container-properties__pre-post-loop {
-        .dot-container-properties__pre-post-loop-inplace {
+        form {
+            margin: $spacing-3;
+            height: 100%;
             display: flex;
-            align-items: center;
-            justify-content: center;
-            padding: $spacing-6;
-            background: #e9ebfc;
+            flex-direction: column;
         }
     }
 }
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.component.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.component.ts
index 5832440a9cab..d930f4186c2a 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.component.ts
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.component.ts
@@ -1,12 +1,43 @@
-import { Component } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
+import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
+
+interface MonacoEditorOperation {
+    range: number;
+    text: string;
+    forceMoveMarkers: boolean;
+}
+
+interface MonacoEditor {
+    getSelection: () => number;
+    executeEdits: (action: string, data: MonacoEditorOperation[]) => void;
+}
 
 @Component({
     selector: 'dot-container-properties',
     templateUrl: './dot-container-properties.component.html',
     styleUrls: ['./dot-container-properties.component.scss']
 })
-export class DotContainerPropertiesComponent {
-    constructor() {
+export class DotContainerPropertiesComponent implements OnInit {
+    editor: MonacoEditor;
+    form: UntypedFormGroup;
+
+    @Input() body: string;
+
+    constructor(private fb: UntypedFormBuilder) {
         //
     }
+
+    ngOnInit(): void {
+        this.form = this.fb.group({ body: this.body });
+    }
+
+    /**
+     * This method initializes the monaco editor
+     *
+     * @param {*} editor
+     * @memberof DotTemplateComponent
+     */
+    initEditor(editor: MonacoEditor): void {
+        this.editor = editor;
+    }
 }
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.module.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.module.ts
index f229e2b6e6b8..f7a52e43c9ba 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.module.ts
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.module.ts
@@ -6,6 +6,8 @@ import { SharedModule } from 'primeng/api';
 import { InputTextModule } from 'primeng/inputtext';
 import { DotPortletBaseModule } from '@components/dot-portlet-base/dot-portlet-base.module';
 import { CardModule } from 'primeng/card';
+import { DotTextareaContentModule } from '@components/_common/dot-textarea-content/dot-textarea-content.module';
+import { ReactiveFormsModule } from '@angular/forms';
 @NgModule({
     declarations: [DotContainerPropertiesComponent],
     exports: [DotContainerPropertiesComponent],
@@ -15,7 +17,9 @@ import { CardModule } from 'primeng/card';
         SharedModule,
         InputTextModule,
         DotPortletBaseModule,
-        CardModule
+        CardModule,
+        DotTextareaContentModule,
+        ReactiveFormsModule
     ]
 })
 export class DotContainerPropertiesModule {}

From 8810dbf26137d7f44a0f78ea15a1cb256517a881 Mon Sep 17 00:00:00 2001
From: Zulqarnain Huda <zulqarnain.huda@venturedive.com>
Date: Tue, 20 Sep 2022 18:00:49 +0500
Subject: [PATCH 06/28] add history and permission iframe

---
 .../container-create.component.html           |  4 ++--
 .../container-create.component.scss           |  8 +++++--
 .../container-create.module.ts                |  6 ++++-
 .../container-history.component.html          |  3 +++
 .../container-history.component.scss          |  4 ++++
 .../container-history.component.spec.ts       | 22 ++++++++++++++++++
 .../container-history.component.ts            | 23 +++++++++++++++++++
 .../container-history.module.ts               | 13 +++++++++++
 .../container-permissions.component.html      |  3 +++
 .../container-permissions.component.scss      |  4 ++++
 .../container-permissions.component.spec.ts   | 22 ++++++++++++++++++
 .../container-permissions.component.ts        | 16 +++++++++++++
 .../container-permissions.module.ts           | 13 +++++++++++
 13 files changed, 136 insertions(+), 5 deletions(-)
 create mode 100644 core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-history/container-history.component.html
 create mode 100644 core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-history/container-history.component.scss
 create mode 100644 core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-history/container-history.component.spec.ts
 create mode 100644 core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-history/container-history.component.ts
 create mode 100644 core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-history/container-history.module.ts
 create mode 100644 core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-permissions/container-permissions.component.html
 create mode 100644 core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-permissions/container-permissions.component.scss
 create mode 100644 core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-permissions/container-permissions.component.spec.ts
 create mode 100644 core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-permissions/container-permissions.component.ts
 create mode 100644 core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-permissions/container-permissions.module.ts

diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-create.component.html b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-create.component.html
index fb80b8acda81..a936946a4f65 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-create.component.html
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-create.component.html
@@ -7,10 +7,10 @@
                 </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>
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-create.component.scss b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-create.component.scss
index 40d807db4d56..e708fa70ecd6 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-create.component.scss
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-create.component.scss
@@ -3,11 +3,15 @@
 :host ::ng-deep {
     .container-create__tab-container {
         display: flex;
-        flex: 1;
         flex-direction: column;
-        overflow: auto;
+        overflow: hidden;
 
         .container-create__tabs {
+            .p-tabview-panels {
+                overflow: hidden;
+                flex-grow: 1;
+                flex-basis: 0;
+            }
             .p-tabview-nav {
                 padding: 0 $spacing-4;
                 background: $white;
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-create.module.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-create.module.ts
index ebcefb6eb23e..0bc196e97d0d 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-create.module.ts
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-create.module.ts
@@ -7,6 +7,8 @@ import { DotPortletBaseModule } from '@components/dot-portlet-base/dot-portlet-b
 import { TabViewModule } from 'primeng/tabview';
 import { DotMessagePipeModule } from '@pipes/dot-message/dot-message-pipe.module';
 import { DotContainerPropertiesModule } from '@portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.module';
+import { ContainerPermissionsModule } from '@dotcms/app/portlets/dot-containers/container-create/container-permissions/container-permissions.module';
+import { ContainerHistoryModule } from '@dotcms/app/portlets/dot-containers/container-create/container-history/container-history.module';
 
 @NgModule({
     declarations: [ContainerCreateComponent],
@@ -17,7 +19,9 @@ import { DotContainerPropertiesModule } from '@portlets/dot-containers/container
         TabViewModule,
         DotMessagePipeModule,
         DotContainerPropertiesModule,
-        DotMessagePipeModule
+        DotMessagePipeModule,
+        ContainerPermissionsModule,
+        ContainerHistoryModule
     ]
 })
 export class ContainerCreateModule {}
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-history/container-history.component.html b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-history/container-history.component.html
new file mode 100644
index 000000000000..8851e7fcaf93
--- /dev/null
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-history/container-history.component.html
@@ -0,0 +1,3 @@
+<dot-portlet-box>
+    <dot-iframe data-testId="historyIframe" [src]="historyUrl"></dot-iframe>
+</dot-portlet-box>
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-history/container-history.component.scss b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-history/container-history.component.scss
new file mode 100644
index 000000000000..9146be1b2dd9
--- /dev/null
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-history/container-history.component.scss
@@ -0,0 +1,4 @@
+dot-portlet-box {
+    height: 100vh;
+    overflow: hidden;
+}
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-history/container-history.component.spec.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-history/container-history.component.spec.ts
new file mode 100644
index 000000000000..04ad386dddf0
--- /dev/null
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-history/container-history.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ContainerHistoryComponent } from './container-history.component';
+
+describe('ContainerHistoryComponent', () => {
+    let component: ContainerHistoryComponent;
+    let fixture: ComponentFixture<ContainerHistoryComponent>;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            declarations: [ContainerHistoryComponent]
+        }).compileComponents();
+
+        fixture = TestBed.createComponent(ContainerHistoryComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-history/container-history.component.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-history/container-history.component.ts
new file mode 100644
index 000000000000..1f7088aa12d8
--- /dev/null
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-history/container-history.component.ts
@@ -0,0 +1,23 @@
+import { Component, OnChanges, OnInit, ViewChild } from '@angular/core';
+import { IframeComponent } from '@components/_common/iframe/iframe-component';
+
+@Component({
+    selector: 'dot-container-history',
+    templateUrl: './container-history.component.html',
+    styleUrls: ['./container-history.component.scss']
+})
+export class ContainerHistoryComponent implements OnInit, OnChanges {
+    @ViewChild('historyIframe') historyIframe: IframeComponent;
+
+    historyUrl = '';
+
+    ngOnInit() {
+        this.historyUrl = `/html/templates/permissions.jsp?templateId=7acdb856-4bbc-41c5-8695-a39c2e4a913f&popup=true&in_frame=true&frame=detailFrame&container=true&angularCurrentPortlet=templates`;
+    }
+
+    ngOnChanges(): void {
+        if (this.historyIframe) {
+            this.historyIframe.iframeElement.nativeElement.contentWindow.location.reload();
+        }
+    }
+}
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-history/container-history.module.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-history/container-history.module.ts
new file mode 100644
index 000000000000..7b2529c778da
--- /dev/null
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-history/container-history.module.ts
@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { ContainerHistoryComponent } from './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: [ContainerHistoryComponent],
+    exports: [ContainerHistoryComponent],
+    imports: [CommonModule, DotPortletBoxModule, IFrameModule]
+})
+export class ContainerHistoryModule {}
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-permissions/container-permissions.component.html b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-permissions/container-permissions.component.html
new file mode 100644
index 000000000000..f84717a7881e
--- /dev/null
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-permissions/container-permissions.component.html
@@ -0,0 +1,3 @@
+<dot-portlet-box>
+    <dot-iframe data-testId="permissionsIframe" [src]="permissionsUrl"></dot-iframe>
+</dot-portlet-box>
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-permissions/container-permissions.component.scss b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-permissions/container-permissions.component.scss
new file mode 100644
index 000000000000..9146be1b2dd9
--- /dev/null
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-permissions/container-permissions.component.scss
@@ -0,0 +1,4 @@
+dot-portlet-box {
+    height: 100vh;
+    overflow: hidden;
+}
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-permissions/container-permissions.component.spec.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-permissions/container-permissions.component.spec.ts
new file mode 100644
index 000000000000..aaccf3abc151
--- /dev/null
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-permissions/container-permissions.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ContainerPermissionsComponent } from './container-permissions.component';
+
+describe('ContainerPermissionsComponent', () => {
+    let component: ContainerPermissionsComponent;
+    let fixture: ComponentFixture<ContainerPermissionsComponent>;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            declarations: [ContainerPermissionsComponent]
+        }).compileComponents();
+
+        fixture = TestBed.createComponent(ContainerPermissionsComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-permissions/container-permissions.component.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-permissions/container-permissions.component.ts
new file mode 100644
index 000000000000..039b6d0bcf89
--- /dev/null
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-permissions/container-permissions.component.ts
@@ -0,0 +1,16 @@
+import { Component, OnChanges, OnInit } from '@angular/core';
+
+@Component({
+    selector: 'dot-container-permissions',
+    templateUrl: './container-permissions.component.html',
+    styleUrls: ['./container-permissions.component.scss']
+})
+export class ContainerPermissionsComponent implements OnInit, OnChanges {
+    permissionsUrl = '';
+
+    ngOnInit() {
+        this.permissionsUrl = `/html/templates/permissions.jsp?templateId=7acdb856-4bbc-41c5-8695-a39c2e4a913f&popup=true&in_frame=true&frame=detailFrame&container=true&angularCurrentPortlet=templates`;
+    }
+
+    ngOnChanges(): void {}
+}
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-permissions/container-permissions.module.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-permissions/container-permissions.module.ts
new file mode 100644
index 000000000000..ca3efc473ede
--- /dev/null
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-permissions/container-permissions.module.ts
@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { ContainerPermissionsComponent } from './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: [ContainerPermissionsComponent],
+    exports: [ContainerPermissionsComponent],
+    imports: [CommonModule, DotPortletBoxModule, IFrameModule]
+})
+export class ContainerPermissionsModule {}

From 8479072b8a148e282b974579bcb718cb92950e6e Mon Sep 17 00:00:00 2001
From: Zulqarnain Huda <zulqarnain.huda@venturedive.com>
Date: Wed, 21 Sep 2022 10:46:00 +0500
Subject: [PATCH 07/28] refactoring

---
 .../container-permissions.component.ts                      | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-permissions/container-permissions.component.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-permissions/container-permissions.component.ts
index 039b6d0bcf89..898a5acd13b7 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-permissions/container-permissions.component.ts
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-permissions/container-permissions.component.ts
@@ -1,16 +1,14 @@
-import { Component, OnChanges, OnInit } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 
 @Component({
     selector: 'dot-container-permissions',
     templateUrl: './container-permissions.component.html',
     styleUrls: ['./container-permissions.component.scss']
 })
-export class ContainerPermissionsComponent implements OnInit, OnChanges {
+export class ContainerPermissionsComponent implements OnInit {
     permissionsUrl = '';
 
     ngOnInit() {
         this.permissionsUrl = `/html/templates/permissions.jsp?templateId=7acdb856-4bbc-41c5-8695-a39c2e4a913f&popup=true&in_frame=true&frame=detailFrame&container=true&angularCurrentPortlet=templates`;
     }
-
-    ngOnChanges(): void {}
 }

From 8958892cc0de1c00da1189383ec8538a55377e88 Mon Sep 17 00:00:00 2001
From: Zulqarnain Huda <zulqarnain.huda@venturedive.com>
Date: Thu, 22 Sep 2022 11:21:29 +0500
Subject: [PATCH 08/28] create edit route for container and resolver

---
 .../container-history.component.spec.ts       |  29 ++++-
 .../container-history.component.ts            |   3 +-
 .../container-permissions.component.spec.ts   |  29 ++++-
 .../container-permissions.component.ts        |   2 +-
 .../dot-container-create-.resolver.spec.ts    | 119 ++++++++++++++++++
 .../dot-container-create.resolver.ts          |  16 +++
 .../dot-containers-routing.module.ts          |  11 ++
 7 files changed, 202 insertions(+), 7 deletions(-)
 create mode 100644 core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/resolvers/dot-container-create-.resolver.spec.ts
 create mode 100644 core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/resolvers/dot-container-create.resolver.ts

diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-history/container-history.component.spec.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-history/container-history.component.spec.ts
index 04ad386dddf0..65b9ebdad85e 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-history/container-history.component.spec.ts
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-history/container-history.component.spec.ts
@@ -1,17 +1,31 @@
+import { Component, DebugElement, ElementRef, Input, ViewChild } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-
+import { By } from '@angular/platform-browser';
 import { ContainerHistoryComponent } from './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: ContainerHistoryComponent;
     let fixture: ComponentFixture<ContainerHistoryComponent>;
+    let de: DebugElement;
 
     beforeEach(async () => {
         await TestBed.configureTestingModule({
-            declarations: [ContainerHistoryComponent]
+            declarations: [ContainerHistoryComponent, IframeMockComponent],
+            imports: [DotPortletBoxModule]
         }).compileComponents();
 
         fixture = TestBed.createComponent(ContainerHistoryComponent);
+        de = fixture.debugElement;
         component = fixture.componentInstance;
         fixture.detectChanges();
     });
@@ -19,4 +33,15 @@ describe('ContainerHistoryComponent', () => {
     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');
+        });
+    });
 });
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-history/container-history.component.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-history/container-history.component.ts
index 1f7088aa12d8..58b63ec1b525 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-history/container-history.component.ts
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-history/container-history.component.ts
@@ -8,11 +8,10 @@ import { IframeComponent } from '@components/_common/iframe/iframe-component';
 })
 export class ContainerHistoryComponent implements OnInit, OnChanges {
     @ViewChild('historyIframe') historyIframe: IframeComponent;
-
     historyUrl = '';
 
     ngOnInit() {
-        this.historyUrl = `/html/templates/permissions.jsp?templateId=7acdb856-4bbc-41c5-8695-a39c2e4a913f&popup=true&in_frame=true&frame=detailFrame&container=true&angularCurrentPortlet=templates`;
+        this.historyUrl = `/html/containers/push_history.jsp`;
     }
 
     ngOnChanges(): void {
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-permissions/container-permissions.component.spec.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-permissions/container-permissions.component.spec.ts
index aaccf3abc151..7586ff8f26b1 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-permissions/container-permissions.component.spec.ts
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-permissions/container-permissions.component.spec.ts
@@ -1,17 +1,31 @@
+import { Component, DebugElement, ElementRef, Input, ViewChild } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-
+import { By } from '@angular/platform-browser';
 import { ContainerPermissionsComponent } from './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: ContainerPermissionsComponent;
     let fixture: ComponentFixture<ContainerPermissionsComponent>;
+    let de: DebugElement;
 
     beforeEach(async () => {
         await TestBed.configureTestingModule({
-            declarations: [ContainerPermissionsComponent]
+            declarations: [ContainerPermissionsComponent, IframeMockComponent],
+            imports: [DotPortletBoxModule]
         }).compileComponents();
 
         fixture = TestBed.createComponent(ContainerPermissionsComponent);
+        de = fixture.debugElement;
         component = fixture.componentInstance;
         fixture.detectChanges();
     });
@@ -19,4 +33,15 @@ describe('ContainerPermissionsComponent', () => {
     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');
+        });
+    });
 });
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-permissions/container-permissions.component.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-permissions/container-permissions.component.ts
index 898a5acd13b7..d57069fbd9ac 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-permissions/container-permissions.component.ts
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-permissions/container-permissions.component.ts
@@ -9,6 +9,6 @@ export class ContainerPermissionsComponent implements OnInit {
     permissionsUrl = '';
 
     ngOnInit() {
-        this.permissionsUrl = `/html/templates/permissions.jsp?templateId=7acdb856-4bbc-41c5-8695-a39c2e4a913f&popup=true&in_frame=true&frame=detailFrame&container=true&angularCurrentPortlet=templates`;
+        this.permissionsUrl = `/html/containers/permissions.jsp`;
     }
 }
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/resolvers/dot-container-create-.resolver.spec.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/resolvers/dot-container-create-.resolver.spec.ts
new file mode 100644
index 000000000000..f46a26a5b098
--- /dev/null
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/resolvers/dot-container-create-.resolver.spec.ts
@@ -0,0 +1,119 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import { TestBed } from '@angular/core/testing';
+import { DotTemplatesService } from '@services/dot-templates/dot-templates.service';
+import { of } from 'rxjs';
+import { DotContainerCreateEditResolver } from './dot-container-create.resolver';
+import { DotTemplate } from '@models/dot-edit-layout-designer';
+import { DotRouterService } from '@services/dot-router/dot-router.service';
+import { MockDotRouterService } from '@tests/dot-router-service.mock';
+
+const templateMock: DotTemplate = {
+    anonymous: false,
+    friendlyName: 'Published template',
+    identifier: '123Published',
+    inode: '1AreSD',
+    name: 'Published template',
+    type: 'type',
+    versionType: 'type',
+    deleted: false,
+    live: true,
+    layout: null,
+    canEdit: true,
+    canWrite: true,
+    canPublish: true,
+    hasLiveVersion: true,
+    working: true
+};
+
+describe('DotTemplateDesignerService', () => {
+    let service: DotContainerCreateEditResolver;
+    let templateService: DotTemplatesService;
+    let dotRouterService: DotRouterService;
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            providers: [
+                DotContainerCreateEditResolver,
+                { provide: DotRouterService, useClass: MockDotRouterService },
+                {
+                    provide: DotTemplatesService,
+                    useValue: {
+                        getById: jasmine.createSpy().and.returnValue(
+                            of({
+                                this: {
+                                    is: 'a page'
+                                }
+                            })
+                        ),
+                        getFiltered: () => {
+                            //
+                        }
+                    }
+                }
+            ]
+        });
+        service = TestBed.inject(DotContainerCreateEditResolver);
+        templateService = TestBed.inject(DotTemplatesService);
+        dotRouterService = TestBed.inject(DotRouterService);
+    });
+
+    it('should return page by id from router', (done) => {
+        service
+            .resolve(
+                {
+                    paramMap: {
+                        get(param) {
+                            return param === 'inode' ? null : 'ID';
+                        }
+                    }
+                } as any,
+                null
+            )
+            .subscribe((res) => {
+                expect(templateService.getById).toHaveBeenCalledWith('ID');
+                expect<any>(res).toEqual({ this: { is: 'a page' } });
+                done();
+            });
+    });
+
+    it('should return page by inode from router', (done) => {
+        spyOn(templateService, 'getFiltered').and.returnValue(of([templateMock]));
+        service
+            .resolve(
+                {
+                    paramMap: {
+                        get(param) {
+                            return param === 'inode' ? 'inode123' : 'ID';
+                        }
+                    }
+                } as any,
+                null
+            )
+            .subscribe((res) => {
+                expect(templateService.getFiltered).toHaveBeenCalledWith('inode123');
+                expect<any>(res).toEqual(templateMock);
+                done();
+            });
+    });
+
+    it('should go to the main portlet if inode is invalid', (done) => {
+        spyOn(templateService, 'getFiltered').and.returnValue(of([]));
+        service
+            .resolve(
+                {
+                    paramMap: {
+                        get(param) {
+                            return param === 'inode' ? 'inode123' : 'ID';
+                        }
+                    }
+                } as any,
+                null
+            )
+            .subscribe(() => {
+                expect(templateService.getFiltered).toHaveBeenCalledWith('inode123');
+                expect(dotRouterService.gotoPortlet).toHaveBeenCalledWith('templates');
+                done();
+            });
+    });
+});
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/resolvers/dot-container-create.resolver.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/resolvers/dot-container-create.resolver.ts
new file mode 100644
index 000000000000..06ab44759982
--- /dev/null
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/resolvers/dot-container-create.resolver.ts
@@ -0,0 +1,16 @@
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
+
+import { DotTemplate } from '@models/dot-edit-layout-designer';
+import { DotTemplatesService } from '@services/dot-templates/dot-templates.service';
+import { DotRouterService } from '@services/dot-router/dot-router.service';
+
+@Injectable()
+export class DotContainerCreateEditResolver implements Resolve<DotTemplate> {
+    constructor(private service: DotTemplatesService, private dotRouterService: DotRouterService) {}
+
+    resolve(route: ActivatedRouteSnapshot, _state: RouterStateSnapshot): Observable<DotTemplate> {
+        return this.service.getById(route.paramMap.get('id'));
+    }
+}
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-containers-routing.module.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-containers-routing.module.ts
index 226a269fb74f..0ded8120b40b 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-containers-routing.module.ts
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-containers-routing.module.ts
@@ -1,5 +1,6 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { DotContainerCreateEditResolver } from './container-create/resolvers/dot-container-create.resolver';
 
 const routes: Routes = [
     {
@@ -13,6 +14,16 @@ const routes: Routes = [
             import('./container-create/container-create.module').then(
                 (m) => m.ContainerCreateModule
             )
+    },
+    {
+        path: 'edit/:id',
+        loadChildren: () =>
+            import('./container-create/container-create.module').then(
+                (m) => m.ContainerCreateModule
+            ),
+        resolve: {
+            container: DotContainerCreateEditResolver
+        }
     }
 ];
 

From 57ce5420be352414eeb4c2fab88d972baa255325 Mon Sep 17 00:00:00 2001
From: Motasim Hussain <motasim.hussain@venturedive.com>
Date: Mon, 26 Sep 2022 18:57:36 +0500
Subject: [PATCH 09/28] Added controls to container form

---
 .../container-create.component.scss           |   2 +-
 .../dot-container-properties.component.html   | 118 +++++++++++++-----
 .../dot-container-properties.component.scss   |  34 ++++-
 .../dot-container-properties.component.ts     |  20 ++-
 .../dot-container-properties.module.ts        |   6 +-
 .../store/dot-container-properties.store.ts   |  50 ++++++++
 6 files changed, 190 insertions(+), 40 deletions(-)
 create mode 100644 core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/store/dot-container-properties.store.ts

diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-create.component.scss b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-create.component.scss
index e708fa70ecd6..4cb49ce68905 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-create.component.scss
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-create.component.scss
@@ -4,7 +4,7 @@
     .container-create__tab-container {
         display: flex;
         flex-direction: column;
-        overflow: hidden;
+        overflow: auto;
 
         .container-create__tabs {
             .p-tabview-panels {
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.component.html b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.component.html
index 7c1b08590d18..cacad2418b51 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.component.html
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.component.html
@@ -1,4 +1,4 @@
-<ng-container>
+<ng-container *ngIf="vm$ | async as vm">
     <div class="dot-container-properties__title-container">
         <p-inplace #editText>
             <ng-template pTemplate="content">
@@ -25,38 +25,92 @@
     </div>
 
     <div class="dot-container-properties__code-container-outer">
-        <div class="dot-container-properties__pre-post-loop">
-            <div class="dot-container-properties__pre-post-loop-inplace">
-                <button
-                    pButton
-                    class="p-button-outlined p-button-secondary"
-                    type="button"
-                    label="ADD PRE AND POST LOOP CODE"
-                ></button>
+        <form [formGroup]="form">
+            <div class="dot-container-properties__pre-post-loop">
+                <div
+                    class="dot-container-properties__pre-post-loop-inplace"
+                    *ngIf="!vm.showPrePostLoopInput"
+                >
+                    <button
+                        pButton
+                        class="p-button-outlined p-button-secondary"
+                        type="button"
+                        label="ADD PRE AND POST LOOP CODE"
+                        (click)="showLoopInput()"
+                    ></button>
+                </div>
+                <div *ngIf="vm.showPrePostLoopInput">
+                    <label>Pre-loop</label>
+                    <dot-textarea-content
+                        formControlName="body"
+                        #value
+                        height="100%"
+                        formControlName="body"
+                        [show]="['code']"
+                        language="html"
+                        (monacoInit)="initEditor($event)"
+                    ></dot-textarea-content>
+                </div>
             </div>
-        </div>
-        <div>
-            <form [formGroup]="form">
-                <dot-textarea-content
-                    formControlName="body"
-                    #value
-                    height="100%"
-                    formControlName="body"
-                    [show]="['code']"
-                    language="html"
-                    (monacoInit)="initEditor($event)"
-                ></dot-textarea-content>
-            </form>
-        </div>
-        <div class="dot-container-properties__pre-post-loop">
-            <div class="dot-container-properties__pre-post-loop-inplace">
-                <button
-                    pButton
-                    class="p-button-outlined p-button-secondary"
-                    type="button"
-                    label="ADD PRE AND POST LOOP CODE"
-                ></button>
+            <div class="dot-container-properties__content-tab-container">
+                <label>Content Type and Code</label>
+                <p-tabView
+                    [scrollable]="true"
+                    (onChange)="handleChange($event)"
+                    [activeIndex]="vm.activeTabIndex"
+                >
+                    <p-tabPanel headerStyleClass="tab-panel-btn">
+                        <ng-template pTemplate="header">
+                            <i
+                                class="pi pi-plus"
+                                (click)="handleChange($event); actionsMenu.toggle($event)"
+                            ></i>
+                            <p-menu
+                                #actionsMenu
+                                [popup]="true"
+                                [model]="vm.contentTypes"
+                                appendTo="body"
+                            ></p-menu>
+                        </ng-template>
+                    </p-tabPanel>
+                    <p-tabPanel closable="true" header="Content (Generic)">
+                        <dot-textarea-content
+                            formControlName="body"
+                            #value
+                            height="100%"
+                            formControlName="body"
+                            [show]="['code']"
+                            language="html"
+                            (monacoInit)="initEditor($event)"
+                        ></dot-textarea-content>
+                    </p-tabPanel>
+                </p-tabView>
             </div>
-        </div>
+            <div class="dot-container-properties__pre-post-loop">
+                <div
+                    class="dot-container-properties__pre-post-loop-inplace"
+                    *ngIf="!vm.showPrePostLoopInput"
+                >
+                    <button
+                        pButton
+                        class="p-button-outlined p-button-secondary"
+                        type="button"
+                        label="ADD PRE AND POST LOOP CODE"
+                    ></button>
+                </div>
+                <div *ngIf="vm.showPrePostLoopInput">
+                    <label>Post-loop</label>
+                    <dot-textarea-content
+                        formControlName="body"
+                        #value
+                        height="100%"
+                        formControlName="body"
+                        [show]="['code']"
+                        language="html"
+                        (monacoInit)="initEditor($event)"
+                    ></dot-textarea-content>
+                </div>
+            </div>
+        </form>
     </div>
 </ng-container>
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.component.scss b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.component.scss
index e9e514d449b4..70f95e6ec272 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.component.scss
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.component.scss
@@ -1,6 +1,6 @@
 @use "variables" as *;
 
-:host {
+:host ::ng-deep {
     .dot-container-properties__title-container {
         padding: $spacing-4 0;
     }
@@ -19,13 +19,39 @@
                 padding: $spacing-6;
                 background: #e9ebfc;
             }
+
+            dot-textarea-content {
+                height: 20vh !important;
+            }
         }
 
         form {
             margin: $spacing-3;
-            height: 100%;
-            display: flex;
-            flex-direction: column;
         }
+        dot-textarea-content {
+            height: 40vh !important;
+        }
+    }
+
+    .tab-panel-btn {
+        background: #1b3359;
+
+        a {
+            padding: 0 !important;
+        }
+
+        i {
+            color: $white;
+            padding: 1.2rem 2.5rem 1.35rem;
+        }
+    }
+
+    .p-tabview-panel {
+        padding: 0 !important;
+        padding-top: 1.5rem !important;
+    }
+
+    .dot-container-properties__content-tab-container {
+        padding: $spacing-4 0;
     }
 }
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.component.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.component.ts
index d930f4186c2a..058bf01c994b 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.component.ts
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.component.ts
@@ -1,5 +1,6 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
+import { DotContainerPropertiesStore } from '@portlets/dot-containers/container-create/dot-container-properties/store/dot-container-properties.store';
 
 interface MonacoEditorOperation {
     range: number;
@@ -15,15 +16,17 @@ interface MonacoEditor {
 @Component({
     selector: 'dot-container-properties',
     templateUrl: './dot-container-properties.component.html',
-    styleUrls: ['./dot-container-properties.component.scss']
+    styleUrls: ['./dot-container-properties.component.scss'],
+    providers: [DotContainerPropertiesStore]
 })
 export class DotContainerPropertiesComponent implements OnInit {
+    vm$ = this.store.vm$;
     editor: MonacoEditor;
     form: UntypedFormGroup;
 
     @Input() body: string;
 
-    constructor(private fb: UntypedFormBuilder) {
+    constructor(private store: DotContainerPropertiesStore, private fb: UntypedFormBuilder) {
         //
     }
 
@@ -40,4 +43,17 @@ export class DotContainerPropertiesComponent implements OnInit {
     initEditor(editor: MonacoEditor): void {
         this.editor = editor;
     }
+
+    showLoopInput(): void {
+        this.store.updatePrePostLoopInputVisibility(true);
+    }
+
+    handleChange(e): boolean {
+        if (typeof e.index === 'undefined') {
+            e.preventDefault();
+            e.stopPropagation();
+        }
+
+        return false;
+    }
 }
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.module.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.module.ts
index f7a52e43c9ba..49062c6fc66c 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.module.ts
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.module.ts
@@ -8,6 +8,8 @@ import { DotPortletBaseModule } from '@components/dot-portlet-base/dot-portlet-b
 import { CardModule } from 'primeng/card';
 import { DotTextareaContentModule } from '@components/_common/dot-textarea-content/dot-textarea-content.module';
 import { ReactiveFormsModule } from '@angular/forms';
+import { TabViewModule } from 'primeng/tabview';
+import { MenuModule } from 'primeng/menu';
 @NgModule({
     declarations: [DotContainerPropertiesComponent],
     exports: [DotContainerPropertiesComponent],
@@ -19,7 +21,9 @@ import { ReactiveFormsModule } from '@angular/forms';
         DotPortletBaseModule,
         CardModule,
         DotTextareaContentModule,
-        ReactiveFormsModule
+        ReactiveFormsModule,
+        TabViewModule,
+        MenuModule
     ]
 })
 export class DotContainerPropertiesModule {}
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/store/dot-container-properties.store.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/store/dot-container-properties.store.ts
new file mode 100644
index 000000000000..f4263e7bd724
--- /dev/null
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/store/dot-container-properties.store.ts
@@ -0,0 +1,50 @@
+import { Injectable } from '@angular/core';
+import { ComponentStore } from '@ngrx/component-store';
+import { take } from 'rxjs/operators';
+import { StructureTypeView } from '@models/contentlet';
+import { DotContentTypeService } from '@services/dot-content-type';
+import { zip } from 'rxjs';
+
+export interface DotContainerPropertiesState {
+    activeTabIndex: number;
+    contentTypes: StructureTypeView[];
+    showPrePostLoopInput: boolean;
+}
+
+@Injectable()
+export class DotContainerPropertiesStore extends ComponentStore<DotContainerPropertiesState> {
+    constructor(private dotContentTypeService: DotContentTypeService) {
+        super();
+
+        const contentTypes$ = this.dotContentTypeService.getAllContentTypes();
+
+        zip(contentTypes$)
+            .pipe(take(1))
+            .subscribe(([contentTypes]) => {
+                this.setState({
+                    activeTabIndex: 1,
+                    contentTypes: contentTypes,
+                    showPrePostLoopInput: false
+                });
+            });
+    }
+
+    readonly vm$ = this.select(
+        ({ activeTabIndex, contentTypes, showPrePostLoopInput }: DotContainerPropertiesState) => {
+            return {
+                activeTabIndex,
+                contentTypes,
+                showPrePostLoopInput
+            };
+        }
+    );
+
+    readonly updatePrePostLoopInputVisibility = this.updater<boolean>(
+        (state: DotContainerPropertiesState, showPrePostLoopInput: boolean) => {
+            return {
+                ...state,
+                showPrePostLoopInput
+            };
+        }
+    );
+}

From 34b3f69393a9a35b2ef5110afc0efd42e7b792eb Mon Sep 17 00:00:00 2001
From: Zulqarnain Huda <zulqarnain.huda@venturedive.com>
Date: Tue, 27 Sep 2022 17:50:33 +0500
Subject: [PATCH 10/28] change component and folders name

---
 .../container-create/container-create.module.ts        |  8 ++++----
 .../dot-container-history.component.html}              |  0
 .../dot-container-history.component.scss}              |  0
 .../dot-container-history.component.spec.ts}           | 10 +++++-----
 .../dot-container-history.component.ts}                |  6 +++---
 .../dot-container-history.module.ts}                   |  8 ++++----
 .../dot-container-permissions.component.html}          |  0
 .../dot-container-permissions.component.scss}          |  0
 .../dot-container-permissions.component.spec.ts}       | 10 +++++-----
 .../dot-container-permissions.component.ts}            |  6 +++---
 .../dot-container-permissions.module.ts}               |  8 ++++----
 ...r.spec.ts => dot-container-create.resolver.spec.ts} |  0
 12 files changed, 28 insertions(+), 28 deletions(-)
 rename core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/{container-history/container-history.component.html => dot-container-history/dot-container-history.component.html} (100%)
 rename core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/{container-history/container-history.component.scss => dot-container-history/dot-container-history.component.scss} (100%)
 rename core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/{container-history/container-history.component.spec.ts => dot-container-history/dot-container-history.component.spec.ts} (79%)
 rename core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/{container-history/container-history.component.ts => dot-container-history/dot-container-history.component.ts} (74%)
 rename core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/{container-history/container-history.module.ts => dot-container-history/dot-container-history.module.ts} (61%)
 rename core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/{container-permissions/container-permissions.component.html => dot-container-permissions/dot-container-permissions.component.html} (100%)
 rename core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/{container-permissions/container-permissions.component.scss => dot-container-permissions/dot-container-permissions.component.scss} (100%)
 rename core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/{container-permissions/container-permissions.component.spec.ts => dot-container-permissions/dot-container-permissions.component.spec.ts} (77%)
 rename core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/{container-permissions/container-permissions.component.ts => dot-container-permissions/dot-container-permissions.component.ts} (54%)
 rename core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/{container-permissions/container-permissions.module.ts => dot-container-permissions/dot-container-permissions.module.ts} (59%)
 rename core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/resolvers/{dot-container-create-.resolver.spec.ts => dot-container-create.resolver.spec.ts} (100%)

diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-create.module.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-create.module.ts
index 0bc196e97d0d..4235b13ada34 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-create.module.ts
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-create.module.ts
@@ -7,8 +7,8 @@ import { DotPortletBaseModule } from '@components/dot-portlet-base/dot-portlet-b
 import { TabViewModule } from 'primeng/tabview';
 import { DotMessagePipeModule } from '@pipes/dot-message/dot-message-pipe.module';
 import { DotContainerPropertiesModule } from '@portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.module';
-import { ContainerPermissionsModule } from '@dotcms/app/portlets/dot-containers/container-create/container-permissions/container-permissions.module';
-import { ContainerHistoryModule } from '@dotcms/app/portlets/dot-containers/container-create/container-history/container-history.module';
+import { DotContainerPermissionsModule } from '@dotcms/app/portlets/dot-containers/container-create/dot-container-permissions/dot-container-permissions.module';
+import { DotContainerHistoryModule } from '@dotcms/app/portlets/dot-containers/container-create/dot-container-history/dot-container-history.module';
 
 @NgModule({
     declarations: [ContainerCreateComponent],
@@ -20,8 +20,8 @@ import { ContainerHistoryModule } from '@dotcms/app/portlets/dot-containers/cont
         DotMessagePipeModule,
         DotContainerPropertiesModule,
         DotMessagePipeModule,
-        ContainerPermissionsModule,
-        ContainerHistoryModule
+        DotContainerPermissionsModule,
+        DotContainerHistoryModule
     ]
 })
 export class ContainerCreateModule {}
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-history/container-history.component.html b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-history/dot-container-history.component.html
similarity index 100%
rename from core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-history/container-history.component.html
rename to core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-history/dot-container-history.component.html
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-history/container-history.component.scss b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-history/dot-container-history.component.scss
similarity index 100%
rename from core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-history/container-history.component.scss
rename to core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-history/dot-container-history.component.scss
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-history/container-history.component.spec.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-history/dot-container-history.component.spec.ts
similarity index 79%
rename from core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-history/container-history.component.spec.ts
rename to core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-history/dot-container-history.component.spec.ts
index 65b9ebdad85e..91518dadd164 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-history/container-history.component.spec.ts
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-history/dot-container-history.component.spec.ts
@@ -1,7 +1,7 @@
 import { Component, DebugElement, ElementRef, Input, ViewChild } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import { ContainerHistoryComponent } from './container-history.component';
+import { DotContainerHistoryComponent } from './container-history.component';
 import { DotPortletBoxModule } from '@components/dot-portlet-base/components/dot-portlet-box/dot-portlet-box.module';
 
 @Component({
@@ -14,17 +14,17 @@ export class IframeMockComponent {
 }
 
 describe('ContainerHistoryComponent', () => {
-    let component: ContainerHistoryComponent;
-    let fixture: ComponentFixture<ContainerHistoryComponent>;
+    let component: DotContainerHistoryComponent;
+    let fixture: ComponentFixture<DotContainerHistoryComponent>;
     let de: DebugElement;
 
     beforeEach(async () => {
         await TestBed.configureTestingModule({
-            declarations: [ContainerHistoryComponent, IframeMockComponent],
+            declarations: [DotContainerHistoryComponent, IframeMockComponent],
             imports: [DotPortletBoxModule]
         }).compileComponents();
 
-        fixture = TestBed.createComponent(ContainerHistoryComponent);
+        fixture = TestBed.createComponent(DotContainerHistoryComponent);
         de = fixture.debugElement;
         component = fixture.componentInstance;
         fixture.detectChanges();
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-history/container-history.component.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-history/dot-container-history.component.ts
similarity index 74%
rename from core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-history/container-history.component.ts
rename to core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-history/dot-container-history.component.ts
index 58b63ec1b525..46e177179c8d 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-history/container-history.component.ts
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-history/dot-container-history.component.ts
@@ -3,10 +3,10 @@ import { IframeComponent } from '@components/_common/iframe/iframe-component';
 
 @Component({
     selector: 'dot-container-history',
-    templateUrl: './container-history.component.html',
-    styleUrls: ['./container-history.component.scss']
+    templateUrl: './dot-container-history.component.html',
+    styleUrls: ['./dot-container-history.component.scss']
 })
-export class ContainerHistoryComponent implements OnInit, OnChanges {
+export class DotContainerHistoryComponent implements OnInit, OnChanges {
     @ViewChild('historyIframe') historyIframe: IframeComponent;
     historyUrl = '';
 
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-history/container-history.module.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-history/dot-container-history.module.ts
similarity index 61%
rename from core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-history/container-history.module.ts
rename to core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-history/dot-container-history.module.ts
index 7b2529c778da..87a1af3ab377 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-history/container-history.module.ts
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-history/dot-container-history.module.ts
@@ -1,13 +1,13 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
-import { ContainerHistoryComponent } from './container-history.component';
+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: [ContainerHistoryComponent],
-    exports: [ContainerHistoryComponent],
+    declarations: [DotContainerHistoryComponent],
+    exports: [DotContainerHistoryComponent],
     imports: [CommonModule, DotPortletBoxModule, IFrameModule]
 })
-export class ContainerHistoryModule {}
+export class DotContainerHistoryModule {}
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-permissions/container-permissions.component.html b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-permissions/dot-container-permissions.component.html
similarity index 100%
rename from core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-permissions/container-permissions.component.html
rename to core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-permissions/dot-container-permissions.component.html
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-permissions/container-permissions.component.scss b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-permissions/dot-container-permissions.component.scss
similarity index 100%
rename from core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-permissions/container-permissions.component.scss
rename to core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-permissions/dot-container-permissions.component.scss
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-permissions/container-permissions.component.spec.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-permissions/dot-container-permissions.component.spec.ts
similarity index 77%
rename from core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-permissions/container-permissions.component.spec.ts
rename to core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-permissions/dot-container-permissions.component.spec.ts
index 7586ff8f26b1..f3f513a12745 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-permissions/container-permissions.component.spec.ts
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-permissions/dot-container-permissions.component.spec.ts
@@ -1,7 +1,7 @@
 import { Component, DebugElement, ElementRef, Input, ViewChild } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import { ContainerPermissionsComponent } from './container-permissions.component';
+import { DotContainerPermissionsComponent } from './dot-container-permissions.component';
 import { DotPortletBoxModule } from '@components/dot-portlet-base/components/dot-portlet-box/dot-portlet-box.module';
 
 @Component({
@@ -14,17 +14,17 @@ export class IframeMockComponent {
 }
 
 describe('ContainerPermissionsComponent', () => {
-    let component: ContainerPermissionsComponent;
-    let fixture: ComponentFixture<ContainerPermissionsComponent>;
+    let component: DotContainerPermissionsComponent;
+    let fixture: ComponentFixture<DotContainerPermissionsComponent>;
     let de: DebugElement;
 
     beforeEach(async () => {
         await TestBed.configureTestingModule({
-            declarations: [ContainerPermissionsComponent, IframeMockComponent],
+            declarations: [DotContainerPermissionsComponent, IframeMockComponent],
             imports: [DotPortletBoxModule]
         }).compileComponents();
 
-        fixture = TestBed.createComponent(ContainerPermissionsComponent);
+        fixture = TestBed.createComponent(DotContainerPermissionsComponent);
         de = fixture.debugElement;
         component = fixture.componentInstance;
         fixture.detectChanges();
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-permissions/container-permissions.component.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-permissions/dot-container-permissions.component.ts
similarity index 54%
rename from core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-permissions/container-permissions.component.ts
rename to core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-permissions/dot-container-permissions.component.ts
index d57069fbd9ac..1e087fc5bb94 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-permissions/container-permissions.component.ts
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-permissions/dot-container-permissions.component.ts
@@ -2,10 +2,10 @@ import { Component, OnInit } from '@angular/core';
 
 @Component({
     selector: 'dot-container-permissions',
-    templateUrl: './container-permissions.component.html',
-    styleUrls: ['./container-permissions.component.scss']
+    templateUrl: './dot-container-permissions.component.html',
+    styleUrls: ['./dot-container-permissions.component.scss']
 })
-export class ContainerPermissionsComponent implements OnInit {
+export class DotContainerPermissionsComponent implements OnInit {
     permissionsUrl = '';
 
     ngOnInit() {
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-permissions/container-permissions.module.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-permissions/dot-container-permissions.module.ts
similarity index 59%
rename from core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-permissions/container-permissions.module.ts
rename to core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-permissions/dot-container-permissions.module.ts
index ca3efc473ede..2663853b84aa 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-permissions/container-permissions.module.ts
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-permissions/dot-container-permissions.module.ts
@@ -1,13 +1,13 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
-import { ContainerPermissionsComponent } from './container-permissions.component';
+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: [ContainerPermissionsComponent],
-    exports: [ContainerPermissionsComponent],
+    declarations: [DotContainerPermissionsComponent],
+    exports: [DotContainerPermissionsComponent],
     imports: [CommonModule, DotPortletBoxModule, IFrameModule]
 })
-export class ContainerPermissionsModule {}
+export class DotContainerPermissionsModule {}
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/resolvers/dot-container-create-.resolver.spec.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/resolvers/dot-container-create.resolver.spec.ts
similarity index 100%
rename from core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/resolvers/dot-container-create-.resolver.spec.ts
rename to core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/resolvers/dot-container-create.resolver.spec.ts

From 2e69e8deb2494f70003a3ac8f130e5cbcad6b265 Mon Sep 17 00:00:00 2001
From: Motasim Hussain <motasim.hussain@venturedive.com>
Date: Thu, 29 Sep 2022 14:29:31 +0500
Subject: [PATCH 11/28] Added method docs, Added translations, Minor fixes

---
 .../container-create.module.ts                |  1 -
 .../dot-container-properties.component.html   | 33 +++++++++++++------
 .../dot-container-properties.component.ts     | 22 ++++++++++---
 .../dot-container-properties.module.ts        |  4 ++-
 .../dot-container-create.resolver.ts          |  3 +-
 .../WEB-INF/messages/Language.properties      |  8 +++++
 6 files changed, 53 insertions(+), 18 deletions(-)

diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-create.module.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-create.module.ts
index 4235b13ada34..f905efffadc5 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-create.module.ts
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-create.module.ts
@@ -19,7 +19,6 @@ import { DotContainerHistoryModule } from '@dotcms/app/portlets/dot-containers/c
         TabViewModule,
         DotMessagePipeModule,
         DotContainerPropertiesModule,
-        DotMessagePipeModule,
         DotContainerPermissionsModule,
         DotContainerHistoryModule
     ]
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.component.html b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.component.html
index cacad2418b51..5655528205c9 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.component.html
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.component.html
@@ -8,20 +8,33 @@
                 </span>
             </ng-template>
             <ng-template pTemplate="display">
-                Click to Edit
+                {{ 'message.containers.create.click_to_edit' | dm }}
                 <i class="pi pi-pencil"></i>
             </ng-template>
         </p-inplace>
     </div>
     <div class="field">
-        <label for="description" class="block">Description</label>
+        <label for="description" class="block">{{
+            'message.containers.create.description' | dm
+        }}</label>
         <input id="description" type="text" pInputText />
     </div>
     <div class="field">
-        <label for="max-contents" class="block">Max Contents</label>
+        <label for="max-contents" class="block">{{
+            'message.containers.create.max_contents' | dm
+        }}</label>
         <input id="max-contents" type="text" pInputText />
-        <button pButton class="p-button-secondary" type="button" label="Clear"></button>
-        <button pButton type="button" label="content type code"></button>
+        <button
+            pButton
+            class="p-button-secondary"
+            type="button"
+            [label]="'message.containers.create.clear' | dm"
+        ></button>
+        <button
+            pButton
+            type="button"
+            [label]="'message.containers.create.content_type_code' | dm"
+        ></button>
     </div>
 
     <div class="dot-container-properties__code-container-outer">
@@ -35,12 +48,12 @@
                         pButton
                         class="p-button-outlined p-button-secondary"
                         type="button"
-                        label="ADD PRE AND POST LOOP CODE"
+                        [label]="'message.containers.create.add_pre_post' | dm"
                         (click)="showLoopInput()"
                     ></button>
                 </div>
                 <div *ngIf="vm.showPrePostLoopInput">
-                    <label>Pre-loop</label>
+                    <label>{{ 'message.containers.create.pre_loop' | dm }}</label>
                     <dot-textarea-content
                         formControlName="body"
                         #value
@@ -53,10 +66,10 @@
                 </div>
             </div>
             <div class="dot-container-properties__content-tab-container">
-                <label>Content Type and Code</label>
+                <label>{{ 'message.containers.create.content_type_code' | dm }}</label>
                 <p-tabView
                     [scrollable]="true"
-                    (onChange)="handleChange($event)"
+                    (onChange)="handleChange($event, $event.index)"
                     [activeIndex]="vm.activeTabIndex"
                 >
                     <p-tabPanel headerStyleClass="tab-panel-btn">
@@ -95,7 +108,7 @@
                         pButton
                         class="p-button-outlined p-button-secondary"
                         type="button"
-                        label="ADD PRE AND POST LOOP CODE"
+                        [label]="'message.containers.create.add_pre_post' | dm"
                     ></button>
                 </div>
                 <div *ngIf="vm.showPrePostLoopInput">
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.component.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.component.ts
index 058bf01c994b..00944be759fd 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.component.ts
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.component.ts
@@ -37,19 +37,33 @@ export class DotContainerPropertiesComponent implements OnInit {
     /**
      * This method initializes the monaco editor
      *
-     * @param {*} editor
-     * @memberof DotTemplateComponent
+     * @param {MonacoEditor} editor
+     * @memberof DotContainerPropertiesComponent
      */
     initEditor(editor: MonacoEditor): void {
         this.editor = editor;
     }
 
+    /**
+     * This method shows the Pre- and Post-Loop Inputs
+     *
+     * @return void
+     * @memberof DotContainerPropertiesComponent
+     */
     showLoopInput(): void {
         this.store.updatePrePostLoopInputVisibility(true);
     }
 
-    handleChange(e): boolean {
-        if (typeof e.index === 'undefined') {
+    /**
+     * Method to stop propogation of Tab click event
+     *
+     * @param e {MouseEvent}
+     * @param index {number}
+     * @return boolean
+     * @memberof DotContainerPropertiesComponent
+     */
+    handleChange(e: MouseEvent, index: number = null): boolean {
+        if (index === null) {
             e.preventDefault();
             e.stopPropagation();
         }
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.module.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.module.ts
index 49062c6fc66c..23fbb7bf278c 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.module.ts
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.module.ts
@@ -10,6 +10,7 @@ import { DotTextareaContentModule } from '@components/_common/dot-textarea-conte
 import { ReactiveFormsModule } from '@angular/forms';
 import { TabViewModule } from 'primeng/tabview';
 import { MenuModule } from 'primeng/menu';
+import { DotMessagePipeModule } from '@pipes/dot-message/dot-message-pipe.module';
 @NgModule({
     declarations: [DotContainerPropertiesComponent],
     exports: [DotContainerPropertiesComponent],
@@ -23,7 +24,8 @@ import { MenuModule } from 'primeng/menu';
         DotTextareaContentModule,
         ReactiveFormsModule,
         TabViewModule,
-        MenuModule
+        MenuModule,
+        DotMessagePipeModule
     ]
 })
 export class DotContainerPropertiesModule {}
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/resolvers/dot-container-create.resolver.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/resolvers/dot-container-create.resolver.ts
index 06ab44759982..aee40b117c7a 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/resolvers/dot-container-create.resolver.ts
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/resolvers/dot-container-create.resolver.ts
@@ -4,11 +4,10 @@ import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/r
 
 import { DotTemplate } from '@models/dot-edit-layout-designer';
 import { DotTemplatesService } from '@services/dot-templates/dot-templates.service';
-import { DotRouterService } from '@services/dot-router/dot-router.service';
 
 @Injectable()
 export class DotContainerCreateEditResolver implements Resolve<DotTemplate> {
-    constructor(private service: DotTemplatesService, private dotRouterService: DotRouterService) {}
+    constructor(private service: DotTemplatesService) {}
 
     resolve(route: ActivatedRouteSnapshot, _state: RouterStateSnapshot): Observable<DotTemplate> {
         return this.service.getById(route.paramMap.get('id'));
diff --git a/dotCMS/src/main/webapp/WEB-INF/messages/Language.properties b/dotCMS/src/main/webapp/WEB-INF/messages/Language.properties
index eb6c55b58370..7c9038048f19 100644
--- a/dotCMS/src/main/webapp/WEB-INF/messages/Language.properties
+++ b/dotCMS/src/main/webapp/WEB-INF/messages/Language.properties
@@ -2066,6 +2066,14 @@ message.containers.confirm.replace.version = Are you sure you want to replace th
 message.containers.confirm.spellcheck.confirm = Spelling check finished; do you want to check the next field?
 message.containers.content.type.already.added = This Content Type was already added to the Container
 message.containers.copy = Container copied
+message.containers.create.click_to_edit = Click to Edit
+message.containers.create.description = Description
+message.containers.create.max_contents = Max Contents
+message.containers.create.clear = Clear
+message.containers.create.content_type_code = Content Type Code
+message.containers.create.add_pre_post = ADD PRE AND POST LOOP CODE
+message.containers.create.pre_loop = Pre-loop
+message.containers.create.content_type_code = Content Type and Code
 message.containers.delete = Container archived
 message.containers.full_delete.error = Error deleting the Container
 message.containers.full_delete = Container deleted

From c2b395f16831f713bc38b8e3031118bfeb86b72d Mon Sep 17 00:00:00 2001
From: Motasim Hussain <motasim.hussain@venturedive.com>
Date: Thu, 29 Sep 2022 14:32:38 +0500
Subject: [PATCH 12/28] Added missing translations

---
 .../dot-container-properties.component.html                     | 2 +-
 dotCMS/src/main/webapp/WEB-INF/messages/Language.properties     | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.component.html b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.component.html
index 5655528205c9..e7d412eb2b38 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.component.html
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.component.html
@@ -112,7 +112,7 @@
                     ></button>
                 </div>
                 <div *ngIf="vm.showPrePostLoopInput">
-                    <label>Post-loop</label>
+                    <label>{{ 'message.containers.create.post_loop' | dm }}</label>
                     <dot-textarea-content
                         formControlName="body"
                         #value
diff --git a/dotCMS/src/main/webapp/WEB-INF/messages/Language.properties b/dotCMS/src/main/webapp/WEB-INF/messages/Language.properties
index 7c9038048f19..27440883ca88 100644
--- a/dotCMS/src/main/webapp/WEB-INF/messages/Language.properties
+++ b/dotCMS/src/main/webapp/WEB-INF/messages/Language.properties
@@ -2073,6 +2073,7 @@ message.containers.create.clear = Clear
 message.containers.create.content_type_code = Content Type Code
 message.containers.create.add_pre_post = ADD PRE AND POST LOOP CODE
 message.containers.create.pre_loop = Pre-loop
+message.containers.create.post_loop = Post-loop
 message.containers.create.content_type_code = Content Type and Code
 message.containers.delete = Container archived
 message.containers.full_delete.error = Error deleting the Container

From adf59d6702a89399763b4ed1d6a5dbe077192b10 Mon Sep 17 00:00:00 2001
From: Motasim Hussain <motasim.hussain@venturedive.com>
Date: Thu, 29 Sep 2022 14:51:35 +0500
Subject: [PATCH 13/28] Added MonacoEditor type model for reusability

---
 .../dot-container-properties.component.ts            | 12 +-----------
 .../src/app/shared/models/monaco-editor/index.ts     |  1 +
 .../models/monaco-editor/monaco-editor.model.ts      | 10 ++++++++++
 3 files changed, 12 insertions(+), 11 deletions(-)
 create mode 100644 core-web/apps/dotcms-ui/src/app/shared/models/monaco-editor/index.ts
 create mode 100644 core-web/apps/dotcms-ui/src/app/shared/models/monaco-editor/monaco-editor.model.ts

diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.component.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.component.ts
index 00944be759fd..6b98d0806dae 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.component.ts
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.component.ts
@@ -1,17 +1,7 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { DotContainerPropertiesStore } from '@portlets/dot-containers/container-create/dot-container-properties/store/dot-container-properties.store';
-
-interface MonacoEditorOperation {
-    range: number;
-    text: string;
-    forceMoveMarkers: boolean;
-}
-
-interface MonacoEditor {
-    getSelection: () => number;
-    executeEdits: (action: string, data: MonacoEditorOperation[]) => void;
-}
+import { MonacoEditor } from '@models/monaco-editor';
 
 @Component({
     selector: 'dot-container-properties',
diff --git a/core-web/apps/dotcms-ui/src/app/shared/models/monaco-editor/index.ts b/core-web/apps/dotcms-ui/src/app/shared/models/monaco-editor/index.ts
new file mode 100644
index 000000000000..c505af750635
--- /dev/null
+++ b/core-web/apps/dotcms-ui/src/app/shared/models/monaco-editor/index.ts
@@ -0,0 +1 @@
+export * from './monaco-editor.model';
diff --git a/core-web/apps/dotcms-ui/src/app/shared/models/monaco-editor/monaco-editor.model.ts b/core-web/apps/dotcms-ui/src/app/shared/models/monaco-editor/monaco-editor.model.ts
new file mode 100644
index 000000000000..2b2bb8fbd5a8
--- /dev/null
+++ b/core-web/apps/dotcms-ui/src/app/shared/models/monaco-editor/monaco-editor.model.ts
@@ -0,0 +1,10 @@
+export interface MonacoEditorOperation {
+    range: number;
+    text: string;
+    forceMoveMarkers: boolean;
+}
+
+export interface MonacoEditor {
+    getSelection: () => number;
+    executeEdits: (action: string, data: MonacoEditorOperation[]) => void;
+}

From 2af492971217ad8ae6c70f8f810f56b40bb8167d Mon Sep 17 00:00:00 2001
From: Motasim Hussain <motasim.hussain@venturedive.com>
Date: Thu, 29 Sep 2022 14:56:16 +0500
Subject: [PATCH 14/28] CSS refactor

---
 .../container-create.component.scss           | 28 +++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-create.component.scss b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-create.component.scss
index 4cb49ce68905..d5c65ab8acc2 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-create.component.scss
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-create.component.scss
@@ -5,22 +5,22 @@
         display: flex;
         flex-direction: column;
         overflow: auto;
+    }
 
-        .container-create__tabs {
-            .p-tabview-panels {
-                overflow: hidden;
-                flex-grow: 1;
-                flex-basis: 0;
-            }
-            .p-tabview-nav {
-                padding: 0 $spacing-4;
-                background: $white;
-            }
+    .container-create__tabs {
+        .p-tabview-panels {
+            overflow: hidden;
+            flex-grow: 1;
+            flex-basis: 0;
+        }
+        .p-tabview-nav {
+            padding: 0 $spacing-4;
+            background: $white;
+        }
 
-            .p-tabview-panel {
-                padding: 0 $spacing-4;
-                padding-top: $spacing-4;
-            }
+        .p-tabview-panel {
+            padding: 0 $spacing-4;
+            padding-top: $spacing-4;
         }
     }
 }

From 260bbb23a4dee86c413e2851f43752f7e09eeb04 Mon Sep 17 00:00:00 2001
From: Motasim Hussain <motasim.hussain@venturedive.com>
Date: Thu, 29 Sep 2022 14:58:44 +0500
Subject: [PATCH 15/28] CSS refactor

---
 .../dot-container-properties.component.scss   | 28 +++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.component.scss b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.component.scss
index 70f95e6ec272..643b33f8f5f8 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.component.scss
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.component.scss
@@ -11,20 +11,6 @@
         height: 100%;
         flex-direction: column;
 
-        .dot-container-properties__pre-post-loop {
-            .dot-container-properties__pre-post-loop-inplace {
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                padding: $spacing-6;
-                background: #e9ebfc;
-            }
-
-            dot-textarea-content {
-                height: 20vh !important;
-            }
-        }
-
         form {
             margin: $spacing-3;
         }
@@ -33,6 +19,20 @@
         }
     }
 
+    .dot-container-properties__pre-post-loop {
+        .dot-container-properties__pre-post-loop-inplace {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: $spacing-6;
+            background: #e9ebfc;
+        }
+
+        dot-textarea-content {
+            height: 20vh !important;
+        }
+    }
+
     .tab-panel-btn {
         background: #1b3359;
 

From 8b25be24219cfa61e3941b76efa6839874267872 Mon Sep 17 00:00:00 2001
From: Motasim Hussain <motasim.hussain@venturedive.com>
Date: Thu, 29 Sep 2022 19:08:42 +0500
Subject: [PATCH 16/28] Renamed container create component as
 DotContainerCreateComponent

---
 .../container-create.component.ts                |  8 --------
 .../dot-container-create-routing.module.ts}      |  6 +++---
 .../dot-container-create.component.html}         |  0
 .../dot-container-create.component.scss}         |  0
 .../dot-container-create.component.spec.ts}      | 10 +++++-----
 .../dot-container-create.component.ts            |  8 ++++++++
 .../dot-container-create.module.ts}              | 16 ++++++++--------
 .../dot-container-history.component.html         |  0
 .../dot-container-history.component.scss         |  0
 .../dot-container-history.component.spec.ts      |  0
 .../dot-container-history.component.ts           |  0
 .../dot-container-history.module.ts              |  0
 .../dot-container-permissions.component.html     |  0
 .../dot-container-permissions.component.scss     |  0
 .../dot-container-permissions.component.spec.ts  |  0
 .../dot-container-permissions.component.ts       |  0
 .../dot-container-permissions.module.ts          |  0
 .../dot-container-properties.component.html      |  0
 .../dot-container-properties.component.scss      |  0
 .../dot-container-properties.component.spec.ts   |  0
 .../dot-container-properties.component.ts        |  2 +-
 .../dot-container-properties.module.ts           |  2 +-
 .../store/dot-container-properties.store.ts      |  0
 .../dot-container-create.resolver.spec.ts        |  0
 .../resolvers/dot-container-create.resolver.ts   |  0
 .../dot-containers-routing.module.ts             | 10 +++++-----
 26 files changed, 31 insertions(+), 31 deletions(-)
 delete mode 100644 core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-create.component.ts
 rename core-web/apps/dotcms-ui/src/app/portlets/dot-containers/{container-create/container-create-routing.module.ts => dot-container-create/dot-container-create-routing.module.ts} (58%)
 rename core-web/apps/dotcms-ui/src/app/portlets/dot-containers/{container-create/container-create.component.html => dot-container-create/dot-container-create.component.html} (100%)
 rename core-web/apps/dotcms-ui/src/app/portlets/dot-containers/{container-create/container-create.component.scss => dot-container-create/dot-container-create.component.scss} (100%)
 rename core-web/apps/dotcms-ui/src/app/portlets/dot-containers/{container-create/container-create.component.spec.ts => dot-container-create/dot-container-create.component.spec.ts} (55%)
 create mode 100644 core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-create.component.ts
 rename core-web/apps/dotcms-ui/src/app/portlets/dot-containers/{container-create/container-create.module.ts => dot-container-create/dot-container-create.module.ts} (56%)
 rename core-web/apps/dotcms-ui/src/app/portlets/dot-containers/{container-create => dot-container-create}/dot-container-history/dot-container-history.component.html (100%)
 rename core-web/apps/dotcms-ui/src/app/portlets/dot-containers/{container-create => dot-container-create}/dot-container-history/dot-container-history.component.scss (100%)
 rename core-web/apps/dotcms-ui/src/app/portlets/dot-containers/{container-create => dot-container-create}/dot-container-history/dot-container-history.component.spec.ts (100%)
 rename core-web/apps/dotcms-ui/src/app/portlets/dot-containers/{container-create => dot-container-create}/dot-container-history/dot-container-history.component.ts (100%)
 rename core-web/apps/dotcms-ui/src/app/portlets/dot-containers/{container-create => dot-container-create}/dot-container-history/dot-container-history.module.ts (100%)
 rename core-web/apps/dotcms-ui/src/app/portlets/dot-containers/{container-create => dot-container-create}/dot-container-permissions/dot-container-permissions.component.html (100%)
 rename core-web/apps/dotcms-ui/src/app/portlets/dot-containers/{container-create => dot-container-create}/dot-container-permissions/dot-container-permissions.component.scss (100%)
 rename core-web/apps/dotcms-ui/src/app/portlets/dot-containers/{container-create => dot-container-create}/dot-container-permissions/dot-container-permissions.component.spec.ts (100%)
 rename core-web/apps/dotcms-ui/src/app/portlets/dot-containers/{container-create => dot-container-create}/dot-container-permissions/dot-container-permissions.component.ts (100%)
 rename core-web/apps/dotcms-ui/src/app/portlets/dot-containers/{container-create => dot-container-create}/dot-container-permissions/dot-container-permissions.module.ts (100%)
 rename core-web/apps/dotcms-ui/src/app/portlets/dot-containers/{container-create => dot-container-create}/dot-container-properties/dot-container-properties.component.html (100%)
 rename core-web/apps/dotcms-ui/src/app/portlets/dot-containers/{container-create => dot-container-create}/dot-container-properties/dot-container-properties.component.scss (100%)
 rename core-web/apps/dotcms-ui/src/app/portlets/dot-containers/{container-create => dot-container-create}/dot-container-properties/dot-container-properties.component.spec.ts (100%)
 rename core-web/apps/dotcms-ui/src/app/portlets/dot-containers/{container-create => dot-container-create}/dot-container-properties/dot-container-properties.component.ts (95%)
 rename core-web/apps/dotcms-ui/src/app/portlets/dot-containers/{container-create => dot-container-create}/dot-container-properties/dot-container-properties.module.ts (93%)
 rename core-web/apps/dotcms-ui/src/app/portlets/dot-containers/{container-create => dot-container-create}/dot-container-properties/store/dot-container-properties.store.ts (100%)
 rename core-web/apps/dotcms-ui/src/app/portlets/dot-containers/{container-create => dot-container-create}/resolvers/dot-container-create.resolver.spec.ts (100%)
 rename core-web/apps/dotcms-ui/src/app/portlets/dot-containers/{container-create => dot-container-create}/resolvers/dot-container-create.resolver.ts (100%)

diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-create.component.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-create.component.ts
deleted file mode 100644
index 2a510df5d457..000000000000
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-create.component.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-    selector: 'dot-container-create',
-    templateUrl: './container-create.component.html',
-    styleUrls: ['./container-create.component.scss']
-})
-export class ContainerCreateComponent {}
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-create-routing.module.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-create-routing.module.ts
similarity index 58%
rename from core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-create-routing.module.ts
rename to core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-create-routing.module.ts
index b61a300eb4e6..e0472cab694c 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-create-routing.module.ts
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-create-routing.module.ts
@@ -1,11 +1,11 @@
 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
     }
 ];
 
@@ -13,4 +13,4 @@ const routes: Routes = [
     imports: [RouterModule.forChild(routes)],
     exports: [RouterModule]
 })
-export class ContainerCreateRoutingModule {}
+export class DotContainerCreateRoutingModule {}
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-create.component.html b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-create.component.html
similarity index 100%
rename from core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-create.component.html
rename to core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-create.component.html
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-create.component.scss b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-create.component.scss
similarity index 100%
rename from core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-create.component.scss
rename to core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-create.component.scss
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-create.component.spec.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-create.component.spec.ts
similarity index 55%
rename from core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-create.component.spec.ts
rename to core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-create.component.spec.ts
index f8764217bff2..aec7b29732bc 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-create.component.spec.ts
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-create.component.spec.ts
@@ -1,17 +1,17 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { ContainerCreateComponent } from './container-create.component';
+import { DotContainerCreateComponent } from './dot-container-create.component';
 
 describe('ContainerCreateComponent', () => {
-    let component: ContainerCreateComponent;
-    let fixture: ComponentFixture<ContainerCreateComponent>;
+    let component: DotContainerCreateComponent;
+    let fixture: ComponentFixture<DotContainerCreateComponent>;
 
     beforeEach(async () => {
         await TestBed.configureTestingModule({
-            declarations: [ContainerCreateComponent]
+            declarations: [DotContainerCreateComponent]
         }).compileComponents();
 
-        fixture = TestBed.createComponent(ContainerCreateComponent);
+        fixture = TestBed.createComponent(DotContainerCreateComponent);
         component = fixture.componentInstance;
         fixture.detectChanges();
     });
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-create.component.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-create.component.ts
new file mode 100644
index 000000000000..d51a400ff612
--- /dev/null
+++ b/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 {}
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-create.module.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-create.module.ts
similarity index 56%
rename from core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-create.module.ts
rename to core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-create.module.ts
index f905efffadc5..e4a5abc627b4 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-create.module.ts
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-create.module.ts
@@ -1,20 +1,20 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
-import { ContainerCreateRoutingModule } from './container-create-routing.module';
-import { ContainerCreateComponent } from './container-create.component';
+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/container-create/dot-container-properties/dot-container-properties.module';
-import { DotContainerPermissionsModule } from '@dotcms/app/portlets/dot-containers/container-create/dot-container-permissions/dot-container-permissions.module';
-import { DotContainerHistoryModule } from '@dotcms/app/portlets/dot-containers/container-create/dot-container-history/dot-container-history.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: [ContainerCreateComponent],
+    declarations: [DotContainerCreateComponent],
     imports: [
         CommonModule,
-        ContainerCreateRoutingModule,
+        DotContainerCreateRoutingModule,
         DotPortletBaseModule,
         TabViewModule,
         DotMessagePipeModule,
@@ -23,4 +23,4 @@ import { DotContainerHistoryModule } from '@dotcms/app/portlets/dot-containers/c
         DotContainerHistoryModule
     ]
 })
-export class ContainerCreateModule {}
+export class DotContainerCreateModule {}
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-history/dot-container-history.component.html b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-history/dot-container-history.component.html
similarity index 100%
rename from core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-history/dot-container-history.component.html
rename to core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-history/dot-container-history.component.html
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-history/dot-container-history.component.scss b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-history/dot-container-history.component.scss
similarity index 100%
rename from core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-history/dot-container-history.component.scss
rename to core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-history/dot-container-history.component.scss
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-history/dot-container-history.component.spec.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-history/dot-container-history.component.spec.ts
similarity index 100%
rename from core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-history/dot-container-history.component.spec.ts
rename to core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-history/dot-container-history.component.spec.ts
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-history/dot-container-history.component.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-history/dot-container-history.component.ts
similarity index 100%
rename from core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-history/dot-container-history.component.ts
rename to core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-history/dot-container-history.component.ts
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-history/dot-container-history.module.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-history/dot-container-history.module.ts
similarity index 100%
rename from core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-history/dot-container-history.module.ts
rename to core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-history/dot-container-history.module.ts
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-permissions/dot-container-permissions.component.html b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-permissions/dot-container-permissions.component.html
similarity index 100%
rename from core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-permissions/dot-container-permissions.component.html
rename to core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-permissions/dot-container-permissions.component.html
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-permissions/dot-container-permissions.component.scss b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-permissions/dot-container-permissions.component.scss
similarity index 100%
rename from core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-permissions/dot-container-permissions.component.scss
rename to core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-permissions/dot-container-permissions.component.scss
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-permissions/dot-container-permissions.component.spec.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-permissions/dot-container-permissions.component.spec.ts
similarity index 100%
rename from core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-permissions/dot-container-permissions.component.spec.ts
rename to core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-permissions/dot-container-permissions.component.spec.ts
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-permissions/dot-container-permissions.component.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-permissions/dot-container-permissions.component.ts
similarity index 100%
rename from core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-permissions/dot-container-permissions.component.ts
rename to core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-permissions/dot-container-permissions.component.ts
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-permissions/dot-container-permissions.module.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-permissions/dot-container-permissions.module.ts
similarity index 100%
rename from core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-permissions/dot-container-permissions.module.ts
rename to core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-permissions/dot-container-permissions.module.ts
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.component.html b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-properties/dot-container-properties.component.html
similarity index 100%
rename from core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.component.html
rename to core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-properties/dot-container-properties.component.html
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.component.scss b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-properties/dot-container-properties.component.scss
similarity index 100%
rename from core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.component.scss
rename to core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-properties/dot-container-properties.component.scss
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.component.spec.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-properties/dot-container-properties.component.spec.ts
similarity index 100%
rename from core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.component.spec.ts
rename to core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-properties/dot-container-properties.component.spec.ts
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.component.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-properties/dot-container-properties.component.ts
similarity index 95%
rename from core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.component.ts
rename to core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-properties/dot-container-properties.component.ts
index 6b98d0806dae..3144238848e8 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.component.ts
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-properties/dot-container-properties.component.ts
@@ -1,6 +1,6 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
-import { DotContainerPropertiesStore } from '@portlets/dot-containers/container-create/dot-container-properties/store/dot-container-properties.store';
+import { DotContainerPropertiesStore } from '@portlets/dot-containers/dot-container-create/dot-container-properties/store/dot-container-properties.store';
 import { MonacoEditor } from '@models/monaco-editor';
 
 @Component({
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.module.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-properties/dot-container-properties.module.ts
similarity index 93%
rename from core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.module.ts
rename to core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-properties/dot-container-properties.module.ts
index 23fbb7bf278c..b3f635b2527b 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.module.ts
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-properties/dot-container-properties.module.ts
@@ -1,5 +1,5 @@
 import { NgModule } from '@angular/core';
-import { DotContainerPropertiesComponent } from '@portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.component';
+import { DotContainerPropertiesComponent } from '@portlets/dot-containers/dot-container-create/dot-container-properties/dot-container-properties.component';
 import { CommonModule } from '@angular/common';
 import { InplaceModule } from 'primeng/inplace';
 import { SharedModule } from 'primeng/api';
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/store/dot-container-properties.store.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-properties/store/dot-container-properties.store.ts
similarity index 100%
rename from core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/store/dot-container-properties.store.ts
rename to core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-properties/store/dot-container-properties.store.ts
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/resolvers/dot-container-create.resolver.spec.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/resolvers/dot-container-create.resolver.spec.ts
similarity index 100%
rename from core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/resolvers/dot-container-create.resolver.spec.ts
rename to core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/resolvers/dot-container-create.resolver.spec.ts
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/resolvers/dot-container-create.resolver.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/resolvers/dot-container-create.resolver.ts
similarity index 100%
rename from core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/resolvers/dot-container-create.resolver.ts
rename to core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/resolvers/dot-container-create.resolver.ts
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-containers-routing.module.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-containers-routing.module.ts
index 0ded8120b40b..0cd8794e6c2e 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-containers-routing.module.ts
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-containers-routing.module.ts
@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import { DotContainerCreateEditResolver } from './container-create/resolvers/dot-container-create.resolver';
+import { DotContainerCreateEditResolver } from './dot-container-create/resolvers/dot-container-create.resolver';
 
 const routes: Routes = [
     {
@@ -11,15 +11,15 @@ const routes: Routes = [
     {
         path: 'create',
         loadChildren: () =>
-            import('./container-create/container-create.module').then(
-                (m) => m.ContainerCreateModule
+            import('./dot-container-create/dot-container-create.module').then(
+                (m) => m.DotContainerCreateModule
             )
     },
     {
         path: 'edit/:id',
         loadChildren: () =>
-            import('./container-create/container-create.module').then(
-                (m) => m.ContainerCreateModule
+            import('./dot-container-create/dot-container-create.module').then(
+                (m) => m.DotContainerCreateModule
             ),
         resolve: {
             container: DotContainerCreateEditResolver

From 45bafe722f475e7bb5903827cd86b74db8a05ded Mon Sep 17 00:00:00 2001
From: Motasim Hussain <motasim.hussain@venturedive.com>
Date: Sun, 2 Oct 2022 12:19:14 +0500
Subject: [PATCH 17/28] Component and SCSS refactor

---
 .../dot-container-properties.component.html   | 16 +++-------
 .../dot-container-properties.component.scss   | 32 ++++++++++---------
 .../store/dot-container-properties.store.ts   | 14 ++++----
 3 files changed, 30 insertions(+), 32 deletions(-)

diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-properties/dot-container-properties.component.html b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-properties/dot-container-properties.component.html
index e7d412eb2b38..190d9f9cddaf 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-properties/dot-container-properties.component.html
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-properties/dot-container-properties.component.html
@@ -55,10 +55,8 @@
                 <div *ngIf="vm.showPrePostLoopInput">
                     <label>{{ 'message.containers.create.pre_loop' | dm }}</label>
                     <dot-textarea-content
-                        formControlName="body"
-                        #value
-                        height="100%"
-                        formControlName="body"
+                        formControlName="preLoop"
+                        #preLoop
                         [show]="['code']"
                         language="html"
                         (monacoInit)="initEditor($event)"
@@ -88,9 +86,7 @@
                     </p-tabPanel>
                     <p-tabPanel closable="true" header="Content (Generic)">
                         <dot-textarea-content
-                            formControlName="body"
-                            #value
-                            height="100%"
+                            #body
                             formControlName="body"
                             [show]="['code']"
                             language="html"
@@ -114,10 +110,8 @@
                 <div *ngIf="vm.showPrePostLoopInput">
                     <label>{{ 'message.containers.create.post_loop' | dm }}</label>
                     <dot-textarea-content
-                        formControlName="body"
-                        #value
-                        height="100%"
-                        formControlName="body"
+                        formControlName="postLoop"
+                        #postLoop
                         [show]="['code']"
                         language="html"
                         (monacoInit)="initEditor($event)"
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-properties/dot-container-properties.component.scss b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-properties/dot-container-properties.component.scss
index 643b33f8f5f8..8b137216e9a0 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-properties/dot-container-properties.component.scss
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-properties/dot-container-properties.component.scss
@@ -1,6 +1,6 @@
 @use "variables" as *;
 
-:host ::ng-deep {
+:host {
     .dot-container-properties__title-container {
         padding: $spacing-4 0;
     }
@@ -15,7 +15,7 @@
             margin: $spacing-3;
         }
         dot-textarea-content {
-            height: 40vh !important;
+            height: 40vh;
         }
     }
 
@@ -29,26 +29,28 @@
         }
 
         dot-textarea-content {
-            height: 20vh !important;
+            height: 20vh;
         }
     }
 
-    .tab-panel-btn {
-        background: #1b3359;
+    & ::ng-deep {
+        .tab-panel-btn {
+            background: #1b3359;
 
-        a {
-            padding: 0 !important;
-        }
+            a.p-tabview-nav-link {
+                padding: 0;
+            }
 
-        i {
-            color: $white;
-            padding: 1.2rem 2.5rem 1.35rem;
+            i {
+                color: $white;
+                padding: 1.2rem 2.5rem 1.35rem;
+            }
         }
-    }
 
-    .p-tabview-panel {
-        padding: 0 !important;
-        padding-top: 1.5rem !important;
+        .p-tabview-panel {
+            padding: 0 !important;
+            padding-top: 1.5rem !important;
+        }
     }
 
     .dot-container-properties__content-tab-container {
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-properties/store/dot-container-properties.store.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-properties/store/dot-container-properties.store.ts
index f4263e7bd724..5ac6042ba66d 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-properties/store/dot-container-properties.store.ts
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-properties/store/dot-container-properties.store.ts
@@ -3,7 +3,6 @@ import { ComponentStore } from '@ngrx/component-store';
 import { take } from 'rxjs/operators';
 import { StructureTypeView } from '@models/contentlet';
 import { DotContentTypeService } from '@services/dot-content-type';
-import { zip } from 'rxjs';
 
 export interface DotContainerPropertiesState {
     activeTabIndex: number;
@@ -14,13 +13,16 @@ export interface DotContainerPropertiesState {
 @Injectable()
 export class DotContainerPropertiesStore extends ComponentStore<DotContainerPropertiesState> {
     constructor(private dotContentTypeService: DotContentTypeService) {
-        super();
+        super({
+            activeTabIndex: 1,
+            contentTypes: [],
+            showPrePostLoopInput: false
+        });
 
-        const contentTypes$ = this.dotContentTypeService.getAllContentTypes();
-
-        zip(contentTypes$)
+        this.dotContentTypeService
+            .getAllContentTypes()
             .pipe(take(1))
-            .subscribe(([contentTypes]) => {
+            .subscribe((contentTypes) => {
                 this.setState({
                     activeTabIndex: 1,
                     contentTypes: contentTypes,

From 2b1d0eda72e4900f1767b52bf299797019b6f851 Mon Sep 17 00:00:00 2001
From: Motasim Hussain <motasim.hussain@venturedive.com>
Date: Mon, 3 Oct 2022 12:19:08 +0500
Subject: [PATCH 18/28] Refactored Loop editor to new component

---
 .../dot-container-create.component.spec.ts    | 15 ++++-
 .../dot-container-history.component.spec.ts   |  2 +-
 .../dot-container-properties.component.html   | 55 +++----------------
 .../dot-container-properties.component.scss   | 14 -----
 .../dot-container-properties.module.ts        |  4 +-
 .../dot-loop-editor.component.html            | 21 +++++++
 .../dot-loop-editor.component.scss            | 19 +++++++
 .../dot-loop-editor.component.ts              | 38 +++++++++++++
 .../dot-loop-editor/dot-loop-editor.module.ts | 20 +++++++
 .../dot-loop-editor.spec.component.ts         | 23 ++++++++
 10 files changed, 147 insertions(+), 64 deletions(-)
 create mode 100644 core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-loop-editor/dot-loop-editor.component.html
 create mode 100644 core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-loop-editor/dot-loop-editor.component.scss
 create mode 100644 core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-loop-editor/dot-loop-editor.component.ts
 create mode 100644 core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-loop-editor/dot-loop-editor.module.ts
 create mode 100644 core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-loop-editor/dot-loop-editor.spec.component.ts

diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-create.component.spec.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-create.component.spec.ts
index aec7b29732bc..f39070853179 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-create.component.spec.ts
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-create.component.spec.ts
@@ -1,14 +1,27 @@
 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]
+            declarations: [DotContainerCreateComponent],
+            imports: [DotMessagePipeModule],
+            providers: [
+                { provide: DotMessageService, useValue: messageServiceMock },
+                { provide: CoreWebService, useClass: CoreWebServiceMock }
+            ]
         }).compileComponents();
 
         fixture = TestBed.createComponent(DotContainerCreateComponent);
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-history/dot-container-history.component.spec.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-history/dot-container-history.component.spec.ts
index 91518dadd164..86ec5caf1ae9 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-history/dot-container-history.component.spec.ts
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-history/dot-container-history.component.spec.ts
@@ -1,7 +1,7 @@
 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 './container-history.component';
+import { DotContainerHistoryComponent } from './dot-container-history.component';
 import { DotPortletBoxModule } from '@components/dot-portlet-base/components/dot-portlet-box/dot-portlet-box.module';
 
 @Component({
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-properties/dot-container-properties.component.html b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-properties/dot-container-properties.component.html
index 190d9f9cddaf..90baf59767fb 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-properties/dot-container-properties.component.html
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-properties/dot-container-properties.component.html
@@ -39,30 +39,10 @@
 
     <div class="dot-container-properties__code-container-outer">
         <form [formGroup]="form">
-            <div class="dot-container-properties__pre-post-loop">
-                <div
-                    class="dot-container-properties__pre-post-loop-inplace"
-                    *ngIf="!vm.showPrePostLoopInput"
-                >
-                    <button
-                        pButton
-                        class="p-button-outlined p-button-secondary"
-                        type="button"
-                        [label]="'message.containers.create.add_pre_post' | dm"
-                        (click)="showLoopInput()"
-                    ></button>
-                </div>
-                <div *ngIf="vm.showPrePostLoopInput">
-                    <label>{{ 'message.containers.create.pre_loop' | dm }}</label>
-                    <dot-textarea-content
-                        formControlName="preLoop"
-                        #preLoop
-                        [show]="['code']"
-                        language="html"
-                        (monacoInit)="initEditor($event)"
-                    ></dot-textarea-content>
-                </div>
-            </div>
+            <dot-loop-editor
+                (addButtonClicked)="showLoopInput()"
+                [isEditorVisible]="vm.showPrePostLoopInput"
+            ></dot-loop-editor>
             <div class="dot-container-properties__content-tab-container">
                 <label>{{ 'message.containers.create.content_type_code' | dm }}</label>
                 <p-tabView
@@ -95,29 +75,10 @@
                     </p-tabPanel>
                 </p-tabView>
             </div>
-            <div class="dot-container-properties__pre-post-loop">
-                <div
-                    class="dot-container-properties__pre-post-loop-inplace"
-                    *ngIf="!vm.showPrePostLoopInput"
-                >
-                    <button
-                        pButton
-                        class="p-button-outlined p-button-secondary"
-                        type="button"
-                        [label]="'message.containers.create.add_pre_post' | dm"
-                    ></button>
-                </div>
-                <div *ngIf="vm.showPrePostLoopInput">
-                    <label>{{ 'message.containers.create.post_loop' | dm }}</label>
-                    <dot-textarea-content
-                        formControlName="postLoop"
-                        #postLoop
-                        [show]="['code']"
-                        language="html"
-                        (monacoInit)="initEditor($event)"
-                    ></dot-textarea-content>
-                </div>
-            </div>
+            <dot-loop-editor
+                (addButtonClicked)="showLoopInput()"
+                [isEditorVisible]="vm.showPrePostLoopInput"
+            ></dot-loop-editor>
         </form>
     </div>
 </ng-container>
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-properties/dot-container-properties.component.scss b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-properties/dot-container-properties.component.scss
index 8b137216e9a0..b2bdb79114f7 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-properties/dot-container-properties.component.scss
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-properties/dot-container-properties.component.scss
@@ -19,20 +19,6 @@
         }
     }
 
-    .dot-container-properties__pre-post-loop {
-        .dot-container-properties__pre-post-loop-inplace {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            padding: $spacing-6;
-            background: #e9ebfc;
-        }
-
-        dot-textarea-content {
-            height: 20vh;
-        }
-    }
-
     & ::ng-deep {
         .tab-panel-btn {
             background: #1b3359;
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-properties/dot-container-properties.module.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-properties/dot-container-properties.module.ts
index b3f635b2527b..e1d2e15424eb 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-properties/dot-container-properties.module.ts
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-properties/dot-container-properties.module.ts
@@ -11,6 +11,7 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { TabViewModule } from 'primeng/tabview';
 import { MenuModule } from 'primeng/menu';
 import { DotMessagePipeModule } from '@pipes/dot-message/dot-message-pipe.module';
+import { DotLoopEditorModule } from '@portlets/dot-containers/dot-container-create/dot-loop-editor/dot-loop-editor.module';
 @NgModule({
     declarations: [DotContainerPropertiesComponent],
     exports: [DotContainerPropertiesComponent],
@@ -25,7 +26,8 @@ import { DotMessagePipeModule } from '@pipes/dot-message/dot-message-pipe.module
         ReactiveFormsModule,
         TabViewModule,
         MenuModule,
-        DotMessagePipeModule
+        DotMessagePipeModule,
+        DotLoopEditorModule
     ]
 })
 export class DotContainerPropertiesModule {}
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-loop-editor/dot-loop-editor.component.html b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-loop-editor/dot-loop-editor.component.html
new file mode 100644
index 000000000000..b53a5bfa5f7e
--- /dev/null
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-loop-editor/dot-loop-editor.component.html
@@ -0,0 +1,21 @@
+<div class="dot-loop-editor__pre-post-loop">
+    <div class="dot-loop-editor__pre-post-loop-inplace" *ngIf="!isEditorVisible">
+        <button
+            pButton
+            class="p-button-outlined p-button-secondary"
+            type="button"
+            [label]="'message.containers.create.add_pre_post' | dm"
+            (click)="handleClick()"
+        ></button>
+    </div>
+    <div *ngIf="isEditorVisible">
+        <label>{{ 'message.containers.create.pre_loop' | dm }}</label>
+        <dot-textarea-content
+            formControlName="preLoop"
+            #preLoop
+            [show]="['code']"
+            language="html"
+            (monacoInit)="initEditor($event)"
+        ></dot-textarea-content>
+    </div>
+</div>
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-loop-editor/dot-loop-editor.component.scss b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-loop-editor/dot-loop-editor.component.scss
new file mode 100644
index 000000000000..1a5faaba8703
--- /dev/null
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-loop-editor/dot-loop-editor.component.scss
@@ -0,0 +1,19 @@
+@use "variables" as *;
+
+:host {
+    .dot-loop-editor__pre-post-loop-inplace {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: $spacing-6;
+        background: #e9ebfc;
+    }
+
+    dot-textarea-content {
+        height: 20vh !important;
+    }
+
+    ::ng-deep .textarea-content__code-field {
+        height: 20vh !important;
+    }
+}
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-loop-editor/dot-loop-editor.component.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-loop-editor/dot-loop-editor.component.ts
new file mode 100644
index 000000000000..be194f500721
--- /dev/null
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-loop-editor/dot-loop-editor.component.ts
@@ -0,0 +1,38 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { MonacoEditor } from '@models/monaco-editor';
+
+@Component({
+    selector: 'dot-loop-editor',
+    templateUrl: './dot-loop-editor.component.html',
+    styleUrls: ['./dot-loop-editor.component.scss']
+})
+export class DotLoopEditorComponent {
+    editor: MonacoEditor;
+
+    @Input() isEditorVisible = false;
+    @Output() addButtonClicked = new EventEmitter();
+
+    constructor() {
+        //
+    }
+
+    /**
+     * This method initializes the monaco editor
+     *
+     * @param {MonacoEditor} editor
+     * @memberof DotLoopEditorComponent
+     */
+    initEditor(editor: MonacoEditor): void {
+        this.editor = editor;
+    }
+
+    /**
+     * This method shows the Loop Editor Input
+     *
+     * @return void
+     * @memberof DotLoopEditorComponent
+     */
+    handleClick(): void {
+        this.addButtonClicked.emit();
+    }
+}
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-loop-editor/dot-loop-editor.module.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-loop-editor/dot-loop-editor.module.ts
new file mode 100644
index 000000000000..53f867378953
--- /dev/null
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-loop-editor/dot-loop-editor.module.ts
@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { DotLoopEditorComponent } from '@portlets/dot-containers/dot-container-create/dot-loop-editor/dot-loop-editor.component';
+import { DotTextareaContentModule } from '@components/_common/dot-textarea-content/dot-textarea-content.module';
+import { DotMessagePipeModule } from '@pipes/dot-message/dot-message-pipe.module';
+import { CommonModule } from '@angular/common';
+import { ButtonModule } from 'primeng/button';
+import { ReactiveFormsModule } from '@angular/forms';
+
+@NgModule({
+    declarations: [DotLoopEditorComponent],
+    imports: [
+        DotTextareaContentModule,
+        DotMessagePipeModule,
+        CommonModule,
+        ButtonModule,
+        ReactiveFormsModule
+    ],
+    exports: [DotLoopEditorComponent]
+})
+export class DotLoopEditorModule {}
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-loop-editor/dot-loop-editor.spec.component.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-loop-editor/dot-loop-editor.spec.component.ts
new file mode 100644
index 000000000000..102ca05d7af3
--- /dev/null
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-loop-editor/dot-loop-editor.spec.component.ts
@@ -0,0 +1,23 @@
+import { DotLoopEditorComponent } from './dot-loop-editor.component';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { DotMessagePipeModule } from '@pipes/dot-message/dot-message-pipe.module';
+
+describe('DotLoopEditorComponent', () => {
+    let component: DotLoopEditorComponent;
+    let fixture: ComponentFixture<DotLoopEditorComponent>;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            declarations: [DotLoopEditorComponent],
+            imports: [DotMessagePipeModule]
+        }).compileComponents();
+
+        fixture = TestBed.createComponent(DotLoopEditorComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});

From 0598457e9cdf60d4765512655a35c8eaf2e6a152 Mon Sep 17 00:00:00 2001
From: zulqarnainvd <113915849+zulqarnainvd@users.noreply.github.com>
Date: Mon, 3 Oct 2022 15:10:11 +0500
Subject: [PATCH 19/28] 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>
---
 .../dot-container-history.component.ts                      | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-history/dot-container-history.component.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-history/dot-container-history.component.ts
index 46e177179c8d..db8fdfa8a6f9 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-history/dot-container-history.component.ts
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-history/dot-container-history.component.ts
@@ -8,11 +8,7 @@ import { IframeComponent } from '@components/_common/iframe/iframe-component';
 })
 export class DotContainerHistoryComponent implements OnInit, OnChanges {
     @ViewChild('historyIframe') historyIframe: IframeComponent;
-    historyUrl = '';
-
-    ngOnInit() {
-        this.historyUrl = `/html/containers/push_history.jsp`;
-    }
+    historyUrl = '/html/containers/push_history.jsp';
 
     ngOnChanges(): void {
         if (this.historyIframe) {

From 69b736b65067d65924ab3c79de00f12f4933d762 Mon Sep 17 00:00:00 2001
From: zulqarnainvd <113915849+zulqarnainvd@users.noreply.github.com>
Date: Mon, 3 Oct 2022 15:10:43 +0500
Subject: [PATCH 20/28] 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>
---
 .../dot-container-permissions.component.ts                  | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-permissions/dot-container-permissions.component.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-permissions/dot-container-permissions.component.ts
index 1e087fc5bb94..c4f7320fce7b 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-permissions/dot-container-permissions.component.ts
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-permissions/dot-container-permissions.component.ts
@@ -6,9 +6,5 @@ import { Component, OnInit } from '@angular/core';
     styleUrls: ['./dot-container-permissions.component.scss']
 })
 export class DotContainerPermissionsComponent implements OnInit {
-    permissionsUrl = '';
-
-    ngOnInit() {
-        this.permissionsUrl = `/html/containers/permissions.jsp`;
-    }
+    permissionsUrl =  '/html/containers/permissions.jsp';
 }

From 52e20abfce7865a90f0f444522d34b082059fcdc Mon Sep 17 00:00:00 2001
From: Motasim Hussain <motasim.hussain@venturedive.com>
Date: Mon, 3 Oct 2022 17:21:21 +0500
Subject: [PATCH 21/28] Refactored Content Editor to new component

---
 .../dot-container-properties.component.html   | 37 ++-------------
 .../dot-container-properties.component.scss   |  4 --
 .../dot-container-properties.component.ts     | 27 -----------
 .../dot-container-properties.module.ts        |  4 +-
 .../store/dot-container-properties.store.ts   | 34 +++-----------
 .../dot-content-editor.component.html         | 32 +++++++++++++
 .../dot-content-editor.component.scss         |  5 +++
 .../dot-content-editor.component.spec.ts      |  0
 .../dot-content-editor.component.ts           | 45 +++++++++++++++++++
 .../dot-content-editor.module.ts              | 20 +++++++++
 .../store/dot-content-editor.store.ts         | 37 +++++++++++++++
 .../dot-loop-editor.component.ts              |  4 +-
 12 files changed, 153 insertions(+), 96 deletions(-)
 create mode 100644 core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-content-editor/dot-content-editor.component.html
 create mode 100644 core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-content-editor/dot-content-editor.component.scss
 create mode 100644 core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-content-editor/dot-content-editor.component.spec.ts
 create mode 100644 core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-content-editor/dot-content-editor.component.ts
 create mode 100644 core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-content-editor/dot-content-editor.module.ts
 create mode 100644 core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-content-editor/store/dot-content-editor.store.ts

diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-properties/dot-container-properties.component.html b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-properties/dot-container-properties.component.html
index 90baf59767fb..036242c16eef 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-properties/dot-container-properties.component.html
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-properties/dot-container-properties.component.html
@@ -40,43 +40,12 @@
     <div class="dot-container-properties__code-container-outer">
         <form [formGroup]="form">
             <dot-loop-editor
-                (addButtonClicked)="showLoopInput()"
+                (buttonClick)="showLoopInput()"
                 [isEditorVisible]="vm.showPrePostLoopInput"
             ></dot-loop-editor>
-            <div class="dot-container-properties__content-tab-container">
-                <label>{{ 'message.containers.create.content_type_code' | dm }}</label>
-                <p-tabView
-                    [scrollable]="true"
-                    (onChange)="handleChange($event, $event.index)"
-                    [activeIndex]="vm.activeTabIndex"
-                >
-                    <p-tabPanel headerStyleClass="tab-panel-btn">
-                        <ng-template pTemplate="header">
-                            <i
-                                class="pi pi-plus"
-                                (click)="handleChange($event); actionsMenu.toggle($event)"
-                            ></i>
-                            <p-menu
-                                #actionsMenu
-                                [popup]="true"
-                                [model]="vm.contentTypes"
-                                appendTo="body"
-                            ></p-menu>
-                        </ng-template>
-                    </p-tabPanel>
-                    <p-tabPanel closable="true" header="Content (Generic)">
-                        <dot-textarea-content
-                            #body
-                            formControlName="body"
-                            [show]="['code']"
-                            language="html"
-                            (monacoInit)="initEditor($event)"
-                        ></dot-textarea-content>
-                    </p-tabPanel>
-                </p-tabView>
-            </div>
+            <dot-content-editor></dot-content-editor>
             <dot-loop-editor
-                (addButtonClicked)="showLoopInput()"
+                (buttonClick)="showLoopInput()"
                 [isEditorVisible]="vm.showPrePostLoopInput"
             ></dot-loop-editor>
         </form>
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-properties/dot-container-properties.component.scss b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-properties/dot-container-properties.component.scss
index b2bdb79114f7..800d36e99f10 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-properties/dot-container-properties.component.scss
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-properties/dot-container-properties.component.scss
@@ -38,8 +38,4 @@
             padding-top: 1.5rem !important;
         }
     }
-
-    .dot-container-properties__content-tab-container {
-        padding: $spacing-4 0;
-    }
 }
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-properties/dot-container-properties.component.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-properties/dot-container-properties.component.ts
index 3144238848e8..ce4bad349b27 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-properties/dot-container-properties.component.ts
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-properties/dot-container-properties.component.ts
@@ -24,16 +24,6 @@ export class DotContainerPropertiesComponent implements OnInit {
         this.form = this.fb.group({ body: this.body });
     }
 
-    /**
-     * This method initializes the monaco editor
-     *
-     * @param {MonacoEditor} editor
-     * @memberof DotContainerPropertiesComponent
-     */
-    initEditor(editor: MonacoEditor): void {
-        this.editor = editor;
-    }
-
     /**
      * This method shows the Pre- and Post-Loop Inputs
      *
@@ -43,21 +33,4 @@ export class DotContainerPropertiesComponent implements OnInit {
     showLoopInput(): void {
         this.store.updatePrePostLoopInputVisibility(true);
     }
-
-    /**
-     * Method to stop propogation of Tab click event
-     *
-     * @param e {MouseEvent}
-     * @param index {number}
-     * @return boolean
-     * @memberof DotContainerPropertiesComponent
-     */
-    handleChange(e: MouseEvent, index: number = null): boolean {
-        if (index === null) {
-            e.preventDefault();
-            e.stopPropagation();
-        }
-
-        return false;
-    }
 }
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-properties/dot-container-properties.module.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-properties/dot-container-properties.module.ts
index e1d2e15424eb..7ede971cac41 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-properties/dot-container-properties.module.ts
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-properties/dot-container-properties.module.ts
@@ -12,6 +12,7 @@ import { TabViewModule } from 'primeng/tabview';
 import { MenuModule } from 'primeng/menu';
 import { DotMessagePipeModule } from '@pipes/dot-message/dot-message-pipe.module';
 import { DotLoopEditorModule } from '@portlets/dot-containers/dot-container-create/dot-loop-editor/dot-loop-editor.module';
+import { DotContentEditorModule } from '@portlets/dot-containers/dot-container-create/dot-content-editor/dot-content-editor.module';
 @NgModule({
     declarations: [DotContainerPropertiesComponent],
     exports: [DotContainerPropertiesComponent],
@@ -27,7 +28,8 @@ import { DotLoopEditorModule } from '@portlets/dot-containers/dot-container-crea
         TabViewModule,
         MenuModule,
         DotMessagePipeModule,
-        DotLoopEditorModule
+        DotLoopEditorModule,
+        DotContentEditorModule
     ]
 })
 export class DotContainerPropertiesModule {}
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-properties/store/dot-container-properties.store.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-properties/store/dot-container-properties.store.ts
index 5ac6042ba66d..cf7d8b781893 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-properties/store/dot-container-properties.store.ts
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-properties/store/dot-container-properties.store.ts
@@ -1,45 +1,23 @@
 import { Injectable } from '@angular/core';
 import { ComponentStore } from '@ngrx/component-store';
-import { take } from 'rxjs/operators';
-import { StructureTypeView } from '@models/contentlet';
-import { DotContentTypeService } from '@services/dot-content-type';
 
 export interface DotContainerPropertiesState {
-    activeTabIndex: number;
-    contentTypes: StructureTypeView[];
     showPrePostLoopInput: boolean;
 }
 
 @Injectable()
 export class DotContainerPropertiesStore extends ComponentStore<DotContainerPropertiesState> {
-    constructor(private dotContentTypeService: DotContentTypeService) {
+    constructor() {
         super({
-            activeTabIndex: 1,
-            contentTypes: [],
             showPrePostLoopInput: false
         });
-
-        this.dotContentTypeService
-            .getAllContentTypes()
-            .pipe(take(1))
-            .subscribe((contentTypes) => {
-                this.setState({
-                    activeTabIndex: 1,
-                    contentTypes: contentTypes,
-                    showPrePostLoopInput: false
-                });
-            });
     }
 
-    readonly vm$ = this.select(
-        ({ activeTabIndex, contentTypes, showPrePostLoopInput }: DotContainerPropertiesState) => {
-            return {
-                activeTabIndex,
-                contentTypes,
-                showPrePostLoopInput
-            };
-        }
-    );
+    readonly vm$ = this.select(({ showPrePostLoopInput }: DotContainerPropertiesState) => {
+        return {
+            showPrePostLoopInput
+        };
+    });
 
     readonly updatePrePostLoopInputVisibility = this.updater<boolean>(
         (state: DotContainerPropertiesState, showPrePostLoopInput: boolean) => {
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-content-editor/dot-content-editor.component.html b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-content-editor/dot-content-editor.component.html
new file mode 100644
index 000000000000..a716a7e4bb02
--- /dev/null
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-content-editor/dot-content-editor.component.html
@@ -0,0 +1,32 @@
+<div class="dot-content-editor__content-tab-container" *ngIf="vm$ | async as vm">
+    <label>{{ 'message.containers.create.content_type_code' | dm }}</label>
+    <p-tabView
+        [scrollable]="true"
+        (onChange)="handleChange($event, $event.index)"
+        [activeIndex]="vm.activeTabIndex"
+    >
+        <p-tabPanel headerStyleClass="tab-panel-btn">
+            <ng-template pTemplate="header">
+                <i
+                    class="pi pi-plus"
+                    (click)="handleChange($event); actionsMenu.toggle($event)"
+                ></i>
+                <p-menu
+                    #actionsMenu
+                    [popup]="true"
+                    [model]="vm.contentTypes"
+                    appendTo="body"
+                ></p-menu>
+            </ng-template>
+        </p-tabPanel>
+        <p-tabPanel closable="true" header="Content (Generic)">
+            <dot-textarea-content
+                #body
+                formControlName="body"
+                [show]="['code']"
+                language="html"
+                (monacoInit)="initEditor($event)"
+            ></dot-textarea-content>
+        </p-tabPanel>
+    </p-tabView>
+</div>
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-content-editor/dot-content-editor.component.scss b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-content-editor/dot-content-editor.component.scss
new file mode 100644
index 000000000000..4b528b9454fc
--- /dev/null
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-content-editor/dot-content-editor.component.scss
@@ -0,0 +1,5 @@
+@use "variables" as *;
+
+.dot-content-editor__content-tab-container {
+    padding: $spacing-4 0;
+}
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-content-editor/dot-content-editor.component.spec.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-content-editor/dot-content-editor.component.spec.ts
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-content-editor/dot-content-editor.component.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-content-editor/dot-content-editor.component.ts
new file mode 100644
index 000000000000..18e40ae15450
--- /dev/null
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-content-editor/dot-content-editor.component.ts
@@ -0,0 +1,45 @@
+import { Component } from '@angular/core';
+import { MonacoEditor } from '@models/monaco-editor';
+import { DotContentEditorStore } from '@portlets/dot-containers/dot-container-create/dot-content-editor/store/dot-content-editor.store';
+
+@Component({
+    selector: 'dot-content-editor',
+    templateUrl: './dot-content-editor.component.html',
+    styleUrls: ['./dot-content-editor.component.scss'],
+    providers: [DotContentEditorStore]
+})
+export class DotContentEditorComponent {
+    vm$ = this.store.vm$;
+    editor: MonacoEditor;
+
+    constructor(private store: DotContentEditorStore) {
+        //
+    }
+
+    /**
+     * This method initializes the monaco editor
+     *
+     * @param {MonacoEditor} editor
+     * @memberof DotContentEditorComponent
+     */
+    initEditor(editor: MonacoEditor): void {
+        this.editor = editor;
+    }
+
+    /**
+     * Method to stop propogation of Tab click event
+     *
+     * @param e {MouseEvent}
+     * @param index {number}
+     * @return boolean
+     * @memberof DotContentEditorComponent
+     */
+    handleChange(e: MouseEvent, index: number = null): boolean {
+        if (index === null) {
+            e.preventDefault();
+            e.stopPropagation();
+        }
+
+        return false;
+    }
+}
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-content-editor/dot-content-editor.module.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-content-editor/dot-content-editor.module.ts
new file mode 100644
index 000000000000..5c8374a727d1
--- /dev/null
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-content-editor/dot-content-editor.module.ts
@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { DotContentEditorComponent } from '@portlets/dot-containers/dot-container-create/dot-content-editor/dot-content-editor.component';
+import { CommonModule } from '@angular/common';
+import { TabViewModule } from 'primeng/tabview';
+import { MenuModule } from 'primeng/menu';
+import { DotTextareaContentModule } from '@components/_common/dot-textarea-content/dot-textarea-content.module';
+import { DotMessagePipeModule } from '@dotcms/app/view/pipes/dot-message/dot-message-pipe.module';
+
+@NgModule({
+    declarations: [DotContentEditorComponent],
+    imports: [
+        CommonModule,
+        TabViewModule,
+        MenuModule,
+        DotTextareaContentModule,
+        DotMessagePipeModule
+    ],
+    exports: [DotContentEditorComponent]
+})
+export class DotContentEditorModule {}
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-content-editor/store/dot-content-editor.store.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-content-editor/store/dot-content-editor.store.ts
new file mode 100644
index 000000000000..a12f96156ee4
--- /dev/null
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-content-editor/store/dot-content-editor.store.ts
@@ -0,0 +1,37 @@
+import { ComponentStore } from '@ngrx/component-store';
+import { StructureTypeView } from '@models/contentlet';
+import { take } from 'rxjs/operators';
+import { DotContentTypeService } from '@dotcms/app/api/services/dot-content-type';
+import { Injectable } from '@angular/core';
+
+export interface DotContentEditorState {
+    activeTabIndex: number;
+    contentTypes: StructureTypeView[];
+}
+
+@Injectable()
+export class DotContentEditorStore extends ComponentStore<DotContentEditorState> {
+    constructor(private dotContentTypeService: DotContentTypeService) {
+        super({
+            activeTabIndex: 1,
+            contentTypes: []
+        });
+
+        this.dotContentTypeService
+            .getAllContentTypes()
+            .pipe(take(1))
+            .subscribe((contentTypes) => {
+                this.setState({
+                    activeTabIndex: 1,
+                    contentTypes: contentTypes
+                });
+            });
+    }
+
+    readonly vm$ = this.select(({ activeTabIndex, contentTypes }: DotContentEditorState) => {
+        return {
+            activeTabIndex,
+            contentTypes
+        };
+    });
+}
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-loop-editor/dot-loop-editor.component.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-loop-editor/dot-loop-editor.component.ts
index be194f500721..536c9540748e 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-loop-editor/dot-loop-editor.component.ts
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-loop-editor/dot-loop-editor.component.ts
@@ -10,7 +10,7 @@ export class DotLoopEditorComponent {
     editor: MonacoEditor;
 
     @Input() isEditorVisible = false;
-    @Output() addButtonClicked = new EventEmitter();
+    @Output() buttonClick = new EventEmitter();
 
     constructor() {
         //
@@ -33,6 +33,6 @@ export class DotLoopEditorComponent {
      * @memberof DotLoopEditorComponent
      */
     handleClick(): void {
-        this.addButtonClicked.emit();
+        this.buttonClick.emit();
     }
 }

From 9043a5961568a69d63bf182dcb56bba80f6043c8 Mon Sep 17 00:00:00 2001
From: Motasim Hussain <motasim.hussain@venturedive.com>
Date: Mon, 3 Oct 2022 17:40:17 +0500
Subject: [PATCH 22/28] Fixed Permissions and History componanets

---
 .../dot-container-history.component.ts                      | 4 ++--
 .../dot-container-permissions.component.ts                  | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-history/dot-container-history.component.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-history/dot-container-history.component.ts
index db8fdfa8a6f9..6dfb984f6b15 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-history/dot-container-history.component.ts
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-history/dot-container-history.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnChanges, OnInit, ViewChild } from '@angular/core';
+import { Component, OnChanges, ViewChild } from '@angular/core';
 import { IframeComponent } from '@components/_common/iframe/iframe-component';
 
 @Component({
@@ -6,7 +6,7 @@ import { IframeComponent } from '@components/_common/iframe/iframe-component';
     templateUrl: './dot-container-history.component.html',
     styleUrls: ['./dot-container-history.component.scss']
 })
-export class DotContainerHistoryComponent implements OnInit, OnChanges {
+export class DotContainerHistoryComponent implements OnChanges {
     @ViewChild('historyIframe') historyIframe: IframeComponent;
     historyUrl = '/html/containers/push_history.jsp';
 
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-permissions/dot-container-permissions.component.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-permissions/dot-container-permissions.component.ts
index c4f7320fce7b..e73fab8fc72c 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-permissions/dot-container-permissions.component.ts
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-permissions/dot-container-permissions.component.ts
@@ -1,10 +1,10 @@
-import { Component, OnInit } from '@angular/core';
+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 implements OnInit {
-    permissionsUrl =  '/html/containers/permissions.jsp';
+export class DotContainerPermissionsComponent {
+    permissionsUrl = '/html/containers/permissions.jsp';
 }

From d47e0c33a17b1329d16813d3f58d359aab398da9 Mon Sep 17 00:00:00 2001
From: Zulqarnain Huda <zulqarnain.huda@venturedive.com>
Date: Mon, 3 Oct 2022 21:23:30 +0500
Subject: [PATCH 23/28] change css style and remove unnecessary ng deep

---
 .../dot-container-create.component.scss       | 36 +++++++++----------
 .../dot-container-history.component.scss      |  4 +--
 2 files changed, 19 insertions(+), 21 deletions(-)

diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-create.component.scss b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-create.component.scss
index d5c65ab8acc2..f9757e88ad3b 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-create.component.scss
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-create.component.scss
@@ -1,26 +1,24 @@
 @use "variables" as *;
 
 :host ::ng-deep {
-    .container-create__tab-container {
-        display: flex;
-        flex-direction: column;
-        overflow: auto;
+    .p-tabview-panels {
+        overflow: hidden;
+        flex-grow: 1;
+        flex-basis: 0;
+    }
+    .p-tabview-nav {
+        padding: 0 $spacing-4;
+        background: $white;
     }
 
-    .container-create__tabs {
-        .p-tabview-panels {
-            overflow: hidden;
-            flex-grow: 1;
-            flex-basis: 0;
-        }
-        .p-tabview-nav {
-            padding: 0 $spacing-4;
-            background: $white;
-        }
-
-        .p-tabview-panel {
-            padding: 0 $spacing-4;
-            padding-top: $spacing-4;
-        }
+    .p-tabview-panel {
+        padding: 0 $spacing-4;
+        padding-top: $spacing-4;
     }
 }
+
+.container-create__tab-container {
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+}
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-history/dot-container-history.component.scss b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-history/dot-container-history.component.scss
index 9146be1b2dd9..4387a3d2ab6d 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-history/dot-container-history.component.scss
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-history/dot-container-history.component.scss
@@ -1,4 +1,4 @@
 dot-portlet-box {
-    height: 100vh;
-    overflow: hidden;
+    height: 70vh;
+    overflow-x: auto;
 }

From 61d54536f2d474631c7fdfbf0fb7399dc512327a Mon Sep 17 00:00:00 2001
From: Zulqarnain Huda <zulqarnain.huda@venturedive.com>
Date: Mon, 3 Oct 2022 21:25:13 +0500
Subject: [PATCH 24/28] change css style and remove unnecessary ng deep

---
 .../dot-container-permissions.component.scss                  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-permissions/dot-container-permissions.component.scss b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-permissions/dot-container-permissions.component.scss
index 9146be1b2dd9..4387a3d2ab6d 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-permissions/dot-container-permissions.component.scss
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-permissions/dot-container-permissions.component.scss
@@ -1,4 +1,4 @@
 dot-portlet-box {
-    height: 100vh;
-    overflow: hidden;
+    height: 70vh;
+    overflow-x: auto;
 }

From 87f0429f48e42175e8028617bd98c2a24d8c4d24 Mon Sep 17 00:00:00 2001
From: motasimvd <62100713+motasimvd@users.noreply.github.com>
Date: Tue, 4 Oct 2022 10:50:14 +0500
Subject: [PATCH 25/28] 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>
---
 .../dot-container-create/dot-container-create.component.scss    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-create.component.scss b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-create.component.scss
index f9757e88ad3b..bb24e8804d36 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-create.component.scss
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-create.component.scss
@@ -1,6 +1,6 @@
 @use "variables" as *;
 
-:host ::ng-deep {
+.container-create__tab-container ::ng-deep {
     .p-tabview-panels {
         overflow: hidden;
         flex-grow: 1;

From f70673ebade302ff66b8715236a134e0d60b3605 Mon Sep 17 00:00:00 2001
From: motasimvd <62100713+motasimvd@users.noreply.github.com>
Date: Tue, 4 Oct 2022 10:50:42 +0500
Subject: [PATCH 26/28] 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>
---
 .../dot-content-editor/store/dot-content-editor.store.ts   | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-content-editor/store/dot-content-editor.store.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-content-editor/store/dot-content-editor.store.ts
index a12f96156ee4..489e49f52c1a 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-content-editor/store/dot-content-editor.store.ts
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-content-editor/store/dot-content-editor.store.ts
@@ -28,10 +28,5 @@ export class DotContentEditorStore extends ComponentStore<DotContentEditorState>
             });
     }
 
-    readonly vm$ = this.select(({ activeTabIndex, contentTypes }: DotContentEditorState) => {
-        return {
-            activeTabIndex,
-            contentTypes
-        };
-    });
+    readonly vm$ = this.select((state: DotContentEditorState) => state);
 }

From 998cba522ff54c84b7c0cd2fdb873c18e3acc196 Mon Sep 17 00:00:00 2001
From: Motasim Hussain <motasim.hussain@venturedive.com>
Date: Tue, 4 Oct 2022 10:57:47 +0500
Subject: [PATCH 27/28] Removed unnecessary monaco editor initializations

---
 .../dot-content-editor.component.html               |  1 -
 .../dot-content-editor.component.ts                 | 12 ------------
 .../dot-loop-editor/dot-loop-editor.component.html  |  1 -
 .../dot-loop-editor/dot-loop-editor.component.ts    | 13 -------------
 4 files changed, 27 deletions(-)

diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-content-editor/dot-content-editor.component.html b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-content-editor/dot-content-editor.component.html
index a716a7e4bb02..c81637de1395 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-content-editor/dot-content-editor.component.html
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-content-editor/dot-content-editor.component.html
@@ -25,7 +25,6 @@
                 formControlName="body"
                 [show]="['code']"
                 language="html"
-                (monacoInit)="initEditor($event)"
             ></dot-textarea-content>
         </p-tabPanel>
     </p-tabView>
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-content-editor/dot-content-editor.component.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-content-editor/dot-content-editor.component.ts
index 18e40ae15450..4670e50ad930 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-content-editor/dot-content-editor.component.ts
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-content-editor/dot-content-editor.component.ts
@@ -1,5 +1,4 @@
 import { Component } from '@angular/core';
-import { MonacoEditor } from '@models/monaco-editor';
 import { DotContentEditorStore } from '@portlets/dot-containers/dot-container-create/dot-content-editor/store/dot-content-editor.store';
 
 @Component({
@@ -10,22 +9,11 @@ import { DotContentEditorStore } from '@portlets/dot-containers/dot-container-cr
 })
 export class DotContentEditorComponent {
     vm$ = this.store.vm$;
-    editor: MonacoEditor;
 
     constructor(private store: DotContentEditorStore) {
         //
     }
 
-    /**
-     * This method initializes the monaco editor
-     *
-     * @param {MonacoEditor} editor
-     * @memberof DotContentEditorComponent
-     */
-    initEditor(editor: MonacoEditor): void {
-        this.editor = editor;
-    }
-
     /**
      * Method to stop propogation of Tab click event
      *
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-loop-editor/dot-loop-editor.component.html b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-loop-editor/dot-loop-editor.component.html
index b53a5bfa5f7e..e9f0180b4733 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-loop-editor/dot-loop-editor.component.html
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-loop-editor/dot-loop-editor.component.html
@@ -15,7 +15,6 @@
             #preLoop
             [show]="['code']"
             language="html"
-            (monacoInit)="initEditor($event)"
         ></dot-textarea-content>
     </div>
 </div>
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-loop-editor/dot-loop-editor.component.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-loop-editor/dot-loop-editor.component.ts
index 536c9540748e..77997bc604b9 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-loop-editor/dot-loop-editor.component.ts
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-loop-editor/dot-loop-editor.component.ts
@@ -1,5 +1,4 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { MonacoEditor } from '@models/monaco-editor';
 
 @Component({
     selector: 'dot-loop-editor',
@@ -7,8 +6,6 @@ import { MonacoEditor } from '@models/monaco-editor';
     styleUrls: ['./dot-loop-editor.component.scss']
 })
 export class DotLoopEditorComponent {
-    editor: MonacoEditor;
-
     @Input() isEditorVisible = false;
     @Output() buttonClick = new EventEmitter();
 
@@ -16,16 +13,6 @@ export class DotLoopEditorComponent {
         //
     }
 
-    /**
-     * This method initializes the monaco editor
-     *
-     * @param {MonacoEditor} editor
-     * @memberof DotLoopEditorComponent
-     */
-    initEditor(editor: MonacoEditor): void {
-        this.editor = editor;
-    }
-
     /**
      * This method shows the Loop Editor Input
      *

From 77f10b869f219612b90de3d1c73928782fc56af1 Mon Sep 17 00:00:00 2001
From: Zulqarnain Huda <zulqarnain.huda@venturedive.com>
Date: Tue, 4 Oct 2022 15:02:14 +0500
Subject: [PATCH 28/28] fixed box height issue

---
 .../dot-container-create.component.scss             | 13 +++++++++++--
 .../dot-container-history.component.scss            |  3 ++-
 .../dot-container-permissions.component.scss        |  3 ++-
 .../dot-container-properties.component.scss         |  2 +-
 4 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-create.component.scss b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-create.component.scss
index bb24e8804d36..729ad864ddac 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-create.component.scss
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-create.component.scss
@@ -1,10 +1,14 @@
 @use "variables" as *;
 
 .container-create__tab-container ::ng-deep {
+    .p-tabview {
+        height: 100%;
+    }
     .p-tabview-panels {
-        overflow: hidden;
+        height: 100%;
         flex-grow: 1;
         flex-basis: 0;
+        overflow: scroll;
     }
     .p-tabview-nav {
         padding: 0 $spacing-4;
@@ -12,6 +16,7 @@
     }
 
     .p-tabview-panel {
+        height: 100%;
         padding: 0 $spacing-4;
         padding-top: $spacing-4;
     }
@@ -20,5 +25,9 @@
 .container-create__tab-container {
     display: flex;
     flex-direction: column;
-    overflow: auto;
+    height: 100%;
+}
+
+.container-create__tabs {
+    height: 100%;
 }
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-history/dot-container-history.component.scss b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-history/dot-container-history.component.scss
index 4387a3d2ab6d..d7f0fe40d9d0 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-history/dot-container-history.component.scss
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-history/dot-container-history.component.scss
@@ -1,4 +1,5 @@
 dot-portlet-box {
-    height: 70vh;
+    height: 100%;
     overflow-x: auto;
+    margin: 0;
 }
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-permissions/dot-container-permissions.component.scss b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-permissions/dot-container-permissions.component.scss
index 4387a3d2ab6d..d7f0fe40d9d0 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-permissions/dot-container-permissions.component.scss
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-permissions/dot-container-permissions.component.scss
@@ -1,4 +1,5 @@
 dot-portlet-box {
-    height: 70vh;
+    height: 100%;
     overflow-x: auto;
+    margin: 0;
 }
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-properties/dot-container-properties.component.scss b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-properties/dot-container-properties.component.scss
index 800d36e99f10..9a50e2a55f32 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-properties/dot-container-properties.component.scss
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-properties/dot-container-properties.component.scss
@@ -8,11 +8,11 @@
     .dot-container-properties__code-container-outer {
         background: $white;
         display: flex;
-        height: 100%;
         flex-direction: column;
 
         form {
             margin: $spacing-3;
+            margin-bottom: 50px;
         }
         dot-textarea-content {
             height: 40vh;