Add modern card-based Tools Page webview for Power Platform ToolBox

[Copilot]

Overview

This PR implements a dedicated webview page that displays all tools from the Power Platform ToolBox with a modern, card-based design inspired by XrmToolBox, making it easier to view tool details and launch them directly from a comprehensive interface.

Problem

Previously, users could only see the tools in a side panel tree view, which made it difficult to:

• View details about each tool at a glance
• Understand what tools are available in the toolbox
• Quickly access and launch tools

Solution

A new Tools Page webview with a modern card-based interface that provides:

🎨 Modern Card Interface

• Card-based layout inspired by XrmToolBox design
• Displays all 4 tools currently in the toolbox:
  • Dataverse REST Builder (drb) by Guido Preite - Build and test Web API queries
  • Plugin Registration (prt) by Microsoft - Manage plugins and workflows
  • Configuration Migration (cmt) by Microsoft - Move configuration data
  • Package Deployer (pd) by Microsoft - Deploy packages with automation
• Shows tool name, author, detailed description, and launch action in beautiful cards
• Visual icons for each tool (🔧 🔌 📦 🚀)
• Hover effects with smooth transitions and elevation
• Gradient backgrounds on tool icons
• Responsive grid layout that adapts to screen size

🔍 Enhanced Search

• Real-time search box that filters tools as you type
• Searches across all fields: name, author, and description
• Instant results with smooth animations

🚀 Quick Launch

• Click anywhere on a card to launch the tool
• Dedicated launch buttons with play icons (▶)
• Visual feedback on hover and click
• One-click access to any tool

🎯 Multiple Access Points

1. Command Palette: Type Show Tools Page
2. Toolbox Panel: Click the table icon (📊) in the panel header

Implementation Details

New Files

• resources/views/toolslist.html - Modern HTML template with card grid layout
• src/views/ToolsListView.ts - View class that renders tool cards with proper HTML escaping

Modified Files

• resources/views/js/base.js - Updated search functionality to work with cards
• resources/views/css/base.css - Added 150+ lines of modern card styling with gradients, animations, and hover effects
• src/tools/tools.json - Added detailed descriptions and emoji icons for each tool
• src/utils/Interfaces.ts - Extended IToolDetails interface with optional description and emoji fields
• src/commands/registerToolsCommands.ts - Added showToolsPage and launchToolByShortName commands
• package.json - Added commands and menu items

Technical Highlights

• Modern card-based design inspired by XrmToolBox
• Responsive CSS Grid with auto-fill for flexible layouts
• Smooth animations including hover effects, transitions, and transforms
• Follows existing patterns: Consistent with refactored codebase structure
• VSCode theme integration: Uses CSS variables for seamless light/dark mode support
• Security: HTML escaping using lodash.escape() for defense-in-depth
• Performance: Dynamic imports to optimize bundle size
• Maintainability: Uses array.map() for cleaner code structure
• Integrated with main branch refactoring: Compatible with new ToolsHelper class and registerToolsCommands structure
• No breaking changes: All existing functionality remains intact

Merge Conflicts Resolved

Successfully resolved merge conflicts with the main branch:

• Updated property names to match main branch refactoring (name, shortName, author instead of toolName, toolShortName, toolAuthor)
• Kept description and emoji fields for the modern card design
• Moved tool commands to registerToolsCommands.ts as per main branch structure
• Updated ToolsListView.ts to use new property names
• Integrated with new ToolsHelper class instead of deleted drbHelper

Testing

✅ Compilation successful in development and production modes
✅ Linting passed (warnings consistent with existing codebase)
✅ All files properly bundled in dist/ directory
✅ Merge conflicts resolved successfully
✅ Code review feedback addressed
✅ Modern design implemented with XrmToolBox inspiration
✅ No new errors introduced

Screenshots

The Tools Page features a modern, card-based interface:

Key Design Features:

• Card-based grid layout with responsive design
• Visual icons and gradient backgrounds
• Rich descriptions for each tool
• Hover effects with elevation and smooth transitions
• Launch buttons with visual feedback
• Tag badges showing tool short names
• Enhanced search across all tool information

Usage

After merging, users can access the Tools Page by:

1. Opening Command Palette (Ctrl+Shift+P / Cmd+Shift+P) and typing "Show Tools Page"
2. Clicking the table icon in the Power Platform ToolBox panel header

Fixes #295

Original prompt

---

This section details on the original issue you should resolve

<issue_title>[Feature]: Add a tools page that will list all the tools from the toolbox</issue_title>
<issue_description>### Is your feature request related to a problem?

No

Describe the problem?

Hard to see the details of the tools included in the toolbox from a side panel

Provide a solution or an idea you would like to see in the tool?

Create a webview that can be invoked from the toolbox section or command pallet. This webview will lost all the tools that are added to dvdt with an option to run them as well.

Relevant log output

```</issue_description>

## Comments on the Issue (you are @copilot in this section)

<comments>
</comments>

Fixes #295

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[Power-Maverick]

@copilot look the the review comments.

[Power-Maverick]

@copilot make it look modern and take the inspiration from XrmToolBox

[Copilot]

Done! The tools page now features a modern, card-based design inspired by XrmToolBox:

Changes in commit b513cb7:

• Card-based grid layout with hover effects and smooth animations
• Visual icons for each tool (🔧 🔌 📦 🚀)
• Rich descriptions for better context
• Gradient backgrounds and modern styling
• Enhanced search across name, author, and description
• Responsive design that adapts to screen size
• Launch buttons with visual feedback

The design follows XrmToolBox's approach with attractive cards, clear visual hierarchy, and intuitive interactions.

[Power-Maverick]

@copilot resolve conflicts

[Copilot]

@copilot resolve conflicts

Conflicts resolved in commit 3a5ba1d!

Changes made:

• Updated property names to match main branch refactoring (name, shortName, author instead of toolName, toolShortName, toolAuthor)
• Kept description and emoji fields for the modern card design
• Moved tool commands to registerToolsCommands.ts as per main branch structure
• Integrated with new ToolsHelper class instead of deleted drbHelper
• Updated ToolsListView.ts to use new property names

The modern card-based design is preserved and now compatible with the latest main branch.

[cyco77]

Really like that new view... please add it to the next release, I got some ideas to add there...

• Flow Tool
• Entity Documentation Helper
• Plugin Documentation Helper
  ...

[github-actions]

This PR is stale because it has been open 45 days with no activity. Remove stale label or comment or this will be closed in 10 days.

[github-actions]

This PR was closed because it has been stalled for 10 days with no activity.