fix(vscode): Add app kind setting to local settings creation and upda…

…te on design time (#4417)

Add app kind setting to workspace localsettings creation and update on desing time api

apps/vs-code-designer/src/app/commands/createLogicApp/createLogicAppSteps/LogicAppCreateStep.ts

@@ -3,6 +3,7 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 import {
+  appKindSetting,
   azureWebJobsStorageKey,
   defaultVersionRange,
   extensionBundleId,
@@ -157,7 +158,7 @@ export class LogicAppCreateStep extends AzureWizardExecuteStep<IFunctionAppWizar
     if (context.customLocation) {
       appSettings.push(
         {
-          name: 'APP_KIND',
+          name: appKindSetting,
           value: logicAppKindAppSetting,
         },
         {

apps/vs-code-designer/src/app/commands/createNewCodeProject/createCodeProjectSteps/createLogicApp/workflowDesigner/DesignerConfig.ts

@@ -1,4 +1,4 @@
-import { designTimeDirectoryName } from '../../../../../../constants';
+import { designTimeDirectoryName, localSettingsFileName, logicAppKind } from '../../../../../../constants';
 import { AzureWizardPromptStep } from '@microsoft/vscode-azext-utils';
 import type { IProjectWizardContext } from '@microsoft/vscode-extension';
 import * as fs from 'fs-extra';
@@ -57,13 +57,14 @@ export class DesignerConfig extends AzureWizardPromptStep<IProjectWizardContext>
    * @param folderPath The path to the folder where the local.settings.json file should be generated.
    */
   private async generateLocalSettingsJson(folderPath: string, context: IProjectWizardContext): Promise<void> {
-    const filePath = path.join(folderPath, 'local.settings.json');
+    const filePath = path.join(folderPath, localSettingsFileName);
     const designerProjPath: string = context.logicAppFolderPath;
     const content = {
       IsEncrypted: false,
       Values: {
         AzureWebJobsSecretStorageType: 'Files',
         FUNCTIONS_WORKER_RUNTIME: 'node',
+        APP_KIND: logicAppKind,
         ProjectDirectoryPath: designerProjPath,
       },
     };

apps/vs-code-designer/src/app/commands/dataMapper/DataMapperExt.ts

@@ -3,17 +3,18 @@ import DataMapperPanel from './DataMapperPanel';
 import { startBackendRuntime } from './FxWorkflowRuntime';
 import { webviewType } from './extensionConfig';
 import type { MapDefinitionEntry } from '@microsoft/logic-apps-shared';
+import type { IActionContext } from '@microsoft/vscode-azext-utils';
 import type { MapDefinitionData } from '@microsoft/vscode-extension';
 import * as yaml from 'js-yaml';
 import * as path from 'path';
 import { Uri, ViewColumn, window } from 'vscode';
 
 export default class DataMapperExt {
-  public static async openDataMapperPanel(dataMapName: string, mapDefinitionData?: MapDefinitionData) {
+  public static async openDataMapperPanel(dataMapName: string, context: IActionContext, mapDefinitionData?: MapDefinitionData) {
     const workflowFolder = ext.logicAppWorkspace;
 
     if (workflowFolder) {
-      await startBackendRuntime(workflowFolder);
+      await startBackendRuntime(workflowFolder, context);
 
       DataMapperExt.createOrShow(dataMapName, mapDefinitionData);
     }

apps/vs-code-designer/src/app/commands/dataMapper/FxWorkflowRuntime.ts

@@ -1,23 +1,31 @@
-import { designTimeDirectoryName, designerStartApi, hostFileContent, hostFileName, localSettingsFileName } from '../../../constants';
+import {
+  designTimeDirectoryName,
+  designerStartApi,
+  hostFileContent,
+  hostFileName,
+  localSettingsFileName,
+  logicAppKind,
+} from '../../../constants';
 import { ext } from '../../../extensionVariables';
 import { localize } from '../../../localize';
+import { addOrUpdateLocalAppSettings } from '../../utils/appSettings/localSettings';
 import {
   createJsonFile,
   getOrCreateDesignTimeDirectory,
   isDesignTimeUp,
   startDesignTimeProcess,
-  updateProjectPath,
   waitForDesignTimeStartUp,
 } from '../../utils/codeless/startDesignTimeApi';
 import { getFunctionsCommand } from '../../utils/funcCoreTools/funcVersion';
 import { backendRuntimeBaseUrl, settingsFileContent } from './extensionConfig';
+import type { IActionContext } from '@microsoft/vscode-azext-utils';
 import * as portfinder from 'portfinder';
 import { ProgressLocation, type Uri, window } from 'vscode';
 
 // NOTE: LA Standard ext does this in workflowFolder/workflow-designtime
 // For now at least, DM is just going to do everything in workflowFolder
 
-export async function startBackendRuntime(projectPath: string): Promise<void> {
+export async function startBackendRuntime(projectPath: string, context: IActionContext): Promise<void> {
   const designTimeDirectory: Uri | undefined = await getOrCreateDesignTimeDirectory(designTimeDirectoryName, projectPath);
 
   if (!ext.designTimePort) {
@@ -42,8 +50,10 @@ export async function startBackendRuntime(projectPath: string): Promise<void> {
       if (designTimeDirectory) {
         await createJsonFile(designTimeDirectory, hostFileName, hostFileContent);
         await createJsonFile(designTimeDirectory, localSettingsFileName, modifiedSettingsFileContent);
-        await updateProjectPath(designTimeDirectory, localSettingsFileName, projectPath);
-
+        await addOrUpdateLocalAppSettings(context, designTimeDirectory.fsPath, {
+          APP_KIND: logicAppKind,
+          ProjectDirectoryPath: projectPath,
+        });
         const cwd: string = designTimeDirectory.fsPath;
         const portArgs = `--port ${ext.designTimePort}`;
         startDesignTimeProcess(ext.outputChannel, cwd, getFunctionsCommand(), 'host', 'start', portArgs);

apps/vs-code-designer/src/app/commands/dataMapper/dataMapper.ts

@@ -20,7 +20,7 @@ export const createNewDataMapCmd = (context: IActionContext) => {
 
     context.telemetry.properties.result = 'Succeeded';
 
-    DataMapperExt.openDataMapperPanel(newDataMapName);
+    DataMapperExt.openDataMapperPanel(newDataMapName, context);
   });
 };
 
@@ -165,7 +165,7 @@ export const loadDataMapFileCmd = async (context: IActionContext, uri: Uri) => {
   const dataMapName = path.basename(mapDefinitionPath, path.extname(mapDefinitionPath)).replace(draftMapDefinitionSuffix, ''); // Gets filename w/o ext (and w/o draft suffix)
 
   // Set map definition data to be loaded once webview sends webviewLoaded msg
-  DataMapperExt.openDataMapperPanel(dataMapName, {
+  DataMapperExt.openDataMapperPanel(dataMapName, context, {
     mapDefinition,
     sourceSchemaFileName: path.basename(srcSchemaPath),
     targetSchemaFileName: path.basename(tgtSchemaPath),

apps/vs-code-designer/src/app/utils/codeless/startDesignTimeApi.ts

@@ -20,14 +20,14 @@ import {
 import { ext } from '../../../extensionVariables';
 import { localize } from '../../../localize';
 import { type settingsFileContent } from '../../commands/dataMapper/extensionConfig';
+import { addOrUpdateLocalAppSettings } from '../appSettings/localSettings';
 import { updateFuncIgnore } from '../codeless/common';
 import { writeFormattedJson } from '../fs';
 import { getFunctionsCommand } from '../funcCoreTools/funcVersion';
 import { tryGetLogicAppProjectRoot } from '../verifyIsProject';
 import { getWorkspaceSetting, updateGlobalSetting } from '../vsCodeConfig/settings';
 import { getWorkspaceFolder } from '../workspace';
 import { delay } from '@azure/ms-rest-js';
-import { extend } from '@microsoft/logic-apps-shared';
 import {
   DialogResponses,
   openUrl,
@@ -39,7 +39,6 @@ import { WorkerRuntime } from '@microsoft/vscode-extension';
 import axios from 'axios';
 import * as cp from 'child_process';
 import * as fs from 'fs';
-import * as fse from 'fs-extra';
 import * as os from 'os';
 import * as path from 'path';
 import * as portfinder from 'portfinder';
@@ -94,7 +93,10 @@ export async function startDesignTimeApi(projectPath: string): Promise<void> {
       if (designTimeDirectory) {
         await createJsonFile(designTimeDirectory, hostFileName, hostFileContent);
         await createJsonFile(designTimeDirectory, localSettingsFileName, settingsFileContent);
-        await updateProjectPath(designTimeDirectory, localSettingsFileName, projectPath);
+        await addOrUpdateLocalAppSettings(actionContext, designTimeDirectory.fsPath, {
+          APP_KIND: logicAppKind,
+          ProjectDirectoryPath: projectPath,
+        });
         await updateFuncIgnore(projectPath, [`${designTimeDirectoryName}/`]);
         const cwd: string = designTimeDirectory.fsPath;
         const portArgs = `--port ${ext.designTimePort}`;
@@ -257,20 +259,3 @@ export async function createJsonFile(
     await writeFormattedJson(filePath.fsPath, fileContent);
   }
 }
-
-/**
- * Updates the project path in a settings file.
- * @param {Uri} directory - The directory where the settings file is located.
- * @param {string} fileName - The name of the settings file.
- * @param {string} projectDirectoryPath - The new project directory path to be updated in the settings file.
- */
-export async function updateProjectPath(directory: Uri, fileName: string, projectDirectoryPath: string) {
-  const filePath: Uri = Uri.file(path.join(directory.fsPath, fileName));
-
-  // Overwrite file
-  if (fs.existsSync(filePath.fsPath)) {
-    const fileJson: typeof settingsFileContent = JSON.parse(await fse.readFile(filePath.fsPath, 'utf-8'));
-    fileJson.Values[ProjectDirectoryPath] = projectDirectoryPath;
-    await fse.writeFile(filePath.fsPath, JSON.stringify(extend({}, fileJson), null, 2), 'utf-8');
-  }
-}

apps/vs-code-designer/src/constants.ts

@@ -202,6 +202,7 @@ export const targetBundleKey = 'FUNCTIONS_EXTENSIONBUNDLE_SOURCE_URI';
 
 // local.settings.json
 export const localEmulatorConnectionString = 'UseDevelopmentStorage=true';
+export const appKindSetting = 'APP_KIND';
 
 // Project
 export const defaultBundleId = 'Microsoft.Azure.Functions.ExtensionBundle';