From f9b1194d169b6b692894af2d3ccc1fd37d19a756 Mon Sep 17 00:00:00 2001
From: Mauricio Siu <47042324+Siumauricio@users.noreply.github.com>
Date: Sun, 1 Sep 2024 22:20:06 -0600
Subject: [PATCH] feat: add empty states to git providers

---
 .../dashboard/application/general/generic/show.tsx     |  4 ++--
 .../dashboard/settings/git/show-git-providers.tsx      | 10 ++++++++++
 apps/dokploy/components/icons/data-tools-icons.tsx     |  2 ++
 3 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/apps/dokploy/components/dashboard/application/general/generic/show.tsx b/apps/dokploy/components/dashboard/application/general/generic/show.tsx
index 252d1af7..6b44246a 100644
--- a/apps/dokploy/components/dashboard/application/general/generic/show.tsx
+++ b/apps/dokploy/components/dashboard/application/general/generic/show.tsx
@@ -106,8 +106,8 @@ export const ShowProviderForm = ({ applicationId }: Props) => {
 						{githubProviders && githubProviders?.length > 0 ? (
 							<SaveGithubProvider applicationId={applicationId} />
 						) : (
-							<div className="flex flex-col items-center gap-3">
-								<LockIcon className="size-8 text-muted-foreground" />
+							<div className="flex flex-col items-center gap-3 min-h-[15vh] justify-center">
+								<GithubIcon className="size-8 text-muted-foreground" />
 								<span className="text-base text-muted-foreground">
 									To deploy using GitHub, you need to configure your account
 									first. Please, go to{" "}
diff --git a/apps/dokploy/components/dashboard/settings/git/show-git-providers.tsx b/apps/dokploy/components/dashboard/settings/git/show-git-providers.tsx
index 798eff6c..cffd25cc 100644
--- a/apps/dokploy/components/dashboard/settings/git/show-git-providers.tsx
+++ b/apps/dokploy/components/dashboard/settings/git/show-git-providers.tsx
@@ -4,6 +4,7 @@ import { AddGitlabProvider } from "./gitlab/add-gitlab-provider";
 import {
 	BitbucketIcon,
 	GithubIcon,
+	GitIcon,
 	GitlabIcon,
 } from "@/components/icons/data-tools-icons";
 import { AddGithubProvider } from "./github/add-github-provider";
@@ -49,6 +50,15 @@ export const ShowGitProviders = () => {
 				</CardContent>
 			</Card>
 			<div className="grid gap-4 sm:grid-cols-1 md:grid-cols-1">
+				{data && data.length === 0 && (
+					<div className="flex flex-col items-center gap-3 min-h-[25vh] justify-center">
+						<GitIcon className="size-8" />
+						<span className="text-base text-muted-foreground">
+							No Git Providers found. To add a provider, create a new one such
+							as GitHub, GitLab, or Bitbucket.
+						</span>
+					</div>
+				)}
 				{data?.map((gitProvider, index) => {
 					const isGithub = gitProvider.providerType === "github";
 					const isGitlab = gitProvider.providerType === "gitlab";
diff --git a/apps/dokploy/components/icons/data-tools-icons.tsx b/apps/dokploy/components/icons/data-tools-icons.tsx
index 9e61a8d9..43c2b371 100644
--- a/apps/dokploy/components/icons/data-tools-icons.tsx
+++ b/apps/dokploy/components/icons/data-tools-icons.tsx
@@ -244,6 +244,7 @@ export const DockerIcon = ({ className }: Props) => {
 			viewBox="-.557 117.607 598.543 423.631"
 			width="24"
 			xmlns="http://www.w3.org/2000/svg"
+			className={className}
 		>
 			<g fill="#0091e2">
 				<path d="m592.162 277.804c-1.664-1.37-16.642-12.597-48.815-12.597-8.321 0-16.92.822-25.24 2.191-6.102-41.898-41.327-62.162-42.714-63.257l-8.598-4.93-5.547 7.942c-6.934 10.68-12.204 22.729-15.255 35.052-5.824 23.824-2.219 46.279 9.985 65.447-14.7 8.216-38.553 10.133-43.545 10.406h-393.853c-10.262 0-18.583 8.216-18.583 18.348-.554 33.956 5.27 67.912 17.197 99.951 13.59 35.052 33.838 61.067 59.91 76.95 29.4 17.799 77.383 27.931 131.468 27.931 24.408 0 48.815-2.19 72.946-6.572 33.56-6.025 65.734-17.526 95.412-34.23a260.485 260.485 0 0 0 64.902-52.577c31.342-34.778 49.925-73.663 63.515-108.167h5.547c34.116 0 55.195-13.418 66.844-24.92 7.766-7.12 13.59-15.882 17.751-25.74l2.497-7.12z" />
@@ -261,6 +262,7 @@ export const GitIcon = ({ className }: Props) => {
 			viewBox="0 0 256 256"
 			xmlns="http://www.w3.org/2000/svg"
 			preserveAspectRatio="xMinYMin meet"
+			className={className}
 		>
 			<path
 				d="M251.172 116.594L139.4 4.828c-6.433-6.437-16.873-6.437-23.314 0l-23.21 23.21 29.443 29.443c6.842-2.312 14.688-.761 20.142 4.693 5.48 5.489 7.02 13.402 4.652 20.266l28.375 28.376c6.865-2.365 14.786-.835 20.269 4.657 7.663 7.66 7.663 20.075 0 27.74-7.665 7.666-20.08 7.666-27.749 0-5.764-5.77-7.188-14.235-4.27-21.336l-26.462-26.462-.003 69.637a19.82 19.82 0 0 1 5.188 3.71c7.663 7.66 7.663 20.076 0 27.747-7.665 7.662-20.086 7.662-27.74 0-7.663-7.671-7.663-20.086 0-27.746a19.654 19.654 0 0 1 6.421-4.281V94.196a19.378 19.378 0 0 1-6.421-4.281c-5.806-5.798-7.202-14.317-4.227-21.446L81.47 39.442l-76.64 76.635c-6.44 6.443-6.44 16.884 0 23.322l111.774 111.768c6.435 6.438 16.873 6.438 23.316 0l111.251-111.249c6.438-6.44 6.438-16.887 0-23.324"