Improve import status table UI and add "Go to project" CTA
This is a UX problem that can affect user onboarding, after importing a project from Github the app just shows that the import has been successful and from there i dont know what to do.
The same thing happens after creating a empty project or importing from URL. The user should be better guided through the application features, for example, learn to setup a build.
This is also an opportunity to improve the table design in general.
Solution
- Add a
Go to project
button to each row that represents a successfully imported project. - Align the
Import
buttons to the right. - Fix the issue with the namespace dropdown being wrapped in a grey container. It should look similar to the clone dropdown in the project homepage.
- Remove the background colors and represent the different states as follows:
- Successful import:
Success
CI badge + stringDone
- Failed import:
Failed
CI badge + stringFailed
- Running import:
Running
CI badge + stringRunning...
(to be replaced by new spinner when available) - Import not yet started:
Created
CI badge + stringNot started
- Successful import:
Current | Solution | Failed import | Flex layout |
---|---|---|---|
Specs
The fixed layout will have a width of 990px
. The width of the columns will be calculated as shown in these specs (margins being 16px
):
Edited by Chris Peressini