Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
167 changes: 167 additions & 0 deletions UI_ENHANCEMENT_SUMMARY.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,167 @@
# Server Logic Debugging - UI Enhancement Summary

## Overview
Enhanced the Power Pages Server Logic debugging feature with multiple UI entry points to improve discoverability and user experience.

## Changes Made

### 1. CodeLens Provider (`ServerLogicCodeLensProvider.ts`)
**Purpose**: Show inline debug/run actions above functions in server logic files

**Features**:
- Displays "▶ Debug" and "▶ Run" above the first function in each file
- Falls back to showing at top of file if no functions found
- Only appears for `.js` files in `server-logics/` folder
- Uses VS Code icons: `$(debug-alt)` and `$(run)`

**Implementation**:
```typescript
export class ServerLogicCodeLensProvider implements vscode.CodeLensProvider {
provideCodeLenses(document: vscode.TextDocument): vscode.CodeLens[] {
// Finds function declarations
// Creates debug and run CodeLens items
// Returns array of CodeLens for rendering
}
}
```

### 2. Run Command (`powerpages.runServerLogic`)
**Purpose**: Execute server logic without debugging (no breakpoints)

**Implementation**:
- Added to `ServerLogicDebugger.ts`
- Similar to debug command but sets `noDebug: true`
- Validates file is in `server-logics/` folder
- Logs telemetry event: `ServerLogicRunCommandExecuted`

### 3. Package.json Updates

#### Commands Section
Added new command:
```json
{
"command": "powerpages.runServerLogic",
"category": "Power Pages",
"title": "Run Server Logic File",
"icon": "$(run)",
"enablement": "resourcePath =~ /server-logics/ && resourceExtname == .js"
}
```

#### Editor Toolbar (Already Implemented)
```json
"editor/title": [
{
"command": "powerpages.debugServerLogic",
"group": "navigation",
"when": "resourcePath =~ /server-logics/ && resourceExtname == .js && !virtualWorkspace"
}
]
```

#### Context Menu (Already Implemented)
```json
"editor/context": [
{
"command": "powerpages.debugServerLogic",
"group": "z_commands",
"when": "resourcePath =~ /server-logics/ && resourceExtname == .js && !virtualWorkspace"
}
]
```

### 4. Registration in Extension
Updated `ServerLogicDebugger.ts` to register CodeLens provider:
```typescript
const codeLensProvider = new ServerLogicCodeLensProvider();
context.subscriptions.push(
vscode.languages.registerCodeLensProvider(
{ pattern: '**/server-logics/**/*.js' },
codeLensProvider
)
);
```

### 5. Telemetry
Added new event to `desktopExtensionTelemetryEventNames.ts`:
- `SERVER_LOGIC_RUN_COMMAND_EXECUTED`

### 6. Documentation Updates
Updated `README.md` with:
- UI Features section describing toolbar, CodeLens, context menu
- Updated Quick Start with all available methods
- Added "Running Without Debugging" section
- Listed new files created

## User Experience Flow

### Discovery
1. **First Time**: Welcome notification appears with "Debug Current File" button
2. **Editor UI**: Debug icon (🐛) visible in toolbar when server logic file is open
3. **CodeLens**: Inline "▶ Debug | Run" appears above functions
4. **Context Menu**: Right-click shows debug option
5. **Command Palette**: Search for "debug" or "run" shows commands
6. **Keyboard**: F5 starts debugging

### Debugging
1. User clicks any entry point (toolbar/CodeLens/menu/F5)
2. Extension generates runtime loader with mock SDK
3. Node.js debugger launches with `--require` flag
4. Breakpoints hit, variables inspectable
5. Full debugging capabilities available

### Running Without Debugging
1. Click "▶ Run" CodeLens or use command
2. Code executes quickly without stopping at breakpoints
3. Useful for testing output without debugging overhead

## Files Modified/Created

### New Files (3)
1. `src/debugger/server-logic/ServerLogicCodeLensProvider.ts` - CodeLens implementation
2. Documentation updates in README.md
3. This summary document

### Modified Files (4)
1. `src/debugger/server-logic/ServerLogicDebugger.ts` - Added run command, registered CodeLens
2. `src/debugger/server-logic/index.ts` - Exported CodeLens provider
3. `package.json` - Added run command definition
4. `src/common/OneDSLoggerTelemetry/client/desktopExtensionTelemetryEventNames.ts` - Added telemetry event

## Testing Checklist

- [ ] CodeLens appears above functions in `.js` files in `server-logics/`
- [ ] CodeLens does not appear in non-server-logic files
- [ ] Click "Debug" CodeLens starts debugging
- [ ] Click "Run" CodeLens executes without debugging
- [ ] Editor toolbar shows debug icon for server logic files
- [ ] Context menu shows debug option
- [ ] F5 starts debugging
- [ ] Runtime loader generated correctly
- [ ] Mock SDK available in debug session
- [ ] Breakpoints work
- [ ] Run command executes without stopping at breakpoints
- [ ] Telemetry events logged correctly
- [ ] Welcome notification appears first time only

## Conditional Rendering

All UI elements conditionally display based on:
- File path contains `server-logics/`
- File extension is `.js`
- Not in web/virtual workspace (`!virtualWorkspace`)

## Next Steps

1. **Compile**: Run `npm run compile` to build TypeScript
2. **Test**: Press F5 in extension development host
3. **Validate**:
- Open workspace with `server-logics/` folder
- Open a `.js` file from that folder
- Verify all UI elements appear
- Test debugging and running
4. **User Documentation**: Create user-facing docs with screenshots
5. **Consider Enhancements**:
- Add "Debug All Tests" if multiple server logic files
- Add configuration options for mock data location
- Add output channel for Server.Logger messages
53 changes: 53 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -404,6 +404,20 @@
"category": "Copilot In Power Pages",
"title": "Explain"
},
{
"command": "powerpages.debugServerLogic",
"category": "Power Pages",
"title": "Debug Current Server Logic File",
"icon": "$(debug-alt)",
"enablement": "resourcePath =~ /server-logics/ && resourceExtname == .js"
},
{
"command": "powerpages.runServerLogic",
"category": "Power Pages",
"title": "Run Server Logic File",
"icon": "$(run)",
"enablement": "resourcePath =~ /server-logics/ && resourceExtname == .js"
},
{
"command": "powerPlatform.previewCurrentActiveUsers",
"title": "Current Active Users",
Expand Down Expand Up @@ -726,6 +740,45 @@
}
}
}
},
{
"type": "node",
"label": "Power Pages Server Logic Debugger",
"configurationSnippets": [
{
"label": "Power Pages: Debug Server Logic",
"description": "Debug a Power Pages server logic file with mock SDK support",
"body": {
"type": "node",
"request": "launch",
"name": "Debug Power Pages Server Logic",
"program": "^\"\\${workspaceFolder}/server-logics/\\${1:MyServerLogic.js}\"",
"skipFiles": [
"<node_internals>/**"
],
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen"
}
},
{
"label": "Power Pages: Debug Server Logic with Custom Mock Data",
"description": "Debug server logic with custom mock data from .vscode/mock-data.json",
"body": {
"type": "node",
"request": "launch",
"name": "Debug Server Logic with Custom Data",
"program": "^\"\\${workspaceFolder}/server-logics/\\${1:MyServerLogic.js}\"",
"env": {
"MOCK_DATA_PATH": "^\"\\${workspaceFolder}/.vscode/mock-data.json\""
},
"skipFiles": [
"<node_internals>/**"
],
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen"
}
}
]
}
],
"snippets": [
Expand Down
5 changes: 5 additions & 0 deletions src/client/extension.ts
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@ import { PROVIDER_ID } from "../common/services/Constants";
import { activateServerApiAutocomplete } from "../common/intellisense";
import { EnableServerLogicChanges } from "../common/ecs-features/ecsFeatureGates";
import { setServerApiTelemetryContext } from "../common/intellisense/ServerApiTelemetryContext";
import { activateServerLogicDebugger } from "../debugger/server-logic/ServerLogicDebugger";

let client: LanguageClient;
let _context: vscode.ExtensionContext;
Expand Down Expand Up @@ -183,6 +184,9 @@ export async function activate(
const basicPanels = RegisterBasicPanels(pacWrapper);
_context.subscriptions.push(...basicPanels);

// Activate Server Logic debugger with PAC wrapper for automatic authentication
activateServerLogicDebugger(_context, pacWrapper);

let copilotNotificationShown = false;

const workspaceFolders = getWorkspaceFolders();
Expand Down Expand Up @@ -246,6 +250,7 @@ export async function activate(
activateServerApiAutocomplete(_context, [
{ languageId: 'javascript', triggerCharacters: ['.'] }
]);

serverApiAutocompleteInitialized = true;
}
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,8 @@

export enum desktopTelemetryEventNames {
DESKTOP_EXTENSION_INIT_CONTEXT = "DesktopExtensionInitContext",
SERVER_LOGIC_DEBUG_STARTED = "ServerLogicDebugStarted",
SERVER_LOGIC_DEBUG_COMMAND_EXECUTED = "ServerLogicDebugCommandExecuted",
SERVER_LOGIC_RUN_COMMAND_EXECUTED = "ServerLogicRunCommandExecuted",
SERVER_LOGIC_AUTH_ERROR = "ServerLogicAuthError",
}
106 changes: 106 additions & 0 deletions src/debugger/server-logic/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,106 @@
# Server Logic Debugging

This directory contains the implementation for debugging Power Pages Server Logic files locally with mock SDK support.

## Features

- **Mock Server SDK**: Complete mock implementation of `Server.Logger`, `Server.Connector.HttpClient`, `Server.Connector.Dataverse`, `Server.Context`, `Server.User`, and `Server.Environment`
- **Breakpoint Debugging**: Set breakpoints and step through your server logic code
- **Variable Inspection**: Inspect variables and call stack in VS Code debugger
- **Custom Mock Data**: Provide custom mock data via `.vscode/mock-data.json`
- **IntelliSense Support**: Full autocomplete for all Server APIs

## How It Works

1. When debugging is initiated, the extension generates a runtime loader file (`.vscode/server-logic-runtime-loader.js`)
2. This loader injects the mock `Server` object into the global scope
3. Node.js debugger attaches with the loader pre-required via `--require` flag
4. Your server logic code runs with full debugging capabilities

## Usage

### Quick Start

1. Open a server logic file from `server-logics/` folder
2. Start debugging using any of these methods:
- Click the **Debug** button in the editor toolbar
- Click **▶ Debug** CodeLens above your function
- Right-click and select "Debug Current Server Logic File"
- Press F5
- Use Command Palette: `Power Pages: Debug Current Server Logic File`
3. Set breakpoints and debug!

### Running Without Debugging

- Click **▶ Run** CodeLens to execute without stopping at breakpoints
- Use Command Palette: `Power Pages: Run Server Logic File`

### Commands

- `Power Pages: Debug Current Server Logic File` - Start debugging the active file
- `Power Pages: Run Server Logic File` - Run without debugging

### Configuration

Add to your `launch.json`:

```json
{
"type": "node",
"request": "launch",
"name": "Debug Server Logic",
"program": "${workspaceFolder}/server-logics/MyLogic.js",
"skipFiles": ["<node_internals>/**"]
}
```

### Custom Mock Data

Create `.vscode/mock-data.json`:

```json
{
"User": {
"id": "custom-user-id",
"fullname": "John Doe",
"email": "john.doe@example.com"
},
"Context": {
"Method": "POST"
},
"QueryParameters": {
"id": "123"
}
}
```

## UI Features

When viewing a server logic file, you'll see a debug icon (🐛) in the editor toolbar for quick access.

### CodeLens

Above functions in your server logic file, you'll see inline actions:

- **▶ Debug** - Start debugging
- **▶ Run** - Run without debugging

### Context Menu

Right-click in any server logic file to access debug commands.

## Welcome Notification

First time you open a workspace with server logic files, you'll see a helpful notification with quick actions.

## Files

- `ServerLogicMockSdk.ts` - Mock SDK implementation generator
- `ServerLogicDebugger.ts` - Debug configuration provider, commands, and activation logic
- `ServerLogicCodeLensProvider.ts` - CodeLens provider for inline debug/run actions
- `index.ts` - Public exports
- `sample-server-logic.js` - Example file demonstrating all Server API patterns

## Technical Details

The debugger uses Node.js's `--require` flag to inject the mock SDK before the user's code runs. This ensures the `Server` global object is available throughout execution, matching the Power Pages runtime behavior.
Loading