Content-Length: 571368 | pFad | http://github.com/coder/coder/pull/18951/files

4D feat: add View Source button for template administrators in workspace creation by blink-so[bot] · Pull Request #18951 · coder/coder · GitHub
Skip to content

feat: add View Source button for template administrators in workspace creation #18951

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Jul 23, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion site/src/pages/CreateWorkspacePage/CreateWorkspacePage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,10 @@ const CreateWorkspacePage: FC = () => {
});
const permissionsQuery = useQuery({
...checkAuthorization({
checks: createWorkspaceChecks(templateQuery.data?.organization_id ?? ""),
checks: createWorkspaceChecks(
templateQuery.data?.organization_id ?? "",
templateQuery.data?.id,
),
}),
enabled: !!templateQuery.data,
});
Expand Down Expand Up @@ -208,6 +211,7 @@ const CreateWorkspacePage: FC = () => {
startPollingExternalAuth={startPollingExternalAuth}
hasAllRequiredExternalAuth={hasAllRequiredExternalAuth}
permissions={permissionsQuery.data as CreateWorkspacePermissions}
canUpdateTemplate={permissionsQuery.data?.canUpdateTemplate}
parameters={realizedParameters as TemplateVersionParameter[]}
presets={templateVersionPresetsQuery.data ?? []}
creatingWorkspace={createWorkspaceMutation.isPending}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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,
});
Expand Down Expand Up @@ -292,6 +295,7 @@ const CreateWorkspacePageExperimental: FC = () => {
owner={owner}
setOwner={setOwner}
autofillParameters={autofillParameters}
canUpdateTemplate={permissionsQuery.data?.canUpdateTemplate}
error={
wsError ||
createWorkspaceMutation.error ||
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ const meta: Meta<typeof CreateWorkspacePageView> = {
mode: "form",
permissions: {
createWorkspaceForAny: true,
canUpdateTemplate: false,
},
onCancel: action("onCancel"),
},
Expand Down Expand Up @@ -382,3 +383,23 @@ export const ExternalAuthAllConnected: 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. The button allows quick navigation to the template editor from the workspace creation page.",
},
},
},
};
22 changes: 19 additions & 3 deletions site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,10 @@ import { Switch } from "components/Switch/Switch";
import { UserAutocomplete } from "components/UserAutocomplete/UserAutocomplete";
import { type FormikContextType, useFormik } from "formik";
import type { ExternalAuthPollingState } from "hooks/useExternalAuth";
import { ExternalLinkIcon } from "lucide-react";
import { generateWorkspaceName } from "modules/workspaces/generateWorkspaceName";
import { type FC, useCallback, useEffect, useMemo, useState } from "react";
import { Link } from "react-router-dom";
import {
getFormHelpers,
nameValidator,
Expand Down Expand Up @@ -67,6 +69,7 @@ interface CreateWorkspacePageViewProps {
presets: TypesGen.Preset[];
permissions: CreateWorkspacePermissions;
creatingWorkspace: boolean;
canUpdateTemplate?: boolean;
onCancel: () => void;
onSubmit: (
req: TypesGen.CreateWorkspaceRequest,
Expand All @@ -92,6 +95,7 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
presets = [],
permissions,
creatingWorkspace,
canUpdateTemplate,
onSubmit,
onCancel,
}) => {
Expand Down Expand Up @@ -218,9 +222,21 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
<Margins size="medium">
<PageHeader
actions={
<Button size="sm" variant="outline" onClick={onCancel}>
Cancel
</Button>
<Stack direction="row" spacing={2}>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the actions prop is already rendered inside of a flex container that adds spacing. just use a fragment.

{canUpdateTemplate && (
<Button asChild size="sm" variant="outline">
<Link
to={`/templates/${template.organization_name}/${template.name}/versions/${versionId}/edit`}
>
<ExternalLinkIcon />
View source
</Link>
</Button>
)}
<Button size="sm" variant="outline" onClick={onCancel}>
Cancel
</Button>
</Stack>
}
>
<Stack direction="row">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ const meta: Meta<typeof CreateWorkspacePageViewExperimental> = {
parameters: [],
permissions: {
createWorkspaceForAny: true,
canUpdateTemplate: false,
},
presets: [],
sendMessage: () => {},
Expand All @@ -38,3 +39,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.",
},
},
},
};
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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";
Expand All @@ -54,6 +55,7 @@ import type { CreateWorkspacePermissions } from "./permissions";

interface CreateWorkspacePageViewExperimentalProps {
autofillParameters: AutofillBuildParameter[];
canUpdateTemplate?: boolean;
creatingWorkspace: boolean;
defaultName?: string | null;
defaultOwner: TypesGen.User;
Expand Down Expand Up @@ -85,6 +87,7 @@ export const CreateWorkspacePageViewExperimental: FC<
CreateWorkspacePageViewExperimentalProps
> = ({
autofillParameters,
canUpdateTemplate,
creatingWorkspace,
defaultName,
defaultOwner,
Expand Down Expand Up @@ -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>
Expand Down
18 changes: 15 additions & 3 deletions site/src/pages/CreateWorkspacePage/permissions.ts
Original file line number Diff line number Diff line change
@@ -1,13 +1,25 @@
export const createWorkspaceChecks = (organizationId: string) =>
export const createWorkspaceChecks = (
organizationId: string,
templateId?: string,
) =>
({
createWorkspaceForAny: {
object: {
resource_type: "workspace",
resource_type: "workspace" as const,
organization_id: organizationId,
owner_id: "*",
},
action: "create",
action: "create" as const,
},
...(templateId && {
canUpdateTemplate: {
object: {
resource_type: "template" as const,
resource_id: templateId,
},
action: "update" as const,
},
}),
}) as const;

export type CreateWorkspacePermissions = Record<
Expand Down
Loading








ApplySandwichStrip

pFad - (p)hone/(F)rame/(a)nonymizer/(d)eclutterfier!      Saves Data!


--- a PPN by Garber Painting Akron. With Image Size Reduction included!

Fetched URL: http://github.com/coder/coder/pull/18951/files

Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy