feat(Designer): Direct standalone initialization

apps/Standalone/src/designer/app/AzureLogicAppsDesigner/LogicAppSelectionSetting/AzureConsumptionLogicAppSelector.tsx

@@ -69,6 +69,22 @@ export const AzureConsumptionLogicAppSelector = () => {
     }
   }, [reloadRunIds, runId, runInstances?.value]);
 
+  // If url query has preset values, set them on load
+  useEffect(() => {
+    const urlParams = new URLSearchParams(window.location.search);
+    const resourceId = urlParams.get('id');
+    if (resourceId) {
+      dispatch(setAppid(resourceId));
+      dispatch(setResourcePath(resourceId));
+      const workflowName = resourceId.split('/').at(-1) ?? '';
+      dispatch(setWorkflowName(workflowName));
+    }
+    const runId = urlParams.get('runId');
+    if (runId) {
+      dispatch(changeRunId(runId));
+    }
+  }, [dispatch]);
+
   const runOptions =
     runInstances?.value
       ?.map<IDropdownOption>((runInstance) => ({

apps/Standalone/src/designer/app/AzureLogicAppsDesigner/LogicAppSelectionSetting/AzureStandardLogicAppSelector.tsx

@@ -128,6 +128,28 @@ export const AzureStandardLogicAppSelector = ({
       })
       .sort((a, b) => a.text.localeCompare(b.text)) ?? [];
 
+  // If url query has preset values, set them on load
+  useEffect(() => {
+    const urlParams = new URLSearchParams(window.location.search);
+    const resourceId = urlParams.get('id');
+    if (resourceId) {
+      const appId = resourceId.substring(0, resourceId.lastIndexOf('/workflows'));
+      dispatch(setAppid(appId));
+      onLogicAppSelected?.();
+      const workflowName = resourceId.split('/').at(-1) ?? '';
+      dispatch(setWorkflowName(workflowName));
+      dispatch(
+        setResourcePath(
+          hostingPlan === 'hybrid' ? `${HybridAppUtility.getHybridAppBaseRelativeUrl(appId ?? '')}/workflows/${workflowName}` : resourceId
+        )
+      );
+    }
+    const runId = urlParams.get('runId');
+    if (runId) {
+      dispatch(changeRunId(runId));
+    }
+  }, [dispatch]);
+
   return (
     <Stack {...columnProps}>
       <div style={{ position: 'relative' }}>

apps/Standalone/src/designer/app/LocalDesigner/LogicAppSelector/LogicAppSelector.tsx

@@ -3,7 +3,7 @@ import { useResourcePath, useIsMonitoringView, useRunFiles } from '../../../stat
 import { setResourcePath, loadWorkflow, loadRun } from '../../../state/workflowLoadingSlice';
 import type { IDropdownOption } from '@fluentui/react';
 import { Dropdown, DropdownMenuItemType } from '@fluentui/react';
-import { useCallback, useMemo } from 'react';
+import { useCallback, useEffect, useMemo } from 'react';
 import { useDispatch } from 'react-redux';
 
 const fileOptions = [
@@ -98,15 +98,33 @@ export const LocalLogicAppSelector: React.FC = () => {
   );
 
   const runOptions = useMemo(() => {
-    return runFiles.map((runFile) => {
-      return {
-        key: runFile.path,
-        text: runFile.path.split('/').pop().replace('.json', ''),
-        module: runFile.module,
-      };
-    });
+    return runFiles.map((runFile) => ({
+      key: runFile.path,
+      text: runFile.path.split('/').pop().replace('.json', ''),
+      module: runFile.module,
+    }));
   }, [runFiles]);
 
+  // If url query has preset values, set them on load
+  useEffect(() => {
+    const urlParams = new URLSearchParams(window.location.search);
+    const resourceId = urlParams.get('localId');
+    const resourceOption = fileOptions.find((opt) => opt.key === resourceId);
+    if (resourceId && resourceOption) {
+      dispatch(setResourcePath(resourceId));
+      dispatch(loadWorkflow(resourceOption));
+    }
+  }, [dispatch]);
+
+  useEffect(() => {
+    const urlParams = new URLSearchParams(window.location.search);
+    const runId = urlParams.get('localRunId');
+    const runFile = runOptions.find((run) => run.text === runId)?.module;
+    if (runFile) {
+      dispatch(loadRun({ runFile }));
+    }
+  }, [dispatch, runOptions]);
+
   return (
     <div>
       <div>

apps/Standalone/src/designer/app/SettingsSections/sourceSettings.tsx

@@ -2,7 +2,13 @@ import { environment } from '../../../environments/environment';
 import { getStateHistory } from '../../state/historyHelpers';
 import type { AppDispatch } from '../../state/store';
 import { useIsLocal, useHostingPlan, useResourcePath } from '../../state/workflowLoadingSelectors';
-import { type HostingPlanTypes, loadLastWorkflow, setHostingPlan, setIsLocalSelected } from '../../state/workflowLoadingSlice';
+import {
+  type HostingPlanTypes,
+  loadLastWorkflow,
+  setHostingPlan,
+  setIsLocalSelected,
+  setMonitoringView,
+} from '../../state/workflowLoadingSlice';
 import { ChoiceGroup, IconButton } from '@fluentui/react';
 import { useEffect, useMemo } from 'react';
 import { useDispatch } from 'react-redux';
@@ -33,6 +39,23 @@ const SourceSettings = ({
     planOptions.push({ key: 'hybrid', text: 'Hybrid' });
   }
 
+  // If a plan is specified in the URL params, set it on load
+  useEffect(() => {
+    const urlParams = new URLSearchParams(window.location.search);
+    const plan = urlParams.get('plan');
+    if (plan) {
+      dispatch(setHostingPlan(plan as HostingPlanTypes));
+    }
+    const localId = urlParams.get('localId');
+    if (localId) {
+      dispatch(setIsLocalSelected(true));
+    }
+    const runId = urlParams.get('localRunId') || urlParams.get('runId');
+    if (runId) {
+      dispatch(setMonitoringView(true));
+    }
+  }, [dispatch]);
+
   return (
     <div style={{ display: 'flex', gap: '24px' }}>
       {showEnvironment ? (

apps/Standalone/src/designer/components/settings_box.tsx

@@ -11,8 +11,13 @@ import { ThemeProvider } from '@fluentui/react';
 import { useBoolean } from '@fluentui/react-hooks';
 import { css } from '@fluentui/utilities';
 
+const isLoadingDirect = () => {
+  const urlParams = new URLSearchParams(window.location.search);
+  return urlParams.get('id') !== null || urlParams.get('localId') !== null;
+};
+
 export const SettingsBox = () => {
-  const [active, toggleActive] = useBoolean(true);
+  const [active, toggleActive] = useBoolean(isLoadingDirect());
   const isDark = useIsDarkMode();
   const isLocal = useIsLocal();
   const isConsumption = useHostingPlan() === 'consumption';

e2e/designer/TokenPicker.spec.ts

@@ -1,5 +1,5 @@
 import test, { expect } from '@playwright/test';
-import { GoToMockWorkflow } from './utils/GoToWorkflow';
+import { LoadMockDirect } from './utils/GoToWorkflow';
 
 test.describe(
   'Token Picker Tests',
@@ -8,9 +8,7 @@ test.describe(
   },
   async () => {
     test('Token picker search should have robust name matching', async ({ page }) => {
-      await page.goto('/');
-
-      await GoToMockWorkflow(page, 'Panel');
+      await LoadMockDirect(page, 'Panel.json');
 
       await page.getByLabel('Parse JSON operation, Data').click();
       await page.getByLabel('Content').click();
@@ -28,9 +26,7 @@ test.describe(
     });
 
     test('Expression Editor works with dynamic content', async ({ page }) => {
-      await page.goto('/');
-
-      await GoToMockWorkflow(page, 'Panel');
+      await LoadMockDirect(page, 'Panel.json');
       await page.getByLabel('Parse JSON operation, Data').click();
       await page.getByLabel('Content').click();
       await page.locator('[data-automation-id="msla-token-picker-entrypoint-button-expression"]').click();

e2e/designer/app.spec.ts

@@ -1,15 +1,13 @@
 import { expect, test } from '@playwright/test';
-import { GoToMockWorkflow } from './utils/GoToWorkflow';
+import { LoadMockDirect } from './utils/GoToWorkflow';
 
 test(
   'Sanity Check',
   {
     tag: '@mock',
   },
   async ({ page }) => {
-    await page.goto('/');
-
-    await GoToMockWorkflow(page, 'Simple Big Workflow');
+    await LoadMockDirect(page, 'simpleBigworkflow.json');
 
     await page.getByTestId('card-increment_variable').getByRole('button').click();
     await page.getByLabel('Value').getByRole('paragraph').click();

e2e/designer/collapseActions.spec.ts

@@ -1,5 +1,5 @@
 import { test, expect } from '@playwright/test';
-import { GoToMockWorkflow } from './utils/GoToWorkflow';
+import { LoadMockDirect } from './utils/GoToWorkflow';
 
 test.describe(
   'Collapse actions tests',
@@ -8,8 +8,7 @@ test.describe(
   },
   () => {
     test('Should collapse actions', async ({ page }) => {
-      await page.goto('/');
-      await GoToMockWorkflow(page, 'Panel');
+      await LoadMockDirect(page, 'Panel.json');
 
       // Collapse action
       await page.getByText('HTTP', { exact: true }).click({ button: 'right' });
@@ -21,8 +20,7 @@ test.describe(
     });
 
     test('Should collapse actions and expand', async ({ page }) => {
-      await page.goto('/');
-      await GoToMockWorkflow(page, 'Panel');
+      await LoadMockDirect(page, 'Panel.json');
 
       // Collapse last action
       await page.getByText('Filter array', { exact: true }).click({ button: 'right' });
@@ -52,8 +50,7 @@ test.describe(
     });
 
     test('Should collapse actions within scope', async ({ page }) => {
-      await page.goto('/');
-      await GoToMockWorkflow(page, 'Scope');
+      await LoadMockDirect(page, 'simpleScoped.json');
 
       // Collapse nested scope
       await page.getByText('Scope nested', { exact: true }).click({ button: 'right' });

e2e/designer/contextMenus.spec.ts

@@ -1,5 +1,5 @@
 import { test, expect } from '@playwright/test';
-import { GoToMockWorkflow } from './utils/GoToWorkflow';
+import { LoadMockDirect } from './utils/GoToWorkflow';
 
 test.describe(
   'ContextMenu Tests',
@@ -8,8 +8,7 @@ test.describe(
   },
   () => {
     test('Should open node context menus', async ({ page }) => {
-      await page.goto('/');
-      await GoToMockWorkflow(page, 'Scope');
+      await LoadMockDirect(page, 'simpleScoped.json');
 
       // Open trigger context menu
       await page.getByText('manual', { exact: true }).click({ button: 'right' });
@@ -26,8 +25,7 @@ test.describe(
     });
 
     test('Should open edge context menus', async ({ page }) => {
-      await page.goto('/');
-      await GoToMockWorkflow(page, 'Scope');
+      await LoadMockDirect(page, 'simpleScoped.json');
 
       // Click first edge button
       await page.getByLabel('Insert a new step between manual and Initialize variable').click();

e2e/designer/dragAndDrop.spec.ts

@@ -1,15 +1,13 @@
 import { test } from '@playwright/test';
-import { GoToMockWorkflow } from './utils/GoToWorkflow';
+import { LoadMockDirect } from './utils/GoToWorkflow';
 
 test(
   'Should be able to drag and drop operations',
   {
     tag: '@mock',
   },
   async ({ page }) => {
-    await page.goto('/');
-
-    await GoToMockWorkflow(page, 'Panel');
+    await LoadMockDirect(page, 'Panel.json');
     await page.getByTestId('card-http').dragTo(page.getByTestId('msla-plus-button-manual-initialize_arrayvariable'));
   }
 );

e2e/designer/editors/condition.spec.ts

@@ -1,15 +1,13 @@
 import { test, expect } from '@playwright/test';
-import { GoToMockWorkflow } from '../utils/GoToWorkflow';
+import { LoadMockDirect } from '../utils/GoToWorkflow';
 
 test(
   'condition editor',
   {
     tag: '@mock',
   },
   async ({ page }) => {
-    await page.goto('/');
-
-    await GoToMockWorkflow(page, 'Conditionals');
+    await LoadMockDirect(page, 'Conditionals.json');
     await expect(page.getByLabel('Condition operation')).toBeVisible();
 
     await page.getByLabel('Condition operation').click();

e2e/designer/editors/dictionary.spec.ts

@@ -1,5 +1,5 @@
 import { test, expect } from '@playwright/test';
-import { GoToMockWorkflow } from '../utils/GoToWorkflow';
+import { LoadMockDirect } from '../utils/GoToWorkflow';
 
 test.describe(
   'dictionary editor',
@@ -8,9 +8,7 @@ test.describe(
   },
   async () => {
     test('Should handle dictionary serialization', async ({ page }) => {
-      await page.goto('/');
-
-      await GoToMockWorkflow(page, 'Panel');
+      await LoadMockDirect(page, 'Panel.json');
       await page.getByLabel('Insert a new step between Initialize ArrayVariable and Parse JSON').click();
       await page.getByText('Add an action').click();
       await page.getByLabel('HTTP', { exact: true }).first().click();
@@ -46,9 +44,7 @@ test.describe(
     });
 
     test('Should not do value string interpolation if is of type `any` and has a token', async ({ page }) => {
-      await page.goto('/');
-
-      await GoToMockWorkflow(page, 'Panel');
+      await LoadMockDirect(page, 'Panel.json');
       await page.getByLabel('Insert a new step between Initialize ArrayVariable and Parse JSON').click();
       await page.getByText('Add an action').click();
       await page.getByPlaceholder('Search for an action or').fill('select');

e2e/designer/editors/password.spec.ts

@@ -1,15 +1,13 @@
 import { test, expect } from '@playwright/test';
-import { GoToMockWorkflow } from '../utils/GoToWorkflow';
+import { LoadMockDirect } from '../utils/GoToWorkflow';
 
 test(
   'password mask',
   {
     tag: '@mock',
   },
   async ({ page }) => {
-    await page.goto('/');
-
-    await GoToMockWorkflow(page, 'Panel');
+    await LoadMockDirect(page, 'Panel.json');
 
     await page.getByTestId('card-http').click();
     await page.getByPlaceholder('Showing 0 of').click();

e2e/designer/errorsPanel.spec.ts

@@ -1,5 +1,5 @@
 import { test, expect } from '@playwright/test';
-import { GoToMockWorkflow } from './utils/GoToWorkflow';
+import { LoadMockDirect } from './utils/GoToWorkflow';
 
 test.describe(
   'ErrorsPanel Tests',
@@ -8,8 +8,7 @@ test.describe(
   },
   () => {
     test('Should show operation errors in errors panel', async ({ page }) => {
-      await page.goto('/');
-      await GoToMockWorkflow(page, 'Panel');
+      await LoadMockDirect(page, 'Panel.json');
 
       await page.getByRole('button', { name: 'zoom out' }).click();
 
@@ -35,8 +34,7 @@ test.describe(
     });
 
     test('Should show workflow parameters errors in errors panel', async ({ page }) => {
-      await page.goto('/');
-      await GoToMockWorkflow(page, 'Panel');
+      await LoadMockDirect(page, 'Panel.json');
 
       // Open workflow parameters panel
       await page.getByText('Workflow Parameters', { exact: true }).click();

e2e/designer/fixtures/real-api.ts

@@ -15,14 +15,7 @@ export class RealDataApi {
     this.siteId = `/subscriptions/${process.env.AZURE_SUBSCRIPTION_ID}/resourceGroups/${process.env.AZURE_RESOURCE_GROUP}/providers/Microsoft.Web/sites/${this.siteName}`;
   }
   async goToWorkflow(workflowName?: string) {
-    await this.page.getByPlaceholder('Select an App').click();
-    await this.page.getByPlaceholder('Select an App').fill(this.siteName);
-    await this.page.getByPlaceholder('Select an App').press('Enter');
-    await this.page.getByText('Select a Workflow').click();
-    await this.page.getByRole('option', { name: workflowName ?? this.workflowName, exact: true }).click();
-    await this.page.getByRole('button', { name: 'Toolbox' }).click();
-    await this.page.waitForTimeout(2000);
-    await this.page.getByLabel('Zoom view to fit').click({ force: true });
+    await this.page.goto(`/?id=${workflowName ?? this.workflowName}&plan=standard`);
   }
   async saveWorkflow() {
     const responsePromise = this.page.waitForResponse(