From e48b1c1f90c18052e7561e19fced4a7a908edaba Mon Sep 17 00:00:00 2001 From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com> Date: Wed, 8 Jul 2026 01:02:05 +0530 Subject: [PATCH] refactor(playground): remove API Keys section and update navigation - Deleted the ApiKeysSection component to streamline the Playground layout. - Updated PlaygroundLayoutShell and PlaygroundIndex to remove references to API Keys. - Redirected API Keys page to User Settings for improved navigation flow. --- .../playground/api-keys/page.tsx | 8 +- .../components/api-keys-section.tsx | 82 ------------------- .../playground/components/api-reference.tsx | 6 +- .../components/playground-index.tsx | 17 +--- .../playground/layout-shell.tsx | 9 +- 5 files changed, 7 insertions(+), 115 deletions(-) delete mode 100644 surfsense_web/app/dashboard/[workspace_id]/playground/components/api-keys-section.tsx diff --git a/surfsense_web/app/dashboard/[workspace_id]/playground/api-keys/page.tsx b/surfsense_web/app/dashboard/[workspace_id]/playground/api-keys/page.tsx index 0dbd12818..2df3ec58e 100644 --- a/surfsense_web/app/dashboard/[workspace_id]/playground/api-keys/page.tsx +++ b/surfsense_web/app/dashboard/[workspace_id]/playground/api-keys/page.tsx @@ -1,4 +1,4 @@ -import { ApiKeysSection } from "../components/api-keys-section"; +import { redirect } from "next/navigation"; export default async function PlaygroundApiKeysPage({ params, @@ -7,9 +7,5 @@ export default async function PlaygroundApiKeysPage({ }) { const { workspace_id } = await params; - return ( -
- -
- ); + redirect(`/dashboard/${workspace_id}/user-settings/api-key`); } diff --git a/surfsense_web/app/dashboard/[workspace_id]/playground/components/api-keys-section.tsx b/surfsense_web/app/dashboard/[workspace_id]/playground/components/api-keys-section.tsx deleted file mode 100644 index 2e1f272e9..000000000 --- a/surfsense_web/app/dashboard/[workspace_id]/playground/components/api-keys-section.tsx +++ /dev/null @@ -1,82 +0,0 @@ -"use client"; - -import { useQuery } from "@tanstack/react-query"; -import { useAtomValue } from "jotai"; -import { useState } from "react"; -import { toast } from "sonner"; -import { updateWorkspaceApiAccessMutationAtom } from "@/atoms/workspaces/workspace-mutation.atoms"; -import { Label } from "@/components/ui/label"; -import { Skeleton } from "@/components/ui/skeleton"; -import { Switch } from "@/components/ui/switch"; -import { workspacesApiService } from "@/lib/apis/workspaces-api.service"; -import { cacheKeys } from "@/lib/query-client/cache-keys"; -import { ApiKeyContent } from "../../user-settings/components/ApiKeyContent"; - -/** - * One-stop API key management for the playground: the workspace API-access - * toggle (otherwise buried in workspace settings) plus the personal API key - * manager (otherwise buried in user settings). - */ -export function ApiKeysSection({ workspaceId }: { workspaceId: number }) { - const { - data: workspace, - isLoading, - refetch, - } = useQuery({ - queryKey: cacheKeys.workspaces.detail(workspaceId.toString()), - queryFn: () => workspacesApiService.getWorkspace({ id: workspaceId }), - enabled: !!workspaceId, - }); - const { mutateAsync: updateWorkspaceApiAccess } = useAtomValue( - updateWorkspaceApiAccessMutationAtom - ); - const [saving, setSaving] = useState(false); - - const handleToggle = async (enabled: boolean) => { - try { - setSaving(true); - await updateWorkspaceApiAccess({ id: workspaceId, api_access_enabled: enabled }); - await refetch(); - } catch (error) { - console.error("Error updating API access:", error); - toast.error(error instanceof Error ? error.message : "Failed to update API access"); - } finally { - setSaving(false); - } - }; - - const apiAccessEnabled = !!workspace?.api_access_enabled; - - return ( -
-
-

API Keys

-

- Enable API access for this workspace and manage the keys that use it. -

-
- -
-
- -

- Allow API keys to access this workspace. - {!isLoading && !apiAccessEnabled && " Currently disabled — keys won't work here."} -

-
- {isLoading ? ( - - ) : ( - - )} -
- - -
- ); -} diff --git a/surfsense_web/app/dashboard/[workspace_id]/playground/components/api-reference.tsx b/surfsense_web/app/dashboard/[workspace_id]/playground/components/api-reference.tsx index acdcddd6c..1bc4fe1d3 100644 --- a/surfsense_web/app/dashboard/[workspace_id]/playground/components/api-reference.tsx +++ b/surfsense_web/app/dashboard/[workspace_id]/playground/components/api-reference.tsx @@ -90,9 +90,9 @@ export function ApiReference({

API reference

- Call this API from your own project. Create a key under{" "} - API Keys (and enable API access for - this workspace), then send it as a{" "} + Call this API from your own project. Create a key in{" "} + User settings and enable API access + for this workspace, then send it as a{" "} Authorization: Bearer{" "} header.

diff --git a/surfsense_web/app/dashboard/[workspace_id]/playground/components/playground-index.tsx b/surfsense_web/app/dashboard/[workspace_id]/playground/components/playground-index.tsx index cf10260ad..c634dbc6d 100644 --- a/surfsense_web/app/dashboard/[workspace_id]/playground/components/playground-index.tsx +++ b/surfsense_web/app/dashboard/[workspace_id]/playground/components/playground-index.tsx @@ -1,6 +1,6 @@ "use client"; -import { ArrowRight, History, KeyRound } from "lucide-react"; +import { ArrowRight, History } from "lucide-react"; import Link from "next/link"; import { useMemo } from "react"; import { useScraperCapabilities } from "@/hooks/use-scraper-capabilities"; @@ -41,21 +41,6 @@ export function PlaygroundIndex({ workspaceId }: { workspaceId: number }) {
- -
- -
-

API Keys

-

- Enable workspace access and manage keys -

-
-
- -
diff --git a/surfsense_web/app/dashboard/[workspace_id]/playground/layout-shell.tsx b/surfsense_web/app/dashboard/[workspace_id]/playground/layout-shell.tsx index 43331651d..c680cf6d4 100644 --- a/surfsense_web/app/dashboard/[workspace_id]/playground/layout-shell.tsx +++ b/surfsense_web/app/dashboard/[workspace_id]/playground/layout-shell.tsx @@ -1,6 +1,6 @@ "use client"; -import { History, KeyRound, LayoutGrid } from "lucide-react"; +import { History, LayoutGrid } from "lucide-react"; import Link from "next/link"; import { useSelectedLayoutSegments } from "next/navigation"; import type React from "react"; @@ -87,13 +87,6 @@ export function PlaygroundLayoutShell({ workspaceId, children }: PlaygroundLayou href: `${base}/runs`, icon: , }, - { - type: "item", - value: "api-keys", - label: "API Keys", - href: `${base}/api-keys`, - icon: , - }, ...PLAYGROUND_PLATFORMS.flatMap((platform) => [ { type: "section",