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
dotCMS · Sep 10, 2024 · 12934b5 · 12934b5
1 parent 4e84677
commit 12934b5
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 6 deletions.
diff --git a/...rtlets/shared/dot-content-types-edit/components/form/content-types-form.component.spec.ts b/...rtlets/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/...pp/portlets/shared/dot-content-types-edit/components/form/content-types-form.component.ts b/...pp/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<string[]>;
+    workflowsSelected$: Observable<DotCMSWorkflow[]>;
     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/...t-workflows-actions-selector-field/dot-workflows-actions-selector-field.component.spec.ts b/...t-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/...on/dot-workflows-actions-selector-field/dot-workflows-actions-selector-field.component.ts b/...on/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);
+    }
 }