apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-04-27 09:46:25 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: show identifier-only display names in connector cards

Browse source
This commit is contained in:
CREDO23 2026-01-07 08:16:27 +02:00
parent 0ba64fe6c4
commit 93c7b83a06
2 changed files with 84 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

3
surfsense_web/components/assistant-ui/connector-popup/tabs/active-connectors-tab.tsx
View file

@ -12,6 +12,7 @@ import type { SearchSourceConnector } from "@/contracts/types/connector.types";
import type { LogActiveTask, LogSummary } from "@/contracts/types/log.types";
import { cn } from "@/lib/utils";
import { getDocumentCountForConnector } from "../utils/connector-document-mapping";
import { getConnectorDisplayName } from "./all-connectors-tab";
interface ActiveConnectorsTabProps {
searchQuery: string;
@ -171,7 +172,7 @@ export const ActiveConnectorsTab: FC<ActiveConnectorsTabProps> = ({
</div>
<div className="flex-1 min-w-0">
<p className="text-[14px] font-semibold leading-tight truncate">
{connector.name}
{getConnectorDisplayName(connector.name)}
</p>
{isIndexing ? (
<p className="text-[11px] text-primary mt-1 flex items-center gap-1.5">

127
surfsense_web/components/assistant-ui/connector-popup/tabs/all-connectors-tab.tsx
View file

@ -1,12 +1,27 @@
"use client";
import { Plus } from "lucide-react";
import type { FC } from "react";
import { Button } from "@/components/ui/button";
import type { SearchSourceConnector } from "@/contracts/types/connector.types";
import type { LogActiveTask, LogSummary } from "@/contracts/types/log.types";
import { ConnectorCard } from "../components/connector-card";
import { CRAWLERS, OAUTH_CONNECTORS, OTHER_CONNECTORS } from "../constants/connector-constants";
import { getDocumentCountForConnector } from "../utils/connector-document-mapping";
/**
* Extract the display name from a full connector name.
* Full names are in format "Base Name - identifier" (e.g., "Gmail - john@example.com").
* Returns just the identifier (e.g : john@example.com).
*/
export function getConnectorDisplayName(fullName: string): string {
const separatorIndex = fullName.indexOf(" - ");
if (separatorIndex !== -1) {
return fullName.substring(separatorIndex + 3);
}
return fullName;
}
interface AllConnectorsTabProps {
searchQuery: string;
searchSpaceId: string;
@ -67,56 +82,78 @@ export const AllConnectorsTab: FC<AllConnectorsTabProps> = ({
return (
<div className="space-y-8">
{/* Quick Connect */}
{filteredOAuth.length > 0 && (
<section>
<div className="flex items-center gap-2 mb-4">
<h3 className="text-sm font-semibold text-muted-foreground">Quick Connect</h3>
</div>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
{filteredOAuth.map((connector) => {
const isConnected = connectedTypes.has(connector.connectorType);
const isConnecting = connectingId === connector.id;
// Find the actual connector object if connected
const actualConnector =
isConnected && allConnectors
? allConnectors.find(
(c: SearchSourceConnector) => c.connector_type === connector.connectorType
)
: undefined;
{/* Per-Type OAuth Connector Groups */}
{filteredOAuth.map((connectorType) => {
const userConnectors =
allConnectors?.filter(
(c: SearchSourceConnector) => c.connector_type === connectorType.connectorType
) || [];
const isConnecting = connectingId === connectorType.id;
const documentCount = getDocumentCountForConnector(
connector.connectorType,
documentTypeCounts
);
const isIndexing = actualConnector && indexingConnectorIds?.has(actualConnector.id);
const activeTask = actualConnector
? getActiveTaskForConnector(actualConnector.id)
: undefined;
return (
<section key={connectorType.id}>
{/* Group Header */}
<div className="flex items-center justify-between mb-4">
<h3 className="text-sm font-semibold text-muted-foreground">
{connectorType.title} Integrations
</h3>
{userConnectors.length > 0 && (
<Button
size="sm"
variant="default"
className="h-8 text-[11px] px-3 rounded-lg shrink-0 font-medium shadow-xs gap-1"
onClick={() => onConnectOAuth(connectorType)}
disabled={isConnecting}
>
<Plus className="size-3" />
Add Account
</Button>
)}
</div>
return (
<div className="grid grid-cols-1 sm:grid-cols-2 gap-1">
{userConnectors.length === 0 ? (
<ConnectorCard
key={connector.id}
id={connector.id}
title={connector.title}
description={connector.description}
connectorType={connector.connectorType}
isConnected={isConnected}
id={connectorType.id}
title={connectorType.title}
description={connectorType.description}
connectorType={connectorType.connectorType}
isConnected={false}
isConnecting={isConnecting}
documentCount={documentCount}
lastIndexedAt={actualConnector?.last_indexed_at}
isIndexing={isIndexing}
activeTask={activeTask}
onConnect={() => onConnectOAuth(connector)}
onManage={
actualConnector && onManage ? () => onManage(actualConnector) : undefined
}
onConnect={() => onConnectOAuth(connectorType)}
/>
);
})}
</div>
</section>
)}
) : (
userConnectors.map((connector: SearchSourceConnector) => {
const documentCount = getDocumentCountForConnector(
connector.connector_type,
documentTypeCounts
);
const isIndexing = indexingConnectorIds?.has(connector.id);
const activeTask = getActiveTaskForConnector(connector.id);
return (
<ConnectorCard
key={connector.id}
id={String(connector.id)}
title={getConnectorDisplayName(connector.name)}
description={connectorType.description}
connectorType={connector.connector_type}
isConnected={true}
isConnecting={false}
documentCount={documentCount}
lastIndexedAt={connector.last_indexed_at}
isIndexing={isIndexing}
activeTask={activeTask}
onConnect={() => onConnectOAuth(connectorType)}
onManage={onManage ? () => onManage(connector) : undefined}
/>
);
})
)}
</div>
</section>
);
})}
{/* More Integrations */}
{filteredOther.length > 0 && (