-
- {currentView === "dashboard" &&
}
- {currentView === "keyword-usage" &&
}
- {currentView === "robocop" &&
}
+
+
+
+
+
+
);
-}
-
-export default App;
+}
\ No newline at end of file
diff --git a/vscode-integration/webview-ui/src/app/dashboard/collapsible-section.tsx b/vscode-integration/webview-ui/src/app/dashboard/collapsible-section.tsx
new file mode 100644
index 0000000..392072f
--- /dev/null
+++ b/vscode-integration/webview-ui/src/app/dashboard/collapsible-section.tsx
@@ -0,0 +1,50 @@
+import { useState } from "react";
+import {
+ Collapsible,
+ CollapsibleContent,
+ CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { ChevronDown, LucideIcon } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface CollapsibleSectionProps {
+ title: string;
+ icon: LucideIcon;
+ iconOpen?: LucideIcon;
+ iconColor?: string;
+ defaultOpen?: boolean;
+ children: React.ReactNode;
+}
+
+export function CollapsibleSection({
+ title,
+ icon: Icon,
+ iconOpen: IconOpen,
+ iconColor = "text-amber-400",
+ defaultOpen = true,
+ children,
+}: CollapsibleSectionProps) {
+ const [isOpen, setIsOpen] = useState(defaultOpen);
+ const ActiveIcon = isOpen && IconOpen ? IconOpen : Icon;
+
+ return (
+
+
+
+ );
+}
diff --git a/vscode-integration/webview-ui/src/app/dashboard/keyword-analysis.tsx b/vscode-integration/webview-ui/src/app/dashboard/keyword-analysis.tsx
new file mode 100644
index 0000000..b23a797
--- /dev/null
+++ b/vscode-integration/webview-ui/src/app/dashboard/keyword-analysis.tsx
@@ -0,0 +1,25 @@
+import { KeywordUsage } from "@/types/keywords";
+import KeywordBarChart from "./keyword-bar-chart";
+
+export default function KeywordAnalysis({
+ mostUsedUserKeywords,
+ mostUsedExternalKeywords,
+}: {
+ mostUsedUserKeywords: KeywordUsage[];
+ mostUsedExternalKeywords: KeywordUsage[];
+}) {
+ return (
+
+
+ );
+}
diff --git a/vscode-integration/webview-ui/src/app/dashboard/keyword-bar-chart.tsx b/vscode-integration/webview-ui/src/app/dashboard/keyword-bar-chart.tsx
new file mode 100644
index 0000000..dfb6b51
--- /dev/null
+++ b/vscode-integration/webview-ui/src/app/dashboard/keyword-bar-chart.tsx
@@ -0,0 +1,60 @@
+import { BarChart2 } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { KeywordUsage } from "@/types/keywords";
+
+export default function KeywordBarChart({
+ title,
+ keywords,
+ barClassName,
+}: {
+ title: string;
+ keywords: KeywordUsage[];
+ barClassName: string;
+}) {
+ const maxUsage = Math.max(
+ ...keywords.map((keyword) => keyword.total_usages),
+ 1,
+ );
+
+ return (
+
+
+ {title}
+
+
+ {keywords.length === 0 ? (
+
+ ) : (
+
+ {keywords.map((keyword, index) => {
+ const percentage = (keyword.total_usages / maxUsage) * 100;
+ return (
+
+
+
+ {keyword.keyword_name_without_prefix}
+
+
{keyword.total_usages}
+
+
+
+ );
+ })}
+
+
+ );
+}
diff --git a/vscode-integration/webview-ui/src/app/dashboard/metrics-grid.tsx b/vscode-integration/webview-ui/src/app/dashboard/metrics-grid.tsx
new file mode 100644
index 0000000..1464b26
--- /dev/null
+++ b/vscode-integration/webview-ui/src/app/dashboard/metrics-grid.tsx
@@ -0,0 +1,86 @@
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+ Tag,
+ RefreshCw,
+ AlertTriangle,
+ ShieldAlert,
+ BookOpen,
+ FileCode,
+} from "lucide-react";
+import { KPIData } from "@/types/dashboard";
+
+export default function MetricsGrid({ kpiData }: { kpiData: KPIData | null }) {
+ const formatPercentage = (value: number) => `${Math.round(value * 100)}%`;
+
+ const metrics = [
+ {
+ title: "User Defined Keywords",
+ value: kpiData ? String(kpiData.num_user_keywords) : "N/A",
+ subtitle: "Total number of user defined keywords",
+ icon:
,
+ iconClass: "bg-chart-1/15 text-chart-1",
+ },
+ {
+ title: "Keyword Reuse Rate",
+ value: kpiData ? formatPercentage(kpiData.keyword_reusage_rate) : "N/A",
+ subtitle: "Keywords used more than once",
+ icon:
,
+ iconClass: "bg-chart-3/15 text-chart-3",
+ },
+ {
+ title: "Unused Keywords",
+ value: kpiData ? String(kpiData.num_unused_keywords) : "N/A",
+ subtitle: "Keywords never called",
+ icon:
,
+ iconClass: "bg-chart-4/15 text-chart-4",
+ },
+ {
+ title: "Robocop Issues",
+ value: kpiData ? String(kpiData.num_robocop_issues) : "N/A",
+ subtitle: "Total violations found",
+ icon:
,
+ iconClass: "bg-chart-5/15 text-chart-5",
+ },
+ {
+ title: "Documentation Coverage",
+ value: kpiData ? formatPercentage(kpiData.documentation_coverage) : "N/A",
+ subtitle: "Keywords with [Documentation]",
+ icon:
,
+ iconClass: "bg-chart-2/15 text-chart-2",
+ },
+ {
+ title: "Robot Framework Files",
+ value: kpiData ? String(kpiData.num_rf_files) : "N/A",
+ subtitle: "Total .robot and .resource files",
+ icon:
,
+ iconClass: "bg-chart-1/15 text-chart-1",
+ },
+ ];
+
+ return (
+
+ {metrics.map((metric) => (
+
+
+
+
+ {metric.title}
+
+
+
+ {metric.icon}
+
+
+
+
+ {metric.value}
+
+ {metric.subtitle}
+
+
+ ))}
+
+ );
+}
diff --git a/vscode-integration/webview-ui/src/app/dashboard/page.tsx b/vscode-integration/webview-ui/src/app/dashboard/page.tsx
index 8bf794d..98f4060 100644
--- a/vscode-integration/webview-ui/src/app/dashboard/page.tsx
+++ b/vscode-integration/webview-ui/src/app/dashboard/page.tsx
@@ -1,13 +1,15 @@
-import React, { useState, useEffect } from "react";
-import { vscode } from "../../utilities/vscode";
-import { useMessageListener } from "../../hooks/useMessageListener";
-import MetricsGrid from "../../components/dashboard/metric-grid";
-import KeywordAnalysis from "../../components/dashboard/keyword-analysis";
-import RobocopIssuesSummary from "../../components/dashboard/robocop-issue-summary";
-import ProjectInfo from "../../components/dashboard/project-info";
-import { KPIData, IssueSummary, MostUsedKeywords } from "../../types/dashboard";
+import { useEffect, useState } from "react";
+import { useMessageListener } from "@/hooks/useMessageListener";
+import { KPIData, IssueSummary, MostUsedKeywords } from "@/types/dashboard";
+import ProjectInfoCard from "./project-info-card";
+import MetricsGrid from "./metrics-grid";
+import KeywordAnalysis from "./keyword-analysis";
+import RobocopIssuesSummary from "./robocop-issues";
+import { vscode } from "@/utilities/vscode";
+import { CollapsibleSection } from "./collapsible-section";
+import { FolderOpen, ShieldAlert, BarChart2, Activity } from "lucide-react";
-export default function DashboardView() {
+export default function DashboardPage() {
const [projectPath, setProjectPath] = useState
("");
const [kpiData, setKpiData] = useState(null);
const [mostUsedKeywords, setMostUsedKeywords] =
@@ -40,27 +42,43 @@ export default function DashboardView() {
}, []);
return (
-
-
-
Selected Project
-
+
+
+
-
KPIs
- {kpiData &&
}
+
+
-
Keyword Analysis
- {mostUsedKeywords && (
-
- )}
+
+
-
Robocop Issues Summary
+
+
);
}
diff --git a/vscode-integration/webview-ui/src/app/dashboard/project-info-card.tsx b/vscode-integration/webview-ui/src/app/dashboard/project-info-card.tsx
new file mode 100644
index 0000000..7fd4822
--- /dev/null
+++ b/vscode-integration/webview-ui/src/app/dashboard/project-info-card.tsx
@@ -0,0 +1,29 @@
+import {
+ Card,
+ CardDescription,
+ CardHeader,
+ CardTitle,
+} from "@/components/ui/card";
+
+export default function ProjectInfoCard({
+ projectPath,
+}: {
+ projectPath: string;
+}) {
+ const getProjectName = (path: string): string => {
+ if (!path) return "No project loaded";
+ const parts = path.split(/[\\/]/);
+ return parts[parts.length - 1] || "Robot Framework Project";
+ };
+
+ return (
+
+
+ {getProjectName(projectPath)}
+
+ {projectPath || "No project path available"}
+
+
+
+ );
+}
diff --git a/vscode-integration/webview-ui/src/app/dashboard/robocop-issues.tsx b/vscode-integration/webview-ui/src/app/dashboard/robocop-issues.tsx
new file mode 100644
index 0000000..b2a4b7d
--- /dev/null
+++ b/vscode-integration/webview-ui/src/app/dashboard/robocop-issues.tsx
@@ -0,0 +1,50 @@
+import { Badge } from "@/components/ui/badge";
+import {
+ Card,
+ CardContent,
+ CardDescription,
+ CardHeader,
+ CardTitle,
+} from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
+import { IssueSummary } from "@/types/dashboard";
+
+export default function RobocopIssuesSummary({
+ issues,
+}: {
+ issues: IssueSummary[];
+}) {
+ const sortedIssues = [...issues].sort((a, b) => b.count - a.count);
+
+ return (
+
+
+ Issues by Category
+
+ Overview of detected Robocop violations grouped by category
+
+
+
+ {sortedIssues.length === 0 ? (
+ No issues available
+ ) : (
+
+ {sortedIssues.map((issue, index) => (
+
+
+ {issue.category}
+ 0 ? "destructive" : "secondary"}
+ >
+ {issue.count}
+
+
+
+
+ ))}
+
+
+ );
+}
diff --git a/vscode-integration/webview-ui/src/app/keyword-usage-panel/details-panel-kw.tsx b/vscode-integration/webview-ui/src/app/keyword-usage-panel/details-panel-kw.tsx
new file mode 100644
index 0000000..23fdab9
--- /dev/null
+++ b/vscode-integration/webview-ui/src/app/keyword-usage-panel/details-panel-kw.tsx
@@ -0,0 +1,76 @@
+import { NoKeywordSelected } from "./no-keyword-selected";
+import { CollapsibleFilterSection } from "@/components/panel-section/collapsible-filter-section";
+import { FileUsage, Keyword, KeywordSimilarity } from "@/types/keywords";
+import { DetailsUsageTable } from "./details-usage-table";
+import { DetailsSimilarityTable } from "./details-similarity-table";
+import { Bot, BookText, KeyRound, Library, Sparkles } from "lucide-react";
+
+interface DetailsPanelKeywordUsageProps {
+ selectedKeyword: Keyword | null;
+ robotFileUsages: FileUsage[];
+ resourceFileUsages: FileUsage[];
+ keywordSimilarity: KeywordSimilarity[];
+ keywordSimilaritySources: Record
;
+}
+
+export function DetailsPanelKeywordUsage({
+ selectedKeyword,
+ robotFileUsages,
+ resourceFileUsages,
+ keywordSimilarity,
+ keywordSimilaritySources,
+}: DetailsPanelKeywordUsageProps) {
+ const sortedSimilarity = [...keywordSimilarity].sort(
+ (left, right) => right.score - left.score,
+ );
+
+ return (
+
+
+
+
+
+
+ {!selectedKeyword ? (
+
+ ) : (
+
+
}
+ >
+
+ {selectedKeyword.documentation || "No [Documentation] defined"}
+
+
+
+
}
+ >
+
+
+
+
}
+ >
+
+
+
+
}
+ >
+
+
+
+ )}
+
;
+}
+
+const similarityInfoText =
+ "The similarity score compares the source code of each keyword using text analysis:\n\n" +
+ "1. Each keyword's code is tokenized and transformed into a vector based on word frequencies.\n" +
+ "2. The vectors are compared using cosine similarity to measure how closely code structure and content match.\n" +
+ "3. The result is shown as a percentage: 100% means identical code, lower values indicate less similarity.\n\n" +
+ "Note: Starting at 80% similarity, the badge is shown in red, which may indicate a potential duplicate.";
+
+function getSimilarityBadgeClass(percentage: number) {
+ if (percentage > 80) {
+ return "bg-destructive/30 text-foreground";
+ }
+
+ return "bg-chart-1/30 text-foreground";
+}
+
+export function DetailsSimilarityTable({
+ keywordSimilarity,
+ keywordSimilaritySources,
+}: DetailsSimilarityTableProps) {
+ const handleKeywordClick = (event: React.MouseEvent, keywordName: string) => {
+ if (event.ctrlKey || event.metaKey) {
+ event.stopPropagation();
+ const filePath = keywordSimilaritySources[keywordName];
+ if (filePath) {
+ vscode.postMessage({ command: "openFile", filePath });
+ }
+ }
+ };
+
+ return (
+
+
+
+
+
+
+ Keyword
+
+
+
+ Similarity
+
+
+
+
+
+
+
+ {similarityInfoText}
+
+
+
+
+
+
+
+
+ {keywordSimilarity.length === 0 && (
+
+
+ No similar keywords found
+
+
+ )}
+
+ {keywordSimilarity.map((item) => {
+ const percentage = Math.round(item.score * 100);
+ const sourcePath =
+ keywordSimilaritySources[item.keyword_name_without_prefix];
+ const hasSource = Boolean(sourcePath);
+
+ return (
+
+
+ handleKeywordClick(
+ event,
+ item.keyword_name_without_prefix,
+ )
+ }
+ >
+
+ {item.keyword_name_without_prefix}
+
+
+
+
+ {percentage}%
+
+
+
+ );
+ })}
+
+
+
+
+
+
+
+
+
+ File
+
+
+ Count
+
+
+
+
+ {files.length === 0 && (
+
+
+ No usage found
+
+
+ )}
+
+ {files.map((file) => (
+
+ handleFileClick(event, file.path)}
+ >
+
+ {file.file_name}
+
+
+
+
+ {file.usages}
+
+
+
+ ))}
+
+
+
+
("default");
+ const [searchTerm, setSearchTerm] = useState("");
+ const [currentPage, setCurrentPage] = useState(1);
+
+ const filteredKeywords = useMemo(() => {
+ const keywordsByFilter = filterKeywordsByType(
+ initKeywords,
+ calledKeywords,
+ keywordsWithoutDoc,
+ keywordsWithoutUsages,
+ keywordDuplicates,
+ currentFilter,
+ );
+
+ const filtered = filterKeywordsBySearch(keywordsByFilter, searchTerm);
+
+ if (sortBy === "name_asc") {
+ return [...filtered].sort((left, right) =>
+ left.keyword_name_without_prefix.localeCompare(
+ right.keyword_name_without_prefix,
+ ),
+ );
+ }
+
+ if (sortBy === "name_desc") {
+ return [...filtered].sort((left, right) =>
+ right.keyword_name_without_prefix.localeCompare(
+ left.keyword_name_without_prefix,
+ ),
+ );
+ }
+
+ if (sortBy === "file_usages_desc") {
+ return [...filtered].sort(
+ (left, right) => right.file_usages - left.file_usages,
+ );
+ }
+
+ if (sortBy === "file_usages_asc") {
+ return [...filtered].sort(
+ (left, right) => left.file_usages - right.file_usages,
+ );
+ }
+
+ if (sortBy === "total_usages_desc") {
+ return [...filtered].sort(
+ (left, right) => right.total_usages - left.total_usages,
+ );
+ }
+
+ if (sortBy === "total_usages_asc") {
+ return [...filtered].sort(
+ (left, right) => left.total_usages - right.total_usages,
+ );
+ }
+
+ return filtered;
+ }, [
+ calledKeywords,
+ currentFilter,
+ initKeywords,
+ keywordDuplicates,
+ keywordsWithoutDoc,
+ keywordsWithoutUsages,
+ searchTerm,
+ sortBy,
+ ]);
+
+ const showNoFileSelected =
+ !fileSelected && ["all", "initialized", "called"].includes(currentFilter);
+
+ useEffect(() => {
+ setCurrentPage(1);
+ }, [
+ currentFilter,
+ searchTerm,
+ sortBy,
+ initKeywords,
+ calledKeywords,
+ keywordsWithoutDoc,
+ keywordsWithoutUsages,
+ keywordDuplicates,
+ ]);
+
+ const totalPages = Math.max(
+ 1,
+ Math.ceil(filteredKeywords.length / PAGE_SIZE),
+ );
+ const pageStartIndex = (currentPage - 1) * PAGE_SIZE;
+ const paginatedKeywords = filteredKeywords.slice(
+ pageStartIndex,
+ pageStartIndex + PAGE_SIZE,
+ );
+
+ const handleSourceClick = (event: React.MouseEvent, filePath: string) => {
+ if (event.ctrlKey || event.metaKey) {
+ event.stopPropagation();
+ vscode.postMessage({ command: "openFile", filePath });
+ }
+ };
+
+ if (showNoFileSelected) {
+ return
+
+
setSortBy(value as SortOption)}
+ >
+
+
+
+ Sort: Default
+ Sort: Name (A-Z)
+ Sort: Name (Z-A)
+
+ Sort: Usages In File (High-Low)
+
+
+ Sort: Usages In File (Low-High)
+
+
+ Sort: Total Usages (High-Low)
+
+
+ Sort: Total Usages (Low-High)
+
+
+
+
+
setSearchTerm(event.target.value)}
+ className="h-9 flex-1 bg-input text-sm border-border"
+ />
+
+
setSearchTerm("")}
+ >
+ Clear
+
+
+ {layoutControls && (
+
+ {layoutControls.isDetailsCollapsed ? (
+
+ )}
+
+
+
+ {filteredKeywords.length === 0 ? (
+
+ ) : (
+
+
+
+
+ Keyword
+
+
+ Initialized In
+
+
+ Usages In File
+
+
+ Total Usages
+
+
+
+
+ {paginatedKeywords.map((keyword) => {
+ const isSelected = selectedKeywordId === keyword.keyword_id;
+ const sourceType = isUserSource(keyword.source)
+ ? "user"
+ : "external";
+
+ return (
+ onKeywordSelect(keyword)}
+ className={cn(
+ "cursor-pointer border-b border-border/60 transition-colors hover:bg-accent/40",
+ isSelected && "bg-accent",
+ )}
+ >
+
+
+
+ {sourceType === "user" ? "U" : "E"}
+
+
+ {keyword.keyword_name_without_prefix}
+
+
+
+
+ handleSourceClick(event, keyword.source)
+ }
+ title={keyword.source}
+ >
+
+ {keyword.file_name}
+
+
+
+ {keyword.file_usages}
+
+
+
+ {keyword.total_usages}
+
+
+
+ );
+ })}
+
+
+ )}
+
+
+ {filteredKeywords.length > 0 && (
+
+ )}
+
+ Please follow these steps to open the Keyword Overview:
+
+
+
+ Select a Robot Framework File from the file
+ selection
+
+
+ Use the Type Filter for filtering in a selected
+ file
+
+
+ Use the Global Filter for filtering across all
+ files
+
+
+ Click on a Keyword to view its details
+
+
+
+ }
+ />
+ );
+}
diff --git a/vscode-integration/webview-ui/src/app/keyword-usage-panel/no-keyword-selected.tsx b/vscode-integration/webview-ui/src/app/keyword-usage-panel/no-keyword-selected.tsx
new file mode 100644
index 0000000..e2ab777
--- /dev/null
+++ b/vscode-integration/webview-ui/src/app/keyword-usage-panel/no-keyword-selected.tsx
@@ -0,0 +1,16 @@
+import { KeyRound } from "lucide-react";
+import { EmptyStateMessage } from "@/components/placeholder-messages/empty-state-message";
+
+export function NoKeywordSelected() {
+ return (
+
+ Please select a keyword from the table to view its details
+
+ }
+ />
+ );
+}
diff --git a/vscode-integration/webview-ui/src/app/keyword-usage-panel/no-keywords-found.tsx b/vscode-integration/webview-ui/src/app/keyword-usage-panel/no-keywords-found.tsx
new file mode 100644
index 0000000..d547dcd
--- /dev/null
+++ b/vscode-integration/webview-ui/src/app/keyword-usage-panel/no-keywords-found.tsx
@@ -0,0 +1,14 @@
+import { SearchX } from "lucide-react";
+import { EmptyStateMessage } from "@/components/placeholder-messages/empty-state-message";
+
+export function NoKeywordFound() {
+ return (
+ No keywords found for the selected filter
+ }
+ />
+ );
+}
diff --git a/vscode-integration/webview-ui/src/app/keyword-usage-panel/page.tsx b/vscode-integration/webview-ui/src/app/keyword-usage-panel/page.tsx
new file mode 100644
index 0000000..d3ef254
--- /dev/null
+++ b/vscode-integration/webview-ui/src/app/keyword-usage-panel/page.tsx
@@ -0,0 +1,220 @@
+import { useEffect, useMemo, useState } from "react";
+import { AppLayout } from "@/components/layout/layout";
+import { SidebarKeywordUsage } from "@/app/keyword-usage-panel/sidebar-kw";
+import { MainContentKeywordUsage } from "./main-content-kw";
+import { DetailsPanelKeywordUsage } from "./details-panel-kw";
+import { useMessageListener } from "@/hooks/useMessageListener";
+import { FileSelect } from "@/types/files";
+import {
+ FileUsage,
+ FilterItem,
+ Keyword,
+ KeywordSimilarity,
+} from "@/types/keywords";
+import { deduplicateKeywords } from "@/utilities/keyword_utils";
+import { vscode } from "@/utilities/vscode";
+
+export default function KeywordUsagePage() {
+ const [allFiles, setAllFiles] = useState([]);
+ const [selectedResource, setSelectedResource] = useState(
+ null,
+ );
+ const [fileSelected, setFileSelected] = useState(false);
+ const [currentFilter, setCurrentFilter] = useState("all");
+
+ const [initKeywords, setInitKeywords] = useState([]);
+ const [calledKeywords, setCalledKeywords] = useState([]);
+ const [keywordsWithoutDoc, setKeywordsWithoutDoc] = useState([]);
+ const [keywordsWithoutUsages, setKeywordsWithoutUsages] = useState(
+ [],
+ );
+ const [keywordDuplicates, setKeywordDuplicates] = useState([]);
+ const [selectedKeyword, setSelectedKeyword] = useState(null);
+ const [robotFileUsages, setRobotFileUsages] = useState([]);
+ const [resourceFileUsages, setResourceFileUsages] = useState([]);
+ const [keywordSimilarity, setKeywordSimilarity] = useState<
+ KeywordSimilarity[]
+ >([]);
+ const [keywordSimilaritySources, setKeywordSimilaritySources] = useState<
+ Record
+ >({});
+
+ useMessageListener({
+ allFiles: (message) => {
+ setAllFiles(message.files || []);
+ },
+ initKeywords: (message) => {
+ setInitKeywords(message.init_keywords || []);
+ },
+ calledKeywords: (message) => {
+ setCalledKeywords(message.called_keywords || []);
+ },
+ keywordsWithoutDoc: (message) => {
+ setKeywordsWithoutDoc(message.keywords || []);
+ },
+ keywordsWithoutUsages: (message) => {
+ setKeywordsWithoutUsages(message.keywords || []);
+ },
+ keywordDuplicates: (message) => {
+ setKeywordDuplicates(message.keywords || []);
+ },
+ keywordUsageRobot: (message) => {
+ setRobotFileUsages(message.usage || []);
+ },
+ keywordUsageResource: (message) => {
+ setResourceFileUsages(message.usage || []);
+ },
+ keywordSimilarity: (message) => {
+ const similarityList = message.similarity || [];
+ const sources: Record = {};
+
+ similarityList.forEach((keyword: KeywordSimilarity) => {
+ if (keyword.source) {
+ sources[keyword.keyword_name_without_prefix] = keyword.source;
+ }
+ });
+
+ setKeywordSimilarity(similarityList);
+ setKeywordSimilaritySources(sources);
+ },
+ });
+
+ useEffect(() => {
+ vscode.postMessage({ command: "getAllFiles" });
+ vscode.postMessage({ command: "getKeywordsWithoutDoc" });
+ vscode.postMessage({ command: "getKeywordsWithoutUsages" });
+ vscode.postMessage({ command: "getKeywordDuplicates" });
+ }, []);
+
+ useEffect(() => {
+ if (!selectedResource) {
+ setInitKeywords([]);
+ setCalledKeywords([]);
+ setSelectedKeyword(null);
+ setRobotFileUsages([]);
+ setResourceFileUsages([]);
+ setKeywordSimilarity([]);
+ setKeywordSimilaritySources({});
+ return;
+ }
+
+ vscode.postMessage({
+ command: "getInitKeywords",
+ filePath: selectedResource.path,
+ });
+ vscode.postMessage({
+ command: "getCalledKeywords",
+ filePath: selectedResource.path,
+ });
+ }, [selectedResource]);
+
+ const typeFilters = useMemo(() => {
+ const allKeywords = deduplicateKeywords([
+ ...initKeywords,
+ ...calledKeywords,
+ ]);
+
+ return [
+ { id: "all", label: "All Keywords", count: allKeywords.length },
+ {
+ id: "initialized",
+ label: "Initialized Keywords",
+ count: deduplicateKeywords(initKeywords).length,
+ },
+ {
+ id: "called",
+ label: "Called Keywords",
+ count: deduplicateKeywords(calledKeywords).length,
+ },
+ ];
+ }, [calledKeywords, initKeywords]);
+
+ const globalFilters = useMemo(() => {
+ return [
+ {
+ id: "kw_wo_doc",
+ label: "Keywords without Documentation",
+ count: deduplicateKeywords(keywordsWithoutDoc).length,
+ },
+ {
+ id: "kw_wo_usages",
+ label: "Unused Keywords",
+ count: deduplicateKeywords(keywordsWithoutUsages).length,
+ },
+ {
+ id: "kw_duplicates",
+ label: "Potential Duplicate Keywords",
+ count: deduplicateKeywords(keywordDuplicates).length,
+ },
+ ];
+ }, [keywordDuplicates, keywordsWithoutDoc, keywordsWithoutUsages]);
+
+ const handleResourceChange = (resource: FileSelect | null) => {
+ setSelectedResource(resource);
+ setFileSelected(resource !== null);
+ setSelectedKeyword(null);
+ setRobotFileUsages([]);
+ setResourceFileUsages([]);
+ setKeywordSimilarity([]);
+ setKeywordSimilaritySources({});
+
+ if (!resource) {
+ setCurrentFilter("all");
+ }
+ };
+
+ const handleKeywordSelect = (keyword: Keyword) => {
+ setSelectedKeyword(keyword);
+
+ vscode.postMessage({
+ command: "getKeywordUsageRobot",
+ keyword: keyword.keyword_name_with_prefix,
+ });
+ vscode.postMessage({
+ command: "getKeywordUsageResource",
+ keyword: keyword.keyword_name_with_prefix,
+ });
+ vscode.postMessage({
+ command: "getKeywordSimilarity",
+ keyword: keyword.keyword_name_with_prefix,
+ });
+ };
+
+ return (
+
+
+
+
+
+
+
+
+
+
+ Resource Files
+ {resourceFiles.map((file) => (
+
+
+
+
+ ))}
+
+
+
+ Robot Files
+ {robotFiles.map((file) => (
+
+
+
+
+ ))}
+
+
+
+
+
+
+
+
}
+ defaultOpen={true}
+ >
+ {typeFilters.map(({ id, label, count }) => (
+
+ ))}
+
+
+
+
+
}
+ defaultOpen={true}
+ >
+ {globalFilters.map(({ id, label, count }) => (
+
+ ))}
+
+
([]);
- const [selectedResource, setSelectedResource] = useState(
- null,
- );
-
- const [initKeywords, setInitKeywords] = useState([]);
- const [calledKeywords, setCalledKeywords] = useState([]);
- const [keywordsWithoutDoc, setKeywordsWithoutDoc] = useState([]);
- const [keywordsWithoutUsages, setKeywordsWithoutUsages] = useState(
- [],
- );
- const [keywordDuplicates, setKeywordDuplicates] = useState([]);
- const [selectedKeyword, setSelectedKeyword] = useState(null);
-
- const [currentFilter, setCurrentFilter] = useState("all");
- const [searchTerm, setSearchTerm] = useState("");
- const [sortBy, setSortBy] = useState("sort");
-
- const [robotFileUsages, setRobotFileUsages] = useState([]);
- const [resourceFileUsages, setResourceFileUsages] = useState([]);
- const [keywordSimilarity, setKeywordSimilarity] = useState<
- KeywordSimilarity[]
- >([]);
- const [keywordSimilaritySources, setKeywordSimilaritySources] = useState<
- Record
- >({});
- const [fileSelected, setFileSelected] = useState(false);
-
- useMessageListener({
- allFiles: (message) => {
- const files = message.files || [];
- setAllFiles(
- files.map((file: FileSelect) => ({
- file_name: file.file_name,
- path: file.path,
- })),
- );
- },
- initKeywords: (message) => {
- const keywords = message.init_keywords || [];
- setInitKeywords(
- keywords.map((kw: Keyword) => ({
- keyword_id: kw.keyword_id,
- file_name: kw.file_name,
- keyword_name_without_prefix: kw.keyword_name_without_prefix,
- keyword_name_with_prefix: kw.keyword_name_with_prefix,
- documentation: kw.documentation,
- source: kw.source,
- file_usages: kw.file_usages,
- total_usages: kw.total_usages,
- })),
- );
- },
- calledKeywords: (message) => {
- const keywords = message.called_keywords || [];
- setCalledKeywords(
- keywords.map((kw: Keyword) => ({
- keyword_id: kw.keyword_id,
- file_name: kw.file_name,
- keyword_name_without_prefix: kw.keyword_name_without_prefix,
- keyword_name_with_prefix: kw.keyword_name_with_prefix,
- documentation: kw.documentation,
- source: kw.source,
- file_usages: kw.file_usages,
- total_usages: kw.total_usages,
- })),
- );
- },
- keywordsWithoutDoc: (message) => {
- const keywords = message.keywords || [];
- setKeywordsWithoutDoc(
- keywords.map((kw: Keyword) => ({
- keyword_id: kw.keyword_id,
- file_name: kw.file_name,
- keyword_name_without_prefix: kw.keyword_name_without_prefix,
- keyword_name_with_prefix: kw.keyword_name_with_prefix,
- documentation: kw.documentation,
- source: kw.source,
- file_usages: kw.file_usages,
- total_usages: kw.total_usages,
- })),
- );
- },
- keywordsWithoutUsages: (message) => {
- const keywords = message.keywords || [];
- setKeywordsWithoutUsages(
- keywords.map((kw: Keyword) => ({
- keyword_id: kw.keyword_id,
- file_name: kw.file_name,
- keyword_name_without_prefix: kw.keyword_name_without_prefix,
- keyword_name_with_prefix: kw.keyword_name_with_prefix,
- documentation: kw.documentation,
- source: kw.source,
- file_usages: kw.file_usages,
- total_usages: kw.total_usages,
- })),
- );
- },
- keywordDuplicates: (message) => {
- const keywords = message.keywords || [];
- setKeywordDuplicates(
- keywords.map((kw: Keyword) => ({
- keyword_id: kw.keyword_id,
- file_name: kw.file_name,
- keyword_name_without_prefix: kw.keyword_name_without_prefix,
- keyword_name_with_prefix: kw.keyword_name_with_prefix,
- documentation: kw.documentation,
- source: kw.source,
- file_usages: kw.file_usages,
- total_usages: kw.total_usages,
- })),
- );
- },
- keywordUsageRobot: (message) => {
- const file = message.usage || [];
- setRobotFileUsages(
- file.map((file: FileUsage) => ({
- file_name: file.file_name,
- path: file.path,
- usages: file.usages,
- })),
- );
- },
- keywordUsageResource: (message) => {
- const file = message.usage || [];
- setResourceFileUsages(
- file.map((file: FileUsage) => ({
- file_name: file.file_name,
- path: file.path,
- usages: file.usages,
- })),
- );
- },
- keywordSimilarity: (message) => {
- const similar_kw = message.similarity || [];
- const sources: Record = {};
-
- setKeywordSimilarity(
- similar_kw.map((kw: KeywordSimilarity) => {
- // Sammle die Source-Pfade für spätere Verwendung
- if (kw.source) {
- sources[kw.keyword_name_without_prefix] = kw.source;
- }
- return {
- keyword_id: kw.keyword_id,
- keyword_name_without_prefix: kw.keyword_name_without_prefix,
- keyword_name_with_prefix: kw.keyword_name_with_prefix,
- source: kw.source,
- score: kw.score,
- };
- }),
- );
-
- setKeywordSimilaritySources(sources);
- },
- });
-
- useEffect(() => {
- vscode.postMessage({ command: "getAllFiles" });
- vscode.postMessage({ command: "getProjectPath" });
- vscode.postMessage({ command: "getKeywordsWithoutDoc" });
- vscode.postMessage({ command: "getKeywordsWithoutUsages" });
- vscode.postMessage({ command: "getKeywordDuplicates" });
- }, []);
-
- useEffect(() => {
- if (selectedResource) {
- vscode.postMessage({
- command: "getInitKeywords",
- filePath: selectedResource.path,
- });
- vscode.postMessage({
- command: "getCalledKeywords",
- filePath: selectedResource.path,
- });
- } else {
- setInitKeywords([]);
- setCalledKeywords([]);
- }
- }, [selectedResource]);
-
- const handleKeywordClick = (keyword: Keyword) => {
- setSelectedKeyword(keyword);
-
- vscode.postMessage({
- command: "getKeywordUsageRobot",
- keyword: keyword.keyword_name_with_prefix,
- });
- vscode.postMessage({
- command: "getKeywordUsageResource",
- keyword: keyword.keyword_name_with_prefix,
- });
- vscode.postMessage({
- command: "getKeywordSimilarity",
- keyword: keyword.keyword_name_with_prefix,
- });
- };
-
- const handleClear = () => {
- setSearchTerm("");
- };
-
- const handleResourceChange = useCallback((resource: FileSelect | null) => {
- setSelectedResource(resource);
- setFileSelected(true);
- if (resource) {
- vscode.postMessage({
- command: "getInitKeywords",
- filePath: resource.path,
- });
- vscode.postMessage({
- command: "getCalledKeywords",
- filePath: resource.path,
- });
- }
- }, []);
-
- const calculateCountsForTypeFilter = (): FilterItem[] => {
- const allKeywords = [...initKeywords, ...calledKeywords];
-
- return [
- {
- id: "all",
- label: "All Keywords",
- count: deduplicateKeywords(allKeywords).length,
- },
- {
- id: "initialized",
- label: "Initialized Keywords",
- count: deduplicateKeywords(initKeywords).length,
- },
- {
- id: "called",
- label: "Called Keywords",
- count: deduplicateKeywords(calledKeywords).length,
- },
- ];
- };
-
- const calculateCountsForGlobalFilter = (): FilterItem[] => {
- return [
- {
- id: "kw_wo_doc",
- label: "Keywords without Documentation",
- count: deduplicateKeywords(keywordsWithoutDoc).length,
- },
- {
- id: "kw_wo_usages",
- label: "Unused Keywords",
- count: deduplicateKeywords(keywordsWithoutUsages).length,
- },
- {
- id: "kw_duplicates",
- label: "Potential Duplicate Keywords",
- count: deduplicateKeywords(keywordDuplicates).length,
- },
- ];
- };
-
- const transformedSimilarity =
- keywordSimilarity.length > 0
- ? {
- similar_keywords: keywordSimilarity.reduce(
- (acc, kw) => {
- acc[kw.keyword_name_without_prefix] = kw.score;
- return acc;
- },
- {} as Record,
- ),
- }
- : null;
-
- return (
-
+
+
+
+
+
+ {!selectedMessage ? (
+
+ ) : (
+
+
+ )}
+
+ {content || emptyMessage}
+
+ );
+ }
+
+ return (
+
+ {content || emptyMessage}
+
+ );
+}
diff --git a/vscode-integration/webview-ui/src/app/robocop-panel/main-content-robocop.tsx b/vscode-integration/webview-ui/src/app/robocop-panel/main-content-robocop.tsx
new file mode 100644
index 0000000..ffd013d
--- /dev/null
+++ b/vscode-integration/webview-ui/src/app/robocop-panel/main-content-robocop.tsx
@@ -0,0 +1,259 @@
+import { useEffect, useMemo, useState } from "react";
+import { PanelRightClose, PanelRightOpen } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from "@/components/ui/select";
+import {
+ Table,
+ TableBody,
+ TableCell,
+ TableHead,
+ TableHeader,
+ TableRow,
+} from "@/components/ui/table";
+import { useUsageLayoutControls } from "@/components/layout/layout";
+import { cn } from "@/lib/utils";
+import { RobocopMessage } from "@/types/robocop";
+import {
+ filterMessagesBySearch,
+ filterMessagesByType,
+ sortRobocopMessages,
+} from "@/utilities/robocop_utils";
+import { vscode } from "@/utilities/vscode";
+import { TablePagination } from "@/components/main-content/table-pagination";
+import { NoRobocopIssuesFound } from "./no-issues-found";
+
+type SortOption =
+ | "sort"
+ | "name_asc"
+ | "name_desc"
+ | "severity_high"
+ | "severity_low";
+const PAGE_SIZE = 25;
+
+interface MainContentRobocopProps {
+ robocopMessages: RobocopMessage[];
+ currentFilter: string;
+ searchTerm: string;
+ sortBy: string;
+ selectedMessage: RobocopMessage | null;
+ onSortChange: (sort: SortOption) => void;
+ onSearchChange: (value: string) => void;
+ onClearSearch: () => void;
+ onMessageSelect: (message: RobocopMessage) => void;
+}
+
+function getSeverityBadgeClass(severity: string) {
+ if (severity === "E") {
+ return "bg-destructive text-primary-foreground";
+ }
+
+ if (severity === "W") {
+ return "bg-chart-4 text-primary-foreground";
+ }
+
+ return "bg-chart-1 text-primary-foreground";
+}
+
+export function MainContentRobocop({
+ robocopMessages,
+ currentFilter,
+ searchTerm,
+ sortBy,
+ selectedMessage,
+ onSortChange,
+ onSearchChange,
+ onClearSearch,
+ onMessageSelect,
+}: MainContentRobocopProps) {
+ const layoutControls = useUsageLayoutControls();
+ const [currentPage, setCurrentPage] = useState(1);
+
+ const messagesToShow = useMemo(() => {
+ const filteredByType = filterMessagesByType(robocopMessages, currentFilter);
+ const filteredBySearch = filterMessagesBySearch(filteredByType, searchTerm);
+
+ return sortRobocopMessages(filteredBySearch, sortBy);
+ }, [currentFilter, robocopMessages, searchTerm, sortBy]);
+
+ useEffect(() => {
+ setCurrentPage(1);
+ }, [currentFilter, searchTerm, sortBy, robocopMessages]);
+
+ const totalPages = Math.max(1, Math.ceil(messagesToShow.length / PAGE_SIZE));
+ const pageStartIndex = (currentPage - 1) * PAGE_SIZE;
+ const paginatedMessages = messagesToShow.slice(
+ pageStartIndex,
+ pageStartIndex + PAGE_SIZE,
+ );
+
+ const handleSourceClick = (event: React.MouseEvent, filePath: string) => {
+ if (event.ctrlKey || event.metaKey) {
+ event.stopPropagation();
+ vscode.postMessage({ command: "openFile", filePath });
+ }
+ };
+
+ return (
+
+
+
onSortChange(value as SortOption)}
+ >
+
+
+
+ Sort: Default
+ Sort: Name (A-Z)
+ Sort: Name (Z-A)
+
+ Sort: Severity (High-Low)
+
+
+ Sort: Severity (Low-High)
+
+
+
+
+
onSearchChange(event.target.value)}
+ className="h-9 flex-1 bg-input text-sm border-border"
+ />
+
+
+ Clear
+
+
+ {layoutControls && (
+
+ {layoutControls.isDetailsCollapsed ? (
+
+ )}
+
+
+
+ {messagesToShow.length === 0 ? (
+
+ ) : (
+
+
+
+
+ Rule ID
+
+
+ Message
+
+
+ Source
+
+
+ Severity
+
+
+
+
+ {paginatedMessages.map((messageData) => {
+ const isSelected =
+ selectedMessage?.message_id === messageData.message_id;
+
+ return (
+ onMessageSelect(messageData)}
+ className={cn(
+ "cursor-pointer border-b border-border/60 transition-colors hover:bg-accent/40",
+ isSelected && "bg-accent",
+ )}
+ >
+
+
+
+ {messageData.severity}
+
+
+ {messageData.rule_id}
+
+
+
+
+
+
+ {messageData.message}
+
+
+
+
+ handleSourceClick(event, messageData.source)
+ }
+ title={messageData.source}
+ >
+
+ {messageData.file_name}
+
+
+
+
+ {messageData.severity}
+
+
+ );
+ })}
+
+
+ )}
+
+
+ {messagesToShow.length > 0 && (
+
+ )}
+
+ Please select a Robocop issue from the table to view its details
+
+ }
+ />
+ );
+}
diff --git a/vscode-integration/webview-ui/src/app/robocop-panel/no-issues-found.tsx b/vscode-integration/webview-ui/src/app/robocop-panel/no-issues-found.tsx
new file mode 100644
index 0000000..d87da91
--- /dev/null
+++ b/vscode-integration/webview-ui/src/app/robocop-panel/no-issues-found.tsx
@@ -0,0 +1,14 @@
+import { SearchX } from "lucide-react";
+import { EmptyStateMessage } from "@/components/placeholder-messages/empty-state-message";
+
+export function NoRobocopIssuesFound() {
+ return (
+ No Robocop issues found for the selected filter
+ }
+ />
+ );
+}
diff --git a/vscode-integration/webview-ui/src/app/robocop-panel/page.tsx b/vscode-integration/webview-ui/src/app/robocop-panel/page.tsx
new file mode 100644
index 0000000..7a33a93
--- /dev/null
+++ b/vscode-integration/webview-ui/src/app/robocop-panel/page.tsx
@@ -0,0 +1,139 @@
+import { useEffect, useMemo, useState } from "react";
+import { AppLayout } from "@/components/layout/layout";
+import { useMessageListener } from "@/hooks/useMessageListener";
+import { FilterItem } from "@/types/keywords";
+import { RobocopMessage } from "@/types/robocop";
+import { filterMessagesByType } from "@/utilities/robocop_utils";
+import { vscode } from "@/utilities/vscode";
+import { SidebarRobocop } from "@/app/robocop-panel/sidebar-robocop";
+import { MainContentRobocop } from "@/app/robocop-panel/main-content-robocop";
+import { DetailsPanelRobocop } from "@/app/robocop-panel/details-panel-robocop";
+
+export default function RobocopPage() {
+ const [allRobocopMessages, setRobocopMessages] = useState(
+ [],
+ );
+ const [selectedRobocopMessage, setSelectedRobocopMessage] =
+ useState(null);
+ const [currentFilter, setCurrentFilter] = useState("all");
+ const [searchTerm, setSearchTerm] = useState("");
+ const [sortBy, setSortBy] = useState("sort");
+
+ useMessageListener({
+ robocopMessages: (message) => {
+ const robocopMessages = message.messages || [];
+
+ setRobocopMessages(
+ robocopMessages.map((robocopMessage: RobocopMessage) => ({
+ message_id: robocopMessage.message_id,
+ rule_id: robocopMessage.rule_id,
+ rule_message: robocopMessage.rule_message,
+ message: robocopMessage.message,
+ category: robocopMessage.category,
+ file_name: robocopMessage.file_name,
+ source: robocopMessage.source,
+ severity: robocopMessage.severity,
+ code: robocopMessage.code,
+ })),
+ );
+ },
+ });
+
+ useEffect(() => {
+ vscode.postMessage({ command: "getRobocopMessages" });
+ }, []);
+
+ const categoryFilters = useMemo(() => {
+ const allFilter = {
+ id: "all",
+ label: "All",
+ count: allRobocopMessages.length,
+ };
+
+ const categories = [
+ { id: "arguments", label: "Arguments" },
+ { id: "comments", label: "Comments" },
+ { id: "documentation", label: "Documentation" },
+ { id: "duplication", label: "Duplication" },
+ { id: "errors", label: "Errors" },
+ { id: "imports", label: "Imports" },
+ { id: "keywords", label: "Keywords" },
+ { id: "lengths", label: "Lengths" },
+ { id: "miscellaneous", label: "Miscellaneous" },
+ { id: "naming", label: "Naming" },
+ { id: "deprecated", label: "Deprecated" },
+ { id: "order", label: "Order" },
+ { id: "spacing", label: "Spacing" },
+ { id: "tags", label: "Tags" },
+ { id: "variables", label: "Variables" },
+ { id: "annotations", label: "Annotations" },
+ ]
+ .map((category) => ({
+ ...category,
+ count: filterMessagesByType(allRobocopMessages, category.id).length,
+ }))
+ .filter((category) => category.count > 0)
+ .sort((left, right) => right.count - left.count);
+
+ return [allFilter, ...categories];
+ }, [allRobocopMessages]);
+
+ const severityFilters = useMemo(() => {
+ return [
+ {
+ id: "info",
+ label: "Info",
+ count: filterMessagesByType(allRobocopMessages, "info").length,
+ },
+ {
+ id: "warning",
+ label: "Warning",
+ count: filterMessagesByType(allRobocopMessages, "warning").length,
+ },
+ {
+ id: "error",
+ label: "Error",
+ count: filterMessagesByType(allRobocopMessages, "error").length,
+ },
+ ];
+ }, [allRobocopMessages]);
+
+ const handleMessageSelect = (message: RobocopMessage) => {
+ setSelectedRobocopMessage(message);
+ vscode.postMessage({
+ command: "getRobocopMessage",
+ messageUuid: message.message_id,
+ });
+ };
+
+ const handleClearSearch = () => {
+ setSearchTerm("");
+ };
+
+ return (
+
+
+ );
+}
diff --git a/vscode-integration/webview-ui/src/app/robocop/page.tsx b/vscode-integration/webview-ui/src/app/robocop/page.tsx
deleted file mode 100644
index 248ff70..0000000
--- a/vscode-integration/webview-ui/src/app/robocop/page.tsx
+++ /dev/null
@@ -1,201 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { vscode } from "../../utilities/vscode";
-import { useMessageListener } from "../../hooks/useMessageListener";
-import { RobocopMessage } from "../../types/robocop";
-import { FilterItem } from "../../types/keywords";
-import Layout from "../../components/layout/layout";
-import RobocopSidebar from "../../components/robocop/sidebar-robocop";
-import MainContentRobocopMessages from "../../components/robocop/main-content-robocop";
-import DetailsPanelRobocopMessage from "../../components/robocop/details-panel-robocop";
-import { filterMessagesByType } from "../../utilities/robocop_utils";
-
-const RobocopMessageView: React.FC = () => {
- // State
- const [allRobocopMessages, setRobocopMessages] = useState(
- [],
- );
- const [selectedRobocopMessage, setSelectedRobocopMessage] =
- useState(null);
- const [currentFilter, setCurrentFilter] = useState("all");
- const [searchTerm, setSearchTerm] = useState("");
- const [sortBy, setSortBy] = useState("sort");
-
- useMessageListener({
- robocopMessages: (message) => {
- const rm_messages = message.messages || [];
- setRobocopMessages(
- rm_messages.map((rm: RobocopMessage) => ({
- message_id: rm.message_id,
- rule_id: rm.rule_id,
- rule_message: rm.rule_message,
- message: rm.message,
- category: rm.category,
- file_name: rm.file_name,
- source: rm.source,
- severity: rm.severity,
- code: rm.code,
- })),
- );
- },
- });
-
- useEffect(() => {
- vscode.postMessage({ command: "getRobocopMessages" });
- }, []);
-
- const handleRobocopMessageClick = (message: RobocopMessage) => {
- setSelectedRobocopMessage(message);
-
- vscode.postMessage({
- command: "getRobocopMessage",
- messageUuid: message.message_id,
- });
- };
-
- const handleClear = () => {
- setSearchTerm("");
- };
-
- const calculateCountsForCategoryFilter = (): FilterItem[] => {
- const allItem = {
- id: "all",
- label: "All",
- count: allRobocopMessages.length,
- };
- const categories = [
- {
- id: "arguments",
- label: "Arguments",
- count: filterMessagesByType(allRobocopMessages, "arguments").length,
- },
- {
- id: "comments",
- label: "Comments",
- count: filterMessagesByType(allRobocopMessages, "comments").length,
- },
- {
- id: "documentation",
- label: "Documentation",
- count: filterMessagesByType(allRobocopMessages, "documentation").length,
- },
- {
- id: "duplication",
- label: "Duplication",
- count: filterMessagesByType(allRobocopMessages, "duplication").length,
- },
- {
- id: "errors",
- label: "Errors",
- count: filterMessagesByType(allRobocopMessages, "errors").length,
- },
- {
- id: "imports",
- label: "Imports",
- count: filterMessagesByType(allRobocopMessages, "imports").length,
- },
- {
- id: "keywords",
- label: "Keywords",
- count: filterMessagesByType(allRobocopMessages, "keywords").length,
- },
- {
- id: "lengths",
- label: "Lengths",
- count: filterMessagesByType(allRobocopMessages, "lengths").length,
- },
- {
- id: "miscellaneous",
- label: "Miscellaneous",
- count: filterMessagesByType(allRobocopMessages, "miscellaneous").length,
- },
- {
- id: "naming",
- label: "Naming",
- count: filterMessagesByType(allRobocopMessages, "naming").length,
- },
- {
- id: "deprecated",
- label: "Deprecated",
- count: filterMessagesByType(allRobocopMessages, "deprecated").length,
- },
- {
- id: "order",
- label: "Order",
- count: filterMessagesByType(allRobocopMessages, "order").length,
- },
- {
- id: "spacing",
- label: "Spacing",
- count: filterMessagesByType(allRobocopMessages, "spacing").length,
- },
- {
- id: "tags",
- label: "Tags",
- count: filterMessagesByType(allRobocopMessages, "tags").length,
- },
- {
- id: "variables",
- label: "Variables",
- count: filterMessagesByType(allRobocopMessages, "variables").length,
- },
- {
- id: "annotations",
- label: "Annotations",
- count: filterMessagesByType(allRobocopMessages, "annotations").length,
- },
- ]
- .filter((category) => category.count > 0)
- .sort((a, b) => b.count - a.count);
- return [allItem, ...categories];
- };
-
- const calculateCountsForSeverityFilter = (): FilterItem[] => {
- return [
- {
- id: "info",
- label: "Info",
- count: filterMessagesByType(allRobocopMessages, "info").length,
- },
- {
- id: "warning",
- label: "Warning",
- count: filterMessagesByType(allRobocopMessages, "warning").length,
- },
- {
- id: "error",
- label: "Error",
- count: filterMessagesByType(allRobocopMessages, "error").length,
- },
- ];
- };
-
- return (
- = ({
- mostUsedUserKeywords,
- mostUsedExternalKeywords,
-}) => {
- // Calculate max value for scaling bars
- const maxUserUsage = Math.max(
- ...mostUsedUserKeywords.map((kw) => kw.total_usages),
- 1,
- );
- const maxExternalUsage = Math.max(
- ...mostUsedExternalKeywords.map((kw) => kw.total_usages),
- 1,
- );
-
- return (
-
-
-
Top 5 Most Used User Defined Keywords
-
- {mostUsedUserKeywords.map((keyword, index) => {
- const percentage = (keyword.total_usages / maxUserUsage) * 100;
- return (
-
-
- {keyword.keyword_name_without_prefix}
-
-
-
{keyword.total_usages}
-
- );
- })}
-
-
-
-
-
- Top 5 Most Used External/BuiltIn Keywords
-
-
- {mostUsedExternalKeywords.map((keyword, index) => {
- const percentage = (keyword.total_usages / maxExternalUsage) * 100;
- return (
-
-
- {keyword.keyword_name_without_prefix}
-
-
-
{keyword.total_usages}
-
- );
- })}
-
-
-
= ({ kpiData }) => {
- const formatPercentage = (value: number) => {
- return `${Math.round(value * 100)}%`;
- };
-
- return (
-
-
-
-
User Defined Keywords
-
📝
-
-
{kpiData.num_user_keywords}
-
- Total number of user defined keywords
-
-
-
-
-
-
Keyword Reuse Rate
-
♻️
-
-
- {formatPercentage(kpiData.keyword_reusage_rate)}
-
-
Keywords used more than once
-
-
-
-
-
{kpiData.num_unused_keywords}
-
Keywords never called
-
-
-
-
-
{kpiData.num_robocop_issues}
-
Total violations found
-
-
-
-
-
Documentation Coverage
-
📚
-
-
- {formatPercentage(kpiData.documentation_coverage)}
-
-
Keywords with [Documentation]
-
-
-
-
-
Robot Framework Files
-
📊
-
-
{kpiData.num_rf_files}
-
Total .robot and .resource files
-
-
= ({ projectPath }) => {
- const getProjectName = (path: string): string => {
- if (!path) return "No project loaded";
- const parts = path.split("/");
- return parts[parts.length - 1] || "Robot Framework Project";
- };
-
- return (
-
-
{getProjectName(projectPath)}
-
- {projectPath || "No project path available"}
-
-
= ({
- issues,
-}) => {
- // Map category codes to readable names
- const getCategoryName = (category: string): string => {
- const categoryMap: Record = {
- ARG: "Arguments",
- COM: "Comments",
- DOC: "Documentation",
- DUP: "Duplication",
- ERR: "Errors",
- IMP: "Imports",
- KW: "Keywords",
- LEN: "Lengths",
- MISC: "Miscellaneous",
- NAME: "Naming",
- ORD: "Order",
- SPC: "Spacing",
- TAG: "Tags",
- VAR: "Variables",
- ANN: "Annotations",
- };
- return categoryMap[category] || category;
- };
-
- // Determine severity based on category
- const getSeverityClass = (category: string): string => {
- const errorCategories = ["ERR", "DUP"];
- const warningCategories = ["DOC", "LEN", "ARG", "NAME"];
-
- if (errorCategories.includes(category)) {
- return "severity-error";
- } else if (warningCategories.includes(category)) {
- return "severity-warning";
- }
- return "severity-info";
- };
-
- // Sort issues by count (descending)
- const sortedIssues = [...issues].sort((a, b) => b.count - a.count);
-
- return (
-
- {sortedIssues.length === 0 ? (
-
-
✓
-
No Robocop issues found!
-
- ) : (
- sortedIssues.map((issue, index) => (
-
-
-
- {getCategoryName(issue.category)} issues
-
-
{issue.count} issues
-
- ))
- )}
-
-
{title}
- {subtitle &&
{subtitle}
}
-
;
-}
-
-interface DetailsPanelProps {
- selectedKeyword: Keyword | null;
- testFiles: FileUsage[];
- resourceFiles: FileUsage[];
- keywordSimilarity: KeywordSimilarity | null;
-}
-
-export default function DetailsPanel({
- selectedKeyword,
- testFiles,
- resourceFiles,
- keywordSimilarity,
-}: DetailsPanelProps) {
- return (
-
-
-
- {selectedKeyword?.keyword_name_without_prefix || "Select a Keyword"}
-
-
-
-
-
-
Documentation
-
- {selectedKeyword?.documentation || "No [Documentation] defined"}
-
-
-
-
-
Usage in Robot Files
-
-
-
-
-
-
Usage in Resource Files
-
-
-
-
-
-
Similar Keywords
-
-
-
-
-
-
{title}
-
{displayContent}
-
+ {title}
+
+ );
+}
diff --git a/vscode-integration/webview-ui/src/components/keyword-usage/details-panel-kw.tsx b/vscode-integration/webview-ui/src/components/keyword-usage/details-panel-kw.tsx
deleted file mode 100644
index 7d87835..0000000
--- a/vscode-integration/webview-ui/src/components/keyword-usage/details-panel-kw.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import React from "react";
-import FileUsageTable from "./file-usage-table";
-import KeywordSimilarityTable from "./keyword-similarity-table";
-import DetailsHeader from "../details-panel/details-header";
-import DetailsSectionText from "../details-panel/details-section-text";
-import DetailsSectionTable from "../details-panel/details-section-table";
-import { Keyword } from "../../types/keywords";
-
-interface FileUsage {
- file_name: string;
- path: string;
- usages: number;
-}
-
-interface KeywordSimilarity {
- similar_keywords: Record;
-}
-
-interface DetailsPanelProps {
- selectedKeyword: Keyword | null;
- testFiles: FileUsage[];
- resourceFiles: FileUsage[];
- keywordSimilarity: KeywordSimilarity | null;
- keywordSimilaritySources?: Record;
-}
-
-export default function DetailsPanelKeywordUsage({
- selectedKeyword,
- testFiles,
- resourceFiles,
- keywordSimilarity,
- keywordSimilaritySources,
-}: DetailsPanelProps) {
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- File
- Count
-
-
-
-
-
- No usage found
-
-
-
-
- );
- }
-
- return (
-
-
-
- File
- Count
-
-
-
- {files.map(({ file_name, path, usages }) => (
-
- handleFileClick(e, path)}
- title={path}
- >
- {file_name}
-
-
- {usages}
-
-
- ))}
-
-
- );
-}
diff --git a/vscode-integration/webview-ui/src/components/keyword-usage/keyword-similarity-table.tsx b/vscode-integration/webview-ui/src/components/keyword-usage/keyword-similarity-table.tsx
deleted file mode 100644
index 7b7ef2e..0000000
--- a/vscode-integration/webview-ui/src/components/keyword-usage/keyword-similarity-table.tsx
+++ /dev/null
@@ -1,136 +0,0 @@
-import React from "react";
-import { vscode } from "../../utilities/vscode";
-
-interface KeywordSimilarity {
- similar_keywords: Record;
-}
-
-interface KeywordSimilarityTableProps {
- keywordSimilarity: KeywordSimilarity | null;
- keywordSources?: Record;
-}
-
-export default function KeywordSimilarityTable({
- keywordSimilarity,
- keywordSources,
-}: KeywordSimilarityTableProps) {
- const handleKeywordClick = (e: React.MouseEvent, keywordName: string) => {
- if (e.ctrlKey || e.metaKey) {
- e.stopPropagation();
- const filePath = keywordSources?.[keywordName];
- if (filePath) {
- vscode.postMessage({
- command: "openFile",
- filePath: filePath,
- });
- }
- }
- };
-
- const getSimilarityClass = (score: number): string => {
- const percent = score * 100;
- return percent > 80 ? "high-similarity" : "blue";
- };
-
- const getTooltip = (keywordName: string): string => {
- const filePath = keywordSources?.[keywordName];
- if (filePath) {
- return filePath;
- }
- return "";
- };
-
- const similarityTooltip =
- "The similarity score compares the source code of each keyword using text analysis.\n" +
- "First, each keyword's code is tokenized and converted into a vector using word counts.\n" +
- "Then, the similarity between keywords is measured using cosine similarity, which reflects how similar their code structures and content are.\n" +
- "The score is shown as a percentage: 100% means the keywords are identical, lower values mean less similarity.";
-
- if (
- !keywordSimilarity ||
- Object.keys(keywordSimilarity.similar_keywords).length === 0
- ) {
- return (
-
-
-
-
- Keyword
-
- Similarity
-
- ❓
-
-
-
-
-
-
-
- No similar keywords found
-
-
-
-
-
-
-
-
- Keyword
-
- Similarity
-
- ❓
-
-
-
-
-
- {Object.entries(keywordSimilarity.similar_keywords).map(
- ([similarKeyword, score]) => {
- const similarityPercent = (score * 100).toFixed(0);
- const hasSource =
- keywordSources && keywordSources[similarKeyword];
- const similarityClass = getSimilarityClass(score);
-
- return (
-
- handleKeywordClick(e, similarKeyword)}
- title={getTooltip(similarKeyword)}
- >
- {similarKeyword}
-
-
-
- {similarityPercent}%
-
-
-
- );
- },
- )}
-
-
-
-
-
- Keyword
- Initialized In
- Usages In File
- Total Usages
-
-
-
- {keywords.map((keywordData: Keyword) => {
- const {
- keyword_name_without_prefix,
- keyword_name_with_prefix,
- file_name,
- source,
- file_usages,
- total_usages,
- } = keywordData;
- const usageClass = getUsageClass(total_usages);
- const isUserDefined =
- source &&
- (source.includes(".resource") || source.includes(".robot"));
- const iconClass = isUserDefined ? "user-defined" : "external";
- const iconLetter = isUserDefined ? "U" : "E";
- const isSelected =
- selectedKeyword?.keyword_name_without_prefix ===
- keyword_name_without_prefix;
-
- return (
- onKeywordClick(keywordData)}
- >
-
-
-
- {iconLetter}
-
- {keyword_name_without_prefix}
-
-
-
- handleFileClick(e, source)}
- style={{ cursor: "pointer" }}
- title={source}
- >
- {file_name}
-
-
- {file_usages}
-
-
- {total_usages}
-
-
-
- );
- })}
-
-
- );
-}
diff --git a/vscode-integration/webview-ui/src/components/keyword-usage/main-content-kw.tsx b/vscode-integration/webview-ui/src/components/keyword-usage/main-content-kw.tsx
deleted file mode 100644
index 4aa6233..0000000
--- a/vscode-integration/webview-ui/src/components/keyword-usage/main-content-kw.tsx
+++ /dev/null
@@ -1,129 +0,0 @@
-import React from "react";
-import KeywordTable from "./main-content-keyword-table";
-import SearchBar from "../main-content/main-content-searchbar";
-import Toolbar from "../main-content/main-content-toolbar";
-import { Keyword } from "../../types/keywords";
-import { SortOption } from "../../types/toolbar";
-import {
- filterKeywordsByType,
- filterKeywordsBySearch,
- sortKeywords,
-} from "../../utilities/keyword_utils";
-
-const keywordUsageSortOptions: SortOption[] = [
- { value: "sort", label: "Sort: Default" },
- { value: "name_asc", label: "Sort: Name (A-Z)" },
- { value: "name_desc", label: "Sort: Name (Z-A)" },
- { value: "usages_desc", label: "Sort: Usage (High-Low)" },
- { value: "usages_asc", label: "Sort: Usage (Low-High)" },
-];
-
-interface MainContentProps {
- initKeywords: Keyword[];
- calledKeywords: Keyword[];
- keywordsWithoutDoc: Keyword[];
- keywordsWithoutUsages: Keyword[];
- keywordDuplicates: Keyword[];
- currentFilter: string;
- searchTerm: string;
- sortBy: string;
- onSortChange: (sort: string) => void;
- onSearchChange: (value: string) => void;
- onClear: () => void;
- selectedKeyword: Keyword | null;
- onKeywordClick: (keyword: Keyword) => void;
- fileSelected?: boolean;
-}
-
-export default function MainContentKeywordUsage({
- initKeywords,
- calledKeywords,
- keywordsWithoutDoc,
- keywordsWithoutUsages,
- keywordDuplicates,
- currentFilter,
- searchTerm,
- sortBy,
- onSortChange,
- onSearchChange,
- onClear,
- selectedKeyword,
- onKeywordClick,
- fileSelected = false,
-}: MainContentProps) {
- let keywordsToShow: Keyword[] = [];
-
- keywordsToShow = filterKeywordsByType(
- initKeywords,
- calledKeywords,
- keywordsWithoutDoc,
- keywordsWithoutUsages,
- keywordDuplicates,
- currentFilter,
- );
-
- keywordsToShow = filterKeywordsBySearch(keywordsToShow, searchTerm);
- keywordsToShow = sortKeywords(keywordsToShow, sortBy);
-
- const hasKeywords =
- keywordsToShow.length > 0 ||
- (currentFilter !== "kw_wo_doc" &&
- currentFilter !== "kw_wo_usages" &&
- currentFilter !== "kw_with_cycles" &&
- (initKeywords.length > 0 || calledKeywords.length > 0));
-
- if (!hasKeywords) {
- return (
-
-
-
📊
-
{fileSelected ? "No Keyword Calls or Initialized Keywords" : "No File Selected"}
- {!fileSelected && (
- <>
-
Please follow these steps to open the Keyword Overview:
-
-
- Select a Robot Framework File from the file
- selection
-
-
- Use the Type Filters or{" "}
- Global Filter to group Keywords global or locally
-
-
- Click on a Keyword to view its details
-
-
-
- )}
-
-
-
- );
-}
diff --git a/vscode-integration/webview-ui/src/components/layout/footer.tsx b/vscode-integration/webview-ui/src/components/layout/footer.tsx
index 1d57600..b9e427d 100644
--- a/vscode-integration/webview-ui/src/components/layout/footer.tsx
+++ b/vscode-integration/webview-ui/src/components/layout/footer.tsx
@@ -1,12 +1,8 @@
-import React from "react";
-
-function Footer() {
+export default function Footer() {
return (
-
+
Made with ❤️ for the Robot Framework community. | viadee
Unternehmensberatung AG
-
+
);
}
-
-export default Footer;
diff --git a/vscode-integration/webview-ui/src/components/layout/header.tsx b/vscode-integration/webview-ui/src/components/layout/header.tsx
index 149bc53..27ed5fd 100644
--- a/vscode-integration/webview-ui/src/components/layout/header.tsx
+++ b/vscode-integration/webview-ui/src/components/layout/header.tsx
@@ -1,39 +1,73 @@
-import React from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+import { LayoutDashboard, KeyRound, ShieldAlert, Bot } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
-interface HeaderProps {
- currentView: "dashboard" | "keyword-usage" | "robocop";
- onViewChange: (view: "dashboard" | "keyword-usage" | "robocop") => void;
-}
+const navItems = [
+ {
+ path: "/dashboard",
+ label: "Dashboard",
+ icon: LayoutDashboard,
+ color: "text-blue-400",
+ },
+ {
+ path: "/keyword-usage",
+ label: "Keyword Usage",
+ icon: KeyRound,
+ color: "text-amber-400",
+ },
+ {
+ path: "/robocop",
+ label: "Robocop",
+ icon: ShieldAlert,
+ color: "text-red-400",
+ },
+];
+
+export function Header() {
+ const { pathname } = useLocation();
+ const navigate = useNavigate();
-function Header({ currentView, onViewChange }: HeaderProps) {
return (
-
-
-
🤖
-
RoboView - Keyword Management in Robot Framework
-
-
-
onViewChange("dashboard")}
- >
- 📊 Dashboard
-
-
onViewChange("keyword-usage")}
- >
- 🔤 Keyword Usage
-
-
onViewChange("robocop")}
- >
- 🔍 Robocop
-
+
+
+
+
+
RoboView
+
|
+
+ Keyword Management in Robot Framework
+
+
+
+ {navItems.map(({ path, label, icon: Icon, color }) => {
+ const isActive = pathname === path;
+ return (
+ navigate(path)}
+ className={cn(
+ "gap-2 text-xs font-medium h-8 px-3",
+ isActive
+ ? "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground"
+ : "text-foreground hover:text-foreground hover:bg-accent",
+ )}
+ >
+
+ );
+ })}
+
+
);
}
-
-export default Header;
diff --git a/vscode-integration/webview-ui/src/components/layout/layout.tsx b/vscode-integration/webview-ui/src/components/layout/layout.tsx
index 5cb5df2..77ecd04 100644
--- a/vscode-integration/webview-ui/src/components/layout/layout.tsx
+++ b/vscode-integration/webview-ui/src/components/layout/layout.tsx
@@ -1,167 +1,100 @@
-import { ReactNode, useState, useRef, useCallback, useEffect } from "react";
-
-interface LayoutProps {
- sidebar: ReactNode;
- mainContent: ReactNode;
- detailsPanel: ReactNode;
+import {
+ ReactNode,
+ createContext,
+ useContext,
+ useMemo,
+ useRef,
+ useState,
+} from "react";
+import type { PanelImperativeHandle } from "react-resizable-panels";
+import {
+ ResizablePanelGroup,
+ ResizablePanel,
+ ResizableHandle,
+} from "../ui/resizable";
+
+interface UsageLayoutContextValue {
+ isDetailsCollapsed: boolean;
+ toggleDetails: () => void;
}
-export default function Layout({
- sidebar,
- mainContent,
- detailsPanel,
-}: LayoutProps) {
- const [isDetailsPanelOpen, setIsDetailsPanelOpen] = useState(true);
- const [isResizing, setIsResizing] = useState(false);
- const [detailsWidthFr, setDetailsWidthFr] = useState(3);
- const [detailsWidthPx, setDetailsWidthPx] = useState(450);
- const containerRef = useRef
(null);
-
- const gridLayout = {
- sidebar: 2,
- mainContent: 5,
- details: detailsWidthFr,
- };
-
- const startResizing = useCallback(() => {
- setIsResizing(true);
- }, []);
-
- const stopResizing = useCallback(() => {
- setIsResizing(false);
- }, []);
-
- const resize = useCallback(
- (e: MouseEvent) => {
- if (isResizing && containerRef.current) {
- const containerRect = containerRef.current.getBoundingClientRect();
- const containerWidth = containerRect.width;
- const rightEdgeDistance = containerRect.right - e.clientX;
-
- // Update pixel width for button positioning
- setDetailsWidthPx(rightEdgeDistance);
-
- const totalFr =
- gridLayout.sidebar + gridLayout.mainContent + gridLayout.details;
- const pixelPerFr = containerWidth / totalFr;
- const newDetailsFr = rightEdgeDistance / pixelPerFr;
-
- // Min: 2fr (~20%), Max: 6fr (~60%)
- if (newDetailsFr >= 2 && newDetailsFr <= 6) {
- setDetailsWidthFr(newDetailsFr);
- }
- }
- },
- [
- isResizing,
- gridLayout.sidebar,
- gridLayout.mainContent,
- gridLayout.details,
- ],
- );
-
- // Calculate details width on mount and window resize
- useEffect(() => {
- const updateDetailsWidth = () => {
- if (containerRef.current && isDetailsPanelOpen) {
- const containerRect = containerRef.current.getBoundingClientRect();
- const containerWidth = containerRect.width;
- const totalFr =
- gridLayout.sidebar + gridLayout.mainContent + detailsWidthFr;
- const pixelPerFr = containerWidth / totalFr;
- const calculatedWidth = detailsWidthFr * pixelPerFr;
- setDetailsWidthPx(calculatedWidth);
- }
- };
+const UsageLayoutContext = createContext(null);
- updateDetailsWidth();
- window.addEventListener("resize", updateDetailsWidth);
+export function useUsageLayoutControls() {
+ return useContext(UsageLayoutContext);
+}
- return () => {
- window.removeEventListener("resize", updateDetailsWidth);
- };
- }, [
- isDetailsPanelOpen,
- detailsWidthFr,
- gridLayout.sidebar,
- gridLayout.mainContent,
- ]);
+interface AppLayoutProps {
+ sidebar: ReactNode;
+ content: ReactNode;
+ details: ReactNode;
+ sidebarSize?: number;
+ contentSize?: number;
+ detailsSize?: number;
+}
- useEffect(() => {
- if (isResizing) {
- window.addEventListener("mousemove", resize as any);
- window.addEventListener("mouseup", stopResizing);
- document.body.style.cursor = "col-resize";
- document.body.style.userSelect = "none";
- } else {
- window.removeEventListener("mousemove", resize as any);
- window.removeEventListener("mouseup", stopResizing);
- document.body.style.cursor = "";
- document.body.style.userSelect = "";
+export function AppLayout({
+ sidebar,
+ content,
+ details,
+ sidebarSize = 20,
+ contentSize = 55,
+ detailsSize = 25,
+}: AppLayoutProps) {
+ const detailsPanelRef = useRef(null);
+ const [isDetailsCollapsed, setIsDetailsCollapsed] = useState(false);
+
+ const handleToggleDetails = () => {
+ if (!detailsPanelRef.current) {
+ return;
}
- return () => {
- window.removeEventListener("mousemove", resize as any);
- window.removeEventListener("mouseup", stopResizing);
- document.body.style.cursor = "";
- document.body.style.userSelect = "";
- };
- }, [isResizing, resize, stopResizing]);
+ if (isDetailsCollapsed) {
+ detailsPanelRef.current.expand();
+ setIsDetailsCollapsed(false);
+ return;
+ }
- const toggleDetailsPanel = () => {
- setIsDetailsPanelOpen(!isDetailsPanelOpen);
+ detailsPanelRef.current.collapse();
+ setIsDetailsCollapsed(true);
};
- // Grid-Spalten mit fr-Einheiten und smooth transition
- const gridTemplateColumns = isDetailsPanelOpen
- ? `${gridLayout.sidebar}fr ${gridLayout.mainContent}fr ${detailsWidthFr}fr`
- : `${gridLayout.sidebar}fr ${gridLayout.mainContent + detailsWidthFr}fr 0fr`;
+ const contextValue = useMemo(
+ () => ({
+ isDetailsCollapsed,
+ toggleDetails: handleToggleDetails,
+ }),
+ [isDetailsCollapsed],
+ );
return (
-
-
{sidebar}
-
-
{mainContent}
-
- {/* Details Panel wird immer gerendert */}
-
- {isDetailsPanelOpen && (
- <>
- {/* Resize handle nur wenn offen */}
-
- {detailsPanel}
-
- )}
-
-
- {/* Toggle button - IMMER SICHTBAR mit fixed positioning */}
-
- {isDetailsPanelOpen ? "›" : "‹"}
-
-
+
+
+ {sidebar}
+
+
+
+ {content}
+
+
+ {
+ setIsDetailsCollapsed(panelSize.asPercentage <= 0);
+ }}
+ >
+ {details}
+
+
+
);
}
diff --git a/vscode-integration/webview-ui/src/components/main-content/main-content-searchbar.tsx b/vscode-integration/webview-ui/src/components/main-content/main-content-searchbar.tsx
deleted file mode 100644
index bacf169..0000000
--- a/vscode-integration/webview-ui/src/components/main-content/main-content-searchbar.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import React, { ChangeEvent } from "react";
-
-interface SearchBarProps {
- searchTerm: string;
- onSearchChange: (value: string) => void;
- onClear: () => void;
- message: string;
-}
-
-export default function SearchBar({
- searchTerm,
- onSearchChange,
- onClear,
- message,
-}: SearchBarProps) {
- return (
-
-
-
-
Clear
-
- ) =>
- onSortChange(e.target.value)
- }
- >
- {options.map((option) => (
-
- {option.label}
-
- ))}
-
-
- );
-}
diff --git a/vscode-integration/webview-ui/src/components/main-content/table-pagination.tsx b/vscode-integration/webview-ui/src/components/main-content/table-pagination.tsx
new file mode 100644
index 0000000..31a3560
--- /dev/null
+++ b/vscode-integration/webview-ui/src/components/main-content/table-pagination.tsx
@@ -0,0 +1,115 @@
+import { useMemo } from "react";
+import {
+ Pagination,
+ PaginationContent,
+ PaginationEllipsis,
+ PaginationItem,
+ PaginationLink,
+ PaginationNext,
+ PaginationPrevious,
+} from "@/components/ui/pagination";
+
+interface TablePaginationProps {
+ currentPage: number;
+ totalPages: number;
+ onPageChange: (page: number) => void;
+}
+
+export function TablePagination({
+ currentPage,
+ totalPages,
+ onPageChange,
+}: TablePaginationProps) {
+ const visiblePages = useMemo(() => {
+ const pages: (number | "ellipsis-left" | "ellipsis-right")[] = [];
+
+ if (totalPages <= 7) {
+ for (let page = 1; page <= totalPages; page += 1) {
+ pages.push(page);
+ }
+ return pages;
+ }
+
+ pages.push(1);
+
+ const start = Math.max(2, currentPage - 1);
+ const end = Math.min(totalPages - 1, currentPage + 1);
+
+ if (start > 2) {
+ pages.push("ellipsis-left");
+ }
+
+ for (let page = start; page <= end; page += 1) {
+ pages.push(page);
+ }
+
+ if (end < totalPages - 1) {
+ pages.push("ellipsis-right");
+ }
+
+ pages.push(totalPages);
+
+ return pages;
+ }, [currentPage, totalPages]);
+
+ if (totalPages <= 1) {
+ return null;
+ }
+
+ return (
+
+
+
+ {
+ event.preventDefault();
+ onPageChange(Math.max(1, currentPage - 1));
+ }}
+ className={
+ currentPage === 1 ? "pointer-events-none opacity-50" : ""
+ }
+ />
+
+
+ {visiblePages.map((pageNumber) => {
+ if (typeof pageNumber !== "number") {
+ return (
+
+
+ );
+ }
+
+ return (
+
+ {
+ event.preventDefault();
+ onPageChange(pageNumber);
+ }}
+ >
+ {pageNumber}
+
+
+ );
+ })}
+
+
+ {
+ event.preventDefault();
+ onPageChange(Math.min(totalPages, currentPage + 1));
+ }}
+ className={
+ currentPage === totalPages ? "pointer-events-none opacity-50" : ""
+ }
+ />
+
+
+
+ );
+}
diff --git a/vscode-integration/webview-ui/src/components/panel-section/collapsible-filter-section.tsx b/vscode-integration/webview-ui/src/components/panel-section/collapsible-filter-section.tsx
new file mode 100644
index 0000000..0825124
--- /dev/null
+++ b/vscode-integration/webview-ui/src/components/panel-section/collapsible-filter-section.tsx
@@ -0,0 +1,44 @@
+import { ReactNode, useState } from "react";
+import { ChevronDown } from "lucide-react";
+import {
+ Collapsible,
+ CollapsibleContent,
+ CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { cn } from "@/lib/utils";
+
+interface CollapsibleFilterSectionProps {
+ title: string;
+ icon?: ReactNode;
+ children: ReactNode;
+ defaultOpen?: boolean;
+}
+
+export function CollapsibleFilterSection({
+ title,
+ icon,
+ children,
+ defaultOpen = true,
+}: CollapsibleFilterSectionProps) {
+ const [open, setOpen] = useState(defaultOpen);
+
+ return (
+
+
+
+ {icon}
+ {title}
+
+
+
+ {children}
+
+
+ );
+}
diff --git a/vscode-integration/webview-ui/src/components/placeholder-messages/empty-state-message.tsx b/vscode-integration/webview-ui/src/components/placeholder-messages/empty-state-message.tsx
new file mode 100644
index 0000000..bff6ced
--- /dev/null
+++ b/vscode-integration/webview-ui/src/components/placeholder-messages/empty-state-message.tsx
@@ -0,0 +1,30 @@
+import { ReactNode } from "react";
+import {
+ Empty,
+ EmptyDescription,
+ EmptyHeader,
+ EmptyMedia,
+ EmptyTitle,
+} from "@/components/ui/empty";
+
+interface EmptyStateMessageProps {
+ title: string;
+ icon: ReactNode;
+ description: ReactNode;
+}
+
+export function EmptyStateMessage({
+ title,
+ icon,
+ description,
+}: EmptyStateMessageProps) {
+ return (
+
+
+ {icon}
+ {title}
+ {description}
+
+
+ );
+}
diff --git a/vscode-integration/webview-ui/src/components/robocop/details-panel-robocop.tsx b/vscode-integration/webview-ui/src/components/robocop/details-panel-robocop.tsx
deleted file mode 100644
index 3027fc3..0000000
--- a/vscode-integration/webview-ui/src/components/robocop/details-panel-robocop.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import React from "react";
-import DetailsHeader from "../details-panel/details-header";
-import DetailsSectionText from "../details-panel/details-section-text";
-import { RobocopMessage } from "../../types/robocop";
-
-interface DetailsPanelProps {
- selectedMessage: RobocopMessage | null;
-}
-
-export default function DetailsPanelRobocopMessage({
- selectedMessage,
-}: DetailsPanelProps) {
- return (
-
- );
-}
diff --git a/vscode-integration/webview-ui/src/components/robocop/main-content-robocop.tsx b/vscode-integration/webview-ui/src/components/robocop/main-content-robocop.tsx
deleted file mode 100644
index 69b9771..0000000
--- a/vscode-integration/webview-ui/src/components/robocop/main-content-robocop.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-import React from "react";
-import SearchBar from "../main-content/main-content-searchbar";
-import Toolbar from "../main-content/main-content-toolbar";
-import RobocopMessageTable from "../robocop/robocop-message-table";
-import { SortOption } from "../../types/toolbar";
-import { RobocopMessage } from "../../types/robocop";
-import {
- filterMessagesBySearch,
- filterMessagesByType,
- sortRobocopMessages,
-} from "../../utilities/robocop_utils";
-
-const robocopMessageSortOptions: SortOption[] = [
- { value: "sort", label: "Sort: Default" },
- { value: "name_asc", label: "Sort: Name (A-Z)" },
- { value: "name_desc", label: "Sort: Name (Z-A)" },
- { value: "severity_high", label: "Sort: Severity (High-Low)" },
- { value: "severity_low", label: "Sort: Severity (Low-High)" },
-];
-
-interface MainContentProps {
- robocopMessages: RobocopMessage[];
- currentFilter: string;
- searchTerm: string;
- sortBy: string;
- onSortChange: (sort: string) => void;
- onSearchChange: (value: string) => void;
- onClear: () => void;
- selectedMessage: RobocopMessage | null;
- onMessageClick: (message: RobocopMessage) => void;
-}
-
-export default function MainContentRobocopMessages({
- robocopMessages,
- currentFilter,
- searchTerm,
- sortBy,
- onSortChange,
- onSearchChange,
- onClear,
- selectedMessage,
- onMessageClick,
-}: MainContentProps) {
- let messagesToShow: RobocopMessage[] = [];
-
- messagesToShow = filterMessagesByType(robocopMessages, currentFilter);
- messagesToShow = filterMessagesBySearch(messagesToShow, searchTerm);
- messagesToShow = sortRobocopMessages(messagesToShow, sortBy);
-
- if (!messagesToShow) {
- return (
-
-
-
📝
-
No Robocop Message Selected
-
Please follow these steps to open the Robocop Message Overview:
-
-
- Select a Filter Sidebar to group your Messages
- according to category or severity
-
-
- Click on a Message to view its details
-
-
-
-
-
-
- Rule ID
- Message
- Source
- Severity
-
-
-
- {messages.map((messageData: RobocopMessage) => {
- const { message_id, rule_id, message, severity, file_name, source } =
- messageData;
- const iconClass =
- severity === "E" ? "E" : severity === "W" ? "W" : "info";
- const iconLetter = severity;
- const isSelected = selectedMessage?.message_id === message_id;
-
- return (
- onMessageClick(messageData)}
- >
-
-
-
- {iconLetter}
-
- {rule_id}
-
-
- {message}
-
- handleFileClick(e, source)}
- style={{ cursor: "pointer" }}
- title={source}
- >
- {file_name}
-
-
- {severity}
-
- );
- })}
-
-
- );
-}
diff --git a/vscode-integration/webview-ui/src/components/robocop/sidebar-robocop.tsx b/vscode-integration/webview-ui/src/components/robocop/sidebar-robocop.tsx
deleted file mode 100644
index ef67b1a..0000000
--- a/vscode-integration/webview-ui/src/components/robocop/sidebar-robocop.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from "react";
-import FilterGroup from "../sidebar/filter-group";
-
-interface RobocopSidebarProps {
- calculateCountsForCategoryFilter: () => any[];
- calculateCountsForSeverityFilter: () => any[];
- currentFilter: string;
- setCurrentFilter: (filter: string) => void;
-}
-
-export default function RobocopSidebar({
- calculateCountsForCategoryFilter,
- calculateCountsForSeverityFilter,
- currentFilter,
- setCurrentFilter,
-}: RobocopSidebarProps) {
- return (
-
-
- );
-}
diff --git a/vscode-integration/webview-ui/src/components/sidebar/file-selection.tsx b/vscode-integration/webview-ui/src/components/sidebar/file-selection.tsx
deleted file mode 100644
index 77fa65c..0000000
--- a/vscode-integration/webview-ui/src/components/sidebar/file-selection.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import React from "react";
-import { FileSelect } from "../../types/files";
-
-interface FileSelectorProps {
- title: string;
- selectedResource: FileSelect | null;
- file_list: FileSelect[];
- onResourceChange: (value: FileSelect | null) => void;
- placeholder?: string;
-}
-
-export default function FileSelector({
- title,
- selectedResource,
- file_list,
- onResourceChange,
- placeholder = "--- SELECT FILE ---",
-}: FileSelectorProps) {
- const robotFiles = file_list
- .filter((name) => name.file_name.endsWith(".robot"))
- .sort((a, b) => a.file_name.localeCompare(b.file_name));
-
- const resourceFiles = file_list
- .filter((name) => name.file_name.endsWith(".resource"))
- .sort((a, b) => a.file_name.localeCompare(b.file_name));
-
- return (
-
-
{title}
- {
- const fileName = e.target.value;
- if (fileName === "") {
- onResourceChange(null);
- } else {
- const selected = file_list.find((f) => f.file_name === fileName);
- onResourceChange(selected || null);
- }
- }}
- >
- {placeholder}
- {resourceFiles.length > 0 && (
-
- {resourceFiles.map((resource) => (
-
- {resource.file_name}
-
- ))}
-
- )}
- {robotFiles.length > 0 && (
-
- {robotFiles.map((resource) => (
-
- {resource.file_name}
-
- ))}
-
- )}
-
-
- );
-}
diff --git a/vscode-integration/webview-ui/src/components/sidebar/filter-button.tsx b/vscode-integration/webview-ui/src/components/sidebar/filter-button.tsx
new file mode 100644
index 0000000..f2b56f3
--- /dev/null
+++ b/vscode-integration/webview-ui/src/components/sidebar/filter-button.tsx
@@ -0,0 +1,35 @@
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+
+interface FilterButtonProps {
+ id: string;
+ label: string;
+ count: number;
+ isActive: boolean;
+ onClick: (id: string) => void;
+}
+
+export function FilterButton({
+ id,
+ label,
+ count,
+ isActive,
+ onClick,
+}: FilterButtonProps) {
+ return (
+ onClick(id)}
+ className={cn(
+ "flex w-full items-center justify-between rounded-md px-3 py-1.5 text-left text-sm transition-all duration-150",
+ isActive
+ ? "bg-primary/30 text-primary-foreground shadow-sm"
+ : "text-foreground hover:bg-accent hover:text-accent-foreground",
+ )}
+ >
+ {label}
+
+ {count}
+
+
+ );
+}
diff --git a/vscode-integration/webview-ui/src/components/sidebar/filter-group.tsx b/vscode-integration/webview-ui/src/components/sidebar/filter-group.tsx
deleted file mode 100644
index 68120ee..0000000
--- a/vscode-integration/webview-ui/src/components/sidebar/filter-group.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import React from "react";
-
-interface FilterItem {
- id: string;
- label: string;
- count: number;
-}
-
-interface FilterGroupProps {
- title: string;
- items: FilterItem[];
- currentFilter: string;
- onFilterChange: (filter: string) => void;
-}
-
-export default function FilterGroup({
- title,
- items,
- currentFilter,
- onFilterChange,
-}: FilterGroupProps) {
- return (
-
-
{title}
- {items.map((item) => (
-
onFilterChange(item.id)}
- >
- {item.label}
- {item.count}
-
- ))}
-
& { asChild?: boolean }) {
+ const Comp = asChild ? Slot.Root : "span"
+
+ return (
+ & {
+ asChild?: boolean
+ }) {
+ const Comp = asChild ? Slot.Root : "button"
+
+ return (
+
+ )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+export {
+ Card,
+ CardHeader,
+ CardFooter,
+ CardTitle,
+ CardAction,
+ CardDescription,
+ CardContent,
+}
diff --git a/vscode-integration/webview-ui/src/components/ui/chart.tsx b/vscode-integration/webview-ui/src/components/ui/chart.tsx
new file mode 100644
index 0000000..48d2724
--- /dev/null
+++ b/vscode-integration/webview-ui/src/components/ui/chart.tsx
@@ -0,0 +1,355 @@
+import * as React from "react"
+import * as RechartsPrimitive from "recharts"
+
+import { cn } from "@/lib/utils"
+
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = { light: "", dark: ".dark" } as const
+
+export type ChartConfig = {
+ [k in string]: {
+ label?: React.ReactNode
+ icon?: React.ComponentType
+ } & (
+ | { color?: string; theme?: never }
+ | { color?: never; theme: Record }
+ )
+}
+
+type ChartContextProps = {
+ config: ChartConfig
+}
+
+const ChartContext = React.createContext(null)
+
+function useChart() {
+ const context = React.useContext(ChartContext)
+
+ if (!context) {
+ throw new Error("useChart must be used within a
+
+
+ {children}
+
+
+
+ )
+}
+
+const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
+ const colorConfig = Object.entries(config).filter(
+ ([, config]) => config.theme || config.color
+ )
+
+ if (!colorConfig.length) {
+ return null
+ }
+
+ return (
+ 
+ 
+ 
+ 
+ 