Skip to content

fix(vscode): add 'Fix Creation Failed' state and improve UI elements #2576

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jun 20, 2025
Merged

fix(vscode): add 'Fix Creation Failed' state and improve UI elements #2576

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 17 additions & 0 deletions libs/vscode/nx-cloud-fix-webview/src/nx-cloud-fix-component.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -188,6 +188,23 @@ export const InProgress: Story = {
},
};

export const FixCreationFailed: Story = {
args: {
details: {
...mockDetails,
runGroup: {
...mockDetails.runGroup,
aiFix: {
...mockDetails.runGroup.aiFix!,
validationStatus: 'FAILED',
suggestedFix: undefined,
suggestedFixDescription: undefined,
},
},
},
},
};

export const NoTerminalOutput: Story = {
args: {
details: {
Expand Down
69 changes: 41 additions & 28 deletions libs/vscode/nx-cloud-fix-webview/src/nx-cloud-fix-component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,6 +117,11 @@ export class NxCloudFixComponent extends LitElement {
flex-shrink: 0;
}

.cipe-link {
cursor: pointer;
color: var(--vscode-button-primaryForeground);
}

.branch-badge {
background-color: var(--vscode-button-secondaryBackground);
color: var(--vscode-button-secondaryForeground);
Expand Down Expand Up @@ -649,6 +654,8 @@ export class NxCloudFixComponent extends LitElement {
}

.loading-dots {
width: 24px;
text-align: left;
display: inline-block;
}

Expand Down Expand Up @@ -741,7 +748,7 @@ export class NxCloudFixComponent extends LitElement {
<p class="explanation-text" style="margin-top: 8px;">
You can
<span class="diff-link" @click="${() => this.handleShowDiff()}">
review the resulting git diff of the suggested changes </span
review the resulting git diff of the suggested changes</span
>&nbsp;and choose to apply or reject them.
</p>
</div>
Expand Down Expand Up @@ -786,6 +793,14 @@ export class NxCloudFixComponent extends LitElement {
></path>
</svg>
Nx Cloud AI Fix
<a
class="cipe-link"
target="_blank"
href="${cipe.cipeUrl}"
title="View CI Pipeline Execution"
>
<icon-element icon="link-external"></icon-element>
</a>
</h1>
<div class="branch-badge">
<icon-element icon="git-branch"></icon-element>
Expand Down Expand Up @@ -861,19 +876,7 @@ export class NxCloudFixComponent extends LitElement {
return html`
<div class="creating-fix-section">
<div class="creating-fix-icon">
<svg
class="codicon-modifier-spin"
role="img"
xmlns="http://www.w3.org/2000/svg"
stroke="currentColor"
fill="none"
stroke-width="2"
viewBox="0 0 24 24"
>
<path
d="M12 2v4m0 12v4m10-10h-4M6 12H2m15.364-6.364l-2.828 2.828M9.464 14.536l-2.828 2.828m12.728 0l-2.828-2.828M9.464 9.464L6.636 6.636"
/>
</svg>
<i class="codicon codicon-loading codicon-modifier-spin"></i>
</div>
<h2 class="creating-fix-title">
Creating Fix<span class="loading-dots"></span>
Expand Down Expand Up @@ -971,30 +974,40 @@ export class NxCloudFixComponent extends LitElement {
}

private getStatusSection(aiFix: NxAiFix): TemplateResult {
if (!aiFix.suggestedFix) {
const hasAiFix = !!aiFix.suggestedFix;

if (!hasAiFix && aiFix.validationStatus === 'NOT_STARTED') {
// Show creating fix state
return this.getCreatingFixSection();
}

// if the fix creation failed, show the proper error state
if (!hasAiFix && aiFix.validationStatus === 'FAILED') {
return html`
<div class="creating-fix-section">
<div class="creating-fix-icon">
<i
class="codicon codicon-error"
style="color: var(--error-color);"
></i>
</div>
<h2 class="creating-fix-title">Fix Creation Failed</h2>
<p class="creating-fix-description">
Nx Cloud was unable to generate a fix for the error. You can try
running the task again or investigate the issue manually on the Nx
Cloud UI
</p>
</div>
`;
}

// Fix exists, show verification status
switch (aiFix.validationStatus) {
case 'IN_PROGRESS':
return html`
<div class="creating-fix-section">
<div class="creating-fix-icon">
<svg
class="codicon-modifier-spin"
role="img"
xmlns="http://www.w3.org/2000/svg"
stroke="currentColor"
fill="none"
stroke-width="2"
viewBox="0 0 24 24"
>
<path
d="M12 2v4m0 12v4m10-10h-4M6 12H2m15.364-6.364l-2.828 2.828M9.464 14.536l-2.828 2.828m12.728 0l-2.828-2.828M9.464 9.464L6.636 6.636"
/>
</svg>
<i class="codicon codicon-loading codicon-modifier-spin"></i>
</div>
<h2 class="creating-fix-title">
Verifying Fix<span class="loading-dots"></span>
Expand Down
1 change: 1 addition & 0 deletions libs/vscode/nx-cloud-view/src/nx-cloud-fix-webview.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -151,6 +151,7 @@ export class NxCloudFixWebview {
'nxCloud.applyAiFixLocally',
this.currentFixDetails,
);
this.webviewPanel?.dispose();
break;
}
}
Expand Down
Loading