Skip to content

Commit 0932ddc

Browse files
danhellemdanhellem
committed
hub group samples and doc update
1 parent bd35772 commit 0932ddc

21 files changed

+337
-0
lines changed

‎README.md

+15
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,21 @@ Individual sample contributions are self-contained folders under `./src/Samples`
4646
4. `{SampleName}.scss` - optional sass file containing the styles (CSS) for the UI
4747
5. Additional ts/tsx files - For samples that are too big for one file, the code will be broken up appropriately
4848

49+
## Hubs and hub groups
50+
51+
Hubs and hub groups are the primary navigation elements in Azure DevOps. Files, Releases, Backlogs, and Queries are examples of hubs. A hub belongs to a hub group. The Files hub, for example, belongs to the project-level Azure Repos hub group. Hub groups can exist at the organization or collection level or the project level. Most extensions contribute to the project level.
52+
53+
Here are samples for the [most common hub contributions](https://learn.microsoft.com/en-us/azure/devops/extend/reference/targets/overview?toc=%2Fazure%2Fdevops%2Fmarketplace-extensibility%2Ftoc.json&view=azure-devops#hubs-and-hub-groups):
54+
55+
- Azure Boards - [work-hub-group](src/Samples/work-hub-group)
56+
- Azure Repos - [code-hub-group](src/Samples/code-hub-group)
57+
- Azure Pipelines - [build-release-hub-group](src/Samples/build-release-hub-group)
58+
- Azure Test Plans - [test-hub-group](src/Samples/test-hub-group)
59+
- Project Settings - [project-admin-hub-group](src/Samples/project-admin-hub-group)
60+
- Organization Settings - [collection-admin-hub-group](src/Samples/collection-admin-hub-group)
61+
62+
# Other samples
63+
4964
## BreadcrumbService
5065

5166
This sample adds a breadcrumb service which adds a "Sample Breadcrumb Item" global breadcrumb item to the sample hub. Visit the "Sample Hub" in the `Pipelines` hub group to see this item.

‎src/Samples/build-release-hub-group/build-release-hub-group.html

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<!DOCTYPE html>
2+
<html xmlns="http://www.w3.org/1999/xhtml">
3+
<body>
4+
<div id="root"></div>
5+
<script type="text/javascript" src="build-release-hub-group.js" charset="utf-8"></script>
6+
</body>
7+
</html>

‎src/Samples/build-release-hub-group/build-release-hub-group.json

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"contributions": [
3+
{
4+
"id": "custom-build-release-hub-group",
5+
"type": "ms.vss-web.hub",
6+
"targets": [
7+
"ms.vss-build-web.build-release-hub-group"
8+
],
9+
"properties": {
10+
"name": "Custom Build Hub",
11+
"uri": "dist/build-release-hub-group/build-release-hub-group.html",
12+
"icon": {
13+
"light": "static/app_folder.png",
14+
"dark": "static/app_folder.png"
15+
}
16+
}
17+
}
18+
]
19+
}

‎src/Samples/build-release-hub-group/build-release-hub-group.scss

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
@import "node_modules/azure-devops-ui/Core/_platformCommon.scss";
2+
3+
.sample-form-section {
4+
margin-top: 20px;
5+
}

‎src/Samples/build-release-hub-group/build-release-hub-group.tsx

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import * as React from "react";
2+
import * as SDK from "azure-devops-extension-sdk";
3+
4+
import "./build-release-hub-group.scss";
5+
6+
import { Header } from "azure-devops-ui/Header";
7+
import { Page } from "azure-devops-ui/Page";
8+
9+
import { showRootComponent } from "../../Common";
10+
11+
class BuildHubGroup extends React.Component<{}, {}> {
12+
13+
constructor(props: {}) {
14+
super(props);
15+
}
16+
17+
public componentDidMount() {
18+
SDK.init();
19+
}
20+
21+
public render(): JSX.Element {
22+
return (
23+
<Page className="sample-hub flex-grow">
24+
<Header title="Custom Build Hub" />
25+
<div className="page-content">
26+
<div className="sample-form-section flex-row flex-center">
27+
Hello World
28+
</div>
29+
</div>
30+
</Page>
31+
);
32+
}
33+
}
34+
35+
showRootComponent(<BuildHubGroup />);

‎src/Samples/code-hub-group/code-hub-group.html

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<!DOCTYPE html>
2+
<html xmlns="http://www.w3.org/1999/xhtml">
3+
<body>
4+
<div id="root"></div>
5+
<script type="text/javascript" src="code-hub-group.js" charset="utf-8"></script>
6+
</body>
7+
</html>

‎src/Samples/code-hub-group/code-hub-group.json

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"contributions": [
3+
{
4+
"id": "custom-code-hub-group",
5+
"type": "ms.vss-web.hub",
6+
"targets": [
7+
"ms.vss-code-web.code-hub-group"
8+
],
9+
"properties": {
10+
"name": "Custom Code Hub",
11+
"uri": "dist/code-hub-group/code-hub-group.html",
12+
"icon": {
13+
"light": "static/app_folder.png",
14+
"dark": "static/app_folder.png"
15+
}
16+
}
17+
}
18+
]
19+
}

‎src/Samples/code-hub-group/code-hub-group.scss

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
@import "node_modules/azure-devops-ui/Core/_platformCommon.scss";
2+
3+
.sample-form-section {
4+
margin-top: 20px;
5+
}

‎src/Samples/code-hub-group/code-hub-group.tsx

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import * as React from "react";
2+
import * as SDK from "azure-devops-extension-sdk";
3+
4+
import "./code-hub-group.scss";
5+
6+
import { Header } from "azure-devops-ui/Header";
7+
import { Page } from "azure-devops-ui/Page";
8+
9+
import { showRootComponent } from "../../Common";
10+
11+
class CodeHubGroup extends React.Component<{}, {}> {
12+
13+
constructor(props: {}) {
14+
super(props);
15+
}
16+
17+
public componentDidMount() {
18+
SDK.init();
19+
}
20+
21+
public render(): JSX.Element {
22+
return (
23+
<Page className="sample-hub flex-grow">
24+
<Header title="Custom Code Hub" />
25+
<div className="page-content">
26+
<div className="sample-form-section flex-row flex-center">
27+
Hello World
28+
</div>
29+
</div>
30+
</Page>
31+
);
32+
}
33+
}
34+
35+
showRootComponent(<CodeHubGroup />);

‎src/Samples/collection-admin-hub-group/collection-admin-hub-group.html

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<!DOCTYPE html>
2+
<html xmlns="http://www.w3.org/1999/xhtml">
3+
<body>
4+
<div id="root"></div>
5+
<script type="text/javascript" src="collection-admin-hub-group.js" charset="utf-8"></script>
6+
</body>
7+
</html>

‎src/Samples/collection-admin-hub-group/collection-admin-hub-group.json

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"contributions": [
3+
{
4+
"id": "custom-collection-admin-hub-group",
5+
"type": "ms.vss-web.hub",
6+
"targets": [
7+
"ms.vss-web.collection-admin-hub-group"
8+
],
9+
"properties": {
10+
"name": "Custom Collection Admin Hub",
11+
"uri": "dist/collection-admin-hub-group/collection-admin-hub-group.html"
12+
}
13+
}
14+
]
15+
}

‎src/Samples/collection-admin-hub-group/collection-admin-hub-group.scss

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
@import "node_modules/azure-devops-ui/Core/_platformCommon.scss";
2+
3+
.sample-form-section {
4+
margin-top: 20px;
5+
}

‎src/Samples/collection-admin-hub-group/collection-admin-hub-group.tsx

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import * as React from "react";
2+
import * as SDK from "azure-devops-extension-sdk";
3+
4+
import "./collection-admin-hub-group.scss";
5+
6+
import { Header } from "azure-devops-ui/Header";
7+
import { Page } from "azure-devops-ui/Page";
8+
9+
import { showRootComponent } from "../../Common";
10+
11+
class CollectionAdminHubGroup extends React.Component<{}, {}> {
12+
13+
constructor(props: {}) {
14+
super(props);
15+
}
16+
17+
public componentDidMount() {
18+
SDK.init();
19+
}
20+
21+
public render(): JSX.Element {
22+
return (
23+
<Page className="sample-hub flex-grow">
24+
<Header title="Custom Collection Admin Hub" />
25+
<div className="page-content">
26+
<div className="sample-form-section flex-row flex-center">
27+
Hello World
28+
</div>
29+
</div>
30+
</Page>
31+
);
32+
}
33+
}
34+
35+
showRootComponent(<CollectionAdminHubGroup />);

‎src/Samples/project-admin-hub-group/project-admin-hub-group.html

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<!DOCTYPE html>
2+
<html xmlns="http://www.w3.org/1999/xhtml">
3+
<body>
4+
<div id="root"></div>
5+
<script type="text/javascript" src="project-admin-hub-group.js" charset="utf-8"></script>
6+
</body>
7+
</html>

‎src/Samples/project-admin-hub-group/project-admin-hub-group.json

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"contributions": [
3+
{
4+
"id": "custom-project-admin-hub-group",
5+
"type": "ms.vss-web.hub",
6+
"targets": [
7+
"ms.vss-web.project-admin-hub-group"
8+
],
9+
"properties": {
10+
"name": "Custom Project Admin Hub",
11+
"uri": "dist/project-admin-hub-group/project-admin-hub-group.html"
12+
}
13+
}
14+
]
15+
}

‎src/Samples/project-admin-hub-group/project-admin-hub-group.scss

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
@import "node_modules/azure-devops-ui/Core/_platformCommon.scss";
2+
3+
.sample-form-section {
4+
margin-top: 20px;
5+
}

‎src/Samples/project-admin-hub-group/project-admin-hub-group.tsx

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import * as React from "react";
2+
import * as SDK from "azure-devops-extension-sdk";
3+
4+
import "./project-admin-hub-group.scss";
5+
6+
import { Header } from "azure-devops-ui/Header";
7+
import { Page } from "azure-devops-ui/Page";
8+
9+
import { showRootComponent } from "../../Common";
10+
11+
class ProjectAdminHubGroup extends React.Component<{}, {}> {
12+
13+
constructor(props: {}) {
14+
super(props);
15+
}
16+
17+
public componentDidMount() {
18+
SDK.init();
19+
}
20+
21+
public render(): JSX.Element {
22+
return (
23+
<Page className="sample-hub flex-grow">
24+
<Header title="Custom Project Admin Hub" />
25+
<div className="page-content">
26+
<div className="sample-form-section flex-row flex-center">
27+
Hello World
28+
</div>
29+
</div>
30+
</Page>
31+
);
32+
}
33+
}
34+
35+
showRootComponent(<ProjectAdminHubGroup />);

‎src/Samples/test-hub-group/test-hub-group.html

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<!DOCTYPE html>
2+
<html xmlns="http://www.w3.org/1999/xhtml">
3+
<body>
4+
<div id="root"></div>
5+
<script type="text/javascript" src="test-hub-group.js" charset="utf-8"></script>
6+
</body>
7+
</html>

‎src/Samples/test-hub-group/test-hub-group.json

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"contributions": [
3+
{
4+
"id": "custom-test-hub-group",
5+
"type": "ms.vss-web.hub",
6+
"targets": [
7+
"ms.vss-test-web.test-hub-group"
8+
],
9+
"properties": {
10+
"name": "Custom Test Hub",
11+
"uri": "dist/test-hub-group/test-hub-group.html",
12+
"icon": {
13+
"light": "static/app_folder.png",
14+
"dark": "static/app_folder.png"
15+
}
16+
}
17+
}
18+
]
19+
}

‎src/Samples/test-hub-group/test-hub-group.scss

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
@import "node_modules/azure-devops-ui/Core/_platformCommon.scss";
2+
3+
.sample-form-section {
4+
margin-top: 20px;
5+
}

‎src/Samples/test-hub-group/test-hub-group.tsx

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import * as React from "react";
2+
import * as SDK from "azure-devops-extension-sdk";
3+
4+
import "./test-hub-group.scss";
5+
6+
import { Header } from "azure-devops-ui/Header";
7+
import { Page } from "azure-devops-ui/Page";
8+
9+
import { showRootComponent } from "../../Common";
10+
11+
class WorkHubGroup extends React.Component<{}, {}> {
12+
13+
constructor(props: {}) {
14+
super(props);
15+
}
16+
17+
public componentDidMount() {
18+
SDK.init();
19+
}
20+
21+
public render(): JSX.Element {
22+
return (
23+
<Page className="sample-hub flex-grow">
24+
<Header title="Custom Work Hub" />
25+
<div className="page-content">
26+
<div className="sample-form-section flex-row flex-center">
27+
Hello World
28+
</div>
29+
</div>
30+
</Page>
31+
);
32+
}
33+
}
34+
35+
showRootComponent(<WorkHubGroup />);

0 commit comments

Comments
 (0)