ASPNETCORE_ENVIRONMENT : QA in launchSettings.json causes FluentAppBar display imporperly

[billylovancouver]

🐛 Bug Report

If I change the ASPNETCORE_ENVIRONMENT variable from Development to QA in launchSettings.json, the layout of the FluentAppBar would should double icons in each FluentAppBarItem for some reason. I don't have any conditional logic in my Program. Cs to detect the environment yet. It looks like the FluentAppBar has some hard code logic only work in Development environment.

💻 Repro or Code Sample

1. Create a Fluent Blazor Web App using Fluent Blazor Web App template in VS2022.
2. Add FluentAppBar to MainLayout.razor so that it allow users to navigate to different pages
3. Make sure it run and work
4. Go to change the ASPNETCORE_ENVIRONMENT variable from Development to QA in launchSettings.json
5. Run the App again

🤔 Expected Behavior

It should work as the same way as ASPNETCORE_ENVIRONMENT = Development. The FluentAppBar should show properly in the same way as before.

Nothing is using the ASPNETCORE_ENVIRONMENT to make decision at this point

😯 Current Behavior

It shows the FluentAppBar with double icon, one is of Active Color and one is of Normal color, in each FluentAppBarItem

I guess the FluentAppBar may have some hard code UI logic only work in Development Environment.

It shows instead of

💁 Possible Solution

🔦 Context

🌍 Your Environment

• OS : Windows 11
• Browser : Microsoft Edge, Google Chrome
• .NET 8.0 and Fluent UI Blazor library Version 4.5.1-preview)

[vnbaaij]

That is really weird. There is nothing hard oded to the environment. Only thing it does is using some isolated CSS classes to set display status based on an Icon's state (hover, not hover).

Can you verify if the generated library css is the same on the two environments?

[billylovancouver]

Hi Vincent, Thank you very much for your help! It is very weird. When I change back the ASPNETCORE_ENVIRONMENT variable from QA to Development, it works again. However, when I change it to QA, it doesn't work. You can also reproduce it by following my above steps.

[vnbaaij]

Sorry, but I can't reproduce it. Image shows app running from VS with the dialog showing what is in launchSettings

[billylovancouver]

Hi Vincent,

Can you try directly modifying the lanuchSettings.json under the Properties folder of your Project? It is highly reproducible.

Here is the code I used to add the AppBar to the MainLayout.razor right after the project creation by VS2022.

<FluentLayout>
    <FluentHeader>
        TestApp
    </FluentHeader>
    <FluentStack Class="main" Orientation="Orientation.Horizontal" Width="100%">        
        <FluentAppBar Style="height: 100%; background-color: var(--neutral-layer-2);" PopoverVisibilityChanged="HandlePopover" PopoverShowSearch="@_showSearch">

            <FluentAppBarItem Href="/AppBarDefault"
                              Match="NavLinkMatch.All"
                              IconRest="ResourcesIcon()"
                              IconActive="ResourcesIcon(active: true)"
                              Text="Resources" />
            <FluentAppBarItem Href="/AppBar"
                              IconRest="ConsoleLogsIcon()"
                              IconActive="ConsoleLogsIcon(active: true)"
                              Text="Console Logs" />

            <FluentAppBarItem Href="/StructuredLogs"
                              IconRest="StructuredLogsIcon()"
                              IconActive="StructuredLogsIcon(active: true)"
                              Text="Structured Logs" />
            <FluentAppBarItem Href="/Traces"
                              IconRest="TracesIcon()"
                              IconActive="TracesIcon(active: true)"
                              Text="Traces" />

        </FluentAppBar>
        <FluentBodyContent Class="body-content">
            <div class="content">
                @Body
            </div>
        </FluentBodyContent>
    </FluentStack>    
</FluentLayout>
<div id="blazor-error-ui">
    An unhandled error has occurred.
    <a href="" class="reload">Reload</a>
    <a class="dismiss">🗙</a>
</div>

@code {

    private bool _showSearch = true;

    private static Icon ResourcesIcon(bool active = false) =>
        active ? new Icons.Filled.Size24.AppFolder()
               : new Icons.Regular.Size24.AppFolder();

    private static Icon ConsoleLogsIcon(bool active = false) =>
        active ? new Icons.Filled.Size24.SlideText()
               : new Icons.Regular.Size24.SlideText();

    private static Icon StructuredLogsIcon(bool active = false) =>
        active ? new Icons.Filled.Size24.SlideTextSparkle()
               : new Icons.Regular.Size24.SlideTextSparkle();

    private static Icon TracesIcon(bool active = false) =>
        active ? new Icons.Filled.Size24.GanttChart()
               : new Icons.Regular.Size24.GanttChart();

    private static Icon MetricsIcon(bool active = false) =>
        active ? new Icons.Filled.Size24.ChartMultiple()
               : new Icons.Regular.Size24.ChartMultiple();

    private void HandlePopover(bool visible) => Console.WriteLine($"Popover visibility changed to {visible}");
}

Please also make sure you Save the change rather than using hot reload, then when you rerun the project, it will show

It is highly reproducible for me.

[vnbaaij]

Did you close the issue by accident? Or did you solve it?

ps the value shown in the dialog comes from changing the launchSettings.json file

[billylovancouver]

Sorry! Closed it by accident.

[billylovancouver]

Thank Vincent!

[vnbaaij]

Ok, not a library bug...See https://learn.microsoft.com/en-us/aspnet/core/blazor/fundamentals/static-files?view=aspnetcore-8.0#static-files-in-non-development-environments

Because your deviating from the standards, you need to make a change in Program.cs. After line 4 add:

builder.WebHost.UseStaticWebAssets();

and it all starts working again.

[billylovancouver]

Wow! It works! Thank you so much for your help, Vincent!