Resource masking fixes (#6618)

Author: JamesNK

src/Aspire.Dashboard/Components/Controls/GridValue.razor

@@ -81,7 +81,8 @@
                           IconEnd="@(IsMasked ? _unmaskIcon : _maskIcon)"
                           Title="@(IsMasked ? Loc[nameof(ControlsStrings.GridValueMaskShowValue)] : Loc[nameof(ControlsStrings.GridValueMaskHideValue)])"
                           OnClick="ToggleMaskStateAsync"
-                          aria-label="@(IsMasked ? Loc[nameof(ControlsStrings.GridValueMaskShowValue)] : Loc[nameof(ControlsStrings.GridValueMaskHideValue)])" />
+                          aria-label="@(IsMasked ? Loc[nameof(ControlsStrings.GridValueMaskShowValue)] : Loc[nameof(ControlsStrings.GridValueMaskHideValue)])"
+                          Class="grid-value-mask-button" />
         }
 
     </div>

src/Aspire.Dashboard/Components/Controls/PropertyGrid.razor

@@ -11,7 +11,8 @@
                 Style="width:100%"
                 GenerateHeader="@GenerateHeader"
                 GridTemplateColumns="@GridTemplateColumns"
-                ShowHover="true">
+                ShowHover="true"
+                Class="@Class">
     <AspireTemplateColumn Title="@(NameColumnTitle ?? Loc[nameof(ControlsStrings.NameColumnHeader)])" Class="nameColumn" SortBy="@NameSort" Sortable="@IsNameSortable">
         <GridValue
             ValueDescription="@(NameColumnTitle ?? Loc[nameof(ControlsStrings.NameColumnHeader)])"

src/Aspire.Dashboard/Components/Controls/PropertyGrid.razor.cs

@@ -140,6 +140,9 @@ public partial class PropertyGrid<TItem> where TItem : IPropertyGridItem
     [Parameter]
     public GenerateHeaderOption GenerateHeader { get; set; } = GenerateHeaderOption.Sticky;
 
+    [Parameter]
+    public string? Class { get; set; }
+
     private async Task OnIsValueMaskedChanged(TItem item, bool isValueMasked)
     {
         item.IsValueMasked = isValueMasked;

src/Aspire.Dashboard/Components/Controls/ResourceDetails.razor

@@ -25,13 +25,14 @@
                               slot="end"/>
         }
 
-        <FluentIconSwitch @bind-Value="@_isMaskAllChecked"
+        <FluentIconSwitch @bind-Value="@IsMaskAllChecked"
                           Appearance="Appearance.Lightweight"
                           CheckedTitle="@ControlStringsLoc[nameof(ControlsStrings.EnvironmentVariablesShowVariableValues)]"
                           UncheckedTitle="@ControlStringsLoc[nameof(ControlsStrings.EnvironmentVariablesHideVariableValues)]"
                           OnToggle="@OnMaskAllCheckedChanged"
                           CheckedIcon="@(new Icons.Regular.Size16.Eye())"
                           UncheckedIcon="@(new Icons.Regular.Size16.EyeOff())"
+                          class="mask-all-switch"
                           slot="end" />
 
         <FluentSearch Placeholder="@ControlStringsLoc[nameof(ControlsStrings.FilterPlaceholder)]"
@@ -82,7 +83,8 @@
                     Items="@FilteredEnvironmentVariables"
                     IsValueMaskedChanged="@OnValueMaskedChanged"
                     HighlightText="@_filter"
-                    GridTemplateColumns="1fr 1.5fr" />
+                    GridTemplateColumns="1fr 1.5fr"
+                    Class="env-var-properties" />
             </FluentAccordionItem>
             @if (Resource.IsContainer())
             {

src/Aspire.Dashboard/Components/Controls/ResourceDetails.razor.cs

@@ -1,6 +1,7 @@
 // Licensed to the .NET Foundation under one or more agreements.
 // The .NET Foundation licenses this file to you under the MIT license.
 
+using System.Diagnostics;
 using Aspire.Dashboard.Model;
 using Google.Protobuf.WellKnownTypes;
 using Microsoft.AspNetCore.Components;
@@ -23,28 +24,29 @@ public partial class ResourceDetails
 
     private bool _showAll;
     private ResourceViewModel? _resource;
+    private readonly HashSet<string> _unmaskedItemNames = new();
 
-    private IQueryable<EnvironmentVariableViewModel> FilteredEnvironmentVariables =>
+    internal IQueryable<EnvironmentVariableViewModel> FilteredEnvironmentVariables =>
         Resource.Environment
             .Where(vm => (_showAll || vm.FromSpec) && ((IPropertyGridItem)vm).MatchesFilter(_filter))
             .AsQueryable();
 
-    private IQueryable<DisplayedEndpoint> FilteredEndpoints =>
+    internal IQueryable<DisplayedEndpoint> FilteredEndpoints =>
         GetEndpoints()
             .Where(vm => vm.MatchesFilter(_filter))
             .AsQueryable();
 
-    private IQueryable<VolumeViewModel> FilteredVolumes =>
+    internal IQueryable<VolumeViewModel> FilteredVolumes =>
         Resource.Volumes
             .Where(vm => vm.MatchesFilter(_filter))
             .AsQueryable();
 
-    private IQueryable<HealthReportViewModel> FilteredHealthReports =>
+    internal IQueryable<HealthReportViewModel> FilteredHealthReports =>
         Resource.HealthReports
             .Where(vm => vm.MatchesFilter(_filter))
             .AsQueryable();
 
-    private IQueryable<ResourcePropertyViewModel> FilteredResourceProperties =>
+    internal IQueryable<ResourcePropertyViewModel> FilteredResourceProperties =>
         GetResourceProperties(ordered: true)
             .Where(vm => (_showAll || vm.KnownProperty != null) && vm.MatchesFilter(_filter))
             .AsQueryable();
@@ -55,14 +57,27 @@ public partial class ResourceDetails
     private bool _isHealthChecksExpanded;
 
     private string _filter = "";
-    private bool _isMaskAllChecked = true;
+    private bool? _isMaskAllChecked;
+
+    private bool IsMaskAllChecked
+    {
+        get => _isMaskAllChecked ?? false;
+        set { _isMaskAllChecked = value; }
+    }
 
     private readonly GridSort<DisplayedEndpoint> _endpointValueSort = GridSort<DisplayedEndpoint>.ByAscending(vm => vm.Url ?? vm.Text);
 
     protected override void OnParametersSet()
     {
         if (!ReferenceEquals(Resource, _resource))
         {
+            // Reset masking when the resource changes.
+            if (!string.Equals(Resource.Name, _resource?.Name, StringComparisons.ResourceName))
+            {
+                _isMaskAllChecked = true;
+                _unmaskedItemNames.Clear();
+            }
+
             _resource = Resource;
 
             // Collapse details sections when they have no data.
@@ -73,7 +88,14 @@ protected override void OnParametersSet()
 
             foreach (var item in SensitiveGridItems)
             {
-                item.IsValueMasked = _isMaskAllChecked;
+                if (_isMaskAllChecked != null)
+                {
+                    item.IsValueMasked = _isMaskAllChecked.Value;
+                }
+                else if (_unmaskedItemNames.Count > 0)
+                {
+                    item.IsValueMasked = !_unmaskedItemNames.Contains(item.Name);
+                }
             }
         }
     }
@@ -95,25 +117,37 @@ private IEnumerable<ResourcePropertyViewModel> GetResourceProperties(bool ordere
 
     private void OnMaskAllCheckedChanged()
     {
+        Debug.Assert(_isMaskAllChecked != null);
+
+        _unmaskedItemNames.Clear();
+
         foreach (var vm in SensitiveGridItems)
         {
-            vm.IsValueMasked = _isMaskAllChecked;
+            vm.IsValueMasked = _isMaskAllChecked.Value;
         }
     }
 
-    private void OnValueMaskedChanged()
+    private void OnValueMaskedChanged(IPropertyGridItem vm)
     {
         // Check the "Mask All" checkbox if all sensitive values are masked.
-
-        foreach (var item in SensitiveGridItems)
+        var valueMaskedValues = SensitiveGridItems.Select(i => i.IsValueMasked).Distinct().ToList();
+        if (valueMaskedValues.Count == 1)
+        {
+            _isMaskAllChecked = valueMaskedValues[0];
+            _unmaskedItemNames.Clear();
+        }
+        else
         {
-            if (!item.IsValueMasked)
+            _isMaskAllChecked = null;
+
+            if (vm.IsValueMasked)
             {
-                _isMaskAllChecked = false;
-                return;
+                _unmaskedItemNames.Remove(vm.Name);
+            }
+            else
+            {
+                _unmaskedItemNames.Add(vm.Name);
             }
         }
-
-        _isMaskAllChecked = true;
     }
 }