AXON-1544: Send to Rovo Dev or Start Work from Jira Creation (#1331)

cabella-dot · web-flow · commit 26dd0c0acb68 · 2025-11-25T16:21:12.000-10:00
* AXON-1544: Add Dropdown button to CreateIssuePage

* AXON-1544: link action button to messaging

* AXON-1544: Can trigger Start Work and Rovo Dev from Issue creation

* AXON-1544: fix unit tests

* AXON-1544: fix spinner styles + add loading

* AXON-1544: update changelog

* AXON-1544: fix logic ordering

* AXON-1544: remove commands from palette

* AXON-1544: fix e2e tests

* AXON-1544: fix e2e tests 2

* AXON-1544: fix e2e 3

* AXON-1544: add analytics

* AXON-1544: e2e
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,7 @@
 ### Features
 
 - Added development field support
+- Added Branch creation and Rovo Dev actions in Create Issue Page
 
 ## What's new in 4.0.9
 
diff --git a/e2e/page-objects/CreateIssuePage.ts b/e2e/page-objects/CreateIssuePage.ts
@@ -20,15 +20,14 @@ export class CreateIssuePage {
     }
 
     async createIssue() {
-        const createButton = this.frame.getByRole('button', { name: 'Create' });
+        const createButton = this.frame.getByRole('button', { name: 'Create', exact: true });
         await createButton.scrollIntoViewIfNeeded();
         await this.page.waitForTimeout(500);
         await createButton.click();
     }
 
     async expectIssueCreated(issueKey: string) {
-        await expect(
-            this.page.getByRole('dialog', { name: new RegExp(`Issue ${issueKey} has been created`) }),
-        ).toBeVisible();
+        const newIssueFrame = this.page.frameLocator('iframe.webview').frameLocator(`iframe[title="${issueKey}"]`);
+        expect(newIssueFrame).toBeTruthy();
     }
 }
diff --git a/e2e/scenarios/jira/createIssue.spec.ts b/e2e/scenarios/jira/createIssue.spec.ts
@@ -1,5 +1,5 @@
 import { Page } from '@playwright/test';
-import { AppNotifications, AtlascodeDrawer, AtlassianSettings, CreateIssuePage } from 'e2e/page-objects';
+import { AtlascodeDrawer, AtlassianSettings, CreateIssuePage } from 'e2e/page-objects';
 
 const NEW_ISSUE_SUMMARY = 'Test Issue Created via E2E Test';
 const NEW_ISSUE_KEY = 'BTS-7';
@@ -19,5 +19,4 @@ export async function createIssue(page: Page) {
     await page.waitForTimeout(1_000);
 
     await createIssuePage.expectIssueCreated(NEW_ISSUE_KEY);
-    await new AppNotifications(page).expectNotification(`Issue ${NEW_ISSUE_KEY} has been created`);
 }
diff --git a/package.json b/package.json
@@ -202,7 +202,7 @@
             },
             {
                 "command": "atlascode.jira.createIssue.startWork",
-                "title": "Create and start work",
+                "title": "Create and create branch",
                 "category": "Jira"
             },
             {
@@ -1093,16 +1093,20 @@
                 {
                     "command": "atlascode.jira.createIssue.generateCode",
                     "when": "false"
+                },
+                {
+                    "command": "atlascode.jira.expandCreateWorkItem",
+                    "when": "false"
                 }
             ],
             "webview/context": [
                 {
                     "command": "atlascode.jira.createIssue.startWork",
-                    "when": "webviewId == 'atlascode.views.jira.createWorkItemWebview' && webviewSection == 'createButton'"
+                    "when": "webviewSection == 'createButton'"
                 },
                 {
                     "command": "atlascode.jira.createIssue.generateCode",
-                    "when": "atlascode:rovoDevEnabled && webviewId == 'atlascode.views.jira.createWorkItemWebview' && webviewSection == 'createButton'"
+                    "when": "atlascode:rovoDevEnabled && webviewSection == 'createButton'"
                 },
                 {
                     "command": "atlascode.jira.copyImageElement",
diff --git a/src/container.ts b/src/container.ts
@@ -260,10 +260,14 @@ export class Container {
         context.subscriptions.push(new CustomJQLViewProvider());
         context.subscriptions.push((this._assignedWorkItemsView = new AssignedWorkItemsViewProvider()));
 
-        context.subscriptions.push(
-            (this._createWorkItemWebviewProvider = new CreateWorkItemWebviewProvider(context, context.extensionPath)),
-        );
-
+        if (this.featureFlagClient.checkGate(Features.CreateWorkItemWebviewV2)) {
+            context.subscriptions.push(
+                (this._createWorkItemWebviewProvider = new CreateWorkItemWebviewProvider(
+                    context,
+                    context.extensionPath,
+                )),
+            );
+        }
         this._onboardingProvider = new OnboardingProvider();
 
         this.refreshRovoDev(context);
diff --git a/src/ipc/issueActions.ts b/src/ipc/issueActions.ts
@@ -111,6 +111,7 @@ export interface CreateSelectOptionAction extends Action {
 export interface CreateIssueAction extends Action {
     site: DetailedSiteInfo;
     issueData: any;
+    onCreateAction?: 'createAndView' | 'createAndStartWork' | 'createAndGenerateCode';
 }
 
 export interface CreateIssueLinkAction extends Action {
diff --git a/src/webviews/components/App.css b/src/webviews/components/App.css
@@ -932,6 +932,9 @@ div[role='dialog'],
     background: var(--vscode-button-background) !important;
     border-radius: 2px !important;
 }
+.ac-button-spinner {
+    --ds-icon-subtle: var(--vscode-button-foreground) !important;
+}
 
 .ac-button span {
     color: var(--vscode-button-foreground) !important;
diff --git a/src/webviews/components/issue/create-issue-screen/CreateIssuePage.tsx b/src/webviews/components/issue/create-issue-screen/CreateIssuePage.tsx
@@ -1,5 +1,4 @@
 import Button from '@atlaskit/button';
-import LoadingButton from '@atlaskit/button/loading-button';
 import Form, { ErrorMessage, Field, FormFooter, FormHeader, RequiredAsterisk } from '@atlaskit/form';
 import Page from '@atlaskit/page';
 import Select, { components } from '@atlaskit/select';
@@ -27,20 +26,23 @@ import {
     CommonEditorViewState,
     emptyCommonEditorState,
 } from '../AbstractIssueEditorPage';
+import { CreateIssueButton } from './actions/CreateIssueButton';
 import { Panel } from './Panel';
 
 type Emit = CommonEditorPageEmit;
 type Accept = CommonEditorPageAccept | CreateIssueData;
 interface ViewState extends CommonEditorViewState, CreateIssueData {
     createdIssue: IssueKeyAndSite<DetailedSiteInfo>;
     formKey: string;
+    onCreateAction: 'createAndView' | 'createAndStartWork' | 'createAndGenerateCode';
 }
 
 const emptyState: ViewState = {
     ...emptyCommonEditorState,
     ...emptyCreateIssueData,
     createdIssue: { key: '', siteDetails: emptySiteInfo },
     formKey: v4(),
+    onCreateAction: 'createAndView',
 };
 
 const fallbackTimerDuration = 5000; // 5 seconds
@@ -108,6 +110,7 @@ export default class CreateIssuePage extends AbstractIssueEditorPage<Emit, Accep
     private attachingInProgress = false;
     private initialFieldValues: FieldValues = {};
     private suggestionFallbackTimer: NodeJS.Timeout | null = null;
+    private formRef = React.createRef<HTMLFormElement>();
 
     getProjectKey(): string {
         return this.state.fieldValues['project'].key;
@@ -236,6 +239,15 @@ export default class CreateIssuePage extends AbstractIssueEditorPage<Emit, Accep
                     });
                     break;
                 }
+                case 'createIssueWithAction': {
+                    handled = true;
+
+                    this.setState({ onCreateAction: e.action }, () => {
+                        this.formRef.current?.requestSubmit();
+                        this.setState({ onCreateAction: 'createAndView' });
+                    });
+                    break;
+                }
             }
         }
 
@@ -300,6 +312,7 @@ export default class CreateIssuePage extends AbstractIssueEditorPage<Emit, Accep
             action: 'createIssue',
             site: this.state.siteDetails,
             issueData: this.state.fieldValues,
+            onCreateAction: this.state.onCreateAction,
         });
 
         return undefined;
@@ -506,7 +519,7 @@ export default class CreateIssuePage extends AbstractIssueEditorPage<Emit, Accep
                                 <Form name="create-issue" key={this.state.formKey} onSubmit={this.handleSubmit}>
                                     {(frmArgs: any) => {
                                         return (
-                                            <form {...frmArgs.formProps}>
+                                            <form {...frmArgs.formProps} ref={this.formRef}>
                                                 <FormHeader title={this.formHeader()}>
                                                     <p>
                                                         Required fields are marked with an asterisk <RequiredAsterisk />
@@ -544,15 +557,18 @@ export default class CreateIssuePage extends AbstractIssueEditorPage<Emit, Accep
                                                     </Panel>
                                                 )}
                                                 <FormFooter actions={{}}>
-                                                    <LoadingButton
+                                                    <CreateIssueButton
                                                         type="submit"
-                                                        spacing="compact"
+                                                        name="Create"
                                                         className="ac-button"
-                                                        isDisabled={this.state.isSomethingLoading}
-                                                        isLoading={this.state.loadingField === 'submitButton'}
+                                                        disabled={this.state.isSomethingLoading}
+                                                        isLoading={
+                                                            this.state.isSomethingLoading &&
+                                                            this.state.loadingField === 'submitButton'
+                                                        }
                                                     >
                                                         Create
-                                                    </LoadingButton>
+                                                    </CreateIssueButton>
                                                 </FormFooter>
                                             </form>
                                         );
diff --git a/src/webviews/components/issue/create-issue-screen/actions/CreateIssueButton.tsx b/src/webviews/components/issue/create-issue-screen/actions/CreateIssueButton.tsx
@@ -0,0 +1,57 @@
+import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
+import Spinner from '@atlaskit/spinner';
+import React, { ButtonHTMLAttributes } from 'react';
+
+type CreateIssueButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & { isLoading?: boolean };
+
+export const CreateIssueButton: React.FC<CreateIssueButtonProps> = (props) => {
+    return (
+        <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }} className="ac-button">
+            <button
+                style={{
+                    border: 'none',
+                    padding: '6px 12px',
+                    color: 'var(--vscode-button-foreground)',
+                    cursor: 'pointer',
+                }}
+                {...props}
+            >
+                {props.children}
+            </button>
+            <div
+                style={{
+                    width: '1px',
+                    height: 'var(--vscode-font-size)',
+                    backgroundColor: 'var(--vscode-button-foreground)',
+                }}
+            />
+            <button
+                style={{
+                    border: 'none',
+                    padding: '6px',
+                    color: 'var(--vscode-button-foreground)',
+                    cursor: 'pointer',
+                }}
+                className="ac-button ac-button-spinner"
+                data-vscode-context='{"webviewSection": "createButton", "preventDefaultContextMenuItems": true}'
+                onClick={(e) => {
+                    e.preventDefault();
+                    e.target.dispatchEvent(
+                        new MouseEvent('contextmenu', {
+                            bubbles: true,
+                            clientX: e.clientX,
+                            clientY: e.clientY,
+                        }),
+                    );
+                    e.stopPropagation();
+                }}
+            >
+                {props.isLoading ? (
+                    <Spinner size="small" label="Loading create issue options" />
+                ) : (
+                    <ChevronDownIcon label="Create issue options" size="small" />
+                )}
+            </button>
+        </div>
+    );
+};
diff --git a/src/webviews/createIssueWebview.test.ts b/src/webviews/createIssueWebview.test.ts
@@ -49,6 +49,10 @@ jest.mock('../container', () => ({
             createOrShow: jest.fn(),
         },
         machineId: 'test-machine-id',
+        rovodevWebviewProvider: {
+            setPromptTextWithFocus: jest.fn(),
+        },
+        isRovoDevEnabled: true,
     },
 }));
 
@@ -82,6 +86,11 @@ jest.mock('form-data', () => ({
 jest.mock('../commands/jira/showIssue', () => ({
     showIssue: jest.fn(),
 }));
+
+jest.mock('../commands/jira/startWorkOnIssue', () => ({
+    startWorkOnIssue: jest.fn(),
+}));
+
 // Added feature flag mock as with jiraIssueWebview.test.ts
 jest.mock('src/util/featureFlags', () => ({
     FeatureFlagClient: {
@@ -965,6 +974,7 @@ describe('CreateIssueWebview', () => {
 
     describe('onMessageReceived', () => {
         const mockShowIssue = require('../commands/jira/showIssue').showIssue;
+        const mockStartWorkOnIssue = require('../commands/jira/startWorkOnIssue').startWorkOnIssue;
 
         const mockMessage = {
             action: 'createIssue',
@@ -991,26 +1001,41 @@ describe('CreateIssueWebview', () => {
             });
         });
 
-        it('should show VS Code notification on successful issue creation', async () => {
+        it('should show Jira Issue on successful issue creation', async () => {
             await (webview as any).onMessageReceived(mockMessage);
 
-            expect(mockWindow.showInformationMessage).toHaveBeenCalledWith(
-                'Issue TEST-123 has been created',
-                'Open Issue',
-            );
+            expect(mockShowIssue).toHaveBeenCalledWith({
+                key: 'TEST-123',
+                siteDetails: mockSiteDetails,
+            });
         });
 
-        it('should call showIssue when user clicks Open Issue button', async () => {
-            mockWindow.showInformationMessage = jest.fn().mockResolvedValue('Open Issue');
-            await (webview as any).onMessageReceived(mockMessage);
+        it('should call startWorkOnIssue when user clicks Create and create branch button', async () => {
+            const message = { ...mockMessage, onCreateAction: 'createAndStartWork' as const };
+            await (webview as any).onMessageReceived(message);
             await new Promise((resolve) => setTimeout(resolve, 0));
 
-            expect(mockShowIssue).toHaveBeenCalledWith({
+            expect(mockStartWorkOnIssue).toHaveBeenCalledWith({
                 key: 'TEST-123',
                 siteDetails: mockSiteDetails,
             });
         });
 
+        it('should call Rovo Dev webview provider when user clicks Create and generate code button', async () => {
+            const message = { ...mockMessage, onCreateAction: 'createAndGenerateCode' as const };
+            const issueUrl = `${mockSiteDetails.baseLinkUrl}/browse/TEST-123`;
+            await (webview as any).onMessageReceived(message);
+            await new Promise((resolve) => setTimeout(resolve, 0));
+            expect(Container.rovodevWebviewProvider.setPromptTextWithFocus).toHaveBeenCalledWith(
+                'Work on the attached Jira work item',
+                {
+                    contextType: 'jiraWorkItem',
+                    name: 'TEST-123',
+                    url: issueUrl,
+                },
+            );
+        });
+
         it('should handle refresh action', async () => {
             const refreshMessage = { action: 'refresh' };
             const forceUpdateSpy = jest.spyOn(webview, 'forceUpdateFields').mockImplementation(async () => {});
diff --git a/src/webviews/createIssueWebview.ts b/src/webviews/createIssueWebview.ts

Original file line number	Diff line number	Diff line change
`@@ -20,15 +20,14 @@ export class CreateIssuePage {`
`20`	`20`	`}`
`21`	`21`
`22`	`22`	`async createIssue() {`
`23`		`- const createButton = this.frame.getByRole('button', { name: 'Create' });`
	`23`	`+ const createButton = this.frame.getByRole('button', { name: 'Create', exact: true });`
`24`	`24`	`await createButton.scrollIntoViewIfNeeded();`
`25`	`25`	`await this.page.waitForTimeout(500);`
`26`	`26`	`await createButton.click();`
`27`	`27`	`}`
`28`	`28`
`29`	`29`	`async expectIssueCreated(issueKey: string) {`
`30`		`- await expect(`
`31`		- this.page.getByRole('dialog', { name: new RegExp(`Issue ${issueKey} has been created`) }),
`32`		`- ).toBeVisible();`
	`30`	+ const newIssueFrame = this.page.frameLocator('iframe.webview').frameLocator(`iframe[title="${issueKey}"]`);
	`31`	`+ expect(newIssueFrame).toBeTruthy();`
`33`	`32`	`}`
`34`	`33`	`}`
Original file line number	Diff line number	Diff line change
`@@ -202,7 +202,7 @@`
`202`	`202`	`},`
`203`	`203`	`{`
`204`	`204`	`"command": "atlascode.jira.createIssue.startWork",`
`205`		`- "title": "Create and start work",`
	`205`	`+ "title": "Create and create branch",`
`206`	`206`	`"category": "Jira"`
`207`	`207`	`},`
`208`	`208`	`{`
`@@ -1093,16 +1093,20 @@`
`1093`	`1093`	`{`
`1094`	`1094`	`"command": "atlascode.jira.createIssue.generateCode",`
`1095`	`1095`	`"when": "false"`
	`1096`	`+ },`
	`1097`	`+ {`
	`1098`	`+ "command": "atlascode.jira.expandCreateWorkItem",`
	`1099`	`+ "when": "false"`
`1096`	`1100`	`}`
`1097`	`1101`	`],`
`1098`	`1102`	`"webview/context": [`
`1099`	`1103`	`{`
`1100`	`1104`	`"command": "atlascode.jira.createIssue.startWork",`
`1101`		`- "when": "webviewId == 'atlascode.views.jira.createWorkItemWebview' && webviewSection == 'createButton'"`
	`1105`	`+ "when": "webviewSection == 'createButton'"`
`1102`	`1106`	`},`
`1103`	`1107`	`{`
`1104`	`1108`	`"command": "atlascode.jira.createIssue.generateCode",`
`1105`		`- "when": "atlascode:rovoDevEnabled && webviewId == 'atlascode.views.jira.createWorkItemWebview' && webviewSection == 'createButton'"`
	`1109`	`+ "when": "atlascode:rovoDevEnabled && webviewSection == 'createButton'"`
`1106`	`1110`	`},`
`1107`	`1111`	`{`
`1108`	`1112`	`"command": "atlascode.jira.copyImageElement",`
Original file line number	Diff line number	Diff line change
`@@ -111,6 +111,7 @@ export interface CreateSelectOptionAction extends Action {`
`111`	`111`	`export interface CreateIssueAction extends Action {`
`112`	`112`	`site: DetailedSiteInfo;`
`113`	`113`	`issueData: any;`
	`114`	`+ onCreateAction?: 'createAndView' \| 'createAndStartWork' \| 'createAndGenerateCode';`
`114`	`115`	`}`
`115`	`116`
`116`	`117`	`export interface CreateIssueLinkAction extends Action {`
Original file line number	Diff line number	Diff line change
`@@ -932,6 +932,9 @@ div[role='dialog'],`
`932`	`932`	`background: var(--vscode-button-background) !important;`
`933`	`933`	`border-radius: 2px !important;`
`934`	`934`	`}`
	`935`	`+.ac-button-spinner {`
	`936`	`+ --ds-icon-subtle: var(--vscode-button-foreground) !important;`
	`937`	`+}`
`935`	`938`
`936`	`939`	`.ac-button span {`
`937`	`940`	`color: var(--vscode-button-foreground) !important;`