Merge remote-tracking branch 'origin/master' into issue-29479-Create-…

…a-default-JobQueue-Implementation-using-Postgres

.github/workflows/cicd_1-pr.yml

@@ -69,8 +69,7 @@ jobs:
       postman: ${{ needs.initialize.outputs.backend == 'true' }}
       frontend: ${{ needs.initialize.outputs.frontend == 'true' }}
       cli: ${{ needs.initialize.outputs.cli == 'true' }}
-#      TODO: remove this param after testing E2E tests invocation
-      e2e: true
+      e2e: ${{ needs.initialize.outputs.build == 'true' }}
     secrets:
       DOTCMS_LICENSE: ${{ secrets.DOTCMS_LICENSE }}
 

.github/workflows/cicd_2-merge-queue.yml

@@ -26,6 +26,8 @@ jobs:
       postman: ${{ needs.initialize.outputs.backend == 'true' }}
       frontend: ${{ needs.initialize.outputs.frontend == 'true' }}
       cli: ${{ needs.initialize.outputs.cli == 'true' }}
+#      This will probably need to be re-evaluated, that is if it makes sense to tun E2E tests at the merge queue
+#      e2e: ${{ needs.initialize.outputs.build }}
     secrets:
       DOTCMS_LICENSE: ${{ secrets.DOTCMS_LICENSE }}
   finalize:

.github/workflows/cicd_3-trunk.yml

@@ -66,7 +66,6 @@ jobs:
     with:
       run-all-tests: ${{ inputs.run-all-tests || false }}
       artifact-run-id: ${{ needs.initialize.outputs.artifact-run-id }}
-      e2e: true
     secrets:
       DOTCMS_LICENSE: ${{ secrets.DOTCMS_LICENSE }}
     permissions:

core-web/libs/edit-content/src/lib/components/dot-edit-content-aside/dot-edit-content-aside.component.html

@@ -1,12 +1,49 @@
 <aside class="content-aside">
+    <div class="content-aside__toolbar">
+        <div class="tabs"></div>
+        <button
+            class="p-button p-button-sm p-button-text p-button-rounded p-button-icon-only content-aside__closeBtn"
+            (click)="$toggle.emit(!$collapsed())"
+            data-testId="toggle-button">
+            <svg
+                width="16"
+                height="16"
+                viewBox="0 0 20 20"
+                version="1.1"
+                xmlns="http://www.w3.org/2000/svg"
+                xmlns:xlink="http://www.w3.org/1999/xlink">
+                <g id="Canvas" fill="none">
+                    <g id="icon">
+                        <g id="Rectangle 2">
+                            <rect
+                                x="1"
+                                y="1"
+                                width="18"
+                                height="18"
+                                rx="1"
+                                stroke-width="2"
+                                stroke="#444444" />
+                        </g>
+                        <g id="Rectangle 2.1">
+                            <path
+                                d="M 0 0L 2 0L 2 20L 0 20L 0 0Z"
+                                transform="matrix(1 1.74846e-07 -1.74846e-07 1 12 0)"
+                                fill="#444444" />
+                        </g>
+                    </g>
+                </g>
+            </svg>
+        </button>
+    </div>
+
     <section class="content-aside__section">
         <div class="content-aside__header">
             <h2>{{ 'Information' | dm }}</h2>
         </div>
         <dot-content-aside-information
-            [contentlet]="contentlet"
-            [contentType]="contentType"
-            [loading]="loading"
+            [contentlet]="$contentlet()"
+            [contentType]="$contentType()"
+            [loading]="$loading()"
             data-testId="information" />
     </section>
 
@@ -19,8 +56,8 @@ <h2>{{ 'Workflow' | dm }}</h2>
             </div>
         </div>
         <dot-content-aside-workflow
-            [inode]="contentlet?.inode"
-            [contentType]="contentType"
+            [inode]="$contentlet()?.inode"
+            [contentType]="$contentType()"
             data-testId="workflow" />
     </section>
 </aside>

core-web/libs/edit-content/src/lib/components/dot-edit-content-aside/dot-edit-content-aside.component.scss

@@ -16,6 +16,22 @@
     overflow: auto;
 }
 
+.p-button.content-aside__closeBtn {
+    rect {
+        stroke: $color-palette-primary;
+    }
+
+    path {
+        fill: $color-palette-primary;
+    }
+}
+
+.content-aside__toolbar {
+    padding: $spacing-2;
+    display: flex;
+    justify-content: space-between;
+}
+
 .content-aside,
 .content-aside__section {
     display: block;

core-web/libs/edit-content/src/lib/components/dot-edit-content-aside/dot-edit-content-aside.component.spec.ts

@@ -16,7 +16,6 @@ describe('DotEditContentAsideComponent', () => {
     let spectator: Spectator<DotEditContentAsideComponent>;
     const createComponent = createComponentFactory({
         component: DotEditContentAsideComponent,
-        detectChanges: false,
         imports: [
             HttpClientTestingModule,
             DotContentAsideInformationComponent,
@@ -42,8 +41,10 @@ describe('DotEditContentAsideComponent', () => {
         spectator = createComponent({
             props: {
                 contentlet: CONTENT_FORM_DATA_MOCK.contentlet,
-                contentType: dotcmsContentTypeBasicMock
-            }
+                contentType: dotcmsContentTypeBasicMock,
+                loading: false,
+                collapsed: false
+            } as unknown
         });
     });
 
@@ -70,4 +71,14 @@ describe('DotEditContentAsideComponent', () => {
         );
         expect(dotContentAsideWorkflowComponent.contentType).toEqual(dotcmsContentTypeBasicMock);
     });
+
+    it('should emit toggle event on button click', () => {
+        const spy = jest.spyOn(spectator.component.$toggle, 'emit');
+
+        const toggleBtn = spectator.query('[data-testId="toggle-button"]');
+
+        spectator.click(toggleBtn);
+
+        expect(spy).toHaveBeenCalled();
+    });
 });

core-web/libs/edit-content/src/lib/components/dot-edit-content-aside/dot-edit-content-aside.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
 
 import { DotCMSContentType, DotCMSContentlet } from '@dotcms/dotcms-models';
 import { DotMessagePipe } from '@dotcms/ui';
@@ -15,7 +15,28 @@ import { DotContentAsideWorkflowComponent } from './components/dot-content-aside
     imports: [DotMessagePipe, DotContentAsideInformationComponent, DotContentAsideWorkflowComponent]
 })
 export class DotEditContentAsideComponent {
-    @Input() contentlet!: DotCMSContentlet;
-    @Input() contentType!: DotCMSContentType;
-    @Input() loading!: boolean;
+    /**
+     * A variable with the contentlet information
+     */
+    $contentlet = input.required<DotCMSContentlet>({ alias: 'contentlet' });
+
+    /**
+     * A variable with the content type
+     */
+    $contentType = input.required<DotCMSContentType>({ alias: 'contentType' });
+
+    /**
+     * A variable to control the loading state
+     */
+    $loading = input.required<boolean>({ alias: 'loading' });
+
+    /**
+     * A variable to control the collapsed state
+     */
+    $collapsed = input.required<boolean>({ alias: 'collapsed' });
+
+    /**
+     * A variable to control the toggle state
+     */
+    $toggle = output<boolean>({ alias: 'toggle' });
 }

core-web/libs/edit-content/src/lib/components/dot-edit-content-toolbar/dot-edit-content-toolbar.component.html

@@ -1,9 +1,10 @@
 <p-toolbar class="header">
     <div class="p-toolbar-group-left"></div>
     <div class="p-toolbar-group-right">
+        <ng-content></ng-content>
         <dot-workflow-actions
-            (actionFired)="actionFired.emit($event)"
-            [actions]="actions"
+            (actionFired)="$actionFired.emit($event)"
+            [actions]="$actions()"
             [groupActions]="true" />
     </div>
 </p-toolbar>

core-web/libs/edit-content/src/lib/components/dot-edit-content-toolbar/dot-edit-content-toolbar.component.scss

@@ -5,3 +5,11 @@
     justify-content: flex-start;
     flex-direction: row-reverse; // Make the order of the buttons to be from right to left
 }
+
+:host:not(.showSidebar) {
+    ::ng-deep {
+        .p-toolbar {
+            padding-right: 0.75rem;
+        }
+    }
+}

core-web/libs/edit-content/src/lib/components/dot-edit-content-toolbar/dot-edit-content-toolbar.component.spec.ts

@@ -22,7 +22,7 @@ describe('DotEditContentToolbarComponent', () => {
         spectator = createComponent({
             props: {
                 actions: WORKFLOW_ACTIONS_MOCK
-            }
+            } as unknown
         });
         spectator.detectComponentChanges();
     });
@@ -36,7 +36,7 @@ describe('DotEditContentToolbarComponent', () => {
     });
 
     it('should emit the action dot-workflow-actions emits the fired action', () => {
-        const spy = jest.spyOn(spectator.component.actionFired, 'emit');
+        const spy = jest.spyOn(spectator.component.$actionFired, 'emit');
         const component = spectator.query(DotWorkflowActionsComponent);
 
         component.actionFired.emit(WORKFLOW_ACTIONS_MOCK[0]);

core-web/libs/edit-content/src/lib/components/dot-edit-content-toolbar/dot-edit-content-toolbar.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
 
 import { ToolbarModule } from 'primeng/toolbar';
 
@@ -14,6 +14,6 @@ import { DotWorkflowActionsComponent } from '@dotcms/ui';
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class DotEditContentToolbarComponent {
-    @Input() actions: DotCMSWorkflowAction[];
-    @Output() actionFired = new EventEmitter<DotCMSWorkflowAction>();
+    $actions = input.required<DotCMSWorkflowAction[]>({ alias: 'actions' });
+    $actionFired = output<DotCMSWorkflowAction>({ alias: 'actionFired' });
 }

core-web/libs/edit-content/src/lib/feature/edit-content/edit-content.layout.component.html

@@ -1,5 +1,5 @@
 @if (vm$ | async; as vm) {
-    @if (vm?.contentType?.metadata?.[featuredFlagContentKEY]) {
+    @if (vm?.contentType?.metadata?.[$featuredFlagContentKEY()]) {
         <p-messages
             class="topBar"
             styleClass="p-message-border-y"
@@ -28,12 +28,50 @@
             })
         "
         [actions]="vm.actions"
-        class="header"></dot-edit-content-toolbar>
+        class="header"
+        [class.showSidebar]="vm.layout.showSidebar">
+        <button
+            [class.showSidebar]="vm.layout.showSidebar"
+            class="edit-content-layout__sidebar-btn p-button p-button-sm p-button-text p-button-rounded p-button-icon-only content-aside__closeBtn"
+            (click)="toggleSidebar()"
+            data-testId="sidebar-toggle">
+            <svg
+                width="16"
+                height="16"
+                viewBox="0 0 20 20"
+                version="1.1"
+                xmlns="http://www.w3.org/2000/svg"
+                xmlns:xlink="http://www.w3.org/1999/xlink">
+                <g id="Canvas" fill="none">
+                    <g id="icon">
+                        <g id="Rectangle 2">
+                            <rect
+                                x="1"
+                                y="1"
+                                width="18"
+                                height="18"
+                                rx="1"
+                                stroke-width="2"
+                                stroke="#444444" />
+                        </g>
+                        <g id="Rectangle 2.1">
+                            <path
+                                d="M 0 0L 2 0L 2 20L 0 20L 0 0Z"
+                                transform="matrix(1 1.74846e-07 -1.74846e-07 1 12 0)"
+                                fill="#444444" />
+                        </g>
+                    </g>
+                </g>
+            </svg>
+        </button>
+    </dot-edit-content-toolbar>
     <dot-edit-content-form (changeValue)="setFormValue($event)" [formData]="vm" class="body" />
     <dot-edit-content-aside
         [loading]="vm.loading"
         [contentlet]="vm.contentlet"
         [contentType]="vm.contentType"
+        [collapsed]="vm.layout.showSidebar"
+        (toggle)="toggleSidebar()"
         class="sidebar" />
 } @else {
     {{ 'edit.content.layout.no.content.to.show ' | dm }}

core-web/libs/edit-content/src/lib/feature/edit-content/edit-content.layout.component.scss

@@ -13,6 +13,24 @@
     width: 100%;
 }
 
+.edit-content-layout__sidebar-btn {
+    rect {
+        stroke: $color-palette-primary;
+    }
+
+    path {
+        fill: $color-palette-primary;
+    }
+    transition: all 300ms ease-in-out;
+    &.showSidebar {
+        width: 0;
+        min-width: 0;
+        height: 0;
+        padding: 0;
+        visibility: hidden;
+    }
+}
+
 .topBar {
     grid-area: topBar;