Update environments page UX #2320

bbonaby · 2024-02-27T22:54:06Z

Summary of the pull request

This PR updates the UI for the management experience:
1. We're no longer running compute system operations on the UI thread
2. The issue with icons not showing up on the management page has been fixed
3. More code is now shared between the setup target flow and the environment management page
4. State changes from the management page is now reflected in the setup target page
5. The management page is now using the compute system manager to get the list of IComputeSystems just like the setup target flow

There is still some more code share that can be done between the management page and the setup target page. This can be updated in the future.

Video of after change:
Environments page:

Management.UI.improvement.mp4

Setup Target page:

SetupTarget.UI.mp4

References and relevant issues

Provider Icons will need to change, I believe we'll need to move the hyper-v icon under the dev home project. Will also need new icons from design

Detailed description of the pull request / Additional comments

Validation steps performed

PR checklist

Closes #xxx
Tests added/passed
Documentation updated

krschau · 2024-02-28T16:30:26Z

I suggest that when you move the HyperVExtension directory under a general "extensions" directory, you also move what's here under Common there. (Unless the stuff under Common is actually used by more and I don't understand how it works, but my guess is it's fine if your tool points to your extension project and keeps "Common" containing things that are used throughout DH)

bbonaby · 2024-02-28T17:49:53Z

I suggest that when you move the HyperVExtension directory under a general "extensions" directory, you also move what's here under Common there. (Unless the stuff under Common is actually used by more and I don't understand how it works, but my guess is it's fine if your tool points to your extension project and keeps "Common" containing things that are used throughout DH)

Hey @krschau, you can think of the Hyper-V extension as separate from Dev Home in that it shouldn't really have any dev home related UI code/logic. E.g if DMA wasn't ok with it being in the dev home repository we would have put it in a separate app.

The environments tool page isn't just for Hyper-v, its for dev box, github code spaces, wsl etc. Its the page where all dev environments related UI will live. The reason why we ended up putting some of the environments UI code into dev home common is because the setup target flow (a new flow in the machine configuration tool) also uses code there. I didn't think it was a good idea to reference the environments project from the setup flow project so thats why I put the common code they share into devhome common. Also In the future environments may show up in other places in dev home as well. Are you saying that it is ok to reference the setup flow tool project from the environments tool project?

I guess there are two options here:

Maybe we should create a DevHome Tool common project, that both the setup flow project and the new environments tool project reference. Or
Attempt to do what you say, as in moving what's in DevHome common, to a new project in the new extensions folder.
1.1. Only thing with this is under the extensions folder we would add a "DevEnvironments folder. Then within it we'd have a Folder for Common, and then hyper-v extension folder that will have all the hyper-v related projects. The setup flow project and the environments tool project. Will then both reference this new environments common project that lives in the \Extensions\DevEnvironments\Common folder

Thoughts on that?

…date-management-ui

…date-feature-branch-withsdkchanges

…ter-fix-with-setup

…date-management-ui

…naby/update-management-ui

sshilov7 · 2024-03-02T01:54:56Z

HyperVExtension/src/HyperVExtension/Constants.cs

@@ -7,5 +7,5 @@ internal sealed class Constants
 {
    public const string WindowsThumbnail = "ms-appx:///HyperVExtension/Assets/hyper-v-windows-default-image.jpg";

-    public const string ExtensionIcon = "ms-appx:///HyperVExtension/Assets/hyper-v-provider-icon.png";
+    public const string ExtensionIcon = "ms-resource://Microsoft.Windows.DevHome.Dev/Files/HyperVExtension/Assets/hyper-v-provider-icon.png";


Do we need a comment or a link to documentation about the format of this string? (developers may be looking at this code for an example how to create a DevEnv extension).

sshilov7 · 2024-03-02T02:17:28Z

common/Environments/Helpers/ComputeSystemHelpers.cs

+        {
+            var result = await computeSystemWrapper.GetComputeSystemThumbnailAsync(string.Empty);
+
+            if (result.Result.Status == ProviderOperationStatus.Failure || result.ThumbnailInBytes.Length <= 0)


Coding guidelines: Use parenthesis. We have for C++ in Windows and it's also in "Common C# code conventions"

…e since its not needed, and add comments

sshilov7 · 2024-03-02T02:32:58Z

common/Environments/Models/CardProperty.cs

        {
-            fixed (char* resourcePathPointer = indirectPathToResource)
+            var indirectPathToResource = "@{" + packageFullName + "? " + iconPathUri.AbsoluteUri + "}";
+            Span<char> outputBuffer = new char[512];


512 characters feels too small these days. It probably wouldn't hurt to allocate 1K.

…nitial comments, update loading page to allow scrolling when there are tasks and actions in the action center. Fix error message spelling.

sshilov7 · 2024-03-02T23:25:58Z

tools/Environments/DevHome.Environments/ViewModels/ComputeSystemViewModel.cs

+        // We'll need to disable the card UI while the operation is in progress and handle failures.
+        Task.Run(async () =>
+        {
+            IsOperationInProgress = true;


Is this for future use? (Like only one operation at a time allowed)

sshilov7 · 2024-03-02T23:44:41Z

tools/Environments/DevHome.Environments/ViewModels/LandingPageViewModel.cs

        ShowLoadingShimmer = false;
+
+        lock (_lock)


I think lock is not needed since assignmet to a bool variable is atomic in C#.

* add initial SDK changes (#2209) * Add UX code from private ADO branch to public feature branch (#2241) * Add initial code from private branch that will be shared between the setup flow and the Dev environments tool page. PRs: from private ADO repo: https://dev.azure.com/microsoft/Dart/_git/DevHome?version=GBDevEnv * add changes to the setup flow for dev environment configuration PRS: from private ADO repo: https://dev.azure.com/microsoft/Dart/_git/DevHome?version=GBDevEnv * Add dev environments management tool page from private ADO repo: https://dev.azure.com/microsoft/Dart/_git/DevHome?version=GBDevEnv * fix conflicts and stylecop errors due to update from merge with main --------- Co-authored-by: Huzaifa Danish <[email protected]> * Move Hyper-V extension code from private repository to public dev environments feature branch (#2246) * Add Hyper-v extension to Dev Home from Private Hyper-v extension branch: PRS https://github.com/microsoft/DevHomeHyperVExtension * Merge changes from Dev Home main and fix style cop errors * Initial implementation of IComputeSystem::ApplyConfiguration for HyperV extension. (#2258) * Add environments to experimentation (#2260) * Add PowerShell script and a helper class to deploy DevSetupAgent service to a Hyper-V VM. (#2261) * Hyper-V extension: Add "Ask for VM credentials" and "Wait for logon" Adaptive Cards to Hyper-V Configure command. (#2289) * Changes to make DevSetupEngine work with .NET 8 (#2308) * Build DevSetupAgent separately from the main Dev Home solution and add DevSetupAgent_*.zip to MSIX package. (#2325) * Add WaitForLogin and Credentials Adaptive Cards * Address review comments. * New VS solution for DevSetupAgent * Add BuildDevSetupAgentHelper script * Fix x86 DevSetupAgent to work on x64 OS. Create DevSetupAgent zip for different VM architectures. Fixed build scripts and HyperVExtension.csproj to include DevSetupAgent zip file into Dev Home MSIX package. * Remove old comment. * Fix a comment. * Update setup target flow to allow for configuration of a dev environment. (#2321) * initial code * update messaging and adaptive cards * remove added method * update strings and names * update based on initial comments and update IsHyperVModuleLoaded with new work around that doesn't involve installing using Install-Module which installs from PsGallery * improve wording * fix merge conflicts * update dev environments feature branch with latest idl changes (#2334) * update feature branch to latest sdk * update InputJson to inputJson * update with latest changes * Update environments page UX (#2320) * add updates to ui * fix crashes due to resource name mismatch * update feature branch to latest sdk * update InputJson to inputJson * update with latest changes * update * update to remove duplicate, resize shimmer, remove id from winget file since its not needed, and add comments * Re-add correct adaptive host file for correct theming, address some initial comments, update loading page to allow scrolling when there are tasks and actions in the action center. Fix error message spelling. * improve setup target loading page progress messaging * Fix git clone's dependsOn Id to match our new Ids for setup target flow * Update build scripts to build DevSetupAgent in Azure official build. (#2339) * update dev home to use new SDK version and other projects to use win app sdk v1.5 to prevent build issues (#2344) * Fix PS DevSetupAgent deployment script. (#2345) * remove classes that don't need to be added * Change all tabs to spaces * Update tools directory to use crlf * Update HyperVExtension directory to use crlf * Update common/Environments directory to use crlf * Update more in common directory to use crlf * [Hyper-V extension]: Fixes for DevSetupEngine registration, Configure progress reporting, and GitHub build. (#2348) * remove s that was added from a previous commit causing build to fail * fix tests for build * update malformed configuration string to allow arm64 to build --------- Co-authored-by: Huzaifa Danish <[email protected]> Co-authored-by: sshilov7 <[email protected]> Co-authored-by: Kristen Schau <[email protected]>

bbonaby added 2 commits February 25, 2024 23:34

add updates to ui

81ee104

fix crashes due to resource name mismatch

50887ad

bbonaby requested review from sshilov7, SohamDas2021, huzaifa-d and kanismohammed February 27, 2024 22:56

bbonaby marked this pull request as ready for review February 27, 2024 23:08

bbonaby added 9 commits February 29, 2024 16:26

Merge branch 'microsoftfeature/dev-environments' into user/bbonaby/up…

2cbc93d

…date-management-ui

update feature branch to latest sdk

072e1f4

update InputJson to inputJson

f55a2eb

Merge branch 'microsoftfeature/dev-environments' into user/bbonaby/up…

9a39ac8

…date-feature-branch-withsdkchanges

update with latest changes

50fe19d

Merge branch 'user/bbonaby/update-management-ui' into user/bbonaby/af…

38cd8a6

…ter-fix-with-setup

update

003bac9

Merge branch 'microsoftfeature/dev-environments' into user/bbonaby/up…

c4dee29

…date-management-ui

Merge commit '003bac93f59688639561e9411b401a9613cc86fd' into user/bbo…

823e9b6

…naby/update-management-ui

sshilov7 reviewed Mar 2, 2024

View reviewed changes

update to remove duplicate, resize shimmer, remove id from winget fil…

ed4dece

…e since its not needed, and add comments

sshilov7 reviewed Mar 2, 2024

View reviewed changes

Re-add correct adaptive host file for correct theming, address some i…

bf58e86

…nitial comments, update loading page to allow scrolling when there are tasks and actions in the action center. Fix error message spelling.

sshilov7 reviewed Mar 2, 2024

View reviewed changes

sshilov7 approved these changes Mar 3, 2024

View reviewed changes

bbonaby added 2 commits March 2, 2024 16:17

improve setup target loading page progress messaging

fb29f38

Fix git clone's dependsOn Id to match our new Ids for setup target flow

1c54656

kanismohammed approved these changes Mar 4, 2024

View reviewed changes

bbonaby merged commit 031c4d2 into microsoftfeature/dev-environments Mar 4, 2024
1 of 4 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update environments page UX #2320

Update environments page UX #2320

bbonaby commented Feb 27, 2024

krschau commented Feb 28, 2024

bbonaby commented Feb 28, 2024

sshilov7 Mar 2, 2024

sshilov7 Mar 2, 2024

sshilov7 Mar 2, 2024

sshilov7 Mar 2, 2024

sshilov7 Mar 2, 2024

Update environments page UX #2320

Update environments page UX #2320

Conversation

bbonaby commented Feb 27, 2024

Summary of the pull request

References and relevant issues

Detailed description of the pull request / Additional comments

Validation steps performed

PR checklist

krschau commented Feb 28, 2024

bbonaby commented Feb 28, 2024

sshilov7 Mar 2, 2024

Choose a reason for hiding this comment

sshilov7 Mar 2, 2024

Choose a reason for hiding this comment

sshilov7 Mar 2, 2024

Choose a reason for hiding this comment

sshilov7 Mar 2, 2024

Choose a reason for hiding this comment

sshilov7 Mar 2, 2024

Choose a reason for hiding this comment