AXON-762: Migrate frontend logic to new Start Work layout

[sspanchenko]

What Is This Change?

The current task involves migrating the logic from the old Start Work page to the new layout. All functionality has been taken from the original page, with the only difference being that the new version is split into components

How to test:

• create .env file
• add ATLASCODE_FF_OVERRIDES=atlascode-start-work-v3=true

Result:

 

Design vs Implementation

As I mentioned in the layout task, some details - such as colors, spacing, or font sizes - may differ slightly from the design. This is because I tried to stick to what Material UI provides out of the box and avoided heavy overrides, aiming for easier long-term maintenance. Additionally, this approach helps the page look consistent across various VS Code themes.

Some elements on the page were carried over from the previous version exactly as they were, since we don’t have updated designs for them yet. I’ve kept them unchanged for now, but if you'd like me to update their appearance, we can easily adjust them in future iterations.

These elements include:

• The "Use existing branch" section
   

• The success/error notification block

 

 

• The snackbar notification

 

I kept the ability for the user to toggle between the same four form states as on the old page:

• Both sections open (See the first screenshot on this page.) - Allows the user to both create a branch and update the issue status.

• Only the first section collapsed - Allows the user to skip branch creation while still updating the issue status.

 

• Only the second section collapsed - Allows the user to leave the issue status unchanged.

 

• Both sections collapsed - Allows the user to simply assign the task to themselves.

 

To preserve the same functionality as on the old page, I added a checkbox next to the "Create Branch" header - even though it wasn't included in the design. However, if we don't want to allow users to disable the first section, I can remove the checkbox and keep the section permanently open. Just let me know.

I also removed the settings gear button and the Custom Branch Prefix menu item, as we discussed during our daily stand-ups.

Legacy Minor Bugs

Since most of the logic was carried over from the old page, some of the minor issues we previously had may still appear here. For example, during development I noticed that branch names can sometimes be duplicated in the dropdown, which could be confusing for users.

As this task was focused solely on the redesign, it’s probably more appropriate to address these existing issues in a separate ticket. My goal here was simply to migrate the existing functionality as-is.

Testing

In addition to reviewing this PR, I’d also like to kindly ask for some functional testing - especially from those who have more experience working with this page than I do. I’ve done my best to ensure nothing was missed, but as you can see, this was a large task split across three PRs. So if you notice anything that didn’t make it over, please let me know.

Demo:

https://www.loom.com/share/be041c450914456ebcb19bf1b1c02e03

Basic checks:

• npm run lint
• npm run test

Advanced checks:

• If Atlassian employee & Bitbucket changes: did you test with DC in mind? See Instructions

Recommendations:

• Update the CHANGELOG if making a user facing change