Update Utilities page design to align with designer feedback (#2905)

* strings and url * visibility * pr feedback * pr feedback * string and icon * merge conflict --------- Co-authored-by: Darshak Bhatti <[email protected]>
microsoft · May 16, 2024 · fb8416f · fb8416f
1 parent 462271d
commit fb8416f
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 56 deletions.
diff --git a/tools/Utilities/src/Strings/en-us/Resources.resw b/tools/Utilities/src/Strings/en-us/Resources.resw
@@ -118,27 +118,36 @@
     <value>System.Resources.ResXResourceWriter, System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089</value>
   </resheader>
   <data name="EnvVariablesEditorUtilityDesc" xml:space="preserve">
-    <value>A quick utility for managing environment variables.</value>
+    <value>Create and manage environment variables.</value>
   </data>
   <data name="EnvVariablesEditorUtilityTitle" xml:space="preserve">
     <value>Environment Variables Editor</value>
   </data>
   <data name="HostsFileEditorUtilityDesc" xml:space="preserve">
-    <value>Quick and simple utility for managing hosts file.</value>
-    <comment>;Locked={"hosts"}</comment>
+    <value>Add, filter or remove Hosts file entries.</value>
+    <comment>;Locked={"Hosts"}</comment>
   </data>
   <data name="HostsFileEditorUtilityTitle" xml:space="preserve">
     <value>Hosts File Editor</value>
     <comment>;Locked={"Hosts"}</comment>
   </data>
+  <data name="LaunchButton.Text" xml:space="preserve">
+    <value>Launch</value>
+  </data>
   <data name="NavigationPane.Content" xml:space="preserve">
     <value>Utilities</value>
     <comment>Utilities</comment>
   </data>
   <data name="RegistryPreviewUtilityDesc" xml:space="preserve">
-    <value>A quick little utility to visualize and edit complex Windows Registry files.</value>
+    <value>Edit and visualize Windows Registry files.</value>
   </data>
   <data name="RegistryPreviewUtilityTitle" xml:space="preserve">
     <value>Registry Preview</value>
   </data>
+  <data name="SupportsLaunchAsAdmin.OffContent" xml:space="preserve">
+    <value>Launch as administrator</value>
+  </data>
+  <data name="SupportsLaunchAsAdmin.OnContent" xml:space="preserve">
+    <value>Launch as administrator</value>
+  </data>
 </root>
diff --git a/tools/Utilities/src/ViewModels/UtilitiesMainPageViewModel.cs b/tools/Utilities/src/ViewModels/UtilitiesMainPageViewModel.cs
@@ -25,22 +25,25 @@ public UtilitiesMainPageViewModel()
             {
                 Title = stringResource.GetLocalized("HostsFileEditorUtilityTitle"),
                 Description = stringResource.GetLocalized("HostsFileEditorUtilityDesc"),
-                NavigateUri = "https://aka.ms/PowerToysOverview_HostsFileEditor",
+                NavigateUri = "https://go.microsoft.com/fwlink/?Linkid=2271355",
                 ImageSource = Path.Combine(AppContext.BaseDirectory, "Assets\\HostsUILib", "Hosts.ico"),
+                SupportsLaunchAsAdmin = Microsoft.UI.Xaml.Visibility.Visible,
             },
             new(Path.Combine(appExAliasAbsFolderPath, "DevHome.RegistryPreviewApp.exe"))
             {
                 Title = stringResource.GetLocalized("RegistryPreviewUtilityTitle"),
                 Description = stringResource.GetLocalized("RegistryPreviewUtilityDesc"),
-                NavigateUri = "https://aka.ms/PowerToysOverview_RegistryPreview",
+                NavigateUri = "https://go.microsoft.com/fwlink/?Linkid=2270966",
                 ImageSource = Path.Combine(AppContext.BaseDirectory, "Assets\\RegistryPreview", "RegistryPreview.ico"),
+                SupportsLaunchAsAdmin = Microsoft.UI.Xaml.Visibility.Collapsed,
             },
             new(Path.Combine(appExAliasAbsFolderPath, "DevHome.EnvironmentVariablesApp.exe"))
             {
                 Title = stringResource.GetLocalized("EnvVariablesEditorUtilityTitle"),
                 Description = stringResource.GetLocalized("EnvVariablesEditorUtilityDesc"),
-                NavigateUri = "https://aka.ms/PowerToysOverview_EnvironmentVariables",
+                NavigateUri = "https://go.microsoft.com/fwlink/?Linkid=2270894",
                 ImageSource = Path.Combine(AppContext.BaseDirectory, "Assets\\EnvironmentVariables", "EnvironmentVariables.ico"),
+                SupportsLaunchAsAdmin = Microsoft.UI.Xaml.Visibility.Visible,
             },
         };
     }

diff --git a/tools/Utilities/src/ViewModels/UtilityViewModel.cs b/tools/Utilities/src/ViewModels/UtilityViewModel.cs
@@ -5,18 +5,40 @@
 using System.ComponentModel;
 using System.Diagnostics;
 using System.Windows.Input;
+using CommunityToolkit.Mvvm.ComponentModel;
 using CommunityToolkit.Mvvm.Input;
+using DevHome.Common.Services;
 using DevHome.Telemetry;
 using DevHome.Utilities.TelemetryEvents;
+using Microsoft.UI.Xaml;
 using Serilog;
 
 namespace DevHome.Utilities.ViewModels;
 
-public class UtilityViewModel : INotifyPropertyChanged
+public partial class UtilityViewModel : ObservableObject
 {
+#nullable enable
+
     private readonly ILogger _log = Log.ForContext("SourceContext", nameof(UtilityViewModel));
+    private readonly IExperimentationService? experimentationService;
+    private readonly string? experimentalFeature;
+    private readonly string _exeName;
+#nullable disable
 
-    private readonly string exeName;
+    public bool Visible
+    {
+        get
+        {
+            // Query if there is an experimental feature and return its enabled value
+            if (experimentalFeature is not null)
+            {
+                var isExperimentalFeatureEnabled = experimentationService?.IsFeatureEnabled(experimentalFeature) ?? true;
+                return isExperimentalFeatureEnabled;
+            }
+
+            return true;
+        }
+    }
 
     public string Title { get; set; }
 
@@ -28,60 +50,49 @@ public class UtilityViewModel : INotifyPropertyChanged
 
     public ICommand LaunchCommand { get; set; }
 
-    public ICommand LaunchAsAdminCommand { get; set; }
+    public Visibility SupportsLaunchAsAdmin { get; set; }
 
-    public event PropertyChangedEventHandler PropertyChanged;
+    [ObservableProperty]
+    private bool _launchAsAdmin;
 
-    protected virtual void OnPropertyChanged(string propertyName)
+#nullable enable
+    public UtilityViewModel(string exeName, IExperimentationService? experimentationService = null, string? experimentalFeature = null)
     {
-        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
-    }
-
-    public UtilityViewModel(string exeName)
-    {
-        this.exeName = exeName;
+        this._exeName = exeName;
+        this.experimentationService = experimentationService;
+        this.experimentalFeature = experimentalFeature;
         LaunchCommand = new RelayCommand(Launch);
-        LaunchAsAdminCommand = new RelayCommand(LaunchAsAdmin);
-        _log.Information("UtilityViewModel created for Title: {Title}, exe: {ExeName}", Title, exeName);
+        _log.Information($"UtilityViewModel created for Title: {Title}, exe: {exeName}");
     }
+#nullable disable
 
     private void Launch()
     {
-        LaunchInternal(false);
-    }
-
-    private void LaunchAsAdmin()
-    {
-        LaunchInternal(true);
-    }
-
-    private void LaunchInternal(bool runAsAdmin)
-    {
-        _log.Information("Launching {ExeName}, as admin: {RunAsAdmin}", exeName, runAsAdmin);
+        _log.Information($"Launching {_exeName}, as admin: {LaunchAsAdmin}");
 
         // We need to start the process with ShellExecute to run elevated
         var processStartInfo = new ProcessStartInfo
         {
-            FileName = exeName,
+            FileName = _exeName,
             UseShellExecute = true,
 
-            Verb = runAsAdmin ? "runas" : "open",
+            Verb = LaunchAsAdmin ? "runas" : "open",
         };
 
         try
         {
             var process = Process.Start(processStartInfo);
             if (process is null)
             {
-                _log.Error("Failed to start process {ExeName}", exeName);
+                _log.Error($"Failed to start process {_exeName}");
                 throw new InvalidOperationException("Failed to start process");
             }
         }
         catch (Exception ex)
         {
-            _log.Error(ex, "Failed to start process {ExeName}", exeName);
+            _log.Error(ex, $"Failed to start process {_exeName}");
         }
 
-        TelemetryFactory.Get<DevHome.Telemetry.ITelemetry>().Log("Utilities_UtilitiesLaunchEvent", LogLevel.Critical, new UtilitiesLaunchEvent(Title, runAsAdmin), null);
+        TelemetryFactory.Get<DevHome.Telemetry.ITelemetry>().Log("Utilities_UtilitiesLaunchEvent", LogLevel.Critical, new UtilitiesLaunchEvent(Title, LaunchAsAdmin), null);
     }
 }
diff --git a/tools/Utilities/src/Views/UtilityView.xaml b/tools/Utilities/src/Views/UtilityView.xaml
@@ -15,19 +15,22 @@
         Margin="0"
         Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
         BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
-        BorderThickness="{ThemeResource ExpanderBorderThickness}">
+        BorderThickness="{ThemeResource ExpanderBorderThickness}"
+        Visibility="{x:Bind ViewModel.Visible}">
 
         <Grid.RowDefinitions>
             <RowDefinition Height="Auto" />
             <RowDefinition Height="*" />
             <RowDefinition Height="Auto" />
+            <RowDefinition Height="Auto" />
         </Grid.RowDefinitions>
 
         <Image
             Grid.Row="0"
             Source="{x:Bind ViewModel.ImageSource}"
-            HorizontalAlignment="Stretch"
+            HorizontalAlignment="Left"
             VerticalAlignment="Top"
+            Margin="15 5 0 0"
             Width="64"
             Height="64"/>
 
@@ -57,29 +60,22 @@
             </StackPanel>
         </ScrollViewer>
 
-        <SplitButton 
+        <ToggleSwitch
+            x:Uid="SupportsLaunchAsAdmin"
             Grid.Row="2"
-            HorizontalAlignment="Center"
+            IsOn="{x:Bind ViewModel.LaunchAsAdmin, Mode=TwoWay}"
+            Visibility="{x:Bind ViewModel.SupportsLaunchAsAdmin, Mode=OneWay}"
+            Margin="15 0 0 5"/>
+
+        <Button
+            Grid.Row="3"
+            Margin="15 5 0 0"
             Command="{x:Bind ViewModel.LaunchCommand}">
 
             <StackPanel Orientation="Horizontal">
-                <TextBlock Text="Launch" Margin="0 0 5 0" />
-                <FontIcon Glyph="&#xE8A7;" FontSize="12" />
+                <TextBlock x:Uid="LaunchButton" />
             </StackPanel>
-
-            <SplitButton.Flyout>
-                <MenuFlyout>
-                    <MenuFlyoutItem
-                        Text="Launch as Admin"
-                        Command="{x:Bind ViewModel.LaunchAsAdminCommand}">
-
-                        <MenuFlyoutItem.Icon>
-                            <FontIcon Glyph="&#xE7EF;" />
-                        </MenuFlyoutItem.Icon>
-                    </MenuFlyoutItem>
-                </MenuFlyout>
-            </SplitButton.Flyout>
-        </SplitButton>
+        </Button>
 
     </Grid>
 </UserControl>