Provide API for registering nested pages (#2356)

common/Services/IPageService.cs

@@ -0,0 +1,17 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+using System;
+using CommunityToolkit.Mvvm.ComponentModel;
+using Microsoft.UI.Xaml.Controls;
+
+namespace DevHome.Common.Services;
+
+public interface IPageService
+{
+    Type GetPageType(string key);
+
+    public void Configure<T_VM, T_V>()
+        where T_VM : ObservableObject
+        where T_V : Page;
+}

docs/tools.md

@@ -42,7 +42,7 @@ The Dev Home framework will look at all types in its assembly for any inheriting
 On a found type, the framework will use:
   - ShortName property to get the name of the tool
 
-### Method definition
+#### Method definition
 
 This section contains a more detailed description of each of the interface methods.
 
@@ -59,16 +59,12 @@ Returns the name of the tool. This is used for the navigation menu text.
 [`toolpage.cs`](../common/ToolPage.cs)
 Contains the interface definition for Dev Home tools.
 
-## Dashboard Tool
-The Dashboard page hosts and displays Windows Widgets. Widgets are small UI containers that display text and graphics, associated with an app installed on the device. For information on creating widgets, see [Widgets Overview](https://learn.microsoft.com/windows/apps/design/widgets/) and [Widget providers](https://learn.microsoft.com/windows/apps/develop/widgets/widget-providers).
+### Navigation
 
-Each widget is represented by a [`WidgetViewModel`](../tools/Dashboard/DevHome.Dashboard/ViewModels/WidgetViewModel.cs). The WidgetViewModel displays itself inside a [`WidgetControl`](../tools/Dashboard/DevHome.Dashboard/Controls/WidgetControl.xaml), and the WidgetControls are grouped into a [`WidgetBoard`](../tools/Dashboard/DevHome.Dashboard/Controls/WidgetBoard.cs).
+In order to allow navigation to your tool, your page and ViewModel must be registered with the PageService. If your tool only contains one page, it is automatically registered for you since you added your page to `NavConfig.jsonc`. However, you may have other sub-pages you wish to register.
 
-### Widget UI
+In order to do so, you must create an extension method for the PageService inside your tool. See examples in [Settings](../settings/DevHome.Settings/Extensions/PageExtensions.cs) or [Extensions](../tools/ExtensionLibrary/DevHome.ExtensionLibrary/Extensions/PageExtensions.cs). Then, call your extension from the [PageService](../src/Services/PageService.cs).
 
-The Widget UI consists of two main parts. At the top, there is a context menu and an attribution area. For more information on these components, please read [Built-in widget UI components](https://learn.microsoft.com/windows/apps/design/widgets/widgets-states-and-ui#built-in-widget-ui-components). The rest of the widget content is an [Adaptive Card](https://learn.microsoft.com/windows/apps/design/widgets/widgets-create-a-template) provided by the [Widget Provider](https://learn.microsoft.com/windows/apps/develop/widgets/widget-providers).
+## Existing tools
 
-Widgets are rendered by Adaptive Cards, and there are a few ways Dev Home customizes the look and feel of the cards. Please note all of these are subject to change while Dev Home is in Preview.
-* Dev Home widgets use the [Adaptive Card schema](https://adaptivecards.io/explorer/) version 1.5, which is the most recent schema supported by the WinUI 3 Adaptive Card renderer.
-* There are [HostConfig](https://learn.microsoft.com/adaptive-cards/sdk/rendering-cards/uwp/host-config) files that define common styles (e.g., font family, font sizes, default spacing) and behaviors (e.g., max number of actions) for all the widgets. There is one for [light mode](../tools/Dashboard/DevHome.Dashboard/Assets/HostConfigLight.json) and one for [dark mode](../tools/Dashboard/DevHome.Dashboard/Assets/HostConfigDark.json).
-* Dev Home supports a custom AdaptiveElement type called [`LabelGroup`](../common/Renderers/LabelGroup.cs). This allows a card author to render a set of labels, each with a specified background color. For an example of how to use this type, please see the [GitHub Issues widget](https://github.com/microsoft/devhomegithubextension/blob/main/src/GitHubExtension/Widgets/Templates/GitHubIssuesTemplate.json).
+[Dashboard](./tools/Dashboard.md)

docs/tools/Dashboard.md

@@ -0,0 +1,14 @@
+# Dashboard
+
+The Dashboard page hosts and displays Windows Widgets. Widgets are small UI containers that display text and graphics, associated with an app installed on the device. For information on creating widgets, see [Widgets Overview](https://learn.microsoft.com/windows/apps/design/widgets/) and [Widget providers](https://learn.microsoft.com/windows/apps/develop/widgets/widget-providers).
+
+Each widget is represented by a [`WidgetViewModel`](../tools/Dashboard/DevHome.Dashboard/ViewModels/WidgetViewModel.cs). The WidgetViewModel displays itself inside a [`WidgetControl`](../../tools/Dashboard/DevHome.Dashboard/Controls/WidgetControl.xaml), and the WidgetControls are grouped into a [`WidgetBoard`](../../tools/Dashboard/DevHome.Dashboard/Controls/WidgetBoard.cs).
+
+### Widget UI
+
+The Widget UI consists of two main parts. At the top, there is a context menu and an attribution area. For more information on these components, please read [Built-in widget UI components](https://learn.microsoft.com/windows/apps/design/widgets/widgets-states-and-ui#built-in-widget-ui-components). The rest of the widget content is an [Adaptive Card](https://learn.microsoft.com/windows/apps/design/widgets/widgets-create-a-template) provided by the [Widget Provider](https://learn.microsoft.com/windows/apps/develop/widgets/widget-providers).
+
+Widgets are rendered by Adaptive Cards, and there are a few ways Dev Home customizes the look and feel of the cards. Please note all of these are subject to change while Dev Home is in Preview.
+* Dev Home widgets use the [Adaptive Card schema](https://adaptivecards.io/explorer/) version 1.5, which is the most recent schema supported by the WinUI 3 Adaptive Card renderer.
+* There are [HostConfig](https://learn.microsoft.com/adaptive-cards/sdk/rendering-cards/uwp/host-config) files that define common styles (e.g., font family, font sizes, default spacing) and behaviors (e.g., max number of actions) for all the widgets. There is one for [light mode](../../tools/Dashboard/DevHome.Dashboard/Assets/HostConfigLight.json) and one for [dark mode](../tools/Dashboard/DevHome.Dashboard/Assets/HostConfigDark.json).
+* Dev Home supports a custom AdaptiveElement type called [`LabelGroup`](../../common/Renderers/LabelGroup.cs). This allows a card author to render a set of labels, each with a specified background color. For an example of how to use this type, please see the [GitHub Issues widget](https://github.com/microsoft/devhomegithubextension/blob/main/src/GitHubExtension/Widgets/Templates/GitHubIssuesTemplate.json).

settings/DevHome.Settings/Extensions/PageExtensions.cs

@@ -0,0 +1,24 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+using DevHome.Common.Services;
+using DevHome.Settings.ViewModels;
+using DevHome.Settings.Views;
+
+namespace DevHome.Settings.Extensions;
+
+public static class PageExtensions
+{
+    public static void ConfigureSettingsPages(this IPageService pageService)
+    {
+        // Settings is not a Tool, so the main page is not configured automatically. Configure it here.
+        pageService.Configure<SettingsViewModel, SettingsPage>();
+
+        // Configure sub-pages
+        pageService.Configure<PreferencesViewModel, PreferencesPage>();
+        pageService.Configure<AccountsViewModel, AccountsPage>();
+        pageService.Configure<ExperimentalFeaturesViewModel, ExperimentalFeaturesPage>();
+        pageService.Configure<FeedbackViewModel, FeedbackPage>();
+        pageService.Configure<AboutViewModel, AboutPage>();
+    }
+}

src/Services/NavigationService.cs

@@ -3,7 +3,6 @@
 
 using System.Diagnostics.CodeAnalysis;
 using DevHome.Common.Services;
-using DevHome.Contracts.Services;
 using DevHome.Contracts.ViewModels;
 using DevHome.Dashboard.ViewModels;
 using DevHome.Helpers;

src/Services/PageService.cs

@@ -5,11 +5,8 @@
 using DevHome.Common.Contracts;
 using DevHome.Common.Models;
 using DevHome.Common.Services;
-using DevHome.Contracts.Services;
-using DevHome.ExtensionLibrary.ViewModels;
-using DevHome.ExtensionLibrary.Views;
-using DevHome.Settings.ViewModels;
-using DevHome.Settings.Views;
+using DevHome.ExtensionLibrary.Extensions;
+using DevHome.Settings.Extensions;
 using DevHome.ViewModels;
 using DevHome.Views;
 using Microsoft.UI.Xaml.Controls;
@@ -30,15 +27,7 @@ public class PageService : IPageService
 
     public PageService(ILocalSettingsService localSettingsService, IExperimentationService experimentationService)
     {
-        Configure<SettingsViewModel, SettingsPage>();
-        Configure<PreferencesViewModel, PreferencesPage>();
-        Configure<AccountsViewModel, AccountsPage>();
-        Configure<AboutViewModel, AboutPage>();
-        Configure<FeedbackViewModel, FeedbackPage>();
-        Configure<WhatsNewViewModel, WhatsNewPage>();
-        Configure<ExtensionSettingsViewModel, ExtensionSettingsPage>();
-        Configure<ExperimentalFeaturesViewModel, ExperimentalFeaturesPage>();
-
+        // Configure top-level pages from registered tools
         var assemblies = AppDomain.CurrentDomain.GetAssemblies();
         foreach (var group in App.NavConfig.NavMenu.Groups)
         {
@@ -52,6 +41,13 @@ where assembly.GetName().Name == tool.Assembly
             }
         }
 
+        // Configure other pages
+        Configure<WhatsNewViewModel, WhatsNewPage>();
+
+        this.ConfigureExtensionLibraryPages();
+        this.ConfigureSettingsPages();
+
+        // Configure Experimental Feature pages
         ExperimentalFeature.LocalSettingsService = localSettingsService;
         foreach (var experimentalFeature in App.NavConfig.ExperimentFeatures ?? Array.Empty<DevHome.Helpers.ExperimentalFeatures>())
         {
@@ -85,7 +81,7 @@ public Type GetPageType(string key)
         return pageType;
     }
 
-    private void Configure<T_VM, T_V>()
+    public void Configure<T_VM, T_V>()
         where T_VM : ObservableObject
         where T_V : Page
     {

tools/ExtensionLibrary/DevHome.ExtensionLibrary/Extensions/PageExtensions.cs

@@ -0,0 +1,16 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+using DevHome.Common.Services;
+using DevHome.ExtensionLibrary.ViewModels;
+using DevHome.ExtensionLibrary.Views;
+
+namespace DevHome.ExtensionLibrary.Extensions;
+
+public static class PageExtensions
+{
+    public static void ConfigureExtensionLibraryPages(this IPageService pageService)
+    {
+        pageService.Configure<ExtensionSettingsViewModel, ExtensionSettingsPage>();
+    }
+}