fix(vscode): Fix new typescript version issues and import libraries

apps/vs-code-designer/package.json

@@ -2,7 +2,8 @@
   "name": "vscode-designer",
   "version": "3.3.0",
   "devDependencies": {
-    "@azure/arm-appservice": "13.0.3",
+    "@azure/arm-appservice": "^13.0.3",
+    "@azure/arm-appinsights": "^5.0.0-beta.7",
     "@azure/arm-storage": "17.2.1",
     "@azure/ms-rest-js": "^2.6.4",
     "@microsoft/logic-apps-shared": "workspace:*",

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

@@ -307,7 +307,7 @@ async function getProjectPathToDeploy(
 
     fse.mkdirSync(deployProjectPath);
 
-    await fse.copy(originalDeployFsPath, deployProjectPath, { overwrite: true, recursive: true });
+    await fse.copy(originalDeployFsPath, deployProjectPath, { overwrite: true });
 
     for (const [referenceKey, managedConnection] of Object.entries(parametizedConnections.managedApiConnections)) {
       try {

apps/vs-code-designer/src/app/commands/workflows/openMonitoringView/openMonitoringViewBase.ts

@@ -12,12 +12,8 @@ import type { WebviewPanel } from 'vscode';
 import * as vscode from 'vscode';
 
 export abstract class OpenMonitoringViewBase extends OpenDesignerBase {
-  protected panel: WebviewPanel;
-  protected panelGroupKey: ext.webViewKey;
   protected runId: string;
-  protected baseUrl: string;
   protected runName: string;
-  protected workflowName: string;
   protected workflowFilePath: string;
   protected localSettings: Record<string, string>;
 

apps/vs-code-designer/src/app/tree/configurationsTree/ConfigurationsTreeItem.ts

@@ -16,7 +16,7 @@ import { ProjectAccess, ProjectResource } from '@microsoft/vscode-extension-logi
 export class ConfigurationsTreeItem extends AzExtParentTreeItem {
   public static contextValue = 'azLogicAppsConfigurations';
   public readonly label: string = localize('Configurations', 'Configurations');
-  public readonly parent: SlotTreeItem;
+  public declare readonly parent: SlotTreeItem;
   public readonly appSettingsTreeItem: AppSettingsTreeItem;
   public isReadOnly: boolean;
 

apps/vs-code-designer/src/app/tree/configurationsTree/connectionsTree/ConnectionTreeItem.ts

@@ -17,7 +17,7 @@ import type {
 import { ProjectResource } from '@microsoft/vscode-extension-logic-apps';
 
 export class ConnectionTreeItem extends AzExtTreeItem {
-  public readonly parent: ConnectionsTreeItem;
+  public declare readonly parent: ConnectionsTreeItem;
   public readonly name: string;
   public readonly content: ConnectionReferenceModel | FunctionConnectionModel | ServiceProviderConnectionModel;
   private _fullName: string;

apps/vs-code-designer/src/app/tree/configurationsTree/connectionsTree/ConnectionsTreeItem.ts

@@ -15,7 +15,7 @@ import { ProjectAccess, ProjectResource } from '@microsoft/vscode-extension-logi
 export class ConnectionsTreeItem extends AzExtParentTreeItem {
   public readonly label: string = localize('Connections', 'Connections');
   public readonly childTypeLabel: string = localize('Connection', 'Connection');
-  public readonly parent: ConfigurationsTreeItem;
+  public declare readonly parent: ConfigurationsTreeItem;
   public isReadOnly: boolean;
 
   private constructor(parent: ConfigurationsTreeItem) {

apps/vs-code-designer/src/app/tree/configurationsTree/parametersTree/ParameterTreeItem.ts

@@ -12,7 +12,7 @@ import { ProjectResource } from '@microsoft/vscode-extension-logic-apps';
 import type { Parameter, IParametersFileContent } from '@microsoft/vscode-extension-logic-apps';
 
 export class ParameterTreeItem extends AzExtTreeItem {
-  public readonly parent: ParametersTreeItem;
+  public declare readonly parent: ParametersTreeItem;
   public readonly name: string;
   public readonly content: Parameter;
 

apps/vs-code-designer/src/app/tree/configurationsTree/parametersTree/ParametersTreeItem.ts

@@ -15,7 +15,7 @@ import { ProjectAccess, ProjectResource } from '@microsoft/vscode-extension-logi
 export class ParametersTreeItem extends AzExtParentTreeItem {
   public readonly label: string = localize('Parameters', 'Parameters');
   public readonly childTypeLabel: string = localize('Parameter', 'Parameter');
-  public readonly parent: ConfigurationsTreeItem;
+  public declare readonly parent: ConfigurationsTreeItem;
   public isReadOnly: boolean;
 
   private constructor(parent: ConfigurationsTreeItem) {

apps/vs-code-designer/src/app/tree/remoteWorkflowsTree/RemoteWorkflowTreeItem.ts

@@ -28,7 +28,7 @@ import { ProgressLocation, window } from 'vscode';
 
 export class RemoteWorkflowTreeItem extends AzExtTreeItem {
   public readonly name: string;
-  public readonly parent: RemoteWorkflowsTreeItem;
+  public declare readonly parent: RemoteWorkflowsTreeItem;
   public readonly workflowFileContent: IWorkflowFileContent;
   public credentials: ServiceClientCredentials;
 

apps/vs-code-designer/src/app/tree/remoteWorkflowsTree/RemoteWorkflowsTreeItem.ts

@@ -19,7 +19,7 @@ import type { Artifacts, Parameter } from '@microsoft/vscode-extension-logic-app
 export class RemoteWorkflowsTreeItem extends AzExtParentTreeItem {
   public readonly label: string = localize('Workflows', 'Workflows');
   public readonly childTypeLabel: string = localize('Workflow', 'Workflow');
-  public readonly parent: SlotTreeItem;
+  public declare readonly parent: SlotTreeItem;
   public isReadOnly: boolean;
 
   private _artifacts: Artifacts;

apps/vs-code-react/src/index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <title>VsCodeDesignerReact</title>
     <base href="/" />
-
+    <link rel="stylesheet" href="./styles.less">
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <script>
       global = globalThis;

e2e/designer/app.spec.ts

@@ -1,26 +1,30 @@
 import { expect, test } from '@playwright/test';
 
-test('Sanity Check', {
-  tag: '@mock',
-}, async ({ page }) => {
-  await page.goto('/');
+test(
+  'Sanity Check',
+  {
+    tag: '@mock',
+  },
+  async ({ page }) => {
+    await page.goto('/');
 
-  await page.getByText('Select an option').click();
-  await page.getByRole('option', { name: 'Simple Big Workflow' }).click();
-  await page.getByRole('button', { name: 'Toolbox' }).click();
-  await page.getByTestId('card-Increment variable').getByRole('button').click();
-  await page.getByLabel('Value').getByRole('paragraph').click();
-  await page.getByLabel('Value').press('Escape');
-  await page.getByRole('tab', { name: 'Code View' }).click();
-  await page.getByRole('tab', { name: 'About' }).click();
-  await page.getByRole('tab', { name: 'Settings' }).click();
-  await page.getByRole('tab', { name: 'Parameters' }).click();
-  await page.getByRole('tab', { name: 'Settings' }).click();
-  await page.getByRole('button', { name: 'Expanded Run After, Click to Collapse' }).click();
-  await page.getByRole('button', { name: 'Collapsed Run After, Click to Expand' }).click();
-  await page.getByRole('button', { name: 'Expanded Tracking, Click to Collapse' }).click();
-  await page.getByRole('button', { name: 'Collapsed Tracking, Click to Expand' }).click();
-  await page.getByRole('button', { name: 'Expand Initialize variable' }).click();
-  await page.getByRole('button', { name: 'Collapse Initialize variable' }).click();
-  expect(true).toBeTruthy();
-});
+    await page.getByText('Select an option').click();
+    await page.getByRole('option', { name: 'Simple Big Workflow' }).click();
+    await page.getByRole('button', { name: 'Toolbox' }).click();
+    await page.getByTestId('card-Increment variable').getByRole('button').click();
+    await page.getByLabel('Value').getByRole('paragraph').click();
+    await page.getByLabel('Value').press('Escape');
+    await page.getByRole('tab', { name: 'Code View' }).click();
+    await page.getByRole('tab', { name: 'About' }).click();
+    await page.getByRole('tab', { name: 'Settings' }).click();
+    await page.getByRole('tab', { name: 'Parameters' }).click();
+    await page.getByRole('tab', { name: 'Settings' }).click();
+    await page.getByRole('button', { name: 'Expanded Run After, Click to Collapse' }).click();
+    await page.getByRole('button', { name: 'Collapsed Run After, Click to Expand' }).click();
+    await page.getByRole('button', { name: 'Expanded Tracking, Click to Collapse' }).click();
+    await page.getByRole('button', { name: 'Collapsed Tracking, Click to Expand' }).click();
+    await page.getByRole('button', { name: 'Expand Initialize variable' }).click();
+    await page.getByRole('button', { name: 'Collapse Initialize variable' }).click();
+    expect(true).toBeTruthy();
+  }
+);

e2e/designer/dragAndDrop.spec.ts

@@ -1,22 +1,28 @@
 import { test } from '@playwright/test';
 
-test('Should be able to drag and drop operations', {
-  tag: '@mock',
-}, async ({ page }) => {
-  await page.goto('/');
+test(
+  'Should be able to drag and drop operations',
+  {
+    tag: '@mock',
+  },
+  async ({ page }) => {
+    await page.goto('/');
 
-  await page.locator('text=Select an option').click();
-  await page.locator('button[role="option"]:has-text("Simple Big Workflow")').click();
-  await page.locator('div[role="button"]:has-text("🧰")').click();
+    await page.locator('text=Select an option').click();
+    await page.locator('button[role="option"]:has-text("Simple Big Workflow")').click();
+    await page.locator('div[role="button"]:has-text("🧰")').click();
 
-  const originElement = await page.waitForSelector('div[role="button"]:has-text("Increment variable55")');
-  const destinationElement = await page.waitForSelector('g:nth-child(51) > .edgebutton-foreignobject > div > .msla-drop-zone-viewmanager2');
+    const originElement = await page.waitForSelector('div[role="button"]:has-text("Increment variable55")');
+    const destinationElement = await page.waitForSelector(
+      'g:nth-child(51) > .edgebutton-foreignobject > div > .msla-drop-zone-viewmanager2'
+    );
 
-  await originElement.hover();
-  await page.mouse.down();
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  const box = (await destinationElement.boundingBox())!;
-  await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
-  await destinationElement.hover();
-  await page.mouse.up();
-});
+    await originElement.hover();
+    await page.mouse.down();
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const box = (await destinationElement.boundingBox())!;
+    await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
+    await destinationElement.hover();
+    await page.mouse.up();
+  }
+);

e2e/designer/real-api/sanity-test.spec.ts

@@ -1,36 +1,37 @@
 import { expect, test } from '@playwright/test';
 
 test.describe(
-    'Sanity Check',
-    {
-        tag: '@real',
-    }, () => {
+  'Sanity Check',
+  {
+    tag: '@real',
+  },
+  () => {
+    test('Sanity Check', async ({ page, request, browserName }) => {
+      await page.goto('/');
+      await page.getByPlaceholder('Select an App').click({ timeout: 20000 });
+      await page.getByPlaceholder('Select an App').fill(`wapp-lauxtest${browserName}`, { timeout: 20000 });
+      await page.getByPlaceholder('Select an App').press('Enter', { timeout: 20000 });
+      await page.getByLabel('Workflow').locator('span').filter({ hasText: '' }).click({ timeout: 20000 });
+      await page.getByRole('option', { name: 'testWorkflow1' }).click({ timeout: 20000 });
+      await page.getByRole('button', { name: 'Toolbox' }).click({ timeout: 20000 });
+      await page.getByTestId('card-When a HTTP request is received').getByLabel('When a HTTP request is').click({ timeout: 20000 });
+      await page.getByRole('combobox', { name: 'Method' }).click({ timeout: 20000 });
+      await page.getByRole('option', { name: 'GET' }).click({ timeout: 20000 });
+      await page.getByLabel('Insert a new step after When').click({ timeout: 20000 });
+      await page.getByRole('menuitem', { name: 'Add an action' }).click({ timeout: 20000 });
+      await page.getByPlaceholder('Search').fill('response', { timeout: 20000 });
+      await page.getByLabel('Response This is an incoming').click({ timeout: 20000 });
+      await page.getByLabel('Body').getByRole('paragraph').click({ timeout: 20000 });
+      await page.getByLabel('Body').fill('Test Body', { timeout: 20000 });
+      await page.getByRole('menuitem', { name: 'Save Save' }).click({ timeout: 20000 });
 
-        test('Sanity Check', async ({ page, request, browserName }) => {
-            await page.goto('/');
-            await page.getByPlaceholder('Select an App').click({ timeout: 20000 });
-            await page.getByPlaceholder('Select an App').fill(`wapp-lauxtest${browserName}`, { timeout: 20000 });
-            await page.getByPlaceholder('Select an App').press('Enter', { timeout: 20000 });
-            await page.getByLabel('Workflow').locator('span').filter({ hasText: '' }).click({ timeout: 20000 });
-            await page.getByRole('option', { name: 'testWorkflow1' }).click({ timeout: 20000 });
-            await page.getByRole('button', { name: 'Toolbox' }).click({ timeout: 20000 });
-            await page.getByTestId('card-When a HTTP request is received').getByLabel('When a HTTP request is').click({ timeout: 20000 });
-            await page.getByRole('combobox', { name: 'Method' }).click({ timeout: 20000 });
-            await page.getByRole('option', { name: 'GET' }).click({ timeout: 20000 });
-            await page.getByLabel('Insert a new step after When').click({ timeout: 20000 });
-            await page.getByRole('menuitem', { name: 'Add an action' }).click({ timeout: 20000 });
-            await page.getByPlaceholder('Search').fill('response', { timeout: 20000 });
-            await page.getByLabel('Response This is an incoming').click({ timeout: 20000 });
-            await page.getByLabel('Body').getByRole('paragraph').click({ timeout: 20000 });
-            await page.getByLabel('Body').fill('Test Body', { timeout: 20000 });
-            await page.getByRole('menuitem', { name: 'Save Save' }).click({ timeout: 20000 });
-
-            await page.waitForResponse((resp) => resp.url().includes('/deployWorkflowArtifacts') && resp.status() === 200);
-            await page.waitForTimeout(6000);
-            await page.getByTestId('card-When a HTTP request is received').getByLabel('When a HTTP request is').click({ timeout: 20000 });
-            const value = await page.getByRole('textbox', { name: 'URL will be generated after' }).inputValue();
-            const LAResult = await request.get(value);
-            expect(LAResult.status()).toBe(200);
-            expect(await LAResult.text()).toBe('Test Body');
-        })
-    });
+      await page.waitForResponse((resp) => resp.url().includes('/deployWorkflowArtifacts') && resp.status() === 200);
+      await page.waitForTimeout(6000);
+      await page.getByTestId('card-When a HTTP request is received').getByLabel('When a HTTP request is').click({ timeout: 20000 });
+      const value = await page.getByRole('textbox', { name: 'URL will be generated after' }).inputValue();
+      const LAResult = await request.get(value);
+      expect(LAResult.status()).toBe(200);
+      expect(await LAResult.text()).toBe('Test Body');
+    });
+  }
+);

e2e/designer/serialization.spec.ts

@@ -1,29 +1,33 @@
 import { test, expect } from '@playwright/test';
 
-test('Should serialize the workflow after deserializing it and match', {
-  tag: '@mock',
-}, async ({ page }) => {
-  await page.goto('/');
+test(
+  'Should serialize the workflow after deserializing it and match',
+  {
+    tag: '@mock',
+  },
+  async ({ page }) => {
+    await page.goto('/');
 
-  await page.locator('text=Select an option').click();
-  await page.locator('button[role="option"]:has-text("Panel")').click();
-  await page.locator('div[role="button"]:has-text("🧰")').click();
+    await page.locator('text=Select an option').click();
+    await page.locator('button[role="option"]:has-text("Panel")').click();
+    await page.locator('div[role="button"]:has-text("🧰")').click();
 
-  const serialized: any = await page.evaluate(() => {
-    return new Promise((resolve) => {
-      setTimeout(() => {
-        const state = (window as any).DesignerStore.getState();
-        resolve((window as any).DesignerModule.serializeBJSWorkflow(state));
-      }, 5000);
+    const serialized: any = await page.evaluate(() => {
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          const state = (window as any).DesignerStore.getState();
+          resolve((window as any).DesignerModule.serializeBJSWorkflow(state));
+        }, 5000);
+      });
     });
-  });
 
-  const mock = await import('../../__mocks__/workflows/Panel.json', {
-    assert: { type: 'json' }
-  });
+    const mock = await import('../../__mocks__/workflows/Panel.json', {
+      assert: { type: 'json' },
+    });
 
-  expect({ connectionReferences: {}, parameters: {}, definition: mock.default.definition }).toEqual(serialized as any);
-});
+    expect({ connectionReferences: {}, parameters: {}, definition: mock.default.definition }).toEqual(serialized as any);
+  }
+);
 
 test('Should serialize the workflow after deserializing it and match with a switch statement', async ({ page }) => {
   await page.goto('/');
@@ -42,7 +46,7 @@ test('Should serialize the workflow after deserializing it and match with a swit
   });
 
   const mock = await import('../../__mocks__/workflows/Switch.json', {
-    assert: { type: 'json' }
+    assert: { type: 'json' },
   });
 
   expect({ connectionReferences: {}, parameters: {}, definition: mock.default.definition }).toEqual(serialized as any);
@@ -67,7 +71,7 @@ test('Should serialize the workflow after deserializing it and match with some s
   });
 
   const mock = await import('../../__mocks__/workflows/UnicodeKeys.json', {
-    assert: { type: 'json' }
+    assert: { type: 'json' },
   });
 
   expect({ connectionReferences: {}, parameters: {}, definition: mock.default.definition }).toEqual(serialized as any);