From 1ca965268ea1d9025d7840793bf5694747932492 Mon Sep 17 00:00:00 2001
From: Mauricio Siu <47042324+Siumauricio@users.noreply.github.com>
Date: Sat, 15 Mar 2025 14:29:16 -0600
Subject: [PATCH] feat: add alert block for IP address requirement in database
 credential components

---
 .../general/show-external-mariadb-credentials.tsx   | 13 +++++++++++++
 .../general/show-external-mongo-credentials.tsx     | 13 +++++++++++++
 .../general/show-external-mysql-credentials.tsx     | 13 +++++++++++++
 .../general/show-external-postgres-credentials.tsx  | 13 +++++++++++++
 .../general/show-external-redis-credentials.tsx     | 13 +++++++++++++
 5 files changed, 65 insertions(+)

diff --git a/apps/dokploy/components/dashboard/mariadb/general/show-external-mariadb-credentials.tsx b/apps/dokploy/components/dashboard/mariadb/general/show-external-mariadb-credentials.tsx
index 4a5c43a2..a281f125 100644
--- a/apps/dokploy/components/dashboard/mariadb/general/show-external-mariadb-credentials.tsx
+++ b/apps/dokploy/components/dashboard/mariadb/general/show-external-mariadb-credentials.tsx
@@ -1,5 +1,6 @@
 import { ToggleVisibilityInput } from "@/components/shared/toggle-visibility-input";
 import { Button } from "@/components/ui/button";
+import { AlertBlock } from "@/components/shared/alert-block";
 import {
 	Card,
 	CardContent,
@@ -23,6 +24,7 @@ import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
+import Link from "next/link";
 
 const DockerProviderSchema = z.object({
 	externalPort: z.preprocess((a) => {
@@ -106,6 +108,17 @@ export const ShowExternalMariadbCredentials = ({ mariadbId }: Props) => {
 						</CardDescription>
 					</CardHeader>
 					<CardContent className="flex w-full flex-col gap-4">
+						{!getIp && (
+							<AlertBlock type="warning">
+								You need to set an IP address in your{" "}
+								<Link href="/dashboard/settings" className="text-primary">
+									{data?.serverId
+										? "Remote Servers -> Server -> Edit Server -> Update IP Address"
+										: "Web Server -> Server -> Update Server IP"}
+								</Link>{" "}
+								to fix the database url connection.
+							</AlertBlock>
+						)}
 						<Form {...form}>
 							<form
 								onSubmit={form.handleSubmit(onSubmit)}
diff --git a/apps/dokploy/components/dashboard/mongo/general/show-external-mongo-credentials.tsx b/apps/dokploy/components/dashboard/mongo/general/show-external-mongo-credentials.tsx
index 9fe6e713..b845004f 100644
--- a/apps/dokploy/components/dashboard/mongo/general/show-external-mongo-credentials.tsx
+++ b/apps/dokploy/components/dashboard/mongo/general/show-external-mongo-credentials.tsx
@@ -1,5 +1,6 @@
 import { ToggleVisibilityInput } from "@/components/shared/toggle-visibility-input";
 import { Button } from "@/components/ui/button";
+import { AlertBlock } from "@/components/shared/alert-block";
 import {
 	Card,
 	CardContent,
@@ -23,6 +24,7 @@ import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
+import Link from "next/link";
 
 const DockerProviderSchema = z.object({
 	externalPort: z.preprocess((a) => {
@@ -106,6 +108,17 @@ export const ShowExternalMongoCredentials = ({ mongoId }: Props) => {
 						</CardDescription>
 					</CardHeader>
 					<CardContent className="flex w-full flex-col gap-4">
+						{!getIp && (
+							<AlertBlock type="warning">
+								You need to set an IP address in your{" "}
+								<Link href="/dashboard/settings" className="text-primary">
+									{data?.serverId
+										? "Remote Servers -> Server -> Edit Server -> Update IP Address"
+										: "Web Server -> Server -> Update Server IP"}
+								</Link>{" "}
+								to fix the database url connection.
+							</AlertBlock>
+						)}
 						<Form {...form}>
 							<form
 								onSubmit={form.handleSubmit(onSubmit)}
diff --git a/apps/dokploy/components/dashboard/mysql/general/show-external-mysql-credentials.tsx b/apps/dokploy/components/dashboard/mysql/general/show-external-mysql-credentials.tsx
index 7a0527b1..12b3eb06 100644
--- a/apps/dokploy/components/dashboard/mysql/general/show-external-mysql-credentials.tsx
+++ b/apps/dokploy/components/dashboard/mysql/general/show-external-mysql-credentials.tsx
@@ -1,5 +1,6 @@
 import { ToggleVisibilityInput } from "@/components/shared/toggle-visibility-input";
 import { Button } from "@/components/ui/button";
+import { AlertBlock } from "@/components/shared/alert-block";
 import {
 	Card,
 	CardContent,
@@ -23,6 +24,7 @@ import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
+import Link from "next/link";
 
 const DockerProviderSchema = z.object({
 	externalPort: z.preprocess((a) => {
@@ -106,6 +108,17 @@ export const ShowExternalMysqlCredentials = ({ mysqlId }: Props) => {
 						</CardDescription>
 					</CardHeader>
 					<CardContent className="flex w-full flex-col gap-4">
+						{!getIp && (
+							<AlertBlock type="warning">
+								You need to set an IP address in your{" "}
+								<Link href="/dashboard/settings" className="text-primary">
+									{data?.serverId
+										? "Remote Servers -> Server -> Edit Server -> Update IP Address"
+										: "Web Server -> Server -> Update Server IP"}
+								</Link>{" "}
+								to fix the database url connection.
+							</AlertBlock>
+						)}
 						<Form {...form}>
 							<form
 								onSubmit={form.handleSubmit(onSubmit)}
diff --git a/apps/dokploy/components/dashboard/postgres/general/show-external-postgres-credentials.tsx b/apps/dokploy/components/dashboard/postgres/general/show-external-postgres-credentials.tsx
index dbd57d0b..7643be2d 100644
--- a/apps/dokploy/components/dashboard/postgres/general/show-external-postgres-credentials.tsx
+++ b/apps/dokploy/components/dashboard/postgres/general/show-external-postgres-credentials.tsx
@@ -1,5 +1,6 @@
 import { ToggleVisibilityInput } from "@/components/shared/toggle-visibility-input";
 import { Button } from "@/components/ui/button";
+import { AlertBlock } from "@/components/shared/alert-block";
 import {
 	Card,
 	CardContent,
@@ -23,6 +24,7 @@ import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
+import Link from "next/link";
 
 const DockerProviderSchema = z.object({
 	externalPort: z.preprocess((a) => {
@@ -108,6 +110,17 @@ export const ShowExternalPostgresCredentials = ({ postgresId }: Props) => {
 						</CardDescription>
 					</CardHeader>
 					<CardContent className="flex w-full flex-col gap-4">
+						{!getIp && (
+							<AlertBlock type="warning">
+								You need to set an IP address in your{" "}
+								<Link href="/dashboard/settings" className="text-primary">
+									{data?.serverId
+										? "Remote Servers -> Server -> Edit Server -> Update IP Address"
+										: "Web Server -> Server -> Update Server IP"}
+								</Link>{" "}
+								to fix the database url connection.
+							</AlertBlock>
+						)}
 						<Form {...form}>
 							<form
 								onSubmit={form.handleSubmit(onSubmit)}
diff --git a/apps/dokploy/components/dashboard/redis/general/show-external-redis-credentials.tsx b/apps/dokploy/components/dashboard/redis/general/show-external-redis-credentials.tsx
index 75112cf6..5abf0bc1 100644
--- a/apps/dokploy/components/dashboard/redis/general/show-external-redis-credentials.tsx
+++ b/apps/dokploy/components/dashboard/redis/general/show-external-redis-credentials.tsx
@@ -1,5 +1,6 @@
 import { ToggleVisibilityInput } from "@/components/shared/toggle-visibility-input";
 import { Button } from "@/components/ui/button";
+import { AlertBlock } from "@/components/shared/alert-block";
 import {
 	Card,
 	CardContent,
@@ -23,6 +24,7 @@ import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
+import Link from "next/link";
 
 const DockerProviderSchema = z.object({
 	externalPort: z.preprocess((a) => {
@@ -100,6 +102,17 @@ export const ShowExternalRedisCredentials = ({ redisId }: Props) => {
 						</CardDescription>
 					</CardHeader>
 					<CardContent className="flex w-full flex-col gap-4">
+						{!getIp && (
+							<AlertBlock type="warning">
+								You need to set an IP address in your{" "}
+								<Link href="/dashboard/settings" className="text-primary">
+									{data?.serverId
+										? "Remote Servers -> Server -> Edit Server -> Update IP Address"
+										: "Web Server -> Server -> Update Server IP"}
+								</Link>{" "}
+								to fix the database url connection.
+							</AlertBlock>
+						)}
 						<Form {...form}>
 							<form
 								onSubmit={form.handleSubmit(onSubmit)}