@power-maverick/tool-erd-generator 0.0.7 → 0.0.8

package/webview/App.tsx

@@ -1,412 +0,0 @@
-import { useEffect, useState } from "react";
-import { ERDGenerator } from "../src/components/ERDGenerator";
-import { DataverseSolution } from "../src/models/interfaces";
-import { IPlatformAPI, PlatformAPIFactory, ToolContext } from "../src/models/platformApi";
-import "../src/types/pptb.d.ts";
-import { DataverseClient } from "../src/utils/DataverseClient";
-
-// Declare Mermaid library (loaded externally for visualization)
-declare global {
-    interface Window {
-        mermaid?: {
-            initialize: (config: any) => void;
-            init: (config: any, element: HTMLElement | null) => void;
-        };
-    }
-}
-
-interface Solution {
-    uniqueName: string;
-    displayName: string;
-    version: string;
-}
-
-function App() {
-    // Platform API - automatically detects PPTB or DVDT
-    const [platformAPI, setPlatformAPI] = useState<IPlatformAPI | null>(null);
-    const [platformName, setPlatformName] = useState<string>("");
-    
-    const [connectionUrl, setConnectionUrl] = useState<string>("");
-    const [accessToken, setAccessToken] = useState<string>("");
-    const [solutions, setSolutions] = useState<Solution[]>([]);
-    const [selectedSolution, setSelectedSolution] = useState<string>("");
-    const [selectedFormat, setSelectedFormat] = useState<'mermaid' | 'plantuml' | 'graphviz'>('mermaid');
-    const [loading, setLoading] = useState<boolean>(true);
-    const [error, setError] = useState<string>("");
-    const [generatedDiagram, setGeneratedDiagram] = useState<string>("");
-    const [viewMode, setViewMode] = useState<'visual' | 'text'>('visual');
-    
-    // Configuration options
-    const [includeAttributes, setIncludeAttributes] = useState<boolean>(true);
-    const [includeRelationships, setIncludeRelationships] = useState<boolean>(true);
-    const [maxAttributesPerTable, setMaxAttributesPerTable] = useState<number>(10);
-
-    // Initialize platform API and detect environment
-    useEffect(() => {
-        const initializePlatform = async () => {
-            setLoading(true);
-            
-            // For PPTB: Listen for TOOLBOX_CONTEXT via postMessage
-            if (PlatformAPIFactory.isPPTB()) {
-                const handlePPTBMessage = (event: MessageEvent) => {
-                    if (event.data && event.data.type === 'TOOLBOX_CONTEXT') {
-                        window.TOOLBOX_CONTEXT = event.data.data;
-                        console.log('[App] Received TOOLBOX_CONTEXT:', window.TOOLBOX_CONTEXT);
-                        
-                        // Re-create platform API with updated context
-                        const api = PlatformAPIFactory.create();
-                        setPlatformAPI(api);
-                        setPlatformName(api.getPlatformName());
-                        
-                        // Load context
-                        loadPlatformContext(api);
-                    }
-                };
-                
-                window.addEventListener('message', handlePPTBMessage);
-                
-                // Try to create API immediately (context might already be available)
-                try {
-                    const api = PlatformAPIFactory.create();
-                    setPlatformAPI(api);
-                    setPlatformName(api.getPlatformName());
-                    await loadPlatformContext(api);
-                } catch (error) {
-                    console.error('[App] Failed to create PPTB API:', error);
-                }
-                
-                return () => {
-                    window.removeEventListener('message', handlePPTBMessage);
-                };
-            }
-            // For DVDT: Listen for credentials message
-            else {
-                const handleDVDTMessage = (event: MessageEvent) => {
-                    const message = event.data;
-                    if (message.command === 'setCredentials') {
-                        console.log('[App] Received DVDT credentials');
-                        
-                        const context: ToolContext = {
-                            toolId: null,
-                            connectionUrl: message.environmentUrl,
-                            accessToken: message.accessToken,
-                        };
-                        
-                        const api = PlatformAPIFactory.create(context);
-                        setPlatformAPI(api);
-                        setPlatformName(api.getPlatformName());
-                        
-                        setConnectionUrl(message.environmentUrl);
-                        setAccessToken(message.accessToken);
-                        setLoading(false);
-                    }
-                };
-                
-                window.addEventListener('message', handleDVDTMessage);
-                
-                // Signal to DVDT that we're ready
-                console.log('[App] Running in DVDT mode, waiting for credentials...');
-                
-                return () => {
-                    window.removeEventListener('message', handleDVDTMessage);
-                };
-            }
-        };
-
-        initializePlatform();
-    }, []);
-
-    // Helper to load context from platform API
-    const loadPlatformContext = async (api: IPlatformAPI) => {
-        try {
-            const context = await api.getToolContext();
-            console.log('[App] Loaded platform context:', context);
-            
-            setConnectionUrl(context.connectionUrl || "");
-            setAccessToken(context.accessToken || "");
-            setLoading(false);
-        } catch (error) {
-            console.error('[App] Failed to load platform context:', error);
-            showError('Failed to load connection context');
-            setLoading(false);
-        }
-    };
-
-    // Load solutions when credentials are available
-    useEffect(() => {
-        if (connectionUrl && accessToken) {
-            loadSolutions();
-        }
-    }, [connectionUrl, accessToken]);
-
-    const loadSolutions = async () => {
-        try {
-            const client = new DataverseClient({
-                environmentUrl: connectionUrl,
-                accessToken: accessToken
-            });
-            
-            const solutionList = await client.listSolutions();
-            setSolutions(solutionList);
-        } catch (error: any) {
-            showError(`Failed to load solutions: ${error.message}`);
-        }
-    };
-
-    const showError = (message: string) => {
-        setError(message);
-        setTimeout(() => setError(""), 5000);
-    };
-
-    const showNotification = async (title: string, body: string, type: 'success' | 'error' | 'info') => {
-        if (platformAPI) {
-            await platformAPI.showNotification({ title, body, type });
-        }
-    };
-
-    const handleGenerateERD = async () => {
-        if (!selectedSolution) {
-            showError('Please select a solution first');
-            return;
-        }
-
-        try {
-            setLoading(true);
-            
-            const client = new DataverseClient({
-                environmentUrl: connectionUrl,
-                accessToken: accessToken
-            });
-
-            const solution: DataverseSolution = await client.fetchSolution(selectedSolution);
-            
-            const generator = new ERDGenerator({
-                format: selectedFormat,
-                includeAttributes,
-                includeRelationships,
-                maxAttributesPerTable
-            });
-
-            const diagram = generator.generate(solution);
-            setGeneratedDiagram(diagram);
-            
-            await showNotification('Success', 'ERD generated successfully', 'success');
-        } catch (error: any) {
-            showError(`Failed to generate ERD: ${error.message}`);
-        } finally {
-            setLoading(false);
-        }
-    };
-
-    const handleDownload = async () => {
-        if (!generatedDiagram || !platformAPI) return;
-
-        const extensions: Record<string, string> = {
-            'mermaid': 'mmd',
-            'plantuml': 'puml',
-            'graphviz': 'dot'
-        };
-
-        const fileName = `${selectedSolution}-erd.${extensions[selectedFormat]}`;
-        
-        try {
-            const savedPath = await platformAPI.saveFile(fileName, generatedDiagram);
-            if (savedPath) {
-                await showNotification('Success', 'File saved successfully', 'success');
-            }
-        } catch (error: any) {
-            showError(`Failed to save file: ${error.message}`);
-        }
-    };
-
-    const handleCopyToClipboard = async () => {
-        if (!generatedDiagram || !platformAPI) return;
-
-        try {
-            await platformAPI.copyToClipboard(generatedDiagram);
-            await showNotification('Success', 'Copied to clipboard', 'success');
-        } catch (error: any) {
-            showError(`Failed to copy: ${error.message}`);
-        }
-    };
-
-    const renderDiagram = () => {
-        if (!generatedDiagram) return null;
-
-        if (viewMode === 'visual' && selectedFormat === 'mermaid') {
-            // Render Mermaid diagram
-            return (
-                <div 
-                    className="mermaid-container"
-                    dangerouslySetInnerHTML={{ __html: generatedDiagram }}
-                    ref={(el) => {
-                        if (el && window.mermaid) {
-                            try {
-                                window.mermaid.init(undefined, el);
-                            } catch (error) {
-                                console.error('Mermaid rendering error:', error);
-                            }
-                        }
-                    }}
-                />
-            );
-        } else {
-            // Show text view
-            return (
-                <pre className="diagram-text">
-                    {generatedDiagram}
-                </pre>
-            );
-        }
-    };
-
-    if (loading) {
-        return (
-            <div className="container">
-                <div className="loading">Loading...</div>
-            </div>
-        );
-    }
-
-    return (
-        <div className="container">
-            <header className="header">
-                <h1>🗺️ Dataverse ERD Generator</h1>
-                <p>Generate Entity Relationship Diagrams from your Dataverse solutions</p>
-            </header>
-
-            {error && (
-                <div className="error">
-                    {error}
-                </div>
-            )}
-
-            <div className="card">
-                <div className="info-message">
-                    <strong>✓ Connected to Dataverse</strong><br />
-                    Environment: <span>{connectionUrl || "Not connected"}</span>
-                </div>
-
-                <div className="form-group">
-                    <label htmlFor="solutionSelect">Select a Solution</label>
-                    <select 
-                        id="solutionSelect" 
-                        value={selectedSolution}
-                        onChange={(e) => setSelectedSolution(e.target.value)}
-                        disabled={solutions.length === 0}
-                    >
-                        <option value="">-- Select a Solution --</option>
-                        {solutions.map((solution) => (
-                            <option key={solution.uniqueName} value={solution.uniqueName}>
-                                {solution.displayName} ({solution.version})
-                            </option>
-                        ))}
-                    </select>
-                </div>
-
-                <div className="generate-section">
-                    <h2>Generate ERD</h2>
-                    <div className="format-selector">
-                        <label style={{ fontWeight: 600, marginRight: '10px' }}>Output Format:</label>
-                        <button 
-                            className={`format-btn ${selectedFormat === 'mermaid' ? 'active' : ''}`}
-                            onClick={() => setSelectedFormat('mermaid')}
-                        >
-                            Mermaid
-                        </button>
-                        <button 
-                            className={`format-btn ${selectedFormat === 'plantuml' ? 'active' : ''}`}
-                            onClick={() => setSelectedFormat('plantuml')}
-                        >
-                            PlantUML
-                        </button>
-                        <button 
-                            className={`format-btn ${selectedFormat === 'graphviz' ? 'active' : ''}`}
-                            onClick={() => setSelectedFormat('graphviz')}
-                        >
-                            Graphviz
-                        </button>
-                    </div>
-
-                    <div className="config-section">
-                        <h3>Configuration</h3>
-                        
-                        <div className="config-group">
-                            <label>
-                                <input 
-                                    type="checkbox" 
-                                    checked={includeAttributes}
-                                    onChange={(e) => setIncludeAttributes(e.target.checked)}
-                                />
-                                <span>Include Attributes</span>
-                            </label>
-                            <div className="config-help">Show table columns/fields in the diagram</div>
-                        </div>
-
-                        <div className="config-group">
-                            <label>
-                                <input 
-                                    type="checkbox" 
-                                    checked={includeRelationships}
-                                    onChange={(e) => setIncludeRelationships(e.target.checked)}
-                                />
-                                <span>Include Relationships</span>
-                            </label>
-                            <div className="config-help">Show relationships between tables</div>
-                        </div>
-
-                        <div className="config-group">
-                            <div className="config-label-group">
-                                <label htmlFor="maxAttributesInput">Max Attributes per Table:</label>
-                                <input 
-                                    type="number" 
-                                    id="maxAttributesInput"
-                                    value={maxAttributesPerTable}
-                                    onChange={(e) => setMaxAttributesPerTable(parseInt(e.target.value) || 0)}
-                                    min="0" 
-                                    max="100"
-                                />
-                            </div>
-                            <div className="config-help">Maximum number of attributes to display per table (0 = show all)</div>
-                        </div>
-                    </div>
-
-                    <button 
-                        className="btn btn-primary" 
-                        onClick={handleGenerateERD}
-                        disabled={!selectedSolution || loading}
-                    >
-                        Generate ERD
-                    </button>
-                </div>
-            </div>
-
-            {generatedDiagram && (
-                <div className="card">
-                    <h2>Generated ERD</h2>
-                    <div className="diagram-controls">
-                        {selectedFormat === 'mermaid' && (
-                            <button 
-                                className="btn btn-secondary"
-                                onClick={() => setViewMode(viewMode === 'visual' ? 'text' : 'visual')}
-                            >
-                                {viewMode === 'visual' ? '📝 Show Text' : '🎨 Show Visual'}
-                            </button>
-                        )}
-                        <button className="btn btn-secondary" onClick={handleDownload}>
-                            📥 Download Source
-                        </button>
-                        <button className="btn btn-secondary" onClick={handleCopyToClipboard}>
-                            📋 Copy to Clipboard
-                        </button>
-                    </div>
-                    <div className="diagram-container">
-                        {renderDiagram()}
-                    </div>
-                </div>
-            )}
-        </div>
-    );
-}
-
-export default App;

package/webview/index.html

@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Dataverse ERD Generator</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/main.tsx"></script>
-  </body>
-</html>

package/webview/main.tsx

@@ -1,10 +0,0 @@
-import { StrictMode } from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './App';
-import './styles.css';
-
-createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-    <App />
-  </StrictMode>
-);