feat: add View Source button to experimental component and refactor permissions

blink-so[bot] · matifali · blink-so[bot] · commit 4c1cdade6d1f · 2025-07-23T16:32:34.000Z
Addresses review feedback:
- Added View Source button to CreateWorkspacePageViewExperimental component
- Refactored createWorkspaceChecks helper to include template update permission
- Updated both regular and experimental pages to use the new permissions helper
- Added story for experimental component with View Source button
- Removed unnecessary WithoutViewSourceButton story (default behavior)

The View Source button now appears in both the regular and experimental
workspace creation pages for template administrators.

Co-authored-by: matifali &lt;10648092+matifali@users.noreply.github.com&gt;
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePage.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePage.tsx
@@ -65,16 +65,10 @@ const CreateWorkspacePage: FC = () => {
 	});
 	const permissionsQuery = useQuery({
 		...checkAuthorization({
-			checks: {
-				...createWorkspaceChecks(templateQuery.data?.organization_id ?? ""),
-				canUpdateTemplate: {
-					object: {
-						resource_type: "template",
-						resource_id: templateQuery.data?.id ?? "",
-					},
-					action: "update",
-				},
-			},
+			checks: createWorkspaceChecks(
+				templateQuery.data?.organization_id ?? "",
+				templateQuery.data?.id,
+			),
 		}),
 		enabled: !!templateQuery.data,
 	});
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageExperimental.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageExperimental.tsx
@@ -79,7 +79,10 @@ const CreateWorkspacePageExperimental: FC = () => {
 	});
 	const permissionsQuery = useQuery({
 		...checkAuthorization({
-			checks: createWorkspaceChecks(templateQuery.data?.organization_id ?? ""),
+			checks: createWorkspaceChecks(
+				templateQuery.data?.organization_id ?? "",
+				templateQuery.data?.id,
+			),
 		}),
 		enabled: !!templateQuery.data,
 	});
@@ -292,6 +295,7 @@ const CreateWorkspacePageExperimental: FC = () => {
 					owner={owner}
 					setOwner={setOwner}
 					autofillParameters={autofillParameters}
+					canUpdateTemplate={permissionsQuery.data?.canUpdateTemplate}
 					error={
 						wsError ||
 						createWorkspaceMutation.error ||
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.stories.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.stories.tsx
@@ -403,22 +403,4 @@ export const WithViewSourceButton: Story = {
 	},
 };
 
-export const WithoutViewSourceButton: Story = {
-	args: {
-		canUpdateTemplate: false,
-		versionId: "template-version-123",
-		template: {
-			...MockTemplate,
-			organization_name: "default",
-			name: "docker-template",
-		},
-	},
-	parameters: {
-		docs: {
-			description: {
-				story:
-					"This story shows the workspace creation page for users without template update permissions. The View Source button is hidden for these users.",
-			},
-		},
-	},
-};
+
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.stories.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.stories.tsx
@@ -38,3 +38,23 @@ export const WebsocketError: Story = {
 		),
 	},
 };
+
+export const WithViewSourceButton: Story = {
+	args: {
+		canUpdateTemplate: true,
+		versionId: "template-version-123",
+		template: {
+			...MockTemplate,
+			organization_name: "default",
+			name: "docker-template",
+		},
+	},
+	parameters: {
+		docs: {
+			description: {
+				story:
+					"This story shows the View Source button that appears for template administrators in the experimental workspace creation page. The button allows quick navigation to the template editor.",
+			},
+		},
+	},
+};
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx
@@ -27,7 +27,7 @@ import {
 import { UserAutocomplete } from "components/UserAutocomplete/UserAutocomplete";
 import { type FormikContextType, useFormik } from "formik";
 import type { ExternalAuthPollingState } from "hooks/useExternalAuth";
-import { ArrowLeft, CircleHelp } from "lucide-react";
+import { ArrowLeft, CircleHelp, ExternalLinkIcon } from "lucide-react";
 import { useSyncFormParameters } from "modules/hooks/useSyncFormParameters";
 import {
 	Diagnostics,
@@ -44,6 +44,7 @@ import {
 	useRef,
 	useState,
 } from "react";
+import { Link as RouterLink } from "react-router-dom";
 import { docs } from "utils/docs";
 import { nameValidator } from "utils/formUtils";
 import type { AutofillBuildParameter } from "utils/richParameters";
@@ -54,6 +55,7 @@ import type { CreateWorkspacePermissions } from "./permissions";
 
 interface CreateWorkspacePageViewExperimentalProps {
 	autofillParameters: AutofillBuildParameter[];
+	canUpdateTemplate?: boolean;
 	creatingWorkspace: boolean;
 	defaultName?: string | null;
 	defaultOwner: TypesGen.User;
@@ -85,6 +87,7 @@ export const CreateWorkspacePageViewExperimental: FC<
 	CreateWorkspacePageViewExperimentalProps
 > = ({
 	autofillParameters,
+	canUpdateTemplate,
 	creatingWorkspace,
 	defaultName,
 	defaultOwner,
@@ -379,6 +382,16 @@ export const CreateWorkspacePageViewExperimental: FC<
 								</Badge>
 							)}
 						</span>
+						{canUpdateTemplate && (
+							<Button asChild size="sm" variant="outline">
+								<RouterLink
+									to={`/templates/${template.organization_name}/${template.name}/versions/${versionId}/edit`}
+								>
+									<ExternalLinkIcon />
+									View source
+								</RouterLink>
+							</Button>
+						)}
 					</div>
 					<span className="flex flex-row items-center gap-2">
 						<h1 className="text-3xl font-semibold m-0">New workspace</h1>
diff --git a/site/src/pages/CreateWorkspacePage/permissions.ts b/site/src/pages/CreateWorkspacePage/permissions.ts
@@ -1,4 +1,4 @@
-export const createWorkspaceChecks = (organizationId: string) =>
+export const createWorkspaceChecks = (organizationId: string, templateId?: string) =>
 	({
 		createWorkspaceForAny: {
 			object: {
@@ -8,6 +8,15 @@ export const createWorkspaceChecks = (organizationId: string) =>
 			},
 			action: "create",
 		},
+		...(templateId && {
+			canUpdateTemplate: {
+				object: {
+					resource_type: "template",
+					resource_id: templateId,
+				},
+				action: "update",
+			},
+		}),
 	}) as const;
 
 export type CreateWorkspacePermissions = Record<
