• Target environment: Rally, VSCode Extension

• Basic Requirements: Connect VSCode to Rally workspace, retrieve data from Rally and display on VSCode editor.

 

Now Rally is renamed to CA Agile Central, but we still use Rally as the name in this specification.

Project Background

Our clients want to build a VSCode extension to connect the code editing workspace to a Rally workspace. This goal will enable developers a fast and easy way to manage their work items in Rally; specifically, the extension should be able to select product backlog items (PBI) to work on and update specific fields to help track the work in progress.

Technology Stack

• VSCode extension SDK

• Rally API

• NodeJS

• Typescript

• React

Individual requirements

In the previous challenge, we have built a simple VSCode extension to connect to Rally workspace. The VSCode extension is able to retrieve data from Rally and display on the VSCode editor.

 

1. UI refinement

Currently, the UI of the extension is just temporary. We need to refine the UI to make the UX more friendly to devs.

 

Here are some basic requirements of the UI, beyond these requirements, you are free to design.

 

(1) Make the webview as a single page app. Note the current UI is using React, you can keep using React but you can also use other frontend frameworks as you like. You don’t need to maintain the current UI code.

(2) The page should be responsive - adapt to the different screen size of VSCode

2. The way to run Rally extension

Currently, we run the Rally extension from the command palette by pressing (`Ctrl+Shift+P` or `Cmd+Shift+P` on Mac) and typing `rally`. This is not intuitive. We need to change the way to run it to

• Use VSCode to open a git repo folder (with a .git folder)

• Then a Rally icon appears on the left sidebar of VSCode.

• Click the Rally icon to open the Rally extension.

 

3. UI screen workflow

(1) Screen 1:  Rally authorization and workspace selection

 

At the first time to open the Rally extension, show the screen of Rally authorization and workspace selection.

 

The screen should contain

• a textbox to enter Rally API Key

• a dropdown list of all available workspaces

• a button to login

 

The workflow of this screen should be

• Enter the Rally API Key then click the button (with text “Submit”)

• Load all available workspaces and display them in the dropdown list, change the button text to “Continue”. The first workspace should be selected in the dropdown list by default.

• Select one of the workspaces then click the button to navigate to Screen 2.

 

After navigating to Screen 2, the Rally API Key and the selected workspace should be stored in `.git/config` of the git repo folder.

 

For the next time to open Rally, it should navigate to Screen 2 directly.

 

(2) Screen 2: List of projects

 

The screen should

• list all projects of the selected workspace.

• display the name, create date and the brief description of the each project.

• include a dropdown list to select projects.

• include a button to load the backlogs of the selected project.

 

Note if the project name is too long, the name should be trim as `...`. But it should show the full text while hovering on it.

 

(3) Screen 3: List of backlogs

 

The screen should

• list all backlog of the selected project.

• display the name, ID, status and the description of the each backlog.

• include a dropdown list to select backlogs.

• include a button to load the details of the selected backlog.

 

(4) Screen 4: Details of backlogs

 

Show the details of each backlog, including

• Name (Editable)

• ID

• Status (Editable)

• Owner (Editable)

• Schedule State (Editable)

• Task Roll-Up

  • Est (Editable)

  • To Do (Editable)

  • Actual (Editable)

• Description (Editable)

• Notes (Editable)

• Parent (Parent backlog Name, Editable)

• Discussions of each task (Editable)

  • Add/Edit/Delete discussion of a specific task

 

For each item marked with “Editable”, you should design an easy way to edit the field. Note in this challenge, you are not required to call WSAPI to update the value to the remote Rally, you just need to implement the editable UI prototype. We’ll integrate the real “Edit” functionality in the next challenge.

 

Note:

• The goal of this challenge is to refine the UI of the extension to make it more friendly to devs. We are all devs, so stand in your perspective and open your mind to design the UI - assume your are the user of this extension, what kind of UI will make you more comfortable.

• Each screen should provide a button to go back to the previous screen

• You are required to setup workspaces and backlogs in your Rally workspace for testing.

• The existing functionality of the Rally extension should not be broken.

• You are required to use tslint to lint your VSCode script. The code should be lint error free.

 

Review

 

This challenge will be reviewed by copilot and (the PM/client) subjectively, there is no appeal and appeal response phase.

 

Codebase

 

Please work on the dev branch of https://gitlab.com/vscode-rally/vscode-rally

 

The target commit SHA is 04776af49c997352004a34c310882c9bcb52d1b0

 

You can grant yourself access by the link provided in the forum.

Final Submission Guidelines

Please submit the following items in a zip archive.

 

- The patch against the target repo and commit SHA. Please be sure to test your patch is valid.

- A detailed README.md to show how to deploy and run your extension in the VSCode.

- A separate document to describe how to set up your Rally workspace, including how to add backlogs, tasks, enable “Actual” field, report actual working time.

- A video to verify your VSCode extension meets all requirements. If you are not comfortable with spoken English you may feel free to annotate your video with text.