= ({ href={docs("/admin/provisioners")} target="_blank" rel="noreferrer" + className="p-0" + showExternalIcon={false} > Learn more... diff --git a/site/src/pages/TemplateVersionEditorPage/PublishTemplateVersionDialog.tsx b/site/src/pages/TemplateVersionEditorPage/PublishTemplateVersionDialog.tsx index b496eee234c..15b7b8b353b 100644 --- a/site/src/pages/TemplateVersionEditorPage/PublishTemplateVersionDialog.tsx +++ b/site/src/pages/TemplateVersionEditorPage/PublishTemplateVersionDialog.tsx @@ -1,12 +1,11 @@ -import Checkbox from "@mui/material/Checkbox"; -import FormControlLabel from "@mui/material/FormControlLabel"; -import TextField from "@mui/material/TextField"; import { useFormik } from "formik"; import type { FC } from "react"; import * as Yup from "yup"; import { EnterpriseBadge } from "#/components/Badges/Badges"; +import { Checkbox } from "#/components/Checkbox/Checkbox"; import { ConfirmDialog } from "#/components/Dialog/ConfirmDialog/ConfirmDialog"; import { FormFields } from "#/components/Form/Form"; +import { FormField } from "#/components/FormField/FormField"; import { HelpPopover, HelpPopoverContent, @@ -16,7 +15,10 @@ import { HelpPopoverText, HelpPopoverTitle, } from "#/components/HelpPopover/HelpPopover"; +import { Label } from "#/components/Label/Label"; +import { Textarea } from "#/components/Textarea/Textarea"; import type { PublishVersionData } from "#/pages/TemplateVersionEditorPage/types"; +import { cn } from "#/utils/cn"; import { docs } from "#/utils/docs"; import { getFormHelpers } from "#/utils/formUtils"; @@ -53,6 +55,8 @@ export const PublishTemplateVersionDialog: FC< onSubmit: onConfirm, }); const getFieldHelpers = getFormHelpers(form, publishingError); + const messageField = getFieldHelpers("message"); + const messageErrorId = `${messageField.id}-error`; const handleClose = () => { form.resetForm(); onClose(); @@ -76,48 +80,63 @@ export const PublishTemplateVersionDialog: FC<

You are about to publish a new version of this template.

- - - -

- { - await form.setFieldValue( - "isActiveVersion", - e.target.checked, - ); - }} - name="isActiveVersion" - /> +

+ Message +

+								{messageField.error && (
+									<span
+										id={messageErrorId}
+										className="text-xs text-content-destructive"
+									>
+										{messageField.helperText}
+									</span>
+								)}
+							</div>
+
+							<div className="flex flex-row items-center gap-4">
+								<div className="flex items-center gap-2">
+									<Checkbox
+										id="isActiveVersion"
+										checked={form.values.isActiveVersion}
+										onCheckedChange={(checked) => {
+											void form.setFieldValue(
+												"isActiveVersion",
+												Boolean(checked),
+											);
+										}}
+										name="isActiveVersion"
+									/>
+									<Label htmlFor="isActiveVersion" className="cursor-pointer">
+										Promote to active version
+									</Label>
+								</div>
 
 								<HelpPopover>
 									<HelpPopoverIconTrigger />
-
-									{/**
-									 * 2025-09-03 - Without disablePortal, the tooltip will render under the dialog;
-									 * this prop may not need to be set when we switch away from MuiDialog
-									 */}
-									<HelpPopoverContent disablePortal>
+									<HelpPopoverContent>
 										<HelpPopoverTitle>Active versions</HelpPopoverTitle>
 										<HelpPopoverText>
 											Templates can enforce that the active version be used for
diff --git a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.stories.tsx b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.stories.tsx
index 9107b6a9495..3004762e9c7 100644
--- a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.stories.tsx
+++ b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.stories.tsx
@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { action } from "storybook/actions";
+import { expect, userEvent, within } from "storybook/test";
 import {
 	MockFailedProvisionerJob,
 	MockRunningProvisionerJob,
@@ -156,12 +157,28 @@ export const WithError = {
 	},
 };
 
-export const PublishDialog = {
+export const PublishDialog: Story = {
 	args: {
 		isAskingPublishParameters: true,
 	},
 };
 
+export const PublishDialogActiveVersionHelp: Story = {
+	args: {
+		isAskingPublishParameters: true,
+	},
+	play: async ({ canvasElement }) => {
+		// The dialog and popover are portaled, so query against the document body.
+		const body = within(canvasElement.ownerDocument.body);
+		const trigger = await body.findByRole("button", { name: "More info" });
+		await userEvent.click(trigger);
+		await expect(await body.findByText("Active versions")).toBeInTheDocument();
+		await expect(
+			body.getByRole("link", { name: "Review the documentation" }),
+		).toBeInTheDocument();
+	},
+};
+
 export const Published = {
 	args: {
 		publishedVersion: MockTemplateVersion,
diff --git a/site/src/pages/TemplatesPage/EmptyTemplates.tsx b/site/src/pages/TemplatesPage/EmptyTemplates.tsx
index a3d1848e203..c8680ad404b 100644
--- a/site/src/pages/TemplatesPage/EmptyTemplates.tsx
+++ b/site/src/pages/TemplatesPage/EmptyTemplates.tsx
@@ -1,9 +1,9 @@
-import Link from "@mui/material/Link";
 import type { FC } from "react";
 import { Link as RouterLink } from "react-router";
 import type { TemplateExample } from "#/api/typesGenerated";
 import { Button } from "#/components/Button/Button";
 import { CodeExample } from "#/components/CodeExample/CodeExample";
+import { Link } from "#/components/Link/Link";
 import { TableEmpty } from "#/components/TableEmpty/TableEmpty";
 import { TemplateExampleCard } from "#/modules/templates/TemplateExampleCard/TemplateExampleCard";
 import { docs } from "#/utils/docs";
@@ -64,6 +64,8 @@ export const EmptyTemplates: FC<EmptyTemplatesProps> = ({
 							href={docs("/admin/templates/creating-templates")}
 							target="_blank"
 							rel="noreferrer"
+							showExternalIcon={false}
+							className="p-0 text-xs"
 						>
 							create your own
 						</Link>