From 7e300aea55d149563b68cc7fe7dd3d1e84690cb4 Mon Sep 17 00:00:00 2001 From: Atif Ali Date: Fri, 13 Jun 2025 18:34:01 +0000 Subject: [PATCH] feat: show popup notification on successful template build MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This change adds a success notification when a template build completes successfully, making it more obvious to users when the build has finished. Fixes #18364 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- .../TemplateVersionEditorPage.tsx | 24 +++++++++++++++++-- 1 file changed, 22 insertions(+), 2 deletions(-) diff --git a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditorPage.tsx b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditorPage.tsx index fdca9744fb29d..b093736095e32 100644 --- a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditorPage.tsx +++ b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditorPage.tsx @@ -12,11 +12,11 @@ import type { PatchTemplateVersionRequest, TemplateVersion, } from "api/typesGenerated"; -import { displayError } from "components/GlobalSnackbar/utils"; +import { displayError, displaySuccess } from "components/GlobalSnackbar/utils"; import { Loader } from "components/Loader/Loader"; import { linkToTemplate, useLinks } from "modules/navigation"; import { useWatchVersionLogs } from "modules/templates/useWatchVersionLogs"; -import { type FC, useEffect, useState } from "react"; +import { type FC, useEffect, useRef, useState } from "react"; import { Helmet } from "react-helmet-async"; import { keepPreviousData, @@ -122,11 +122,31 @@ const TemplateVersionEditorPage: FC = () => { const [provisionerTags, setProvisionerTags] = useState< Record >({}); + // Track previous job status to detect when a build completes successfully + const previousJobStatus = useRef(undefined); useEffect(() => { if (activeTemplateVersion?.job.tags) { setProvisionerTags(activeTemplateVersion.job.tags); } }, [activeTemplateVersion?.job.tags]); + + // Show notification when build succeeds + useEffect(() => { + if (!activeTemplateVersion || !templateQuery.data) { + return; + } + + // Only show notification when status changes from running/pending to succeeded + if (previousJobStatus.current && + ["running", "pending"].includes(previousJobStatus.current) && + activeTemplateVersion.job.status === "succeeded") { + const templateName = templateQuery.data.display_name || templateQuery.data.name; + displaySuccess(`Template ${templateName} (${activeTemplateVersion.name}) built successfully`); + } + + // Update the previous status for next comparison + previousJobStatus.current = activeTemplateVersion.job.status; + }, [activeTemplateVersion?.job.status, templateQuery.data]); return ( <>