Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Copilot wants to merge 11 commits into from
Closed

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
7b614c3
Initial plan
Copilot Oct 12, 2025
c92f237
Initial commit - planning the tools page feature
Copilot Oct 12, 2025
77480e4
Add tools page webview with list of all tools
Copilot Oct 12, 2025
e0cef04
Refactor ToolsListView to use array.map() for better maintainability
Copilot Oct 12, 2025
349ca41
Add HTML escaping for tool properties for defense-in-depth security
Copilot Oct 12, 2025
d150d26
fix: update command icons for tools page in package.json
Power-Maverick Oct 12, 2025
b513cb7
Modernize tools page with card-based design inspired by XrmToolBox
Copilot Oct 12, 2025
3a5ba1d
Resolve merge conflicts with main branch
Copilot Oct 12, 2025
d6051ad
Merge branch 'main' into copilot/add-tools-page-to-toolbox
Power-Maverick Oct 13, 2025
76e6fcc
feat: enhance tools page layout and functionality with improved styli…
Power-Maverick Oct 13, 2025
3386945
feat: add ERD Generator tool with command integration and package upd…
Power-Maverick Oct 14, 2025
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
15 changes: 15 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

19 changes: 19 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -164,6 +164,12 @@
"when": "view == dvEntities",
"group": "navigation@2"
},
{
"command": "dvdt.commands.showToolsPage",
"when": "view == ppToolBox",
"group": "navigation@1",
"icon": "$(tools)"
},
{
"command": "dvdt.explorer.webresources.smartMatch",
"when": "view == dvWebResources",
Expand Down Expand Up @@ -506,6 +512,18 @@
"title": "Open Dataverse REST Builder (DRB)",
"category": "%dvdt.commands.category%"
},
{
"command": "dvdt.commands.showToolsPage",
"title": "Show Tools Page",
"category": "%dvdt.commands.category%",
"icon": "$(tools)"
},
{
"command": "dvdt.commands.launchToolByShortName",
"title": "Launch Tool",
"when": "false",
"category": "%dvdt.commands.category%"
},
{
"command": "dvdt.explorer.tools.launchTool",
"title": "Launch tool from ToolBox",
Expand Down Expand Up @@ -579,6 +597,7 @@
"conditional-reduce": "^1.2.0",
"dayjs": "^1.10.7",
"dts-dom": "^3.6.0",
"dvdt-erd-generator": "^0.0.6",
"fast-xml-parser": "^4.5.0",
"fs-extra": "^10.0.0",
"lodash": "^4.17.21",
Expand Down
185 changes: 185 additions & 0 deletions resources/views/css/base.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,191 @@ body {
font-size: small;
}

.btn {
padding: 4px 12px;
cursor: pointer;
background-color: var(--vscode-button-background);
color: var(--vscode-button-foreground);
border: none;
border-radius: 2px;
font-size: 0.8rem;
}

.btn:hover {
background-color: var(--vscode-button-hoverBackground);
}

.btn:active {
background-color: var(--vscode-button-hoverBackground);
opacity: 0.8;
}

/**** Tools Page Styling ****/
.tools-header {
padding: 20px;
border-bottom: 1px solid var(--vscode-panel-border);
margin-bottom: 20px;
}

.tools-header h2 {
margin: 0 0 8px 0;
color: var(--vscode-foreground);
font-size: 1.5rem;
font-weight: 600;
}

.tools-description {
margin: 0 0 16px 0;
color: var(--vscode-descriptionForeground);
font-size: 0.9rem;
}

.search-container {
width: 100%;
max-width: 600px;
}

.tools-search {
width: 100%;
padding: 10px 16px;
background-color: var(--vscode-input-background);
color: var(--vscode-input-foreground);
border: 1px solid var(--vscode-input-border);
border-radius: 4px;
font-size: 0.9rem;
outline: none;
transition: border-color 0.2s;
}

.tools-search:focus {
border-color: var(--vscode-focusBorder);
}

.tools-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 16px;
padding: 0 20px 20px 20px;
}

.tool-card {
background-color: var(--vscode-editor-background);
border: 1px solid var(--vscode-panel-border);
border-radius: 6px;
padding: 20px;
transition: all 0.2s ease;
cursor: pointer;
display: flex;
flex-direction: column;
gap: 12px;
}

.tool-card:hover {
border-color: var(--vscode-focusBorder);
background-color: var(--vscode-list-hoverBackground);
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.tool-card-header {
display: flex;
align-items: center;
gap: 12px;
}

.tool-icon {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--vscode-button-background), var(--vscode-button-hoverBackground));
border-radius: 8px;
font-size: 24px;
flex-shrink: 0;
}

.tool-info {
flex: 1;
min-width: 0;
}

.tool-name {
font-size: 1.1rem;
font-weight: 600;
color: var(--vscode-foreground);
margin: 0 0 4px 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.tool-author {
font-size: 0.85rem;
color: var(--vscode-descriptionForeground);
margin: 0;
}

.tool-description {
font-size: 0.9rem;
color: var(--vscode-foreground);
line-height: 1.4;
margin: 0;
height: 64px;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 3;
line-clamp: 3;
display: -webkit-box;
-webkit-box-orient: vertical;
}

.tool-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 8px;
}

.tool-tag {
display: inline-block;
padding: 4px 10px;
background-color: var(--vscode-badge-background);
color: var(--vscode-badge-foreground);
border-radius: 12px;
font-size: 0.75rem;
font-weight: 500;
text-transform: uppercase;
}

.tool-launch-btn {
padding: 8px 16px;
background-color: var(--vscode-button-background);
color: var(--vscode-button-foreground);
border: none;
border-radius: 4px;
font-size: 0.85rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
display: flex;
align-items: center;
gap: 6px;
}

.tool-launch-btn:hover {
background-color: var(--vscode-button-hoverBackground);
transform: scale(1.05);
}

.tool-launch-btn:active {
transform: scale(0.98);
}

.tool-card.hidden {
display: none;
}

/**** Lables ****/
label {
font-size: 0.8rem;
Expand Down
15 changes: 15 additions & 0 deletions resources/views/js/base.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,14 @@ $(document).ready(function () {
});
});

$("#toolsSearch").on("keyup", function () {
var value = $(this).val().toLowerCase();
$(".tool-card").filter(function () {
var isMatch = $(this).text().toLowerCase().indexOf(value) > -1;
$(this).toggleClass("hidden", !isMatch);
});
});

if ($matchTable && $matchTable.bootstrapTable) {
$matchTable.bootstrapTable();
$matchTable.bootstrapTable("refreshOptions", {
Expand Down Expand Up @@ -80,6 +88,13 @@ function link(fullPath, wrId) {
});
}

function launchTool(toolShortName) {
vscode.postMessage({
command: "launchTool",
toolShortName: toolShortName,
});
}

function sortTable(tableId, column) {
var table = document.getElementById(tableId);
var tbody = table.querySelector("tbody");
Expand Down
11 changes: 11 additions & 0 deletions resources/views/toolslist.html
View file
Open in desktop
Copy link
Owner

@Power-Maverick Power-Maverick Oct 12, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor Author

Copilot AI Oct 12, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Modern Tools Page

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.

Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<div class="tools-header">
<h2>Power Platform ToolBox</h2>
<p class="tools-description">Explore and launch powerful tools for Dataverse development</p>
<div class="search-container">
<input class="tools-search" autofocus id="toolsSearch" placeholder="🔍 Search tools by name, author, or description..." />
</div>
</div>

<div class="tools-grid" id="toolsGrid">
!!{tools}
</div>
42 changes: 32 additions & 10 deletions src/commands/registerToolsCommands.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { CLIHelper } from "../helpers/cliHelper";
import { ErrorHandler } from "../helpers/errorHandler";
import { ToolsHelper } from "../helpers/toolsHelper";
import { ICommand } from "../utils/Interfaces";
import { ToolsListView } from "../views/ToolsListView";
import { ViewBase } from "../views/ViewBase";

export async function registerToolsCommands(vscontext: vscode.ExtensionContext, tr: TelemetryReporter): Promise<void> {
Expand All @@ -23,16 +24,16 @@ export async function registerToolsCommands(vscontext: vscode.ExtensionContext,
}
},
},
// {
// command: "dvdt.commands.openERDGenerator",
// callback: async () => {
// try {
// toolHelper.openERDGenerator();
// } catch (error) {
// errorHandler.log(error, "openERDGenerator");
// }
// },
// },
{
command: "dvdt.commands.openERDGenerator",
callback: async () => {
try {
toolHelper.openERDGenerator();
} catch (error) {
errorHandler.log(error, "openERDGenerator");
}
},
},
{
command: "dvdt.commands.launchPRT",
callback: async () => {
Expand Down Expand Up @@ -63,6 +64,27 @@ export async function registerToolsCommands(vscontext: vscode.ExtensionContext,
}
},
},
{
command: "dvdt.commands.showToolsPage",
callback: async () => {
try {
const webview = await views.getWebView({ type: "showToolsList", title: "Power Platform ToolBox" });
new ToolsListView(webview, vscontext);
} catch (error) {
errorHandler.log(error, "showToolsPage");
}
},
},
{
command: "dvdt.commands.launchToolByShortName",
callback: async (toolShortName: string) => {
try {
toolHelper.launchToolByShortName(toolShortName, cliHelper, views);
} catch (error) {
errorHandler.log(error, "launchToolByShortName");
}
},
},
);

cmds.forEach((c) => {
Expand Down
Loading