add permissions and history tab and load Iframe in Tabs

core-web/apps/dotcms-ui/src/app/api/services/dot-containers/dot-containers.service.spec.ts

@@ -81,7 +81,7 @@ describe('DotContainersService', () => {
             expect(container).toEqual(mockContainer);
         });
 
-        const req = httpMock.expectOne(`${CONTAINER_API_URL}123/working`);
+        const req = httpMock.expectOne(`${CONTAINER_API_URL}working?containerId=123`);
 
         expect(req.request.method).toBe('GET');
 

core-web/apps/dotcms-ui/src/app/api/services/dot-containers/dot-containers.service.ts

@@ -41,7 +41,7 @@ export class DotContainersService {
      * @memberof DotContainersService
      */
     getById(id: string, version = 'working'): Observable<DotContainer> {
-        const url = `${CONTAINER_API_URL}${id}/${version}`;
+        const url = `${CONTAINER_API_URL}${version}?containerId=${id}`;
 
         return this.request<DotContainer>({
             url

core-web/apps/dotcms-ui/src/app/app-routing.module.ts

@@ -17,7 +17,7 @@ import { DotCustomReuseStrategyService } from '@shared/dot-custom-reuse-strategy
 
 const PORTLETS_ANGULAR = [
     {
-        path: 'container-new',
+        path: 'containers',
         loadChildren: () =>
             import('@dotcms/app/portlets/dot-containers/dot-containers.module').then(
                 (m) => m.DotContainersModule

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

@@ -1,6 +1,7 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { DotContainerCreateComponent } from './dot-container-create.component';
+import { DotContainerCreateEditResolver } from './resolvers/dot-container-create.resolver';
 
 const routes: Routes = [
     {
@@ -11,6 +12,7 @@ const routes: Routes = [
 
 @NgModule({
     imports: [RouterModule.forChild(routes)],
-    exports: [RouterModule]
+    exports: [RouterModule],
+    providers: [DotContainerCreateEditResolver]
 })
 export class DotContainerCreateRoutingModule {}

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

@@ -6,11 +6,11 @@
                     <dot-container-properties></dot-container-properties>
                 </ng-template>
             </p-tabPanel>
-            <p-tabPanel [header]="'message.containers.tab.permissions' | dm">
-                <dot-container-permissions></dot-container-permissions>
+            <p-tabPanel *ngIf="containerId" [header]="'message.containers.tab.permissions' | dm">
+                <dot-container-permissions [containerId]="containerId"></dot-container-permissions>
             </p-tabPanel>
-            <p-tabPanel [header]="'message.containers.tab.history' | dm">
-                <dot-container-history></dot-container-history>
+            <p-tabPanel *ngIf="containerId" [header]="'message.containers.tab.history' | dm">
+                <dot-container-history [containerId]="containerId"></dot-container-history>
             </p-tabPanel>
         </p-tabView>
     </div>

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

@@ -1,26 +1,57 @@
 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 = {};
+import { ActivatedRoute } from '@angular/router';
+import { DotRouterService } from '@dotcms/app/api/services/dot-router/dot-router.service';
+import { Pipe, PipeTransform } from '@angular/core';
+import { of } from 'rxjs';
+import { CONTAINER_SOURCE } from '@dotcms/app/shared/models/container/dot-container.model';
 
+@Pipe({
+    name: 'dm'
+})
+class DotMessageMockPipe implements PipeTransform {
+    transform(): string {
+        return 'Required';
+    }
+}
 describe('ContainerCreateComponent', () => {
     let component: DotContainerCreateComponent;
     let fixture: ComponentFixture<DotContainerCreateComponent>;
-    const messageServiceMock = new MockDotMessageService(messages);
 
     beforeEach(async () => {
         await TestBed.configureTestingModule({
-            declarations: [DotContainerCreateComponent],
-            imports: [DotMessagePipeModule],
+            declarations: [DotContainerCreateComponent, DotMessageMockPipe],
             providers: [
-                { provide: DotMessageService, useValue: messageServiceMock },
-                { provide: CoreWebService, useClass: CoreWebServiceMock }
+                { provide: CoreWebService, useClass: CoreWebServiceMock },
+                {
+                    provide: ActivatedRoute,
+                    useValue: {
+                        data: of({
+                            container: of({
+                                archived: false,
+                                live: true,
+                                working: true,
+                                locked: false,
+                                identifier: '',
+                                name: '',
+                                type: '',
+                                source: CONTAINER_SOURCE.DB,
+                                parentPermissionable: {
+                                    hostname: 'dotcms.com'
+                                }
+                            })
+                        }),
+                        snapshot: {
+                            params: {
+                                id: '123'
+                            }
+                        }
+                    }
+                },
+                DotRouterService
             ]
         }).compileComponents();
 

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

@@ -1,8 +1,27 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { DotRouterService } from '@dotcms/app/api/services/dot-router/dot-router.service';
+import { DotContainer } from '@dotcms/app/shared/models/container/dot-container.model';
+import { pluck, take } from 'rxjs/operators';
 
 @Component({
     selector: 'dot-container-create',
     templateUrl: './dot-container-create.component.html',
     styleUrls: ['./dot-container-create.component.scss']
 })
-export class DotContainerCreateComponent {}
+export class DotContainerCreateComponent implements OnInit {
+    containerId = '';
+    constructor(
+        private activatedRoute: ActivatedRoute,
+        private dotRouterService: DotRouterService
+    ) {}
+
+    ngOnInit() {
+        this.activatedRoute.data
+            .pipe(pluck('container'), take(1))
+            .subscribe((container: DotContainer) => {
+                if (container) this.containerId = container.identifier;
+                else this.dotRouterService.goToPreviousUrl();
+            });
+    }
+}

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

@@ -1,5 +1,8 @@
+@use "variables" as *;
+
 dot-portlet-box {
     height: 100%;
     overflow-x: auto;
     margin: 0;
+    padding: $spacing-4;
 }

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

@@ -13,35 +13,44 @@ export class IframeMockComponent {
     @ViewChild('iframeElement') iframeElement: ElementRef;
 }
 
+@Component({
+    selector: `dot-host-component`,
+    template: `<dot-container-history [containerId]="containerId"></dot-container-history>`
+})
+class DotTestHostComponent {
+    containerId = '';
+}
+
 describe('ContainerHistoryComponent', () => {
-    let component: DotContainerHistoryComponent;
-    let fixture: ComponentFixture<DotContainerHistoryComponent>;
+    let hostComponent: DotTestHostComponent;
+    let fixture: ComponentFixture<DotTestHostComponent>;
     let de: DebugElement;
 
     beforeEach(async () => {
         await TestBed.configureTestingModule({
-            declarations: [DotContainerHistoryComponent, IframeMockComponent],
+            declarations: [DotContainerHistoryComponent, IframeMockComponent, DotTestHostComponent],
             imports: [DotPortletBoxModule]
         }).compileComponents();
 
-        fixture = TestBed.createComponent(DotContainerHistoryComponent);
+        fixture = TestBed.createComponent(DotTestHostComponent);
         de = fixture.debugElement;
-        component = fixture.componentInstance;
+        hostComponent = fixture.componentInstance;
+        hostComponent.containerId = '123';
         fixture.detectChanges();
     });
 
     it('should create', () => {
-        expect(component).toBeTruthy();
+        expect(hostComponent).toBeTruthy();
     });
 
     describe('history', () => {
-        beforeEach(() => {
-            fixture.detectChanges();
-        });
-
         it('should set iframe history url', () => {
+            hostComponent.containerId = '123';
+            fixture.detectChanges();
             const permissions = de.query(By.css('[data-testId="historyIframe"]'));
-            expect(permissions.componentInstance.src).toBe('/html/containers/push_history.jsp');
+            expect(permissions.componentInstance.src).toBe(
+                '/html/containers/push_history.jsp?containerId=123&popup=true'
+            );
         });
     });
 });

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, ViewChild } from '@angular/core';
+import { Component, Input, OnChanges, ViewChild } from '@angular/core';
 import { IframeComponent } from '@components/_common/iframe/iframe-component';
 
 @Component({
@@ -7,10 +7,12 @@ import { IframeComponent } from '@components/_common/iframe/iframe-component';
     styleUrls: ['./dot-container-history.component.scss']
 })
 export class DotContainerHistoryComponent implements OnChanges {
+    @Input() containerId: string;
     @ViewChild('historyIframe') historyIframe: IframeComponent;
     historyUrl = '/html/containers/push_history.jsp';
 
     ngOnChanges(): void {
+        this.historyUrl = `/html/containers/push_history.jsp?containerId=${this.containerId}&popup=true`;
         if (this.historyIframe) {
             this.historyIframe.iframeElement.nativeElement.contentWindow.location.reload();
         }

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

@@ -13,35 +13,48 @@ export class IframeMockComponent {
     @ViewChild('iframeElement') iframeElement: ElementRef;
 }
 
+@Component({
+    selector: `dot-host-component`,
+    template: `<dot-container-permissions [containerId]="containerId"></dot-container-permissions>`
+})
+class DotTestHostComponent {
+    containerId = '';
+}
+
 describe('ContainerPermissionsComponent', () => {
-    let component: DotContainerPermissionsComponent;
-    let fixture: ComponentFixture<DotContainerPermissionsComponent>;
+    let hostComponent: DotTestHostComponent;
+    let fixture: ComponentFixture<DotTestHostComponent>;
     let de: DebugElement;
 
     beforeEach(async () => {
         await TestBed.configureTestingModule({
-            declarations: [DotContainerPermissionsComponent, IframeMockComponent],
+            declarations: [
+                DotContainerPermissionsComponent,
+                IframeMockComponent,
+                DotTestHostComponent
+            ],
             imports: [DotPortletBoxModule]
         }).compileComponents();
 
         fixture = TestBed.createComponent(DotContainerPermissionsComponent);
         de = fixture.debugElement;
-        component = fixture.componentInstance;
+        hostComponent = fixture.componentInstance;
+        hostComponent.containerId = '123';
         fixture.detectChanges();
     });
 
     it('should create', () => {
-        expect(component).toBeTruthy();
+        expect(hostComponent).toBeTruthy();
     });
 
     describe('permissions', () => {
-        beforeEach(() => {
-            fixture.detectChanges();
-        });
-
         it('should set iframe permissions url', () => {
+            hostComponent.containerId = '123';
+            fixture.detectChanges();
             const permissions = de.query(By.css('[data-testId="permissionsIframe"]'));
-            expect(permissions.componentInstance.src).toBe('/html/containers/permissions.jsp');
+            expect(permissions.componentInstance.src).toBe(
+                '/html/containers/permissions.jsp?containerId=123&popup=true'
+            );
         });
     });
 });

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

@@ -1,10 +1,14 @@
-import { Component } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 
 @Component({
     selector: 'dot-container-permissions',
     templateUrl: './dot-container-permissions.component.html',
     styleUrls: ['./dot-container-permissions.component.scss']
 })
-export class DotContainerPermissionsComponent {
+export class DotContainerPermissionsComponent implements OnInit {
+    @Input() containerId: string;
     permissionsUrl = '/html/containers/permissions.jsp';
+    ngOnInit() {
+        this.permissionsUrl = `/html/containers/permissions.jsp?containerId=${this.containerId}&popup=true`;
+    }
 }