The_Great_Archive/dokploy
1
0
Fork 0
mirror of https://github.com/Dokploy/dokploy.git synced 2026-09-12 19:51:00 +05:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

Merge e0ffda82e4 into 853ca33659

Browse Source
This commit is contained in:
Shivam Gupta 2026-09-11 13:11:53 -04:00 committed by GitHub
commit 2abd3e9c37
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
12 changed files with 127 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
apps/dokploy/components/dashboard/application/general/generic/show.tsx
View File

@ -14,6 +14,7 @@ import {
GitIcon,
GitlabIcon,
} from "@/components/icons/data-tools-icons";
import { ScrollFadeContainer } from "@/components/shared/scroll-fade-container";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { api } from "@/utils/api";
@ -153,7 +154,7 @@ export const ShowProviderForm = ({ applicationId }: Props) => {
setSab(e as TabState);
}}
>
<div className="flex flex-row items-center justify-between w-full overflow-auto">
<ScrollFadeContainer className="flex flex-row items-center justify-between w-full">
<TabsList
variant="line"
className="flex gap-4 justify-start bg-transparent"
@ -208,7 +209,7 @@ export const ShowProviderForm = ({ applicationId }: Props) => {
Drop
</TabsTrigger>
</TabsList>
</div>
</ScrollFadeContainer>
<TabsContent value="github" className="w-full p-2">
{githubProviders && githubProviders?.length > 0 ? (

5
apps/dokploy/components/dashboard/compose/general/generic/show.tsx
View File

@ -10,6 +10,7 @@ import {
GitIcon,
GitlabIcon,
} from "@/components/icons/data-tools-icons";
import { ScrollFadeContainer } from "@/components/shared/scroll-fade-container";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { api } from "@/utils/api";
@ -142,7 +143,7 @@ export const ShowProviderFormCompose = ({ composeId }: Props) => {
setSab(e as TabState);
}}
>
<div className="flex flex-row items-center justify-between w-full overflow-auto">
<ScrollFadeContainer className="flex flex-row items-center justify-between w-full">
<TabsList
variant="line"
className="flex gap-4 justify-start bg-transparent"
@ -189,7 +190,7 @@ export const ShowProviderFormCompose = ({ composeId }: Props) => {
Raw
</TabsTrigger>
</TabsList>
</div>
</ScrollFadeContainer>
<TabsContent value="github" className="w-full p-2">
{githubProviders && githubProviders?.length > 0 ? (

84
apps/dokploy/components/shared/scroll-fade-container.tsx Normal file
View File

@ -0,0 +1,84 @@
import { cn } from "@/lib/utils";
import { type RefObject, useEffect, useRef, useState } from "react";
export const useScrollFade = <T extends HTMLElement>(
deps: unknown[] = [],
): [RefObject<T | null>, boolean, boolean] => {
const ref = useRef<T>(null);
const [canScrollLeft, setCanScrollLeft] = useState(false);
const [canScrollRight, setCanScrollRight] = useState(false);
useEffect(() => {
const el = ref.current;
if (!el) return;
const updateFades = () => {
setCanScrollLeft(el.scrollLeft > 0);
setCanScrollRight(
Math.ceil(el.scrollLeft + el.clientWidth) < el.scrollWidth,
);
};
updateFades();
el.addEventListener("scroll", updateFades, { passive: true });
const resizeObserver = new ResizeObserver(updateFades);
resizeObserver.observe(el);
return () => {
el.removeEventListener("scroll", updateFades);
resizeObserver.disconnect();
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, deps);
return [ref, canScrollLeft, canScrollRight];
};
export const ScrollFadeEdges = ({
canScrollLeft,
canScrollRight,
}: {
canScrollLeft: boolean;
canScrollRight: boolean;
}) => (
<>
<div
className={cn(
"pointer-events-none absolute inset-y-0 left-0 w-8 bg-gradient-to-r from-background to-transparent transition-opacity",
canScrollLeft ? "opacity-100" : "opacity-0",
)}
/>
<div
className={cn(
"pointer-events-none absolute inset-y-0 right-0 w-8 bg-gradient-to-l from-background to-transparent transition-opacity",
canScrollRight ? "opacity-100" : "opacity-0",
)}
/>
</>
);
interface Props {
children: React.ReactNode;
className?: string;
}
export const ScrollFadeContainer = ({ children, className }: Props) => {
const [ref, canScrollLeft, canScrollRight] =
useScrollFade<HTMLDivElement>([children]);
return (
<div className="relative min-w-0">
<div
ref={ref}
className={cn("overflow-x-auto no-scrollbar", className)}
>
{children}
</div>
<ScrollFadeEdges
canScrollLeft={canScrollLeft}
canScrollRight={canScrollRight}
/>
</div>
);
};

14
apps/dokploy/components/ui/table.tsx
View File

@ -2,19 +2,31 @@
import type * as React from "react";
import {
ScrollFadeEdges,
useScrollFade,
} from "@/components/shared/scroll-fade-container";
import { cn } from "@/lib/utils";
function Table({ className, ...props }: React.ComponentProps<"table">) {
const [ref, canScrollLeft, canScrollRight] =
useScrollFade<HTMLDivElement>([props.children]);
return (
<div
ref={ref}
data-slot="table-container"
className="relative w-full overflow-x-auto"
className="relative w-full overflow-x-auto no-scrollbar"
>
<table
data-slot="table"
className={cn("w-full caption-bottom text-sm", className)}
{...props}
/>
<ScrollFadeEdges
canScrollLeft={canScrollLeft}
canScrollRight={canScrollRight}
/>
</div>
);
}

5
apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/application/[applicationId].tsx
View File

@ -49,6 +49,7 @@ import {
CardTitle,
} from "@/components/ui/card";
import { Label } from "@/components/ui/label";
import { ScrollFadeContainer } from "@/components/shared/scroll-fade-container";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import {
Tooltip,
@ -241,7 +242,7 @@ const Service = (
router.push(newPath);
}}
>
<div className="flex flex-row items-center justify-between w-full overflow-auto">
<ScrollFadeContainer className="flex flex-row items-center justify-between w-full">
<TabsList className="flex gap-8 max-md:gap-4 justify-start">
<TabsTrigger value="general">General</TabsTrigger>
{permissions?.envVars.read && (
@ -286,7 +287,7 @@ const Service = (
<TabsTrigger value="advanced">Advanced</TabsTrigger>
)}
</TabsList>
</div>
</ScrollFadeContainer>
<TabsContent value="general">
<div className="flex flex-col gap-4 pt-2.5">

5
apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/compose/[composeId].tsx
View File

@ -38,6 +38,7 @@ import { TransferService } from "@/components/dashboard/shared/transfer-service"
import { DashboardLayout } from "@/components/layouts/dashboard-layout";
import { AdvanceBreadcrumb } from "@/components/shared/advance-breadcrumb";
import { StatusTooltip } from "@/components/shared/status-tooltip";
import { ScrollFadeContainer } from "@/components/shared/scroll-fade-container";
import { Badge } from "@/components/ui/badge";
import {
Card,
@ -233,7 +234,7 @@ const Service = (
router.push(newPath);
}}
>
<div className="flex flex-row items-center w-full overflow-auto">
<ScrollFadeContainer className="flex flex-row items-center w-full">
<TabsList className="flex gap-8 max-md:gap-4 justify-start">
<TabsTrigger value="general">General</TabsTrigger>
{permissions?.envVars.read && (
@ -279,7 +280,7 @@ const Service = (
<TabsTrigger value="advanced">Advanced</TabsTrigger>
)}
</TabsList>
</div>
</ScrollFadeContainer>
<TabsContent value="general">
<div className="flex flex-col gap-4 pt-2.5">

5
apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/libsql/[libsqlId].tsx
View File

@ -28,6 +28,7 @@ import { LibsqlIcon } from "@/components/icons/data-tools-icons";
import { DashboardLayout } from "@/components/layouts/dashboard-layout";
import { AdvanceBreadcrumb } from "@/components/shared/advance-breadcrumb";
import { StatusTooltip } from "@/components/shared/status-tooltip";
import { ScrollFadeContainer } from "@/components/shared/scroll-fade-container";
import { Badge } from "@/components/ui/badge";
import {
Card,
@ -193,7 +194,7 @@ const Libsql = (
router.push(newPath, undefined, { shallow: true });
}}
>
<div className="flex flex-row items-center justify-between w-full gap-4 overflow-x-auto">
<ScrollFadeContainer className="flex flex-row items-center justify-between w-full gap-4">
<TabsList
className={cn(
"md:grid md:w-fit max-md:overflow-y-scroll justify-start",
@ -213,7 +214,7 @@ const Libsql = (
<TabsTrigger value="backups">Backups</TabsTrigger>
<TabsTrigger value="advanced">Advanced</TabsTrigger>
</TabsList>
</div>
</ScrollFadeContainer>
<TabsContent value="general">
<div className="flex flex-col gap-4 pt-2.5">

5
apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/mariadb/[mariadbId].tsx
View File

@ -28,6 +28,7 @@ import { MariadbIcon } from "@/components/icons/data-tools-icons";
import { DashboardLayout } from "@/components/layouts/dashboard-layout";
import { AdvanceBreadcrumb } from "@/components/shared/advance-breadcrumb";
import { StatusTooltip } from "@/components/shared/status-tooltip";
import { ScrollFadeContainer } from "@/components/shared/scroll-fade-container";
import { Badge } from "@/components/ui/badge";
import {
Card,
@ -207,7 +208,7 @@ const Mariadb = (
router.push(newPath, undefined, { shallow: true });
}}
>
<div className="flex flex-row items-center justify-between w-full gap-4 overflow-x-auto">
<ScrollFadeContainer className="flex flex-row items-center justify-between w-full gap-4">
<TabsList
className={cn(
"md:grid md:w-fit max-md:overflow-y-scroll justify-start",
@ -238,7 +239,7 @@ const Mariadb = (
<TabsTrigger value="advanced">Advanced</TabsTrigger>
)}
</TabsList>
</div>
</ScrollFadeContainer>
<TabsContent value="general">
<div className="flex flex-col gap-4 pt-2.5">

5
apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/mongo/[mongoId].tsx
View File

@ -28,6 +28,7 @@ import { MongodbIcon } from "@/components/icons/data-tools-icons";
import { DashboardLayout } from "@/components/layouts/dashboard-layout";
import { AdvanceBreadcrumb } from "@/components/shared/advance-breadcrumb";
import { StatusTooltip } from "@/components/shared/status-tooltip";
import { ScrollFadeContainer } from "@/components/shared/scroll-fade-container";
import { Badge } from "@/components/ui/badge";
import {
Card,
@ -207,7 +208,7 @@ const Mongo = (
router.push(newPath, undefined, { shallow: true });
}}
>
<div className="flex flex-row items-center justify-between w-full gap-4 overflow-x-auto">
<ScrollFadeContainer className="flex flex-row items-center justify-between w-full gap-4">
<TabsList
className={cn(
"md:grid md:w-fit max-md:overflow-y-scroll justify-start",
@ -238,7 +239,7 @@ const Mongo = (
<TabsTrigger value="advanced">Advanced</TabsTrigger>
)}
</TabsList>
</div>
</ScrollFadeContainer>
<TabsContent value="general">
<div className="flex flex-col gap-4 pt-2.5">

5
apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/mysql/[mysqlId].tsx
View File

@ -28,6 +28,7 @@ import { MysqlIcon } from "@/components/icons/data-tools-icons";
import { DashboardLayout } from "@/components/layouts/dashboard-layout";
import { AdvanceBreadcrumb } from "@/components/shared/advance-breadcrumb";
import { StatusTooltip } from "@/components/shared/status-tooltip";
import { ScrollFadeContainer } from "@/components/shared/scroll-fade-container";
import { Badge } from "@/components/ui/badge";
import {
Card,
@ -207,7 +208,7 @@ const MySql = (
router.push(newPath, undefined, { shallow: true });
}}
>
<div className="flex flex-row items-center justify-between w-full gap-4 overflow-x-auto">
<ScrollFadeContainer className="flex flex-row items-center justify-between w-full gap-4">
<TabsList
className={cn(
"md:grid md:w-fit max-md:overflow-y-scroll justify-start ",
@ -238,7 +239,7 @@ const MySql = (
<TabsTrigger value="advanced">Advanced</TabsTrigger>
)}
</TabsList>
</div>
</ScrollFadeContainer>
<TabsContent value="general">
<div className="flex flex-col gap-4 pt-2.5">

5
apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/postgres/[postgresId].tsx
View File

@ -28,6 +28,7 @@ import { PostgresqlIcon } from "@/components/icons/data-tools-icons";
import { DashboardLayout } from "@/components/layouts/dashboard-layout";
import { AdvanceBreadcrumb } from "@/components/shared/advance-breadcrumb";
import { StatusTooltip } from "@/components/shared/status-tooltip";
import { ScrollFadeContainer } from "@/components/shared/scroll-fade-container";
import { Badge } from "@/components/ui/badge";
import {
Card,
@ -208,7 +209,7 @@ const Postgresql = (
});
}}
>
<div className="flex flex-row items-center justify-between w-full gap-4 overflow-x-auto">
<ScrollFadeContainer className="flex flex-row items-center justify-between w-full gap-4">
<TabsList
className={cn(
"md:grid md:w-fit max-md:overflow-y-scroll justify-start",
@ -239,7 +240,7 @@ const Postgresql = (
<TabsTrigger value="advanced">Advanced</TabsTrigger>
)}
</TabsList>
</div>
</ScrollFadeContainer>
<TabsContent value="general">
<div className="flex flex-col gap-4 pt-2.5">

5
apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/redis/[redisId].tsx
View File

@ -27,6 +27,7 @@ import { RedisIcon } from "@/components/icons/data-tools-icons";
import { DashboardLayout } from "@/components/layouts/dashboard-layout";
import { AdvanceBreadcrumb } from "@/components/shared/advance-breadcrumb";
import { StatusTooltip } from "@/components/shared/status-tooltip";
import { ScrollFadeContainer } from "@/components/shared/scroll-fade-container";
import { Badge } from "@/components/ui/badge";
import {
Card,
@ -206,7 +207,7 @@ const Redis = (
router.push(newPath, undefined, { shallow: true });
}}
>
<div className="flex flex-row items-center justify-between w-full gap-4 overflow-x-auto">
<ScrollFadeContainer className="flex flex-row items-center justify-between w-full gap-4">
<TabsList
className={cn(
"md:grid md:w-fit max-md:overflow-y-scroll justify-start",
@ -236,7 +237,7 @@ const Redis = (
<TabsTrigger value="advanced">Advanced</TabsTrigger>
)}
</TabsList>
</div>
</ScrollFadeContainer>
<TabsContent value="general">
<div className="flex flex-col gap-4 pt-2.5">