fix: missing connectors section

.github/workflows/pr-playwright-tests.yml

@@ -9,6 +9,11 @@ env:
   OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
   SLACK_BOT_TOKEN: ${{ secrets.SLACK_BOT_TOKEN }}
   GEN_AI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
+
+  # for federated slack tests
+  SLACK_CLIENT_ID: ${{ secrets.SLACK_CLIENT_ID }}
+  SLACK_CLIENT_SECRET: ${{ secrets.SLACK_CLIENT_SECRET }}
+
   MOCK_LLM_RESPONSE: true
 
 jobs:

web/admin2_auth.json

@@ -2,10 +2,10 @@
   "cookies": [
     {
       "name": "fastapiusersauth",
-      "value": "h3qhacpHbE4_09HcOLlVW4lSee48m1UbjYTUiKYwNiw",
+      "value": "AAdfmA4NT0BXdlg80K3xVuLGVPPPqH7JfzVk82otIw0",
       "domain": "localhost",
       "path": "/",
-      "expires": 1745624493.119168,
+      "expires": 1758133751.1961,
       "httpOnly": true,
       "secure": false,
       "sameSite": "Lax"

web/src/app/assistants/SidebarWrapper.tsx

@@ -15,6 +15,7 @@ import { useSidebarShortcut } from "@/lib/browserUtilities";
 import { UserSettingsModal } from "@/app/chat/components/modal/UserSettingsModal";
 import { usePopup } from "@/components/admin/connectors/Popup";
 import { useUser } from "@/components/user/UserProvider";
+import { useFederatedOAuthStatus } from "@/lib/hooks/useFederatedOAuthStatus";
 
 interface SidebarWrapperProps<T extends object> {
   size?: "sm" | "lg";
@@ -41,7 +42,12 @@ export default function SidebarWrapper<T extends object>({
   }, [sidebarVisible]);
 
   const sidebarElementRef = useRef<HTMLDivElement>(null);
-  const { folders, openedFolders, chatSessions } = useChatContext();
+  const { folders, chatSessions, ccPairs } = useChatContext();
+  const {
+    connectors: federatedConnectors,
+    refetch: refetchFederatedConnectors,
+  } = useFederatedOAuthStatus();
+
   const explicitlyUntoggle = () => {
     setShowDocSidebar(false);
 
@@ -114,6 +120,9 @@ export default function SidebarWrapper<T extends object>({
         <UserSettingsModal
           setPopup={setPopup}
           llmProviders={llmProviders}
+          ccPairs={ccPairs}
+          federatedConnectors={federatedConnectors}
+          refetchFederatedConnectors={refetchFederatedConnectors}
           onClose={() => setUserSettingsToggled(false)}
           defaultModel={user?.preferences?.default_model!}
         />

web/src/app/chat/components/ChatPage.tsx

@@ -18,6 +18,7 @@ import {
 import { usePopup } from "@/components/admin/connectors/Popup";
 import { SEARCH_PARAM_NAMES } from "../services/searchParams";
 import { useFederatedConnectors, useFilters, useLlmManager } from "@/lib/hooks";
+import { useFederatedOAuthStatus } from "@/lib/hooks/useFederatedOAuthStatus";
 import { FeedbackType } from "@/app/chat/interfaces";
 import { OnyxInitializingLoader } from "@/components/OnyxInitializingLoader";
 import { FeedbackModal } from "./modal/FeedbackModal";
@@ -161,6 +162,10 @@ export function ChatPage({
 
   // Also fetch federated connectors for the sources list
   const { data: federatedConnectorsData } = useFederatedConnectors();
+  const {
+    connectors: federatedConnectorOAuthStatus,
+    refetch: refetchFederatedConnectors,
+  } = useFederatedOAuthStatus();
 
   const { user, isAdmin } = useUser();
   const existingChatIdRaw = searchParams?.get("chatId");
@@ -796,6 +801,9 @@ export function ChatPage({
           updateCurrentLlm={llmManager.updateCurrentLlm}
           defaultModel={user?.preferences.default_model!}
           llmProviders={llmProviders}
+          ccPairs={ccPairs}
+          federatedConnectors={federatedConnectorOAuthStatus}
+          refetchFederatedConnectors={refetchFederatedConnectors}
           onClose={() => {
             setUserSettingsToggled(false);
             setSettingsToggled(false);

web/src/app/chat/components/modal/UserSettingsModal.tsx

@@ -49,9 +49,9 @@ export function UserSettingsModal({
   updateCurrentLlm?: (newOverride: LlmDescriptor) => void;
   onClose: () => void;
   defaultModel: string | null;
-  ccPairs?: CCPairBasicInfo[];
-  federatedConnectors?: FederatedConnectorOAuthStatus[];
-  refetchFederatedConnectors?: () => void;
+  ccPairs: CCPairBasicInfo[];
+  federatedConnectors: FederatedConnectorOAuthStatus[];
+  refetchFederatedConnectors: () => void;
 }) {
   const {
     refreshUser,

web/tests/e2e/connectors/federated_slack.spec.ts

@@ -0,0 +1,108 @@
+import { test, expect } from "@chromatic-com/playwright";
+import type { Page } from "@playwright/test";
+import { loginAs, loginAsRandomUser } from "../utils/auth";
+
+test.use({ storageState: "admin_auth.json" });
+
+const SLACK_CLIENT_ID = process.env.SLACK_CLIENT_ID || "";
+const SLACK_CLIENT_SECRET = process.env.SLACK_CLIENT_SECRET || "";
+
+async function createFederatedSlackConnector(page: Page) {
+  // Navigate to add connector page
+  await page.goto("http://localhost:3000/admin/add-connector");
+  await page.waitForLoadState("networkidle");
+
+  // Click on Slack connector tile (specifically the one with "Logo Slack" text, not "Slack Bots")
+  await page.getByRole("link", { name: "Logo Slack" }).first().click();
+  await page.waitForLoadState("networkidle");
+
+  // Fill in the client ID and client secret
+  await page.getByLabel(/client id/i).fill(SLACK_CLIENT_ID);
+  await page.getByLabel(/client secret/i).fill(SLACK_CLIENT_SECRET);
+
+  // Submit the form to create or update the federated connector
+  const createOrUpdateButton = await page.getByRole("button", {
+    name: /create|update/i,
+  });
+  await createOrUpdateButton.click();
+
+  // Wait for success message or redirect
+  await page.waitForTimeout(2000);
+}
+
+async function navigateToUserSettings(page: Page) {
+  // Wait for any existing modals to close
+  await page.waitForTimeout(1000);
+
+  // Wait for potential modal backdrop to disappear
+  await page
+    .waitForSelector(".fixed.inset-0.bg-neutral-950\\/50", {
+      state: "detached",
+      timeout: 5000,
+    })
+    .catch(() => {});
+
+  // Click on user dropdown/settings button
+  await page.locator("#onyx-user-dropdown").click();
+
+  // Click on settings option
+  await page.getByText("User Settings").click();
+
+  // Wait for settings modal to appear
+  await expect(page.locator("h2", { hasText: "User Settings" })).toBeVisible();
+}
+
+async function openConnectorsTab(page: Page) {
+  // Click on the Connectors tab in user settings
+  await page.getByRole("button", { name: "Connectors" }).click();
+
+  // Wait for connectors section to be visible
+  // Allow multiple instances of "Connected Services" to be visible
+  const connectedServicesLocators = page.getByText("Connected Services");
+  await expect(connectedServicesLocators.first()).toBeVisible();
+}
+
+test("Federated Slack Connector - Create, OAuth Modal, and User Settings Flow", async ({
+  page,
+}) => {
+  // Setup: Clear cookies and log in as admin
+  await page.context().clearCookies();
+  await loginAs(page, "admin");
+
+  // Create a federated Slack connector in admin panel
+  await createFederatedSlackConnector(page);
+
+  // Log in as a random user
+  await page.context().clearCookies();
+  await loginAsRandomUser(page);
+
+  // Navigate back to main page and verify OAuth modal appears
+  await page.goto("http://localhost:3000/chat");
+  await page.waitForLoadState("networkidle");
+
+  // Check if the OAuth modal appears
+  await expect(
+    page.getByText(/improve answer quality by letting/i)
+  ).toBeVisible({ timeout: 10000 });
+  await expect(page.getByText(/slack/i)).toBeVisible();
+
+  // Decline the OAuth connection
+  await page.getByRole("button", { name: "Skip for now" }).click();
+
+  // Wait for modal to disappear
+  await expect(
+    page.getByText(/improve answer quality by letting/i)
+  ).not.toBeVisible();
+
+  // Go to user settings and verify the connector appears
+  await navigateToUserSettings(page);
+  await openConnectorsTab(page);
+
+  // Verify Slack connector appears in the federated connectors section
+  await expect(page.getByText("Federated Connectors")).toBeVisible();
+  await expect(page.getByText("Slack")).toBeVisible();
+  await expect(page.getByText("Not connected")).toBeVisible();
+
+  // Verify there's a Connect button available
+  await expect(page.locator("button", { hasText: /^Connect$/ })).toBeVisible();
+});