AXON-1414: keep fields data (#1249)

Author: sspanchenko

src/webviews/components/issue/AbstractIssueEditorPage.test.tsx

@@ -24,9 +24,16 @@ const mockAsyncSelect = jest.fn(({ defaultValue, ...props }) => (
     </div>
 ));
 
+// Mock Select to capture props
+const mockSelect = jest.fn(({ defaultValue, ...props }) => (
+    <div className="ac-form-select-container" data-testid="select" data-default-value={JSON.stringify(defaultValue)}>
+        Mocked Select
+    </div>
+));
+
 jest.mock('@atlaskit/select', () => ({
     __esModule: true,
-    default: jest.fn(),
+    default: (props: any) => mockSelect(props),
     AsyncSelect: (props: any) => mockAsyncSelect(props),
     components: {
         Option: ({ children, ...props }: any) => <div {...props}>{children}</div>,
@@ -80,6 +87,33 @@ class TestIssueEditorPage extends AbstractIssueEditorPage<
         return this.getInputMarkup(parentField, editMode, currentIssueType);
     }
 
+    renderIssueLinksField(editMode: boolean = false) {
+        const issueLinksField: FieldUI = {
+            key: 'issuelinks',
+            name: 'Linked Issues',
+            required: false,
+            uiType: UIType.IssueLinks,
+            displayOrder: 2,
+            valueType: ValueType.IssueLinks,
+            advanced: true,
+            isArray: true,
+            schema: 'issuelinks',
+        };
+
+        const currentIssueType: IssueType = {
+            id: '1',
+            name: 'Story',
+            iconUrl: 'story-icon.png',
+            subtask: false,
+            avatarId: 1,
+            description: 'Story issue type',
+            self: 'https://test.atlassian.net/rest/api/3/issuetype/1',
+            epic: false,
+        };
+
+        return this.getInputMarkup(issueLinksField, editMode, currentIssueType);
+    }
+
     override render() {
         return <div data-testid="test-container">{this.renderParentField(false)}</div>;
     }
@@ -116,6 +150,7 @@ describe('AbstractIssueEditorPage', () => {
     beforeEach(() => {
         jest.clearAllMocks();
         mockAsyncSelect.mockClear();
+        mockSelect.mockClear();
     });
 
     describe('Parent Field', () => {
@@ -224,4 +259,155 @@ describe('AbstractIssueEditorPage', () => {
             });
         });
     });
+
+    describe('IssueLinks Field (Linked Issues)', () => {
+        describe('Non-Edit Mode (Create Issue)', () => {
+            class TestIssueEditorPageIssueLinks extends TestIssueEditorPage {
+                override render() {
+                    return <div data-testid="test-container">{this.renderIssueLinksField(false)}</div>;
+                }
+            }
+
+            it('should pass link type value as defaultValue to Select when issuelinks.type exists', () => {
+                const linkTypeValue = {
+                    id: '10000',
+                    name: 'Blocks',
+                    inward: 'is blocked by',
+                    outward: 'blocks',
+                    type: 'outward',
+                };
+
+                const component = new TestIssueEditorPageIssueLinks({});
+                component.state = {
+                    ...emptyCommonEditorState,
+                    siteDetails: mockSiteDetailsCloud,
+                    fieldValues: {
+                        issuelinks: {
+                            type: linkTypeValue,
+                        },
+                        project: { key: 'TEST' },
+                    },
+                    selectFieldOptions: {
+                        issuelinks: [linkTypeValue],
+                    },
+                };
+
+                render(component.render());
+
+                // Check that Select was called with correct defaultValue for link type
+                expect(mockSelect).toHaveBeenCalled();
+                const selectCallArgs = mockSelect.mock.calls[0][0];
+                expect(selectCallArgs.defaultValue).toEqual(linkTypeValue);
+            });
+
+            it('should pass undefined as defaultValue to Select when issuelinks.type is missing', () => {
+                const component = new TestIssueEditorPageIssueLinks({});
+                component.state = {
+                    ...emptyCommonEditorState,
+                    siteDetails: mockSiteDetailsCloud,
+                    fieldValues: {
+                        project: { key: 'TEST' },
+                    },
+                    selectFieldOptions: {
+                        issuelinks: [],
+                    },
+                };
+
+                render(component.render());
+
+                // Check that Select was called with undefined defaultValue
+                expect(mockSelect).toHaveBeenCalled();
+                const selectCallArgs = mockSelect.mock.calls[0][0];
+                expect(selectCallArgs.defaultValue).toBeUndefined();
+            });
+
+            it('should pass linked issues array as defaultValue to AsyncSelect when issuelinks.issue exists', () => {
+                const linkedIssues = [
+                    { key: 'PROJ-123', summary: 'First linked issue' },
+                    { key: 'PROJ-456', summary: 'Second linked issue' },
+                ];
+
+                const component = new TestIssueEditorPageIssueLinks({});
+                component.state = {
+                    ...emptyCommonEditorState,
+                    siteDetails: mockSiteDetailsCloud,
+                    fieldValues: {
+                        issuelinks: {
+                            issue: linkedIssues,
+                        },
+                        project: { key: 'TEST' },
+                    },
+                    selectFieldOptions: {
+                        issuelinks: [],
+                    },
+                };
+
+                render(component.render());
+
+                // Check that AsyncSelect was called with correct defaultValue for linked issues
+                expect(mockAsyncSelect).toHaveBeenCalled();
+                const asyncSelectCallArgs = mockAsyncSelect.mock.calls[0][0];
+                expect(asyncSelectCallArgs.defaultValue).toEqual(linkedIssues);
+            });
+
+            it('should pass undefined as defaultValue to AsyncSelect when issuelinks.issue is missing', () => {
+                const component = new TestIssueEditorPageIssueLinks({});
+                component.state = {
+                    ...emptyCommonEditorState,
+                    siteDetails: mockSiteDetailsCloud,
+                    fieldValues: {
+                        project: { key: 'TEST' },
+                    },
+                    selectFieldOptions: {
+                        issuelinks: [],
+                    },
+                };
+
+                render(component.render());
+
+                // Check that AsyncSelect was called with undefined defaultValue
+                expect(mockAsyncSelect).toHaveBeenCalled();
+                const asyncSelectCallArgs = mockAsyncSelect.mock.calls[0][0];
+                expect(asyncSelectCallArgs.defaultValue).toBeUndefined();
+            });
+
+            it('should preserve both link type and linked issues when re-rendering', () => {
+                const linkTypeValue = {
+                    id: '10001',
+                    name: 'Relates',
+                    inward: 'relates to',
+                    outward: 'relates to',
+                    type: 'inward',
+                };
+
+                const linkedIssues = [{ key: 'PROJ-789', summary: 'Related issue' }];
+
+                const component = new TestIssueEditorPageIssueLinks({});
+                component.state = {
+                    ...emptyCommonEditorState,
+                    siteDetails: mockSiteDetailsCloud,
+                    fieldValues: {
+                        issuelinks: {
+                            type: linkTypeValue,
+                            issue: linkedIssues,
+                        },
+                        project: { key: 'TEST' },
+                    },
+                    selectFieldOptions: {
+                        issuelinks: [linkTypeValue],
+                    },
+                };
+
+                render(component.render());
+
+                expect(mockSelect).toHaveBeenCalled();
+                const selectCallArgs = mockSelect.mock.calls[0][0];
+                expect(selectCallArgs.defaultValue).toEqual(linkTypeValue);
+
+                expect(mockAsyncSelect).toHaveBeenCalled();
+                const asyncSelectCallArgs = mockAsyncSelect.mock.calls[0][0];
+                expect(asyncSelectCallArgs.defaultValue).toEqual(linkedIssues);
+            });
+        });
+    });
 });

src/webviews/components/issue/AbstractIssueEditorPage.tsx

@@ -943,6 +943,8 @@ export abstract class AbstractIssueEditorPage<
                     );
                 } else {
                     const validateFunc = field.required ? FieldValidators.validateSingleSelect : undefined;
+                    const defaultLinkType = this.state.fieldValues[field.key]?.type || undefined;
+
                     return (
                         <React.Fragment>
                             <Field
@@ -962,6 +964,8 @@ export abstract class AbstractIssueEditorPage<
                                         <div>
                                             <Select
                                                 {...fieldArgs.fieldProps}
+                                                key={`${field.key}.type-${defaultLinkType?.id || 'empty'}`}
+                                                defaultValue={defaultLinkType}
                                                 isMulti={false}
                                                 isClearable={!field.required}
                                                 className="ac-form-select-container"
@@ -996,9 +1000,14 @@ export abstract class AbstractIssueEditorPage<
                             </Field>
                             <Field id={`${field.key}.issue`} name={`${field.key}.issue`}>
                                 {(fieldArgs: any) => {
+                                    const defaultLinkedIssues = this.state.fieldValues[field.key]?.issue || undefined;
+                                    const linkedIssuesKey = `${field.key}.issue-${JSON.stringify(defaultLinkedIssues || [])}`;
+
                                     return (
                                         <AsyncSelect
                                             {...fieldArgs.fieldProps}
+                                            key={linkedIssuesKey}
+                                            defaultValue={defaultLinkedIssues}
                                             isClearable={true}
                                             isMulti={true}
                                             className="ac-form-select-container"