fix(cloudformation): Hide deployment button when change set is not CR… (#8338)

…EATE_COMPLETE and add delete button for CREATE_FAILED change sets

## Problem
- The "Deploy Changes" button is present when viewing a change set even
if the change set does not have CREATE_COMPLETE status
- Additionally, the "Delete Changeset" button is not present when no
changes are detected in the change set

## Solution
- Added logic to check if the change set has CREATE_COMPLETE status
before enabling the deploy changes button
- Added the "Delete Changeset" button for the view when no changes are
detected
- Additionally, upon pressing the "Delete Changeset" button on the "no
changes are detected" view, the button disappears to prevent additional
delete attempts

---

- Treat all work as PUBLIC. Private `feature/x` branches will not be
squash-merged at release time.
- Your code changes must meet the guidelines in
[CONTRIBUTING.md](https://github.com/aws/aws-toolkit-vscode/blob/master/CONTRIBUTING.md#guidelines).
- License: I confirm that my contribution is made under the terms of the
Apache 2.0 license.

Author: chrisqm-dev

packages/core/src/awsService/cloudformation/commands/cfnCommands.ts

@@ -135,7 +135,8 @@ export function viewChangeSetCommand(client: LanguageClient, diffProvider: DiffW
                 params.changeSetName,
                 true,
                 [],
-                describeChangeSetResult.deploymentMode
+                describeChangeSetResult.deploymentMode,
+                describeChangeSetResult.status
             )
             void commands.executeCommand(commandKey('diff.focus'))
         } catch (error) {
@@ -483,7 +484,7 @@ async function changeSetSteps(
     try {
         environmentFile = await environmentManager.selectEnvironmentFile(templateUri, paramDefinition)
     } catch (error) {
-        getLogger().warn(`Failed to select environment file:: ${extractErrorMessage(error)}`)
+        getLogger().warn(`Failed to select environment file: ${extractErrorMessage(error)}`)
     }
 
     if (paramDefinition.length > 0) {

packages/core/src/awsService/cloudformation/stacks/actions/validationWorkflow.ts

@@ -4,7 +4,7 @@
  */
 
 import { v4 as uuidv4 } from 'uuid'
-import { Parameter, Capability } from '@aws-sdk/client-cloudformation'
+import { Parameter, Capability, ChangeSetStatus } from '@aws-sdk/client-cloudformation'
 import {
     StackActionPhase,
     StackChange,
@@ -163,7 +163,8 @@ export class Validation {
             this.changeSetName,
             this.shouldEnableDeployment,
             validationDetail,
-            deploymentMode
+            deploymentMode,
+            ChangeSetStatus.CREATE_COMPLETE
         )
         void commands.executeCommand(commandKey('diff.focus'))
     }

packages/core/src/awsService/cloudformation/ui/diffWebviewProvider.ts

@@ -9,6 +9,7 @@ import { DiffViewHelper } from './diffViewHelper'
 import { commandKey } from '../utils'
 import { StackViewCoordinator } from './stackViewCoordinator'
 import { showWarningConfirmation } from './message'
+import { ChangeSetStatus } from '@aws-sdk/client-cloudformation'
 
 const webviewCommandOpenDiff = 'openDiff'
 
@@ -24,6 +25,7 @@ export class DiffWebviewProvider implements WebviewViewProvider, Disposable {
     private readonly disposables: Disposable[] = []
     private validationDetail: ValidationDetail[] = []
     private deploymentMode?: DeploymentMode
+    private changeSetStatus?: string
 
     constructor(private readonly coordinator: StackViewCoordinator) {
         this.disposables.push(
@@ -46,7 +48,8 @@ export class DiffWebviewProvider implements WebviewViewProvider, Disposable {
         changeSetName?: string,
         enableDeployments = false,
         validationDetail?: ValidationDetail[],
-        deploymentMode?: DeploymentMode
+        deploymentMode?: DeploymentMode,
+        changeSetStatus?: string
     ) {
         this.stackName = stackName
         this.changes = changes
@@ -58,6 +61,7 @@ export class DiffWebviewProvider implements WebviewViewProvider, Disposable {
             this.validationDetail = validationDetail
         }
         this.deploymentMode = deploymentMode
+        this.changeSetStatus = changeSetStatus
 
         await this.coordinator.setChangeSetMode(stackName, true)
         if (this._view) {
@@ -120,6 +124,23 @@ export class DiffWebviewProvider implements WebviewViewProvider, Disposable {
         const displayedChanges = changes.slice(startIndex, endIndex)
         const hasNext = this.currentPage < this.totalPages - 1
         const hasPrev = this.currentPage > 0
+        const terminalChangeSetStatuses: string[] = [
+            ChangeSetStatus.CREATE_COMPLETE,
+            ChangeSetStatus.FAILED,
+            ChangeSetStatus.DELETE_FAILED,
+        ]
+
+        const deletionButton = `
+        <button id="deleteChangeSet" onclick="deleteChangeSet()" style="
+            background-color: var(--vscode-button-secondaryBackground);
+            color: var(--vscode-button-secondaryForeground);
+            border: none;
+            padding: 8px 16px;
+            margin: 0 5px;
+            cursor: pointer;
+            border-radius: 2px;
+        ">Delete Changeset</button>
+        `
 
         if (!changes || changes.length === 0) {
             return `
@@ -137,6 +158,23 @@ export class DiffWebviewProvider implements WebviewViewProvider, Disposable {
                 </head>
                 <body>
                     <p>No changes detected for stack: ${this.stackName}</p>
+                    ${
+                        this.changeSetName &&
+                        this.changeSetStatus &&
+                        terminalChangeSetStatuses.includes(this.changeSetStatus)
+                            ? `
+                    <div class="deletion-button" style="margin: 10px 0; text-align: left; display: inline-block;">
+                        ${deletionButton}
+                    </div>
+                    <script>
+                        const vscode = acquireVsCodeApi();
+                        function deleteChangeSet() {
+                            vscode.postMessage({ command: 'deleteChangeSet' });
+                        }
+                    </script>
+                    `
+                            : ''
+                    }
                 </body>
                 </html>
             `
@@ -351,9 +389,15 @@ export class DiffWebviewProvider implements WebviewViewProvider, Disposable {
         `
 
         const deploymentButtons =
-            this.changeSetName && this.enableDeployments
+            this.changeSetName &&
+            this.enableDeployments &&
+            this.changeSetStatus &&
+            terminalChangeSetStatuses.includes(this.changeSetStatus)
                 ? `
             <div class="deployment-actions" style="margin: 10px 0; text-align: left; display: inline-block;">
+                ${
+                    this.changeSetStatus === ChangeSetStatus.CREATE_COMPLETE
+                        ? `
                 <button id="confirmDeploy" onclick="confirmDeploy()" style="
                     background-color: var(--vscode-button-background);
                     color: var(--vscode-button-foreground);
@@ -362,16 +406,10 @@ export class DiffWebviewProvider implements WebviewViewProvider, Disposable {
                     margin: 0 5px;
                     cursor: pointer;
                     border-radius: 2px;
-                ">Deploy Changes</button>
-                <button id="deleteChangeSet" onclick="deleteChangeSet()" style="
-                    background-color: var(--vscode-button-secondaryBackground);
-                    color: var(--vscode-button-secondaryForeground);
-                    border: none;
-                    padding: 8px 16px;
-                    margin: 0 5px;
-                    cursor: pointer;
-                    border-radius: 2px;
-                ">Delete Changeset</button>
+                ">Deploy Changes</button>`
+                        : ''
+                }
+                ${deletionButton}
             </div>
         `
                 : ''