hub group samples and doc update

README.md

@@ -46,6 +46,21 @@ Individual sample contributions are self-contained folders under `./src/Samples`
 4. `{SampleName}.scss` - optional sass file containing the styles (CSS) for the UI
 5. Additional ts/tsx files - For samples that are too big for one file, the code will be broken up appropriately
 
+## Hubs and hub groups
+
+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.
+
+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):
+
+- Azure Boards - [work-hub-group](src/Samples/work-hub-group)
+- Azure Repos - [code-hub-group](src/Samples/code-hub-group)
+- Azure Pipelines - [build-release-hub-group](src/Samples/build-release-hub-group)
+- Azure Test Plans - [test-hub-group](src/Samples/test-hub-group)
+- Project Settings - [project-admin-hub-group](src/Samples/project-admin-hub-group)
+- Organization Settings - [collection-admin-hub-group](src/Samples/collection-admin-hub-group)
+
+# Other samples
+
 ## BreadcrumbService
 
 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

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

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

@@ -0,0 +1,19 @@
+{
+    "contributions": [
+        {
+            "id": "custom-build-release-hub-group",
+            "type": "ms.vss-web.hub",
+            "targets": [
+                "ms.vss-build-web.build-release-hub-group"
+            ],
+            "properties": {
+                "name": "Custom Build Hub",
+                "uri": "dist/build-release-hub-group/build-release-hub-group.html",
+                "icon": {
+                    "light": "static/app_folder.png",
+                    "dark": "static/app_folder.png"
+                }
+            }
+        }
+    ] 
+}

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

@@ -0,0 +1,5 @@
+@import "node_modules/azure-devops-ui/Core/_platformCommon.scss";
+
+.sample-form-section {
+    margin-top: 20px;
+}

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

@@ -0,0 +1,35 @@
+import * as React from "react";
+import * as SDK from "azure-devops-extension-sdk";
+
+import "./build-release-hub-group.scss";
+
+import { Header } from "azure-devops-ui/Header";
+import { Page } from "azure-devops-ui/Page";
+
+import { showRootComponent } from "../../Common";
+
+class BuildHubGroup extends React.Component<{}, {}> {   
+
+    constructor(props: {}) {
+        super(props);
+    }
+
+    public componentDidMount() {
+        SDK.init();        
+    }
+
+    public render(): JSX.Element {
+        return (
+            <Page className="sample-hub flex-grow">
+                <Header title="Custom Build Hub" />
+                <div className="page-content">
+                    <div className="sample-form-section flex-row flex-center">
+                        Hello World
+                    </div>                   
+                </div>
+            </Page>
+        );
+    }   
+}
+
+showRootComponent(<BuildHubGroup />);

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

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

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

@@ -0,0 +1,19 @@
+{
+    "contributions": [
+        {
+            "id": "custom-code-hub-group",
+            "type": "ms.vss-web.hub",
+            "targets": [
+                "ms.vss-code-web.code-hub-group"
+            ],
+            "properties": {
+                "name": "Custom Code Hub",
+                "uri": "dist/code-hub-group/code-hub-group.html",
+                "icon": {
+                    "light": "static/app_folder.png",
+                    "dark": "static/app_folder.png"
+                }
+            }
+        }
+    ] 
+}

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

@@ -0,0 +1,5 @@
+@import "node_modules/azure-devops-ui/Core/_platformCommon.scss";
+
+.sample-form-section {
+    margin-top: 20px;
+}

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

@@ -0,0 +1,35 @@
+import * as React from "react";
+import * as SDK from "azure-devops-extension-sdk";
+
+import "./code-hub-group.scss";
+
+import { Header } from "azure-devops-ui/Header";
+import { Page } from "azure-devops-ui/Page";
+
+import { showRootComponent } from "../../Common";
+
+class CodeHubGroup extends React.Component<{}, {}> {   
+
+    constructor(props: {}) {
+        super(props);
+    }
+
+    public componentDidMount() {
+        SDK.init();        
+    }
+
+    public render(): JSX.Element {
+        return (
+            <Page className="sample-hub flex-grow">
+                <Header title="Custom Code Hub" />
+                <div className="page-content">
+                    <div className="sample-form-section flex-row flex-center">
+                        Hello World
+                    </div>                   
+                </div>
+            </Page>
+        );
+    }   
+}
+
+showRootComponent(<CodeHubGroup />);

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

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

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

@@ -0,0 +1,15 @@
+{
+    "contributions": [
+        {
+            "id": "custom-collection-admin-hub-group",
+            "type": "ms.vss-web.hub",
+            "targets": [
+                "ms.vss-web.collection-admin-hub-group"
+            ],
+            "properties": {
+                "name": "Custom Collection Admin Hub",
+                "uri": "dist/collection-admin-hub-group/collection-admin-hub-group.html"                
+            }
+        }
+    ] 
+}

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

@@ -0,0 +1,5 @@
+@import "node_modules/azure-devops-ui/Core/_platformCommon.scss";
+
+.sample-form-section {
+    margin-top: 20px;
+}

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

@@ -0,0 +1,35 @@
+import * as React from "react";
+import * as SDK from "azure-devops-extension-sdk";
+
+import "./collection-admin-hub-group.scss";
+
+import { Header } from "azure-devops-ui/Header";
+import { Page } from "azure-devops-ui/Page";
+
+import { showRootComponent } from "../../Common";
+
+class CollectionAdminHubGroup extends React.Component<{}, {}> {   
+
+    constructor(props: {}) {
+        super(props);
+    }
+
+    public componentDidMount() {
+        SDK.init();        
+    }
+
+    public render(): JSX.Element {
+        return (
+            <Page className="sample-hub flex-grow">
+                <Header title="Custom Collection Admin Hub" />
+                <div className="page-content">
+                    <div className="sample-form-section flex-row flex-center">
+                        Hello World
+                    </div>                   
+                </div>
+            </Page>
+        );
+    }   
+}
+
+showRootComponent(<CollectionAdminHubGroup />);

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

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

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

@@ -0,0 +1,15 @@
+{
+    "contributions": [
+        {
+            "id": "custom-project-admin-hub-group",
+            "type": "ms.vss-web.hub",
+            "targets": [
+                "ms.vss-web.project-admin-hub-group"
+            ],
+            "properties": {
+                "name": "Custom Project Admin Hub",
+                "uri": "dist/project-admin-hub-group/project-admin-hub-group.html"                
+            }
+        }
+    ] 
+}

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

@@ -0,0 +1,5 @@
+@import "node_modules/azure-devops-ui/Core/_platformCommon.scss";
+
+.sample-form-section {
+    margin-top: 20px;
+}

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

@@ -0,0 +1,35 @@
+import * as React from "react";
+import * as SDK from "azure-devops-extension-sdk";
+
+import "./project-admin-hub-group.scss";
+
+import { Header } from "azure-devops-ui/Header";
+import { Page } from "azure-devops-ui/Page";
+
+import { showRootComponent } from "../../Common";
+
+class ProjectAdminHubGroup extends React.Component<{}, {}> {   
+
+    constructor(props: {}) {
+        super(props);
+    }
+
+    public componentDidMount() {
+        SDK.init();        
+    }
+
+    public render(): JSX.Element {
+        return (
+            <Page className="sample-hub flex-grow">
+                <Header title="Custom Project Admin Hub" />
+                <div className="page-content">
+                    <div className="sample-form-section flex-row flex-center">
+                        Hello World
+                    </div>                   
+                </div>
+            </Page>
+        );
+    }   
+}
+
+showRootComponent(<ProjectAdminHubGroup />);

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

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

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

@@ -0,0 +1,19 @@
+{
+    "contributions": [
+        {
+            "id": "custom-test-hub-group",
+            "type": "ms.vss-web.hub",
+            "targets": [
+                "ms.vss-test-web.test-hub-group"
+            ],
+            "properties": {
+                "name": "Custom Test Hub",
+                "uri": "dist/test-hub-group/test-hub-group.html",
+                "icon": {
+                    "light": "static/app_folder.png",
+                    "dark": "static/app_folder.png"
+                }
+            }
+        }
+    ] 
+}

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

@@ -0,0 +1,5 @@
+@import "node_modules/azure-devops-ui/Core/_platformCommon.scss";
+
+.sample-form-section {
+    margin-top: 20px;
+}

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

@@ -0,0 +1,35 @@
+import * as React from "react";
+import * as SDK from "azure-devops-extension-sdk";
+
+import "./test-hub-group.scss";
+
+import { Header } from "azure-devops-ui/Header";
+import { Page } from "azure-devops-ui/Page";
+
+import { showRootComponent } from "../../Common";
+
+class WorkHubGroup extends React.Component<{}, {}> {   
+
+    constructor(props: {}) {
+        super(props);
+    }
+
+    public componentDidMount() {
+        SDK.init();        
+    }
+
+    public render(): JSX.Element {
+        return (
+            <Page className="sample-hub flex-grow">
+                <Header title="Custom Work Hub" />
+                <div className="page-content">
+                    <div className="sample-form-section flex-row flex-center">
+                        Hello World
+                    </div>                   
+                </div>
+            </Page>
+        );
+    }   
+}
+
+showRootComponent(<WorkHubGroup />);