feat(libsql): integrate libsql support in breadcrumb navigation

- Added LibsqlIcon and updated ServiceCollections to include 'libsql'.
- Replaced BreadcrumbSidebar with AdvanceBreadcrumb in the Libsql service page for improved navigation consistency.
- Enhanced SERVICE_QUERY_KEYS and SERVICE_ICONS to accommodate libsql integration.
This commit is contained in:
Mauricio Siu
2026-03-20 00:53:57 -06:00
parent ffd7b80410
commit 0b08fa9a59
2 changed files with 10 additions and 16 deletions

View File

@@ -11,6 +11,7 @@ import {
import { useRouter } from "next/router";
import { type ComponentType, useEffect, useMemo, useState } from "react";
import {
LibsqlIcon,
MariadbIcon,
MongodbIcon,
MysqlIcon,
@@ -58,6 +59,7 @@ type EnvironmentServiceCollections = {
mariadb: (NamedService & { mariadbId: string })[];
redis: (NamedService & { redisId: string })[];
mongo: (NamedService & { mongoId: string })[];
libsql: (NamedService & { libsqlId: string })[];
};
type ServiceCollections = Pick<
@@ -69,6 +71,7 @@ type ServiceCollections = Pick<
| "mariadb"
| "redis"
| "mongo"
| "libsql"
>;
const SERVICE_COLLECTION_KEYS = [
@@ -79,6 +82,7 @@ const SERVICE_COLLECTION_KEYS = [
"mariadb",
"redis",
"mongo",
"libsql",
] as const satisfies ReadonlyArray<keyof ServiceCollections>;
const SERVICE_QUERY_KEYS = [
@@ -89,6 +93,7 @@ const SERVICE_QUERY_KEYS = [
"mariadbId",
"redisId",
"mongoId",
"libsqlId",
] as const;
const SERVICE_ICONS: Record<
@@ -102,6 +107,7 @@ const SERVICE_ICONS: Record<
mariadb: MariadbIcon,
redis: RedisIcon,
mongo: MongodbIcon,
libsql: LibsqlIcon,
};
const getStringQueryParam = (value: string | string[] | undefined) =>
@@ -156,6 +162,7 @@ const extractServicesFromEnvironment = (
...mapServices(servicesByType.mariadb, (item) => item.mariadbId, "mariadb"),
...mapServices(servicesByType.redis, (item) => item.redisId, "redis"),
...mapServices(servicesByType.mongo, (item) => item.mongoId, "mongo"),
...mapServices(servicesByType.libsql, (item) => item.libsqlId, "libsql"),
];
};

View File

@@ -23,7 +23,7 @@ import { ContainerPaidMonitoring } from "@/components/dashboard/monitoring/paid/
import { ShowDatabaseAdvancedSettings } from "@/components/dashboard/shared/show-database-advanced-settings";
import { LibsqlIcon } from "@/components/icons/data-tools-icons";
import { DashboardLayout } from "@/components/layouts/dashboard-layout";
import { BreadcrumbSidebar } from "@/components/shared/breadcrumb-sidebar";
import { AdvanceBreadcrumb } from "@/components/shared/advance-breadcrumb";
import { StatusTooltip } from "@/components/shared/status-tooltip";
import { Badge } from "@/components/ui/badge";
import {
@@ -65,21 +65,8 @@ const Libsql = (
return (
<div className="pb-10">
<UseKeyboardNav forPage="libsql" />
<BreadcrumbSidebar
list={[
{ name: "Projects", href: "/dashboard/projects" },
{
name: data?.environment?.project?.name || "",
},
{
name: data?.environment?.name || "",
href: `/dashboard/project/${projectId}/environment/${environmentId}`,
},
{
name: data?.name || "",
},
]}
/>
<AdvanceBreadcrumb />
<div className="flex flex-col gap-4">
<Head>
<title>