Adding support for Logic Apps extension. #907

alain-zhiyanov · 2024-07-16T21:42:52Z

'Create Static Web App' command now supports being called from Logic Apps VSCode extension. The command will now initialize and deploy a Static Web App which is in the same directory and a linked backend for the user's Logic App.

Please see more details in my Offboarding document .

@mkarmark @annikel @joslinmicrosoft

annikel · 2024-07-23T14:04:21Z

src/commands/createStaticWebApp/IStaticWebAppWizardContext.ts

+    // logic app
+    logicApp?: {backendResourceId: string, region: string, name: string};
+
+


nit: remove extra lines

annikel · 2024-07-23T14:04:39Z

src/commands/createStaticWebApp/IStaticWebAppWizardContext.ts

@@ -46,4 +46,9 @@ export interface IStaticWebAppWizardContext extends IResourceGroupWizardContext,

    // created when the wizard is done executing
    staticWebApp?: StaticSiteARMResource;
+
+    // logic app


nit: the comment does not add any value here

annikel · 2024-07-23T14:04:58Z

src/commands/createStaticWebApp/StaticWebAppCreateStep.ts

@@ -3,19 +3,53 @@
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

-import { StaticSiteARMResource } from "@azure/arm-appservice";
+import { WebSiteManagementClient, type StaticSiteARMResource } from "@azure/arm-appservice";


validate that all these imports are still being used

annikel · 2024-07-23T14:05:04Z

src/commands/createStaticWebApp/StaticWebAppCreateStep.ts


 export class StaticWebAppCreateStep extends AzureWizardExecuteStep<IStaticWebAppWizardContext> {
-    public priority: number = 250;
+    public priority = 250;


nit: remove extra line

annikel · 2024-07-23T14:06:07Z

src/commands/createStaticWebApp/StaticWebAppCreateStep.ts


    public async execute(context: IStaticWebAppWizardContext, progress: Progress<{ message?: string | undefined; increment?: number | undefined }>): Promise<void> {
+
+        if(context.logicApp) {
+            //There was an issue where some fields of context would be lost when SWA called with LA. This is a temporary fix to find the branch data again here because of that. Note this will only work with alain github.


Does this have to be fixed still?

annikel · 2024-07-23T14:07:34Z

src/commands/createStaticWebApp/StaticWebAppCreateStep.ts

+            const octokitClient: Octokit = await createOctokitClient(context);
+
+
+            const owner = "alain-zhiyanov";


can you extract this to the top of the file and call it template owner

annikel · 2024-07-23T14:07:47Z

src/commands/createStaticWebApp/StaticWebAppCreateStep.ts

+
+
+
+


nit: remove lines

annikel · 2024-07-23T14:09:00Z

src/commands/createStaticWebApp/createStaticWebApp.ts

+export async function createStaticWebApp(context: IActionContext & Partial<ICreateChildImplContext> & Partial<IStaticWebAppWizardContext>, node?: SubscriptionTreeItemBase, _nodes?: SubscriptionTreeItemBase[], ...args: unknown[]): Promise<AppResource> {
+
+    //logic app paramater was passed in args so flow which inits SWA with LA is called
+    if (args.length > 0) {


instead of comment here extract evaluation into var and add proper naming

annikel · 2024-07-23T14:09:26Z

src/commands/createStaticWebApp/createStaticWebApp.ts

+    //logic app paramater was passed in args so flow which inits SWA with LA is called
+    if (args.length > 0) {
+        type Resource = {backendResourceId: string, region: string, name: string};
+        const logicApp = args[0] as unknown as Resource;


is the as unknown needed here?

annikel · 2024-07-23T14:09:53Z

src/commands/createStaticWebApp/createStaticWebApp.ts

@@ -113,27 +125,22 @@ export async function createStaticWebApp(context: IActionContext & Partial<ICrea
        ...node.subscription,
        ...(await createActivityContext())
    };


you removed a bunch of files in this file. Please make sure to revert any changes that are not relevant to your work

annikel · 2024-07-23T14:10:23Z

src/commands/createStaticWebApp/createStaticWebApp.ts

    executeSteps.push(new VerifyProvidersStep([webProvider]));
    executeSteps.push(new StaticWebAppCreateStep());
+    const wizard: AzureWizard<IStaticWebAppWizardContext> = new AzureWizard(wizardContext, {
+        title,


can we extract certain parts into functions to make the code more readable please

Or section off the code into different blocks

annikel · 2024-07-23T14:11:24Z

src/commands/createStaticWebApp/createStaticWebApp.ts

+    const wizard: AzureWizard<IStaticWebAppWizardContext> = new AzureWizard(wizardContext, {
+        title,
+        promptSteps,
+        executeSteps,


please remove all extra lines and not needed comments

annikel · 2024-07-23T14:12:07Z

src/commands/registerCommands.ts

@@ -51,7 +50,7 @@ export function registerCommands(): void {
    registerCommandWithTreeNodeUnwrapping('staticWebApps.toggleAppSettingVisibility', async (context: IActionContext, node?: AppSettingTreeItem) => { await nonNullValue(node).toggleValueVisibility(context); }, 250);
    registerCommand('staticWebApps.showDocumentation', async (_context: IActionContext) => { await openUrl('https://aka.ms/AA92xai'); });
    registerCommand('staticWebApps.showFunctionsDocumentation', async (_context: IActionContext) => { await openUrl('https://aka.ms/AAacf3z'); });
-    registerCommandWithTreeNodeUnwrapping('staticWebApps.openYAMLConfigFile', openYAMLConfigFile);
+    //registerCommandWithTreeNodeUnwrapping('staticWebApps.openYAMLConfigFile', openYAMLConfigFile);


annikel · 2024-07-24T13:40:07Z

package.json

@@ -494,8 +494,9 @@
        "webpack-cli": "^4.6.0"
    },
    "dependencies": {
-        "@azure/arm-appservice": "^11.0.0",
+        "@azure/arm-appservice": "^15.0.0",


Did you update this on purpose?

annikel · 2024-07-24T13:41:23Z

src/commands/createStaticWebApp/StaticWebAppCreateStep.ts

    }

    public shouldExecute(_wizardContext: IStaticWebAppWizardContext): boolean {
        return true;
    }
+


nit: remove extra line

annikel · 2024-07-24T13:41:38Z

src/commands/createStaticWebApp/StaticWebAppCreateStep.ts

+            const client = new WebSiteManagementClient(credential, context.subscriptionId);
+
+            try{
+            const result = await client.staticSites.beginLinkBackendAndWait(


nit: the formatting here is off

annikel · 2024-07-24T13:42:04Z

src/commands/createStaticWebApp/StaticWebAppCreateStep.ts

+            const credential = new DefaultAzureCredential();
+            const client = new WebSiteManagementClient(credential, context.subscriptionId);
+
+            try{


nit: there should also be a space inbetween the try and the parentheses

annikel · 2024-07-24T13:42:44Z

src/commands/createStaticWebApp/StaticWebAppCreateStep.ts

        const creatingSwa: string = localize('creatingSwa', 'Creating new static web app "{0}"...', newName);
        progress.report({ message: creatingSwa });
        ext.outputChannel.appendLog(creatingSwa);
        context.staticWebApp = await context.client.staticSites.beginCreateOrUpdateStaticSiteAndWait(nonNullValueAndProp(context.resourceGroup, 'name'), newName, siteEnvelope);
        context.activityResult = context.staticWebApp as AppResource;
+
+        if (context.logicApp) {
+            //link backends only if SWA called with LA


instead of the comment can we extract the content.logicApp into a varthat is named properly so that thise comment is not needed anymore

annikel · 2024-07-24T13:43:10Z

src/commands/createStaticWebApp/createStaticWebApp.ts

@@ -3,19 +3,26 @@
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

-import { StaticSiteARMResource, WebSiteManagementClient } from '@azure/arm-appservice';
+// biome-ignore lint/style/useNodejsImportProtocol: <explanation>


Are these comments needed?

annikel · 2024-07-24T13:43:41Z

src/commands/createStaticWebApp/createStaticWebApp.ts

 import { Utils } from 'vscode-uri';
 import { StaticWebAppResolver } from '../../StaticWebAppResolver';
-import { DetectorResults, NodeDetector } from '../../detectors/node/NodeDetector';
+import { NodeDetector, type DetectorResults } from '../../detectors/node/NodeDetector';


Is these line change on purpose? Try to only make changes that are related to your projects

annikel · 2024-07-24T13:43:53Z

src/commands/createStaticWebApp/createStaticWebApp.ts

 import { NodeConstants } from '../../detectors/node/nodeConstants';
 import { VerifyingWorkspaceError } from '../../errors';
 import { ext } from '../../extensionVariables';
 import { createActivityContext } from '../../utils/activityUtils';
 import { createWebSiteClient } from '../../utils/azureClients';
+import { cpUtils } from '../../utils/cpUtils';


What are we using this for?

annikel · 2024-07-24T13:44:05Z

src/commands/createStaticWebApp/createStaticWebApp.ts

 import { showSwaCreated } from '../showSwaCreated';
 import { ApiLocationStep } from './ApiLocationStep';
 import { AppLocationStep } from './AppLocationStep';
 import { BuildPresetListStep } from './BuildPresetListStep';
 import { GitHubOrgListStep } from './GitHubOrgListStep';
-import { IStaticWebAppWizardContext } from './IStaticWebAppWizardContext';
+import type { IStaticWebAppWizardContext } from './IStaticWebAppWizardContext';


why did we have to add this here?

annikel · 2024-07-24T13:44:13Z

src/commands/createStaticWebApp/createStaticWebApp.ts

 import { OutputLocationStep } from './OutputLocationStep';
 import { SkuListStep } from './SkuListStep';
 import { StaticWebAppCreateStep } from './StaticWebAppCreateStep';
 import { StaticWebAppNameStep } from './StaticWebAppNameStep';
 import { setGitWorkspaceContexts } from './setWorkspaceContexts';
 import { tryGetApiLocations } from './tryGetApiLocations';

+


nit: remove extra line

annikel · 2024-07-24T13:44:48Z

src/commands/createStaticWebApp/createStaticWebApp.ts

        await window.withProgress(progressOptions, async () => {
            const folder = await tryGetWorkspaceFolder(context);
            if (folder) {
                await telemetryUtils.runWithDurationTelemetry(context, 'tryGetFrameworks', async () => {
                    const detector = new NodeDetector();
-
                    const detectorResult = await detector.detect(folder.uri);
                    // comma separated list of all frameworks detected in this project
                    context.telemetry.properties.detectedFrameworks = `(${detectorResult?.frameworks.map(fi => fi.framework).join('), (')})` ?? 'N/A';
                    context.telemetry.properties.rootHasSrcFolder = (await AzExtFsExtra.pathExists(Uri.joinPath(folder.uri, NodeConstants.srcFolderName))).toString();


you can see here on the left that you had removed some lines. please add them back

annikel · 2024-07-24T13:45:30Z

src/commands/createStaticWebApp/createStaticWebApp.ts

+    const executeSteps: AzureWizardExecuteStep<IStaticWebAppWizardContext>[] = [];
+    if (!context.advancedCreation) {
+        //[1] gets standard and not free
+        wizardContext.sku = SkuListStep.getSkus()[1];


instead of the comment can we extract this to a var called standardSku and then set it

annikel · 2024-07-24T13:45:56Z

src/commands/createStaticWebApp/createStaticWebApp.ts

    wizardContext.uri = wizardContext.uri || getSingleRootFsPath();
+    await wizard.prompt();
+
+    //create github template


If the comment is needed here should this code maybe be extracted into a separate method

annikel · 2024-07-24T13:46:13Z

src/commands/createStaticWebApp/createStaticWebApp.ts

+    const clonePathUri: Uri = Uri.file(clonePath);
+    const octokitClient: Octokit = await createOctokitClient(context);
+    const { data: response } = await octokitClient.rest.repos.createUsingTemplate({
+        private: true,


Can we have all these template details as consts extracted

annikel · 2024-07-24T13:47:01Z

src/commands/createStaticWebApp/createStaticWebApp.ts

@@ -176,11 +347,12 @@ export async function createStaticWebApp(context: IActionContext & Partial<ICrea
        wizardContext.newResourceGroupName = await wizardContext.relatedNameTask;
    }

+


nit: remove line

annikel · 2024-07-24T13:47:07Z

src/commands/createStaticWebApp/createStaticWebApp.ts

+
+
+
+


nit: remove all lines

annikel · 2024-07-24T13:47:14Z

src/commands/registerCommands.ts

@@ -25,7 +25,7 @@ import { openGitHubLog } from './github/jobLogs/openGitHubLog';
 import { openGitHubRepo } from './github/openGitHubRepo';
 import { showActions } from './github/showActions';
 import { openInPortal } from './openInPortal';
-import { openYAMLConfigFile } from './openYAMLConfigFile';
+import { openYAMLConfigFile } from "./openYAMLConfigFile";


nit: revert this change

annikel · 2024-07-24T13:50:00Z

src/commands/createStaticWebApp/createStaticWebApp.ts

+    const baseClonePath = join(homeDir, folderName);
+    const clonePath = join(baseClonePath, 'static-web-app');
+    const clonePathUri: Uri = Uri.file(clonePath);
+    const octokitClient: Octokit = await createOctokitClient(context);


This code might be hard to interpret for someone not having the full context. Do you think maybe breaking it into smaller pieces can help with readability.
Something like

const folderName = getFolderName(wizardContext); const clonePath = getClonePath(folderName); const clonePathUri: Uri = Uri.file(clonePath); const octokitClient: Octokit = await createOctokitClient(context); const response = await createRepository(octokitClient, folderName);

And same below

alain-zhiyanov added 10 commits May 29, 2024 10:43

added log for start of static web app command

b1b2865

added functionality clone and start SWA

08c4d5f

changing createstaticwebapp flow (broken at staticwebappcreatestep)

f7662ed

flow changed to support create and clone from template

e11f13c

dynamically get branch

687a1ce

changing repo to private & create repo in new dir

c7ed450

added link API call and logicApp command parameter (broken)

9600e20

added support for original flow and fixed parameter passing

819390f

fixing unused paramater error

b5ca08a

remove typo in createstaticwebapp.ts

c3b2c38

alain-zhiyanov requested a review from a team as a code owner July 16, 2024 21:42

annikel reviewed Jul 23, 2024

View reviewed changes

src/commands/createStaticWebApp/StaticWebAppCreateStep.ts Outdated

Copy link

annikel Jul 23, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: remove lines

annikel reviewed Jul 23, 2024

View reviewed changes

style and updated package files

fb9a53a

annikel reviewed Jul 24, 2024

View reviewed changes

src/commands/createStaticWebApp/createStaticWebApp.ts Outdated

Copy link

annikel Jul 24, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: remove all lines

annikel reviewed Jul 24, 2024

View reviewed changes

nits and style (fixes from PR comments)

23c8b80

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Adding support for Logic Apps extension. #907

Adding support for Logic Apps extension. #907

alain-zhiyanov commented Jul 16, 2024 •

edited

Loading

annikel Jul 23, 2024

annikel Jul 23, 2024

annikel Jul 23, 2024

annikel Jul 23, 2024

annikel Jul 23, 2024

annikel Jul 23, 2024

annikel Jul 23, 2024

annikel Jul 23, 2024

annikel Jul 23, 2024

annikel Jul 23, 2024

annikel Jul 23, 2024

annikel Jul 23, 2024

annikel Jul 23, 2024

annikel Jul 23, 2024

annikel Jul 24, 2024

annikel Jul 24, 2024

annikel Jul 24, 2024

annikel Jul 24, 2024

annikel Jul 24, 2024

annikel Jul 24, 2024

annikel Jul 24, 2024

annikel Jul 24, 2024

annikel Jul 24, 2024

annikel Jul 24, 2024

annikel Jul 24, 2024

annikel Jul 24, 2024

annikel Jul 24, 2024

annikel Jul 24, 2024

annikel Jul 24, 2024

annikel Jul 24, 2024

annikel Jul 24, 2024

annikel Jul 24, 2024

annikel Jul 24, 2024

		// logic app
		logicApp?: {backendResourceId: string, region: string, name: string};

		const octokitClient: Octokit = await createOctokitClient(context);


		const owner = "alain-zhiyanov";

		@@ -176,11 +347,12 @@ export async function createStaticWebApp(context: IActionContext & Partial<ICrea
		wizardContext.newResourceGroupName = await wizardContext.relatedNameTask;
		}

Adding support for Logic Apps extension. #907

Are you sure you want to change the base?

Adding support for Logic Apps extension. #907

Conversation

alain-zhiyanov commented Jul 16, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

alain-zhiyanov commented Jul 16, 2024 •

edited

Loading