Add confirmation webview to "Deploy to Container App..." command with copilot support

package.json

@@ -805,27 +805,34 @@
         "lint-fix": "eslint --ext .ts . --fix",
         "pretest": "npm run webpack-prod",
         "test": "node ./dist/test/runTest.js",
+        "watch:views": "webpack serve --mode development --config ./webpack.config.views.js",
         "webpack": "npm run build && gulp webpack-dev",
-        "webpack-prod": "npm run build && gulp webpack-prod",
+        "webpack-prod": "npm run build && gulp webpack-prod && npm run webpack-prod-wv ",
+        "webpack-prod-wv": "webpack --mode production --config ./webpack.config.views.js",
         "webpack-profile": "webpack --profile --json --mode production > webpack-stats.json && echo Use http://webpack.github.io/analyse to analyze the stats",
         "prepare": "husky install"
     },
     "devDependencies": {
         "@azure/ms-rest-azure-env": "^2.0.0",
         "@microsoft/eslint-config-azuretools": "^0.2.2",
         "@microsoft/vscode-azext-dev": "^2.1.0",
+        "@swc/core": "^1.7.36",
         "@types/deep-eql": "^4.0.0",
         "@types/fs-extra": "^8.1.1",
         "@types/gulp": "^4.0.6",
         "@types/mocha": "^8.2.2",
         "@types/node": "^16.18.36",
         "@types/semver": "^7.3.8",
         "@types/tar": "^6.1.11",
+        "@types/uuid": "^10.0.0",
         "@types/vscode": "^1.95.0",
+        "@types/vscode-webview": "^1.57.5",
         "@typescript-eslint/eslint-plugin": "^5.59.11",
         "@vscode/test-electron": "^2.3.8",
         "@vscode/vsce": "^2.19.0",
         "assert": "^2.0.0",
+        "copy-webpack-plugin": "^12.0.2",
+        "css-loader": "^7.1.2",
         "eslint": "^8.42.0",
         "eslint-plugin-import": "^2.27.5",
         "glob": "^7.1.6",
@@ -834,10 +841,13 @@
         "mocha": "^10.1.0",
         "mocha-junit-reporter": "^2.0.0",
         "mocha-multi-reporters": "^1.1.7",
+        "style-loader": "^4.0.0",
+        "swc-loader": "^0.2.6",
         "ts-node": "^10.9.1",
         "typescript": "^5.1.3",
         "webpack": "^5.94.0",
-        "webpack-cli": "^4.6.0"
+        "webpack-cli": "^5.1.4",
+        "webpack-dev-server": "^5.1.0"
     },
     "dependencies": {
         "@azure/arm-appcontainers": "^2.1.0-beta.1",
@@ -848,18 +858,27 @@
         "@azure/container-registry": "1.0.0-beta.5",
         "@azure/core-rest-pipeline": "1.10.3",
         "@azure/storage-blob": "^12.4.1",
+        "@fluentui/react-components": "^9.56.2",
+        "@fluentui/react-icons": "^2.0.265",
         "@microsoft/vscode-azext-azureutils": "^3.3.3",
         "@microsoft/vscode-azext-github": "^1.0.2",
-        "@microsoft/vscode-azext-utils": "^3.1.1",
+        "@microsoft/vscode-azext-utils": "^3.1.4",
         "@microsoft/vscode-azureresources-api": "^2.0.2",
+        "@swc/core-linux-x64-gnu": "^1.12.9",
         "buffer": "^6.0.3",
         "dayjs": "^1.11.3",
         "deep-eql": "^4.1.3",
         "dotenv": "^16.0.0",
         "fs-extra": "^8.1.0",
+        "monaco-editor": "~0.51.0",
         "p-retry": "^4.6.2",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
+        "sass": "~1.79.6",
+        "sass-loader": "^16.0.2",
         "semver": "^7.5.2",
         "tar": "^6.2.1",
+        "uuid": "^10.0.0",
         "vscode-nls": "^4.1.1",
         "vscode-uri": "^3.0.2"
     },

src/commands/deployContainerApp/deployContainerApp.ts

@@ -13,6 +13,7 @@ import { getManagedEnvironmentFromContainerApp } from "../../utils/getResourceUt
 import { getVerifyProvidersStep } from "../../utils/getVerifyProvidersStep";
 import { localize } from "../../utils/localize";
 import { pickContainerApp } from "../../utils/pickItem/pickContainerApp";
+import { OpenConfirmationViewStep } from "../../webviews/OpenConfirmationViewStep";
 import { ContainerAppOverwriteConfirmStep } from "../ContainerAppOverwriteConfirmStep";
 import { deployWorkspaceProject } from "../deployWorkspaceProject/deployWorkspaceProject";
 import { editContainerCommandName } from "../editContainer/editContainer";
@@ -56,18 +57,22 @@ export async function deployContainerApp(context: IActionContext, node?: Contain
     }
     wizardContext.telemetry.properties.revisionMode = item.containerApp.revisionsMode;
 
+    const confirmationViewTitle: string = localize('confirmAndDeploy', 'Confirm + Deploy')
+    const confirmationViewDescription: string = localize('viewDescription', 'Please select an input you would like to change. Otherwise click "Confirm" to deploy.');
+    const title: string = localize('deployContainerAppTitle', 'Deploy image to container app')
+
     const wizard: AzureWizard<ContainerAppDeployContext> = new AzureWizard(wizardContext, {
-        title: localize('deployContainerAppTitle', 'Deploy image to container app'),
+        title: title,
         promptSteps: [
             new ContainerAppDeployStartingResourcesLogStep(),
             new ImageSourceListStep(),
             new ContainerAppOverwriteConfirmStep(),
+            new OpenConfirmationViewStep(confirmationViewTitle, confirmationViewDescription, title, () => wizard.confirmationViewProperties)
         ],
         executeSteps: [
             getVerifyProvidersStep<ContainerAppDeployContext>(),
             new ContainerAppUpdateStep(),
         ],
-        showLoadingPrompt: true
     });
 
     await wizard.prompt();

src/commands/deployWorkspaceProject/internal/startingConfiguration/getStartingConfiguration.ts

@@ -4,7 +4,7 @@
 *--------------------------------------------------------------------------------------------*/
 
 import { KnownSkuName } from "@azure/arm-containerregistry";
-import { AzureWizard } from "@microsoft/vscode-azext-utils";
+import { AzureWizard, type AzureWizardPromptStep } from "@microsoft/vscode-azext-utils";
 import { ImageSource } from "../../../../constants";
 import { EnvFileListStep } from "../../../image/imageSource/EnvFileListStep";
 import { DockerfileItemStep } from "../../../image/imageSource/buildImageInAzure/DockerfileItemStep";
@@ -19,7 +19,7 @@ import { getResourcesFromContainerAppHelper, getResourcesFromManagedEnvironmentH
 export async function getStartingConfiguration(context: DeployWorkspaceProjectInternalContext, options: DeployWorkspaceProjectInternalOptions): Promise<Partial<DeployWorkspaceProjectInternalContext>> {
     await tryAddMissingAzureResourcesToContext(context);
 
-    const promptSteps = [
+    const promptSteps: AzureWizardPromptStep<DeployWorkspaceProjectInternalContext>[] = [
         new RootFolderStep(),
         new DockerfileItemStep(),
         new DwpManagedEnvironmentListStep(),

src/commands/image/imageSource/EnvFileListStep.ts

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 
 import { type EnvironmentVar } from "@azure/arm-appcontainers";
-import { ActivityChildItem, ActivityChildType, AzExtFsExtra, AzureWizardPromptStep, activityInfoContext, activityInfoIcon, activitySuccessContext, activitySuccessIcon, createContextValue } from "@microsoft/vscode-azext-utils";
+import { ActivityChildItem, ActivityChildType, AzExtFsExtra, AzureWizardPromptStep, activityInfoContext, activityInfoIcon, activitySuccessContext, activitySuccessIcon, createContextValue, type ConfirmationViewProperty } from "@microsoft/vscode-azext-utils";
 import { parse, type DotenvParseOutput } from "dotenv";
 import { RelativePattern, workspace, type Uri, type WorkspaceFolder } from "vscode";
 import { ImageSource, envFileGlobPattern } from "../../../constants";
@@ -73,6 +73,14 @@ export class EnvFileListStep<T extends EnvFileListContext> extends AzureWizardPr
         return context.imageSource !== ImageSource.QuickstartImage && context.environmentVariables === undefined;
     }
 
+    public confirmationViewProperty(context: T): ConfirmationViewProperty {
+        return {
+            name: localize('environmentVariables', 'Environment Variables'),
+            value: context.envPath ?? localize('useExisting', 'Use existing configuration'),
+            contextPropertyName: 'envPath'
+        };
+    }
+
     private async promptForEnvPath(context: T, showHasExistingData?: boolean): Promise<string | undefined> {
         const placeHolder: string = localize('setEnvVar', 'Select a {0} file to set the environment variables for the container instance', '.env');
         const skipLabel: string | undefined = showHasExistingData ? localize('useExisting', 'Use existing configuration') : undefined;

src/commands/image/imageSource/containerRegistry/ContainerRegistryListStep.ts

@@ -3,7 +3,7 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-import { AzureWizardPromptStep, type IAzureQuickPickItem, type IWizardOptions } from "@microsoft/vscode-azext-utils";
+import { AzureWizardPromptStep, type ConfirmationViewProperty, type IAzureQuickPickItem, type IWizardOptions } from "@microsoft/vscode-azext-utils";
 import { UIKind, env } from "vscode";
 import { acrDomain, dockerHubDomain, type SupportedRegistries } from "../../../../constants";
 import { localize } from "../../../../utils/localize";
@@ -18,6 +18,7 @@ import { RegistryImageInputStep } from "./RegistryImageInputStep";
 
 export class ContainerRegistryListStep extends AzureWizardPromptStep<ContainerRegistryImageSourceContext> {
     public hideStepCount: boolean = true;
+    public pickLabel: string | undefined;
 
     public async prompt(context: ContainerRegistryImageSourceContext): Promise<void> {
         const placeHolder: string = localize('selectTag', 'Select a container registry');
@@ -31,13 +32,23 @@ export class ContainerRegistryListStep extends AzureWizardPromptStep<ContainerRe
         // there is a chance that this will fail in vscode.dev due to CORS, but we should still allow the user to enter a custom registry
         picks.push({ label: localize('otherPublicRegistry', 'Other public registry'), data: undefined });
 
-        context.registryDomain = (await context.ui.showQuickPick(picks, { placeHolder })).data;
+        const pick: IAzureQuickPickItem<SupportedRegistries | undefined> | undefined = await context.ui.showQuickPick(picks, { placeHolder });
+        this.pickLabel = pick?.label;
+        context.registryDomain = pick.data;
     }
 
     public shouldPrompt(context: ContainerRegistryImageSourceContext): boolean {
         return !context.image && !context.registryDomain;
     }
 
+    public confirmationViewProperty(_context: ContainerRegistryImageSourceContext): ConfirmationViewProperty {
+        return {
+            name: localize('containerRegistryDomain', 'Container Registry Domain'),
+            value: this.pickLabel ?? '',
+            contextPropertyName: 'registryDomain'
+        };
+    }
+
     public async getSubWizard(context: ContainerRegistryImageSourceContext): Promise<IWizardOptions<ContainerRegistryImageSourceContext> | undefined> {
         if (context.image) {
             return undefined;

src/commands/image/imageSource/containerRegistry/RegistryImageInputStep.ts

@@ -3,7 +3,7 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-import { AzureWizardPromptStep } from "@microsoft/vscode-azext-utils";
+import { AzureWizardPromptStep, type ConfirmationViewProperty } from "@microsoft/vscode-azext-utils";
 import { acrDomain, quickStartImageName } from "../../../../constants";
 import { parseImageName } from "../../../../utils/imageNameUtils";
 import { localize } from "../../../../utils/localize";
@@ -38,4 +38,12 @@ export class RegistryImageInputStep extends AzureWizardPromptStep<ContainerRegis
     public shouldPrompt(context: ContainerRegistryImageSourceContext): boolean {
         return context.image === undefined;
     }
+
+    public confirmationViewProperty(context: ContainerRegistryImageSourceContext): ConfirmationViewProperty {
+        return {
+            name: localize('containerImage', 'Container Image'),
+            value: context.image ?? '',
+            contextPropertyName: 'image'
+        };
+    }
 }

src/commands/image/imageSource/containerRegistry/RegistryRepositoriesListBaseStep.ts

@@ -3,7 +3,7 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-import { AzureWizardPromptStep } from "@microsoft/vscode-azext-utils";
+import { AzureWizardPromptStep, type ConfirmationViewProperty } from "@microsoft/vscode-azext-utils";
 import { type QuickPickItem } from "vscode";
 import { loadMoreQp, noMatchingResourcesQp, type QuickPicksCache } from "../../../../constants";
 import { localize } from "../../../../utils/localize";
@@ -31,5 +31,13 @@ export abstract class RegistryRepositoriesListStepBase extends AzureWizardPrompt
         return !context.repositoryName;
     }
 
+    public confirmationViewProperty(context: ContainerRegistryImageSourceContext): ConfirmationViewProperty {
+        return {
+            name: localize('repository', 'Repository'),
+            value: context.repositoryName ?? '',
+            contextPropertyName: 'repositoryName'
+        }
+    }
+
     public abstract getPicks(context: ContainerRegistryImageSourceContext, picksCache: QuickPicksCache | undefined): Promise<QuickPickItem[]>
 }

src/commands/image/imageSource/containerRegistry/RepositoryTagListStepBase.ts

@@ -3,7 +3,7 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-import { AzureWizardPromptStep } from "@microsoft/vscode-azext-utils";
+import { AzureWizardPromptStep, type ConfirmationViewProperty } from "@microsoft/vscode-azext-utils";
 import { type QuickPickItem } from "vscode";
 import { loadMoreQp, type QuickPicksCache } from "../../../../constants";
 import { localize } from "../../../../utils/localize";
@@ -26,5 +26,13 @@ export abstract class RepositoryTagListStepBase extends AzureWizardPromptStep<Co
         return !context.tag;
     }
 
+    public confirmationViewProperty(context: ContainerRegistryImageSourceContext): ConfirmationViewProperty {
+        return {
+            name: localize('tag', 'Tag'),
+            value: context.tag ?? '',
+            contextPropertyName: 'tag'
+        };
+    }
+
     public abstract getPicks(context: ContainerRegistryImageSourceContext, picksCache: QuickPicksCache | undefined): Promise<QuickPickItem[]>
 }

src/commands/image/imageSource/containerRegistry/acr/AcrListStep.ts

@@ -7,7 +7,7 @@ import { KnownActiveRevisionsMode } from "@azure/arm-appcontainers";
 import { type ContainerRegistryManagementClient, type Registry } from "@azure/arm-containerregistry";
 import { type ResourceGroup } from "@azure/arm-resources";
 import { LocationListStep, ResourceGroupListStep, getResourceGroupFromId, parseAzureResourceId, uiUtils } from "@microsoft/vscode-azext-azureutils";
-import { AzureWizardPromptStep, nonNullProp, type AzureWizardExecuteStep, type IAzureQuickPickItem, type ISubscriptionActionContext, type IWizardOptions } from "@microsoft/vscode-azext-utils";
+import { AzureWizardPromptStep, nonNullProp, type AzureWizardExecuteStep, type ConfirmationViewProperty, type IAzureQuickPickItem, type ISubscriptionActionContext, type IWizardOptions } from "@microsoft/vscode-azext-utils";
 import { acrDomain, noMatchingResources, noMatchingResourcesQp } from "../../../../../constants";
 import { createContainerRegistryManagementClient } from "../../../../../utils/azureClients";
 import { parseImageName } from "../../../../../utils/imageNameUtils";
@@ -36,6 +36,8 @@ export class AcrListStep<T extends ContainerRegistryImageSourceContext> extends
         super();
     }
 
+    private pickLabel: string;
+
     public async prompt(context: T): Promise<void> {
         const placeHolder: string = localize('selectRegistry', 'Select an Azure Container Registry');
 
@@ -53,13 +55,22 @@ export class AcrListStep<T extends ContainerRegistryImageSourceContext> extends
             result = pick.data;
         } while (result === noMatchingResources);
 
+        this.pickLabel = pick.label;
         context.registry = result;
     }
 
     public shouldPrompt(context: T): boolean {
         return !context.registry && !context.newRegistryName;
     }
 
+    public confirmationViewProperty(_context: T): ConfirmationViewProperty {
+        return {
+            name: localize('registry', 'Registry'),
+            value: this.pickLabel ?? '',
+            contextPropertyName: 'registry'
+        }
+    }
+
     public async getSubWizard(context: T): Promise<IWizardOptions<T> | undefined> {
         const promptSteps: AzureWizardPromptStep<T>[] = [];
         const executeSteps: AzureWizardExecuteStep<T>[] = [];

src/commands/image/imageSource/containerRegistry/dockerHub/DockerHubNamespaceInputStep.ts

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 
 import { KnownActiveRevisionsMode } from "@azure/arm-appcontainers";
-import { AzureWizardPromptStep } from "@microsoft/vscode-azext-utils";
+import { AzureWizardPromptStep, type ConfirmationViewProperty } from "@microsoft/vscode-azext-utils";
 import { dockerHubDomain } from "../../../../../constants";
 import { parseImageName } from "../../../../../utils/imageNameUtils";
 import { localize } from "../../../../../utils/localize";
@@ -27,6 +27,14 @@ export class DockerHubNamespaceInputStep extends AzureWizardPromptStep<Container
         return !context.dockerHubNamespace;
     }
 
+    public confirmationViewProperty(context: ContainerRegistryImageSourceContext): ConfirmationViewProperty {
+        return {
+            name: localize('dockerHubNamespace', 'Docker Hub Namespace'),
+            value: context.dockerHubNamespace ?? '',
+            contextPropertyName: 'dockerHubNamespace'
+        };
+    }
+
     private async validateInput(name: string | undefined): Promise<string | undefined> {
         name = name ? name.trim() : '';
 

src/commands/ingress/IngressPromptStep.ts

@@ -3,7 +3,7 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-import { AzureWizardPromptStep, type AzureWizardExecuteStep, type IWizardOptions } from "@microsoft/vscode-azext-utils";
+import { AzureWizardPromptStep, type AzureWizardExecuteStep, type ConfirmationViewProperty, type IWizardOptions } from "@microsoft/vscode-azext-utils";
 import { ext } from "../../extensionVariables";
 import { localize } from "../../utils/localize";
 import { type IngressContext } from "./IngressContext";
@@ -28,6 +28,14 @@ export class IngressPromptStep extends AzureWizardPromptStep<IngressContext> {
         return context.enableIngress === undefined;
     }
 
+    public confirmationViewProperty(context: IngressContext): ConfirmationViewProperty {
+        return {
+            name: localize('enableIngress', 'Ingress'),
+            value: context.enableIngress ? localize('enabled', 'Enabled') : localize('disabled', 'Disabled'),
+            contextPropertyName: 'enableIngress'
+        };
+    }
+
     public async getSubWizard(context: IngressContext): Promise<IWizardOptions<IngressContext> | undefined> {
         const promptSteps: AzureWizardPromptStep<IngressContext>[] = [];
         const executeSteps: AzureWizardExecuteStep<IngressContext>[] = [];

src/commands/ingress/editTargetPort/TargetPortInputStep.ts

@@ -3,7 +3,7 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-import { AzureWizardPromptStep } from "@microsoft/vscode-azext-utils";
+import { AzureWizardPromptStep, type ConfirmationViewProperty } from "@microsoft/vscode-azext-utils";
 import { localize } from "../../../utils/localize";
 import { type IngressContext } from "../IngressContext";
 import { getDefaultPort } from "./getDefaultPort";
@@ -29,6 +29,14 @@ export class TargetPortInputStep extends AzureWizardPromptStep<IngressContext> {
         return !context.targetPort;
     }
 
+    public confirmationViewProperty(context: IngressContext): ConfirmationViewProperty {
+        return {
+            name: localize('targetPort', 'Target Port'),
+            value: String(context.targetPort),
+            contextPropertyName: 'targetPort'
+        };
+    }
+
     private validateInput(val: string): string | undefined {
         const num = Number(val);
         if (isNaN(num)) {