refactor(dokploy): improve repository selection UI for version control providers

- Updated repository selection logic across Bitbucket, Gitea, GitHub, and GitLab components to display a placeholder when no repository is selected.
- Enhanced loading state messages for better user experience, ensuring users are prompted to select an account before loading repositories.
- Cleaned up conditional rendering for loading states and account selection prompts in the UI.
This commit is contained in:
Mauricio Siu
2026-02-10 00:11:39 -06:00
parent 1da23f8888
commit 00dc3fae11
8 changed files with 96 additions and 64 deletions

View File

@@ -245,13 +245,13 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
!field.value && "text-muted-foreground",
)}
>
{isLoadingRepositories
? "Loading...."
: field.value.owner
? repositories?.find(
{!field.value.owner
? "Select repository"
: isLoadingRepositories
? "Loading...."
: repositories?.find(
(repo) => repo.name === field.value.repo,
)?.name
: "Select repository"}
)?.name ?? "Select repository"}
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
</Button>
@@ -263,11 +263,15 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
placeholder="Search repository..."
className="h-9"
/>
{isLoadingRepositories && (
{!bitbucketId ? (
<span className="py-6 text-center text-sm text-muted-foreground">
Select a Bitbucket account first
</span>
) : isLoadingRepositories ? (
<span className="py-6 text-center text-sm">
Loading Repositories....
</span>
)}
) : null}
<CommandEmpty>No repositories found.</CommandEmpty>
<ScrollArea className="h-96">
<CommandGroup>

View File

@@ -258,14 +258,14 @@ export const SaveGiteaProvider = ({ applicationId }: Props) => {
!field.value && "text-muted-foreground",
)}
>
{isLoadingRepositories
? "Loading...."
: field.value.owner
? repositories?.find(
{!field.value.owner
? "Select repository"
: isLoadingRepositories
? "Loading...."
: repositories?.find(
(repo: GiteaRepository) =>
repo.name === field.value.repo,
)?.name
: "Select repository"}
)?.name ?? "Select repository"}
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
</Button>
@@ -277,11 +277,15 @@ export const SaveGiteaProvider = ({ applicationId }: Props) => {
placeholder="Search repository..."
className="h-9"
/>
{isLoadingRepositories && (
{!giteaId ? (
<span className="py-6 text-center text-sm text-muted-foreground">
Select a Gitea account first
</span>
) : isLoadingRepositories ? (
<span className="py-6 text-center text-sm">
Loading Repositories....
</span>
)}
) : null}
<CommandEmpty>No repositories found.</CommandEmpty>
<ScrollArea className="h-96">
<CommandGroup>

View File

@@ -233,13 +233,13 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
!field.value && "text-muted-foreground",
)}
>
{isLoadingRepositories
? "Loading...."
: field.value.owner
? repositories?.find(
{!field.value.owner
? "Select repository"
: isLoadingRepositories
? "Loading...."
: repositories?.find(
(repo) => repo.name === field.value.repo,
)?.name
: "Select repository"}
)?.name ?? "Select repository"}
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
</Button>
@@ -251,11 +251,15 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
placeholder="Search repository..."
className="h-9"
/>
{isLoadingRepositories && (
{!githubId ? (
<span className="py-6 text-center text-sm text-muted-foreground">
Select a GitHub account first
</span>
) : isLoadingRepositories ? (
<span className="py-6 text-center text-sm">
Loading Repositories....
</span>
)}
) : null}
<CommandEmpty>No repositories found.</CommandEmpty>
<ScrollArea className="h-96">
<CommandGroup>

View File

@@ -254,13 +254,13 @@ export const SaveGitlabProvider = ({ applicationId }: Props) => {
!field.value && "text-muted-foreground",
)}
>
{isLoadingRepositories
? "Loading...."
: field.value.owner
? repositories?.find(
{!field.value.owner
? "Select repository"
: isLoadingRepositories
? "Loading...."
: repositories?.find(
(repo) => repo.name === field.value.repo,
)?.name
: "Select repository"}
)?.name ?? "Select repository"}
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
</Button>
@@ -272,11 +272,15 @@ export const SaveGitlabProvider = ({ applicationId }: Props) => {
placeholder="Search repository..."
className="h-9"
/>
{isLoadingRepositories && (
{!gitlabId ? (
<span className="py-6 text-center text-sm text-muted-foreground">
Select a GitLab account first
</span>
) : isLoadingRepositories ? (
<span className="py-6 text-center text-sm">
Loading Repositories....
</span>
)}
) : null}
<CommandEmpty>No repositories found.</CommandEmpty>
<ScrollArea className="h-96">
<CommandGroup>

View File

@@ -247,13 +247,13 @@ export const SaveBitbucketProviderCompose = ({ composeId }: Props) => {
!field.value && "text-muted-foreground",
)}
>
{isLoadingRepositories
? "Loading...."
: field.value.owner
? repositories?.find(
{!field.value.owner
? "Select repository"
: isLoadingRepositories
? "Loading...."
: repositories?.find(
(repo) => repo.name === field.value.repo,
)?.name
: "Select repository"}
)?.name ?? "Select repository"}
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
</Button>
@@ -265,11 +265,15 @@ export const SaveBitbucketProviderCompose = ({ composeId }: Props) => {
placeholder="Search repository..."
className="h-9"
/>
{isLoadingRepositories && (
{!bitbucketId ? (
<span className="py-6 text-center text-sm text-muted-foreground">
Select a Bitbucket account first
</span>
) : isLoadingRepositories ? (
<span className="py-6 text-center text-sm">
Loading Repositories....
</span>
)}
) : null}
<CommandEmpty>No repositories found.</CommandEmpty>
<ScrollArea className="h-96">
<CommandGroup>

View File

@@ -244,13 +244,13 @@ export const SaveGiteaProviderCompose = ({ composeId }: Props) => {
!field.value && "text-muted-foreground",
)}
>
{isLoadingRepositories
? "Loading...."
: field.value.owner
? repositories?.find(
{!field.value.owner
? "Select repository"
: isLoadingRepositories
? "Loading...."
: repositories?.find(
(repo) => repo.name === field.value.repo,
)?.name
: "Select repository"}
)?.name ?? "Select repository"}
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
</Button>
</FormControl>
@@ -261,11 +261,15 @@ export const SaveGiteaProviderCompose = ({ composeId }: Props) => {
placeholder="Search repository..."
className="h-9"
/>
{isLoadingRepositories && (
{!giteaId ? (
<span className="py-6 text-center text-sm text-muted-foreground">
Select a Gitea account first
</span>
) : isLoadingRepositories ? (
<span className="py-6 text-center text-sm">
Loading Repositories....
</span>
)}
) : null}
<CommandEmpty>No repositories found.</CommandEmpty>
<ScrollArea className="h-96">
<CommandGroup>

View File

@@ -234,13 +234,13 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
!field.value && "text-muted-foreground",
)}
>
{isLoadingRepositories
? "Loading...."
: field.value.owner
? repositories?.find(
{!field.value.owner
? "Select repository"
: isLoadingRepositories
? "Loading...."
: repositories?.find(
(repo) => repo.name === field.value.repo,
)?.name
: "Select repository"}
)?.name ?? "Select repository"}
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
</Button>
@@ -252,11 +252,15 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
placeholder="Search repository..."
className="h-9"
/>
{isLoadingRepositories && (
{!githubId ? (
<span className="py-6 text-center text-sm text-muted-foreground">
Select a GitHub account first
</span>
) : isLoadingRepositories ? (
<span className="py-6 text-center text-sm">
Loading Repositories....
</span>
)}
) : null}
<CommandEmpty>No repositories found.</CommandEmpty>
<ScrollArea className="h-96">
<CommandGroup>

View File

@@ -256,13 +256,13 @@ export const SaveGitlabProviderCompose = ({ composeId }: Props) => {
!field.value && "text-muted-foreground",
)}
>
{isLoadingRepositories
? "Loading...."
: field.value.owner
? repositories?.find(
{!field.value.owner
? "Select repository"
: isLoadingRepositories
? "Loading...."
: repositories?.find(
(repo) => repo.name === field.value.repo,
)?.name
: "Select repository"}
)?.name ?? "Select repository"}
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
</Button>
@@ -274,11 +274,15 @@ export const SaveGitlabProviderCompose = ({ composeId }: Props) => {
placeholder="Search repository..."
className="h-9"
/>
{isLoadingRepositories && (
{!gitlabId ? (
<span className="py-6 text-center text-sm text-muted-foreground">
Select a GitLab account first
</span>
) : isLoadingRepositories ? (
<span className="py-6 text-center text-sm">
Loading Repositories....
</span>
)}
) : null}
<CommandEmpty>No repositories found.</CommandEmpty>
<ScrollArea className="h-96">
<CommandGroup>