Prototype Azure DevOps dashboard widget that lists repositories from a project (and optionally up to five additional projects) and lets you organize them into custom groups.
Features
Automatically loads repositories from the current project
Optional "+" button to include up to five additional projects
Settings panel to create custom groups, auto-group by name prefix, and assign repositories via drag-and-drop; configuration persists per widget instance
Groups are collapsible and show optional repository details (description and last updated time)
Search bar to quickly filter repositories
Export or import group configuration as JSON
Responsive layout with automatic light/dark theme based on Azure DevOps settings
Setup and testing from scratch
Install dependencies
npm install
Run unit tests
npm test
Build the widget assets
npm run build
Package the contents of the dist/ folder into an Azure DevOps extension (for example with tfx extension create) and publish it to your organization
Add the Repo Group Visualizer widget to a dashboard
Configure the widget
When added or edited, the settings view lets you create groups, specify a prefix to auto-populate repos, and drag remaining repositories into buckets
Saving the dashboard persists the configuration for this widget instance
Use the widget
Repository names are clickable links to their Azure DevOps pages
Use the "+" button to include extra projects (up to five total)
Development
npm install
npm start # runs webpack dev server
npm test # executes unit tests
The entry point is src/index.tsx which initializes the Azure DevOps SDK and lists repositories using helpers in src/grouping.ts.
