+
}
+ className="ripple w-full"
+ onClick={() => {
+ router.push("/signin");
+ }}
+ >
+
+
+
+
Unlock Full Potential
+
+ Outerbase Cloud gives you AI-driver insights, managed database, and
+ team collaboation.
+
+
+
+
+
+
+
![img]({"/assets/sat.png"})
+
+
+
-
-
- {workspaces.map((workspace) => (
-
router.push(`/w/${workspace.short_name}`)}
- key={workspace.id}
- onMouseEnter={() => setSelectedWorkspaceId(workspace.short_name)}
- className={cn(
- buttonVariants({
- variant:
- currentWorkspace?.id === workspace.id ? "secondary" : "ghost",
- size: "sm",
- }),
- "cursor-pointer justify-start py-0.5"
- )}
- >
- {workspace.name}
-
- ))}
-
-
-
- {bases.map((base) => {
- const IconComponent = getDatabaseIcon(base.sources[0]?.type);
-
- return (
-
- router.push(`/w/${selectedWorkspaceId}/${base.short_name}`, {})
- }
- key={base.id}
- className={cn(
- buttonVariants({
- variant: "ghost",
- size: "sm",
- }),
- "cursor-pointer justify-start p-2"
- )}
- >
-
- {base.name}
-
- );
- })}
-
-
+
+
+ {/*
*/}
+
+ Bring your existing databases
+
+
+
+
+ {resourceTypeList
+ .filter((resource) => !resource.thirdParty)
+ .filter((_, idx) => idx % 2 === 0)
+ .map((resource) => (
+
+ ))}
+
+
+
+ {resourceTypeList
+ .filter((resource) => !resource.thirdParty)
+ .filter((_, idx) => idx % 2 === 1)
+ .map((resource) => (
+
+ ))}
+
+
+ Third party integrations
+
+
+
+
+ {resourceTypeList
+ .filter((resource) => !!resource.thirdParty)
+ .filter((_, idx) => idx % 2 === 0)
+ .map((resource) => (
+
+ ))}
+
+
+
+ {resourceTypeList
+ .filter((resource) => !!resource.thirdParty)
+ .filter((_, idx) => idx % 2 === 1)
+ .map((resource) => (
+
+ ))}
+
+
Or use connection string
+
+ }
+ placeholder="postgres://testing"
+ />
+
*/}
+
+ );
+
+ const resourceSearch = useMemo(() => {
+ const filteredResource = resourceTypeList
+ .filter((resource) =>
+ resource.name.toLowerCase().includes(search.toLowerCase())
+ )
+ .sort((a, b) => {
+ return a.name.localeCompare(b.name);
+ });
+
+ if (filteredResource.length === 0) {
+ return (
+
+
+ There is no resource type of {search}
+
+
+ );
+ }
+
+ return (
+
+ {filteredResource
+ .sort((a, b) => {
+ return a.name.localeCompare(b.name);
+ })
+ .map((resource, resourceIdx) => (
+
+ ))}
+
+ );
+ }, [search, resourceTypeList]);
+
+ return (
+ <>
+ {
+ setSearch("");
+ setOpen(openState);
+ }}
+ modal={false}
+ >
+
+
+
+
+
+ }
+ />
+
+
+ {search ? resourceSearch : allResourceType}
+
+
+ {open && (
+
+ )}
+
+ );
+}
diff --git a/src/app/(outerbase)/new-resource-list.tsx b/src/app/(outerbase)/new-resource-list.tsx
new file mode 100644
index 00000000..4857cb7d
--- /dev/null
+++ b/src/app/(outerbase)/new-resource-list.tsx
@@ -0,0 +1,106 @@
+import {
+ MySQLIcon,
+ PostgreIcon,
+ SQLiteIcon,
+} from "@/components/icons/outerbase-icon";
+import {
+ CloudflareIcon,
+ DigitalOceanIcon,
+ NeonIcon,
+ RQLiteIcon,
+ StarbaseIcon,
+ SupabaseIcon,
+ TursoIcon,
+ ValTownIcon,
+} from "@/components/resource-card/icon";
+import { NewResourceType } from "./new-resource-button";
+
+export function getCreateResourceTypeList(
+ workspaceId?: string
+): NewResourceType[] {
+ return [
+ {
+ name: "Supabase",
+ icon: SupabaseIcon,
+ href: workspaceId ? "" : "",
+ comingSoon: true,
+ thirdParty: true,
+ },
+ {
+ name: "Cloudflare",
+ icon: CloudflareIcon,
+ href: workspaceId ? "" : "",
+ thirdParty: true,
+ comingSoon: true,
+ },
+ {
+ name: "Cloudflare (Manual)",
+ icon: CloudflareIcon,
+ href: workspaceId ? "" : "/local/new-base/cloudflare-d1",
+ },
+ {
+ name: "Neon",
+ icon: NeonIcon,
+ href: workspaceId ? "" : "",
+ comingSoon: true,
+ thirdParty: true,
+ },
+ {
+ name: "StarbaseDB",
+ icon: StarbaseIcon,
+ href: workspaceId
+ ? `/w/${workspaceId}/new-base/starbasedb`
+ : "/local/new-base/starbase",
+ },
+ {
+ name: "Turso/LibSQL (Manual)",
+ icon: TursoIcon,
+ href: workspaceId ? "" : "/local/new-base/turso",
+ },
+ {
+ name: "Turso",
+ icon: TursoIcon,
+ thirdParty: true,
+ comingSoon: true,
+ href: workspaceId
+ ? `/w/${workspaceId}/new-base/turso`
+ : "/local/new-base/turso",
+ },
+ {
+ name: "DigitalOcean",
+ icon: DigitalOceanIcon,
+ comingSoon: true,
+ href: workspaceId ? "" : "",
+ thirdParty: true,
+ },
+ {
+ name: "Postgres",
+ icon: PostgreIcon,
+ href: workspaceId
+ ? `/w/${workspaceId}/new-base/postgres`
+ : "/local/new-base/postgres",
+ },
+ {
+ name: "MySQL",
+ icon: MySQLIcon,
+ href: workspaceId
+ ? `/w/${workspaceId}/new-base/mysql`
+ : "/local/new-base/mysql",
+ },
+ {
+ name: "SQLite",
+ icon: SQLiteIcon,
+ href: workspaceId ? "" : "/local/new-base/sqlite-filehandler",
+ },
+ {
+ name: "val.town",
+ icon: ValTownIcon,
+ href: workspaceId ? "" : "/local/new-base/valtown",
+ },
+ {
+ name: "rqlite",
+ icon: RQLiteIcon,
+ href: workspaceId ? "" : "/local/new-base/rqlite",
+ },
+ ].filter((resource) => resource.href || resource.comingSoon);
+}
diff --git a/src/app/(outerbase)/page.tsx b/src/app/(outerbase)/page.tsx
new file mode 100644
index 00000000..fcb67f60
--- /dev/null
+++ b/src/app/(outerbase)/page.tsx
@@ -0,0 +1,41 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
+import NavigationLayout from "./nav-layout";
+import { ResourceItemList } from "./resource-item-helper";
+import { useSession } from "./session-provider";
+import { useWorkspaces } from "./workspace-provider";
+
+export default function OuterbaseMainPage() {
+ const router = useRouter();
+ const { isLoading: sessionLoading, session } = useSession();
+ const { workspaces, loading: workspaceLoading } = useWorkspaces();
+
+ useEffect(() => {
+ if (sessionLoading) return;
+
+ // Invalid session, go to local connection
+ if (!session) {
+ router.push("/local");
+ }
+
+ if (workspaceLoading) return;
+ if (!workspaces) return;
+
+ // Redirect to the first workspace
+ if (workspaces.length > 0) {
+ router.push(`/w/${workspaces[0].short_name}`);
+ } else {
+ router.push("/local");
+ }
+ }, [session, sessionLoading, workspaceLoading, workspaces, router]);
+
+ return (
+
+
+
+
+
+ );
+}
diff --git a/src/app/(outerbase)/resource-card-loading.tsx b/src/app/(outerbase)/resource-card-loading.tsx
new file mode 100644
index 00000000..e28e5af4
--- /dev/null
+++ b/src/app/(outerbase)/resource-card-loading.tsx
@@ -0,0 +1,13 @@
+export default function ResourceCardLoading() {
+ return (
+
+ );
+}
diff --git a/src/app/(outerbase)/resource-item-helper.tsx b/src/app/(outerbase)/resource-item-helper.tsx
new file mode 100644
index 00000000..071564d4
--- /dev/null
+++ b/src/app/(outerbase)/resource-item-helper.tsx
@@ -0,0 +1,284 @@
+import { Input } from "@/components/orbit/input";
+import { MenuBar } from "@/components/orbit/menu-bar";
+import ResourceCard from "@/components/resource-card";
+import {
+ getDatabaseColor,
+ getDatabaseFriendlyName,
+ getDatabaseIcon,
+ getDatabaseVisual,
+} from "@/components/resource-card/utils";
+import {
+ DropdownMenuItem,
+ DropdownMenuSeparator,
+} from "@/components/ui/dropdown-menu";
+import { timeSince } from "@/lib/utils-datetime";
+import {
+ OuterbaseAPIBase,
+ OuterbaseAPIDashboard,
+ OuterbaseAPIWorkspace,
+} from "@/outerbase-cloud/api-type";
+import {
+ CalendarDots,
+ MagnifyingGlass,
+ Pencil,
+ SortAscending,
+ SortDescending,
+ Trash,
+} from "@phosphor-icons/react";
+import { AnimatePresence, motion } from "framer-motion";
+import { useMemo, useState } from "react";
+import NewResourceButton from "./new-resource-button";
+import ResourceCardLoading from "./resource-card-loading";
+
+export interface ResourceItemProps {
+ id: string;
+ type: string;
+ name: string;
+ href: string;
+ status?: string;
+ lastUsed: number;
+ color?: string;
+}
+
+export function getResourceItemPropsFromBase(
+ workspace: OuterbaseAPIWorkspace,
+ base: OuterbaseAPIBase
+): ResourceItemProps {
+ return {
+ id: base.id,
+ type: base.sources[0]?.type ?? "database",
+ name: base.name,
+ color: getDatabaseColor(base.sources[0]?.type ?? "database"),
+ href: `/w/${workspace.short_name}/${base.short_name}`,
+ lastUsed: base.last_analytics_event?.created_at
+ ? new Date(base.last_analytics_event?.created_at).getTime()
+ : 0,
+ };
+}
+
+export function getResourceItemPropsFromBoard(
+ workspace: OuterbaseAPIWorkspace,
+ board: OuterbaseAPIDashboard
+): ResourceItemProps {
+ return {
+ id: board.id,
+ type: "board",
+ name: board.name,
+ href: `/w/${workspace?.short_name}/board/${board.id}`,
+ lastUsed: new Date(board.updated_at).getTime(),
+ };
+}
+
+type SortedType = "name_asc" | "name_desc" | "recent";
+
+function sortResources(resources: ResourceItemProps[], sorted: SortedType) {
+ return resources.sort((a, b) => {
+ if (sorted === "name_asc") {
+ return (a.name ?? "").localeCompare(b.name ?? "");
+ } else if (sorted === "name_desc") {
+ return (b.name ?? "").localeCompare(a.name ?? "");
+ } else if (sorted === "recent") {
+ return b.lastUsed - a.lastUsed;
+ }
+ return 0;
+ });
+}
+
+export function ResourceItemList({
+ bases,
+ boards,
+ loading,
+ onBoardRemove,
+ onBaseRemove,
+ onBaseEdit,
+ onBoardCreate,
+ workspaceId,
+}: {
+ bases: ResourceItemProps[];
+ boards: ResourceItemProps[];
+ loading?: boolean;
+ onBoardRemove?: (item: ResourceItemProps) => void;
+ onBaseRemove?: (item: ResourceItemProps) => void;
+ onBaseEdit?: (item: ResourceItemProps) => void;
+ onBoardCreate?: () => void;
+ workspaceId?: string;
+}) {
+ const [search, setSearch] = useState("");
+ const [sorted, setSorted] = useState("name_asc");
+
+ const sortedBases = useMemo(() => {
+ return sortResources(bases, sorted);
+ }, [sorted, bases]);
+
+ const sortedBoards = useMemo(() => {
+ return sortResources(boards, sorted);
+ }, [sorted, boards]);
+
+ const baseMatchedCount = useMemo(() => {
+ return bases.filter((base) =>
+ (base.name ?? "").toLowerCase().includes(search.toLowerCase())
+ ).length;
+ }, [bases, search]);
+
+ const boardMatchedCount = useMemo(() => {
+ return boards.filter((board) =>
+ (board.name ?? "").toLowerCase().includes(search.toLowerCase())
+ ).length;
+ }, [boards, search]);
+
+ return (
+ <>
+
+
+
+
+ setSorted(newSortOrder as SortedType)
+ }
+ items={[
+ { value: "name_asc", content: },
+ { value: "name_desc", content: },
+ { value: "recent", content: },
+ ]}
+ />
+
+
+
+ }
+ placeholder="Search"
+ />
+ Boards
+
+
+ {sortedBoards.map((resource: ResourceItemProps) => {
+ const status = `Last updated ${timeSince(resource.lastUsed)} ago`;
+
+ return (
+
+
+ {
+ if (onBoardRemove) onBoardRemove(resource);
+ }}
+ >
+
+ Remove board
+
+
+
+ );
+ })}
+
+
Bases
+ )}
+
+
+ {loading && (
+ <>
+
+
+
+
+
+ )}
+
+ {bases.length > 0 && (
+
+ {sortedBases.map((resource: ResourceItemProps) => {
+ const status = `Last updated ${timeSince(resource.lastUsed)} ago`;
+
+ return (
+
+
+ {
+ if (onBaseEdit) onBaseEdit(resource);
+ }}
+ >
+
+ Edit base
+
+
+ {
+ if (onBaseRemove) onBaseRemove(resource);
+ }}
+ >
+
+ Remove base
+
+
+
+ );
+ })}
+
+ )}
+
Session Loading...
;
- }
+ const logout = useCallback(() => {
+ localStorage.removeItem("session");
+ localStorage.removeItem("ob-token");
+ mutateSession(undefined, false);
+ }, [mutateSession]);
return (
{children}
diff --git a/src/app/(outerbase)/signout/page.tsx b/src/app/(outerbase)/signout/page.tsx
new file mode 100644
index 00000000..1c15335a
--- /dev/null
+++ b/src/app/(outerbase)/signout/page.tsx
@@ -0,0 +1,25 @@
+"use client";
+
+import { Loader } from "@/components/orbit/loader";
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
+import { useSession } from "../session-provider";
+
+export default function SignoutPage() {
+ const { logout } = useSession();
+ const router = useRouter();
+
+ useEffect(() => {
+ if (typeof window === "undefined") return;
+
+ logout();
+ router.push("/");
+ }, [router, logout]);
+
+ return (
+
+ );
+}
diff --git a/src/app/(outerbase)/w/[workspaceId]/[baseId]/page-client.tsx b/src/app/(outerbase)/w/[workspaceId]/[baseId]/page-client.tsx
deleted file mode 100644
index f1d4d8b8..00000000
--- a/src/app/(outerbase)/w/[workspaceId]/[baseId]/page-client.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-"use client";
-
-import OpacityLoading from "@/components/gui/loading-opacity";
-import { Studio } from "@/components/gui/studio";
-import { StudioExtensionManager } from "@/core/extension-manager";
-import {
- createMySQLExtensions,
- createPostgreSQLExtensions,
- createSQLiteExtensions,
-} from "@/core/standard-extension";
-import { getOuterbaseBase } from "@/outerbase-cloud/api";
-import { OuterbaseAPISource } from "@/outerbase-cloud/api-type";
-import { OuterbaseMySQLDriver } from "@/outerbase-cloud/database/mysql";
-import { OuterbasePostgresDriver } from "@/outerbase-cloud/database/postgresql";
-import { OuterbaseSqliteDriver } from "@/outerbase-cloud/database/sqlite";
-import OuterbaseQueryDriver from "@/outerbase-cloud/query-driver";
-import { useEffect, useMemo, useState } from "react";
-
-export default function OuterbaseSourcePageClient({
- workspaceId,
- baseId,
-}: {
- workspaceId: string;
- baseId: string;
-}) {
- const [source, setSource] = useState();
-
- useEffect(() => {
- if (!workspaceId) return;
- if (!baseId) return;
-
- getOuterbaseBase(workspaceId, baseId).then((base) => {
- if (!base) return;
- setSource(base.sources[0]);
- });
- }, [workspaceId, baseId]);
-
- const savedDocDriver = useMemo(() => {
- if (!workspaceId || !source?.id || !baseId) return null;
- return new OuterbaseQueryDriver(workspaceId, baseId, source.id);
- }, [workspaceId, baseId, source?.id]);
-
- const [outerbaseDriver, extensions] = useMemo(() => {
- if (!workspaceId || !source) return [null, null];
-
- const dialect = source.type;
- const outerbaseConfig = {
- workspaceId,
- sourceId: source.id,
- baseId: "",
- token: localStorage.getItem("ob-token") ?? "",
- };
-
- if (dialect === "postgres") {
- return [
- new OuterbasePostgresDriver(outerbaseConfig),
- new StudioExtensionManager(createPostgreSQLExtensions()),
- ];
- } else if (dialect === "mysql") {
- return [
- new OuterbaseMySQLDriver(outerbaseConfig),
- new StudioExtensionManager(createMySQLExtensions()),
- ];
- }
-
- return [
- new OuterbaseSqliteDriver(outerbaseConfig),
- new StudioExtensionManager(createSQLiteExtensions()),
- ];
- }, [workspaceId, source]);
-
- if (!outerbaseDriver || !savedDocDriver) {
- return ;
- }
-
- return (
-
- );
-}
diff --git a/src/app/(outerbase)/w/[workspaceId]/[baseId]/page.tsx b/src/app/(outerbase)/w/[workspaceId]/[baseId]/page.tsx
index b2908d20..727c9ad7 100644
--- a/src/app/(outerbase)/w/[workspaceId]/[baseId]/page.tsx
+++ b/src/app/(outerbase)/w/[workspaceId]/[baseId]/page.tsx
@@ -1,24 +1,101 @@
-import ClientOnly from "@/components/client-only";
-import OuterbaseSourcePageClient from "./page-client";
+"use client";
-interface OuterbaseSourcePageProps {
- params: Promise<{
+import { Studio } from "@/components/gui/studio";
+import PageLoading from "@/components/page-loading";
+import { StudioExtensionManager } from "@/core/extension-manager";
+import {
+ createMySQLExtensions,
+ createPostgreSQLExtensions,
+ createSQLiteExtensions,
+} from "@/core/standard-extension";
+import DataCatalogExtension from "@/extensions/data-catalog";
+import { getOuterbaseBase } from "@/outerbase-cloud/api";
+import { OuterbaseAPISource } from "@/outerbase-cloud/api-type";
+import DataCatalogOuterbaseDriver from "@/outerbase-cloud/data-catalog-driver";
+import { OuterbaseMySQLDriver } from "@/outerbase-cloud/database/mysql";
+import { OuterbasePostgresDriver } from "@/outerbase-cloud/database/postgresql";
+import { OuterbaseSqliteDriver } from "@/outerbase-cloud/database/sqlite";
+import OuterbaseQueryDriver from "@/outerbase-cloud/query-driver";
+import { useParams } from "next/navigation";
+import { useEffect, useMemo, useState } from "react";
+
+export default function OuterbaseSourcePage() {
+ const { workspaceId, baseId } = useParams<{
workspaceId: string;
baseId: string;
- }>;
-}
+ }>();
+ const [name, setName] = useState("");
+ const [source, setSource] = useState();
+
+ useEffect(() => {
+ if (!workspaceId) return;
+ if (!baseId) return;
+
+ getOuterbaseBase(workspaceId, baseId).then((base) => {
+ if (!base) return;
+ setSource(base.sources[0]);
+ setName(base.name);
+ });
+ }, [workspaceId, baseId]);
+
+ const savedDocDriver = useMemo(() => {
+ if (!workspaceId || !source?.id || !baseId) return null;
+ return new OuterbaseQueryDriver(workspaceId, baseId, source.id);
+ }, [workspaceId, baseId, source?.id]);
+
+ const [outerbaseDriver, extensions] = useMemo(() => {
+ if (!workspaceId || !source) return [null, null];
+
+ const dialect = source.type;
+ const outerbaseConfig = {
+ workspaceId,
+ sourceId: source.id,
+ baseId,
+ token: localStorage.getItem("ob-token") ?? "",
+ };
+
+ const outerbaseSpecifiedDrivers = [
+ new DataCatalogExtension(new DataCatalogOuterbaseDriver(outerbaseConfig)),
+ ];
+
+ if (dialect === "postgres") {
+ return [
+ new OuterbasePostgresDriver(outerbaseConfig),
+ new StudioExtensionManager([
+ ...createPostgreSQLExtensions(),
+ ...outerbaseSpecifiedDrivers,
+ ]),
+ ];
+ } else if (dialect === "mysql") {
+ return [
+ new OuterbaseMySQLDriver(outerbaseConfig),
+ new StudioExtensionManager([
+ ...createMySQLExtensions(),
+ ...outerbaseSpecifiedDrivers,
+ ]),
+ ];
+ }
+
+ return [
+ new OuterbaseSqliteDriver(outerbaseConfig),
+ new StudioExtensionManager([
+ ...createSQLiteExtensions(),
+ ...outerbaseSpecifiedDrivers,
+ ]),
+ ];
+ }, [workspaceId, source, baseId]);
-export default async function OuterbaseSourcePage(
- props: OuterbaseSourcePageProps
-) {
- const params = await props.params;
+ if (!outerbaseDriver || !savedDocDriver) {
+ return Loading Base ...;
+ }
return (
-
-
-
+
);
}
diff --git a/src/app/(outerbase)/w/[workspaceId]/billing/page.tsx b/src/app/(outerbase)/w/[workspaceId]/billing/page.tsx
new file mode 100644
index 00000000..85114a4b
--- /dev/null
+++ b/src/app/(outerbase)/w/[workspaceId]/billing/page.tsx
@@ -0,0 +1,14 @@
+"use client";
+import NavigationHeader from "@/app/(outerbase)/nav-header";
+import NavigationLayout from "@/app/(outerbase)/nav-layout";
+
+export default function WorkspaceBillingPage() {
+ return (
+
+
+
+
Billing
+
+
+ );
+}
diff --git a/src/app/(outerbase)/w/[workspaceId]/board/[boardId]/page-client.tsx b/src/app/(outerbase)/w/[workspaceId]/board/[boardId]/page-client.tsx
deleted file mode 100644
index 78b65fde..00000000
--- a/src/app/(outerbase)/w/[workspaceId]/board/[boardId]/page-client.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-"use client";
-
-export default function BoardPageClient({
- workspaceId,
- boardId,
-}: {
- workspaceId: string;
- boardId: string;
-}) {
- return (
-
- {workspaceId} {boardId}
-
- );
-}
diff --git a/src/app/(outerbase)/w/[workspaceId]/board/[boardId]/page.tsx b/src/app/(outerbase)/w/[workspaceId]/board/[boardId]/page.tsx
index 253e83f1..779ae602 100644
--- a/src/app/(outerbase)/w/[workspaceId]/board/[boardId]/page.tsx
+++ b/src/app/(outerbase)/w/[workspaceId]/board/[boardId]/page.tsx
@@ -1,19 +1,114 @@
-import ClientOnly from "@/components/client-only";
-import BoardPageClient from "./page-client";
+"use client";
-interface BoardPageProps {
- params: Promise<{ workspaceId: string; boardId: string }>;
+import NavigationDashboardLayout from "@/app/(outerbase)/nav-board-layout";
+import { useWorkspaces } from "@/app/(outerbase)/workspace-provider";
+import Board, { DashboardProps } from "@/components/board";
+import { Loader } from "@/components/orbit/loader";
+import { WEBSITE_NAME } from "@/const";
+import OuterbaseBoardStorageDriver from "@/drivers/board-storage/outerbase";
+
+import { getOuterbaseDashboard } from "@/outerbase-cloud/api";
+import { OuterbaseAPIDashboardDetail } from "@/outerbase-cloud/api-type";
+import OuterbaseBoardSourceDriver from "@/outerbase-cloud/database-source";
+import { useOuterbaseDashboardList } from "@/outerbase-cloud/hook";
+import { useParams } from "next/navigation";
+import { useMemo, useState } from "react";
+import useSWR, { KeyedMutator } from "swr";
+
+function BoardPageEditor({
+ initialValue,
+}: {
+ initialValue: OuterbaseAPIDashboardDetail;
+ mutate: KeyedMutator;
+}) {
+ const { boardId } = useParams<{
+ workspaceId: string;
+ boardId: string;
+ }>();
+ const { currentWorkspace } = useWorkspaces();
+ const [interval, setIntervals] = useState(0);
+
+ const boardSources = useMemo(() => {
+ if (!currentWorkspace) return;
+ return new OuterbaseBoardSourceDriver(currentWorkspace);
+ }, [currentWorkspace]);
+
+ const storageDriver = useMemo(() => {
+ if (!currentWorkspace) return;
+ return new OuterbaseBoardStorageDriver(
+ currentWorkspace.short_name,
+ boardId
+ );
+ }, [boardId, currentWorkspace]);
+
+ const [value, setValue] = useState(initialValue);
+ const [filter, setFilter] = useState({});
+
+ if (!boardSources) {
+ return Loading Workspace....
;
+ }
+
+ return (
+
+ );
}
-export default async function BoardPage(props: BoardPageProps) {
- const params = await props.params;
+export default function BoardPage() {
+ const { workspaceId, boardId } = useParams<{
+ boardId: string;
+ workspaceId: string;
+ }>();
+ const { data, mutate } = useSWR(`board-${boardId}`, () => {
+ return getOuterbaseDashboard(workspaceId, boardId);
+ });
+
+ const { currentWorkspace, loading: workspaceLoading } = useWorkspaces();
+ const { data: dashboardList, isLoading: dashboardLoading } =
+ useOuterbaseDashboardList();
+
+ const dashboards = useMemo(() => {
+ if (!currentWorkspace) return [];
+ if (!dashboardList) return [];
+
+ const tmp = (dashboardList ?? []).filter(
+ (board) =>
+ board.workspace_id === currentWorkspace.id && board.base_id === null
+ );
+
+ tmp.sort((a, b) => a.name.localeCompare(b.name));
+ return tmp.map((board) => {
+ return {
+ id: board.id,
+ name: board.name,
+ href: `/w/${currentWorkspace.short_name}/board/${board.id}`,
+ };
+ });
+ }, [dashboardList, currentWorkspace]);
return (
-
-
-
+
+ {data?.name ?? WEBSITE_NAME}
+
+ {data ? (
+
+ ) : (
+
+ )}
+
+
);
}
diff --git a/src/app/(outerbase)/w/[workspaceId]/dialog-base-delete.tsx b/src/app/(outerbase)/w/[workspaceId]/dialog-base-delete.tsx
new file mode 100644
index 00000000..86a30c61
--- /dev/null
+++ b/src/app/(outerbase)/w/[workspaceId]/dialog-base-delete.tsx
@@ -0,0 +1,78 @@
+import CopyableText from "@/components/copyable-text";
+import { createDialog } from "@/components/create-dialog";
+import LabelInput from "@/components/label-input";
+import { Button } from "@/components/ui/button";
+import {
+ DialogDescription,
+ DialogFooter,
+ DialogHeader,
+ DialogTitle,
+} from "@/components/ui/dialog";
+import { deleteOuterbaseBase } from "@/outerbase-cloud/api";
+import { LucideLoader } from "lucide-react";
+import { useCallback, useState } from "react";
+
+export const deleteBaseDialog = createDialog<{
+ workspaceId: string;
+ baseId: string;
+ baseName: string;
+}>(({ close, baseName, workspaceId, baseId }) => {
+ const [loading, setLoading] = useState(false);
+ const [name, setName] = useState("");
+
+ const deleteClicked = useCallback(() => {
+ if (name !== baseName) return;
+
+ setLoading(true);
+
+ deleteOuterbaseBase(workspaceId, baseId)
+ .then(() => {
+ close(undefined);
+ })
+ .finally(() => {
+ setLoading(false);
+ });
+ }, [name, workspaceId, baseId, close, baseName]);
+
+ return (
+ <>
+
+ Confirm deletion of {baseName}
+
+ All saved queries, dashboards, definitions and any other contributions
+ made to your Base will be deleted. This action is permanent and{" "}
+ cannot
+ be undone.
+
+
+
+
+
+
+
+
+
setName(e.currentTarget.value)}
+ />
+
+ setName(e.currentTarget.value)}
+ />
+
+
+
+
+
+
+
+ );
+});
diff --git a/src/app/(outerbase)/w/[workspaceId]/dialog-board-delete.tsx b/src/app/(outerbase)/w/[workspaceId]/dialog-board-delete.tsx
new file mode 100644
index 00000000..8caea7e8
--- /dev/null
+++ b/src/app/(outerbase)/w/[workspaceId]/dialog-board-delete.tsx
@@ -0,0 +1,77 @@
+import CopyableText from "@/components/copyable-text";
+import { createDialog } from "@/components/create-dialog";
+import LabelInput from "@/components/label-input";
+import { Button } from "@/components/ui/button";
+import {
+ DialogDescription,
+ DialogFooter,
+ DialogHeader,
+ DialogTitle,
+} from "@/components/ui/dialog";
+import { deleteOuterbaseDashboard } from "@/outerbase-cloud/api";
+import { LucideLoader } from "lucide-react";
+import { useCallback, useState } from "react";
+
+export const deleteBoardDialog = createDialog<{
+ workspaceId: string;
+ boardId: string;
+ boardName: string;
+}>(({ close, boardName, workspaceId, boardId }) => {
+ const [loading, setLoading] = useState(false);
+ const [name, setName] = useState("");
+
+ const deleteClicked = useCallback(() => {
+ if (name !== boardName) return;
+
+ setLoading(true);
+
+ deleteOuterbaseDashboard(workspaceId, boardId)
+ .then(() => {
+ close(undefined);
+ })
+ .finally(() => {
+ setLoading(false);
+ });
+ }, [name, workspaceId, boardId, close, boardName]);
+
+ return (
+ <>
+
+ Confirm deletion of board {boardName}
+
+ All saved charts and any other contributions made to your Dashboard
+ will be deleted. This action is permanent and cannot{" "}
+ be undone.
+
+
+
+
+
+
+
+
+
setName(e.currentTarget.value)}
+ />
+ Invalid driver
;
+ }
+
+ return (
+ <>
+
+
+
+
+
Connect to {getDatabaseFriendlyName(driver)} database
+
+
+ {error && (
+
+ {error}
+
+ )}
+
+
+
+
+
+
+
+
+
Unknown page
;
+}
diff --git a/src/app/(outerbase)/w/[workspaceId]/page-client.tsx b/src/app/(outerbase)/w/[workspaceId]/page-client.tsx
deleted file mode 100644
index 2d822a2d..00000000
--- a/src/app/(outerbase)/w/[workspaceId]/page-client.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-"use client";
-
-import { ButtonGroup, ButtonGroupItem } from "@/components/button-group";
-import { Toolbar } from "@/components/gui/toolbar";
-import ResourceCard from "@/components/resource-card";
-import {
- getDatabaseFriendlyName,
- getDatabaseIcon,
- getDatabaseVisual,
-} from "@/components/resource-card/utils";
-import { BoardVisual } from "@/components/resource-card/visual";
-import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
-import { getOuterbaseDashboardList } from "@/outerbase-cloud/api";
-import {
- CalendarDots,
- ChartBar,
- SortAscending,
- SortDescending,
-} from "@phosphor-icons/react";
-import { useParams } from "next/navigation";
-import useSWR from "swr";
-import { NavigationBar } from "../../navigation";
-import { useWorkspaces } from "../../workspace-provider";
-
-export default function WorkspaceListPageClient() {
- const { workspaces } = useWorkspaces();
- const { workspaceId } = useParams<{ workspaceId: string }>();
-
- const { data: boards } = useSWR(
- `/workspace/${workspaceId}/boards`,
- () => {
- return getOuterbaseDashboardList(workspaceId);
- },
- {
- revalidateIfStale: false,
- revalidateOnFocus: false,
- revalidateOnReconnect: false,
- }
- );
-
- const bases =
- workspaces.find(
- (workspace) =>
- workspace.short_name === workspaceId || workspace.id === workspaceId
- )?.bases ?? [];
-
- return (
-
-
-
-
-
-
-
- All
- Bases
- Boards
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Board
-
- {(boards?.items ?? [])
- .filter((board) => board.base_id === null)
- .map((board) => (
-
- ))}
-
-
-
Base
-
-
- {bases.map((base) => (
-
- Remove
-
- ))}
-
-
-
+
+
+
+
);
}
diff --git a/src/app/(outerbase)/w/[workspaceId]/redirect-valid-workspace.ts b/src/app/(outerbase)/w/[workspaceId]/redirect-valid-workspace.ts
new file mode 100644
index 00000000..b20afd13
--- /dev/null
+++ b/src/app/(outerbase)/w/[workspaceId]/redirect-valid-workspace.ts
@@ -0,0 +1,24 @@
+"use client";
+import { useParams, useRouter } from "next/navigation";
+import { useEffect } from "react";
+import { useWorkspaces } from "../../workspace-provider";
+
+export default function useRedirectValidWorkspace() {
+ const { workspaceId } = useParams();
+ const { currentWorkspace, workspaces, loading } = useWorkspaces();
+ const router = useRouter();
+
+ useEffect(() => {
+ // If the current workspace is not found, redirect to the first workspace
+ if (loading) return;
+ if (!workspaceId) return;
+ if (workspaceId === "local-workspace") return;
+ if (typeof window === "undefined") return;
+
+ if (!currentWorkspace) {
+ if (workspaces?.length) {
+ router.replace(`/w/${workspaces[0].short_name}`);
+ }
+ }
+ }, [loading, workspaces, currentWorkspace, workspaceId, router]);
+}
diff --git a/src/app/(outerbase)/w/[workspaceId]/settings/delete.tsx b/src/app/(outerbase)/w/[workspaceId]/settings/delete.tsx
new file mode 100644
index 00000000..b5075281
--- /dev/null
+++ b/src/app/(outerbase)/w/[workspaceId]/settings/delete.tsx
@@ -0,0 +1,121 @@
+import { useWorkspaces } from "@/app/(outerbase)/workspace-provider";
+import CopyableText from "@/components/copyable-text";
+import { createDialog } from "@/components/create-dialog";
+import LabelInput from "@/components/label-input";
+import { Button } from "@/components/orbit/button";
+import {
+ DialogDescription,
+ DialogFooter,
+ DialogHeader,
+ DialogTitle,
+} from "@/components/ui/dialog";
+import { OuterbaseAPIWorkspace } from "@/outerbase-cloud/api-type";
+import { deleteOuterbaseWorkspace } from "@/outerbase-cloud/api-workspace";
+import { useRouter } from "next/navigation";
+import { useCallback, useState } from "react";
+
+function DeleteWorkspaceDialog({
+ workspace,
+ close,
+}: {
+ workspace: OuterbaseAPIWorkspace;
+ close: (value: boolean) => void;
+}) {
+ const [loading, setLoading] = useState(false);
+ const [name, setName] = useState("");
+
+ const onDeletedClicked = useCallback(() => {
+ setLoading(true);
+ deleteOuterbaseWorkspace(workspace.id)
+ .then(() => {
+ close(true);
+ })
+ .finally(() => {
+ setLoading(false);
+ });
+ }, [close, workspace]);
+
+ return (
+ <>
+
+ Confirm deletion of {workspace.name}
+
+
+
+ Deleting this workspace will delete all Bases and revoke all connections
+ made to your databases. All members will lose access. This action is
+ permanent and cannot be undone.
+
+
+
+
+
+
+
+
+
+ );
+}
+
+const deleteWorkspaceDialog = createDialog<
+ {
+ workspace: OuterbaseAPIWorkspace;
+ },
+ boolean
+>(
+ ({ workspace, close }) => {
+ return ;
+ },
+ { defaultValue: false, slot: "workspace" }
+);
+
+export default function WorkspaceDeleteSection({
+ workspace,
+}: {
+ workspace: OuterbaseAPIWorkspace;
+}) {
+ const router = useRouter();
+ const { refreshWorkspace } = useWorkspaces();
+
+ const onDeleteClicked = useCallback(async () => {
+ const success = await deleteWorkspaceDialog.show({ workspace });
+ if (success) {
+ refreshWorkspace().then(() => router.push("/"));
+ }
+ }, [workspace, router, refreshWorkspace]);
+
+ return (
+
+
Delete workspace
+
+ This will delete all Bases within this workspace. All members will lose
+ access.
+
+
+
+
+
+
+
Gateway
+
+
+ Securely access private network databases without modifying your
+ firewall or VPN
+
+
+
+
+
+
+
+
Members
+
+
+
+
Workspace settings
+
+ {currentWorkspace ? (
+ <>
+
+ {/*
+
*/}
+
+
+ ) : (
+
+
+ Loading workspace...
+
+ )}
+
-
-
-
-
-
- Unlock the full potential
-
-
-
- {WEBSITE_NAME} is free and doesn't require login. However,
- logged-in users get extra features:
-
-
-
- -
- Remote storage and{" "}
-
- syncing of connections
- {" "}
- and saved queries across devices
-
- -
- Database connection{" "}
-
- sharing and collaboration
-
-
- - Attachment uploads
- - More features coming soon
-
-
-
-
-
-
Login to your account
-
- {GITHUB_LOGIN_SUPPORT && (
-
-
- Continue with Github
-
- )}
-
- {GOOGLE_LOGIN_SUPPORT && (
-
-
- Continue with Google
-
- )}
-
-
-
-
-
-
-
-
- Powerful Database Client
-
-
- {WEBSITE_NAME} is a fully-featured, lightweight GUI client for
- managing Turso, LibSQL, Cloudflare D1, rqlite, MySQL, and
- PostgreSQL. It runs entirely in your browser, so there's no
- need to download anything.
-
-
-
-
-
-
-
-
-
-
- Supporting Drivers
-
-
-
- We support a variety of databases, with more to come in the future.
-
-
-
-
-
- SQLite
-
-
-
-
- PostgreSQL
- Beta
-
-
-
-
- MySQL
- Beta
-
-
-
-
- LibSQL
-
-
-
-
-
- Modern Design and
- Intuitive Interface
-
-
-
- Sleek modern design meets a thoughtfully crafted, intuitive user
- interface for a seamless experience.
-
-
-
-
-
-
-
- Powerful Data Editor
-
-
-
- The handy data editor allows you to add, delete, and edit
- information. Any changes you make in the data editor are saved on
- your device and can be submitted all at once.
-
-
-
-
-
-
-
- Saved Your Query
-
-
-
- {WEBSITE_NAME} allows you to save your queries and organize them
- into folders, with the ability to sync across multiple devices.
-
-
-
-
-
-
-
- Writing and Running SQL
-
-
-
- {WEBSITE_NAME} features a user-friendly query editor equipped with
- auto-completion and function hint tooltips. It allows you to execute
- multiple queries simultaneously and view their results efficiently.
-
-
-
-
-
-
-
- Create and Edit Table
-
-
-
- {WEBSITE_NAME} allows you to quickly create, modify, and remove
- table columns with just a few clicks without writing any SQL.
-
-
-
-
-
Community
-
-
- Join our community for the latest updates, roadmap insights, and
- discussions on the future of {WEBSITE_NAME}.
-
-
-
-
-
- Github
-
-
-
- Discord
-
-
-
- Twitter
-
-
-
-
-
- and much much more...
-
-
-
- {WEBSITE_NAME} has many features and is regularly updated. Since it
- is an{" "}
-
- open-source
- {" "}
- project, you can{" "}
-
- request new features
- {" "}
- or even extend them yourself.
-
-
-
-
Playground
-
- A robust SQLite editor available directly in your browser. Explore and
- practice SQLite with ease. Begin with a blank database or choose from
- a selection of sample datasets.
-
-
-
-
-
-
-
- Launch in-memory SQLite
-
- inside the browser
-
-
-
-
-
-
-
Existing Dataset
-
Preload the database with existing dataset.
-
- {templateList.map((t) => {
- return (
-
-
{t.name}
-
{t.summary}
-
-
- Explore
-
-
-
- );
- })}
-
-
Something wrong
;
- }
-
- return (
-
- );
-}
diff --git a/src/app/(theme)/client/r/page.tsx b/src/app/(theme)/client/r/page.tsx
deleted file mode 100644
index 920a13f6..00000000
--- a/src/app/(theme)/client/r/page.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import type { SavedConnectionLabel } from "@/app/(theme)/connect/saved-connection-storage";
-import { get_database } from "@/db";
-import { database } from "@/db/schema";
-import { getSessionFromCookie } from "@/lib/auth";
-import { and, eq, isNotNull } from "drizzle-orm";
-import ClientPageBody from "./page-client";
-import ClientOnly from "@/components/client-only";
-
-interface RemoteSessionPageProps {
- searchParams: Promise<{ p: string }>;
-}
-
-export default async function RemoteSessionPage(props: RemoteSessionPageProps) {
- const searchParams = await props.searchParams;
- const { session } = await getSessionFromCookie();
-
- if (!session) {
- return Something wrong
;
- }
-
- const db = get_database();
- const databaseId = searchParams?.p;
- const databaseInfo = await db.query.database.findFirst({
- where: and(eq(database.id, databaseId), isNotNull(database.id)),
- });
-
- if (!databaseInfo) {
- return Not found
;
- }
-
- return (
-
-
-
- );
-}
diff --git a/src/app/(theme)/client/s/[[...driver]]/page-client.tsx b/src/app/(theme)/client/s/[[...driver]]/page-client.tsx
index 233a6e60..2fcb2a9e 100644
--- a/src/app/(theme)/client/s/[[...driver]]/page-client.tsx
+++ b/src/app/(theme)/client/s/[[...driver]]/page-client.tsx
@@ -1,49 +1,31 @@
"use client";
-import { SavedConnectionLocalStorage } from "@/app/(theme)/connect/saved-connection-storage";
-import RqliteDriver from "@/drivers/rqlite-driver";
-import TursoDriver from "@/drivers/turso-driver";
-import ValtownDriver from "@/drivers/valtown-driver";
-import { useSearchParams } from "next/navigation";
-import { useMemo } from "react";
+import {
+ updateLocalConnectionUsed,
+ useLocalConnection,
+} from "@/app/(outerbase)/local/hooks";
import MyStudio from "@/components/my-studio";
+import { createLocalDriver } from "@/drivers/helpers";
import IndexdbSavedDoc from "@/drivers/saved-doc/indexdb-saved-doc";
-import CloudflareD1Driver from "@/drivers/cloudflare-d1-driver";
-import StarbaseDriver from "@/drivers/starbase-driver";
+import { useSearchParams } from "next/navigation";
+import { useEffect, useMemo } from "react";
export default function ClientPageBody() {
const params = useSearchParams();
- const conn = useMemo(() => {
- const connectionParams = params.get("p");
- if (!connectionParams) return null;
+ const baseId = params.get("p") ?? "";
+ const { data: conn } = useLocalConnection(baseId);
- const conn = SavedConnectionLocalStorage.get(connectionParams);
- return conn;
- }, [params]);
+ useEffect(() => {
+ if (!baseId) return;
+ updateLocalConnectionUsed(baseId).then().catch();
+ }, [baseId]);
const driver = useMemo(() => {
if (!conn) return null;
- if (conn.driver === "rqlite") {
- return new RqliteDriver(
- conn.config.url,
- conn.config.username,
- conn.config.password
- );
- } else if (conn.driver === "valtown") {
- return new ValtownDriver(conn.config.token);
- } else if (conn.driver === "cloudflare-d1") {
- return new CloudflareD1Driver("/proxy/d1", {
- Authorization: "Bearer " + conn.config.token,
- "x-account-id": conn.config.username ?? "",
- "x-database-id": conn.config.database ?? "",
- });
- } else if (conn.driver === "starbase") {
- return new StarbaseDriver("/proxy/starbase", {
- Authorization: "Bearer " + (conn.config.token ?? ""),
- "x-starbase-url": conn.config.url ?? "",
- });
- }
- return new TursoDriver(conn.config.url, conn.config.token, true);
+ const config = conn.content;
+ if (!config) return null;
+
+ return createLocalDriver(config);
}, [conn]);
const docDriver = useMemo(() => {
@@ -60,8 +42,8 @@ export default function ClientPageBody() {
);
}
diff --git a/src/app/(theme)/connect/connection-list.tsx b/src/app/(theme)/connect/connection-list.tsx
deleted file mode 100644
index 1563c4ad..00000000
--- a/src/app/(theme)/connect/connection-list.tsx
+++ /dev/null
@@ -1,268 +0,0 @@
-"use client";
-import { Button } from "@/components/ui/button";
-import {
- Dispatch,
- SetStateAction,
- useCallback,
- useEffect,
- useMemo,
- useState,
-} from "react";
-import SaveConnection from "./saved-connection";
-import {
- SavedConnectionItem,
- SavedConnectionLocalStorage,
- SupportedDriver,
-} from "@/app/(theme)/connect/saved-connection-storage";
-import EditSavedConnection from "./saved-edit-connection";
-import RemoveSavedConnection from "./saved-remove-connection";
-import ConnectionItemCard from "./saved-connection-card";
-import { getDatabases } from "@/lib/api/fetch-databases";
-import { User } from "lucia";
-import QuickConnect from "./quick-connect";
-import { LucideChevronDown, LucideSearch } from "lucide-react";
-import DriverDropdown from "./driver-dropdown";
-import { cn } from "@/lib/utils";
-
-function ConnectionListSection({
- data,
- name,
- search,
- onRemove,
- onEdit,
-}: Readonly<{
- search: string;
- data: SavedConnectionItem[];
- name?: string;
- onRemove: Dispatch>;
- onEdit: Dispatch>;
-}>) {
- const body = useMemo(() => {
- const filteredData = data.filter((d) =>
- d.name.toLowerCase().includes(search.toLowerCase())
- );
-
- if (filteredData.length === 0)
- return (
-
- {search
- ? `There is no record with '${search}'`
- : "There is no base. Please add new base"}
-
- );
-
- return (
-
- {filteredData.map((conn) => {
- return (
- {
- onRemove(conn);
- }}
- onEdit={() => {
- onEdit(conn);
- }}
- />
- );
- })}
-
- );
- }, [name, data, search, onRemove, onEdit]);
-
- return (
- <>
- {name && (
- {name}
- )}
- {body}
-
- );
-}
-
-export default function ConnectionList({
- user,
-}: Readonly<{ user: User | null }>) {
- const [search, setSearch] = useState("");
- const [quickConnect, setQuickConnect] = useState(
- null
- );
- const [showAddConnection, setShowAddConnection] =
- useState(null);
- const [removeConnection, setRemoveConnection] =
- useState();
- const [editConnection, setEditConnection] = useState();
- const [localSavedConns, setLocalSavedConns] = useState(
- []
- );
-
- const [remoteSavedConns, setRemoteSavedConns] = useState<
- SavedConnectionItem[]
- >([]);
-
- useEffect(() => {
- setLocalSavedConns(SavedConnectionLocalStorage.getList());
- if (user) getDatabases().then((r) => setRemoteSavedConns(r.databases));
- }, [setLocalSavedConns, setRemoteSavedConns, user]);
-
- // ---------------------------------------------
- // Remove the connection handlers
- // ---------------------------------------------
- const onRemoveConnectionClose = useCallback(() => {
- setRemoveConnection(undefined);
- }, [setRemoveConnection]);
-
- const onRemoveConnectionComplete = useCallback(
- (conn: SavedConnectionItem) => {
- if (conn.storage === "local") {
- setLocalSavedConns(SavedConnectionLocalStorage.getList());
- } else {
- setRemoteSavedConns((prev) => prev.filter((r) => r.id !== conn.id));
- }
-
- onRemoveConnectionClose();
- },
- [setLocalSavedConns, onRemoveConnectionClose, setRemoteSavedConns]
- );
-
- // ---------------------------------------------
- // Add new connection handlers
- // ---------------------------------------------
- const onSaveComplete = useCallback(
- (savedConn: SavedConnectionItem) => {
- if (savedConn.storage === "remote") {
- setRemoteSavedConns((prev) => [savedConn, ...prev]);
- } else {
- setLocalSavedConns(SavedConnectionLocalStorage.getList());
- }
- setShowAddConnection(null);
- },
- [setLocalSavedConns, setRemoteSavedConns, setShowAddConnection]
- );
-
- // ---------------------------------------------
- // Edit connection handlers
- // ---------------------------------------------
- const onEditComplete = useCallback(
- (savedConn: SavedConnectionItem) => {
- if (savedConn.storage === "remote") {
- setRemoteSavedConns((prev) =>
- prev.map((r) => {
- if (r.id === savedConn.id) return savedConn;
- return r;
- })
- );
- } else {
- setLocalSavedConns(SavedConnectionLocalStorage.getList());
- }
-
- setEditConnection(undefined);
- },
- [setLocalSavedConns, setEditConnection, setRemoteSavedConns]
- );
-
- let dialogComponent: JSX.Element | null = null;
-
- // ---------------------------------------------
- // Display Part
- // ---------------------------------------------
- if (editConnection) {
- dialogComponent = (
- {
- setEditConnection(undefined);
- }}
- conn={editConnection}
- storage={editConnection.storage}
- onSaveComplete={onEditComplete}
- />
- );
- }
-
- if (showAddConnection) {
- dialogComponent = (
- setShowAddConnection(null)}
- onSaveComplete={onSaveComplete}
- />
- );
- }
-
- if (quickConnect) {
- dialogComponent = (
- setQuickConnect(null)}
- />
- );
- }
-
- if (removeConnection) {
- dialogComponent = (
-
- );
- }
-
- return (
-
-
-
- Bases
-
-
-
-
-
-
-
-
setSearch(e.currentTarget.value)}
- type="text"
- className="bg-inherit p-2 pl-2 pr-2 outline-hidden text-sm h-full grow"
- placeholder="Search base name"
- />
-
-
-
-
-
-
-
-
-
-
-
-
- {dialogComponent}
-
-
-
- {user && (
-
- )}
-