('', {
- nonNullable: true,
- validators: [Validators.required, Validators.maxLength(255)]
+ validators: [Validators.maxLength(255)]
})
});
}
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/dot-experiments-list/components/dot-experiments-empty-experiments/dot-experiments-empty-experiments.component.spec.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/dot-experiments-list/components/dot-experiments-empty-experiments/dot-experiments-empty-experiments.component.spec.ts
index b08a79454e2a..54f396ee3a96 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/dot-experiments-list/components/dot-experiments-empty-experiments/dot-experiments-empty-experiments.component.spec.ts
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/dot-experiments-list/components/dot-experiments-empty-experiments/dot-experiments-empty-experiments.component.spec.ts
@@ -11,7 +11,7 @@ import { DotMessagePipeModule } from '@pipes/dot-message/dot-message-pipe.module
import { DotExperimentsEmptyExperimentsComponent } from './dot-experiments-empty-experiments.component';
const messageServiceMock = new MockDotMessageService({
- 'experimentspage.add.new.experiment': 'Add a new experiment'
+ 'experimentspage.add.new.experiment': 'Create a new Experiment'
});
describe('DotExperimentsEmptyExperimentsComponent', () => {
@@ -48,7 +48,7 @@ describe('DotExperimentsEmptyExperimentsComponent', () => {
expect(dotIcon).toExist();
expect(spectator.query(byTestId('description'))).toHaveText(description);
- expect(pButton.label).toBe('Add a new experiment');
+ expect(pButton.label).toBe('Create a new Experiment');
});
it('should show icon and title, not button', () => {
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/dot-experiments-list/components/dot-experiments-list-table/dot-experiments-list-table.component.html b/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/dot-experiments-list/components/dot-experiments-list-table/dot-experiments-list-table.component.html
index 06ecdf988d9a..8264b800d721 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/dot-experiments-list/components/dot-experiments-list-table/dot-experiments-list-table.component.html
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/dot-experiments-list/components/dot-experiments-list-table/dot-experiments-list-table.component.html
@@ -27,10 +27,10 @@
{{ experiment.name }}
|
- {{ experiment.creationDate | date: 'longDate' }}
+ {{ experiment.creationDate | dotRelativeDate : true }}
|
- {{ experiment.modDate | date: 'longDate' }}
+ {{ experiment.modDate | dotRelativeDate : true }}
|
+
+
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/dot-experiments-list/components/dot-experiments-list-table/dot-experiments-list-table.component.scss b/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/dot-experiments-list/components/dot-experiments-list-table/dot-experiments-list-table.component.scss
index e991c51bce03..aacda3d23e2c 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/dot-experiments-list/components/dot-experiments-list-table/dot-experiments-list-table.component.scss
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/dot-experiments-list/components/dot-experiments-list-table/dot-experiments-list-table.component.scss
@@ -15,16 +15,16 @@
border-spacing: 0;
tr:last-child td:first-child {
- border-bottom-left-radius: $border-radius-md;
+ border-bottom-left-radius: $border-radius-sm;
}
td:last-child {
- border-bottom-right-radius: $border-radius-md;
+ border-bottom-right-radius: $border-radius-sm;
}
th,
td {
- font-size: $font-size-medium;
+ font-size: $font-size-md;
font-weight: normal;
}
@@ -37,10 +37,10 @@
tr > th {
height: 40px;
padding: 0;
- color: $gray;
- font-size: $font-size-medium;
+ color: $color-palette-gray-700;
+ font-size: $font-size-md;
font-weight: normal;
- border: 1px solid $gray-lighter;
+ border: 1px solid $color-palette-gray-300;
border-width: 0 0 1px 0;
font-weight: 500;
@@ -56,18 +56,18 @@
.p-datatable-header {
border: none;
- color: $gray;
+ color: $color-palette-gray-700;
background: transparent;
}
.p-datatable-wrapper {
- border-radius: $border-radius-md;
- border: 1px solid $gray-lighter;
+ border-radius: $border-radius-sm;
+ border: 1px solid $color-palette-gray-300;
.p-datatable-tbody {
tr {
height: 40px;
- border: 1px solid $gray-lighter;
+ border: 1px solid $color-palette-gray-300;
transition: background-color $basic-speed ease;
background: transparent;
@@ -76,7 +76,7 @@
}
&:hover {
- background-color: $tr-hover-color;
+ background-color: $color-palette-primary-100;
}
td {
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/dot-experiments-list/components/dot-experiments-list-table/dot-experiments-list-table.component.spec.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/dot-experiments-list/components/dot-experiments-list-table/dot-experiments-list-table.component.spec.ts
index 284bca329bf1..469cdb74a1db 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/dot-experiments-list/components/dot-experiments-list-table/dot-experiments-list-table.component.spec.ts
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/dot-experiments-list/components/dot-experiments-list-table/dot-experiments-list-table.component.spec.ts
@@ -11,104 +11,35 @@ import { ToastModule } from 'primeng/toast';
import { UiDotIconButtonTooltipComponent } from '@components/_common/dot-icon-button-tooltip/dot-icon-button-tooltip.component';
import { UiDotIconButtonTooltipModule } from '@components/_common/dot-icon-button-tooltip/dot-icon-button-tooltip.module';
import { DotMessageService } from '@dotcms/data-access';
-import {
- DotExperiment,
- DotExperimentStatusList,
- GroupedExperimentByStatus,
- TrafficProportionTypes
-} from '@dotcms/dotcms-models';
+import { DotExperimentStatusList, GroupedExperimentByStatus } from '@dotcms/dotcms-models';
import { DotIconModule } from '@dotcms/ui';
-import { MockDotMessageService } from '@dotcms/utils-testing';
+import { DotFormatDateServiceMock, MockDotMessageService } from '@dotcms/utils-testing';
import { DotMessagePipeModule } from '@pipes/dot-message/dot-message-pipe.module';
+import { DotRelativeDatePipe } from '@pipes/dot-relative-date/dot-relative-date.pipe';
+import { getExperimentMock } from '@portlets/dot-experiments/test/mocks';
+import { DotFormatDateService } from '@services/dot-format-date-service';
import { DotExperimentsListTableComponent } from './dot-experiments-list-table.component';
import { DotExperimentsEmptyExperimentsComponent } from '../dot-experiments-empty-experiments/dot-experiments-empty-experiments.component';
-const draftExperiments: DotExperiment[] = [
- {
- id: '111',
- identifier: '1111-1111-1111-1111',
- pageId: '456',
- status: DotExperimentStatusList.DRAFT,
- archived: false,
- readyToStart: false,
- description: 'Praesent at molestie mauris, quis vulputate augue.',
- name: 'Praesent at molestie mauris',
- trafficAllocation: 100,
- scheduling: null,
- trafficProportion: {
- type: TrafficProportionTypes.SPLIT_EVENLY,
- variants: [{ id: '111', name: 'DEFAULT', weight: 100 }]
- },
- creationDate: new Date('2022-08-21 14:50:03'),
- modDate: new Date('2022-08-21 18:50:03'),
- goals: null
- }
-];
-const endedExperiments: DotExperiment[] = [
- {
- id: '222',
- identifier: '2222-2222-2222-2222',
- pageId: '456',
- status: DotExperimentStatusList.ENDED,
- archived: false,
- readyToStart: false,
- description: 'Praesent at molestie mauris, quis vulputate augue.',
- name: 'Praesent at molestie mauris',
- trafficAllocation: 100,
- scheduling: null,
- trafficProportion: {
- type: TrafficProportionTypes.SPLIT_EVENLY,
- variants: [{ id: '222', name: 'DEFAULT', weight: 100 }]
- },
- creationDate: new Date('2022-08-21 14:50:03'),
- modDate: new Date('2022-08-21 18:50:03'),
- goals: null
- }
-];
-const archivedExperiments: DotExperiment[] = [
- {
- id: '333',
- identifier: '3333-3333-3333-3333',
- pageId: '456',
- status: DotExperimentStatusList.ARCHIVED,
- archived: false,
- readyToStart: false,
- description: 'Praesent at molestie mauris, quis vulputate augue.',
- name: 'Praesent at molestie mauris',
- trafficAllocation: 100,
- scheduling: null,
- trafficProportion: {
- type: TrafficProportionTypes.SPLIT_EVENLY,
- variants: [{ id: '333', name: 'DEFAULT', weight: 100 }]
- },
- creationDate: new Date('2022-08-21 14:50:03'),
- modDate: new Date('2022-08-21 18:50:03'),
- goals: null
- }
-];
-const scheduledExperiments: DotExperiment[] = [
- {
- id: '444',
- identifier: '4444-4444-4444-4444',
- pageId: '456',
- status: DotExperimentStatusList.SCHEDULED,
- archived: false,
- readyToStart: false,
- description: 'Praesent at molestie mauris, quis vulputate augue.',
- name: 'Praesent at molestie mauris',
- trafficAllocation: 100,
- scheduling: null,
- trafficProportion: {
- type: TrafficProportionTypes.SPLIT_EVENLY,
- variants: [{ id: '4444', name: 'DEFAULT', weight: 100 }]
- },
- creationDate: new Date('2022-08-21 14:50:03'),
- modDate: new Date('2022-08-21 18:50:03'),
- goals: null
- }
-];
+const DRAFT_EXPERIMENT_MOCK = getExperimentMock(0);
+const ARCHIVE_EXPERIMENT_MOCK = {
+ ...getExperimentMock(1),
+ status: DotExperimentStatusList.ARCHIVED
+};
+const RUNNING_EXPERIMENT_MOCK = {
+ ...getExperimentMock(1),
+ status: DotExperimentStatusList.RUNNING
+};
+const ENDED_EXPERIMENT_MOCK = {
+ ...getExperimentMock(2),
+ status: DotExperimentStatusList.ENDED
+};
+const SCHEDULED_EXPERIMENT_MOCK = {
+ ...getExperimentMock(1),
+ status: DotExperimentStatusList.SCHEDULED
+};
@Pipe({ name: 'date' })
class MockDatePipe implements PipeTransform {
@@ -139,7 +70,8 @@ describe('DotExperimentsListTableComponent', () => {
ConfirmPopupModule,
ToastModule,
DotMessagePipeModule,
- RouterTestingModule
+ RouterTestingModule,
+ DotRelativeDatePipe
],
component: DotExperimentsListTableComponent,
componentMocks: [ConfirmPopup],
@@ -150,7 +82,8 @@ describe('DotExperimentsListTableComponent', () => {
useValue: messageServiceMock
},
MessageService,
- ConfirmationService
+ ConfirmationService,
+ { provide: DotFormatDateService, useClass: DotFormatDateServiceMock }
]
});
@@ -169,8 +102,8 @@ describe('DotExperimentsListTableComponent', () => {
it('should show 2 instances of NgPrime Table component', () => {
const INSTANCES_OF_NGPRIME_TABLE = 2;
const groupedExperimentByStatus: GroupedExperimentByStatus = {
- [DotExperimentStatusList.DRAFT]: [...draftExperiments],
- [DotExperimentStatusList.ARCHIVED]: [...archivedExperiments]
+ [DotExperimentStatusList.DRAFT]: [DRAFT_EXPERIMENT_MOCK],
+ [DotExperimentStatusList.ARCHIVED]: [ARCHIVE_EXPERIMENT_MOCK]
};
spectator.setInput('experiments', groupedExperimentByStatus);
@@ -186,7 +119,7 @@ describe('DotExperimentsListTableComponent', () => {
const COLUMNS_QTY_BY_ROW = 4;
const groupedExperimentByStatus: GroupedExperimentByStatus = {
- [DotExperimentStatusList.DRAFT]: [...draftExperiments]
+ [DotExperimentStatusList.DRAFT]: [DRAFT_EXPERIMENT_MOCK]
};
spectator.setInput('experiments', groupedExperimentByStatus);
@@ -198,17 +131,15 @@ describe('DotExperimentsListTableComponent', () => {
groupedExperimentByStatus.DRAFT[0].name
);
expect(spectator.query(byTestId('experiment-row__createdDate'))).toHaveText(
- groupedExperimentByStatus.DRAFT[0].creationDate.toLocaleDateString()
- );
- expect(spectator.query(byTestId('experiment-row__modDate'))).toHaveText(
- groupedExperimentByStatus.DRAFT[0].modDate.toLocaleDateString()
+ '1 hour ago'
);
+ expect(spectator.query(byTestId('experiment-row__modDate'))).toHaveText('1 hour ago');
});
describe('Actions icons', () => {
it('should has DELETE icon when experiment is DRAFT', () => {
const groupedExperimentByStatus: GroupedExperimentByStatus = {
- [DotExperimentStatusList.DRAFT]: [...draftExperiments]
+ [DotExperimentStatusList.DRAFT]: [DRAFT_EXPERIMENT_MOCK]
};
spectator.setInput('experiments', groupedExperimentByStatus);
@@ -219,7 +150,7 @@ describe('DotExperimentsListTableComponent', () => {
it('should the row has DELETE icon when experiment is SCHEDULED', () => {
const groupedExperimentByStatus: GroupedExperimentByStatus = {
- [DotExperimentStatusList.SCHEDULED]: [...scheduledExperiments]
+ [DotExperimentStatusList.SCHEDULED]: [SCHEDULED_EXPERIMENT_MOCK]
};
spectator.setInput('experiments', groupedExperimentByStatus);
@@ -229,7 +160,7 @@ describe('DotExperimentsListTableComponent', () => {
});
it('should the row has ARCHIVE icon when is ENDED', () => {
const groupedExperimentByStatus: GroupedExperimentByStatus = {
- [DotExperimentStatusList.ENDED]: [...endedExperiments]
+ [DotExperimentStatusList.ENDED]: [ENDED_EXPERIMENT_MOCK]
};
spectator.setInput('experiments', groupedExperimentByStatus);
@@ -240,7 +171,7 @@ describe('DotExperimentsListTableComponent', () => {
it('should the row not has any icon in action column', () => {
const groupedExperimentByStatus: GroupedExperimentByStatus = {
- [DotExperimentStatusList.ARCHIVED]: [...archivedExperiments]
+ [DotExperimentStatusList.ARCHIVED]: [ARCHIVE_EXPERIMENT_MOCK]
};
spectator.setInput('experiments', groupedExperimentByStatus);
@@ -248,12 +179,23 @@ describe('DotExperimentsListTableComponent', () => {
uiDotIconButtonTooltipComponent = spectator.query(UiDotIconButtonTooltipComponent);
expect(uiDotIconButtonTooltipComponent).not.toExist();
});
+
+ it('should the row has REPORTS icon when is RUNNING', () => {
+ const groupedExperimentByStatus: GroupedExperimentByStatus = {
+ [DotExperimentStatusList.RUNNING]: [RUNNING_EXPERIMENT_MOCK]
+ };
+
+ spectator.setInput('experiments', groupedExperimentByStatus);
+
+ uiDotIconButtonTooltipComponent = spectator.query(UiDotIconButtonTooltipComponent);
+ expect(uiDotIconButtonTooltipComponent.icon).toBe('bar_chart');
+ });
});
});
describe('Output deleteItem', () => {
it('should emit the $event on click', () => {
- const itemToDelete = draftExperiments[0];
+ const itemToDelete = DRAFT_EXPERIMENT_MOCK;
const event = new MouseEvent('click');
let output;
@@ -269,7 +211,7 @@ describe('DotExperimentsListTableComponent', () => {
describe('Output archiveItem', () => {
it('should emit the $event on click', () => {
- const itemToArchive = endedExperiments[0];
+ const itemToArchive = ENDED_EXPERIMENT_MOCK;
const event = new MouseEvent('click');
let output;
@@ -282,4 +224,16 @@ describe('DotExperimentsListTableComponent', () => {
expect(output).toEqual(itemToArchive);
});
});
+
+ describe('Output viewReports', () => {
+ it('should emit the $event on click', () => {
+ const itemToView = RUNNING_EXPERIMENT_MOCK;
+ let output;
+
+ spectator.output('goToReport').subscribe((result) => (output = result));
+ spectator.component.viewReports(itemToView);
+
+ expect(output).toEqual(itemToView);
+ });
+ });
});
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/dot-experiments-list/components/dot-experiments-list-table/dot-experiments-list-table.component.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/dot-experiments-list/components/dot-experiments-list-table/dot-experiments-list-table.component.ts
index 7c89e866195a..2bb82ca8cf0e 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/dot-experiments-list/components/dot-experiments-list-table/dot-experiments-list-table.component.ts
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/dot-experiments-list/components/dot-experiments-list-table/dot-experiments-list-table.component.ts
@@ -24,6 +24,9 @@ export class DotExperimentsListTableComponent {
@Output()
deleteItem = new EventEmitter();
+ @Output()
+ goToReport = new EventEmitter();
+
constructor(
private readonly dotMessageService: DotMessageService,
private readonly confirmationService: ConfirmationService
@@ -66,4 +69,14 @@ export class DotExperimentsListTableComponent {
accept: () => this.deleteItem.emit(item)
});
}
+
+ /**
+ * Go to report of experiment
+ * @param {DotExperiment} item
+ * @returns void
+ * @memberof DotExperimentsListTableComponent
+ */
+ viewReports(item: DotExperiment) {
+ this.goToReport.emit(item);
+ }
}
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/dot-experiments-list/dot-experiments-list.component.html b/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/dot-experiments-list/dot-experiments-list.component.html
index 3f6e17b680db..e9ee1d241e94 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/dot-experiments-list/dot-experiments-list.component.html
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/dot-experiments-list/dot-experiments-list.component.html
@@ -3,7 +3,7 @@
[isLoading]="vm.isLoading"
[title]="vm.page.pageTitle"
(goBack)="goToBrowserBack()"
- >
+ />
+ />
@@ -39,10 +40,10 @@
+ />
-
+
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/dot-experiments-list/dot-experiments-list.component.spec.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/dot-experiments-list/dot-experiments-list.component.spec.ts
index a121a7ae545d..3c79e551dc15 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/dot-experiments-list/dot-experiments-list.component.spec.ts
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/dot-experiments-list/dot-experiments-list.component.spec.ts
@@ -8,7 +8,7 @@ import {
import { of } from 'rxjs';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
import { ConfirmationService, MessageService } from 'primeng/api';
import { ButtonModule } from 'primeng/button';
@@ -33,7 +33,8 @@ import {
import { DotExperimentsService } from '@portlets/dot-experiments/shared/services/dot-experiments.service';
import {
ActivatedRouteListStoreMock,
- getExperimentAllMocks
+ getExperimentAllMocks,
+ getExperimentMock
} from '@portlets/dot-experiments/test/mocks';
import { DotDynamicDirective } from '@portlets/shared/directives/dot-dynamic.directive';
import { DotHttpErrorManagerService } from '@services/dot-http-error-manager/dot-http-error-manager.service';
@@ -42,6 +43,8 @@ import { DotExperimentsListComponent } from './dot-experiments-list.component';
const EXPERIMENT_MOCKS = getExperimentAllMocks();
+const EXPERIMENT_MOCK = getExperimentMock(0);
+
describe('ExperimentsListComponent', () => {
let spectator: Spectator;
let dotExperimentsStatusFilterComponent: DotExperimentsStatusFilterComponent;
@@ -49,6 +52,7 @@ describe('ExperimentsListComponent', () => {
let dotExperimentsListSkeletonComponent: DotExperimentsListSkeletonComponent;
let dotExperimentsService: SpyObject;
+ let router: SpyObject;
const createComponent = createComponentFactory({
imports: [
@@ -70,6 +74,7 @@ describe('ExperimentsListComponent', () => {
DotExperimentsListTableComponent
],
providers: [
+ mockProvider(Router),
mockProvider(DotMessagePipe),
mockProvider(DotMessageService),
mockProvider(DotExperimentsService),
@@ -89,6 +94,7 @@ describe('ExperimentsListComponent', () => {
detectChanges: false
});
+ router = spectator.inject(Router);
dotExperimentsService = spectator.inject(DotExperimentsService);
dotExperimentsService.getAll.and.returnValue(of(EXPERIMENT_MOCKS));
});
@@ -170,4 +176,20 @@ describe('ExperimentsListComponent', () => {
expect(spectator.query(DotExperimentsCreateComponent)).toExist();
});
+
+ it('should go to Report Container', () => {
+ spectator.detectComponentChanges();
+ spectator.component.goToViewExperimentReport(EXPERIMENT_MOCK);
+ expect(router.navigate).toHaveBeenCalledWith(
+ ['/edit-page/experiments/reports/', EXPERIMENT_MOCK.id],
+ {
+ queryParams: {
+ editPageTab: null,
+ variantName: null,
+ experimentId: null
+ },
+ queryParamsHandling: 'merge'
+ }
+ );
+ });
});
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/dot-experiments-list/dot-experiments-list.component.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/dot-experiments-list/dot-experiments-list.component.ts
index d0938b1f40d4..0a6f559c5741 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/dot-experiments-list/dot-experiments-list.component.ts
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/dot-experiments-list/dot-experiments-list.component.ts
@@ -118,4 +118,21 @@ export class DotExperimentsListComponent {
this.sidebarHost.viewContainerRef.clear();
}
}
+
+ /**
+ * Go to view Experiment Report
+ * @param {DotExperiment} experiment
+ * @returns void
+ * @memberof DotExperimentsShellComponent
+ */
+ goToViewExperimentReport(experiment: DotExperiment) {
+ this.router.navigate(['/edit-page/experiments/reports/', experiment.id], {
+ queryParams: {
+ editPageTab: null,
+ variantName: null,
+ experimentId: null
+ },
+ queryParamsHandling: 'merge'
+ });
+ }
}
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/dot-experiments-list/dot-experiments-list.module.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/dot-experiments-list/dot-experiments-list.module.ts
index eaa906ef1618..26171cea86de 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/dot-experiments-list/dot-experiments-list.module.ts
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/dot-experiments-list/dot-experiments-list.module.ts
@@ -16,6 +16,7 @@ import { UiDotIconButtonModule } from '@components/_common/dot-icon-button/dot-i
import { UiDotIconButtonTooltipModule } from '@components/_common/dot-icon-button-tooltip/dot-icon-button-tooltip.module';
import { DotIconModule } from '@dotcms/ui';
import { DotMessagePipeModule } from '@pipes/dot-message/dot-message-pipe.module';
+import { DotRelativeDatePipe } from '@pipes/dot-relative-date/dot-relative-date.pipe';
import { DotExperimentsListRoutingModule } from '@portlets/dot-experiments/dot-experiments-list/dot-experiments-list-routing.module';
import { DotExperimentsService } from '@portlets/dot-experiments/shared/services/dot-experiments.service';
import { DotExperimentsUiHeaderComponent } from '@portlets/dot-experiments/shared/ui/dot-experiments-header/dot-experiments-ui-header.component';
@@ -58,7 +59,8 @@ import { DotExperimentsListComponent } from './dot-experiments-list.component';
MenuModule,
ConfirmDialogModule,
ConfirmPopupModule,
- ToastModule
+ ToastModule,
+ DotRelativeDatePipe
],
providers: [DotExperimentsService]
})
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/dot-experiments-reports/components/dot-experiments-reports-skeleton/dot-experiments-reports-skeleton.component.html b/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/dot-experiments-reports/components/dot-experiments-reports-skeleton/dot-experiments-reports-skeleton.component.html
new file mode 100644
index 000000000000..07d556d1f117
--- /dev/null
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/dot-experiments-reports/components/dot-experiments-reports-skeleton/dot-experiments-reports-skeleton.component.html
@@ -0,0 +1,46 @@
+
+
+
+
+
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/dot-experiments-reports/components/dot-experiments-reports-skeleton/dot-experiments-reports-skeleton.component.scss b/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/dot-experiments-reports/components/dot-experiments-reports-skeleton/dot-experiments-reports-skeleton.component.scss
new file mode 100644
index 000000000000..49541099559f
--- /dev/null
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/dot-experiments-reports/components/dot-experiments-reports-skeleton/dot-experiments-reports-skeleton.component.scss
@@ -0,0 +1,31 @@
+@use "variables" as *;
+
+:host {
+ width: 100%;
+}
+
+.summary-skeleton {
+ margin-top: 1.5rem;
+ margin-bottom: 1.5rem;
+}
+
+.chart-skeleton {
+ margin-top: 1rem;
+}
+
+.chart-skeleton-container {
+ background-color: $white;
+ padding: $spacing-4;
+ border-radius: $border-radius-xl;
+ min-height: 500px;
+}
+
+.chart-skeleton-content {
+ margin-top: 1rem;
+}
+
+@media only screen and (max-width: $screen-lg-max) {
+ .chart-skeleton-container {
+ width: calc(100% - $spacing-5);
+ }
+}
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/dot-experiments-reports/components/dot-experiments-reports-skeleton/dot-experiments-reports-skeleton.component.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/dot-experiments-reports/components/dot-experiments-reports-skeleton/dot-experiments-reports-skeleton.component.ts
new file mode 100644
index 000000000000..f977cbc3e4a6
--- /dev/null
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/dot-experiments-reports/components/dot-experiments-reports-skeleton/dot-experiments-reports-skeleton.component.ts
@@ -0,0 +1,13 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+import { SkeletonModule } from 'primeng/skeleton';
+
+@Component({
+ selector: 'dot-experiments-reports-skeleton',
+ standalone: true,
+ imports: [SkeletonModule],
+ templateUrl: './dot-experiments-reports-skeleton.component.html',
+ styleUrls: ['/dot-experiments-reports-skeleton.component.scss'],
+ changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class DotExperimentsReportsSkeletonComponent {}
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/dot-experiments-reports/dot-experiments-reports.component.html b/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/dot-experiments-reports/dot-experiments-reports.component.html
new file mode 100644
index 000000000000..a545eb865f6e
--- /dev/null
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/dot-experiments-reports/dot-experiments-reports.component.html
@@ -0,0 +1,26 @@
+
+
+
+
+
+
+
+
+
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/dot-experiments-reports/dot-experiments-reports.component.scss b/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/dot-experiments-reports/dot-experiments-reports.component.scss
new file mode 100644
index 000000000000..43cfab2f87be
--- /dev/null
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/dot-experiments-reports/dot-experiments-reports.component.scss
@@ -0,0 +1,40 @@
+@use "variables" as *;
+
+:host {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ padding-bottom: $spacing-7;
+}
+
+.dot-experiment-report-content {
+ padding: $spacing-3 $spacing-5 $spacing-5;
+ row-gap: $spacing-3;
+ width: 100%;
+ overflow-y: scroll;
+ height: 100%;
+ background-color: $color-palette-gray-100;
+
+ p {
+ font-size: $font-size-md;
+ line-height: $line-height;
+ }
+
+ .container {
+ background-color: $white;
+ padding: $spacing-4;
+ border-radius: $border-radius-xl;
+ min-height: 600px;
+
+ .content {
+ width: 1100px;
+ }
+ }
+}
+
+@media only screen and (max-width: $screen-lg-max) {
+ .content {
+ width: calc(100% - 2rem);
+ }
+}
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/dot-experiments-reports/dot-experiments-reports.component.spec.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/dot-experiments-reports/dot-experiments-reports.component.spec.ts
new file mode 100644
index 000000000000..d0ff4a138067
--- /dev/null
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/dot-experiments-reports/dot-experiments-reports.component.spec.ts
@@ -0,0 +1,132 @@
+import { createComponentFactory, mockProvider, Spectator, SpyObject } from '@ngneat/spectator';
+import { of } from 'rxjs';
+
+import { ActivatedRoute, Router } from '@angular/router';
+
+import { MessageService } from 'primeng/api';
+
+import { DotMessageService } from '@dotcms/data-access';
+import { ComponentStatus, DotExperimentStatusList } from '@dotcms/dotcms-models';
+import { MockDotMessageService } from '@dotcms/utils-testing';
+import { DotExperimentsReportsSkeletonComponent } from '@portlets/dot-experiments/dot-experiments-reports/components/dot-experiments-reports-skeleton/dot-experiments-reports-skeleton.component';
+import {
+ DotExperimentsReportsStore,
+ VmReportExperiment
+} from '@portlets/dot-experiments/dot-experiments-reports/store/dot-experiments-reports-store';
+import { DotExperimentsService } from '@portlets/dot-experiments/shared/services/dot-experiments.service';
+import { DotExperimentsExperimentSummaryComponent } from '@portlets/dot-experiments/shared/ui/dot-experiments-experiment-summary/dot-experiments-experiment-summary.component';
+import { DotExperimentsUiHeaderComponent } from '@portlets/dot-experiments/shared/ui/dot-experiments-header/dot-experiments-ui-header.component';
+import {
+ DotExperimentsReportsStoreMock,
+ getExperimentMock
+} from '@portlets/dot-experiments/test/mocks';
+import { DotHttpErrorManagerService } from '@services/dot-http-error-manager/dot-http-error-manager.service';
+
+import { DotExperimentsReportsComponent } from './dot-experiments-reports.component';
+
+const ActivatedRouteMock = {
+ snapshot: {
+ params: {
+ experimentId: '1111'
+ }
+ }
+};
+
+const defaultVmMock: VmReportExperiment = {
+ experiment: getExperimentMock(3),
+
+ isLoading: false,
+ showSummary: false,
+ status: ComponentStatus.INIT
+};
+
+const EXPERIMENT_MOCK = getExperimentMock(0);
+
+const messageServiceMock = new MockDotMessageService({
+ 'experiments.configure.scheduling.name': 'xx'
+});
+
+describe('DotExperimentsReportsComponent', () => {
+ let spectator: Spectator;
+ let router: SpyObject;
+
+ const createComponent = createComponentFactory({
+ imports: [
+ DotExperimentsUiHeaderComponent,
+ DotExperimentsReportsSkeletonComponent,
+ DotExperimentsExperimentSummaryComponent
+ ],
+ component: DotExperimentsReportsComponent,
+ componentProviders: [
+ mockProvider(DotExperimentsReportsStore, DotExperimentsReportsStoreMock)
+ ],
+ providers: [
+ {
+ provide: ActivatedRoute,
+ useValue: ActivatedRouteMock
+ },
+ {
+ provide: DotMessageService,
+ useValue: messageServiceMock
+ },
+ mockProvider(Router),
+ mockProvider(DotExperimentsService),
+ mockProvider(DotHttpErrorManagerService),
+ mockProvider(MessageService)
+ ]
+ });
+
+ beforeEach(() => {
+ spectator = createComponent({
+ detectChanges: false
+ });
+
+ router = spectator.inject(Router);
+ });
+
+ it('should show the skeleton component when is loading', () => {
+ spectator.component.vm$ = of({ ...defaultVmMock, isLoading: true });
+ spectator.detectChanges();
+
+ expect(spectator.query(DotExperimentsUiHeaderComponent)).toExist();
+ expect(spectator.query(DotExperimentsReportsSkeletonComponent)).toExist();
+ });
+
+ it("shouldn't show the skeleton component when is not loading", () => {
+ spectator.component.vm$ = of({ ...defaultVmMock, isLoading: false });
+ spectator.detectChanges();
+
+ expect(spectator.query(DotExperimentsUiHeaderComponent)).toExist();
+ expect(spectator.query(DotExperimentsReportsSkeletonComponent)).not.toExist();
+ });
+
+ it('should show the SummaryComponent', () => {
+ spectator.component.vm$ = of({
+ ...defaultVmMock,
+ experiment: {
+ ...defaultVmMock.experiment,
+ status: DotExperimentStatusList.RUNNING
+ },
+ isLoading: false,
+ showSummary: true
+ });
+ spectator.detectChanges();
+ expect(spectator.query(DotExperimentsExperimentSummaryComponent)).toExist();
+ });
+
+ it('should back to Experiment List', () => {
+ spectator.detectComponentChanges();
+ spectator.component.goToExperimentList(EXPERIMENT_MOCK.pageId);
+ expect(router.navigate).toHaveBeenCalledWith(
+ ['/edit-page/experiments/', EXPERIMENT_MOCK.pageId],
+ {
+ queryParams: {
+ editPageTab: null,
+ variantName: null,
+ experimentId: null
+ },
+ queryParamsHandling: 'merge'
+ }
+ );
+ });
+});
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/dot-experiments-reports/dot-experiments-reports.component.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/dot-experiments-reports/dot-experiments-reports.component.ts
new file mode 100644
index 000000000000..9de36f68c2bc
--- /dev/null
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/dot-experiments-reports/dot-experiments-reports.component.ts
@@ -0,0 +1,69 @@
+import { Observable } from 'rxjs';
+
+import { AsyncPipe, LowerCasePipe, NgIf } from '@angular/common';
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+
+import { TagModule } from 'primeng/tag';
+
+import { DotPipesModule } from '@pipes/dot-pipes.module';
+import { DotExperimentsConfigurationSkeletonComponent } from '@portlets/dot-experiments/dot-experiments-configuration/components/dot-experiments-configuration-skeleton/dot-experiments-configuration-skeleton.component';
+import { DotExperimentsReportsSkeletonComponent } from '@portlets/dot-experiments/dot-experiments-reports/components/dot-experiments-reports-skeleton/dot-experiments-reports-skeleton.component';
+import {
+ DotExperimentsReportsStore,
+ VmReportExperiment
+} from '@portlets/dot-experiments/dot-experiments-reports/store/dot-experiments-reports-store';
+import { DotExperimentsExperimentSummaryComponent } from '@portlets/dot-experiments/shared/ui/dot-experiments-experiment-summary/dot-experiments-experiment-summary.component';
+import { DotExperimentsUiHeaderComponent } from '@portlets/dot-experiments/shared/ui/dot-experiments-header/dot-experiments-ui-header.component';
+
+@Component({
+ selector: 'dot-experiments-reports',
+ standalone: true,
+ imports: [
+ AsyncPipe,
+ NgIf,
+ LowerCasePipe,
+ //dotCMS
+ DotExperimentsUiHeaderComponent,
+ DotPipesModule,
+ DotExperimentsConfigurationSkeletonComponent,
+ DotExperimentsExperimentSummaryComponent,
+ DotExperimentsReportsSkeletonComponent,
+ //PrimeNg
+ TagModule
+ ],
+ templateUrl: './dot-experiments-reports.component.html',
+ styleUrls: ['./dot-experiments-reports.component.scss'],
+ providers: [DotExperimentsReportsStore],
+ changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class DotExperimentsReportsComponent implements OnInit {
+ vm$: Observable = this.store.vm$;
+
+ constructor(
+ private readonly store: DotExperimentsReportsStore,
+ private readonly router: Router,
+ private readonly route: ActivatedRoute
+ ) {}
+
+ ngOnInit(): void {
+ this.store.loadExperiment(this.route.snapshot.params.experimentId);
+ }
+
+ /**
+ * Go to Experiment List
+ * @param {string} pageId
+ * @returns void
+ * @memberof DotExperimentsReportsComponent
+ */
+ goToExperimentList(pageId: string) {
+ this.router.navigate(['/edit-page/experiments/', pageId], {
+ queryParams: {
+ editPageTab: null,
+ variantName: null,
+ experimentId: null
+ },
+ queryParamsHandling: 'merge'
+ });
+ }
+}
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/dot-experiments-reports/dot-experiments-reports.routes.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/dot-experiments-reports/dot-experiments-reports.routes.ts
new file mode 100644
index 000000000000..431bc43c0fc5
--- /dev/null
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/dot-experiments-reports/dot-experiments-reports.routes.ts
@@ -0,0 +1,10 @@
+import { Routes } from '@angular/router';
+
+import { DotExperimentsReportsComponent } from '@portlets/dot-experiments/dot-experiments-reports/dot-experiments-reports.component';
+
+export const DotExperimentsReportsRoutes: Routes = [
+ {
+ path: ':experimentId',
+ component: DotExperimentsReportsComponent
+ }
+];
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/dot-experiments-reports/store/dot-experiments-reports-store.spec.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/dot-experiments-reports/store/dot-experiments-reports-store.spec.ts
new file mode 100644
index 000000000000..f61d37c5f093
--- /dev/null
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/dot-experiments-reports/store/dot-experiments-reports-store.spec.ts
@@ -0,0 +1,121 @@
+import { createServiceFactory, mockProvider, SpectatorService, SpyObject } from '@ngneat/spectator';
+import { of } from 'rxjs';
+
+import { Title } from '@angular/platform-browser';
+import { ActivatedRoute } from '@angular/router';
+
+import { ComponentStatus, DotExperimentStatusList } from '@dotcms/dotcms-models';
+import {
+ DotExperimentsReportsState,
+ DotExperimentsReportsStore
+} from '@portlets/dot-experiments/dot-experiments-reports/store/dot-experiments-reports-store';
+import { DotExperimentsService } from '@portlets/dot-experiments/shared/services/dot-experiments.service';
+import { getExperimentMock } from '@portlets/dot-experiments/test/mocks';
+import { DotHttpErrorManagerService } from '@services/dot-http-error-manager/dot-http-error-manager.service';
+
+const EXPERIMENT_MOCK = getExperimentMock(0);
+
+const ActivatedRouteMock = {
+ snapshot: {
+ params: {
+ experimentId: EXPERIMENT_MOCK.id,
+ pageId: EXPERIMENT_MOCK.pageId
+ }
+ }
+};
+
+describe('DotExperimentsReportsStore', () => {
+ let spectator: SpectatorService;
+ let store: DotExperimentsReportsStore;
+ let dotExperimentsService: SpyObject;
+
+ const createStoreService = createServiceFactory({
+ service: DotExperimentsReportsStore,
+ providers: [
+ mockProvider(Title),
+ {
+ provide: ActivatedRoute,
+ useValue: ActivatedRouteMock
+ },
+ mockProvider(DotExperimentsService),
+ mockProvider(DotHttpErrorManagerService)
+ ]
+ });
+
+ beforeEach(() => {
+ spectator = createStoreService({});
+
+ store = spectator.inject(DotExperimentsReportsStore);
+ dotExperimentsService = spectator.inject(DotExperimentsService);
+ dotExperimentsService.getById.and.callThrough().and.returnValue(of(EXPERIMENT_MOCK));
+ });
+
+ it('should set initial data', (done) => {
+ spectator.service.loadExperiment(EXPERIMENT_MOCK.id);
+
+ const expectedInitialState: DotExperimentsReportsState = {
+ experiment: EXPERIMENT_MOCK,
+ status: ComponentStatus.IDLE
+ };
+
+ expect(dotExperimentsService.getById).toHaveBeenCalledWith(EXPERIMENT_MOCK.id);
+ store.state$.subscribe((state) => {
+ expect(state).toEqual(expectedInitialState);
+ done();
+ });
+ });
+
+ it('should have isLoading$ from the store', (done) => {
+ spectator.service.loadExperiment(EXPERIMENT_MOCK.id);
+ store.isLoading$.subscribe((data) => {
+ expect(data).toEqual(false);
+ done();
+ });
+ });
+
+ it('should update component status to the store', (done) => {
+ store.setComponentStatus(ComponentStatus.LOADED);
+ store.state$.subscribe(({ status }) => {
+ expect(status).toBe(ComponentStatus.LOADED);
+ done();
+ });
+ });
+
+ it('should get FALSE from showExperimentSummary$ if Experiment status is different of Running', (done) => {
+ dotExperimentsService.getById.and.callThrough().and.returnValue(of(EXPERIMENT_MOCK));
+ spectator.service.loadExperiment(EXPERIMENT_MOCK.id);
+
+ store.showExperimentSummary$.subscribe((value) => {
+ expect(value).toEqual(false);
+ done();
+ });
+ });
+ it('should get TRUE from showExperimentSummary$ if Experiment status is different of Running', (done) => {
+ dotExperimentsService.getById.and.callThrough().and.returnValue(
+ of({
+ ...EXPERIMENT_MOCK,
+ status: DotExperimentStatusList.RUNNING
+ })
+ );
+ spectator.service.loadExperiment(EXPERIMENT_MOCK.id);
+
+ store.showExperimentSummary$.subscribe((value) => {
+ expect(value).toEqual(true);
+ done();
+ });
+ });
+
+ describe('Effects', () => {
+ it('should load experiment to store', (done) => {
+ dotExperimentsService.getById.and.callThrough().and.returnValue(of(EXPERIMENT_MOCK));
+
+ store.loadExperiment(EXPERIMENT_MOCK.id);
+ expect(dotExperimentsService.getById).toHaveBeenCalledWith(EXPERIMENT_MOCK.id);
+
+ store.state$.subscribe(({ experiment }) => {
+ expect(experiment).toEqual(EXPERIMENT_MOCK);
+ done();
+ });
+ });
+ });
+});
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/dot-experiments-reports/store/dot-experiments-reports-store.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/dot-experiments-reports/store/dot-experiments-reports-store.ts
new file mode 100644
index 000000000000..f45984026333
--- /dev/null
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/dot-experiments-reports/store/dot-experiments-reports-store.ts
@@ -0,0 +1,96 @@
+import { ComponentStore, tapResponse } from '@ngrx/component-store';
+import { Observable } from 'rxjs';
+
+import { HttpErrorResponse } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Title } from '@angular/platform-browser';
+
+import { switchMap, tap } from 'rxjs/operators';
+
+import { ComponentStatus, DotExperiment, DotExperimentStatusList } from '@dotcms/dotcms-models';
+import { DotExperimentsService } from '@portlets/dot-experiments/shared/services/dot-experiments.service';
+import { DotHttpErrorManagerService } from '@services/dot-http-error-manager/dot-http-error-manager.service';
+
+export interface DotExperimentsReportsState {
+ experiment: DotExperiment | null;
+ status: ComponentStatus;
+}
+
+const initialState: DotExperimentsReportsState = {
+ experiment: null,
+ status: ComponentStatus.INIT
+};
+
+// ViewModel Interfaces
+export interface VmReportExperiment {
+ isLoading: boolean;
+ experiment: DotExperiment;
+ status: ComponentStatus;
+ showSummary: boolean;
+}
+
+@Injectable()
+export class DotExperimentsReportsStore extends ComponentStore {
+ readonly isLoading$: Observable = this.select(
+ ({ status }) => status === ComponentStatus.LOADING
+ );
+
+ readonly setComponentStatus = this.updater(
+ (state: DotExperimentsReportsState, status: ComponentStatus) => ({
+ ...state,
+ status
+ })
+ );
+
+ readonly showExperimentSummary$: Observable = this.select(({ experiment }) =>
+ Object.values([
+ DotExperimentStatusList.ENDED,
+ DotExperimentStatusList.RUNNING,
+ DotExperimentStatusList.ARCHIVED
+ ]).includes(experiment?.status)
+ );
+
+ readonly loadExperiment = this.effect((experimentId$: Observable) => {
+ return experimentId$.pipe(
+ tap(() => this.setComponentStatus(ComponentStatus.LOADING)),
+ switchMap((experimentId) =>
+ this.dotExperimentsService.getById(experimentId).pipe(
+ tapResponse(
+ (experiment) => {
+ this.patchState({
+ experiment: experiment
+ });
+ this.updateTabTitle(experiment);
+ },
+ (error: HttpErrorResponse) => this.dotHttpErrorManagerService.handle(error),
+ () => this.setComponentStatus(ComponentStatus.IDLE)
+ )
+ )
+ )
+ );
+ });
+
+ readonly vm$: Observable = this.select(
+ this.state$,
+ this.isLoading$,
+ this.showExperimentSummary$,
+ ({ experiment, status }, isLoading, showSummary) => ({
+ experiment,
+ status,
+ isLoading,
+ showSummary
+ })
+ );
+
+ constructor(
+ private readonly dotExperimentsService: DotExperimentsService,
+ private readonly dotHttpErrorManagerService: DotHttpErrorManagerService,
+ private readonly title: Title
+ ) {
+ super(initialState);
+ }
+
+ private updateTabTitle(experiment: DotExperiment) {
+ this.title.setTitle(`${experiment.name} - ${this.title.getTitle()}`);
+ }
+}
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/dot-experiments-shell/dot-experiments-shell-routing.module.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/dot-experiments-shell/dot-experiments-shell-routing.module.ts
index e48d6b2d599f..e2138cb220ee 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/dot-experiments-shell/dot-experiments-shell-routing.module.ts
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/dot-experiments-shell/dot-experiments-shell-routing.module.ts
@@ -15,20 +15,27 @@ const routes: Routes = [
children: [
{
path: '',
- title: 'Experiments List',
+ title: 'experiment.container.list.title',
loadChildren: async () =>
(await import('../dot-experiments-list/dot-experiments-list.module'))
.DotExperimentsListModule
},
{
path: 'configuration',
- title: 'Experiment Configuration',
+ title: 'experiment.container.configuration.title',
loadChildren: async () =>
(
await import(
'../dot-experiments-configuration/dot-experiments-configuration.module'
)
).DotExperimentsConfigurationModule
+ },
+ {
+ path: 'reports',
+ title: 'experiment.container.report.title',
+ loadChildren: async () =>
+ (await import('../dot-experiments-reports/dot-experiments-reports.routes'))
+ .DotExperimentsReportsRoutes
}
]
}
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/shared/resolvers/dot-experiment-experiment.resolver.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/shared/resolvers/dot-experiment-experiment.resolver.ts
index 5eac3758cebc..e930d583f2c2 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/shared/resolvers/dot-experiment-experiment.resolver.ts
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/shared/resolvers/dot-experiment-experiment.resolver.ts
@@ -12,6 +12,7 @@ import { DotExperimentsService } from '@portlets/dot-experiments/shared/services
* @export
* @class DotExperimentExperimentResolver
* @implements {Resolve}
+ *
*/
@Injectable()
export class DotExperimentExperimentResolver implements Resolve {
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/shared/ui/dot-experiment-options/dot-experiment-options.component.scss b/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/shared/ui/dot-experiment-options/dot-experiment-options.component.scss
index c53955cae81d..54a95d979e10 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/shared/ui/dot-experiment-options/dot-experiment-options.component.scss
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/shared/ui/dot-experiment-options/dot-experiment-options.component.scss
@@ -6,8 +6,8 @@
gap: $spacing-3;
.dot-options__item {
- border: 1px solid $color-gray-200;
- border-radius: $border-radius-md;
+ border: 1px solid $color-palette-gray-200;
+ border-radius: $border-radius-sm;
display: flex;
flex-direction: column;
transition-duration: $basic-speed;
@@ -22,17 +22,17 @@
h2,
p {
margin: 0;
- color: $color-gray-600;
+ color: $color-palette-gray-600;
}
h2 {
- font-size: $font-size-large;
+ font-size: $font-size-lg;
font-weight: $font-weight-bold;
}
p {
- font-size: $font-size-medium;
- color: $color-gray-500;
+ font-size: $font-size-md;
+ color: $color-palette-gray-500;
}
}
@@ -45,11 +45,11 @@
}
&.active {
- background-color: $color-primary-200;
+ background-color: $color-palette-primary-200;
}
&:hover {
- background-color: $color-primary-200;
+ background-color: $color-palette-primary-200;
}
}
}
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/shared/ui/dot-experiments-experiment-summary/dot-experiments-experiment-summary.component.html b/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/shared/ui/dot-experiments-experiment-summary/dot-experiments-experiment-summary.component.html
index 1f1cf078e1a8..2657fffeefb2 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/shared/ui/dot-experiments-experiment-summary/dot-experiments-experiment-summary.component.html
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/shared/ui/dot-experiments-experiment-summary/dot-experiments-experiment-summary.component.html
@@ -1,4 +1,4 @@
-
+
{{ 'experiments.summary.winner.no-winner-yet' | dm }}
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/shared/ui/dot-experiments-experiment-summary/dot-experiments-experiment-summary.component.scss b/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/shared/ui/dot-experiments-experiment-summary/dot-experiments-experiment-summary.component.scss
index a8f94c018a87..24b35ded7b32 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/shared/ui/dot-experiments-experiment-summary/dot-experiments-experiment-summary.component.scss
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/shared/ui/dot-experiments-experiment-summary/dot-experiments-experiment-summary.component.scss
@@ -2,15 +2,27 @@
:host {
padding: $spacing-4;
- color: $color-gray-600;
+ color: $color-palette-gray-600;
line-height: 140%;
+ display: flex;
+ justify-content: center;
+
+ .wrapper {
+ width: 1100px;
+ }
i {
font-size: $md-icon-size-big;
- color: $color-primary-500;
+ color: $color-palette-primary-500;
&.pi-ban {
color: $color-alert-red;
}
}
}
+
+@media only screen and (max-width: $screen-lg-max) {
+ .wrapper {
+ width: calc(100% - 2rem);
+ }
+}
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/shared/ui/dot-experiments-goal-configuration-detail/dot-experiments-experiment-goal-configuration-detail.component.scss b/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/shared/ui/dot-experiments-goal-configuration-detail/dot-experiments-experiment-goal-configuration-detail.component.scss
index d694cb63a45a..2782e4759ae5 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/shared/ui/dot-experiments-goal-configuration-detail/dot-experiments-experiment-goal-configuration-detail.component.scss
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/shared/ui/dot-experiments-goal-configuration-detail/dot-experiments-experiment-goal-configuration-detail.component.scss
@@ -9,28 +9,28 @@ p {
&__title {
margin: $spacing-0;
- font-size: $font-size-large;
+ font-size: $font-size-lg;
font-weight: $font-weight-bold;
}
&__headers {
padding: $spacing-1 $spacing-3;
gap: $spacing-3;
- font-size: $font-size-medium;
+ font-size: $font-size-md;
font-weight: $font-weight-bold;
- color: $color-gray-600;
- background-color: $color-gray-100;
- border-radius: $border-radius-md;
+ color: $color-palette-gray-600;
+ background-color: $color-palette-gray-100;
+ border-radius: $border-radius-sm;
}
&__conditions {
- background-color: $color-gray-100;
- border-radius: $border-radius-md;
+ background-color: $color-palette-gray-100;
+ border-radius: $border-radius-sm;
font-weight: $font-weight-bold;
}
&__condition-row {
- adding: $spacing-1 $spacing-3;
+ padding: $spacing-1 $spacing-3;
gap: $spacing-3;
font-weight: $font-weight-regular-bold;
}
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/shared/ui/dot-experiments-goal-configuration-reach-page/dot-experiments-goal-configuration-reach-page.component.scss b/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/shared/ui/dot-experiments-goal-configuration-reach-page/dot-experiments-goal-configuration-reach-page.component.scss
index 279afa0c6d6a..54289ae6255b 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/shared/ui/dot-experiments-goal-configuration-reach-page/dot-experiments-goal-configuration-reach-page.component.scss
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/shared/ui/dot-experiments-goal-configuration-reach-page/dot-experiments-goal-configuration-reach-page.component.scss
@@ -13,16 +13,16 @@
label {
font-weight: $font-weight-bold;
margin-bottom: $spacing-0;
- font-size: $font-size-medium;
+ font-size: $font-size-md;
}
p {
margin: $spacing-0;
- color: $color-gray-500;
+ color: $color-palette-gray-500;
}
h3 {
- font-size: $font-size-medium;
+ font-size: $font-size-md;
margin: $spacing-0;
margin-bottom: $spacing-1;
font-weight: $font-weight-bold;
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/shared/ui/dot-experiments-header/dot-experiments-ui-header.component.html b/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/shared/ui/dot-experiments-header/dot-experiments-ui-header.component.html
index 90af4fa75abc..7d605e036a63 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/shared/ui/dot-experiments-header/dot-experiments-ui-header.component.html
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/shared/ui/dot-experiments-header/dot-experiments-ui-header.component.html
@@ -6,6 +6,17 @@
{{ title }}
+
+
+
+
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/shared/ui/dot-experiments-header/dot-experiments-ui-header.component.scss b/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/shared/ui/dot-experiments-header/dot-experiments-ui-header.component.scss
index 95d1f5d137fd..7b1501107f91 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/shared/ui/dot-experiments-header/dot-experiments-ui-header.component.scss
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/shared/ui/dot-experiments-header/dot-experiments-ui-header.component.scss
@@ -5,11 +5,11 @@
min-height: $experiment-header-height;
background-color: $white;
color: $black;
- font-size: $font-size-x-large;
- border-bottom: 1px solid $gray-lighter;
+ font-size: $font-size-xl;
+ border-bottom: 1px solid $color-palette-gray-300;
a {
- color: $gray;
+ color: $color-palette-gray-700;
font-weight: $font-weight-regular-bold;
i {
@@ -17,3 +17,37 @@
}
}
}
+
+::ng-deep {
+ p-tag .p-tag {
+ &.p-tag-danger {
+ background-color: $color-alert-red-light;
+ color: $color-alert-red;
+ }
+
+ &.running {
+ color: $color-accessible-text-green;
+ background-color: $color-accessible-text-green-bg;
+ }
+
+ &.draft {
+ color: $color-accessible-text-yellow;
+ background-color: $color-accessible-text-yellow-bg;
+ }
+
+ &.scheduled {
+ color: $color-accessible-text-purple;
+ background-color: $color-accessible-text-purple-bg;
+ }
+
+ &.ended {
+ color: $color-accessible-text-blue;
+ background-color: $color-accessible-text-blue-bg;
+ }
+
+ &.archived {
+ color: $color-accessible-text-gray;
+ background-color: $color-accessible-text-gray-bg;
+ }
+ }
+}
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/shared/ui/dot-experiments-header/dot-experiments-ui-header.component.spec.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/shared/ui/dot-experiments-header/dot-experiments-ui-header.component.spec.ts
index b3485a87f228..d5cad3c77a02 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/shared/ui/dot-experiments-header/dot-experiments-ui-header.component.spec.ts
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/shared/ui/dot-experiments-header/dot-experiments-ui-header.component.spec.ts
@@ -1,14 +1,29 @@
import { byTestId, createComponentFactory, Spectator } from '@ngneat/spectator';
import { Skeleton } from 'primeng/skeleton';
+import { Tag, TagModule } from 'primeng/tag';
+
+import { DotMessageService } from '@dotcms/data-access';
+import { DotExperimentStatusList } from '@dotcms/dotcms-models';
+import { MockDotMessageService } from '@dotcms/utils-testing';
import { DotExperimentsUiHeaderComponent } from './dot-experiments-ui-header.component';
+const messageServiceMock = new MockDotMessageService({
+ running: 'RUNNING'
+});
describe('ExperimentsHeaderComponent', () => {
let spectator: Spectator ;
const createComponent = createComponentFactory({
- component: DotExperimentsUiHeaderComponent
+ component: DotExperimentsUiHeaderComponent,
+ imports: [TagModule],
+ providers: [
+ {
+ provide: DotMessageService,
+ useValue: messageServiceMock
+ }
+ ]
});
beforeEach(() => {
@@ -36,4 +51,14 @@ describe('ExperimentsHeaderComponent', () => {
expect(spectator.query(Skeleton)).toExist();
});
+
+ it('should rendered the status Input', () => {
+ const expectedStatus: DotExperimentStatusList = DotExperimentStatusList.RUNNING;
+ spectator.setInput({
+ status: DotExperimentStatusList.RUNNING
+ });
+
+ expect(spectator.query(Tag)).toExist();
+ expect(spectator.query(byTestId('status-tag'))).toContainText(expectedStatus);
+ });
});
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/shared/ui/dot-experiments-header/dot-experiments-ui-header.component.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/shared/ui/dot-experiments-header/dot-experiments-ui-header.component.ts
index 1b582e8b56d3..ac5b857073ad 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/shared/ui/dot-experiments-header/dot-experiments-ui-header.component.ts
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/shared/ui/dot-experiments-header/dot-experiments-ui-header.component.ts
@@ -3,8 +3,11 @@ import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from
import { RouterLink } from '@angular/router';
import { SkeletonModule } from 'primeng/skeleton';
+import { TagModule } from 'primeng/tag';
+import { DotExperimentStatusList } from '@dotcms/dotcms-models';
import { DotIconModule } from '@dotcms/ui';
+import { DotPipesModule } from '@pipes/dot-pipes.module';
@Component({
standalone: true,
@@ -12,7 +15,7 @@ import { DotIconModule } from '@dotcms/ui';
templateUrl: './dot-experiments-ui-header.component.html',
styleUrls: ['./dot-experiments-ui-header.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
- imports: [DotIconModule, SkeletonModule, CommonModule, RouterLink]
+ imports: [DotIconModule, CommonModule, RouterLink, DotPipesModule, SkeletonModule, TagModule]
})
export class DotExperimentsUiHeaderComponent {
@Input()
@@ -21,6 +24,9 @@ export class DotExperimentsUiHeaderComponent {
@Input()
isLoading: boolean;
+ @Input()
+ status: DotExperimentStatusList;
+
@Output()
goBack = new EventEmitter();
}
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/test/mocks.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/test/mocks.ts
index e8fbed72d935..e6373b0c52b8 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/test/mocks.ts
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-experiments/test/mocks.ts
@@ -2,6 +2,8 @@ import { of } from 'rxjs';
import {
ComponentStatus,
+ DEFAULT_VARIANT_ID,
+ DEFAULT_VARIANT_NAME,
DotExperiment,
DotExperimentStatusList,
GOAL_OPERATORS,
@@ -47,7 +49,7 @@ const ExperimentMocks: Array = [
scheduling: { startDate: 1, endDate: 2 },
trafficProportion: {
type: TrafficProportionTypes.SPLIT_EVENLY,
- variants: [{ id: '111', name: 'DEFAULT', weight: 100 }]
+ variants: [{ id: DEFAULT_VARIANT_ID, name: DEFAULT_VARIANT_NAME, weight: 100 }]
},
creationDate: new Date('2022-08-21 14:50:03'),
modDate: new Date('2022-08-21 18:50:03'),
@@ -67,7 +69,7 @@ const ExperimentMocks: Array = [
trafficProportion: {
type: TrafficProportionTypes.SPLIT_EVENLY,
variants: [
- { id: '222', name: 'DEFAULT', weight: 50, url: 'test/1' },
+ { id: DEFAULT_VARIANT_ID, name: DEFAULT_VARIANT_NAME, weight: 50, url: 'test/1' },
{ id: '111', name: 'variant a', weight: 50, url: 'test/2' }
]
},
@@ -89,7 +91,7 @@ const ExperimentMocks: Array = [
trafficProportion: {
type: TrafficProportionTypes.SPLIT_EVENLY,
variants: [
- { id: '111', name: 'DEFAULT', weight: 50 },
+ { id: DEFAULT_VARIANT_ID, name: DEFAULT_VARIANT_NAME, weight: 50 },
{ id: '222', name: 'Variant A', weight: 50 }
]
},
@@ -166,6 +168,10 @@ export const DotExperimentsConfigurationStoreMock = {
targetStepVm$: of({})
};
+export const DotExperimentsReportsStoreMock = {
+ loadExperiment: () => of([])
+};
+
export const DotExperimentsServiceMock = {
add: () => of({}),
get: () => of({}),
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-pages/dot-pages-create-page-dialog/dot-pages-create-page-dialog.component.scss b/core-web/apps/dotcms-ui/src/app/portlets/dot-pages/dot-pages-create-page-dialog/dot-pages-create-page-dialog.component.scss
index f8c06354cf43..6d7227788ea7 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-pages/dot-pages-create-page-dialog/dot-pages-create-page-dialog.component.scss
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-pages/dot-pages-create-page-dialog/dot-pages-create-page-dialog.component.scss
@@ -5,7 +5,7 @@
width: 100%;
input {
- border-radius: $border-radius-md;
+ border-radius: $border-radius-sm;
width: 100%;
}
@@ -17,13 +17,13 @@
}
.dot-pages-create-page-dialog__page-types-container {
- border: 1px solid $gray-lighter;
- border-radius: $border-radius-md;
+ border: 1px solid $color-palette-gray-300;
+ border-radius: $border-radius-sm;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
::ng-deep dot-icon i {
- color: $color-primary-500;
+ color: $color-palette-primary-500;
}
dot-icon {
@@ -31,13 +31,13 @@
}
.dot-pages-create-page-dialog__page-item {
- border-left: 1px solid $gray-lighter;
+ border-left: 1px solid $color-palette-gray-300;
cursor: pointer;
display: flex;
padding: $spacing-3;
&:hover {
- background-color: $color-gray-200;
+ background-color: $color-palette-gray-200;
}
&:first-child,
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-pages/dot-pages-favorite-panel/dot-pages-card-empty/dot-pages-card-empty.component.scss b/core-web/apps/dotcms-ui/src/app/portlets/dot-pages/dot-pages-favorite-panel/dot-pages-card-empty/dot-pages-card-empty.component.scss
index b4185c7956d3..b1817b06de9d 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-pages/dot-pages-favorite-panel/dot-pages-card-empty/dot-pages-card-empty.component.scss
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-pages/dot-pages-favorite-panel/dot-pages-card-empty/dot-pages-card-empty.component.scss
@@ -1,7 +1,7 @@
@use "variables" as *;
.dot-pages-card-empty {
- border: 1px solid $gray-lighter;
+ border: 1px solid $color-palette-gray-300;
border-radius: 4px;
}
@@ -9,7 +9,7 @@
display: flex;
width: 100%;
height: 170px;
- border-bottom: 1px solid $gray-lighter;
+ border-bottom: 1px solid $color-palette-gray-300;
}
.dot-pages-card-empty__body {
@@ -19,7 +19,7 @@
::ng-deep dot-icon {
margin-right: $spacing-1;
i {
- color: $gray-lighter;
+ color: $color-palette-gray-300;
}
}
}
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-pages/dot-pages-favorite-panel/dot-pages-card/dot-pages-card.component.scss b/core-web/apps/dotcms-ui/src/app/portlets/dot-pages/dot-pages-favorite-panel/dot-pages-card/dot-pages-card.component.scss
index 50d9b9ae8329..d31fd975ec03 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-pages/dot-pages-favorite-panel/dot-pages-card/dot-pages-card.component.scss
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-pages/dot-pages-favorite-panel/dot-pages-card/dot-pages-card.component.scss
@@ -10,7 +10,7 @@
}
.dot-favorite-page-highlight ::ng-deep i {
- color: $brand-primary;
+ color: $color-palette-primary;
}
.dot-pages-favorite-card-content__image {
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-pages/dot-pages-favorite-panel/dot-pages-favorite-panel.component.scss b/core-web/apps/dotcms-ui/src/app/portlets/dot-pages/dot-pages-favorite-panel/dot-pages-favorite-panel.component.scss
index 5f0559213c72..2868877f0d00 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-pages/dot-pages-favorite-panel/dot-pages-favorite-panel.component.scss
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-pages/dot-pages-favorite-panel/dot-pages-favorite-panel.component.scss
@@ -2,7 +2,7 @@
::ng-deep {
.p-panel-toggleable {
- border: 1px solid $gray-lighter;
+ border: 1px solid $color-palette-gray-300;
&.p-panel-expanded {
border-color: $white;
@@ -10,14 +10,14 @@
}
.p-panel-header {
- font-size: $font-size-x-large;
+ font-size: $font-size-xl;
margin: $spacing-1 0;
padding: $spacing-3 0;
position: relative;
.p-panel-icons span {
- color: $brand-primary;
- font-size: $font-size-x-large;
+ color: $color-palette-primary;
+ font-size: $font-size-xl;
margin-left: $spacing-1;
margin-right: $spacing-2;
}
@@ -30,7 +30,7 @@
top: $spacing-1;
span.p-button-label {
- font-size: $font-size-medium;
+ font-size: $font-size-md;
}
}
@@ -85,7 +85,7 @@
width: max-content;
dot-icon {
- color: $brand-primary;
+ color: $color-palette-primary;
margin-bottom: $spacing-3;
}
}
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-pages/dot-pages-favorite-panel/dot-pages-favorite-panel.component.spec.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-pages/dot-pages-favorite-panel/dot-pages-favorite-panel.component.spec.ts
index e96734a9005b..2e1a30c9bd5b 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-pages/dot-pages-favorite-panel/dot-pages-favorite-panel.component.spec.ts
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-pages/dot-pages-favorite-panel/dot-pages-favorite-panel.component.spec.ts
@@ -1,3 +1,4 @@
+import { HttpErrorResponse, HttpResponse } from '@angular/common/http';
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { Component, DebugElement, Input } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
@@ -10,9 +11,11 @@ import { PanelModule } from 'primeng/panel';
import { of } from 'rxjs/internal/observable/of';
+import { DotHttpErrorManagerService } from '@dotcms/app/api/services/dot-http-error-manager/dot-http-error-manager.service';
+import { MockDotHttpErrorManagerService } from '@dotcms/app/test/dot-http-error-manager.service.mock';
import { DotMessagePipeModule } from '@dotcms/app/view/pipes/dot-message/dot-message-pipe.module';
-import { DotMessageService } from '@dotcms/data-access';
-import { CoreWebService, CoreWebServiceMock } from '@dotcms/dotcms-js';
+import { DotMessageService, DotPageRenderService } from '@dotcms/data-access';
+import { CoreWebService, CoreWebServiceMock, HttpCode } from '@dotcms/dotcms-js';
import { dotcmsContentletMock, MockDotMessageService } from '@dotcms/utils-testing';
import { DotPagesCardModule } from './dot-pages-card/dot-pages-card.module';
@@ -72,6 +75,8 @@ describe('DotPagesFavoritePanelComponent', () => {
let de: DebugElement;
let store: DotPageStore;
let dialogService: DialogService;
+ let dotPageRenderService: DotPageRenderService;
+ let dotHttpErrorManagerService: DotHttpErrorManagerService;
class storeMock {
get vm$() {
@@ -113,6 +118,11 @@ describe('DotPagesFavoritePanelComponent', () => {
],
providers: [
DialogService,
+ DotPageRenderService,
+ {
+ provide: DotHttpErrorManagerService,
+ useClass: MockDotHttpErrorManagerService
+ },
{ provide: CoreWebService, useClass: CoreWebServiceMock },
{ provide: DotPageStore, useClass: storeMock },
{ provide: DotMessageService, useValue: messageServiceMock }
@@ -192,6 +202,11 @@ describe('DotPagesFavoritePanelComponent', () => {
],
providers: [
DialogService,
+ DotPageRenderService,
+ {
+ provide: DotHttpErrorManagerService,
+ useClass: MockDotHttpErrorManagerService
+ },
{ provide: CoreWebService, useClass: CoreWebServiceMock },
{ provide: DotPageStore, useClass: storeMock },
{ provide: DotMessageService, useValue: messageServiceMock }
@@ -200,6 +215,8 @@ describe('DotPagesFavoritePanelComponent', () => {
store = TestBed.inject(DotPageStore);
dialogService = TestBed.inject(DialogService);
+ dotPageRenderService = TestBed.inject(DotPageRenderService);
+ dotHttpErrorManagerService = TestBed.inject(DotHttpErrorManagerService);
fixture = TestBed.createComponent(DotPagesFavoritePanelComponent);
de = fixture.debugElement;
component = fixture.componentInstance;
@@ -253,12 +270,43 @@ describe('DotPagesFavoritePanelComponent', () => {
});
it('should call edit method to open favorite page dialog', () => {
+ spyOn(dotPageRenderService, 'checkPermission').and.returnValue(of(true));
+ fixture.detectChanges();
const elem = de.query(By.css('dot-pages-card'));
elem.triggerEventHandler('edit', { ...favoritePagesInitialTestData[0] });
+ const urlParams = { url: favoritePagesInitialTestData[0].url.split('?')[0] };
+ const searchParams = new URLSearchParams(
+ favoritePagesInitialTestData[0].url.split('?')[1]
+ );
+
+ for (const entry of searchParams) {
+ urlParams[entry[0]] = entry[1];
+ }
+
+ expect(dotPageRenderService.checkPermission).toHaveBeenCalledWith(urlParams);
expect(dialogService.open).toHaveBeenCalledTimes(1);
});
+ it('should throw error dialgo when call edit method to open favorite page dialog and user does not have access', () => {
+ spyOn(dotPageRenderService, 'checkPermission').and.returnValue(of(false));
+ spyOn(dotHttpErrorManagerService, 'handle');
+ fixture.detectChanges();
+ const elem = de.query(By.css('dot-pages-card'));
+ elem.triggerEventHandler('edit', { ...favoritePagesInitialTestData[0] });
+
+ expect(dotHttpErrorManagerService.handle).toHaveBeenCalledWith(
+ new HttpErrorResponse(
+ new HttpResponse({
+ body: null,
+ status: HttpCode.FORBIDDEN,
+ headers: null,
+ url: ''
+ })
+ )
+ );
+ });
+
it('should call showActionMenu method to send actions to parent component', () => {
const elem = de.query(By.css('dot-pages-card'));
const mouseEvent = new MouseEvent('click');
@@ -332,6 +380,11 @@ describe('DotPagesFavoritePanelComponent', () => {
],
providers: [
DialogService,
+ DotPageRenderService,
+ {
+ provide: DotHttpErrorManagerService,
+ useClass: MockDotHttpErrorManagerService
+ },
{ provide: CoreWebService, useClass: CoreWebServiceMock },
{ provide: DotPageStore, useClass: storeMock },
{ provide: DotMessageService, useValue: messageServiceMock }
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-pages/dot-pages-favorite-panel/dot-pages-favorite-panel.component.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-pages/dot-pages-favorite-panel/dot-pages-favorite-panel.component.ts
index 15a31421bcea..579f42536903 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-pages/dot-pages-favorite-panel/dot-pages-favorite-panel.component.ts
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-pages/dot-pages-favorite-panel/dot-pages-favorite-panel.component.ts
@@ -1,10 +1,13 @@
import { Observable } from 'rxjs';
+import { HttpErrorResponse, HttpResponse } from '@angular/common/http';
import { Component, EventEmitter, Output } from '@angular/core';
import { DialogService } from 'primeng/dynamicdialog';
-import { DotMessageService } from '@dotcms/data-access';
+import { DotHttpErrorManagerService } from '@dotcms/app/api/services/dot-http-error-manager/dot-http-error-manager.service';
+import { DotMessageService, DotPageRenderService } from '@dotcms/data-access';
+import { HttpCode } from '@dotcms/dotcms-js';
import { DotCMSContentlet } from '@dotcms/dotcms-models';
import { DotFavoritePageComponent } from '../../dot-edit-page/components/dot-favorite-page/dot-favorite-page.component';
@@ -29,7 +32,9 @@ export class DotPagesFavoritePanelComponent {
constructor(
private store: DotPageStore,
private dotMessageService: DotMessageService,
- private dialogService: DialogService
+ private dialogService: DialogService,
+ private dotPageRenderService: DotPageRenderService,
+ private dotHttpErrorManagerService: DotHttpErrorManagerService
) {}
/**
@@ -59,22 +64,47 @@ export class DotPagesFavoritePanelComponent {
* @memberof DotPagesComponent
*/
editFavoritePage(favoritePage: DotCMSContentlet) {
- this.dialogService.open(DotFavoritePageComponent, {
- header: this.dotMessageService.get('favoritePage.dialog.header.add.page'),
- width: '80rem',
- data: {
- page: {
- favoritePageUrl: favoritePage.url,
- favoritePage: favoritePage
- },
- onSave: () => {
- this.timeStamp = this.getTimeStamp();
- this.store.getFavoritePages(this.currentLimitSize);
- },
- onDelete: () => {
- this.timeStamp = this.getTimeStamp();
- this.store.getFavoritePages(this.currentLimitSize);
- }
+ const url = `${favoritePage.urlMap || favoritePage.url}?host_id=${
+ favoritePage.host
+ }&language_id=${favoritePage.languageId}`;
+
+ const urlParams = { url: url.split('?')[0] };
+ const searchParams = new URLSearchParams(url.split('?')[1]);
+
+ for (const entry of searchParams) {
+ urlParams[entry[0]] = entry[1];
+ }
+
+ this.dotPageRenderService.checkPermission(urlParams).subscribe((hasPermission: boolean) => {
+ if (hasPermission) {
+ this.dialogService.open(DotFavoritePageComponent, {
+ header: this.dotMessageService.get('favoritePage.dialog.header.add.page'),
+ width: '80rem',
+ data: {
+ page: {
+ favoritePageUrl: favoritePage.url,
+ favoritePage: favoritePage
+ },
+ onSave: () => {
+ this.timeStamp = this.getTimeStamp();
+ this.store.getFavoritePages(this.currentLimitSize);
+ },
+ onDelete: () => {
+ this.timeStamp = this.getTimeStamp();
+ this.store.getFavoritePages(this.currentLimitSize);
+ }
+ }
+ });
+ } else {
+ const error = new HttpErrorResponse(
+ new HttpResponse({
+ body: null,
+ status: HttpCode.FORBIDDEN,
+ headers: null,
+ url: ''
+ })
+ );
+ this.dotHttpErrorManagerService.handle(error);
}
});
}
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-pages/dot-pages-listing-panel/dot-pages-listing-panel.component.scss b/core-web/apps/dotcms-ui/src/app/portlets/dot-pages/dot-pages-listing-panel/dot-pages-listing-panel.component.scss
index a41b0ce3e507..571f0032ad40 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-pages/dot-pages-listing-panel/dot-pages-listing-panel.component.scss
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-pages/dot-pages-listing-panel/dot-pages-listing-panel.component.scss
@@ -15,7 +15,7 @@
}
.p-datatable .p-datatable-header {
- background-color: $gray-bg;
+ background-color: $color-palette-gray-200;
padding: $spacing-3;
}
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-pages/dot-pages-listing-panel/dot-pages-listing-panel.component.spec.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-pages/dot-pages-listing-panel/dot-pages-listing-panel.component.spec.ts
index f757c5a1fae2..81744b34c426 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-pages/dot-pages-listing-panel/dot-pages-listing-panel.component.spec.ts
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-pages/dot-pages-listing-panel/dot-pages-listing-panel.component.spec.ts
@@ -223,9 +223,13 @@ describe('DotPagesListingPanelComponent', () => {
it('should send event to emit URL value', () => {
const elem = de.query(By.css('p-table'));
- elem.triggerEventHandler('onRowSelect', { data: { url: 'abc123' } });
+ elem.triggerEventHandler('onRowSelect', {
+ data: { url: 'abc123', host: '1', languageId: '1' }
+ });
- expect(component.goToUrl.emit).toHaveBeenCalledOnceWith('abc123');
+ expect(component.goToUrl.emit).toHaveBeenCalledOnceWith(
+ 'abc123?host_id=1&language_id=1'
+ );
});
});
});
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-pages/dot-pages-listing-panel/dot-pages-listing-panel.component.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-pages/dot-pages-listing-panel/dot-pages-listing-panel.component.ts
index 411ce9803e1a..6f23846efec3 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-pages/dot-pages-listing-panel/dot-pages-listing-panel.component.ts
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-pages/dot-pages-listing-panel/dot-pages-listing-panel.component.ts
@@ -61,7 +61,11 @@ export class DotPagesListingPanelComponent {
* @memberof DotPagesListingPanelComponent
*/
onRowSelect(event: Event): void {
- this.goToUrl.emit(event['data'].urlMap || event['data'].url);
+ const url = `${event['data'].urlMap || event['data'].url}?host_id=${
+ event['data'].host
+ }&language_id=${event['data'].languageId}`;
+
+ this.goToUrl.emit(url);
}
/**
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-pages/dot-pages-store/dot-pages.store.spec.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-pages/dot-pages-store/dot-pages.store.spec.ts
index a8ddb981488f..7b908fc569c0 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-pages/dot-pages-store/dot-pages.store.spec.ts
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-pages/dot-pages-store/dot-pages.store.spec.ts
@@ -4,6 +4,8 @@ import { HttpClientTestingModule } from '@angular/common/http/testing';
import { Injectable } from '@angular/core';
import { fakeAsync, TestBed, tick } from '@angular/core/testing';
+import { DialogService } from 'primeng/dynamicdialog';
+
import { DotGlobalMessageService } from '@components/_common/dot-global-message/dot-global-message.service';
import { PushPublishServiceMock } from '@components/_common/dot-push-publish-env-selector/dot-push-publish-env-selector.component.spec';
import { DotIframeService } from '@components/_common/iframe/service/dot-iframe/dot-iframe.service';
@@ -63,6 +65,7 @@ import {
CurrentUserDataMock,
DotCurrentUserServiceMock
} from '../../dot-starter/dot-starter-resolver.service.spec';
+import { DotPagesCreatePageDialogComponent } from '../dot-pages-create-page-dialog/dot-pages-create-page-dialog.component';
import { favoritePagesInitialTestData } from '../dot-pages.component.spec';
@Injectable()
@@ -80,8 +83,16 @@ class MockESPaginatorService {
}
}
+@Injectable()
+export class DialogServiceMock {
+ open(): void {
+ /* */
+ }
+}
+
describe('DotPageStore', () => {
let dotPageStore: DotPageStore;
+ let dialogService: DialogService;
let dotESContentService: DotESContentService;
let dotPageTypesService: DotPageTypesService;
let dotWorkflowsActionsService: DotWorkflowsActionsService;
@@ -101,6 +112,7 @@ describe('DotPageStore', () => {
DotWorkflowEventHandlerService,
LoggerService,
StringUtils,
+ { provide: DialogService, useClass: DialogServiceMock },
{ provide: DotcmsEventsService, useClass: DotcmsEventsServiceMock },
{ provide: CoreWebService, useClass: CoreWebServiceMock },
{ provide: DotCurrentUserService, useClass: DotCurrentUserServiceMock },
@@ -117,10 +129,13 @@ describe('DotPageStore', () => {
]
});
dotPageStore = TestBed.inject(DotPageStore);
+ dialogService = TestBed.inject(DialogService);
dotESContentService = TestBed.inject(DotESContentService);
dotPageTypesService = TestBed.inject(DotPageTypesService);
dotWorkflowsActionsService = TestBed.inject(DotWorkflowsActionsService);
+ spyOn(dialogService, 'open').and.callThrough();
+
dotPageStore.setInitialStateData(5);
});
@@ -269,7 +284,7 @@ describe('DotPageStore', () => {
expect(dotESContentService.get).toHaveBeenCalledTimes(1);
});
- it('should get all Page Types value in store', () => {
+ it('should get all Page Types value in store and show dialog', () => {
const expectedInputArray = [{ ...dotcmsContentTypeBasicMock, ...contentTypeDataMock[0] }];
spyOn(dotPageTypesService, 'getPages').and.returnValue(
of(expectedInputArray as unknown as DotCMSContentType[])
@@ -280,6 +295,11 @@ describe('DotPageStore', () => {
expect(data.pageTypes).toEqual(expectedInputArray);
});
expect(dotPageTypesService.getPages).toHaveBeenCalledTimes(1);
+ expect(dialogService.open).toHaveBeenCalledWith(DotPagesCreatePageDialogComponent, {
+ header: 'create.page',
+ width: '58rem',
+ data: expectedInputArray
+ });
});
it('should set all Pages value in store', () => {
@@ -393,8 +413,8 @@ describe('DotPageStore', () => {
expect(data.pages.menuActions[1].label).toEqual(mockWorkflowsActions[0].name);
expect(data.pages.menuActions[2].label).toEqual(mockWorkflowsActions[1].name);
expect(data.pages.menuActions[3].label).toEqual(mockWorkflowsActions[2].name);
- expect(data.pages.menuActions[4].label).toEqual('contenttypes.content.add_to_bundle');
- expect(data.pages.menuActions[5].label).toEqual('contenttypes.content.push_publish');
+ expect(data.pages.menuActions[4].label).toEqual('contenttypes.content.push_publish');
+ expect(data.pages.menuActions[5].label).toEqual('contenttypes.content.add_to_bundle');
expect(data.pages.actionMenuDomId).toEqual('test1');
});
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-pages/dot-pages-store/dot-pages.store.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-pages/dot-pages-store/dot-pages.store.ts
index 414e544071b0..61358839b48d 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-pages/dot-pages-store/dot-pages.store.ts
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-pages/dot-pages-store/dot-pages.store.ts
@@ -5,10 +5,10 @@ import { HttpErrorResponse } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { MenuItem, SelectItem } from 'primeng/api';
+import { DialogService } from 'primeng/dynamicdialog';
import { delay, filter, map, mergeMap, retryWhen, switchMap, take, tap } from 'rxjs/operators';
-import { DotFormatDateService } from '@dotcms/app/api/services/dot-format-date-service';
import { DotHttpErrorManagerService } from '@dotcms/app/api/services/dot-http-error-manager/dot-http-error-manager.service';
import { DotRouterService } from '@dotcms/app/api/services/dot-router/dot-router.service';
import { DotWorkflowEventHandlerService } from '@dotcms/app/api/services/dot-workflow-event-handler/dot-workflow-event-handler.service';
@@ -42,6 +42,8 @@ import {
UserPermissions
} from '@dotcms/dotcms-models';
+import { DotPagesCreatePageDialogComponent } from '../dot-pages-create-page-dialog/dot-pages-create-page-dialog.component';
+
export interface DotPagesState {
favoritePages: {
items: DotCMSContentlet[];
@@ -260,6 +262,11 @@ export class DotPageStore extends ComponentStore {
this.patchState({
pageTypes
});
+ this.dialogService.open(DotPagesCreatePageDialogComponent, {
+ header: this.dotMessageService.get('create.page'),
+ width: '58rem',
+ data: pageTypes
+ });
},
(error: HttpErrorResponse) => {
return this.httpErrorManagerService.handle(error);
@@ -550,14 +557,6 @@ export class DotPageStore extends ComponentStore {
});
});
- // Adding Add To Bundle action
- if (isEnterprise) {
- selectItems.push({
- label: this.dotMessageService.get('contenttypes.content.add_to_bundle'),
- command: () => this.showAddToBundle(item.identifier)
- });
- }
-
// Adding Push Publish action
if (isEnterprise && environments) {
selectItems.push({
@@ -570,6 +569,14 @@ export class DotPageStore extends ComponentStore {
});
}
+ // Adding Add To Bundle action
+ if (isEnterprise) {
+ selectItems.push({
+ label: this.dotMessageService.get('contenttypes.content.add_to_bundle'),
+ command: () => this.showAddToBundle(item.identifier)
+ });
+ }
+
return selectItems;
}
@@ -580,8 +587,8 @@ export class DotPageStore extends ComponentStore {
private httpErrorManagerService: DotHttpErrorManagerService,
private dotESContentService: DotESContentService,
private dotPageTypesService: DotPageTypesService,
- private dotFormatDateService: DotFormatDateService,
private dotMessageService: DotMessageService,
+ private dialogService: DialogService,
private dotLanguagesService: DotLanguagesService,
private dotPushPublishDialogService: DotPushPublishDialogService,
private dotWorkflowsActionsService: DotWorkflowsActionsService,
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-pages/dot-pages.component.spec.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-pages/dot-pages.component.spec.ts
index 5e1669531e66..2404a7352ebf 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-pages/dot-pages.component.spec.ts
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-pages/dot-pages.component.spec.ts
@@ -1,11 +1,10 @@
import { Subject } from 'rxjs';
-import { HttpClient, HttpHandler } from '@angular/common/http';
-import { Component, DebugElement, EventEmitter, Injectable, Input, Output } from '@angular/core';
+import { HttpClient, HttpErrorResponse, HttpHandler, HttpResponse } from '@angular/common/http';
+import { Component, DebugElement, EventEmitter, Input, Output } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
-import { DialogService } from 'primeng/dynamicdialog';
import { MenuModule } from 'primeng/menu';
import { of } from 'rxjs/internal/observable/of';
@@ -13,9 +12,17 @@ import { of } from 'rxjs/internal/observable/of';
import { DotMessageDisplayServiceMock } from '@components/dot-message-display/dot-message-display.component.spec';
import { DotMessageSeverity, DotMessageType } from '@components/dot-message-display/model';
import { DotMessageDisplayService } from '@components/dot-message-display/services';
+import { DotHttpErrorManagerService } from '@dotcms/app/api/services/dot-http-error-manager/dot-http-error-manager.service';
import { DotRouterService } from '@dotcms/app/api/services/dot-router/dot-router.service';
-import { DotEventsService } from '@dotcms/data-access';
-import { CoreWebService, CoreWebServiceMock, mockSites, SiteService } from '@dotcms/dotcms-js';
+import { MockDotHttpErrorManagerService } from '@dotcms/app/test/dot-http-error-manager.service.mock';
+import { DotEventsService, DotPageRenderService } from '@dotcms/data-access';
+import {
+ CoreWebService,
+ CoreWebServiceMock,
+ HttpCode,
+ mockSites,
+ SiteService
+} from '@dotcms/dotcms-js';
import {
dotcmsContentletMock,
dotcmsContentTypeBasicMock,
@@ -118,21 +125,16 @@ const storeMock = {
pageTypes: []
})
};
-@Injectable()
-export class DialogServiceMock {
- open(): void {
- /* */
- }
-}
describe('DotPagesComponent', () => {
let fixture: ComponentFixture;
let component: DotPagesComponent;
let de: DebugElement;
let store: DotPageStore;
- let dialogService: DialogService;
let dotRouterService: DotRouterService;
let dotMessageDisplayService: DotMessageDisplayService;
+ let dotPageRenderService: DotPageRenderService;
+ let dotHttpErrorManagerService: DotHttpErrorManagerService;
const switchSiteSubject = new Subject();
@@ -149,10 +151,14 @@ describe('DotPagesComponent', () => {
DotEventsService,
HttpClient,
HttpHandler,
+ DotPageRenderService,
+ {
+ provide: DotHttpErrorManagerService,
+ useClass: MockDotHttpErrorManagerService
+ },
{ provide: CoreWebService, useClass: CoreWebServiceMock },
{ provide: DotMessageDisplayService, useClass: DotMessageDisplayServiceMock },
{ provide: DotRouterService, useClass: MockDotRouterService },
- { provide: DialogService, useClass: DialogServiceMock },
{
provide: SiteService,
useValue: {
@@ -174,9 +180,10 @@ describe('DotPagesComponent', () => {
useValue: storeMock
});
store = TestBed.inject(DotPageStore);
- dialogService = TestBed.inject(DialogService);
dotRouterService = TestBed.inject(DotRouterService);
dotMessageDisplayService = TestBed.inject(DotMessageDisplayService);
+ dotPageRenderService = TestBed.inject(DotPageRenderService);
+ dotHttpErrorManagerService = TestBed.inject(DotHttpErrorManagerService);
fixture = TestBed.createComponent(DotPagesComponent);
de = fixture.debugElement;
component = fixture.componentInstance;
@@ -184,7 +191,8 @@ describe('DotPagesComponent', () => {
fixture.detectChanges();
spyOn(component.menu, 'hide');
spyOn(dotMessageDisplayService, 'push');
- spyOn(dialogService, 'open').and.callThrough();
+ spyOn(dotPageRenderService, 'checkPermission').and.returnValue(of(true));
+ spyOn(dotHttpErrorManagerService, 'handle');
});
it('should init store', () => {
@@ -202,12 +210,34 @@ describe('DotPagesComponent', () => {
const elem = de.query(By.css('dot-pages-favorite-panel'));
elem.triggerEventHandler('goToUrl', '/page/1?lang=1');
+ expect(dotPageRenderService.checkPermission).toHaveBeenCalledWith({
+ lang: '1',
+ url: '/page/1'
+ });
expect(dotRouterService.goToEditPage).toHaveBeenCalledWith({
lang: '1',
url: '/page/1'
});
});
+ it('should call goToUrl method from DotPagesFavoritePanel2', () => {
+ dotPageRenderService.checkPermission = jasmine.createSpy().and.returnValue(of(false));
+
+ const elem = de.query(By.css('dot-pages-favorite-panel'));
+ elem.triggerEventHandler('goToUrl', '/page/1?lang=1');
+
+ expect(dotHttpErrorManagerService.handle).toHaveBeenCalledWith(
+ new HttpErrorResponse(
+ new HttpResponse({
+ body: null,
+ status: HttpCode.FORBIDDEN,
+ headers: null,
+ url: ''
+ })
+ )
+ );
+ });
+
it('should call showActionsMenu method from DotPagesFavoritePanel', () => {
const eventMock = new MouseEvent('click');
Object.defineProperty(eventMock, 'currentTarget', {
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-pages/dot-pages.component.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-pages/dot-pages.component.ts
index e5c932e0aa18..013f34b07afb 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-pages/dot-pages.component.ts
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-pages/dot-pages.component.ts
@@ -1,21 +1,21 @@
import { Subject } from 'rxjs';
+import { HttpErrorResponse, HttpResponse } from '@angular/common/http';
import { Component, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core';
-import { DialogService } from 'primeng/dynamicdialog';
import { Menu } from 'primeng/menu';
import { Observable } from 'rxjs/internal/Observable';
-import { filter, skip, takeUntil } from 'rxjs/operators';
+import { filter, skip, take, takeUntil } from 'rxjs/operators';
import { DotMessageSeverity, DotMessageType } from '@components/dot-message-display/model';
import { DotMessageDisplayService } from '@components/dot-message-display/services';
+import { DotHttpErrorManagerService } from '@dotcms/app/api/services/dot-http-error-manager/dot-http-error-manager.service';
import { DotRouterService } from '@dotcms/app/api/services/dot-router/dot-router.service';
-import { DotEventsService, DotMessageService } from '@dotcms/data-access';
-import { SiteService } from '@dotcms/dotcms-js';
-import { DotCMSContentlet, DotCMSContentType } from '@dotcms/dotcms-models';
+import { DotEventsService, DotPageRenderService } from '@dotcms/data-access';
+import { HttpCode, SiteService } from '@dotcms/dotcms-js';
+import { DotCMSContentlet } from '@dotcms/dotcms-models';
-import { DotPagesCreatePageDialogComponent } from './dot-pages-create-page-dialog/dot-pages-create-page-dialog.component';
import { DotPagesState, DotPageStore } from './dot-pages-store/dot-pages.store';
export const FAVORITE_PAGE_LIMIT = 5;
@@ -40,13 +40,13 @@ export class DotPagesComponent implements OnInit, OnDestroy {
private destroy$: Subject = new Subject();
constructor(
- private dialogService: DialogService,
- private dotMessageService: DotMessageService,
private store: DotPageStore,
private dotRouterService: DotRouterService,
private dotMessageDisplayService: DotMessageDisplayService,
private dotEventsService: DotEventsService,
+ private dotHttpErrorManagerService: DotHttpErrorManagerService,
private dotSiteService: SiteService,
+ private dotPageRenderService: DotPageRenderService,
private element: ElementRef
) {
this.store.setInitialStateData(FAVORITE_PAGE_LIMIT);
@@ -67,7 +67,24 @@ export class DotPagesComponent implements OnInit, OnDestroy {
urlParams[entry[0]] = entry[1];
}
- this.dotRouterService.goToEditPage(urlParams);
+ this.dotPageRenderService
+ .checkPermission(urlParams)
+ .pipe(take(1))
+ .subscribe((hasPermission: boolean) => {
+ if (hasPermission) {
+ this.dotRouterService.goToEditPage(urlParams);
+ } else {
+ const error = new HttpErrorResponse(
+ new HttpResponse({
+ body: null,
+ status: HttpCode.FORBIDDEN,
+ headers: null,
+ url: ''
+ })
+ );
+ this.dotHttpErrorManagerService.handle(error);
+ }
+ });
}
/**
@@ -133,19 +150,6 @@ export class DotPagesComponent implements OnInit, OnDestroy {
this.dotSiteService.switchSite$.pipe(takeUntil(this.destroy$), skip(1)).subscribe(() => {
this.store.getPages({ offset: 0 });
});
-
- this.store.pageTypes$
- .pipe(
- takeUntil(this.destroy$),
- filter((val) => !!val)
- )
- .subscribe((pageTypes: DotCMSContentType[]) => {
- this.dialogService.open(DotPagesCreatePageDialogComponent, {
- header: this.dotMessageService.get('create.page'),
- width: '58rem',
- data: pageTypes
- });
- });
}
ngOnDestroy(): void {
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-starter/dot-starter.component.scss b/core-web/apps/dotcms-ui/src/app/portlets/dot-starter/dot-starter.component.scss
index 7f06ea6d3f25..fac376a922fa 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-starter/dot-starter.component.scss
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-starter/dot-starter.component.scss
@@ -4,12 +4,12 @@ $number-link-icon-size: 2.28rem;
:host {
display: block;
- font-size: $font-size-medium;
+ font-size: $font-size-md;
height: 100%;
overflow: auto;
hr {
- border-top: 1px solid $gray-lighter;
+ border-top: 1px solid $color-palette-gray-300;
}
a {
@@ -28,12 +28,12 @@ $number-link-icon-size: 2.28rem;
.dot-starter-title {
color: $black;
- font-size: $font-size-x-large;
+ font-size: $font-size-xl;
margin: $spacing-5 $spacing-3 $spacing-1;
}
.dot-starter-description {
- color: $gray;
+ color: $color-palette-gray-700;
margin: 0 $spacing-3 $spacing-5 $spacing-3;
}
@@ -57,7 +57,7 @@ $number-link-icon-size: 2.28rem;
.dot-starter-top-main__block {
align-content: space-between;
- border-bottom: 1px solid $gray-lighter;
+ border-bottom: 1px solid $color-palette-gray-300;
display: flex;
margin: 0;
padding: $spacing-5 0;
@@ -75,7 +75,7 @@ $number-link-icon-size: 2.28rem;
span {
align-items: center;
- background-color: $brand-primary;
+ background-color: $color-palette-primary;
border-radius: 50%;
color: $white;
counter-increment: css-counter 1;
@@ -96,13 +96,13 @@ $number-link-icon-size: 2.28rem;
flex-grow: 1;
h4 {
- color: $brand-primary;
- font-size: $font-size-large;
+ color: $color-palette-primary;
+ font-size: $font-size-lg;
font-weight: bold;
margin: 0;
}
p {
- color: $gray;
+ color: $color-palette-gray-700;
margin: 0;
}
}
@@ -111,8 +111,8 @@ $number-link-icon-size: 2.28rem;
align-self: center;
i {
- color: $gray-light;
- font-size: $font-size-x-large;
+ color: $color-palette-gray-500;
+ font-size: $font-size-xl;
margin-right: $spacing-3;
}
}
@@ -121,7 +121,7 @@ $number-link-icon-size: 2.28rem;
margin-left: $spacing-1;
h3 {
- font-size: $font-size-large;
+ font-size: $font-size-lg;
font-weight: $font-weight-semi-bold;
margin: 0;
}
@@ -136,14 +136,14 @@ $number-link-icon-size: 2.28rem;
padding-top: 0;
span {
- color: $brand-primary;
- fill: $brand-primary;
+ color: $color-palette-primary;
+ fill: $color-palette-primary;
display: inline-flex;
width: $number-link-icon-size;
}
svg {
- fill: $brand-primary;
+ fill: $color-palette-primary;
height: 1.71rem;
width: $md-icon-size-normal;
}
@@ -154,11 +154,11 @@ $number-link-icon-size: 2.28rem;
h4 {
color: $black;
- font-size: $font-size-large;
+ font-size: $font-size-lg;
margin: 0;
}
p {
- color: $gray;
+ color: $color-palette-gray-700;
margin: 0;
}
}
@@ -171,7 +171,7 @@ $number-link-icon-size: 2.28rem;
.dot-starter-bottom__block {
background-color: $white;
- border-bottom: 1px solid $gray-lighter;
+ border-bottom: 1px solid $color-palette-gray-300;
box-shadow: $md-shadow-4;
display: flex;
flex-grow: 1;
@@ -192,7 +192,7 @@ $number-link-icon-size: 2.28rem;
text-align: center;
span {
- color: $brand-primary;
+ color: $color-palette-primary;
display: inline-flex;
}
}
@@ -204,11 +204,11 @@ $number-link-icon-size: 2.28rem;
h4 {
color: $black;
- font-size: $font-size-large;
+ font-size: $font-size-lg;
margin: 0;
}
p {
- color: $gray;
+ color: $color-palette-gray-700;
margin: 0;
}
}
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-templates/dot-template-create-edit/dot-template-props/dot-template-thumbnail-field/dot-template-thumbnail-field.component.scss b/core-web/apps/dotcms-ui/src/app/portlets/dot-templates/dot-template-create-edit/dot-template-props/dot-template-thumbnail-field/dot-template-thumbnail-field.component.scss
index 631ac933d2ea..925ff3d67890 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-templates/dot-template-create-edit/dot-template-props/dot-template-thumbnail-field/dot-template-thumbnail-field.component.scss
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-templates/dot-template-create-edit/dot-template-props/dot-template-thumbnail-field/dot-template-thumbnail-field.component.scss
@@ -10,8 +10,8 @@ dot-binary-file {
input {
@extend #p-inputtext-extend;
- border-top-left-radius: $border-radius;
- border-bottom-left-radius: $border-radius;
+ border-top-left-radius: $border-radius-xs;
+ border-bottom-left-radius: $border-radius-xs;
padding: 1.07rem;
width: 100%;
}
@@ -22,12 +22,12 @@ dot-binary-file {
}
button {
- border-top-right-radius: $border-radius;
- border-bottom-right-radius: $border-radius;
+ border-top-right-radius: $border-radius-xs;
+ border-bottom-right-radius: $border-radius-xs;
}
.dot-file-preview__info {
- border-radius: $border-radius;
+ border-radius: $border-radius-xs;
}
}
}
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-templates/dot-template-list/components/dot-template-selector/dot-template-selector.component.scss b/core-web/apps/dotcms-ui/src/app/portlets/dot-templates/dot-template-list/components/dot-template-selector/dot-template-selector.component.scss
index 028097b4d148..5365b0d0d963 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-templates/dot-template-list/components/dot-template-selector/dot-template-selector.component.scss
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-templates/dot-template-list/components/dot-template-selector/dot-template-selector.component.scss
@@ -20,15 +20,15 @@
p {
line-height: 1.5;
- color: $gray-dark;
+ color: $color-palette-gray-800;
}
.item {
align-items: center;
- background-color: $gray-bg;
- border: solid 2px $gray-bg;
- border-radius: $border-radius;
- color: $gray-light;
+ background-color: $color-palette-gray-200;
+ border: solid 2px $color-palette-gray-200;
+ border-radius: $border-radius-xs;
+ color: $color-palette-gray-500;
cursor: pointer;
display: flex;
flex-direction: column;
@@ -36,11 +36,11 @@ p {
transition: border-color $basic-speed ease, color $basic-speed ease;
&:hover {
- color: $gray;
+ color: $color-palette-gray-700;
}
span {
- font-size: $font-size-large;
+ font-size: $font-size-lg;
}
}
@@ -49,8 +49,8 @@ input[type="radio"] {
position: absolute;
&:checked + .item {
- border-color: $brand-primary;
- color: $brand-primary;
- background-color: rgba($brand-secondary_rgb, 0.1);
+ border-color: $color-palette-primary;
+ color: $color-palette-primary;
+ background-color: rgba($color-palette-secondary, 0.1);
}
}
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/dot-block-editor-settings/dot-block-editor-settings.component.scss b/core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/dot-block-editor-settings/dot-block-editor-settings.component.scss
index c58b712c7fc2..1e707cc6e30c 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/dot-block-editor-settings/dot-block-editor-settings.component.scss
+++ b/core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/dot-block-editor-settings/dot-block-editor-settings.component.scss
@@ -1,7 +1,7 @@
@use "variables" as *;
:host {
- color: $gray-dark;
+ color: $color-palette-gray-800;
.wrapper {
padding: $spacing-6;
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/dot-convert-to-block-info/dot-convert-to-block-info.component.scss b/core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/dot-convert-to-block-info/dot-convert-to-block-info.component.scss
index 937a068777f4..4acf6273aef5 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/dot-convert-to-block-info/dot-convert-to-block-info.component.scss
+++ b/core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/dot-convert-to-block-info/dot-convert-to-block-info.component.scss
@@ -1,7 +1,7 @@
@use "variables" as *;
:host {
- background-color: rgba($brand-primary_rgb, 0.2);
+ background-color: rgba($color-palette-primary, 0.2);
padding: $spacing-1 $spacing-6;
color: $brand-background;
display: flex;
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/dot-convert-wysiwyg-to-block/dot-convert-wysiwyg-to-block.component.scss b/core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/dot-convert-wysiwyg-to-block/dot-convert-wysiwyg-to-block.component.scss
index a5deb736127f..30c3519158d9 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/dot-convert-wysiwyg-to-block/dot-convert-wysiwyg-to-block.component.scss
+++ b/core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/dot-convert-wysiwyg-to-block/dot-convert-wysiwyg-to-block.component.scss
@@ -3,18 +3,18 @@
:host {
margin-top: $spacing-6;
display: block;
- border: solid 1px $gray-light;
+ border: solid 1px $color-palette-gray-500;
padding: $spacing-2 $spacing-4;
- border-radius: $border-radius;
+ border-radius: $border-radius-xs;
}
h3 {
- font-size: $font-size-x-large;
+ font-size: $font-size-xl;
margin: $spacing-2 0;
}
h4 {
- font-size: $font-size-large;
+ font-size: $font-size-lg;
margin: $spacing-2 0;
}
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/fields/content-type-field-dragabble-item/content-type-field-dragabble-item.component.scss b/core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/fields/content-type-field-dragabble-item/content-type-field-dragabble-item.component.scss
index fa67944eb3a6..51f342798e9b 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/fields/content-type-field-dragabble-item/content-type-field-dragabble-item.component.scss
+++ b/core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/fields/content-type-field-dragabble-item/content-type-field-dragabble-item.component.scss
@@ -25,7 +25,7 @@
dot-icon-button-tooltip ::ng-deep .material-icons,
dot-icon {
- color: $gray;
+ color: $color-palette-gray-700;
}
dot-icon {
@@ -63,13 +63,13 @@ dot-icon {
.field__attribute,
.field__variable {
color: gray;
- font-size: $font-size-small;
+ font-size: $font-size-sm;
overflow: hidden;
display: flex;
}
.field__attribute {
- min-height: $font-size-small;
+ min-height: $font-size-sm;
margin-left: 26px;
}
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/fields/content-type-fields-add-row/content-type-fields-add-row.component.scss b/core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/fields/content-type-fields-add-row/content-type-fields-add-row.component.scss
index e927c9f9cd55..6a8c8c3f09e8 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/fields/content-type-fields-add-row/content-type-fields-add-row.component.scss
+++ b/core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/fields/content-type-fields-add-row/content-type-fields-add-row.component.scss
@@ -40,7 +40,7 @@ $row-height: 70px;
position: relative;
.dot-add-rows-columns-list__title {
- font-size: $font-size-large;
+ font-size: $font-size-lg;
}
dot-icon-button {
@@ -51,7 +51,7 @@ $row-height: 70px;
}
.dot-add-rows-columns-list__item {
- background-color: $gray-bg;
+ background-color: $color-palette-gray-200;
cursor: pointer;
display: block;
flex-grow: 1;
@@ -65,23 +65,23 @@ $row-height: 70px;
}
&.active {
- background-color: rgba($brand-secondary_rgb, 0.25);
+ background-color: rgba($color-palette-secondary, 0.25);
.dot-add-rows-columns-list__item-col {
- background-color: $gray-bg;
+ background-color: $color-palette-gray-200;
}
}
.dot-add-rows-columns-list__item-title {
- color: $gray;
- font-size: $font-size-small;
+ color: $color-palette-gray-700;
+ font-size: $font-size-sm;
}
.dot-add-rows-columns-list__item-container {
display: flex;
.dot-add-rows-columns-list__item-col {
- background-color: $gray-dark;
+ background-color: $color-palette-gray-800;
flex-grow: 1;
height: 60px;
margin: 0 $spacing-1;
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/fields/content-type-fields-row/content-type-fields-row.component.scss b/core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/fields/content-type-fields-row/content-type-fields-row.component.scss
index b1ad3298db9d..d569210c42be 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/fields/content-type-fields-row/content-type-fields-row.component.scss
+++ b/core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/fields/content-type-fields-row/content-type-fields-row.component.scss
@@ -15,7 +15,7 @@
.row-columns {
display: flex;
- background: $gray-bg;
+ background: $color-palette-gray-200;
padding: $spacing-1;
}
@@ -30,14 +30,14 @@
width: 0;
&:after {
- border: dashed 1px $gray;
+ border: dashed 1px $color-palette-gray-700;
bottom: 0;
- color: $gray;
+ color: $color-palette-gray-700;
content: var(--empty-message);
display: flex;
flex-direction: column;
flex-grow: 1;
- font-size: $font-size-small;
+ font-size: $font-size-sm;
justify-content: center;
min-height: $content-type-field-height;
pointer-events: none;
@@ -61,7 +61,7 @@
}
&.empty {
- background: $gray-bg;
+ background: $color-palette-gray-200;
min-height: $content-type-field-height * 2;
dot-content-type-field-dragabble-item {
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/fields/content-type-fields-tab/content-type-fields-tab.component.scss b/core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/fields/content-type-fields-tab/content-type-fields-tab.component.scss
index cc0962c8fe8a..b7298a3d7589 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/fields/content-type-fields-tab/content-type-fields-tab.component.scss
+++ b/core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/fields/content-type-fields-tab/content-type-fields-tab.component.scss
@@ -14,7 +14,7 @@
}
hr {
- background: $gray;
+ background: $color-palette-gray-700;
border: 0;
bottom: 0;
height: 1px;
@@ -27,12 +27,13 @@
$tab-name-height: 32px;
.tab__label {
- border-color: $gray $gray $gray-bg $gray;
+ border-color: $color-palette-gray-700 $color-palette-gray-700 $color-palette-gray-200
+ $color-palette-gray-700;
border-radius: 5px 5px 0 0;
border-style: solid;
border-width: 1px 1px 1px 1px;
cursor: text;
- font-size: $font-size-small;
+ font-size: $font-size-sm;
height: $tab-name-height;
line-height: $tab-name-height;
min-width: 100px;
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/fields/content-types-fields-list/content-types-fields-list.component.scss b/core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/fields/content-types-fields-list/content-types-fields-list.component.scss
index 639f995a63fd..b56076804124 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/fields/content-types-fields-list/content-types-fields-list.component.scss
+++ b/core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/fields/content-types-fields-list/content-types-fields-list.component.scss
@@ -17,7 +17,7 @@ $icon-size: 24px;
transition: background-color $basic-speed;
dot-icon {
- color: $gray;
+ color: $color-palette-gray-700;
margin-right: $spacing-3;
transition: color $basic-speed;
}
@@ -26,11 +26,11 @@ $icon-size: 24px;
background-color: $bg-hover;
dot-icon {
- color: $body-font-color;
+ color: $font-color-base;
}
}
&:nth-child(2) {
- border-bottom: solid 1px $gray-lighter;
+ border-bottom: solid 1px $color-palette-gray-300;
}
}
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/layout/content-types-layout.component.html b/core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/layout/content-types-layout.component.html
index 4ff74278ba54..75d5e4dcf037 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/layout/content-types-layout.component.html
+++ b/core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/layout/content-types-layout.component.html
@@ -23,24 +23,22 @@ {{ contentType.name }}
[inlineEditDisplayTemplate]="inlineEditDisplayTemplate"
>
-
- {{ 'contenttypes.content.variable' | dm }}:
-
- •
- {{ 'contenttypes.form.identifier' | dm }}:
-
+
+ >
+
@@ -56,7 +54,7 @@ {{ contentType.name }}
class="p-button-secondary"
id="form-edit-button"
(click)="openEditDialog.next()"
- icon="fa fa-edit"
+ icon="pi pi-pencil"
label="{{ 'contenttypes.action.edit' | dm }}"
pButton
type="button"
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/layout/content-types-layout.component.scss b/core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/layout/content-types-layout.component.scss
index 2a9a6590b845..076892b54891 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/layout/content-types-layout.component.scss
+++ b/core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/layout/content-types-layout.component.scss
@@ -12,14 +12,14 @@ $top-height: ($toolbar-height + $tabview-nav-height + $dot-secondary-toolbar-mai
}
> p-tabview > .p-tabview > .p-tabview-nav {
- background-color: $gray-bg;
+ background-color: $color-palette-gray-200;
}
.content-type__fields-sidebar {
background-color: $white;
.p-splitbutton {
- border-bottom: solid 1px $gray-lighter;
+ border-bottom: solid 1px $color-palette-gray-300;
display: flex;
&:hover {
@@ -30,7 +30,7 @@ $top-height: ($toolbar-height + $tabview-nav-height + $dot-secondary-toolbar-mai
.p-splitbutton-menubutton {
padding: $spacing-2 $spacing-3;
background: none;
- color: $body-font-color;
+ color: $font-color-base;
}
.p-splitbutton-defaultbutton {
@@ -42,7 +42,7 @@ $top-height: ($toolbar-height + $tabview-nav-height + $dot-secondary-toolbar-mai
}
.p-button-icon-left {
- color: $gray;
+ color: $color-palette-gray-700;
width: 18px;
margin-right: $spacing-3;
}
@@ -56,7 +56,7 @@ $top-height: ($toolbar-height + $tabview-nav-height + $dot-secondary-toolbar-mai
}
.content-type__fields-main {
- background-color: $gray-bg;
+ background-color: $color-palette-gray-200;
display: flex;
flex-direction: column;
flex-grow: 1;
@@ -71,8 +71,8 @@ $top-height: ($toolbar-height + $tabview-nav-height + $dot-secondary-toolbar-mai
}
.content-type__fields-sidebar {
- border-left: solid 1px $gray-bg;
- width: 200px;
+ border-left: solid 1px $color-palette-gray-200;
+ width: 15rem;
display: flex;
flex-direction: column;
flex-shrink: 0;
@@ -95,7 +95,7 @@ $top-height: ($toolbar-height + $tabview-nav-height + $dot-secondary-toolbar-mai
}
.content-type__title {
- font-size: $font-size-large;
+ font-size: $font-size-lg;
display: flex;
flex-flow: column wrap;
@@ -139,21 +139,18 @@ $top-height: ($toolbar-height + $tabview-nav-height + $dot-secondary-toolbar-mai
}
.content-type__dot-separator {
- font-size: $font-size-x-large;
+ font-size: $font-size-xl;
margin: 0 4px;
vertical-align: middle;
}
.content-type__info {
align-items: center;
- color: $gray;
+ color: $color-palette-gray-700;
display: flex;
- font-size: $font-size-small;
+ font-size: $font-size-sm;
margin-left: $spacing-4;
-
- dot-copy-link {
- margin-left: 0.25rem;
- }
+ gap: $spacing-1;
}
.content-type__add-to-menu {
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/layout/content-types-layout.component.spec.ts b/core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/layout/content-types-layout.component.spec.ts
index 0894d476910e..bdeb285aadd7 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/layout/content-types-layout.component.spec.ts
+++ b/core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/layout/content-types-layout.component.spec.ts
@@ -15,6 +15,7 @@ import { TabViewModule } from 'primeng/tabview';
import { DotInlineEditModule } from '@components/_common/dot-inline-edit/dot-inline-edit.module';
import { DotApiLinkModule } from '@components/dot-api-link/dot-api-link.module';
+import { DotCopyButtonModule } from '@components/dot-copy-button/dot-copy-button.module';
import { DotCopyLinkModule } from '@components/dot-copy-link/dot-copy-link.module';
import { DotPortletBoxModule } from '@components/dot-portlet-base/components/dot-portlet-box/dot-portlet-box.module';
import { DotSecondaryToolbarModule } from '@components/dot-secondary-toolbar';
@@ -141,7 +142,8 @@ describe('ContentTypesLayoutComponent', () => {
SplitButtonModule,
DotInlineEditModule,
HttpClientTestingModule,
- DotPortletBoxModule
+ DotPortletBoxModule,
+ DotCopyButtonModule
],
providers: [
{ provide: DotMessageService, useValue: messageServiceMock },
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/dot-content-types-edit.module.ts b/core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/dot-content-types-edit.module.ts
index 116d2a1e0b3d..143caafda6f2 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/dot-content-types-edit.module.ts
+++ b/core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/dot-content-types-edit.module.ts
@@ -31,6 +31,7 @@ import { IFrameModule } from '@components/_common/iframe';
import { SearchableDropDownModule } from '@components/_common/searchable-dropdown';
import { DotApiLinkModule } from '@components/dot-api-link/dot-api-link.module';
import { DotBaseTypeSelectorModule } from '@components/dot-base-type-selector';
+import { DotCopyButtonModule } from '@components/dot-copy-button/dot-copy-button.module';
import { DotCopyLinkModule } from '@components/dot-copy-link/dot-copy-link.module';
import { DotDialogModule } from '@components/dot-dialog/dot-dialog.module';
import { DotFieldHelperModule } from '@components/dot-field-helper/dot-field-helper.module';
@@ -154,7 +155,8 @@ import { DotAddToMenuModule } from '../dot-content-types-listing/components/dot-
DotRelationshipTreeModule,
DotPortletBoxModule,
DotMdIconSelectorModule,
- DotAddToMenuModule
+ DotAddToMenuModule,
+ DotCopyButtonModule
],
providers: [
DotContentTypesInfoService,
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/shared/dot-unlicensed-porlet/dot-unlicensed-porlet.component.scss b/core-web/apps/dotcms-ui/src/app/portlets/shared/dot-unlicensed-porlet/dot-unlicensed-porlet.component.scss
index 0d625e19d0a1..489463986ba4 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/shared/dot-unlicensed-porlet/dot-unlicensed-porlet.component.scss
+++ b/core-web/apps/dotcms-ui/src/app/portlets/shared/dot-unlicensed-porlet/dot-unlicensed-porlet.component.scss
@@ -18,5 +18,5 @@ h4 {
dot-icon::ng-deep .material-icons,
h4 {
- color: $gray-light;
+ color: $color-palette-gray-500;
}
diff --git a/core-web/apps/dotcms-ui/src/app/providers.ts b/core-web/apps/dotcms-ui/src/app/providers.ts
index 4c8105862121..acaf310d4fc0 100644
--- a/core-web/apps/dotcms-ui/src/app/providers.ts
+++ b/core-web/apps/dotcms-ui/src/app/providers.ts
@@ -21,7 +21,7 @@ import {
} from '@dotcms/data-access';
import { DotPushPublishDialogService } from '@dotcms/dotcms-js';
import { LayoutEditorCanDeactivateGuardService } from '@services/guards/layout-editor-can-deactivate-guard.service';
-import { DotTemplatePageTitleStrategy } from '@shared/services/dot-title-strategy.service';
+import { DotTitleStrategy } from '@shared/services/dot-title-strategy.service';
import { DotAccountService } from './api/services/dot-account-service';
import { DotFormatDateService } from './api/services/dot-format-date-service';
@@ -81,7 +81,7 @@ const PROVIDERS: Provider[] = [
LayoutEditorCanDeactivateGuardService,
{
provide: TitleStrategy,
- useClass: DotTemplatePageTitleStrategy
+ useClass: DotTitleStrategy
}
];
diff --git a/core-web/apps/dotcms-ui/src/app/shared/dot-sidebar-header/dot-sidebar-header.component.scss b/core-web/apps/dotcms-ui/src/app/shared/dot-sidebar-header/dot-sidebar-header.component.scss
index 50d9b4f598f5..ca42e7f80cfa 100644
--- a/core-web/apps/dotcms-ui/src/app/shared/dot-sidebar-header/dot-sidebar-header.component.scss
+++ b/core-web/apps/dotcms-ui/src/app/shared/dot-sidebar-header/dot-sidebar-header.component.scss
@@ -4,13 +4,13 @@
width: auto;
min-height: $dot-secondary-toolbar-height;
display: block;
- border-bottom: 1px solid $gray-lighter;
+ border-bottom: 1px solid $color-palette-gray-300;
margin-left: -$spacing-3;
margin-right: -$spacing-3;
margin-top: -$spacing-3;
h2 {
- font-size: $font-size-large;
+ font-size: $font-size-lg;
margin: 0;
margin-left: $spacing-1;
}
diff --git a/core-web/apps/dotcms-ui/src/app/shared/services/dot-title-strategy.service.ts b/core-web/apps/dotcms-ui/src/app/shared/services/dot-title-strategy.service.ts
index d5c759686f8a..4ccbed4ab6ae 100644
--- a/core-web/apps/dotcms-ui/src/app/shared/services/dot-title-strategy.service.ts
+++ b/core-web/apps/dotcms-ui/src/app/shared/services/dot-title-strategy.service.ts
@@ -2,38 +2,64 @@ import { Injectable } from '@angular/core';
import { Title } from '@angular/platform-browser';
import { RouterStateSnapshot, TitleStrategy } from '@angular/router';
+import { DotMessageService } from '@dotcms/data-access';
+
+const DEFAULT_TITLE_PLATFORM = 'dotCMS Content Management Platform';
+
/**
- * Page Title Strategy
+ * DotCMS Title Strategy
* Add the string path to useTitleStrategy to use TitleStrategy
- * to add title, in the Router add the title atribute.
+ * to add title, in the Router add the title attribute.
*/
@Injectable()
-export class DotTemplatePageTitleStrategy extends TitleStrategy {
- constructor(private readonly title: Title) {
+export class DotTitleStrategy extends TitleStrategy {
+ constructor(
+ private readonly title: Title,
+ private readonly dotMessageService: DotMessageService
+ ) {
super();
}
override updateTitle(routerState: RouterStateSnapshot) {
- const dotCMSTitle = 'dotCMS Content Management Platform';
- const title = this.buildTitle(routerState);
+ const currentRouteTitle = this.buildTitle(routerState);
// TODO: after add the title to all the paths, delete the wrapper if
if (this.useTitleStrategy(routerState.url)) {
- const metaTitle = title ? `${title} - ${dotCMSTitle}` : `${dotCMSTitle}`;
+ const metaTitle = currentRouteTitle
+ ? `${this.translateTitle(currentRouteTitle)} - ${DEFAULT_TITLE_PLATFORM}`
+ : `${DEFAULT_TITLE_PLATFORM}`;
this.title.setTitle(metaTitle);
}
}
/**
* Add to the array allowedPaths all the path do you
- * want use the global TitleStrategy
- * @param currentUrl
+ * want to use the global TitleStrategy
+ * @param {string} currentUrl
* @private
*/
private useTitleStrategy(currentUrl: string) {
const allowedPaths = ['experiments'];
- const search = allowedPaths.find((url) => currentUrl.includes(url));
- return !!search;
+ return !!allowedPaths.find((url) => currentUrl.includes(url));
+ }
+
+ /**
+ * Translate the title sent in the Route
+ *
+ * @example
+ * ```
+ * {
+ * path: 'reports',
+ * component: ComponentToShow
+ * title: 'title.to.translate',
+ * }
+ * ```
+ *
+ * @param {string} title
+ * @private
+ */
+ private translateTitle(title: string) {
+ return this.dotMessageService.get(title);
}
}
diff --git a/core-web/apps/dotcms-ui/src/app/view/components/_common/dot-action-button/dot-action-button.component.scss b/core-web/apps/dotcms-ui/src/app/view/components/_common/dot-action-button/dot-action-button.component.scss
index 0c2821ab8a29..a80dbd40f42e 100644
--- a/core-web/apps/dotcms-ui/src/app/view/components/_common/dot-action-button/dot-action-button.component.scss
+++ b/core-web/apps/dotcms-ui/src/app/view/components/_common/dot-action-button/dot-action-button.component.scss
@@ -10,18 +10,18 @@
}
&:not([disabled]) {
- background-color: $brand-primary;
+ background-color: $color-palette-primary;
box-shadow: $md-shadow-1;
opacity: 1;
&:hover {
- background: $brand-primary_mod;
+ background: $color-palette-primary-400;
box-shadow: $md-shadow-3;
}
&:active,
&:focus {
- background: $brand-primary_mod;
+ background: $color-palette-primary-400;
}
}
}
diff --git a/core-web/apps/dotcms-ui/src/app/view/components/_common/dot-autocomplete-tags/dot-autocomplete-tags.component.scss b/core-web/apps/dotcms-ui/src/app/view/components/_common/dot-autocomplete-tags/dot-autocomplete-tags.component.scss
index 8d7198377b5e..5a4be3be6737 100644
--- a/core-web/apps/dotcms-ui/src/app/view/components/_common/dot-autocomplete-tags/dot-autocomplete-tags.component.scss
+++ b/core-web/apps/dotcms-ui/src/app/view/components/_common/dot-autocomplete-tags/dot-autocomplete-tags.component.scss
@@ -7,12 +7,12 @@
position: relative;
.autocomplete-helper {
- font-size: $font-size-small;
+ font-size: $font-size-sm;
text-transform: uppercase;
position: absolute;
top: 15px;
right: $spacing-1;
- color: $gray;
+ color: $color-palette-gray-700;
display: flex;
align-items: baseline;
@@ -62,8 +62,8 @@
}
.p-autocomplete-token {
- border-radius: $border-radius;
- border: solid 1px $gray-light;
+ border-radius: $border-radius-xs;
+ border: solid 1px $color-palette-gray-500;
margin: $spacing-1 $spacing-1 0 0;
padding: $spacing-1 $spacing-1;
max-width: 100%;
diff --git a/core-web/apps/dotcms-ui/src/app/view/components/_common/dot-avatar/dot-avatar.component.scss b/core-web/apps/dotcms-ui/src/app/view/components/_common/dot-avatar/dot-avatar.component.scss
index 38cbd4529dee..fdaca8bb8e27 100644
--- a/core-web/apps/dotcms-ui/src/app/view/components/_common/dot-avatar/dot-avatar.component.scss
+++ b/core-web/apps/dotcms-ui/src/app/view/components/_common/dot-avatar/dot-avatar.component.scss
@@ -13,7 +13,7 @@
.avatar__placeholder {
border-radius: 50%;
- background-color: $brand-secondary;
+ background-color: $color-palette-secondary;
color: $white;
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
line-height: 1.2em;
@@ -21,7 +21,7 @@
}
.avatar__dot {
- background-color: $brand-primary;
+ background-color: $color-palette-primary;
bottom: -2px;
border: 1px solid $white;
border-radius: 50%;
diff --git a/core-web/apps/dotcms-ui/src/app/view/components/_common/dot-bulk-information/dot-bulk-information.component.scss b/core-web/apps/dotcms-ui/src/app/view/components/_common/dot-bulk-information/dot-bulk-information.component.scss
index 879d0e581ac7..e96254d3d0c0 100644
--- a/core-web/apps/dotcms-ui/src/app/view/components/_common/dot-bulk-information/dot-bulk-information.component.scss
+++ b/core-web/apps/dotcms-ui/src/app/view/components/_common/dot-bulk-information/dot-bulk-information.component.scss
@@ -1,8 +1,8 @@
@use "variables" as *;
.bulk-information__success-message {
- color: $gray;
- font-size: $font-size-large;
+ color: $color-palette-gray-700;
+ font-size: $font-size-lg;
text-align: center;
padding-top: $spacing-3;
padding-bottom: $spacing-5;
@@ -40,7 +40,7 @@
}
h5 {
padding-bottom: $spacing-1;
- font-size: $font-size-large;
+ font-size: $font-size-lg;
}
padding: $spacing-3;
box-shadow: $md-shadow-1;
diff --git a/core-web/apps/dotcms-ui/src/app/view/components/_common/dot-custom-time.component/dot-custom-time.component.html b/core-web/apps/dotcms-ui/src/app/view/components/_common/dot-custom-time.component/dot-custom-time.component.html
index 1e43b119ceac..3cdd5fd458d8 100644
--- a/core-web/apps/dotcms-ui/src/app/view/components/_common/dot-custom-time.component/dot-custom-time.component.html
+++ b/core-web/apps/dotcms-ui/src/app/view/components/_common/dot-custom-time.component/dot-custom-time.component.html
@@ -1 +1 @@
-
+
diff --git a/core-web/apps/dotcms-ui/src/app/view/components/_common/dot-custom-time.component/dot-custom-time.component.ts b/core-web/apps/dotcms-ui/src/app/view/components/_common/dot-custom-time.component/dot-custom-time.component.ts
index 0bc9bc416d99..c7d638ec5774 100644
--- a/core-web/apps/dotcms-ui/src/app/view/components/_common/dot-custom-time.component/dot-custom-time.component.ts
+++ b/core-web/apps/dotcms-ui/src/app/view/components/_common/dot-custom-time.component/dot-custom-time.component.ts
@@ -1,28 +1,12 @@
-import { AfterViewChecked, Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
-
-import { DotFormatDateService } from '@dotcms/app/api/services/dot-format-date-service';
+import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core';
@Component({
encapsulation: ViewEncapsulation.Emulated,
selector: 'dot-custom-time',
styleUrls: ['./dot-custom-time.component.scss'],
- templateUrl: 'dot-custom-time.component.html'
+ templateUrl: 'dot-custom-time.component.html',
+ changeDetection: ChangeDetectionStrategy.OnPush
})
-export class CustomTimeComponent implements OnInit, AfterViewChecked {
- @Input()
- time;
-
- formattedTime = '';
-
- constructor(private dotFormatDateService: DotFormatDateService) {}
-
- ngOnInit(): void {
- this.formattedTime = this.dotFormatDateService.getRelative(this.time);
- }
-
- // TODO: this it's running every time the UI changes no matter where, need to fix it, should only run when custom-time shows
- ngAfterViewChecked(): void {
- // TODO: this is triggering even when open other dropdown component instance, need to check that.
- this.formattedTime = this.dotFormatDateService.getRelative(this.time);
- }
+export class CustomTimeComponent {
+ @Input() time: string;
}
diff --git a/core-web/apps/dotcms-ui/src/app/view/components/_common/dot-custom-time.component/dot-custom-time.module.ts b/core-web/apps/dotcms-ui/src/app/view/components/_common/dot-custom-time.component/dot-custom-time.module.ts
index 07acd2bc9e53..af800ef15d10 100644
--- a/core-web/apps/dotcms-ui/src/app/view/components/_common/dot-custom-time.component/dot-custom-time.module.ts
+++ b/core-web/apps/dotcms-ui/src/app/view/components/_common/dot-custom-time.component/dot-custom-time.module.ts
@@ -1,10 +1,12 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
+import { DotRelativeDatePipe } from '@dotcms/app/view/pipes/dot-relative-date/dot-relative-date.pipe';
+
import { CustomTimeComponent } from './dot-custom-time.component';
@NgModule({
- imports: [CommonModule],
+ imports: [CommonModule, DotRelativeDatePipe],
exports: [CustomTimeComponent],
declarations: [CustomTimeComponent]
})
diff --git a/core-web/apps/dotcms-ui/src/app/view/components/_common/dot-download-bundle-dialog/dot-download-bundle-dialog.component.scss b/core-web/apps/dotcms-ui/src/app/view/components/_common/dot-download-bundle-dialog/dot-download-bundle-dialog.component.scss
index 5d8b0904341e..a70ed72461a1 100644
--- a/core-web/apps/dotcms-ui/src/app/view/components/_common/dot-download-bundle-dialog/dot-download-bundle-dialog.component.scss
+++ b/core-web/apps/dotcms-ui/src/app/view/components/_common/dot-download-bundle-dialog/dot-download-bundle-dialog.component.scss
@@ -5,7 +5,7 @@ form {
p-selectbutton {
display: block;
- border-bottom: solid 1px $gray-light;
+ border-bottom: solid 1px $color-palette-gray-500;
}
.download-bundle__error {
diff --git a/core-web/apps/dotcms-ui/src/app/view/components/_common/dot-dropdown-component/dot-dropdown.component.html b/core-web/apps/dotcms-ui/src/app/view/components/_common/dot-dropdown-component/dot-dropdown.component.html
index 6cfd0d517962..ece2f784f462 100644
--- a/core-web/apps/dotcms-ui/src/app/view/components/_common/dot-dropdown-component/dot-dropdown.component.html
+++ b/core-web/apps/dotcms-ui/src/app/view/components/_common/dot-dropdown-component/dot-dropdown.component.html
@@ -1,23 +1,23 @@
-
+
- -
-
+
-
+
{{ environment.name }}
diff --git a/core-web/apps/dotcms-ui/src/app/view/components/_common/dot-push-publish-env-selector/dot-push-publish-env-selector.component.scss b/core-web/apps/dotcms-ui/src/app/view/components/_common/dot-push-publish-env-selector/dot-push-publish-env-selector.component.scss
index 90f9d16add0d..0b7c1a570b25 100644
--- a/core-web/apps/dotcms-ui/src/app/view/components/_common/dot-push-publish-env-selector/dot-push-publish-env-selector.component.scss
+++ b/core-web/apps/dotcms-ui/src/app/view/components/_common/dot-push-publish-env-selector/dot-push-publish-env-selector.component.scss
@@ -9,13 +9,13 @@
height: 140px;
margin: $spacing-1 0;
overflow-x: hidden;
- border: 1px solid $gray;
+ border: 1px solid $color-palette-gray-700;
padding: 0;
}
.environment-selector__list-item {
@include naked-list;
- border-top: 1px solid $gray-bg;
+ border-top: 1px solid $color-palette-gray-200;
padding: $spacing-1 0;
&:first-child {
diff --git a/core-web/apps/dotcms-ui/src/app/view/components/_common/dot-site-selector/dot-site-selector.component.scss b/core-web/apps/dotcms-ui/src/app/view/components/_common/dot-site-selector/dot-site-selector.component.scss
index 5bfcdc3c6580..6b066c7780f7 100644
--- a/core-web/apps/dotcms-ui/src/app/view/components/_common/dot-site-selector/dot-site-selector.component.scss
+++ b/core-web/apps/dotcms-ui/src/app/view/components/_common/dot-site-selector/dot-site-selector.component.scss
@@ -2,7 +2,7 @@
@import "mixins";
.site-selector__title {
- font-size: $font-size-large;
+ font-size: $font-size-lg;
}
.site-selector__modal {
diff --git a/core-web/apps/dotcms-ui/src/app/view/components/_common/dot-workflows-selector-field/dot-workflows-selector-field.component.scss b/core-web/apps/dotcms-ui/src/app/view/components/_common/dot-workflows-selector-field/dot-workflows-selector-field.component.scss
index 410f188ad410..4a508f85ebf1 100644
--- a/core-web/apps/dotcms-ui/src/app/view/components/_common/dot-workflows-selector-field/dot-workflows-selector-field.component.scss
+++ b/core-web/apps/dotcms-ui/src/app/view/components/_common/dot-workflows-selector-field/dot-workflows-selector-field.component.scss
@@ -2,12 +2,12 @@
@import "mixins";
.workflow__archive-label {
- color: $gray;
+ color: $color-palette-gray-700;
text-decoration: line-through;
}
.workflow__archive-message {
- color: $gray;
- font-size: $font-size-small;
+ color: $color-palette-gray-700;
+ font-size: $font-size-sm;
margin-left: $spacing-1;
}
diff --git a/core-web/apps/dotcms-ui/src/app/view/components/_common/forms/dot-push-publish-form/dot-push-publish-form.component.scss b/core-web/apps/dotcms-ui/src/app/view/components/_common/forms/dot-push-publish-form/dot-push-publish-form.component.scss
index 67c8f125ad4d..96249d5a872b 100644
--- a/core-web/apps/dotcms-ui/src/app/view/components/_common/forms/dot-push-publish-form/dot-push-publish-form.component.scss
+++ b/core-web/apps/dotcms-ui/src/app/view/components/_common/forms/dot-push-publish-form/dot-push-publish-form.component.scss
@@ -23,7 +23,7 @@ form,
.push-publish-dialog__action-select {
display: block;
- border-bottom: solid 1px $gray-light;
+ border-bottom: solid 1px $color-palette-gray-500;
}
.push-publish-dialog__publish-dates-container {
diff --git a/core-web/apps/dotcms-ui/src/app/view/components/_common/searchable-dropdown/component/searchable-dropdown.component.scss b/core-web/apps/dotcms-ui/src/app/view/components/_common/searchable-dropdown/component/searchable-dropdown.component.scss
index 2d7cede3d3e2..8f88bc22e0c4 100644
--- a/core-web/apps/dotcms-ui/src/app/view/components/_common/searchable-dropdown/component/searchable-dropdown.component.scss
+++ b/core-web/apps/dotcms-ui/src/app/view/components/_common/searchable-dropdown/component/searchable-dropdown.component.scss
@@ -30,7 +30,7 @@
border: 1px solid $input-border-color;
padding-left: $spacing-2;
padding-right: $spacing-2;
- border-radius: 2px;
+ border-radius: $field-border-radius;
background: none;
text-align: left;
@@ -142,7 +142,7 @@
}
.searchable-dropdown__search-icon {
- color: $gray;
+ color: $color-palette-gray-700;
position: absolute;
right: $spacing-1;
top: 9px;
diff --git a/core-web/apps/dotcms-ui/src/app/view/components/dot-add-persona-dialog/dot-create-persona-form/dot-create-persona-form.component.scss b/core-web/apps/dotcms-ui/src/app/view/components/dot-add-persona-dialog/dot-create-persona-form/dot-create-persona-form.component.scss
index a7faede48bbd..3ce3cd287d15 100644
--- a/core-web/apps/dotcms-ui/src/app/view/components/dot-add-persona-dialog/dot-create-persona-form/dot-create-persona-form.component.scss
+++ b/core-web/apps/dotcms-ui/src/app/view/components/dot-add-persona-dialog/dot-create-persona-form/dot-create-persona-form.component.scss
@@ -14,7 +14,7 @@ p-fileupload {
margin: 0px $spacing-1 0px $spacing-3;
}
img {
- border: 1px solid $gray;
+ border: 1px solid $color-palette-gray-700;
width: 100px;
}
}
diff --git a/core-web/apps/dotcms-ui/src/app/view/components/dot-api-link/dot-api-link.component.html b/core-web/apps/dotcms-ui/src/app/view/components/dot-api-link/dot-api-link.component.html
index a334258aa016..946a13aeeb6c 100644
--- a/core-web/apps/dotcms-ui/src/app/view/components/dot-api-link/dot-api-link.component.html
+++ b/core-web/apps/dotcms-ui/src/app/view/components/dot-api-link/dot-api-link.component.html
@@ -1,3 +1,12 @@
- API
+
+ link
+ API
+
diff --git a/core-web/apps/dotcms-ui/src/app/view/components/dot-api-link/dot-api-link.component.scss b/core-web/apps/dotcms-ui/src/app/view/components/dot-api-link/dot-api-link.component.scss
index e7de69ff5489..fa7901ef6ed7 100644
--- a/core-web/apps/dotcms-ui/src/app/view/components/dot-api-link/dot-api-link.component.scss
+++ b/core-web/apps/dotcms-ui/src/app/view/components/dot-api-link/dot-api-link.component.scss
@@ -1,34 +1,26 @@
@use "variables" as *;
:host {
- font-size: 0.75rem;
display: inline-flex;
}
-a {
- align-items: center;
- border-radius: 2px;
- border: solid 1px $brand-secondary;
- color: $brand-secondary;
- display: inline-flex;
- line-height: 1em;
- padding: 0.25rem 6px 0.25rem $spacing-1;
+a,
+a:focus,
+a:active {
text-decoration: none;
- text-transform: uppercase;
- transition: background-color $basic-speed ease, color $basic-speed ease;
+}
- &:hover {
- background-color: $brand-secondary;
- color: $white;
+.p-button {
+ gap: 0.25rem;
+}
- dot-icon {
- color: $white;
- }
- }
+.material-icons {
+ color: $color-palette-primary;
+ font-size: $font-size-default;
}
-dot-icon {
- color: $brand-secondary;
- margin-right: $spacing-1;
- transition: color $basic-speed ease;
+.p-button:hover,
+.p-button:active {
+ background: rgba($color-palette-secondary, 0.04);
+ border-color: $color-palette-secondary;
}
diff --git a/core-web/apps/dotcms-ui/src/app/view/components/dot-api-link/dot-api-link.component.spec.ts b/core-web/apps/dotcms-ui/src/app/view/components/dot-api-link/dot-api-link.component.spec.ts
index d9690f20e03f..eb54ba86cb83 100644
--- a/core-web/apps/dotcms-ui/src/app/view/components/dot-api-link/dot-api-link.component.spec.ts
+++ b/core-web/apps/dotcms-ui/src/app/view/components/dot-api-link/dot-api-link.component.spec.ts
@@ -40,7 +40,7 @@ describe('DotApiLinkComponent', () => {
});
it('should show label', () => {
- expect(link.nativeElement.textContent).toBe('API');
+ expect(link.nativeElement.textContent).toBe('link API ');
});
it('should set link properties and attr correctly', () => {
diff --git a/core-web/apps/dotcms-ui/src/app/view/components/dot-api-link/dot-api-link.module.ts b/core-web/apps/dotcms-ui/src/app/view/components/dot-api-link/dot-api-link.module.ts
index 2efd5900b419..421d788fccc2 100644
--- a/core-web/apps/dotcms-ui/src/app/view/components/dot-api-link/dot-api-link.module.ts
+++ b/core-web/apps/dotcms-ui/src/app/view/components/dot-api-link/dot-api-link.module.ts
@@ -1,10 +1,14 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
+import { ButtonModule } from 'primeng/button';
+
+import { DotIconModule } from '@dotcms/ui';
+
import { DotApiLinkComponent } from './dot-api-link.component';
@NgModule({
- imports: [CommonModule],
+ imports: [CommonModule, ButtonModule, DotIconModule],
declarations: [DotApiLinkComponent],
exports: [DotApiLinkComponent]
})
diff --git a/core-web/apps/dotcms-ui/src/app/view/components/dot-container-selector-layout/dot-container-selector-layout.component.scss b/core-web/apps/dotcms-ui/src/app/view/components/dot-container-selector-layout/dot-container-selector-layout.component.scss
index c174b013ccf1..1ea930631007 100644
--- a/core-web/apps/dotcms-ui/src/app/view/components/dot-container-selector-layout/dot-container-selector-layout.component.scss
+++ b/core-web/apps/dotcms-ui/src/app/view/components/dot-container-selector-layout/dot-container-selector-layout.component.scss
@@ -19,13 +19,13 @@
.container-selector__list-item {
display: flex;
align-items: center;
- border: 1px solid $gray-lighter;
+ border: 1px solid $color-palette-gray-300;
color: $black;
- font-size: $font-size-medium;
+ font-size: $font-size-md;
overflow: hidden;
padding: 0;
margin: $spacing-1;
- border-radius: $border-radius;
+ border-radius: $border-radius-xs;
dot-icon-button {
margin-right: $spacing-1;
diff --git a/core-web/apps/dotcms-ui/src/app/view/components/dot-container-selector/dot-container-selector.component.scss b/core-web/apps/dotcms-ui/src/app/view/components/dot-container-selector/dot-container-selector.component.scss
index db73fd89883c..157d6eb67620 100644
--- a/core-web/apps/dotcms-ui/src/app/view/components/dot-container-selector/dot-container-selector.component.scss
+++ b/core-web/apps/dotcms-ui/src/app/view/components/dot-container-selector/dot-container-selector.component.scss
@@ -15,9 +15,9 @@
.container-selector__list-item {
display: flex;
align-items: center;
- border-top: 1px solid $gray-bg;
+ border-top: 1px solid $color-palette-gray-200;
color: $black;
- font-size: $font-size-medium;
+ font-size: $font-size-md;
overflow: hidden;
padding: $spacing-1 0;
diff --git a/core-web/apps/dotcms-ui/src/app/view/components/dot-content-compare/components/dot-content-compare-table/dot-content-compare-table.component.html b/core-web/apps/dotcms-ui/src/app/view/components/dot-content-compare/components/dot-content-compare-table/dot-content-compare-table.component.html
index 464487e5e42f..f09b1770d676 100644
--- a/core-web/apps/dotcms-ui/src/app/view/components/dot-content-compare/components/dot-content-compare-table/dot-content-compare-table.component.html
+++ b/core-web/apps/dotcms-ui/src/app/view/components/dot-content-compare/components/dot-content-compare-table/dot-content-compare-table.component.html
@@ -1,7 +1,7 @@
- |
+ |
{{ data.working?.title }}
@@ -104,7 +104,7 @@
[fileURL]="data.compare[field.variable + 'Version']"
[label]="
data.working[field.variable + 'Version']
- | dotDiff: data.compare[field.variable + 'Version']:showDiff
+ | dotDiff : data.compare[field.variable + 'Version'] : showDiff
"
data-testId="table-binary-compare"
>
@@ -120,7 +120,7 @@
[innerHTML]="
data.working[field.variable]
| json
- | dotDiff: (data.compare[field.variable] | json):showDiff
+ | dotDiff : (data.compare[field.variable] | json) : showDiff
"
data-testId="table-json-compare"
>
@@ -133,7 +133,7 @@
| |
diff --git a/core-web/apps/dotcms-ui/src/app/view/components/dot-content-compare/components/dot-content-compare-table/dot-content-compare-table.component.scss b/core-web/apps/dotcms-ui/src/app/view/components/dot-content-compare/components/dot-content-compare-table/dot-content-compare-table.component.scss
index 0132d925af01..6301592d8280 100644
--- a/core-web/apps/dotcms-ui/src/app/view/components/dot-content-compare/components/dot-content-compare-table/dot-content-compare-table.component.scss
+++ b/core-web/apps/dotcms-ui/src/app/view/components/dot-content-compare/components/dot-content-compare-table/dot-content-compare-table.component.scss
@@ -1,6 +1,6 @@
@use "variables" as *;
-.dot-content-compare-table__controls{
+.dot-content-compare-table__controls {
display: flex;
align-items: center;
@@ -15,24 +15,23 @@
.dot-content-compare-table__title {
color: $black;
- font-size: $font-size-large;
+ font-size: $font-size-lg;
}
:host ::ng-deep .p-datatable {
-
table {
border-collapse: separate;
border-spacing: 0;
th {
- border-top: 1px solid $gray-lighter;
- border-bottom: 1px solid $gray-lighter;
- border-right: 1px solid $gray-lighter;
+ border-top: 1px solid $color-palette-gray-300;
+ border-bottom: 1px solid $color-palette-gray-300;
+ border-right: 1px solid $color-palette-gray-300;
}
td {
- border-bottom: 1px solid $gray-lighter;
- border-right: 1px solid $gray-lighter;
+ border-bottom: 1px solid $color-palette-gray-300;
+ border-right: 1px solid $color-palette-gray-300;
img {
max-width: 100%;
@@ -42,7 +41,7 @@
th:first-child,
td:first-child {
- border-left: 1px solid $gray-lighter;
+ border-left: 1px solid $color-palette-gray-300;
}
thead th {
@@ -50,6 +49,9 @@
top: 0;
z-index: 1;
+ &:not(:first-of-type) {
+ width: 45%;
+ }
}
}
}
diff --git a/core-web/apps/dotcms-ui/src/app/view/components/dot-copy-button/dot-copy-button.component.html b/core-web/apps/dotcms-ui/src/app/view/components/dot-copy-button/dot-copy-button.component.html
index 568d32b8b7bd..c0fab2505263 100644
--- a/core-web/apps/dotcms-ui/src/app/view/components/dot-copy-button/dot-copy-button.component.html
+++ b/core-web/apps/dotcms-ui/src/app/view/components/dot-copy-button/dot-copy-button.component.html
@@ -1,9 +1,13 @@
+ content_copy
+ {{ label }}
+
diff --git a/core-web/apps/dotcms-ui/src/app/view/components/dot-copy-button/dot-copy-button.component.scss b/core-web/apps/dotcms-ui/src/app/view/components/dot-copy-button/dot-copy-button.component.scss
index 7fbaef7cfd3b..aeb961e833a4 100644
--- a/core-web/apps/dotcms-ui/src/app/view/components/dot-copy-button/dot-copy-button.component.scss
+++ b/core-web/apps/dotcms-ui/src/app/view/components/dot-copy-button/dot-copy-button.component.scss
@@ -1,31 +1,14 @@
@use "variables" as *;
-@import "mixins";
:host {
- position: relative;
display: inline-flex;
- justify-content: center;
- font-weight: normal;
- overflow: hidden;
}
-.label {
- @include truncate-text;
- align-items: center;
- background-color: transparent;
- border-radius: $border-radius;
- border: solid 1px $brand-secondary;
- color: $brand-secondary;
- cursor: pointer;
- display: inline-flex;
- font-size: 0.75rem;
- line-height: 1em;
- padding: 0.25rem 6px 0.25rem $spacing-1;
- text-decoration: none;
- text-transform: uppercase;
- transition: background-color $basic-speed ease, color $basic-speed ease;
- &:hover {
- background-color: $brand-secondary;
- color: $white;
- }
+.p-button {
+ gap: 0.25rem;
+}
+
+.material-icons {
+ color: $color-palette-primary;
+ font-size: $font-size-default;
}
diff --git a/core-web/apps/dotcms-ui/src/app/view/components/dot-copy-button/dot-copy-button.component.spec.ts b/core-web/apps/dotcms-ui/src/app/view/components/dot-copy-button/dot-copy-button.component.spec.ts
index d2e11821094d..90d73ca9e91a 100644
--- a/core-web/apps/dotcms-ui/src/app/view/components/dot-copy-button/dot-copy-button.component.spec.ts
+++ b/core-web/apps/dotcms-ui/src/app/view/components/dot-copy-button/dot-copy-button.component.spec.ts
@@ -2,6 +2,7 @@ import { DebugElement } from '@angular/core';
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
+import { ButtonModule } from 'primeng/button';
import { TooltipModule } from 'primeng/tooltip';
import { UiDotIconButtonModule } from '@components/_common/dot-icon-button/dot-icon-button.module';
@@ -21,7 +22,7 @@ describe('DotCopyButtonComponent', () => {
let fixture: ComponentFixture;
let de: DebugElement;
let dotClipboardUtil: DotClipboardUtil;
- let label: DebugElement;
+ let button: DebugElement;
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
@@ -33,7 +34,7 @@ describe('DotCopyButtonComponent', () => {
},
DotClipboardUtil
],
- imports: [UiDotIconButtonModule, TooltipModule]
+ imports: [UiDotIconButtonModule, TooltipModule, ButtonModule]
}).compileComponents();
}));
@@ -57,23 +58,23 @@ describe('DotCopyButtonComponent', () => {
beforeEach(() => {
component.label = 'Label';
fixture.detectChanges();
- label = de.query(By.css('.label'));
+ button = de.query(By.css('button'));
});
it('should show label', () => {
- expect(label.nativeElement.textContent).toBe('Label');
+ expect(button.nativeElement.textContent).toBe('content_copy Label\n');
});
it('should have pTooltip attributes', () => {
- expect(label.attributes.appendTo).toEqual('body');
- expect(label.attributes.tooltipPosition).toEqual('bottom');
- expect(label.attributes.hideDelay).toEqual('800');
+ expect(button.attributes.appendTo).toEqual('body');
+ expect(button.attributes.tooltipPosition).toEqual('bottom');
+ expect(button.attributes.hideDelay).toEqual('800');
});
it('should copy text to clipboard', () => {
const stopPropagation = jasmine.createSpy('stopPropagation');
- label.triggerEventHandler('click', {
+ button.triggerEventHandler('click', {
stopPropagation: stopPropagation
});
diff --git a/core-web/apps/dotcms-ui/src/app/view/components/dot-copy-button/dot-copy-button.module.ts b/core-web/apps/dotcms-ui/src/app/view/components/dot-copy-button/dot-copy-button.module.ts
index 4a5f369970d5..c4a30dbd43ee 100644
--- a/core-web/apps/dotcms-ui/src/app/view/components/dot-copy-button/dot-copy-button.module.ts
+++ b/core-web/apps/dotcms-ui/src/app/view/components/dot-copy-button/dot-copy-button.module.ts
@@ -1,6 +1,7 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
+import { ButtonModule } from 'primeng/button';
import { TooltipModule } from 'primeng/tooltip';
import { UiDotIconButtonModule } from '@components/_common/dot-icon-button/dot-icon-button.module';
@@ -9,7 +10,7 @@ import { DotClipboardUtil } from '@dotcms/app/api/util/clipboard/ClipboardUtil';
import { DotCopyButtonComponent } from './dot-copy-button.component';
@NgModule({
- imports: [CommonModule, UiDotIconButtonModule, TooltipModule],
+ imports: [CommonModule, UiDotIconButtonModule, TooltipModule, ButtonModule],
declarations: [DotCopyButtonComponent],
exports: [DotCopyButtonComponent],
providers: [DotClipboardUtil]
diff --git a/core-web/apps/dotcms-ui/src/app/view/components/dot-crumbtrail/dot-crumbtrail.component.scss b/core-web/apps/dotcms-ui/src/app/view/components/dot-crumbtrail/dot-crumbtrail.component.scss
index fb5193a65493..f24a91e75272 100644
--- a/core-web/apps/dotcms-ui/src/app/view/components/dot-crumbtrail/dot-crumbtrail.component.scss
+++ b/core-web/apps/dotcms-ui/src/app/view/components/dot-crumbtrail/dot-crumbtrail.component.scss
@@ -4,7 +4,7 @@
ul li {
&:first-child a span.p-menuitem-text {
color: $black;
- font-size: $font-size-large;
+ font-size: $font-size-lg;
font-weight: $font-weight-regular-bold;
}
diff --git a/core-web/apps/dotcms-ui/src/app/view/components/dot-device-selector/dot-device-selector.component.scss b/core-web/apps/dotcms-ui/src/app/view/components/dot-device-selector/dot-device-selector.component.scss
index 6db674f1e75f..e6b96b0bc6e0 100644
--- a/core-web/apps/dotcms-ui/src/app/view/components/dot-device-selector/dot-device-selector.component.scss
+++ b/core-web/apps/dotcms-ui/src/app/view/components/dot-device-selector/dot-device-selector.component.scss
@@ -12,8 +12,8 @@
width: 100%;
.p-dropdown-label {
- color: $dark;
- font-size: $font-size-medium;
+ color: $black;
+ font-size: $font-size-md;
}
}
diff --git a/core-web/apps/dotcms-ui/src/app/view/components/dot-dialog/dot-dialog.component.scss b/core-web/apps/dotcms-ui/src/app/view/components/dot-dialog/dot-dialog.component.scss
index 3bc7c95bee88..d936fc400ecd 100644
--- a/core-web/apps/dotcms-ui/src/app/view/components/dot-dialog/dot-dialog.component.scss
+++ b/core-web/apps/dotcms-ui/src/app/view/components/dot-dialog/dot-dialog.component.scss
@@ -26,7 +26,6 @@
}
}
-
.dialog {
background-color: $white;
border-radius: 2px;
@@ -49,7 +48,7 @@
flex-grow: 1;
overflow-x: hidden;
overflow-y: auto;
- padding: 0.25rem $dialog-padding 0;
+ padding: 0.25rem $spacing-6 0;
&::-webkit-scrollbar {
width: $spacing-1;
@@ -57,14 +56,14 @@
&::-webkit-scrollbar-thumb {
border-radius: $spacing-1;
- background-color: $gray-light;
+ background-color: $color-palette-gray-500;
}
}
.dialog__footer,
.dialog__header {
flex-shrink: 0;
- padding: $dialog-padding;
+ padding: $spacing-4 $spacing-6;
position: relative;
transition: box-shadow $basic-speed ease-out;
}
diff --git a/core-web/apps/dotcms-ui/src/app/view/components/dot-edit-layout-designer/components/dot-edit-layout-grid/dot-edit-layout-grid.component.html b/core-web/apps/dotcms-ui/src/app/view/components/dot-edit-layout-designer/components/dot-edit-layout-grid/dot-edit-layout-grid.component.html
index bfb683d0a9b1..761ed4564050 100644
--- a/core-web/apps/dotcms-ui/src/app/view/components/dot-edit-layout-designer/components/dot-edit-layout-grid/dot-edit-layout-grid.component.html
+++ b/core-web/apps/dotcms-ui/src/app/view/components/dot-edit-layout-designer/components/dot-edit-layout-grid/dot-edit-layout-grid.component.html
@@ -1,4 +1,4 @@
- |