ai-space/workflow-builder
3
0
Fork 0
mirror of https://github.com/Nikhil-Doye/workflow-builder.git synced 2026-07-22 02:01:56 +02:00
Code Issues Packages Projects Releases Wiki Activity

Refactor TestingPanel and WorkflowToolbar to use Button component

Browse Source 
- Replaced standard button elements with a custom Button component in TestingPanel and WorkflowToolbar for consistent styling and improved UI.
- Updated button properties and classes to align with the new Button component's design, enhancing user experience across the application.
- Adjusted layout and spacing for better visual coherence and usability.
This commit is contained in:
Nikhil-Doye
2025-10-19 12:42:01 -04:00
parent 9ead8d5142
commit d9ac6d2f89
2 changed files with 56 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/TestingPanel.tsx
+20 -16
View File
@@ -1,6 +1,7 @@
import React, { useState } from "react";
import { useWorkflowStore } from "../store/workflowStore";
import { Play, FileText, Download, RotateCcw } from "lucide-react";
import { Button } from "./ui/button";
export const TestingPanel: React.FC = () => {
const { currentWorkflow, executeWorkflow, isExecuting, executionResults } =
@@ -104,34 +105,35 @@ export const TestingPanel: React.FC = () => {
</label>
<div className="space-y-2">
{sampleInputs.map((sample, index) => (
<button
<Button
key={index}
onClick={() => handleLoadSample(sample)}
className="w-full text-left p-2 text-sm bg-gray-50 hover:bg-gray-100 rounded-md transition-colors"
variant="ghost"
className="w-full justify-start p-2 text-sm"
>
{sample.name}
</button>
</Button>
))}
</div>
</div>
<div className="flex space-x-2">
<button
<Button
onClick={handleTestExecution}
disabled={isExecuting}
className="flex-1 flex items-center justify-center space-x-2 px-3 py-2 bg-primary-500 text-white rounded-md hover:bg-primary-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
className="flex-1 bg-blue-600 hover:bg-blue-700"
>
<Play className="w-4 h-4" />
<span>Run Test</span>
</button>
<Play className="w-4 h-4 mr-2" />
Run Test
</Button>
<button
<Button
onClick={handleClearResults}
className="px-3 py-2 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 transition-colors"
variant="secondary"
title="Clear results"
>
<RotateCcw className="w-4 h-4" />
</button>
</Button>
</div>
</div>
</div>
@@ -143,13 +145,15 @@ export const TestingPanel: React.FC = () => {
<h4 className="text-sm font-medium text-gray-700">
Test Results
</h4>
<button
<Button
onClick={handleExportResults}
className="flex items-center space-x-1 px-2 py-1 text-xs bg-gray-100 text-gray-700 rounded hover:bg-gray-200 transition-colors"
variant="secondary"
size="sm"
className="text-xs"
>
<Download className="w-3 h-3" />
<span>Export</span>
</button>
<Download className="w-3 h-3 mr-1" />
Export
</Button>
</div>
<div className="space-y-3">
src/components/WorkflowToolbar.tsx
+36 -37
View File
@@ -15,6 +15,7 @@ import {
loadWorkflowFromFile,
} from "../utils/workflowSerialization";
import { ApiKeysSettings } from "./ApiKeysSettings";
import { Button } from "./ui/button";
export const WorkflowToolbar: React.FC = () => {
const {
@@ -88,79 +89,77 @@ export const WorkflowToolbar: React.FC = () => {
</div>
<div className="flex items-center space-x-2">
<button
<Button
onClick={handleSave}
className={`flex items-center space-x-2 px-3 py-2 rounded-md transition-colors ${
showSaveSuccess
? "bg-green-600 text-white hover:bg-green-700"
: "bg-gray-600 text-white hover:bg-gray-700"
}`}
variant={showSaveSuccess ? "default" : "default"}
className={showSaveSuccess ? "bg-green-600 hover:bg-green-700" : ""}
title="Save workflow"
>
{showSaveSuccess ? (
<Check className="w-4 h-4" />
<Check className="w-4 h-4 mr-2" />
) : (
<Save className="w-4 h-4" />
<Save className="w-4 h-4 mr-2" />
)}
<span>{showSaveSuccess ? "Saved!" : "Save"}</span>
</button>
{showSaveSuccess ? "Saved!" : "Save"}
</Button>
<button
<Button
onClick={handleExport}
className="flex items-center space-x-2 px-3 py-2 bg-gray-600 text-white rounded-md hover:bg-gray-700 transition-colors"
variant="default"
title="Export workflow"
>
<Download className="w-4 h-4" />
<span>Export</span>
</button>
<Download className="w-4 h-4 mr-2" />
Export
</Button>
<button
<Button
onClick={handleImport}
className="flex items-center space-x-2 px-3 py-2 bg-gray-600 text-white rounded-md hover:bg-gray-700 transition-colors"
variant="default"
title="Import workflow"
>
<Upload className="w-4 h-4" />
<span>Import</span>
</button>
<Upload className="w-4 h-4 mr-2" />
Import
</Button>
<button
<Button
onClick={() => setShowApiKeysSettings(true)}
className="flex items-center space-x-2 px-3 py-2 bg-gray-600 text-white rounded-md hover:bg-gray-700 transition-colors"
variant="default"
title="Configure API Keys"
>
<Key className="w-4 h-4" />
<span>API Keys</span>
</button>
<Key className="w-4 h-4 mr-2" />
API Keys
</Button>
<div className="w-px h-6 bg-gray-300" />
<button
<Button
onClick={handleExecute}
disabled={isExecuting}
className="flex items-center space-x-2 px-3 py-2 bg-primary-500 text-white rounded-md hover:bg-primary-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
variant="default"
className="bg-blue-600 hover:bg-blue-700"
title={isExecuting ? "Stop execution" : "Execute workflow"}
>
{isExecuting ? (
<>
<Square className="w-4 h-4" />
<span>Stop</span>
<Square className="w-4 h-4 mr-2" />
Stop
</>
) : (
<>
<Play className="w-4 h-4" />
<span>Execute</span>
<Play className="w-4 h-4 mr-2" />
Execute
</>
)}
</button>
</Button>
<button
<Button
onClick={handleClear}
className="flex items-center space-x-2 px-3 py-2 bg-gray-600 text-white rounded-md hover:bg-gray-700 transition-colors"
variant="default"
title="Reset workflow (clear all nodes)"
>
<RotateCcw className="w-4 h-4" />
<span>Reset</span>
</button>
<RotateCcw className="w-4 h-4 mr-2" />
Reset
</Button>
</div>
<input