mirror of
https://github.com/MODSetter/SurfSense.git
synced 2026-06-06 20:15:17 +02:00
refactor: update connector tabs to include search feedback and improve icon usage for better user experience
This commit is contained in:
parent
02323e7b55
commit
8259fab254
2 changed files with 24 additions and 3 deletions
|
|
@ -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]">
|
||||||
|
|
|
||||||
|
|
@ -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 */}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue