[V0_FILE]typescriptreact:file="components/staged-rollout-modal.tsx" isMerged="true" "use client" import { useState } from "react" import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Alert, AlertDescription } from "@/components/ui/alert" import { Badge } from "@/components/ui/badge" import { X, AlertTriangle } from "lucide-react" import type { Connector, StagedRolloutConfig } from "../types/connector" interface StagedRolloutModalProps { connector: Connector open: boolean onOpenChange: (open: boolean) => void onSave: (config: StagedRolloutConfig) => void } const mockUsers = [ { id: "1", name: "ATG2970df899da4...", email: "abc@augloop.test.onmicrosoft.com" }, { id: "2", name: "Admin Alerts and Notifications", email: "AdminAlertsandNotifications@..." }, { id: "3", name: "augloop-cip-test-files", email: "augloop-cip-test-files@..." }, { id: "4", name: "Authoring Copilot", email: "AuthoringCopilot@augloop..." }, { id: "5", name: "Billing Group", email: "billinggroup@augloop..." }, { id: "6", name: "Canada Finance group", email: "FinanceGrp@augloop..." }, { id: "7", name: "Check", email: "SD@augloop.test.onmicrosoft..." }, ] export function StagedRolloutModal({ connector, open, onOpenChange, onSave }: StagedRolloutModalProps) { const [searchTerm, setSearchTerm] = useState("") const [selectedUsers, setSelectedUsers] = useState([]) const [filteredUsers, setFilteredUsers] = useState(mockUsers) const handleSearch = (value: string) => { setSearchTerm(value) const filtered = mockUsers.filter( (user) => user.name.toLowerCase().includes(value.toLowerCase()) || user.email.toLowerCase().includes(value.toLowerCase()), ) setFilteredUsers(filtered) } const toggleUser = (userId: string) => { setSelectedUsers((prev) => (prev.includes(userId) ? prev.filter((id) => id !== userId) : [...prev, userId])) } const removeUser = (userId: string) => { setSelectedUsers((prev) => prev.filter((id) => id !== userId)) } const handleSave = () => { onSave({ enabled: true, selectedUsers, selectedGroups: [], }) } return ( ) } [V0_FILE]typescriptreact:file="types/connector.ts" isEdit="true" isQuickEdit="true" isMerged="true" export interface Connector { id: string name: string displayName: string type: "tenant" | "user" connectionType: "synced" | "federated" category: string visibility: "all-users" | "test-group" | "staged" | "auto-enabled" status: "ready" | "syncing" | "error" | "paused" lastSyncTime?: string itemsSynced?: number autoEnabled?: boolean icon: string provider: string } export interface StagedRolloutConfig { enabled: boolean selectedUsers: string[] selectedGroups: string[] } [V0_FILE]typescriptreact:file="components/top-header.tsx" isMerged="true" "use client" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Search, Settings, HelpCircle, Bell } from "lucide-react" export function TopHeader() { return (

⊞

Microsoft 365 admin center

🤖

Copilot

) } [V0_FILE]typescriptreact:file="components/collapsible-right-panel.tsx" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { ChevronLeft, ChevronRight, HelpCircle, MessageSquare } from "lucide-react" export function CollapsibleRightPanel() { const [isCollapsed, setIsCollapsed] = useState(true) return (

{!isCollapsed && Help & Support}

{!isCollapsed && (

Quick Links

Connector Documentation

Troubleshooting Guide

Best Practices

)} {isCollapsed && (

)}

) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" import AdminConnectors from "../admin-connectors" export default function Page() { return } [V0_FILE]typescriptreact:file="components/navigation-sidebar.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { ChevronDown, ChevronRight, Menu, X } from "lucide-react" import { Button } from "@/components/ui/button" interface NavigationSidebarProps { isCollapsed: boolean onToggleCollapse: () => void } export function NavigationSidebar({ isCollapsed, onToggleCollapse }: NavigationSidebarProps) { const [copilotExpanded, setCopilotExpanded] = useState(true) return (

{!isCollapsed && (

🏠

Home

setCopilotExpanded(!copilotExpanded)} >

🤖

Copilot {copilotExpanded ? : }

{copilotExpanded && (

Overview

Agents

Connectors

Billing & usage

Settings

)}

👥

Users

📱

Devices

👥

Teams & groups

🔐

Roles

📦

Resources

🏪

Marketplace

💳

Billing

❓

Support

⚙️

Settings

🔧

Setup

)} {isCollapsed && (

🏠

🤖

👥

📱

👥

🔐

📦

🏪

💳

❓

⚙️

🔧

)}

) } [V0_FILE]typescriptreact:file="components/connector-table.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import type { Connector } from "../types/connector" import { StagedRolloutModal } from "./staged-rollout-modal" import { ConnectorDetails } from "./connector-details" interface ConnectorTableProps { connectors: Connector[] onConnectorAction: (connectorId: string, action: string) => void } export function ConnectorTable({ connectors, onConnectorAction }: ConnectorTableProps) { const [selectedConnector, setSelectedConnector] = useState(null) const [showStagedRollout, setShowStagedRollout] = useState(false) const [showDetails, setShowDetails] = useState(false) const getStatusBadge = (status: string) => { const variants = { ready: "default", syncing: "secondary", error: "destructive", paused: "outline", } as const return ( {status} ) } const getVisibilityDisplay = (connector: Connector) => { // Simplified to only 2 states if (connector.visibility === "staged") { return "Staged" } return "Enabled for all" } const handleStagedRollout = (connector: Connector) => { setSelectedConnector(connector) setShowStagedRollout(true) } const handleConnectorClick = (connector: Connector) => { setSelectedConnector(connector) setShowDetails(true) } return ( <> Connection Name Display Name Type of connector Staged Rollout Connection state Last sync time {connectors.map((connector) => ( handleConnectorClick(connector)} className="cursor-pointer">

{connector.icon}

{connector.name}

{connector.displayName} {connector.connectionType === "synced" ? "Synced" : "Federated"}

{getVisibilityDisplay(connector)} {connector.visibility === "staged" ? ( ) : ( )}

{getStatusBadge(connector.status)} {connector.connectionType === "federated" ? ( - ) : connector.lastSyncTime ? ( connector.lastSyncTime ) : ( - )} ))}

{showStagedRollout && selectedConnector && ( { console.log("Staged rollout config:", config) setShowStagedRollout(false) }} /> )} {showDetails && selectedConnector && ( )} ) } [V0_FILE]typescriptreact:file="admin-connectors.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Plus, RefreshCw, Filter, Search } from "lucide-react" import { ConnectorTable } from "./components/connector-table" import { ConnectorGallery } from "./components/connector-gallery" import { NavigationSidebar } from "./components/navigation-sidebar" import { TopHeader } from "./components/top-header" import { CollapsibleRightPanel } from "./components/collapsible-right-panel" import type { Connector } from "./types/connector" const mockConnectors: Connector[] = [ { id: "IntranetSitesCloud1", name: "Box", displayName: "Box file storage", type: "user", connectionType: "federated", category: "Collaboration & communication", visibility: "auto-enabled", status: "ready", autoEnabled: true, icon: "📦", provider: "Microsoft", }, { id: "IntranetSitesCloud2", name: "GitHub", displayName: "GitHub repositories", type: "user", connectionType: "federated", category: "Collaboration & communication", visibility: "staged", status: "ready", autoEnabled: true, icon: "🐙", provider: "Microsoft", }, { id: "IntranetSitesCloud3", name: "Intranet", displayName: "Company intranet sites", type: "tenant", connectionType: "synced", category: "Content management systems", visibility: "staged", status: "ready", lastSyncTime: "1 day(s) ago", itemsSynced: 1250, icon: "🌐", provider: "Microsoft", }, { id: "Jira1", name: "Jira", displayName: "Jira project management", type: "tenant", connectionType: "synced", category: "IT service management tools", visibility: "all-users", status: "ready", lastSyncTime: "5 day(s) ago", itemsSynced: 890, icon: "🎫", provider: "Microsoft", }, ] const galleryConnectors: Connector[] = [ ...mockConnectors, { id: "5", name: "Asana", displayName: "Project management and team collaboration", type: "tenant", connectionType: "synced", category: "Collaboration & communication", visibility: "all-users", status: "ready", icon: "🔺", provider: "Microsoft", }, { id: "6", name: "Trello", displayName: "Visual tool for organizing work", type: "tenant", connectionType: "federated", category: "Collaboration & communication", visibility: "all-users", status: "ready", icon: "📋", provider: "Microsoft", }, ] export default function AdminConnectors() { const [connectors, setConnectors] = useState(mockConnectors) const [searchTerm, setSearchTerm] = useState("") const [isNavCollapsed, setIsNavCollapsed] = useState(false) const [activeTab, setActiveTab] = useState("connections") const handleConnectorAction = (connectorId: string, action: string) => { console.log(`Action ${action} on connector ${connectorId}`) // Handle connector actions here } const handleAddConnector = (connectorId: string) => { console.log(`Adding connector ${connectorId}`) // Handle adding connector here } const handleCreateCustomConnector = (connectorData: any) => { // Generate a unique ID for the new connector const newId = `custom_${Date.now()}` // Create the new connector object const newConnector: Connector = { id: newId, name: connectorData.displayName, displayName: connectorData.displayName, type: "tenant", connectionType: connectorData.type === "sync" ? "synced" : "federated", category: "Created by your org", visibility: connectorData.stagedRollout ? "staged" : "all-users", status: "ready", lastSyncTime: connectorData.type === "sync" ? "Just now" : undefined, itemsSynced: connectorData.type === "sync" ? 0 : undefined, icon: "🔗", provider: "Custom", } // Add the new connector to the list setConnectors((prev) => [newConnector, ...prev]) // Switch to connections tab to show the new connector setActiveTab("connections") } const handleAddConnection = () => { setActiveTab("gallery") } const filteredConnectors = connectors.filter( (connector) => connector.name.toLowerCase().includes(searchTerm.toLowerCase()) || connector.displayName.toLowerCase().includes(searchTerm.toLowerCase()), ) return (

setIsNavCollapsed(!isNavCollapsed)} />

{/* Breadcrumb */}

Home › Copilot › Connectors

Connectors

Connect your organization's data to improve insights and information provided by Copilot, agents, and Microsoft Search.

Gallery Your Connections

setSearchTerm(e.target.value)} className="pl-10 w-64 border-gray-300" />

) } [V0_FILE]typescriptreact:file="components/connector-gallery.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Badge } from "@/components/ui/badge" import { Card, CardContent } from "@/components/ui/card" import { Search, Filter, Plus } from "lucide-react" import { CreateConnectorModal } from "./create-connector-modal" import type { Connector } from "../types/connector" interface ConnectorGalleryProps { connectors: Connector[] onAddConnector: (connectorId: string) => void onCreateCustomConnector: (connectorData: any) => void } const categories = [ "All", "Recommended", "Collaboration & communication", "Content management systems", "Customer relationship management", "Data visualization", "Databases", "Enterprise resource planning", "File systems", "IT service management tools", "People", "Sales & support", "Human resources & recruiting", "Others", ] export function ConnectorGallery({ connectors, onAddConnector, onCreateCustomConnector }: ConnectorGalleryProps) { const [searchTerm, setSearchTerm] = useState("") const [selectedCategory, setSelectedCategory] = useState("All") const [showCategories, setShowCategories] = useState(true) const [showCreateConnector, setShowCreateConnector] = useState(false) const filteredConnectors = connectors.filter((connector) => { const matchesSearch = connector.name.toLowerCase().includes(searchTerm.toLowerCase()) || connector.displayName.toLowerCase().includes(searchTerm.toLowerCase()) const matchesCategory = selectedCategory === "All" || connector.category === selectedCategory return matchesSearch && matchesCategory }) const collaborationConnectors = filteredConnectors.filter((c) => c.category === "Collaboration & communication") const handleCreateConnector = (connectorData: any) => { onCreateCustomConnector(connectorData) setShowCreateConnector(false) } return ( <>

setSearchTerm(e.target.value)} className="pl-10" />

{showCategories && (

{categories.map((category) => ( ))}

)}

{selectedCategory === "All" || selectedCategory === "Collaboration & communication" ? (

Collaboration & communication

{collaborationConnectors.map((connector) => (

{connector.icon}

{connector.name}

{connector.type === "user" && ( PREVIEW )}

{connector.provider}

{connector.displayName}

))}

Created by your org

Create a new connector

Can't find the right connector for your data source?

) : (

No connectors found in this category.

)}

) } [V0_FILE]typescriptreact:file="components/connector-details.tsx" isEdit="true" isMerged="true" "use client" import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@/components/ui/sheet" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Separator } from "@/components/ui/separator" import { MoreHorizontal, Settings, Play, Pause, RefreshCw, Trash2, Database, Info, AlertCircle, CheckCircle, Link, } from "lucide-react" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" import type { Connector } from "../types/connector" interface ConnectorDetailsProps { connector: Connector | null open: boolean onOpenChange: (open: boolean) => void onAction: (connectorId: string, action: string) => void } export function ConnectorDetails({ connector, open, onOpenChange, onAction }: ConnectorDetailsProps) { if (!connector) return null const getStatusIcon = (status: string) => { switch (status) { case "ready": return case "syncing": return case "error": return case "paused": return default: return } } const getVisibilityText = (connector: Connector) => { if (connector.type === "user" && connector.autoEnabled) { return "Enabled for all" } switch (connector.visibility) { case "all-users": return "All permitted users" case "test-group": return "Test group only" case "staged": return "Staged rollout" default: return connector.visibility } } // Mock MCP data for federated connectors const getMCPInfo = (connector: Connector) => { if (connector.connectionType === "federated") { return { url: `mcp://${connector.name.toLowerCase()}.example.com/api`, tools: ["search", "fetch", "list_files", "get_content"], } } return null } const mcpInfo = getMCPInfo(connector) return (

{connector.icon}

{connector.name}

{connector.displayName}

{connector.type === "tenant" && connector.connectionType === "synced" ? ( <> onAction(connector.id, "full-crawl")}> Start Full Crawl onAction(connector.id, "pause")}> Pause onAction(connector.id, "edit")}> Edit ) : ( <> {connector.connectionType === "synced" && ( onAction(connector.id, "data-sources")}> Data Sources Only )} onAction(connector.id, "toggle")}> Turn {connector.status === "ready" ? "Off" : "On"} onAction(connector.id, "delete")}> Delete )}

{/* Status Overview */} {getStatusIcon(connector.status)} Status

{connector.status.charAt(0).toUpperCase() + connector.status.slice(1)}

Connection Type

{connector.connectionType === "synced" ? "Synced" : "Federated"} {connector.connectionType === "federated" && ( )}

Visibility

{getVisibilityText(connector)}

{/* More Information */} More Information {connector.connectionType === "synced" ? ( <>

Last sync time

{connector.lastSyncTime ? ( connector.lastSyncTime ) : ( - )}

Items synced

{connector.itemsSynced ? connector.itemsSynced.toLocaleString() : "-"}

{connector.type === "tenant" && (

Errors

)} ) : ( <>

MCP endpoint URL

{mcpInfo?.url}

Available tools

{mcpInfo?.tools.map((tool) => ( {tool} ))}

Query mode

Real-time federation

)} {/* Configuration */} Configuration

Provider

{connector.provider}

Actions

{connector.type === "tenant" && connector.connectionType === "synced" ? ( <> ) : ( <> {connector.connectionType === "synced" && ( )} )}

) } [V0_FILE]typescriptreact:file="components/create-connector-modal.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState, useEffect, useRef } from "react" import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Switch } from "@/components/ui/switch" import { Checkbox } from "@/components/ui/checkbox" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Separator } from "@/components/ui/separator" import { Card, CardContent } from "@/components/ui/card" import { Database, Zap, CheckCircle, Copy, ExternalLink } from "lucide-react" interface CreateConnectorModalProps { open: boolean onOpenChange: (open: boolean) => void onSave: (connectorData: any) => void } export function CreateConnectorModal({ open, onOpenChange, onSave }: CreateConnectorModalProps) { const [step, setStep] = useState<"choose" | "setup" | "success">("choose") const [connectorType, setConnectorType] = useState<"sync" | "federate" | null>(null) const [displayName, setDisplayName] = useState("") const [url, setUrl] = useState("") const [authType, setAuthType] = useState("") const [stagedRollout, setStagedRollout] = useState(false) const [acceptNotice, setAcceptNotice] = useState(false) const [urlError, setUrlError] = useState("") // Use ref to prevent parent re-renders from resetting state const isSuccessRef = useRef(false) const connectorDataRef = useRef(null) console.log("Current step:", step, "connectorType:", connectorType, "isSuccess:", isSuccessRef.current) const validateMCPUrl = (url: string) => { if (connectorType === "federate" && url) { if (url.toLowerCase().includes("nosearch")) { setUrlError("MCP endpoint must support search functionality") } else { setUrlError("") } } else { setUrlError("") } } useEffect(() => { validateMCPUrl(url) }, [url, connectorType]) // Reset modal when it opens (but not when already in success state) useEffect(() => { if (open && !isSuccessRef.current) { setStep("choose") setConnectorType(null) setDisplayName("") setUrl("") setAuthType("") setStagedRollout(false) setAcceptNotice(false) setUrlError("") } }, [open]) const handleTypeSelection = (type: "sync" | "federate") => { setConnectorType(type) setStep("setup") } const handleBack = () => { setStep("choose") setConnectorType(null) } const handleSave = () => { console.log("handleSave called with connectorType:", connectorType) const connectorData = { type: connectorType, displayName, url, authType, stagedRollout, acceptNotice, } // Store data in ref to survive re-renders connectorDataRef.current = connectorData isSuccessRef.current = true console.log("About to set step to success") setStep("success") console.log("About to call onSave") // Call onSave after a delay to prevent immediate reset setTimeout(() => { onSave(connectorData) }, 100) } const handleOpenChange = (open: boolean) => { if (!open) { // Reset everything when modal closes isSuccessRef.current = false connectorDataRef.current = null setStep("choose") setConnectorType(null) setDisplayName("") setUrl("") setAuthType("") setStagedRollout(false) setAcceptNotice(false) setUrlError("") } onOpenChange(open) } const handleFinish = () => { // Reset everything when user clicks Done isSuccessRef.current = false connectorDataRef.current = null setStep("choose") setConnectorType(null) setDisplayName("") setUrl("") setAuthType("") setStagedRollout(false) setAcceptNotice(false) setUrlError("") onOpenChange(false) } // Use stored data for success screen if available const successConnectorType = connectorDataRef.current?.type || connectorType const successDisplayName = connectorDataRef.current?.displayName || displayName const samplePrompts = [ { app: "Copilot Search", prompts: [ `Find recent documents about ${successDisplayName || "your data source"}`, `What are the latest updates from ${successDisplayName || "the system"}?`, `Search for information related to project planning in ${successDisplayName || "your data"}`, ], }, { app: "Microsoft 365 Copilot", prompts: [ `Summarize the key insights from ${successDisplayName || "your data source"}`, `Create a report based on the latest data from ${successDisplayName || "the connector"}`, `Help me understand trends in ${successDisplayName || "the connected system"}`, ], }, ] if (step === "success" || isSuccessRef.current) { console.log("Rendering success screen with connectorType:", successConnectorType) return ( ) } if (step === "choose") { return ( ) } return ( ) }

Quick Links

Connectors

Collaboration & communication

{connector.name}

Created by your org

Create a new connector

Actions

Try these sample prompts

{section.app}

Next steps

Sync data from a data source

Federate out to a data source

{connectorType === "sync" ? "Sync Data Connector" : "Federated Connector"}