From 30d4c8d457dd8cdc7360996fd9a48c9df314ee17 Mon Sep 17 00:00:00 2001 From: Fabien FLEUREAU Date: Tue, 27 Jan 2026 17:43:35 +0100 Subject: [PATCH 1/2] feat(services): add AutoDeployBadge component as header for services with git source (QOV-1504) --- libs/domains/services/feature/src/index.ts | 1 + .../auto-deploy-badge/auto-deploy-badge.tsx | 85 +++++++++++++++++++ .../src/lib/ui/container/container.tsx | 26 ++++-- 3 files changed, 103 insertions(+), 9 deletions(-) create mode 100644 libs/domains/services/feature/src/lib/auto-deploy-badge/auto-deploy-badge.tsx diff --git a/libs/domains/services/feature/src/index.ts b/libs/domains/services/feature/src/index.ts index 815068ecfb4..9e53a18022a 100644 --- a/libs/domains/services/feature/src/index.ts +++ b/libs/domains/services/feature/src/index.ts @@ -1,3 +1,4 @@ +export * from './lib/auto-deploy-badge/auto-deploy-badge' export * from './lib/auto-deploy-setting/auto-deploy-setting' export * from './lib/auto-deploy-section/auto-deploy-section' export * from './lib/git-webhook-status-badge/git-webhook-status-badge' diff --git a/libs/domains/services/feature/src/lib/auto-deploy-badge/auto-deploy-badge.tsx b/libs/domains/services/feature/src/lib/auto-deploy-badge/auto-deploy-badge.tsx new file mode 100644 index 00000000000..afe82e38cb0 --- /dev/null +++ b/libs/domains/services/feature/src/lib/auto-deploy-badge/auto-deploy-badge.tsx @@ -0,0 +1,85 @@ +import { type IconName } from '@fortawesome/fontawesome-common-types' +import { type GitWebhookStatusResponse } from 'qovery-typescript-axios' +import { Link, useParams } from 'react-router-dom' +import { APPLICATION_SETTINGS_GENERAL_URL, APPLICATION_SETTINGS_URL, APPLICATION_URL } from '@qovery/shared/routes' +import { Badge, Icon, LoaderSpinner, Tooltip } from '@qovery/shared/ui' +import { useGitWebhookStatus } from '../hooks/use-git-webhook-status/use-git-webhook-status' + +export interface AutoDeployBadgeProps { + serviceId: string +} + +const webhookStatusConfig: Record< + GitWebhookStatusResponse['status'], + { + icon: IconName + color: 'green' | 'yellow' | 'red' | 'neutral' + tooltip: string + } +> = { + ACTIVE: { + icon: 'circle-check', + color: 'green', + tooltip: 'Webhook is correctly configured. Auto-deploy will trigger on git events.', + }, + NOT_CONFIGURED: { + icon: 'circle-question', + color: 'red', + tooltip: 'No webhook found for auto-deployment. Click to configure it in settings.', + }, + MISCONFIGURED: { + icon: 'triangle-exclamation', + color: 'yellow', + tooltip: 'Webhook is missing required events. Click to fix it in settings.', + }, + UNABLE_TO_VERIFY: { + icon: 'circle-exclamation', + color: 'neutral', + tooltip: + "Couldn't verify webhook status. This could be due to expired credentials, insufficient permissions, or git provider API unavailability.", + }, +} + +export function AutoDeployBadge({ serviceId }: AutoDeployBadgeProps) { + const { organizationId = '', projectId = '', environmentId = '', applicationId = '' } = useParams() + const { data: webhookStatus, isLoading } = useGitWebhookStatus({ serviceId }) + + const config = webhookStatus ? webhookStatusConfig[webhookStatus.status] : undefined + const tooltipContent = config?.tooltip ?? 'Auto-deploy enabled. Click to view settings.' + + const settingsUrl = + APPLICATION_URL(organizationId, projectId, environmentId, applicationId) + + APPLICATION_SETTINGS_URL + + APPLICATION_SETTINGS_GENERAL_URL + + return ( + + + + + Auto-deploy + {isLoading ? ( + + ) : ( + config && ( + + ) + )} + + + + ) +} + +export default AutoDeployBadge diff --git a/libs/pages/application/src/lib/ui/container/container.tsx b/libs/pages/application/src/lib/ui/container/container.tsx index 303cfb33fd7..ae8597131e5 100644 --- a/libs/pages/application/src/lib/ui/container/container.tsx +++ b/libs/pages/application/src/lib/ui/container/container.tsx @@ -6,6 +6,7 @@ import { useCluster } from '@qovery/domains/clusters/feature' import { EnvironmentMode, useEnvironment } from '@qovery/domains/environments/feature' import { type AnyService, type Database } from '@qovery/domains/services/data-access' import { + AutoDeployBadge, NeedRedeployFlag, ServiceActionToolbar, ServiceAvatar, @@ -15,7 +16,7 @@ import { useService, } from '@qovery/domains/services/feature' import { VariablesProvider } from '@qovery/domains/variables/feature' -import { IconEnum } from '@qovery/shared/enums' +import { IconEnum, isHelmGitSource, isJobGitSource } from '@qovery/shared/enums' import { APPLICATION_DEPLOYMENTS_URL, APPLICATION_GENERAL_URL, @@ -155,14 +156,21 @@ export function Container({ children }: ContainerProps) { - - {service && 'auto_deploy' in service && service.auto_deploy && ( - - - - - - )} + + {service && + 'auto_deploy' in service && + service.auto_deploy && + match(service) + .with({ serviceType: 'APPLICATION' }, { serviceType: 'TERRAFORM' }, () => ( + + )) + .with({ serviceType: 'JOB' }, (job) => + isJobGitSource(job.source) ? : null + ) + .with({ serviceType: 'HELM' }, (helm) => + isHelmGitSource(helm.source) ? : null + ) + .otherwise(() => null)} From 7456a2ed02075b43f9feb4a223b6cbef2d821a33 Mon Sep 17 00:00:00 2001 From: Fabien FLEUREAU Date: Wed, 28 Jan 2026 09:31:01 +0100 Subject: [PATCH 2/2] refacto(services): refactor AutoDeployBadge component for improved styling and structure --- .../auto-deploy-badge/auto-deploy-badge.tsx | 45 +++++++------------ 1 file changed, 15 insertions(+), 30 deletions(-) diff --git a/libs/domains/services/feature/src/lib/auto-deploy-badge/auto-deploy-badge.tsx b/libs/domains/services/feature/src/lib/auto-deploy-badge/auto-deploy-badge.tsx index afe82e38cb0..509f0e49c25 100644 --- a/libs/domains/services/feature/src/lib/auto-deploy-badge/auto-deploy-badge.tsx +++ b/libs/domains/services/feature/src/lib/auto-deploy-badge/auto-deploy-badge.tsx @@ -1,8 +1,8 @@ import { type IconName } from '@fortawesome/fontawesome-common-types' import { type GitWebhookStatusResponse } from 'qovery-typescript-axios' -import { Link, useParams } from 'react-router-dom' +import { useParams } from 'react-router-dom' import { APPLICATION_SETTINGS_GENERAL_URL, APPLICATION_SETTINGS_URL, APPLICATION_URL } from '@qovery/shared/routes' -import { Badge, Icon, LoaderSpinner, Tooltip } from '@qovery/shared/ui' +import { Icon, Link, LoaderSpinner, Tooltip } from '@qovery/shared/ui' import { useGitWebhookStatus } from '../hooks/use-git-webhook-status/use-git-webhook-status' export interface AutoDeployBadgeProps { @@ -13,28 +13,28 @@ const webhookStatusConfig: Record< GitWebhookStatusResponse['status'], { icon: IconName - color: 'green' | 'yellow' | 'red' | 'neutral' + iconClassName: string tooltip: string } > = { ACTIVE: { icon: 'circle-check', - color: 'green', + iconClassName: 'text-green-500', tooltip: 'Webhook is correctly configured. Auto-deploy will trigger on git events.', }, NOT_CONFIGURED: { icon: 'circle-question', - color: 'red', + iconClassName: 'text-red-500', tooltip: 'No webhook found for auto-deployment. Click to configure it in settings.', }, MISCONFIGURED: { icon: 'triangle-exclamation', - color: 'yellow', + iconClassName: 'text-yellow-500', tooltip: 'Webhook is missing required events. Click to fix it in settings.', }, UNABLE_TO_VERIFY: { icon: 'circle-exclamation', - color: 'neutral', + iconClassName: 'text-neutral-350', tooltip: "Couldn't verify webhook status. This could be due to expired credentials, insufficient permissions, or git provider API unavailability.", }, @@ -54,29 +54,14 @@ export function AutoDeployBadge({ serviceId }: AutoDeployBadgeProps) { return ( - - - - Auto-deploy - {isLoading ? ( - - ) : ( - config && ( - - ) - )} - + + + Auto-deploy + {isLoading ? ( + + ) : ( + config && + )} )