refactor: update connector tabs to include search feedback and improve icon usage for better user experience

This commit is contained in:
Anish Sarkar 2026-04-06 13:27:49 +05:30
parent 02323e7b55
commit 8259fab254
2 changed files with 24 additions and 3 deletions

View file

@ -1,6 +1,6 @@
"use client"; "use client";
import { Cable } from "lucide-react"; import { Search, Unplug } from "lucide-react";
import type { FC } from "react"; import type { FC } from "react";
import { getDocumentTypeLabel } from "@/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentTypeIcon"; import { getDocumentTypeLabel } from "@/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentTypeIcon";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
@ -134,9 +134,17 @@ export const ActiveConnectorsTab: FC<ActiveConnectorsTabProps> = ({
const hasActiveConnectors = const hasActiveConnectors =
filteredOAuthConnectorTypes.length > 0 || filteredNonOAuthConnectors.length > 0; filteredOAuthConnectorTypes.length > 0 || filteredNonOAuthConnectors.length > 0;
const hasFilteredResults = hasActiveConnectors || standaloneDocuments.length > 0;
return ( return (
<TabsContent value="active" className="m-0"> <TabsContent value="active" className="m-0">
{hasSources ? ( {hasSources && !hasFilteredResults && searchQuery ? (
<div className="flex flex-col items-center justify-center py-20 text-center">
<Search className="size-8 text-muted-foreground mb-3" />
<p className="text-sm text-muted-foreground">No connectors found</p>
<p className="text-xs text-muted-foreground/60 mt-1">Try a different search term</p>
</div>
) : hasSources ? (
<div className="space-y-6"> <div className="space-y-6">
{/* Active Connectors Section */} {/* Active Connectors Section */}
{hasActiveConnectors && ( {hasActiveConnectors && (
@ -302,7 +310,7 @@ export const ActiveConnectorsTab: FC<ActiveConnectorsTabProps> = ({
) : ( ) : (
<div className="flex flex-col items-center justify-center py-20 text-center"> <div className="flex flex-col items-center justify-center py-20 text-center">
<div className="flex h-16 w-16 items-center justify-center rounded-full bg-muted mb-4"> <div className="flex h-16 w-16 items-center justify-center rounded-full bg-muted mb-4">
<Cable className="size-8 text-muted-foreground" /> <Unplug className="size-8 text-muted-foreground" />
</div> </div>
<h4 className="text-lg font-semibold">No active sources</h4> <h4 className="text-lg font-semibold">No active sources</h4>
<p className="text-sm text-muted-foreground mt-1 max-w-[280px]"> <p className="text-sm text-muted-foreground mt-1 max-w-[280px]">

View file

@ -1,5 +1,6 @@
"use client"; "use client";
import { Search } from "lucide-react";
import type { FC } from "react"; import type { FC } from "react";
import { EnumConnectorName } from "@/contracts/enums/connector"; import { EnumConnectorName } from "@/contracts/enums/connector";
import type { SearchSourceConnector } from "@/contracts/types/connector.types"; import type { SearchSourceConnector } from "@/contracts/types/connector.types";
@ -287,6 +288,18 @@ export const AllConnectorsTab: FC<AllConnectorsTabProps> = ({
moreIntegrationsOther.length > 0 || moreIntegrationsOther.length > 0 ||
moreIntegrationsCrawlers.length > 0; moreIntegrationsCrawlers.length > 0;
const hasAnyResults = hasDocumentFileConnectors || hasMoreIntegrations;
if (!hasAnyResults && searchQuery) {
return (
<div className="flex flex-col items-center justify-center py-20 text-center">
<Search className="size-8 text-muted-foreground mb-3" />
<p className="text-sm text-muted-foreground">No connectors found</p>
<p className="text-xs text-muted-foreground/60 mt-1">Try a different search term</p>
</div>
);
}
return ( return (
<div className="space-y-8"> <div className="space-y-8">
{/* Document/Files Connectors */} {/* Document/Files Connectors */}