From 12934b5f869807e13fee829aeaaea09db284af93 Mon Sep 17 00:00:00 2001 From: Valentino Giardino <77643678+valentinogiardino@users.noreply.github.com> Date: Tue, 10 Sep 2024 12:23:52 -0300 Subject: [PATCH] fix(Content Types Edit Dialog) Workflow actions dropdown (#29928) ### Proposed Changes * Emit the initial value of the form in `workflowsSelected$` observable. * Add a check to ensure the workflow actions dropdown exists before attempting to clear it. ### Checklist - [x] Tests - [x] Translations - [x] Security Implications Contemplated (add notes if applicable) ### Additional Info This PR fixes: 1. #29765 2. #29762 ### Screenshots #### Before ![image](https://github.com/user-attachments/assets/f9851368-7479-4a9c-a354-77c82093a0c9) #### After https://github.com/user-attachments/assets/766cb82a-763f-4d57-8325-14eaba622455 --- .../form/content-types-form.component.spec.ts | 25 +++++++++++++++++++ .../form/content-types-form.component.ts | 8 +++--- ...s-actions-selector-field.component.spec.ts | 2 +- ...kflows-actions-selector-field.component.ts | 17 +++++++++++-- 4 files changed, 46 insertions(+), 6 deletions(-) diff --git a/core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/form/content-types-form.component.spec.ts b/core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/form/content-types-form.component.spec.ts index 3cb231efe500..cde5bbdec6c6 100644 --- a/core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/form/content-types-form.component.spec.ts +++ b/core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/form/content-types-form.component.spec.ts @@ -872,6 +872,31 @@ describe('ContentTypesFormComponent', () => { fixture.detectChanges(); expect(comp.form.get('workflows').value).toEqual([]); }); + it('should initialize workflowsSelected$ with the value from workflows field', async () => { + comp.data = { + ...dotcmsContentTypeBasicMock, + baseType: 'CONTENT', + id: '123', + workflows: [ + { + ...mockWorkflows[0], + id: '123', + name: 'Workflow 1' + } + ] + }; + fixture.detectChanges(); + await fixture.whenStable(); + comp.workflowsSelected$.subscribe((value) => { + expect(value).toEqual([ + { + ...mockWorkflows[0], + id: '123', + name: 'Workflow 1' + } + ]); + }); + }); }); }); }); diff --git a/core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/form/content-types-form.component.ts b/core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/form/content-types-form.component.ts index 6595fdf1eeef..8650acb6dee4 100644 --- a/core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/form/content-types-form.component.ts +++ b/core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/form/content-types-form.component.ts @@ -20,7 +20,7 @@ import { ActivatedRoute } from '@angular/router'; import { SelectItem } from 'primeng/api'; -import { filter, take, takeUntil } from 'rxjs/operators'; +import { filter, startWith, take, takeUntil } from 'rxjs/operators'; import { DotLicenseService, DotMessageService, DotWorkflowService } from '@dotcms/data-access'; import { @@ -64,7 +64,7 @@ export class ContentTypesFormComponent implements OnInit, OnDestroy { dateVarOptions: SelectItem[] = []; form: UntypedFormGroup; nameFieldLabel: string; - workflowsSelected$: Observable; + workflowsSelected$: Observable; newContentEditorEnabled: boolean; private originalValue: DotCMSContentType; @@ -207,7 +207,9 @@ export class ContentTypesFormComponent implements OnInit, OnDestroy { this.setOriginalValue(); this.setDateVarFieldsState(); this.setSystemWorkflow(); - this.workflowsSelected$ = this.form.get('workflows').valueChanges; + this.workflowsSelected$ = this.form + .get('workflows') + .valueChanges.pipe(startWith(this.form.get('workflows').value)); } private getActionIdentifier(actionMap: DotCMSSystemActionMappings): string { diff --git a/core-web/apps/dotcms-ui/src/app/view/components/_common/dot-workflows-actions-selector-field/dot-workflows-actions-selector-field.component.spec.ts b/core-web/apps/dotcms-ui/src/app/view/components/_common/dot-workflows-actions-selector-field/dot-workflows-actions-selector-field.component.spec.ts index 0b78b6ffe3b2..309ad10c5182 100644 --- a/core-web/apps/dotcms-ui/src/app/view/components/_common/dot-workflows-actions-selector-field/dot-workflows-actions-selector-field.component.spec.ts +++ b/core-web/apps/dotcms-ui/src/app/view/components/_common/dot-workflows-actions-selector-field/dot-workflows-actions-selector-field.component.spec.ts @@ -161,7 +161,7 @@ describe('DotWorkflowsActionsSelectorFieldComponent', () => { expect(dropdown.disabled).toBe(true); }); - it('should be enaled when actions list is filled', () => { + it('should be enabled when actions list is filled', () => { fixtureHost.detectChanges(); dropdown = getDropdownComponent(); expect(dropdown.disabled).toBe(false); diff --git a/core-web/apps/dotcms-ui/src/app/view/components/_common/dot-workflows-actions-selector-field/dot-workflows-actions-selector-field.component.ts b/core-web/apps/dotcms-ui/src/app/view/components/_common/dot-workflows-actions-selector-field/dot-workflows-actions-selector-field.component.ts index 4d417cfe499e..8f58027aa056 100644 --- a/core-web/apps/dotcms-ui/src/app/view/components/_common/dot-workflows-actions-selector-field/dot-workflows-actions-selector-field.component.ts +++ b/core-web/apps/dotcms-ui/src/app/view/components/_common/dot-workflows-actions-selector-field/dot-workflows-actions-selector-field.component.ts @@ -56,8 +56,8 @@ export class DotWorkflowsActionsSelectorFieldComponent tap((actions: SelectItemGroup[]) => { const actionsIds = this.getActionsIds(actions); - if (actionsIds.length && !actionsIds.includes(this.value)) { - this.dropdown.clear(null); + if (this.shouldClearDropdown(this.dropdown, actionsIds, this.value)) { + this.dropdown.clear(); } }) ); @@ -125,4 +125,17 @@ export class DotWorkflowsActionsSelectorFieldComponent return [...acc, ...items.map((item: SelectItem) => item.value)]; }, []); } + + /** + * Determines whether the dropdown should be cleared based on the provided options and the current value. + * + * @param {Dropdown} dropdown - The dropdown component instance. + * @param {string[]} options - Array of available options for the dropdown. + * @param {string} value - The current value selected in the dropdown. + * @returns {boolean} - Returns `true` if the dropdown should be cleared (i.e., if the dropdown exists, there are available options, + * and the current value is not in the list of options). Otherwise, returns `false`. + */ + private shouldClearDropdown(dropdown: Dropdown, options: string[], value: string): boolean { + return dropdown && options.length && !options.includes(value); + } }