Add confirmation webview to "Deploy to Container App..." command with copilot support (#897)

* Add Confirmation web view (#886)

* initial commit

* small changes

* requested changes to commonChannel

* small changes and revert previous commit

* remove line

* prod changes

* Rename confirmationViewController.ts to ConfirmationViewController.ts

* Add confirmation view to 'Deploy to Container App..." command (#887)

* initial commit

* small changes

* add deploy changes

* requested changes to commonChannel

* cancel bug fix

* small changes and revert previous commit

* remove line

* prod changes

* Rename confirmationViewController.ts to ConfirmationViewController.ts

* Implement utils changes (#890)

* change copilot button location

* small changes after merge

* pass in view description

* Add functionality to copilot button (#896)

* initial

* small changes

* requested changes

* small change

---------

Co-authored-by: Alex Weininger <alex.weininger@live.com>

* try to fix build

* try again

* again?

* remove and fix small bug

* make dependency optional

* small change

* fix package-lock

* dumb mistake

* requested changes

* requested changes

* pass in tab title

---------

Co-authored-by: Alex Weininger <alex.weininger@live.com>

Author: motm32

gulpfile.ts

@@ -4,6 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 
 import { gulp_webpack } from '@microsoft/vscode-azext-dev';
+import * as child_process from 'child_process';
 import * as fse from 'fs-extra';
 import * as gulp from 'gulp';
 import * as path from 'path';
@@ -26,6 +27,14 @@ async function cleanReadme(): Promise<void> {
     await fse.writeFile(readmePath, data);
 }
 
+async function installSwcCore(): Promise<void> {
+    // Our pipelies run on Linux so we need to install the correct @swc/core package for te pipelines to pass.
+    if (process.platform === 'linux') {
+        child_process.execSync('npm install @swc/core-linux-x64-gnu --save-dev')
+    }
+}
+
 exports['webpack-dev'] = gulp.series(prepareForWebpack, () => gulp_webpack('development'));
 exports['webpack-prod'] = gulp.series(prepareForWebpack, () => gulp_webpack('production'));
 exports.cleanReadme = cleanReadme;
+exports.installSwcCore = installSwcCore;

package-lock.json

@@ -805,27 +805,35 @@
         "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"
+        "prepare": "husky install",
+        "preinstall": "gulp installSwcCore"
     },
     "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 +842,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,6 +859,8 @@
         "@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.2.1",
@@ -857,9 +870,15 @@
         "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"
     },

package.json

@@ -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,23 @@ export async function deployContainerApp(context: IActionContext, node?: Contain
     }
     wizardContext.telemetry.properties.revisionMode = item.containerApp.revisionsMode;
 
+    const confirmationViewTitle: string = localize('summary', 'Summary');
+    const confirmationViewDescription: string = localize('viewDescription', 'Please select an input you would like to change. Otherwise click "Confirm" to deploy.');
+    const confirmationViewTabTitle: string = localize('deployContainerAppTabTitle', 'Summary - Deploy Image to Container App');
+    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, confirmationViewTabTitle, confirmationViewDescription, title, () => wizard.confirmationViewProperties)
         ],
         executeSteps: [
             getVerifyProvidersStep<ContainerAppDeployContext>(),
             new ContainerAppUpdateStep(),
         ],
-        showLoadingPrompt: true
     });
 
     await wizard.prompt();

src/commands/deployContainerApp/deployContainerApp.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/deployWorkspaceProject/internal/startingConfiguration/getStartingConfiguration.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/EnvFileListStep.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/ContainerRegistryListStep.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/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 { 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/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, 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[]>
 }