Skip to content

Commit a249cd1

Browse files
CopilotIEvangelist
Copilot
and
IEvangelist
authored
Replace Tabs with OsAwareTabs for terminal commands using named slots (#123)
* Initial plan * Replace all Tabs with syncKey="terminal" with OsAwareTabs component Co-authored-by: IEvangelist <7679720+IEvangelist@users.noreply.github.com> * Update OsAwareTabs to use named slots and reduce code duplication Co-authored-by: IEvangelist <7679720+IEvangelist@users.noreply.github.com> * refactor: replace Fragment with div in OsAwareTabs usage for improved readability --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: IEvangelist <7679720+IEvangelist@users.noreply.github.com> Co-authored-by: David Pine <david.pine@microsoft.com>
1 parent e5d23cd commit a249cd1

16 files changed

Lines changed: 239 additions & 225 deletions

‎src/frontend/src/components/InstallAspireCLI.astro‎

Lines changed: 28 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,50 @@
11
---
2-
import { Code, Steps, Tabs, TabItem } from '@astrojs/starlight/components';
2+
import { Code, Steps } from '@astrojs/starlight/components';
3+
import OsAwareTabs from '@components/OsAwareTabs.astro';
34
import AsciinemaPlayer from '@components/AsciinemaPlayer.astro';
45
---
56

67
<Steps>
78
<ol>
89
<li>
910
<p>{Astro.locals.t('aspire.installCli')}</p>
10-
11-
<Tabs syncKey="terminal">
12-
<TabItem label="Bash" icon="seti:shell">
13-
<Code
14-
lang="bash"
15-
title={Astro.locals.t('aspire.installCliGlobally')}
16-
code="curl -sSL https://aspire.dev/install.sh | bash"
11+
<OsAwareTabs syncKey="terminal">
12+
<Code
13+
lang="bash"
14+
slot="unix"
15+
title={Astro.locals.t("aspire.installCliGlobally")}
16+
code="curl -sSL https://aspire.dev/install.sh | bash"
1717
/>
18-
</TabItem>
19-
<TabItem label="PowerShell" icon="seti:powershell">
20-
<Code
21-
lang="powershell"
22-
title={Astro.locals.t('aspire.installCliGlobally')}
23-
code="irm https://aspire.dev/install.ps1 | iex"
18+
<Code
19+
lang="powershell"
20+
slot="windows"
21+
title={Astro.locals.t("aspire.installCliGlobally")}
22+
code="irm https://aspire.dev/install.ps1 | iex"
2423
/>
25-
</TabItem>
26-
</Tabs>
24+
</OsAwareTabs>
2725
</li>
2826
<li>
29-
<p>{Astro.locals.t('aspire.verifyInstallation')}</p>
30-
31-
<Tabs syncKey="terminal">
32-
<TabItem label="Bash" icon="seti:shell">
33-
<Code lang="bash" title={Astro.locals.t('aspire.checkVersion')} code="aspire --version" />
34-
</TabItem>
35-
<TabItem label="PowerShell" icon="seti:powershell">
36-
<Code
37-
lang="powershell"
38-
title={Astro.locals.t('aspire.checkVersion')}
39-
code="aspire --version"
27+
<p>{Astro.locals.t("aspire.verifyInstallation")}</p>
28+
<OsAwareTabs syncKey="terminal">
29+
<Code
30+
lang="bash"
31+
slot="unix"
32+
title={Astro.locals.t("aspire.checkVersion")}
33+
code="aspire --version"
4034
/>
41-
</TabItem>
42-
</Tabs>
43-
35+
<Code
36+
lang="powershell"
37+
slot="windows"
38+
title={Astro.locals.t("aspire.checkVersion")}
39+
code="aspire --version"
40+
/>
41+
</OsAwareTabs>
4442
<p>{Astro.locals.t('aspire.verifyInstallationText')}</p>
4543
</li>
4644
<li>
4745
<p>
4846
{Astro.locals.t('aspire.helpCommand')}
4947
</p>
50-
5148
<AsciinemaPlayer src="/casts/aspire-help.cast" poster="npt:0:03" rows="21" />
5249
</li>
5350
</ol>

‎src/frontend/src/components/OsAwareTabs.astro‎

Lines changed: 17 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
import { Tabs } from "@astrojs/starlight/components";
2+
import { Tabs, TabItem } from "@astrojs/starlight/components";
33
44
interface Props {
55
syncKey?: string;
@@ -9,10 +9,15 @@ const { syncKey } = Astro.props;
99
---
1010

1111
<Tabs syncKey={syncKey}>
12-
<slot />
12+
<TabItem label="Bash" icon="seti:shell">
13+
<slot name="unix" />
14+
</TabItem>
15+
<TabItem label="PowerShell" icon="seti:powershell">
16+
<slot name="windows" />
17+
</TabItem>
1318
</Tabs>
1419

15-
{syncKey && <script define:vars={{ syncKey }}>
20+
{syncKey && <script is:inline define:vars={{ syncKey }}>
1621
// OS-aware tab selection - only runs once per syncKey on initial page load
1722
(function() {
1823
// Check if localStorage is available
@@ -28,11 +33,16 @@ const { syncKey } = Astro.props;
2833
// Check userAgentData.platform first (modern), then navigator.platform, then userAgent
2934
let isWindows = false;
3035

31-
if (navigator.userAgentData?.platform) {
32-
isWindows = /windows/i.test(navigator.userAgentData.platform);
33-
} else if (navigator.platform) {
36+
// Check modern API first
37+
const platform = navigator.userAgentData?.platform;
38+
if (platform) {
39+
isWindows = /windows/i.test(platform);
40+
}
41+
// Fallback to legacy APIs
42+
else if (typeof navigator.platform === 'string') {
3443
isWindows = /^Win/i.test(navigator.platform);
35-
} else if (navigator.userAgent) {
44+
}
45+
else if (typeof navigator.userAgent === 'string') {
3646
isWindows = /Win(dows|32|64)/i.test(navigator.userAgent);
3747
}
3848

‎src/frontend/src/content/docs/dashboard/configuration.mdx‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@ title: Aspire dashboard configuration
33
description: Aspire dashboard configuration options
44
---
55

6-
import { Aside, Tabs, TabItem } from '@astrojs/starlight/components';
6+
import { Aside } from '@astrojs/starlight/components';
7+
import OsAwareTabs from '@components/OsAwareTabs.astro';
78
import LearnMore from '@components/LearnMore.astro';
89

910
The dashboard is configured when it starts up. Configuration includes frontend and OpenTelemetry Protocol (OTLP) addresses, the resource service endpoint, authentication, telemetry limits, and more.
@@ -18,8 +19,8 @@ There are many ways to provide configuration:
1819

1920
Consider the following example, which shows how to configure the dashboard when started from a Docker container:
2021

21-
<Tabs syncKey="terminal">
22-
<TabItem label="Bash" icon="seti:shell">
22+
<OsAwareTabs syncKey="terminal">
23+
<div slot="unix">
2324

2425
```bash
2526
docker run --rm -it -p 18888:18888 -p 4317:18889 -d --name aspire-dashboard \
@@ -29,8 +30,8 @@ docker run --rm -it -p 18888:18888 -p 4317:18889 -d --name aspire-dashboard \
2930
mcr.microsoft.com/dotnet/aspire-dashboard:latest
3031
```
3132

32-
</TabItem>
33-
<TabItem label="PowerShell"icon="seti:powershell">
33+
</div>
34+
<div slot="windows">
3435

3536
```powershell
3637
docker run --rm -it -p 18888:18888 -p 4317:18889 -d --name aspire-dashboard `
@@ -40,8 +41,8 @@ docker run --rm -it -p 18888:18888 -p 4317:18889 -d --name aspire-dashboard `
4041
mcr.microsoft.com/dotnet/aspire-dashboard:latest
4142
```
4243

43-
</TabItem>
44-
</Tabs>
44+
</div>
45+
</OsAwareTabs>
4546

4647
Alternatively, these same values could be configured using a JSON configuration file that is specified using `ASPIRE_DASHBOARD_CONFIG_FILE_PATH`:
4748

‎src/frontend/src/content/docs/dashboard/enable-browser-telemetry.mdx‎

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@ description: Learn how to enable browser telemetry in the Aspire dashboard.
44
---
55

66
import LearnMore from '@components/LearnMore.astro';
7-
import { Aside, Tabs, TabItem } from '@astrojs/starlight/components';
7+
import { Aside } from '@astrojs/starlight/components';
8+
import OsAwareTabs from '@components/OsAwareTabs.astro';
89

910
The Aspire dashboard can be configured to receive telemetry sent from browser apps. This feature is useful for monitoring client-side performance and user interactions. Browser telemetry requires additional dashboard configuration and that the [JavaScript OTEL SDK](https://opentelemetry.io/docs/languages/js/getting-started/browser/) is added to the browser apps.
1011

@@ -86,8 +87,8 @@ The preceding launch settings JSON file configures all profiles to include the `
8687

8788
If the dashboard is used standalone, without the rest of Aspire, the OTLP HTTP endpoint is enabled by default on port `18890`. However, the port must be mapped when the dashboard container is started:
8889

89-
<Tabs syncKey="terminal">
90-
<TabItem label="Bash" icon="seti:shell">
90+
<OsAwareTabs syncKey="terminal">
91+
<div slot="unix">
9192

9293
```bash
9394
docker run --rm -it -d \
@@ -98,8 +99,8 @@ docker run --rm -it -d \
9899
mcr.microsoft.com/dotnet/aspire-dashboard:latest
99100
```
100101

101-
</TabItem>
102-
<TabItem label="PowerShell" icon="seti:powershell">
102+
</div>
103+
<div slot="windows">
103104

104105
```powershell
105106
docker run --rm -it -d `
@@ -110,8 +111,8 @@ docker run --rm -it -d `
110111
mcr.microsoft.com/dotnet/aspire-dashboard:latest
111112
```
112113

113-
</TabItem>
114-
</Tabs>
114+
</div>
115+
</OsAwareTabs>
115116

116117
The preceding command runs the dashboard container and maps gRPC OTLP to port `4317` and HTTP OTLP to port `4318`.
117118

@@ -123,8 +124,8 @@ If the dashboard and your app are started by the AppHost, no CORS configuration
123124

124125
If the dashboard is used standlone then CORS must be configured manually. The domain used to view the browser app must be configured as an allowed origin by specifing the `DASHBOARD__OTLP__CORS__ALLOWEDORIGINS` environment variable when the dashboard container is started.
125126

126-
<Tabs syncKey="terminal">
127-
<TabItem label="Bash" icon="seti:shell">
127+
<OsAwareTabs syncKey="terminal">
128+
<div slot="unix">
128129

129130
```bash
130131
docker run --rm -it -d \
@@ -136,8 +137,8 @@ docker run --rm -it -d \
136137
mcr.microsoft.com/dotnet/aspire-dashboard:latest
137138
```
138139

139-
</TabItem>
140-
<TabItem label="PowerShell" icon="seti:powershell">
140+
</div>
141+
<div slot="windows">
141142

142143
```powershell
143144
docker run --rm -it -d `
@@ -149,8 +150,8 @@ docker run --rm -it -d `
149150
mcr.microsoft.com/dotnet/aspire-dashboard:latest
150151
```
151152

152-
</TabItem>
153-
</Tabs>
153+
</div>
154+
</OsAwareTabs>
154155

155156
The preceding command runs the dashboard container and configures `https://localhost:8080` as an allowed origin. That means a browser app that is accessed using `https://localhost:8080` has permission to send the dashboard telemetry.
156157

‎src/frontend/src/content/docs/dashboard/explore.mdx‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@ description: Explore the Aspire dashboard features through the Aspire Starter ap
44
---
55

66
import { Image } from 'astro:assets';
7-
import { Aside, Steps, Tabs, TabItem } from '@astrojs/starlight/components';
7+
import { Aside, Steps } from '@astrojs/starlight/components';
8+
import OsAwareTabs from '@components/OsAwareTabs.astro';
89
import { Kbd } from 'starlight-kbd/components'
910

1011
import LearnMore from '@components/LearnMore.astro';
@@ -441,22 +442,22 @@ When using `Microsoft.Extensions.AI` (`IChatClient` and related abstractions), y
441442

442443
Many OpenTelemetry libraries support the `OTEL_INSTRUMENTATION_GENAI_CAPTURE_MESSAGE_CONTENT` environment variable to enable message content capture. Set this environment variable to `true`:
443444

444-
<Tabs syncKey="terminal">
445-
<TabItem label="Bash" icon="seti:shell">
445+
<OsAwareTabs syncKey="terminal">
446+
<div slot="unix">
446447

447448
```bash
448449
OTEL_INSTRUMENTATION_GENAI_CAPTURE_MESSAGE_CONTENT=true
449450
```
450451

451-
</TabItem>
452-
<TabItem label="PowerShell" icon="seti:powershell">
452+
</div>
453+
<div slot="windows">
453454

454455
```powershell
455456
$env:OTEL_INSTRUMENTATION_GENAI_CAPTURE_MESSAGE_CONTENT="true"
456457
```
457458

458-
</TabItem>
459-
</Tabs>
459+
</div>
460+
</OsAwareTabs>
460461

461462
You can set this environment variable in your application's configuration, in your development environment, or in your deployment settings.
462463

‎src/frontend/src/content/docs/dashboard/microsoft-collected-dashboard-telemetry.mdx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ title: Microsoft-collected dashboard telemetry
33
description: Learn about what telemetry the Aspire dashboard sends and how to opt out.
44
---
55

6-
import { Tabs, TabItem } from '@astrojs/starlight/components';
6+
import OsAwareTabs from '@components/OsAwareTabs.astro';
77

88
The Aspire dashboard collects diagnostic data to help developers monitor and analyze their applications. Separately, when the dashboard is launched through Visual Studio or Visual Studio Code as part of a running Aspire application, Microsoft collects usage data about the dashboard itself. This data helps the Aspire team improve the product. Additionally, unhandled exception details from the dashboard are sent to Microsoft to assist in identifying and resolving issues.
99

@@ -20,22 +20,22 @@ Starting with Aspire 9.3, dashboard usage telemetry is enabled by default. Dashb
2020

2121
To opt-out of telemetry collection, set the `ASPIRE_DASHBOARD_TELEMETRY_OPTOUT` environment variable to `true`. This will apply to all users accessing the Aspire dashboard:
2222

23-
<Tabs syncKey="terminal">
24-
<TabItem label="Bash" icon="seti:shell">
23+
<OsAwareTabs syncKey="terminal">
24+
<div slot="unix">
2525

2626
```bash
2727
export ASPIRE_DASHBOARD_TELEMETRY_OPTOUT=true
2828
```
2929

30-
</TabItem>
31-
<TabItem label="PowerShell" icon="seti:powershell">
30+
</div>
31+
<div slot="windows">
3232

3333
```powershell
3434
$env:ASPIRE_DASHBOARD_TELEMETRY_OPTOUT= "true"
3535
```
3636

37-
</TabItem>
38-
</Tabs>
37+
</div>
38+
</OsAwareTabs>
3939

4040
Alternatively, you can opt-out of telemetry collection by disabling telemetry collection in the host IDE. Learn how to opt out in Visual Studio or Visual Studio Code.
4141

‎src/frontend/src/content/docs/dashboard/overview.mdx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ description: Overview of Aspire dashboard and getting started.
44
---
55

66
import { Image } from 'astro:assets';
7-
import { Tabs, TabItem } from '@astrojs/starlight/components';
7+
import OsAwareTabs from '@components/OsAwareTabs.astro';
88
import ThemeImage from '@components/ThemeImage.astro';
99
import projectsImage from '@assets/dashboard/explore/projects.png';
1010
import architectureDiagramDark from '@assets/dashboard/architecture-diagram-dark.svg';
@@ -33,24 +33,24 @@ For more information about using the dashboard during Aspire development, see [E
3333

3434
The Aspire dashboard is also shipped as a Docker image and can be used standalone, without the rest of Aspire. The standalone dashboard provides a great UI for viewing telemetry and can be used by any application.
3535

36-
<Tabs syncKey="terminal">
37-
<TabItem label="Bash" icon="seti:shell">
36+
<OsAwareTabs syncKey="terminal">
37+
<div slot="unix">
3838

3939
```bash
4040
docker run --rm -it -p 18888:18888 -p 4317:18889 -d --name aspire-dashboard \
4141
mcr.microsoft.com/dotnet/aspire-dashboard:latest
4242
```
4343

44-
</TabItem>
45-
<TabItem label="PowerShell" icon="seti:powershell">
44+
</div>
45+
<div slot="windows">
4646

4747
```powershell
4848
docker run --rm -it -p 18888:18888 -p 4317:18889 -d --name aspire-dashboard `
4949
mcr.microsoft.com/dotnet/aspire-dashboard:latest
5050
```
5151

52-
</TabItem>
53-
</Tabs>
52+
</div>
53+
</OsAwareTabs>
5454

5555
The preceding Docker command:
5656

0 commit comments

Comments
 (0)