From ded23f12c4072fd6722d56a44435f3defe17906d Mon Sep 17 00:00:00 2001 From: Brent O'Neill Date: Thu, 2 Oct 2025 11:50:42 -0600 Subject: [PATCH] added new icons for cloud connectors --- frontend/components/ui/card.tsx | 2 +- .../app/settings/icons/google-drive-icon.tsx | 36 +++ .../src/app/settings/icons/one-drive-icon.tsx | 164 ++++++++++++++ .../app/settings/icons/share-point-icon.tsx | 211 ++++++++++++++++++ frontend/src/app/settings/page.tsx | 211 ++++++++++-------- 5 files changed, 527 insertions(+), 97 deletions(-) create mode 100644 frontend/src/app/settings/icons/google-drive-icon.tsx create mode 100644 frontend/src/app/settings/icons/one-drive-icon.tsx create mode 100644 frontend/src/app/settings/icons/share-point-icon.tsx diff --git a/frontend/components/ui/card.tsx b/frontend/components/ui/card.tsx index 0873b5e4..92c8a189 100644 --- a/frontend/components/ui/card.tsx +++ b/frontend/components/ui/card.tsx @@ -33,7 +33,7 @@ const CardTitle = React.forwardRef<

( + + + + + + + + +); + +export default GoogleDriveIcon; diff --git a/frontend/src/app/settings/icons/one-drive-icon.tsx b/frontend/src/app/settings/icons/one-drive-icon.tsx new file mode 100644 index 00000000..30b77a65 --- /dev/null +++ b/frontend/src/app/settings/icons/one-drive-icon.tsx @@ -0,0 +1,164 @@ +const OneDriveIcon = () => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); + +export default OneDriveIcon; diff --git a/frontend/src/app/settings/icons/share-point-icon.tsx b/frontend/src/app/settings/icons/share-point-icon.tsx new file mode 100644 index 00000000..3f51dfae --- /dev/null +++ b/frontend/src/app/settings/icons/share-point-icon.tsx @@ -0,0 +1,211 @@ +const SharePointIcon = () => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); + +export default SharePointIcon; diff --git a/frontend/src/app/settings/page.tsx b/frontend/src/app/settings/page.tsx index 7233c8fd..6017ab5b 100644 --- a/frontend/src/app/settings/page.tsx +++ b/frontend/src/app/settings/page.tsx @@ -1,7 +1,8 @@ "use client"; -import { ArrowUpRight, Loader2, PlugZap, Plus, Minus } from "lucide-react"; +import { ArrowUpRight, Loader2, Plus, Minus } from "lucide-react"; import { useRouter, useSearchParams } from "next/navigation"; +import Link from "next/link"; import { Suspense, useCallback, useEffect, useState } from "react"; import { useUpdateFlowSettingMutation } from "@/app/api/mutations/useUpdateFlowSettingMutation"; import { @@ -12,7 +13,6 @@ import { import { useGetSettingsQuery } from "@/app/api/queries/useGetSettingsQuery"; import { ConfirmationDialog } from "@/components/confirmation-dialog"; import { ProtectedRoute } from "@/components/protected-route"; -import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { Card, @@ -21,7 +21,6 @@ import { CardHeader, CardTitle, } from "@/components/ui/card"; -import { Checkbox } from "@/components/ui/checkbox"; import { Switch } from "@/components/ui/switch"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; @@ -44,6 +43,10 @@ import { getFallbackModels, type ModelProvider } from "./helpers/model-helpers"; import { ModelSelectItems } from "./helpers/model-select-item"; import { LabelWrapper } from "@/components/label-wrapper"; +import GoogleDriveIcon from "./icons/google-drive-icon"; +import OneDriveIcon from "./icons/one-drive-icon"; +import SharePointIcon from "./icons/share-point-icon"; + const { MAX_SYSTEM_PROMPT_CHARS } = UI_CONSTANTS; interface GoogleDriveFile { @@ -92,6 +95,33 @@ interface Connection { last_sync?: string; } +const DEFAULT_CONNECTORS: Connector[] = [ + { + id: "google_drive", + name: "Google Drive", + description: "Google Drive is not configured.", + icon: , + status: "not_connected", + type: "google_drive", + }, + { + id: "one_drive", + name: "OneDrive", + description: "OneDrive is not configured.", + icon: , + status: "not_connected", + type: "one_drive", + }, + { + id: "amazon_s3", + name: "SharePoint", + description: "SharePoint is not configured.", + icon: , + status: "not_connected", + type: "sharepoint", + }, +]; + function KnowledgeSourcesPage() { const { isAuthenticated, isNoAuthMode } = useAuth(); const { addTask, tasks } = useTask(); @@ -262,22 +292,20 @@ function KnowledgeSourcesPage() { updateFlowSettingMutation.mutate({ picture_descriptions: checked }); }; + console.log({ connectors }); + // Helper function to get connector icon const getConnectorIcon = useCallback((iconName: string) => { const iconMap: { [key: string]: React.ReactElement } = { - "google-drive": ( -
- G -
- ), + "google-drive": , sharepoint: (
SP
), onedrive: ( -
- OD +
+
), }; @@ -313,7 +341,7 @@ function KnowledgeSourcesPage() { status: "not_connected" as const, type: type, })); - + console.log({ initialConnectors }); setConnectors(initialConnectors); // Check status for each connector type @@ -454,34 +482,13 @@ function KnowledgeSourcesPage() { const getStatusBadge = (status: Connector["status"]) => { switch (status) { case "connected": - return ( - - Connected - - ); + return
; case "connecting": - return ( - - Connecting... - - ); + return
; case "error": - return Error; + return
; default: - return ( - - Not Connected - - ); + return
; } }; @@ -701,73 +708,85 @@ function KnowledgeSourcesPage() { {/* Connectors Grid */}
- {connectors.map((connector) => ( - - -
-
- {connector.icon} -
- + {DEFAULT_CONNECTORS.map((connector) => { + const actualConnector = connectors.find( + (c) => c.id === connector.id + ); + return ( + + +
+
+
+
+ {connector.icon} +
+
+ {connector.name} + {actualConnector && + getStatusBadge(actualConnector.status)} - - {connector.description} + + {actualConnector?.description + ? `${actualConnector.name} is configured.` + : connector.description}
- {getStatusBadge(connector.status)} -
- - - {connector.status === "connected" ? ( -
- + + + {actualConnector?.status === "connected" ? ( +
+ - {syncResults[connector.id] && ( -
-
- Processed: {syncResults[connector.id]?.processed || 0} + {syncResults[connector.id] && ( +
+
+ Processed:{" "} + {syncResults[connector.id]?.processed || 0} +
+
+ Added: {syncResults[connector.id]?.added || 0} +
+ {syncResults[connector.id]?.errors && ( +
+ Errors: {syncResults[connector.id]?.errors} +
+ )}
-
- Added: {syncResults[connector.id]?.added || 0} -
- {syncResults[connector.id]?.errors && ( -
Errors: {syncResults[connector.id]?.errors}
- )} -
- )} -
- ) : ( - - )} - - - ))} + )} +
+ ) : ( +
+

+ See our{" "} + + Cloud Connectors installation guide + {" "} + for more detail. +

+
+ )} + + + ); + })}
{/* Agent Behavior Section */}