mirror of
https://github.com/Portabase/portabase.git
synced 2026-07-14 11:16:13 +02:00
Merge branch 'main' into dev
This commit is contained in:
charlesgauthereau
@@ -7,7 +7,7 @@ import { motion, useInView, type SpringOptions, type UseInViewOptions } from 'mo
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
const githubButtonVariants = cva(
|
||||
'cursor-pointer relative overflow-hidden will-change-transform backface-visibility-hidden transform-gpu transition-transform duration-200 ease-out hover:scale-105 group whitespace-nowrap focus-visible:outline-hidden inline-flex items-center justify-center whitespace-nowrap font-medium ring-offset-background disabled:pointer-events-none disabled:opacity-60 [&_svg]:shrink-0',
|
||||
'cursor-pointer relative overflow-hidden will-change-transform backface-visibility-hidden transform-gpu group whitespace-nowrap focus-visible:outline-hidden inline-flex items-center justify-center whitespace-nowrap font-medium ring-offset-background disabled:pointer-events-none disabled:opacity-60 [&_svg]:shrink-0',
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
|
||||
@@ -8,7 +8,7 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
|
||||
type={type}
|
||||
data-slot="input"
|
||||
className={cn(
|
||||
"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
|
||||
"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex w-full min-w-0 rounded-md border bg-transparent px-4 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
|
||||
"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
|
||||
"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
||||
className
|
||||
|
||||
@@ -374,7 +374,7 @@ function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
|
||||
data-slot="sidebar-content"
|
||||
data-sidebar="content"
|
||||
className={cn(
|
||||
"flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
|
||||
"flex min-h-0 flex-1 flex-col gap-2 overflow-auto scrollbar-hide group-data-[collapsible=icon]:overflow-hidden",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
|
||||
@@ -41,9 +41,6 @@ export const AuthLogoSection = () => {
|
||||
|
||||
/>
|
||||
)}
|
||||
<span className="absolute bottom-8 right-5 text-sm text-muted-foreground" style={style}>
|
||||
v{env.NEXT_PUBLIC_PROJECT_VERSION}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -68,7 +68,7 @@ export const ForgotPasswordForm = (props: ForgotPasswordFormProps) => {
|
||||
/>
|
||||
|
||||
<div className="flex flex-col items-center gap-y-6 w-full">
|
||||
<ButtonWithLoading className="mt-2 w-full" isPending={mutation.isPending}>
|
||||
<ButtonWithLoading className="mt-2 w-full h-11" isPending={mutation.isPending}>
|
||||
Send reset link
|
||||
</ButtonWithLoading>
|
||||
<Link href="/login" className="group flex items-center text-sm hover:underline">
|
||||
|
||||
@@ -113,7 +113,7 @@ export const LoginForm = (props: loginFormProps) => {
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<ButtonWithLoading className="mt-2" isPending={mutation.isPending}>
|
||||
<ButtonWithLoading className="mt-2 h-11" isPending={mutation.isPending}>
|
||||
Login
|
||||
</ButtonWithLoading>
|
||||
</Form>
|
||||
|
||||
@@ -82,7 +82,7 @@ export const ResetPasswordForm = (props: ResetPasswordFormProps) => {
|
||||
/>
|
||||
|
||||
<div className="flex flex-col items-center gap-y-6 w-full">
|
||||
<ButtonWithLoading className="mt-2 w-full" isPending={mutation.isPending}>
|
||||
<ButtonWithLoading className="mt-2 w-full h-11" isPending={mutation.isPending}>
|
||||
Reset
|
||||
</ButtonWithLoading>
|
||||
<Link href="/login" className="group flex items-center text-sm hover:underline">
|
||||
|
||||
@@ -55,7 +55,7 @@ export const RegisterForm = (props: registerFormProps) => {
|
||||
<CardHeader>
|
||||
<div className="grid gap-2 text-center mb-2">
|
||||
<h1 className="text-3xl font-bold">Create an account</h1>
|
||||
<p className="text-balance text-muted-foreground">Enter your informations bellow to register</p>
|
||||
<p className="text-balance text-muted-foreground">Enter your informations below to register</p>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
@@ -138,7 +138,7 @@ export const RegisterForm = (props: registerFormProps) => {
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<Button type="submit" disabled={mutation.isPending}>
|
||||
<Button type="submit" className="h-11" disabled={mutation.isPending}>
|
||||
Sign up
|
||||
</Button>
|
||||
<div className="mt-4 text-center text-sm">
|
||||
|
||||
@@ -47,7 +47,7 @@ export const ResetPasswordForm = ({token}: ResetPasswordFormProps) => {
|
||||
<CardHeader>
|
||||
<div className="grid gap-2 text-center mb-2">
|
||||
<h1 className="text-3xl font-bold">Reset Password</h1>
|
||||
<p className="text-balance text-muted-foreground">Fill information bellow to change your
|
||||
<p className="text-balance text-muted-foreground">Fill information below to change your
|
||||
password</p>
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
||||
@@ -34,7 +34,7 @@ export const GitHubStarsButtonCustom = () => {
|
||||
<GithubButton
|
||||
initialStars={0}
|
||||
targetStars={stars}
|
||||
label="Github Stars"
|
||||
label=""
|
||||
size="sm"
|
||||
separator={true}
|
||||
roundStars={true}
|
||||
|
||||
@@ -15,6 +15,8 @@ export type paginationNavigationProps = {
|
||||
export const PaginationNavigation = (props: paginationNavigationProps) => {
|
||||
const { className, totalPages, currentPage, goToPage, goToPrevPage, goToNextPage, maxVisiblePages = 3 } = props;
|
||||
|
||||
if (totalPages <= 1) return null;
|
||||
|
||||
return (
|
||||
<Pagination className={cn("", className)}>
|
||||
<PaginationContent>
|
||||
|
||||
@@ -14,6 +14,10 @@ interface tablePaginationProps {
|
||||
export function TablePagination(props: tablePaginationProps) {
|
||||
const {className, table, maxVisiblePages = 3, pageSizeOptions = [10, 20, 30, 40, 50]} = props;
|
||||
|
||||
const totalPages = table.getPageCount();
|
||||
|
||||
if (totalPages <= 1) return null;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn("flex gap-x-4", className)}
|
||||
|
||||
+1
-1
@@ -136,7 +136,7 @@ export const StorageGoogleDriveForm = ({form}: StorageGoogleDriveFormProps) => {
|
||||
<input type="hidden" {...form.register("config.refreshToken")} />
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<Button type="button" onClick={handleConnect}>
|
||||
<Button type="button" variant={"secondary"} className="hover:cursor-pointer" onClick={handleConnect}>
|
||||
{isConnected ? "Reconnect Google Drive" : "Connect Google Drive"}
|
||||
</Button>
|
||||
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
"use client";
|
||||
|
||||
import {Input} from "@/components/ui/input";
|
||||
import {Label} from "@/components/ui/label";
|
||||
import {Button} from "@/components/ui/button";
|
||||
import {Copy, Check} from "lucide-react";
|
||||
import {Copy, Check, Eye, EyeOff, Terminal, Key, Info} from "lucide-react";
|
||||
import {useState} from "react";
|
||||
import {copyToClipboardWithMeta} from "@/components/wrappers/common/button/copy-button";
|
||||
import {Card, CardContent, CardDescription, CardHeader, CardTitle} from "@/components/ui/card";
|
||||
|
||||
export type AgentCardKeyProps = {
|
||||
edgeKey: string;
|
||||
@@ -15,74 +15,131 @@ export type AgentCardKeyProps = {
|
||||
export const AgentCardKey = ({edgeKey, agentName}: AgentCardKeyProps) => {
|
||||
const [isCopiedKey, setIsCopiedKey] = useState(false);
|
||||
const [isCopiedCommand, setIsCopiedCommand] = useState(false);
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
|
||||
const command = `portabase agent "${agentName}" --key ${edgeKey}`;
|
||||
const maskedKey = "••••••••••••••••••••••••••••••••";
|
||||
|
||||
const handleCopy = async (text: string, setter: (v: boolean) => void) => {
|
||||
await copyToClipboardWithMeta(text);
|
||||
setter(true);
|
||||
setTimeout(() => setter(false), 2000);
|
||||
};
|
||||
|
||||
const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {
|
||||
event.target.select();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="grid gap-6 py-2">
|
||||
<div className="space-y-4">
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label className="text-sm font-semibold text-muted-foreground uppercase tracking-wider">
|
||||
1. Registration Key
|
||||
</Label>
|
||||
<div className="flex items-center gap-2">
|
||||
<Input
|
||||
readOnly
|
||||
value={edgeKey}
|
||||
onFocus={handleFocus}
|
||||
className="font-mono text-xs bg-muted/30 focus-visible:ring-1 cursor-pointer"
|
||||
/>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={() => handleCopy(edgeKey, setIsCopiedKey)}
|
||||
className="shrink-0"
|
||||
type="button"
|
||||
>
|
||||
{isCopiedKey ? <Check className="h-4 w-4 text-green-500" /> : <Copy className="h-4 w-4" />}
|
||||
</Button>
|
||||
</div>
|
||||
<p className="text-[11px] text-muted-foreground">
|
||||
Use this key for manual configuration of your agent.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-col gap-4 py-2">
|
||||
<Card className="border-muted/60 shadow-none py-0">
|
||||
<CardHeader className="px-4 pt-4">
|
||||
<CardTitle className="text-sm font-semibold flex items-center gap-2 uppercase tracking-tight">
|
||||
CLI Setup
|
||||
</CardTitle>
|
||||
<CardDescription className="text-xs leading-relaxed">
|
||||
To setup your agent using the CLI, copy the command below and paste it in your terminal.
|
||||
Make sure you have the PortaBase CLI installed. If not, you can <a href="https://portabase.io/docs/cli" target="_blank" className="underline hover:text-primary">install it here</a>.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="px-4 pb-4 space-y-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="relative flex-1">
|
||||
<Input
|
||||
readOnly
|
||||
value={isVisible ? command : `portabase agent "${agentName}" --key ${maskedKey}`}
|
||||
onFocus={(e) => {
|
||||
setIsVisible(true);
|
||||
handleCopy(command, setIsCopiedCommand);
|
||||
e.currentTarget.select();
|
||||
}}
|
||||
onClick={(e) => e.currentTarget.select()}
|
||||
onBlur={() => {
|
||||
setIsVisible(false);
|
||||
setIsCopiedCommand(false);
|
||||
}}
|
||||
className="font-mono text-xs bg-muted/30 h-10 pr-10 cursor-pointer"
|
||||
/>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setIsVisible(!isVisible);
|
||||
}}
|
||||
className="absolute right-1 top-1.5 h-7 w-7"
|
||||
type="button"
|
||||
>
|
||||
{isVisible ? <EyeOff className="h-3.5 w-3.5" /> : <Eye className="h-3.5 w-3.5" />}
|
||||
</Button>
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => handleCopy(command, setIsCopiedCommand)}
|
||||
className="shrink-0 gap-2 h-10 px-4"
|
||||
type="button"
|
||||
>
|
||||
{isCopiedCommand ? (
|
||||
<><Check className="h-4 w-4 text-green-500" /></>
|
||||
) : (
|
||||
<><Copy className="h-4 w-4" /></>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div className="flex flex-col gap-2 pt-2">
|
||||
<Label className="text-sm font-semibold text-muted-foreground uppercase tracking-wider">
|
||||
2. Automatic Setup (CLI)
|
||||
</Label>
|
||||
<div className="flex items-center gap-2">
|
||||
<Input
|
||||
readOnly
|
||||
value={command}
|
||||
onFocus={handleFocus}
|
||||
className="font-mono text-xs bg-muted/30 focus-visible:ring-1 cursor-pointer"
|
||||
/>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={() => handleCopy(command, setIsCopiedCommand)}
|
||||
className="shrink-0"
|
||||
type="button"
|
||||
>
|
||||
{isCopiedCommand ? <Check className="h-4 w-4 text-green-500" /> : <Copy className="h-4 w-4" />}
|
||||
</Button>
|
||||
</div>
|
||||
<p className="text-[11px] text-muted-foreground">
|
||||
Run this command on your server to automatically register the agent.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Card className="border-muted/60 shadow-none py-0">
|
||||
<CardHeader className="px-4 pt-4">
|
||||
<CardTitle className="text-sm font-semibold flex items-center gap-2 uppercase tracking-tight">
|
||||
Manual Setup
|
||||
</CardTitle>
|
||||
<CardDescription className="text-xs leading-relaxed">
|
||||
Use this key to manually configure your agent in your configuration file.
|
||||
If you need help for manual configuration, you can follow our guide in the <a href="https://portabase.io/docs" target="_blank" className="underline hover:text-primary">documentation</a>.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="px-4 pb-4 space-y-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="relative flex-1">
|
||||
<Input
|
||||
readOnly
|
||||
value={isVisible ? edgeKey : maskedKey}
|
||||
onFocus={(e) => {
|
||||
setIsVisible(true);
|
||||
handleCopy(edgeKey, setIsCopiedKey);
|
||||
e.currentTarget.select();
|
||||
}}
|
||||
onClick={(e) => e.currentTarget.select()}
|
||||
onBlur={() => {
|
||||
setIsVisible(false);
|
||||
setIsCopiedKey(false);
|
||||
}}
|
||||
className="font-mono text-xs bg-muted/30 h-10 pr-10 cursor-pointer"
|
||||
/>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setIsVisible(!isVisible);
|
||||
}}
|
||||
className="absolute right-1 top-1.5 h-7 w-7 hover:bg-transparent"
|
||||
type="button"
|
||||
>
|
||||
{isVisible ? <EyeOff className="h-3.5 w-3.5" /> : <Eye className="h-3.5 w-3.5" />}
|
||||
</Button>
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => handleCopy(edgeKey, setIsCopiedKey)}
|
||||
className="shrink-0 gap-2 h-10 px-4 "
|
||||
type="button"
|
||||
>
|
||||
{isCopiedKey ? (
|
||||
<><Check className="h-4 w-4 text-green-500" /></>
|
||||
) : (
|
||||
<><Copy className="h-4 w-4" /></>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -6,10 +6,12 @@ import {Card} from "@/components/ui/card";
|
||||
import {ConnectionIndicator} from "@/components/wrappers/common/connection-indicator";
|
||||
import {formatDateLastContact} from "@/utils/date-formatting";
|
||||
import {AgentWith} from "@/db/schema/08_agent";
|
||||
import {Activity, ChevronRight, Copy, Check, Fingerprint, Server, Database} from "lucide-react";
|
||||
import {Activity, ChevronRight, Copy, Check, Fingerprint, Server, Database, AlertCircle} from "lucide-react";
|
||||
import {Badge} from "@/components/ui/badge";
|
||||
import {truncateWords} from "@/utils/text";
|
||||
import {useIsMobile} from "@/hooks/use-mobile";
|
||||
import {Tooltip, TooltipContent, TooltipTrigger} from "@/components/ui/tooltip";
|
||||
import {useAgentUpdateCheck} from "@/features/agents/hooks/use-agent-update-check";
|
||||
|
||||
export type agentCardProps = {
|
||||
data: AgentWith;
|
||||
@@ -20,6 +22,8 @@ export const AgentCard = (props: agentCardProps) => {
|
||||
const isMobile = useIsMobile();
|
||||
const [isCopied, setIsCopied] = useState(false);
|
||||
|
||||
const {newRelease, isUpdateAvailable} = useAgentUpdateCheck(agent.version);
|
||||
|
||||
const handleCopy = (e: React.MouseEvent) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
@@ -44,9 +48,23 @@ export const AgentCard = (props: agentCardProps) => {
|
||||
{isMobile ? truncateWords(agent.name, 2) : agent.name}
|
||||
</h3>
|
||||
{agent.version && (
|
||||
<Badge variant="secondary" className="h-5 px-1.5 text-[10px] font-bold tracking-wider">
|
||||
v{agent.version}
|
||||
</Badge>
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant="secondary" className="h-5 px-1.5 text-[10px] font-bold tracking-wider">
|
||||
v{agent.version}
|
||||
</Badge>
|
||||
{isUpdateAvailable && (
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<div className="flex items-center justify-center w-5 h-5 bg-yellow-500/10 rounded-full border border-yellow-500/20 text-yellow-600">
|
||||
<AlertCircle className="w-3 h-3" />
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>Update available: {newRelease?.tag_name}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
||||
@@ -36,7 +36,7 @@ export const AgentContentPage = ({edgeKey, agent: initialAgent}: AgentContentPag
|
||||
},
|
||||
staleTime: 0,
|
||||
gcTime: 0,
|
||||
refetchInterval: 5000,
|
||||
refetchInterval: 1000,
|
||||
});
|
||||
|
||||
const agent = data?.data ?? initialAgent;
|
||||
@@ -69,7 +69,7 @@ export const AgentContentPage = ({edgeKey, agent: initialAgent}: AgentContentPag
|
||||
|
||||
<div className="space-y-6">
|
||||
<Accordion type="single" collapsible defaultValue={!agent.lastContact ? "registration" : undefined}>
|
||||
<AccordionItem value="registration" className="border rounded-xl px-6 bg-card shadow-sm overflow-hidden transition-all duration-300 data-[state=open]:ring-1 data-[state=open]:ring-primary/20">
|
||||
<AccordionItem value="registration" className="border rounded-xl px-6 bg-card shadow-sm overflow-hidden transition-all duration-300">
|
||||
<AccordionTrigger className="hover:no-underline py-4 group">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-xl font-bold tracking-tight">Registration & Setup</span>
|
||||
@@ -90,7 +90,8 @@ export const AgentContentPage = ({edgeKey, agent: initialAgent}: AgentContentPag
|
||||
</Accordion>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
{agent.databases.length > 0 && (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between px-1">
|
||||
<div className="space-y-1">
|
||||
<h2 className="text-2xl font-bold tracking-tight">Managed Databases</h2>
|
||||
@@ -107,6 +108,7 @@ export const AgentContentPage = ({edgeKey, agent: initialAgent}: AgentContentPag
|
||||
cardItem={AgentDatabaseCard}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,6 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import {useMutation, useQueryClient} from "@tanstack/react-query";
|
||||
import {useRouter} from "next/navigation";
|
||||
import {toast} from "sonner";
|
||||
|
||||
import {backupButtonAction} from "@/components/wrappers/dashboard/backup/backup-button/backup-button.action";
|
||||
@@ -15,6 +16,7 @@ export type BackupButtonProps = {
|
||||
|
||||
export const BackupButton = (props: BackupButtonProps) => {
|
||||
const queryClient = useQueryClient();
|
||||
const router = useRouter();
|
||||
const isMobile = useIsMobile()
|
||||
|
||||
const mutation = useMutation({
|
||||
@@ -23,6 +25,7 @@ export const BackupButton = (props: BackupButtonProps) => {
|
||||
if (backup?.data?.success) {
|
||||
toast.success(backup.data.actionSuccess?.message || "Backup created successfully!");
|
||||
queryClient.invalidateQueries({queryKey: ["database-data", props.databaseId]});
|
||||
router.refresh();
|
||||
} else {
|
||||
toast.error(backup?.serverError || "Failed to create backup.");
|
||||
}
|
||||
|
||||
@@ -1,26 +1,36 @@
|
||||
"use client";
|
||||
|
||||
import {PropsWithChildren, ReactNode, useState} from "react";
|
||||
|
||||
import { useRouter } from "next/navigation";
|
||||
import { CircleUser, LogOut } from "lucide-react";
|
||||
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
|
||||
|
||||
import { LogOut, User } from "lucide-react";
|
||||
|
||||
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
|
||||
|
||||
import { signOut } from "@/lib/auth/auth-client";
|
||||
|
||||
import {ProfileModal} from "@/components/wrappers/dashboard/common/profile/profile-modal";
|
||||
import {Account, Session, User} from "@/db/schema/02_user";
|
||||
|
||||
import {Account, Session, User as UserType} from "@/db/schema/02_user";
|
||||
|
||||
import {AuthProviderConfig} from "../../../../../../portabase.config";
|
||||
|
||||
export type LoggedInDropdownProps = PropsWithChildren<{
|
||||
user: User;
|
||||
user: UserType;
|
||||
sessions: Session[];
|
||||
currentSession: Session;
|
||||
accounts: Account[];
|
||||
children: ReactNode;
|
||||
providers: AuthProviderConfig[]
|
||||
|
||||
}>;
|
||||
|
||||
|
||||
|
||||
export const LoggedInDropdown = ({ user, sessions, currentSession, accounts, children, providers }: LoggedInDropdownProps) => {
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
|
||||
return (
|
||||
@@ -34,34 +44,50 @@ export const LoggedInDropdown = ({ user, sessions, currentSession, accounts, chi
|
||||
onOpenChange={setIsModalOpen}
|
||||
providers={providers}
|
||||
/>
|
||||
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>{children}</DropdownMenuTrigger>
|
||||
<DropdownMenuContent side="top" className="min-w-[var(--radix-popper-anchor-width)]">
|
||||
<DropdownMenuItem onClick={() => setIsModalOpen(!isModalOpen)}>
|
||||
<div className="flex justify-start items-center gap-2">
|
||||
<CircleUser size={16} />
|
||||
<span>Account</span>
|
||||
</div>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
onClick={async () => {
|
||||
await signOut({
|
||||
fetchOptions: {
|
||||
onSuccess: () => {
|
||||
router.push("/login");
|
||||
},
|
||||
},
|
||||
});
|
||||
}}
|
||||
>
|
||||
<div className="flex justify-start items-center gap-2">
|
||||
<LogOut size={16} className="text-red-500" />
|
||||
<span className="text-red-500">Logout</span>
|
||||
</div>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>{children}</DropdownMenuTrigger>
|
||||
<DropdownMenuContent
|
||||
className="w-[var(--radix-popper-anchor-width)] rounded-xl border-2 border-border bg-popover shadow-none p-1"
|
||||
align="start"
|
||||
side="top"
|
||||
sideOffset={8}
|
||||
>
|
||||
<DropdownMenuItem
|
||||
onClick={() => setIsModalOpen(!isModalOpen)}
|
||||
className="group gap-2 p-1 cursor-pointer rounded-lg mb-1 transition-colors focus:bg-accent hover:bg-accent/50 border border-transparent"
|
||||
>
|
||||
<div className="flex size-9 items-center justify-center rounded-md border border-border bg-muted/50 shadow-sm transition-all group-hover:shadow-md group-hover:bg-background">
|
||||
<User size={18} className="text-muted-foreground group-hover:text-foreground transition-colors" />
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<span className="text-sm font-medium leading-none">Account Settings</span>
|
||||
</div>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
className="group gap-2 p-1 cursor-pointer rounded-lg transition-colors focus:bg-red-50 dark:focus:bg-red-950/20 border border-transparent text-red-600 focus:text-red-600"
|
||||
onClick={async () => {
|
||||
await signOut({
|
||||
fetchOptions: {
|
||||
onSuccess: () => {
|
||||
router.push("/login");
|
||||
},
|
||||
},
|
||||
});
|
||||
}}
|
||||
>
|
||||
<div className="flex size-9 items-center justify-center rounded-md border border-red-100 bg-red-50/50 dark:border-red-900/30 dark:bg-red-950/20 shadow-sm transition-all group-hover:shadow-md">
|
||||
<LogOut size={18} className="text-red-500" />
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<span className="text-sm font-medium leading-none">Logout</span>
|
||||
</div>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</>
|
||||
|
||||
);
|
||||
|
||||
};
|
||||
|
||||
|
||||
|
||||
@@ -42,4 +42,4 @@ export function AppSidebar() {
|
||||
<SideBarFooterCredit/>
|
||||
</Sidebar>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -7,20 +7,17 @@ import {
|
||||
Layers,
|
||||
ChartArea,
|
||||
ShieldHalf,
|
||||
Building, UserRoundCog, Mail, PackageOpen, Logs, Megaphone, Blocks, Warehouse
|
||||
Building, UserRoundCog, Mail, PackageOpen, Logs, Megaphone, Blocks, Warehouse, BookOpen
|
||||
} from "lucide-react";
|
||||
import {SidebarGroupItem, SidebarMenuCustomBase} from "@/components/wrappers/dashboard/common/sidebar/menu-sidebar";
|
||||
import {authClient, useSession} from "@/lib/auth/auth-client";
|
||||
import {authClient} from "@/lib/auth/auth-client";
|
||||
|
||||
|
||||
export const SidebarMenuCustomMain = () => {
|
||||
|
||||
const BASE_URL = `/dashboard`;
|
||||
|
||||
const {data: activeOrganization} = authClient.useActiveOrganization();
|
||||
const {data: organizations} = authClient.useListOrganizations();
|
||||
const {data: session, isPending, error} = authClient.useSession();
|
||||
const member = authClient.useActiveMember();
|
||||
|
||||
if (isPending) return null;
|
||||
|
||||
@@ -107,6 +104,23 @@ export const SidebarMenuCustomMain = () => {
|
||||
});
|
||||
}
|
||||
|
||||
items.push(
|
||||
{
|
||||
label: "Resources",
|
||||
type: "list",
|
||||
group_content: [
|
||||
{
|
||||
title: "Documentation",
|
||||
url: "https://portabase.io/docs",
|
||||
icon: BookOpen,
|
||||
type: "item",
|
||||
redirect: true,
|
||||
not_from_base_url: true,
|
||||
}
|
||||
],
|
||||
},
|
||||
)
|
||||
|
||||
|
||||
return <SidebarMenuCustomBase baseUrl={BASE_URL} items={items}/>;
|
||||
};
|
||||
};
|
||||
@@ -16,4 +16,4 @@ export const SideBarFooterCredit = (props: SideBarFooterCreditProps) => {
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
};
|
||||
@@ -16,10 +16,9 @@ import {useMutation, useQueryClient} from "@tanstack/react-query";
|
||||
import {BackupStorageWith} from "@/db/schema/14_storage-backup";
|
||||
import {TooltipProvider} from "@/components/ui/tooltip";
|
||||
import {getChannelIcon} from "@/components/wrappers/dashboard/admin/channels/helpers/common";
|
||||
import {truncateWords} from "@/utils/text";
|
||||
import {useIsMobile} from "@/hooks/use-mobile";
|
||||
import {Badge} from "@/components/ui/badge";
|
||||
import {getStatusColor, getStatusIcon} from "@/components/wrappers/dashboard/admin/notifications/logs/columns";
|
||||
import {useRouter} from "next/navigation";
|
||||
import {
|
||||
createRestorationBackupAction, deleteBackupAction, deleteBackupStorageAction,
|
||||
downloadBackupAction
|
||||
@@ -39,9 +38,9 @@ type BackupActionsFormProps = {
|
||||
export const BackupActionsForm = ({backup, action}: BackupActionsFormProps) => {
|
||||
|
||||
const filteredBackupStorages = backup.storages?.filter((storage) => storage.deletedAt === null) ?? []
|
||||
const isMobile = useIsMobile();
|
||||
const {closeModal} = useBackupModal();
|
||||
const queryClient = useQueryClient();
|
||||
const router = useRouter();
|
||||
|
||||
const form = useZodForm({
|
||||
schema: BackupActionsSchema,
|
||||
@@ -75,6 +74,7 @@ export const BackupActionsForm = ({backup, action}: BackupActionsFormProps) => {
|
||||
if (inner?.success) {
|
||||
toast.success(inner.actionSuccess?.message);
|
||||
queryClient.invalidateQueries({queryKey: ["database-data", backup.databaseId]});
|
||||
router.refresh();
|
||||
if (action === "download") {
|
||||
const url = inner.value
|
||||
if (typeof url === "string") {
|
||||
@@ -92,6 +92,7 @@ export const BackupActionsForm = ({backup, action}: BackupActionsFormProps) => {
|
||||
if (action === "delete") {
|
||||
toast.success("Backup deleted successfully.")
|
||||
queryClient.invalidateQueries({queryKey: ["database-data", backup.databaseId]});
|
||||
router.refresh();
|
||||
closeModal()
|
||||
} else {
|
||||
toast.error(inner?.actionError?.message ?? "An error occurred.");
|
||||
@@ -113,6 +114,7 @@ export const BackupActionsForm = ({backup, action}: BackupActionsFormProps) => {
|
||||
if (inner?.success) {
|
||||
toast.success(inner.actionSuccess?.message);
|
||||
queryClient.invalidateQueries({queryKey: ["database-data", backup.databaseId]});
|
||||
router.refresh();
|
||||
closeModal()
|
||||
} else {
|
||||
toast.error(inner?.actionError?.message);
|
||||
@@ -175,24 +177,26 @@ export const BackupActionsForm = ({backup, action}: BackupActionsFormProps) => {
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex-1 min-w-0 flex flex-col gap-1">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
{getChannelIcon(storage.storageChannel?.provider || "")}
|
||||
<h3 className="font-medium text-foreground">
|
||||
{isMobile ? truncateWords(storage?.storageChannel?.name ?? "", 2) : storage.storageChannel?.name}
|
||||
</h3>
|
||||
<Badge variant="secondary"
|
||||
className="text-xs font-mono">
|
||||
{storage.storageChannel?.provider}
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<div className="flex items-center gap-2 min-w-0">
|
||||
<div className="shrink-0">
|
||||
{getChannelIcon(storage.storageChannel?.provider || "")}
|
||||
</div>
|
||||
<h3 className="font-medium text-foreground truncate">
|
||||
{storage.storageChannel?.name}
|
||||
</h3>
|
||||
<Badge variant="secondary"
|
||||
className="text-xs font-mono shrink-0">
|
||||
{storage.storageChannel?.provider}
|
||||
</Badge>
|
||||
</div>
|
||||
<Badge variant="outline"
|
||||
className={`gap-1.5 shrink-0 ${getStatusColor(storage.status)}`}>
|
||||
{getStatusIcon(storage.status === "success")}
|
||||
<span
|
||||
className="capitalize">{storage.status.toUpperCase()}</span>
|
||||
</Badge>
|
||||
</div>
|
||||
<Badge variant="outline"
|
||||
className={`gap-1.5 ${getStatusColor(storage.status)}`}>
|
||||
{getStatusIcon(storage.status === "success")}
|
||||
<span
|
||||
className="capitalize">{storage.status.toUpperCase()}</span>
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -5,6 +5,8 @@ import {db} from "@/db";
|
||||
import {eq} from "drizzle-orm";
|
||||
import * as drizzleDb from "@/db";
|
||||
import {BackupWith, Restoration} from "@/db/schema/07_database";
|
||||
import {getOrganizationChannels} from "@/db/services/notification-channel";
|
||||
import {getOrganizationStorageChannels} from "@/db/services/storage-channel";
|
||||
|
||||
export const getDatabaseDataAction = userAction
|
||||
.schema(
|
||||
@@ -19,6 +21,9 @@ export const getDatabaseDataAction = userAction
|
||||
where: eq(drizzleDb.schemas.database.id, databaseId),
|
||||
with: {
|
||||
project: true,
|
||||
retentionPolicy: true,
|
||||
alertPolicies: true,
|
||||
storagePolicies: true
|
||||
}
|
||||
});
|
||||
|
||||
@@ -45,10 +50,23 @@ export const getDatabaseDataAction = userAction
|
||||
const successfulBackups = backups.filter(b => b.status === "success").length;
|
||||
const successRate = totalBackups > 0 ? (successfulBackups / totalBackups) * 100 : null;
|
||||
|
||||
let activeOrganizationChannels = [];
|
||||
let activeOrganizationStorageChannels = [];
|
||||
|
||||
if (database?.project?.organizationId) {
|
||||
const organizationChannels = await getOrganizationChannels(database.project.organizationId);
|
||||
activeOrganizationChannels = organizationChannels.filter(channel => channel.enabled);
|
||||
|
||||
const organizationStorageChannels = await getOrganizationStorageChannels(database.project.organizationId);
|
||||
activeOrganizationStorageChannels = organizationStorageChannels.filter(channel => channel.enabled);
|
||||
}
|
||||
|
||||
return {
|
||||
database,
|
||||
backups,
|
||||
restorations,
|
||||
activeOrganizationChannels,
|
||||
activeOrganizationStorageChannels,
|
||||
stats: {
|
||||
totalBackups,
|
||||
availableBackups,
|
||||
|
||||
@@ -14,6 +14,7 @@ import {Switch} from "@/components/ui/switch";
|
||||
import {Card} from "@/components/ui/card";
|
||||
import Link from "next/link";
|
||||
import {useIsMobile} from "@/hooks/use-mobile";
|
||||
import {useRouter} from "next/navigation";
|
||||
import {
|
||||
ChannelKind,
|
||||
getChannelIcon,
|
||||
@@ -48,6 +49,7 @@ export const ChannelPoliciesForm = ({
|
||||
kind
|
||||
}: ChannelPoliciesFormProps) => {
|
||||
const queryClient = useQueryClient();
|
||||
const router = useRouter();
|
||||
const isMobile = useIsMobile();
|
||||
const channelText = getChannelTextBasedOnKind(kind);
|
||||
|
||||
@@ -130,6 +132,7 @@ export const ChannelPoliciesForm = ({
|
||||
onSuccess: () => {
|
||||
toast.success("Policies saved successfully");
|
||||
queryClient.invalidateQueries({queryKey: ["database-data", database.id]});
|
||||
router.refresh();
|
||||
},
|
||||
onError: (error: any) => { toast.error(error.message || "Failed to save policies"); },
|
||||
});
|
||||
|
||||
@@ -8,6 +8,7 @@ import { Label } from "@/components/ui/label";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import { useState } from "react";
|
||||
import { useMutation, useQueryClient } from "@tanstack/react-query";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { toast } from "sonner";
|
||||
import { updateDatabaseBackupPolicyAction } from "@/components/wrappers/dashboard/database/cron-button/cron.action";
|
||||
import {Database} from "@/db/schema/07_database";
|
||||
@@ -18,6 +19,7 @@ export type CronButtonProps = {
|
||||
|
||||
export const CronButton = (props: CronButtonProps) => {
|
||||
const queryClient = useQueryClient();
|
||||
const router = useRouter();
|
||||
const [isSwitched, setIsSwitched] = useState(props.database.backupPolicy !== null);
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
@@ -27,6 +29,7 @@ export const CronButton = (props: CronButtonProps) => {
|
||||
onSuccess: () => {
|
||||
toast.success(`Method updated successfully.`);
|
||||
queryClient.invalidateQueries({ queryKey: ["database-data", props.database.id] });
|
||||
router.refresh();
|
||||
},
|
||||
onError: () => {
|
||||
toast.error(`An error occurred while updating backup method.`);
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import {AdvancedCronSelect} from "./advanced-cron-select";
|
||||
import {updateDatabaseBackupPolicyAction} from "@/components/wrappers/dashboard/database/cron-button/cron.action";
|
||||
import {useMutation, useQueryClient} from "@tanstack/react-query";
|
||||
import {useRouter} from "next/navigation";
|
||||
import {useState} from "react";
|
||||
import {toast} from "sonner";
|
||||
import {Button} from "@/components/ui/button";
|
||||
@@ -15,6 +16,7 @@ export type CronInputProps = {
|
||||
export const CronInput = ({database, onSuccess}: CronInputProps) => {
|
||||
const [cron, setCron] = useState<string>(database.backupPolicy ?? "* * * * *");
|
||||
const queryClient = useQueryClient();
|
||||
const router = useRouter();
|
||||
|
||||
const updateBackupPolicy = useMutation({
|
||||
mutationFn: (value: string) => updateDatabaseBackupPolicyAction({databaseId: database.id, backupPolicy: value}),
|
||||
@@ -22,6 +24,7 @@ export const CronInput = ({database, onSuccess}: CronInputProps) => {
|
||||
toast.success(`Cron updated successfully.`);
|
||||
onSuccess?.()
|
||||
queryClient.invalidateQueries({queryKey: ["database-data", database.id]});
|
||||
router.refresh();
|
||||
},
|
||||
onError: () => {
|
||||
toast.error(`An error occurred while updating cron value.`);
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
|
||||
import {DropZoneFile} from "@/components/wrappers/common/dropzone/dropzone-file";
|
||||
import {useMutation, useQueryClient} from "@tanstack/react-query";
|
||||
import {useRouter} from "next/navigation";
|
||||
import {useState} from "react";
|
||||
import {Loader2} from "lucide-react";
|
||||
import {ButtonWithLoading} from "@/components/wrappers/common/button/button-with-loading";
|
||||
@@ -16,6 +17,7 @@ type UploadRetentionZoneProps = {
|
||||
|
||||
export const UploadBackupZone = ({onSuccessAction, databaseId}: UploadRetentionZoneProps) => {
|
||||
const queryClient = useQueryClient();
|
||||
const router = useRouter();
|
||||
|
||||
const [isProcessing, setIsProcessing] = useState(false);
|
||||
const [file, setFile] = useState<File | null>(null);
|
||||
@@ -37,6 +39,7 @@ export const UploadBackupZone = ({onSuccessAction, databaseId}: UploadRetentionZ
|
||||
toast.success(inner.actionSuccess?.message);
|
||||
onSuccessAction?.()
|
||||
queryClient.invalidateQueries({queryKey: ["database-data", databaseId]});
|
||||
router.refresh();
|
||||
} else {
|
||||
toast.error(inner?.actionError?.message);
|
||||
}
|
||||
@@ -65,7 +68,7 @@ export const UploadBackupZone = ({onSuccessAction, databaseId}: UploadRetentionZ
|
||||
) : (
|
||||
<DropZoneFile
|
||||
accept={acceptDbImportFiles}
|
||||
maxSize={500 * 1024 * 1024}
|
||||
maxSize={2 * 1024 * 1024 * 1024}
|
||||
maxFiles={1}
|
||||
description="Import database backup"
|
||||
fileKind="Database file (.sql, .dump)"
|
||||
|
||||
+3
@@ -11,6 +11,7 @@ import {
|
||||
} from "@/components/ui/form";
|
||||
import {RetentionSettings, RetentionSettingsSchema} from "./backup-retention-settings.schema";
|
||||
import {useMutation, useQueryClient} from "@tanstack/react-query";
|
||||
import {useRouter} from "next/navigation";
|
||||
import {updateOrCreateBackupRetentionPolicyAction} from "./backup-retention-settings.action";
|
||||
import {DatabaseWith, RetentionPolicy} from "@/db/schema/07_database";
|
||||
import {toast} from "sonner";
|
||||
@@ -28,6 +29,7 @@ export type BackupRetentionSettingsFormProps = {
|
||||
|
||||
export const BackupRetentionSettingsForm = ({defaultValues, database}: BackupRetentionSettingsFormProps) => {
|
||||
const queryClient = useQueryClient();
|
||||
const router = useRouter();
|
||||
|
||||
const defaultValuesFormatted: RetentionSettings = {
|
||||
type: defaultValues?.type,
|
||||
@@ -55,6 +57,7 @@ export const BackupRetentionSettingsForm = ({defaultValues, database}: BackupRet
|
||||
onSuccess: () => {
|
||||
toast.success("Retention policy updated successfully.");
|
||||
queryClient.invalidateQueries({queryKey: ["database-data", database.id]});
|
||||
router.refresh();
|
||||
},
|
||||
onError: () => {
|
||||
toast.error("An error occurred while updating retention policy.");
|
||||
|
||||
@@ -18,7 +18,7 @@ import {Skeleton} from "@/components/ui/skeleton"
|
||||
|
||||
export function OrganizationCombobox() {
|
||||
const router = useRouter()
|
||||
const {isMobile, state} = useSidebar()
|
||||
const {state} = useSidebar()
|
||||
const {data: organizations, isPending: isPendingList, refetch} = authClient.useListOrganizations()
|
||||
const {
|
||||
data: activeOrganization,
|
||||
@@ -95,7 +95,7 @@ export function OrganizationCombobox() {
|
||||
</SidebarMenuButton>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent
|
||||
className="min-w-[var(--radix-popper-anchor-width)] rounded-xl border-2 border-border bg-popover shadow-none"
|
||||
className="w-[var(--radix-popper-anchor-width)] rounded-xl border-2 border-border bg-popover shadow-none"
|
||||
align="start"
|
||||
side="bottom"
|
||||
sideOffset={4}
|
||||
@@ -113,7 +113,7 @@ export function OrganizationCombobox() {
|
||||
: "focus:bg-accent hover:bg-accent/50 border border-transparent"
|
||||
)}>
|
||||
<div className={cn(
|
||||
"flex size-9 items-center justify-center rounded-md border shadow-sm transition-all group-hover:shadow-md",
|
||||
"flex size-9 shrink-0 items-center justify-center rounded-md border shadow-sm transition-all group-hover:shadow-md",
|
||||
org.logo ? "bg-transparent border-transparent" : "",
|
||||
isActive && !org.logo ? "bg-primary text-primary-foreground border-primary/30" : "bg-muted/50 border-border"
|
||||
)}>
|
||||
@@ -126,7 +126,7 @@ export function OrganizationCombobox() {
|
||||
)}/>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<div className="flex flex-col gap-0.5 flex-1 min-w-0">
|
||||
<span className={cn(
|
||||
"text-sm max-w-42.5 truncate font-medium leading-none",
|
||||
isActive ? "text-primary" : ""
|
||||
@@ -150,7 +150,7 @@ export function OrganizationCombobox() {
|
||||
className="flex size-9 items-center justify-center rounded-md border border-dashed border-muted-foreground/30 bg-background transition-colors group-hover:border-primary/50 group-hover:bg-primary/5">
|
||||
<Plus className="size-4"/>
|
||||
</div>
|
||||
<div className="font-medium">Create new organization</div>
|
||||
<div className="font-medium">Create organization</div>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
|
||||
@@ -145,7 +145,7 @@ export default function TwoFactorForm({ onSuccess, onSuccessData }: TwoFactorFor
|
||||
/>
|
||||
|
||||
<div className="flex flex-col gap-3 pt-2">
|
||||
<Button type="submit" disabled={isPending}>
|
||||
<Button type="submit" className="h-11" disabled={isPending}>
|
||||
{isPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
|
||||
Verify
|
||||
</Button>
|
||||
|
||||
@@ -21,7 +21,7 @@ export function ProfileAppearance() {
|
||||
}
|
||||
|
||||
function ThemeSelector() {
|
||||
const {theme, setTheme} = useTheme();
|
||||
const {theme} = useTheme();
|
||||
|
||||
|
||||
return (
|
||||
@@ -39,7 +39,6 @@ function ThemeSelector() {
|
||||
isActive ? "border-primary bg-primary/5" : "border-muted/40"
|
||||
)}
|
||||
onClick={async () => {
|
||||
// setTheme(item.value)
|
||||
await authClient.updateUser({theme: item.value});
|
||||
}}
|
||||
>
|
||||
|
||||
@@ -37,6 +37,7 @@ export type DatabaseContentProps = {
|
||||
export const DatabaseContent = (props: DatabaseContentProps) => {
|
||||
const {} = useBackupModal();
|
||||
|
||||
|
||||
const {data} = useQuery({
|
||||
queryKey: ["database-data", props.database.id],
|
||||
queryFn: async () => {
|
||||
@@ -44,12 +45,16 @@ export const DatabaseContent = (props: DatabaseContentProps) => {
|
||||
return result?.data;
|
||||
},
|
||||
initialData: {
|
||||
// TODO : to be patched
|
||||
// @ts-ignore
|
||||
database: {
|
||||
...props.database,
|
||||
project: props.database.project ?? null,
|
||||
},
|
||||
backups: props.backups,
|
||||
restorations: props.restorations,
|
||||
activeOrganizationChannels: props.activeOrganizationChannels,
|
||||
activeOrganizationStorageChannels: props.activeOrganizationStorageChannels,
|
||||
stats: {
|
||||
totalBackups: props.totalBackups,
|
||||
availableBackups: props.availableBackups,
|
||||
@@ -58,12 +63,14 @@ export const DatabaseContent = (props: DatabaseContentProps) => {
|
||||
},
|
||||
staleTime: 0,
|
||||
gcTime: 0,
|
||||
refetchInterval: 5000,
|
||||
refetchInterval: 1000,
|
||||
});
|
||||
|
||||
const database = data?.database ?? props.database;
|
||||
const backups = data?.backups ?? props.backups;
|
||||
const restorations = data?.restorations ?? props.restorations;
|
||||
const activeOrganizationChannels = data?.activeOrganizationChannels ?? props.activeOrganizationChannels;
|
||||
const activeOrganizationStorageChannels = data?.activeOrganizationStorageChannels ?? props.activeOrganizationStorageChannels;
|
||||
const stats = data?.stats ?? {
|
||||
totalBackups: props.totalBackups,
|
||||
availableBackups: props.availableBackups,
|
||||
@@ -91,14 +98,14 @@ export const DatabaseContent = (props: DatabaseContentProps) => {
|
||||
database={database}
|
||||
kind={"notification"}
|
||||
icon={<Megaphone/>}
|
||||
channels={props.activeOrganizationChannels}
|
||||
channels={activeOrganizationChannels}
|
||||
organizationId={props.organizationId}
|
||||
/>
|
||||
<ChannelPoliciesModal
|
||||
database={database}
|
||||
icon={<HardDrive/>}
|
||||
kind={"storage"}
|
||||
channels={props.activeOrganizationStorageChannels}
|
||||
channels={activeOrganizationStorageChannels}
|
||||
organizationId={props.organizationId}
|
||||
/>
|
||||
<ImportModal database={database}/>
|
||||
@@ -116,16 +123,16 @@ export const DatabaseContent = (props: DatabaseContentProps) => {
|
||||
)}
|
||||
|
||||
<PageContent className="flex flex-col w-full h-full">
|
||||
<DatabaseKpi
|
||||
successRate={stats.successRate}
|
||||
database={database}
|
||||
<DatabaseKpi
|
||||
successRate={stats.successRate}
|
||||
database={database}
|
||||
availableBackups={stats.availableBackups}
|
||||
totalBackups={stats.totalBackups}
|
||||
/>
|
||||
<DatabaseBackupActionsModal/>
|
||||
<DatabaseTabs
|
||||
activeMember={props.activeMember}
|
||||
settings={props.settings}
|
||||
<DatabaseTabs
|
||||
activeMember={props.activeMember}
|
||||
settings={props.settings}
|
||||
database={database}
|
||||
isAlreadyRestore={isAlreadyRestore}
|
||||
backups={backups}
|
||||
|
||||
Reference in New Issue
Block a user