apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-07-22 23:31:12 +02:00
Code Issues Projects Releases Packages Wiki Activity

feat: enhance DocumentsTableShell layout and improve document type labeling in DocumentTypeIcon

Browse source
This commit is contained in:
Anish Sarkar 2026-02-08 03:33:15 +05:30
parent 7cede99d29
commit ac394e78cc
4 changed files with 56 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

40
surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentTypeIcon.tsx
View file

@ -10,10 +10,42 @@ export function getDocumentTypeIcon(type: string, className?: string): React.Rea
} }
export function getDocumentTypeLabel(type: string): string { export function getDocumentTypeLabel(type: string): string {
return type const labelMap: Record<string, string> = {
.split("_") EXTENSION: "Extension",
.map((word) => word.charAt(0) + word.slice(1).toLowerCase()) CRAWLED_URL: "Web Page",
.join(" "); FILE: "File",
SLACK_CONNECTOR: "Slack",
TEAMS_CONNECTOR: "Microsoft Teams",
NOTION_CONNECTOR: "Notion",
YOUTUBE_VIDEO: "YouTube Video",
GITHUB_CONNECTOR: "GitHub",
LINEAR_CONNECTOR: "Linear",
DISCORD_CONNECTOR: "Discord",
JIRA_CONNECTOR: "Jira",
CONFLUENCE_CONNECTOR: "Confluence",
CLICKUP_CONNECTOR: "ClickUp",
GOOGLE_CALENDAR_CONNECTOR: "Google Calendar",
GOOGLE_GMAIL_CONNECTOR: "Gmail",
GOOGLE_DRIVE_FILE: "Google Drive",
AIRTABLE_CONNECTOR: "Airtable",
LUMA_CONNECTOR: "Luma",
ELASTICSEARCH_CONNECTOR: "Elasticsearch",
BOOKSTACK_CONNECTOR: "BookStack",
CIRCLEBACK: "Circleback",
OBSIDIAN_CONNECTOR: "Obsidian",
SURFSENSE_DOCS: "SurfSense Docs",
NOTE: "Note",
COMPOSIO_GOOGLE_DRIVE_CONNECTOR: "Composio Google Drive",
COMPOSIO_GMAIL_CONNECTOR: "Composio Gmail",
COMPOSIO_GOOGLE_CALENDAR_CONNECTOR: "Composio Google Calendar",
};
return (
labelMap[type] ||
type
.split("_")
.map((word) => word.charAt(0) + word.slice(1).toLowerCase())
.join(" ")
);
} }
export function DocumentTypeChip({ type, className }: { type: string; className?: string }) { export function DocumentTypeChip({ type, className }: { type: string; className?: string }) {

18
surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentsTableShell.tsx
View file

@ -354,14 +354,14 @@ export function DocumentsTableShell({
<Skeleton className="h-4 w-4 rounded" /> <Skeleton className="h-4 w-4 rounded" />
</div> </div>
</TableHead> </TableHead>
<TableHead className="w-[35%] max-w-0 border-r border-border/40"> <TableHead className="w-[40%] max-w-0 border-r border-border/40">
<Skeleton className="h-3 w-20" /> <Skeleton className="h-3 w-20" />
</TableHead> </TableHead>
{columnVisibility.document_type && ( {columnVisibility.document_type && (
<TableHead className="w-[20%] min-w-[120px] max-w-[200px] border-r border-border/40"> <TableHead className="w-[15%] min-w-[100px] max-w-[170px] border-r border-border/40">
<Skeleton className="h-3 w-14" /> <Skeleton className="h-3 w-14" />
</TableHead> </TableHead>
)} )}
{columnVisibility.created_by && ( {columnVisibility.created_by && (
<TableHead className="w-36 border-r border-border/40"> <TableHead className="w-36 border-r border-border/40">
<Skeleton className="h-3 w-10" /> <Skeleton className="h-3 w-10" />
@ -396,11 +396,11 @@ export function DocumentsTableShell({
<Skeleton className="h-4 w-4 rounded" /> <Skeleton className="h-4 w-4 rounded" />
</div> </div>
</TableCell> </TableCell>
<TableCell className="w-[35%] py-2.5 max-w-0 border-r border-border/40"> <TableCell className="w-[40%] py-2.5 max-w-0 border-r border-border/40">
<Skeleton className="h-4" style={{ width: `${widthPercent}%` }} /> <Skeleton className="h-4" style={{ width: `${widthPercent}%` }} />
</TableCell> </TableCell>
{columnVisibility.document_type && ( {columnVisibility.document_type && (
<TableCell className="w-[20%] min-w-[120px] max-w-[200px] py-2.5 border-r border-border/40 overflow-hidden"> <TableCell className="w-[15%] min-w-[100px] max-w-[170px] py-2.5 border-r border-border/40 overflow-hidden">
<Skeleton className="h-5 w-24 rounded" /> <Skeleton className="h-5 w-24 rounded" />
</TableCell> </TableCell>
)} )}
@ -499,7 +499,7 @@ export function DocumentsTableShell({
/> />
</div> </div>
</TableHead> </TableHead>
<TableHead className="w-[35%] border-r border-border/40"> <TableHead className="w-[40%] border-r border-border/40">
<SortableHeader <SortableHeader
sortKey="title" sortKey="title"
currentSortKey={sortKey} currentSortKey={sortKey}
@ -511,7 +511,7 @@ export function DocumentsTableShell({
</SortableHeader> </SortableHeader>
</TableHead> </TableHead>
{columnVisibility.document_type && ( {columnVisibility.document_type && (
<TableHead className="w-[20%] min-w-[120px] max-w-[200px] border-r border-border/40"> <TableHead className="w-[15%] min-w-[100px] max-w-[170px] border-r border-border/40">
<SortableHeader <SortableHeader
sortKey="document_type" sortKey="document_type"
currentSortKey={sortKey} currentSortKey={sortKey}
@ -594,7 +594,7 @@ export function DocumentsTableShell({
/> />
</div> </div>
</TableCell> </TableCell>
<TableCell className="w-[35%] py-2.5 max-w-0 border-r border-border/40"> <TableCell className="w-[40%] py-2.5 max-w-0 border-r border-border/40">
<button <button
type="button" type="button"
className="block w-full text-left text-sm text-foreground hover:text-foreground transition-colors cursor-pointer bg-transparent border-0 p-0 truncate" className="block w-full text-left text-sm text-foreground hover:text-foreground transition-colors cursor-pointer bg-transparent border-0 p-0 truncate"
@ -624,7 +624,7 @@ export function DocumentsTableShell({
</button> </button>
</TableCell> </TableCell>
{columnVisibility.document_type && ( {columnVisibility.document_type && (
<TableCell className="w-[20%] min-w-[120px] max-w-[200px] py-2.5 border-r border-border/40 overflow-hidden"> <TableCell className="w-[15%] min-w-[100px] max-w-[170px] py-2.5 border-r border-border/40 overflow-hidden">
<DocumentTypeChip type={doc.document_type} /> <DocumentTypeChip type={doc.document_type} />
</TableCell> </TableCell>
)} )}

9
surfsense_web/components/ui/checkbox.tsx
View file

@ -1,7 +1,7 @@
"use client"; "use client";
import * as CheckboxPrimitive from "@radix-ui/react-checkbox"; import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
import { CheckIcon } from "lucide-react"; import { CheckIcon, MinusIcon } from "lucide-react";
import type * as React from "react"; import type * as React from "react";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
@ -11,16 +11,17 @@ function Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxP
<CheckboxPrimitive.Root <CheckboxPrimitive.Root
data-slot="checkbox" data-slot="checkbox"
className={cn( className={cn(
"peer border-input data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50", "peer border-input data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary data-[state=indeterminate]:bg-transparent data-[state=indeterminate]:text-foreground data-[state=indeterminate]:border-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
className className
)} )}
{...props} {...props}
> >
<CheckboxPrimitive.Indicator <CheckboxPrimitive.Indicator
data-slot="checkbox-indicator" data-slot="checkbox-indicator"
className="flex items-center justify-center text-current transition-none" className="group flex items-center justify-center text-current transition-none"
> >
<CheckIcon className="size-3.5" /> <CheckIcon className="size-3.5 hidden group-data-[state=checked]:block" />
<MinusIcon className="size-3.5 hidden group-data-[state=indeterminate]:block" />
</CheckboxPrimitive.Indicator> </CheckboxPrimitive.Indicator>
</CheckboxPrimitive.Root> </CheckboxPrimitive.Root>
); );

7
surfsense_web/lib/connectors/utils.ts
View file

@ -1,15 +1,18 @@
// Helper function to get connector type display name // Helper function to get connector type display name
export const getConnectorTypeDisplay = (type: string): string => { export const getConnectorTypeDisplay = (type: string): string => {
const typeMap: Record<string, string> = { const typeMap: Record<string, string> = {
SERPER_API: "Serper API",
TAVILY_API: "Tavily API", TAVILY_API: "Tavily API",
SEARXNG_API: "SearxNG", SEARXNG_API: "SearxNG",
LINKUP_API: "Linkup",
BAIDU_SEARCH_API: "Baidu Search",
SLACK_CONNECTOR: "Slack", SLACK_CONNECTOR: "Slack",
TEAMS_CONNECTOR: "Microsoft Teams",
NOTION_CONNECTOR: "Notion", NOTION_CONNECTOR: "Notion",
GITHUB_CONNECTOR: "GitHub", GITHUB_CONNECTOR: "GitHub",
LINEAR_CONNECTOR: "Linear", LINEAR_CONNECTOR: "Linear",
JIRA_CONNECTOR: "Jira", JIRA_CONNECTOR: "Jira",
DISCORD_CONNECTOR: "Discord", DISCORD_CONNECTOR: "Discord",
LINKUP_API: "Linkup",
CONFLUENCE_CONNECTOR: "Confluence", CONFLUENCE_CONNECTOR: "Confluence",
BOOKSTACK_CONNECTOR: "BookStack", BOOKSTACK_CONNECTOR: "BookStack",
CLICKUP_CONNECTOR: "ClickUp", CLICKUP_CONNECTOR: "ClickUp",
@ -23,8 +26,10 @@ export const getConnectorTypeDisplay = (type: string): string => {
LUMA_CONNECTOR: "Luma", LUMA_CONNECTOR: "Luma",
ELASTICSEARCH_CONNECTOR: "Elasticsearch", ELASTICSEARCH_CONNECTOR: "Elasticsearch",
WEBCRAWLER_CONNECTOR: "Web Pages", WEBCRAWLER_CONNECTOR: "Web Pages",
YOUTUBE_CONNECTOR: "YouTube",
CIRCLEBACK_CONNECTOR: "Circleback", CIRCLEBACK_CONNECTOR: "Circleback",
OBSIDIAN_CONNECTOR: "Obsidian", OBSIDIAN_CONNECTOR: "Obsidian",
MCP_CONNECTOR: "MCP Server",
}; };
return typeMap[type] || type; return typeMap[type] || type;
}; };