Polish blocked repositories page layout
Open
Nobody has claimed this yet.
feature: admin dashboard
meta: never-stale
team: webapp
type: improvement
- Dominant language
- TypeScript
- Stars
- 13.8k
- Forks
- 1.4k
- Avg merge
- 17h 58m
- Merged PRs (30d)
- 5
Description
Problem to solve
Follow-up UX from https://github.com/gitpod-io/gitpod/pull/11446.
- 1. Use red text color for the delete option in the more actions dropdown, see https://github.com/gitpod-io/gitpod/pull/11446#discussion_r923697844.
- 2. Improve empty input validation error. Replace Empty RegEx! with Repository URL can not be empty.
- 3. Improve table design (thinner rows in height)
- 4. Improve table header (borderless design)
- 5. Improve table binary option for indicating blocking users toggle with text or an icon, see https://github.com/gitpod-io/gitpod/pull/11446#discussion_r923782583.
- 6. Improve input placeholder, see https://github.com/gitpod-io/gitpod/pull/11446#discussion_r923783116.
- 7. Use an alert component to inform user about search input flexibity or limitations, see https://github.com/gitpod-io/gitpod/pull/11446#discussion_r923784807.
- 8. Use an alert component to inform the user that RegEx is supported while adding a new blocked repository.
- 9. Remove the Delete table header, the more actions column does not need a table header.
- 10. Move the Block User slightly more to the left for better white space usage and visual balance.
- 11. Improve table typography, see colors, font size and font weight in the linked design specs below.
- 12. Rename Block User to Block Users in the new blocked repository modal.
Additional things to consider:
- 13. Adding the EDIT functionality using the same modal.
- 14. Use an alert component (warning variant) to warn users, this can affect all instance users.
- 15. Surface the admin user who added each blocked repository, for system visibility.
- 16. Improve dark theme colors. 🌔
- 17. Introduce Updated date column and indicate sorting order.
- 18. Remove the Blocked Users section within the modal when deleting a blocked repository. ❗
See design specs.
| Block Users (Text) | Block Users (Icon) | New Blocked Repository (Modal) |
|---|---|---|
![]() |
![]() |
![]() |
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by locating the blocked repositories page and its table and modal components, then compare them with the linked Figma design specs. Address the unchecked layout, typography, positioning, editing, visibility, dark-theme, sorting, and modal items, and verify the page matches the requested design and behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- design, frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100


