Skip to content

Commit

Permalink
feat(FTM): New UVE Toolbar - Implement Workflows Action button (#30908)
Browse files Browse the repository at this point in the history
This pull request introduces several changes to the
`DotEmaShellComponent` and related components to integrate the
`DotWorkflowsActionsService` and enhance workflow actions functionality.
The most important changes include adding the new service to multiple
components, updating component templates, and refactoring the
`DotUveWorkflowActionsComponent`.

### Integration of `DotWorkflowsActionsService`:

* Added `DotWorkflowsActionsService` to the imports and providers in
`dot-ema-shell.component.ts` and `dot-ema-shell.component.spec.ts` to
enable workflow actions.
[[1]](diffhunk://#diff-8843e3a4ce8c16e83408b1a6dcc3ad54eaddd17f8e986bbdb502e11bd4446ab4R24)
[[2]](diffhunk://#diff-8843e3a4ce8c16e83408b1a6dcc3ad54eaddd17f8e986bbdb502e11bd4446ab4R212-R217)
[[3]](diffhunk://#diff-677330662fea6dadc7e48fd8455ec2a6fe60d624c7ed1f01f0a3e985aacd05c6L22-R23)
[[4]](diffhunk://#diff-677330662fea6dadc7e48fd8455ec2a6fe60d624c7ed1f01f0a3e985aacd05c6R62)

### Component Template Updates:

* Replaced the workflows button with the `dot-uve-workflow-actions`
component in `dot-uve-toolbar.component.html` to improve the user
interface for workflow actions.
* Updated the `dot-uve-workflow-actions.component.html` to disable
actions when editing is not allowed.

### Refactoring `DotUveWorkflowActionsComponent`:

* Renamed `dot-edit-ema-workflow-actions` to `dot-uve-workflow-actions`
and refactored the component to use `UVEStore` for managing state and
actions.
[[1]](diffhunk://#diff-0c14a7beca853a53da6f640191eefa9d4b9564b2473879c4cbd391d7ff091c1cL1-R1)
[[2]](diffhunk://#diff-0c14a7beca853a53da6f640191eefa9d4b9564b2473879c4cbd391d7ff091c1cL22-R45)
[[3]](diffhunk://#diff-0c14a7beca853a53da6f640191eefa9d4b9564b2473879c4cbd391d7ff091c1cL70-L75)
[[4]](diffhunk://#diff-0c14a7beca853a53da6f640191eefa9d4b9564b2473879c4cbd391d7ff091c1cL102-L116)
[[5]](diffhunk://#diff-0c14a7beca853a53da6f640191eefa9d4b9564b2473879c4cbd391d7ff091c1cL141-R111)
[[6]](diffhunk://#diff-0c14a7beca853a53da6f640191eefa9d4b9564b2473879c4cbd391d7ff091c1cL150-R120)

### Test Updates:

* Added mock providers and updated test cases in
`dot-ema-info-display.component.spec.ts` and
`dot-uve-toolbar.component.spec.ts` to accommodate the new service and
component changes.
[[1]](diffhunk://#diff-164a62c130e772cc25a858a58ce4c6d8099d21b119ce0ec61e9c297b94ba4297L24-R25)
[[2]](diffhunk://#diff-164a62c130e772cc25a858a58ce4c6d8099d21b119ce0ec61e9c297b94ba4297R57-R62)
[[3]](diffhunk://#diff-3eaa147616a5d1ff374a5fa27b0f38f0159a9039ef7e8d672dec43631f48a9e1L16-R17)
[[4]](diffhunk://#diff-3eaa147616a5d1ff374a5fa27b0f38f0159a9039ef7e8d672dec43631f48a9e1R45)
[[5]](diffhunk://#diff-3eaa147616a5d1ff374a5fa27b0f38f0159a9039ef7e8d672dec43631f48a9e1L95-R98)
[[6]](diffhunk://#diff-3eaa147616a5d1ff374a5fa27b0f38f0159a9039ef7e8d672dec43631f48a9e1L110-R125)
[[7]](diffhunk://#diff-3eaa147616a5d1ff374a5fa27b0f38f0159a9039ef7e8d672dec43631f48a9e1L363-R373)

### Codebase Simplification:

* Simplified `DotUveToolbarComponent` by removing unused properties and
methods, and integrating the new workflow actions component.
[[1]](diffhunk://#diff-217a9e619d6590c4f652e85353b9637ba5e464ddeb0424be35aef39bb8dceb30R30)
[[2]](diffhunk://#diff-217a9e619d6590c4f652e85353b9637ba5e464ddeb0424be35aef39bb8dceb30L49-R67)
[[3]](diffhunk://#diff-217a9e619d6590c4f652e85353b9637ba5e464ddeb0424be35aef39bb8dceb30L74-L75)
[[4]](diffhunk://#diff-217a9e619d6590c4f652e85353b9637ba5e464ddeb0424be35aef39bb8dceb30R86-R92)

#### Videos


https://github.com/user-attachments/assets/0d2f3692-1377-41ba-bd2f-443dcb13ee4b
rjvelazco authored Dec 16, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
1 parent aca3a06 commit 7503306
Showing 30 changed files with 639 additions and 330 deletions.
Original file line number Diff line number Diff line change
@@ -21,6 +21,7 @@ import {
DotMessageService,
DotPropertiesService,
DotWorkflowActionsFireService,
DotWorkflowsActionsService,
PushPublishService
} from '@dotcms/data-access';
import {
@@ -208,6 +209,12 @@ describe('DotEmaShellComponent', () => {
DotWorkflowActionsFireService,
Router,
Location,
{
provide: DotWorkflowsActionsService,
useValue: {
getByInode: () => of([])
}
},
{
provide: DotPropertiesService,
useValue: dotPropertiesServiceMock
@@ -559,6 +566,23 @@ describe('DotEmaShellComponent', () => {
expect(spyloadPageAsset).toHaveBeenCalledWith({ url: '/my-awesome-page' });
});

it('should get the workflow action when an `UPDATE_WORKFLOW_ACTION` event is received', () => {
const spyGetWorkflowActions = jest.spyOn(store, 'getWorkflowActions');

spectator.detectChanges();

spectator.triggerEventHandler(
DotEmaDialogComponent,
'action',
DIALOG_ACTION_EVENT({
name: NG_CUSTOM_EVENTS.UPDATE_WORKFLOW_ACTION
})
);
spectator.detectChanges();

expect(spyGetWorkflowActions).toHaveBeenCalled();
});

it('should trigger a store reload if the url is the same', () => {
const spyReload = jest.spyOn(store, 'reloadCurrentPage');
const spyLocation = jest.spyOn(location, 'go');
Original file line number Diff line number Diff line change
@@ -19,7 +19,8 @@ import {
DotPageLayoutService,
DotPageRenderService,
DotSeoMetaTagsService,
DotSeoMetaTagsUtilService
DotSeoMetaTagsUtilService,
DotWorkflowsActionsService
} from '@dotcms/data-access';
import { SiteService } from '@dotcms/dotcms-js';
import { DotPageToolsSeoComponent } from '@dotcms/portlets/dot-ema/ui';
@@ -58,6 +59,7 @@ import {
DotPageRenderService,
DotSeoMetaTagsService,
DotSeoMetaTagsUtilService,
DotWorkflowsActionsService,
{
provide: WINDOW,
useValue: window
@@ -111,6 +113,7 @@ export class DotEmaShellComponent implements OnInit, OnDestroy {
...(pageParams ?? {}),
...(viewParams ?? {})
};

this.#updateLocation(queryParams);
});

@@ -131,6 +134,11 @@ export class DotEmaShellComponent implements OnInit, OnDestroy {

handleNgEvent({ event }: DialogAction) {
switch (event.detail.name) {
case NG_CUSTOM_EVENTS.UPDATE_WORKFLOW_ACTION: {
this.uveStore.getWorkflowActions();
break;
}

case NG_CUSTOM_EVENTS.SAVE_PAGE: {
this.handleSavePageEvent(event);
break;
Original file line number Diff line number Diff line change
@@ -21,7 +21,8 @@ import {
DotExperimentsService,
DotLanguagesService,
DotLicenseService,
DotMessageService
DotMessageService,
DotWorkflowsActionsService
} from '@dotcms/data-access';
import { LoginService } from '@dotcms/dotcms-js';
import { DEFAULT_VARIANT_NAME } from '@dotcms/dotcms-models';
@@ -53,6 +54,12 @@ describe('DotEmaInfoDisplayComponent', () => {
MessageService,
mockProvider(Router),
mockProvider(ActivatedRoute),
{
provide: DotWorkflowsActionsService,
useValue: {
getByInode: () => of([])
}
},
{
provide: DotLanguagesService,
useValue: new DotLanguagesServiceMock()
Original file line number Diff line number Diff line change
@@ -51,7 +51,7 @@
data-testId="uve-toolbar-persona-selector" />

@if (!preview) {
<span data-testId="uve-toolbar-workflow-actions">Workflows</span>
<dot-uve-workflow-actions />
}
</div>
</p-toolbar>
Original file line number Diff line number Diff line change
@@ -13,7 +13,8 @@ import {
DotExperimentsService,
DotLanguagesService,
DotLicenseService,
DotPersonalizeService
DotPersonalizeService,
DotWorkflowsActionsService
} from '@dotcms/data-access';
import { LoginService } from '@dotcms/dotcms-js';
import {
@@ -41,6 +42,7 @@ import {
} from '../../../utils';
import { DotEmaBookmarksComponent } from '../dot-ema-bookmarks/dot-ema-bookmarks.component';
import { DotEmaRunningExperimentComponent } from '../dot-ema-running-experiment/dot-ema-running-experiment.component';
import { DotUveWorkflowActionsComponent } from '../dot-uve-workflow-actions/dot-uve-workflow-actions.component';
import { EditEmaLanguageSelectorComponent } from '../edit-ema-language-selector/edit-ema-language-selector.component';
import { EditEmaPersonaSelectorComponent } from '../edit-ema-persona-selector/edit-ema-persona-selector.component';

@@ -107,14 +109,19 @@ describe('DotUveToolbarComponent', () => {
HttpClientTestingModule,
MockComponent(DotEmaBookmarksComponent),
MockComponent(DotEmaRunningExperimentComponent),
MockComponent(EditEmaPersonaSelectorComponent)
MockComponent(EditEmaPersonaSelectorComponent),
MockComponent(DotUveWorkflowActionsComponent)
],
providers: [
UVEStore,
provideHttpClientTesting(),
mockProvider(ConfirmationService, {
confirm: jest.fn()
}),

mockProvider(DotWorkflowsActionsService, {
getByInode: () => of([])
}),
{
provide: DotLanguagesService,
useValue: new DotLanguagesServiceMock()
@@ -181,6 +188,12 @@ describe('DotUveToolbarComponent', () => {
});
});

it('should have a dot-uve-workflow-actions component', () => {
const workflowActions = spectator.query(DotUveWorkflowActionsComponent);

expect(workflowActions).toBeTruthy();
});

describe('copy-url', () => {
let button: DebugElement;

@@ -359,10 +372,6 @@ describe('DotUveToolbarComponent', () => {
it('should have persona selector', () => {
expect(spectator.query(byTestId('uve-toolbar-persona-selector'))).toBeTruthy();
});

it('should have workflows button', () => {
expect(spectator.query(byTestId('uve-toolbar-workflow-actions'))).toBeTruthy();
});
});

describe('preview', () => {
@@ -411,8 +420,10 @@ describe('DotUveToolbarComponent', () => {
expect(spectator.query(byTestId('uve-toolbar-running-experiment'))).toBeFalsy();
});

it('should not have workflow actions', () => {
expect(spectator.query(byTestId('uve-toolbar-workflow-actions'))).toBeFalsy();
it('should not have a dot-uve-workflow-actions component', () => {
const workflowActions = spectator.query(DotUveWorkflowActionsComponent);

expect(workflowActions).toBeNull();
});
});

Original file line number Diff line number Diff line change
@@ -27,6 +27,7 @@ import { UVEStore } from '../../../store/dot-uve.store';
import { DotEmaBookmarksComponent } from '../dot-ema-bookmarks/dot-ema-bookmarks.component';
import { DotEmaInfoDisplayComponent } from '../dot-ema-info-display/dot-ema-info-display.component';
import { DotEmaRunningExperimentComponent } from '../dot-ema-running-experiment/dot-ema-running-experiment.component';
import { DotUveWorkflowActionsComponent } from '../dot-uve-workflow-actions/dot-uve-workflow-actions.component';
import { EditEmaLanguageSelectorComponent } from '../edit-ema-language-selector/edit-ema-language-selector.component';
import { EditEmaPersonaSelectorComponent } from '../edit-ema-persona-selector/edit-ema-persona-selector.component';

@@ -46,10 +47,10 @@ import { EditEmaPersonaSelectorComponent } from '../edit-ema-persona-selector/ed
SplitButtonModule,
FormsModule,
ReactiveFormsModule,
ChipModule,
EditEmaPersonaSelectorComponent,
EditEmaLanguageSelectorComponent,
ClipboardModule
DotUveWorkflowActionsComponent,
ChipModule
],
providers: [DotPersonalizeService],
templateUrl: './dot-uve-toolbar.component.html',
@@ -59,8 +60,10 @@ import { EditEmaPersonaSelectorComponent } from '../edit-ema-persona-selector/ed
export class DotUveToolbarComponent {
$personaSelector = viewChild<EditEmaPersonaSelectorComponent>('personaSelector');
$languageSelector = viewChild<EditEmaLanguageSelectorComponent>('languageSelector');
#store = inject(UVEStore);

@Output() translatePage = new EventEmitter<{ page: DotPage; newLanguage: number }>();

readonly #store = inject(UVEStore);
readonly #messageService = inject(MessageService);
readonly #dotMessageService = inject(DotMessageService);
readonly #confirmationService = inject(ConfirmationService);
@@ -71,8 +74,6 @@ export class DotUveToolbarComponent {
readonly $apiURL = this.#store.$apiURL;
readonly $personaSelectorProps = this.#store.$personaSelector;

@Output() translatePage = new EventEmitter<{ page: DotPage; newLanguage: number }>();

readonly $styleToolbarClass = computed(() => {
if (!this.$isPreviewMode()) {
return 'uve-toolbar';
@@ -81,6 +82,13 @@ export class DotUveToolbarComponent {
return 'uve-toolbar uve-toolbar-preview';
});

readonly $pageInode = computed(() => {
return this.#store.pageAPIResponse()?.page.inode;
});

readonly $actions = this.#store.workflowLoading;
readonly $workflowLoding = this.#store.workflowLoading;

protected readonly date = new Date();

/**
Original file line number Diff line number Diff line change
@@ -2,4 +2,5 @@
(actionFired)="handleActionTrigger($event)"
[size]="'small'"
[loading]="loading()"
[disabled]="!canEdit()"
[actions]="actions()" />
Loading

0 comments on commit 7503306

Please sign in to comment.