Skip to content

Commit 38e13ea

Browse files
nkomonen-amazonnkomonen-amazon
authored
authWebview: Various small fixes (#3626)
* add alt attribute to gifs Signed-off-by: Nikolas Komonen <[email protected]> * remove subtext in credentials form Signed-off-by: Nikolas Komonen <[email protected]> * change webview tab name When the webview is open the tab has a specific name that shows in the vscode UI. Signed-off-by: Nikolas Komonen <[email protected]> * fix minor text issues Signed-off-by: Nikolas Komonen <[email protected]> * fix margins in the title section Signed-off-by: Nikolas Komonen <[email protected]> * 'Resource Explorer' -> 'AWS Explorer' Signed-off-by: Nikolas Komonen <[email protected]> * fix css coloring Now use the provided vscode vars for css values to work with all themese Signed-off-by: Nikolas Komonen <[email protected]> * codecatalyst custom builder id description adds a custom description for builder id when it is code catalyst Signed-off-by: Nikolas Komonen <[email protected]> * improve webview error messages - If the Configure Trusted Domains scenario pops up we want to tell users they should select 'Open' or 'Configure Trusted Domains' in the scenario they select 'Cancel' or 'Copy' - During Identity Center setup, if the user puts in a bad start url we try and catch that error and hint for them to verify their start url is valid Signed-off-by: Nikolas Komonen <[email protected]> * show status bar when auto detect credentials + first use Signed-off-by: Nikolas Komonen <[email protected]> --------- Signed-off-by: Nikolas Komonen <[email protected]>
1 parent 1985492 commit 38e13ea

15 files changed

+120
-55
lines changed

‎src/auth/sso/model.ts‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import { telemetry } from '../../shared/telemetry/telemetry'
1515
import { CancellationError } from '../../shared/utilities/timeoutUtils'
1616
import { ssoAuthHelpUrl } from '../../shared/constants'
1717
import { openUrl } from '../../shared/utilities/vsCodeUtils'
18+
import { ToolkitError } from '../../shared/errors'
1819

1920
export interface SsoToken {
2021
/**
@@ -76,6 +77,7 @@ export interface SsoProfile {
7677
}
7778

7879
export const builderIdStartUrl = 'https://view.awsapps.com/start'
80+
export const trustedDomainCancellation = 'TrustedDomainCancellation'
7981

8082
const tryOpenHelpUrl = (url: vscode.Uri) =>
8183
openUrl(url).catch(e => getLogger().verbose('auth: failed to open help URL: %s', e))
@@ -89,7 +91,14 @@ export async function openSsoPortalLink(
8991
getLogger().warn(`auth: failed to copy user code "${authorization.userCode}" to clipboard: %s`, err)
9092
})
9193

92-
return vscode.env.openExternal(vscode.Uri.parse(authorization.verificationUri))
94+
const didOpen = await vscode.env.openExternal(vscode.Uri.parse(authorization.verificationUri))
95+
if (!didOpen) {
96+
throw new ToolkitError(`User clicked 'Copy' or 'Cancel' during the Trusted Domain popup`, {
97+
code: trustedDomainCancellation,
98+
name: trustedDomainCancellation,
99+
})
100+
}
101+
return didOpen
93102
}
94103

95104
async function showLoginNotification() {

‎src/auth/ui/vue/authForms/manageBuilderId.vue‎

Lines changed: 19 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@
55

66
<div v-if="stage === 'START'">
77
<div class="form-section">
8-
<div style="color: #cccccc">
9-
With AWS Builder ID, sign in for free without an AWS account.
10-
<a :href="signUpUrl">Read more.</a>
8+
<div class="sub-text-color">
9+
{{ getDescription() }}
10+
<a :href="signUpUrl">Learn more.</a>
1111
</div>
1212
</div>
1313

@@ -25,7 +25,7 @@
2525

2626
<div v-if="stage === 'CONNECTED'">
2727
<div class="form-section">
28-
<div v-on:click="signout()" style="cursor: pointer; color: #75beff">Sign out</div>
28+
<div v-on:click="signout()" class="text-link-color" style="cursor: pointer">Sign out</div>
2929
</div>
3030

3131
<div class="form-section">
@@ -100,6 +100,9 @@ export default defineComponent({
100100
getSignUpUrl() {
101101
return this.state.getSignUpUrl()
102102
},
103+
getDescription() {
104+
return this.state.getDescription()
105+
},
103106
async updateSubmitButtonText() {
104107
if (!(await isBuilderIdConnected())) {
105108
this.submitButtonText = 'Sign up or Sign in'
@@ -142,6 +145,10 @@ abstract class BaseBuilderIdState implements AuthStatus {
142145
getSignUpUrl(): string {
143146
return 'https://docs.aws.amazon.com/signin/latest/userguide/sign-in-aws_builder_id.html'
144147
}
148+
149+
getDescription(): string {
150+
return 'With AWS Builder ID, sign in for free without an AWS account.'
151+
}
145152
}
146153
147154
export class CodeWhispererBuilderIdState extends BaseBuilderIdState {
@@ -202,6 +209,14 @@ export class CodeCatalystBuilderIdState extends BaseBuilderIdState {
202209
static get instance(): CodeCatalystBuilderIdState {
203210
return (this.#instance ??= new CodeCatalystBuilderIdState())
204211
}
212+
213+
override getDescription(): string {
214+
return 'You must have an existing CodeCatalyst Space connected to your AWS Builder ID.'
215+
}
216+
217+
override getSignUpUrl(): string {
218+
return 'https://aws.amazon.com/codecatalyst/'
219+
}
205220
}
206221
207222
/**

‎src/auth/ui/vue/authForms/manageCredentials.vue‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
<label class="small-description"
1818
>Credentials will be added to the appropriate `~/.aws/` files.</label
1919
>
20-
<div v-on:click="editCredentialsFile()" style="cursor: pointer; color: #cccccc">
20+
<div v-on:click="editCredentialsFile()" class="sub-text-color" style="cursor: pointer">
2121
<div class="icon icon-vscode-edit edit-icon"></div>
2222
Edit file directly
2323
</div>
@@ -32,14 +32,12 @@
3232

3333
<div class="form-section">
3434
<label class="input-title">Access Key</label>
35-
<label class="small-description">The access key</label>
3635
<input v-model="data.aws_access_key_id" :data-invalid="!!errors.aws_access_key_id" type="text" />
3736
<div class="small-description error-text">{{ errors.aws_access_key_id }}</div>
3837
</div>
3938

4039
<div class="form-section">
4140
<label class="input-title">Secret Key</label>
42-
<label class="small-description">The secret key</label>
4341
<input
4442
v-model="data.aws_secret_access_key"
4543
type="password"

‎src/auth/ui/vue/authForms/manageIdentityCenter.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
href="https://docs.aws.amazon.com/toolkit-for-vscode/latest/userguide/sso-credentials.html"
88
></a
99
></FormTitle>
10-
<div v-if="!isConnected" style="color: #cccccc">Successor to AWS Single Sign-on</div>
10+
<div v-if="!isConnected" class="sub-text-color">Successor to AWS Single Sign-on</div>
1111
</div>
1212
<div v-else>
1313
<!-- In this scenario we do not care about the active IC connection -->
@@ -17,7 +17,7 @@
1717
href="https://docs.aws.amazon.com/toolkit-for-vscode/latest/userguide/sso-credentials.html"
1818
></a
1919
></FormTitle>
20-
<div style="color: #cccccc">Successor to AWS Single Sign-on</div>
20+
<div style="color: var(--vscode-descriptionForeground)">Successor to AWS Single Sign-on</div>
2121
</div>
2222

2323
<div v-if="stage === 'START'">
@@ -34,7 +34,7 @@
3434

3535
<div v-on:click="getRegion()" style="display: flex; flex-direction: row; gap: 10px; cursor: pointer">
3636
<div class="icon icon-lg icon-vscode-edit edit-icon"></div>
37-
<div style="width: 100%; color: #cccccc">{{ data.region ? data.region : 'Not Selected' }}</div>
37+
<div style="width: 100%; font-weight: 700">{{ data.region ? data.region : 'Not Selected' }}</div>
3838
</div>
3939
</div>
4040

@@ -52,7 +52,7 @@
5252

5353
<div v-if="stage === 'CONNECTED'">
5454
<div class="form-section">
55-
<div v-on:click="signout()" style="cursor: pointer; color: #75beff">Sign out</div>
55+
<div v-on:click="signout()" class="text-link-color" style="cursor: pointer">Sign out</div>
5656
</div>
5757

5858
<div class="form-section">

‎src/auth/ui/vue/authForms/sharedAuthForms.css‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
display: flex;
33
flex-direction: column;
44
text-align: left;
5-
color: #ffffff;
5+
color: var(--vscode-foreground);
66

77
padding: 10px;
88
}
@@ -28,17 +28,15 @@
2828
.auth-form-title {
2929
font-size: 14px;
3030
font-weight: bold;
31-
color: #ffffff;
3231
}
3332

3433
.input-title {
3534
font-size: 12px;
36-
color: #ffffff;
3735
}
3836

3937
.small-description {
4038
font-size: 10px;
41-
color: #cccccc;
39+
color: var(--vscode-descriptionForeground);
4240
}
4341

4442
.edit-icon {

‎src/auth/ui/vue/authForms/types.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,6 @@ export const AuthFormDisplayName: Record<AuthFormId, string> = {
1616
builderIdCodeCatalyst: 'CodeCatalyst with AWS Builder ID',
1717
builderIdCodeWhisperer: 'CodeWhisperer with AWS Builder ID',
1818
identityCenterCodeWhisperer: 'CodeWhisperer with IAM Identity Center',
19-
identityCenterExplorer: 'Explorer with IAM Identity Center',
19+
identityCenterExplorer: 'AWS Explorer with IAM Identity Center',
2020
aggregateExplorer: '',
2121
} as const

‎src/auth/ui/vue/root.vue‎

Lines changed: 20 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -24,24 +24,23 @@
2424
display: flex;
2525
flex-direction: row;
2626
background-color: #28632b;
27-
color: #ffffff;
2827
padding: 10px;
2928
"
3029
>
31-
<div class="icon icon-lg icon-vscode-check"></div>
30+
<div class="icon icon-lg icon-vscode-check" style="color: #ffffff"></div>
3231
&nbsp; &nbsp;
33-
<div style="display: flex; flex-direction: row">
34-
Connected to&nbsp;<span style="font-weight: bold">{{ authFormDisplayName }}</span
32+
<div style="display: flex; flex-direction: row; color: #ffffff">
33+
Connected to&nbsp;<span style="font-weight: bold; color: #ffffff">{{ authFormDisplayName }}</span
3534
>! Switch between existing connections in the&nbsp;<a
3635
v-on:click="showConnectionQuickPick()"
37-
style="cursor: pointer"
36+
style="cursor: pointer; color: rgb(147, 196, 255)"
3837
>Toolkit panel</a
3938
>.
4039
</div>
4140
&nbsp;&nbsp;
4241
<div
4342
v-on:click="closeStatusBar"
44-
style="cursor: pointer"
43+
style="cursor: pointer; color: #ffffff"
4544
class="icon icon-lg icon-vscode-chrome-close"
4645
></div>
4746
</div>
@@ -54,23 +53,22 @@
5453
display: flex;
5554
flex-direction: row;
5655
background-color: #28632b;
57-
color: #ffffff;
5856
padding: 10px;
5957
"
6058
>
61-
<div class="icon icon-lg icon-vscode-check"></div>
59+
<div class="icon icon-lg icon-vscode-check" style="color: #ffffff"></div>
6260
&nbsp; &nbsp;
63-
<div style="display: flex; flex-direction: row">
64-
IAM Credential(s) detected, but not selected. Choose one in the&nbsp;<a
61+
<div style="display: flex; flex-direction: row; color: #ffffff">
62+
IAM Credential(s) detected. Select one in the&nbsp;<a
6563
v-on:click="showConnectionQuickPick()"
66-
style="cursor: pointer"
64+
style="cursor: pointer; color: rgb(147, 196, 255)"
6765
>Toolkit panel</a
6866
>.
6967
</div>
7068
&nbsp;&nbsp;
7169
<div
7270
v-on:click="closeFoundCredentialStatusBar()"
73-
style="cursor: pointer"
71+
style="cursor: pointer; color: #ffffff"
7472
class="icon icon-lg icon-vscode-chrome-close"
7573
></div>
7674
</div>
@@ -80,7 +78,7 @@
8078
<!-- Logo + Title -->
8179
<div>
8280
<div style="display: flex; justify-content: left; align-items: center; gap: 25px">
83-
<div style="fill: white">
81+
<div id="logo">
8482
<svg
8583
id="Layer_1"
8684
data-name="Layer 1"
@@ -103,8 +101,8 @@
103101
</svg>
104102
</div>
105103
<div>
106-
<h3>AWS Toolkit for VSCode</h3>
107-
<h1>Welcome & Getting Started</h1>
104+
<h3 style="margin-bottom: 0">AWS Toolkit for VS Code</h3>
105+
<h1 style="margin-top: 0">Welcome & Getting Started</h1>
108106
</div>
109107
</div>
110108
</div>
@@ -113,7 +111,7 @@
113111
<div class="flex-container">
114112
<div id="left-column">
115113
<div>
116-
<h1>Select a feature to begin</h1>
114+
<h2>Select a feature to begin</h2>
117115
<ul class="service-item-list" v-for="item in serviceItems">
118116
<ServiceItem
119117
:title="getServiceItemProps(item.id).title"
@@ -197,7 +195,6 @@ export default defineComponent({
197195
// This handles auth changes triggered outside of this webview.
198196
client.onDidConnectionUpdate(() => {
199197
this.updateServiceConnections()
200-
this.updateFoundCredentialButNotConnected()
201198
// This handles the edge case where we have selected a service item
202199
// and its content window is being shown. If there is an external
203200
// event that changes the state of this service (eg: disconnected)
@@ -345,7 +342,12 @@ export default defineComponent({
345342
* has not actively selected one.
346343
*/
347344
async updateFoundCredentialButNotConnected() {
348-
if ((await client.isCredentialExists()) && !(await client.isCredentialConnected())) {
345+
const isFirstUse = await client.isExtensionFirstUse()
346+
// Order these are called matters since isCredentialExists() pulls in local credentials
347+
const isCredentialConnected = await client.isCredentialConnected()
348+
const isCredentialExists = await client.isCredentialExists()
349+
350+
if (isFirstUse && (isCredentialConnected || isCredentialExists)) {
349351
this.foundCredentialButNotConnected = true
350352
} else {
351353
this.foundCredentialButNotConnected = false

‎src/auth/ui/vue/serviceItem.vue‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
<div class="service-item-title">
1717
{{ title }}
1818
</div>
19-
<div class="service-item-description">
19+
<div class="service-item-description sub-text-color">
2020
{{ description }}
2121
</div>
2222
</div>
@@ -128,15 +128,15 @@ export default defineComponent({
128128
129129
const staticServiceItemProps: Readonly<Record<ServiceItemId, { title: string; description: string }>> = {
130130
resourceExplorer: {
131-
title: 'Explorer: View, modify, and deploy AWS Resources',
131+
title: 'AWS Explorer: View, modify, and deploy AWS Resources',
132132
description: 'Work with S3, CloudWatch, and more.',
133133
},
134134
codewhisperer: {
135135
title: 'CodeWhisperer: AI-powered code suggestions',
136136
description: 'Build applications faster with your AI coding companion.',
137137
},
138138
codecatalyst: {
139-
title: 'CodeCatalytst: Launch Cloud-based Dev Environments',
139+
title: 'CodeCatalyst: Launch cloud-based Dev Environments',
140140
description: 'Spark a faster planning, development, and delivery lifecycle on AWS.',
141141
},
142142
}
@@ -226,7 +226,7 @@ export class ServiceItemsState {
226226
/* ******** Container ******** */
227227
228228
.service-item-container {
229-
background-color: #292929;
229+
background-color: var(--vscode-sideBar-background);
230230
display: flex;
231231
margin-top: 10px;
232232
padding: 20px 15px 20px 15px;
@@ -241,8 +241,8 @@ export class ServiceItemsState {
241241
242242
/* When a service item was clicked */
243243
.service-item-container-selected {
244-
background-color: #3c3c3c;
245-
border-color: #0097fb;
244+
background-color: var(--vscode-sideBar-border);
245+
border-color: var(--vscode-button-background);
246246
}
247247
248248
/* ******** Icon ******** */
@@ -253,18 +253,17 @@ export class ServiceItemsState {
253253
254254
/* The checkmark symbol */
255255
.unlocked {
256-
color: #73c991;
256+
color: var(--vscode-charts-green);
257257
}
258258
259259
/* The lock symbol but the user has clicked it */
260260
.locked-selected {
261-
color: #0097fb;
261+
color: var(--vscode-button-background);
262262
}
263263
264264
/* ******** Text ******** */
265265
266266
.service-item-title {
267-
color: #ffffff;
268267
font-size: 13px;
269268
font-weight: 800;
270269
font-family: 'Verdana';
@@ -274,7 +273,6 @@ export class ServiceItemsState {
274273
}
275274
276275
.service-item-description {
277-
color: #cccccc;
278276
font-size: 12px;
279277
font-weight: 500;
280278
font-family: 'Verdana';

‎src/auth/ui/vue/serviceItemContent/awsExplorerContent.vue‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
<template>
22
<div class="service-item-content-container border-common" v-show="isAllAuthsLoaded">
3-
<div class="service-item-content-container-title">Resource Explorer</div>
3+
<div class="service-item-content-container-title">AWS Explorer</div>
44

55
<div class="centered-items">
66
<img
77
class="service-item-content-image"
88
src="https://github.com/aws/aws-toolkit-vscode/raw/HEAD/docs/marketplace/vscode/S3.gif"
9+
alt="AWS Explorer example GIF"
910
/>
1011
</div>
1112

@@ -16,7 +17,7 @@
1617

1718
<div>
1819
<a href="https://docs.aws.amazon.com/toolkit-for-vscode/latest/userguide/toolkit-navigation.html"
19-
>Learn more about the Resource Explorer.</a
20+
>Learn more about the AWS Explorer.</a
2021
>
2122
</div>
2223

0 commit comments

Comments
 (0)