feat: add Coder registry links to template creation and editing (#18680)

## Summary
- Add "Browse Templates" card to starter templates page
- Add "Browse Modules" button to template editor topbar
- Both link to https://registry.coder.com as requested in #18141

<img width="1248" alt="Screenshot 2025-07-01 at 9 29 26 AM"
src="https://github.com/user-attachments/assets/2295e45c-2056-41cd-a39e-48d4379295be"
/>
<img width="943" alt="Screenshot 2025-07-01 at 9 29 45 AM"
src="https://github.com/user-attachments/assets/e0652b76-43bf-4794-825d-72b4fe7c5e5f"
/>



🤖 Generated with [Claude Code](https://claude.ai/code)

---------

Co-authored-by: Claude <noreply@anthropic.com>
This commit is contained in:
Garrett Delfosse
2025-07-01 13:18:27 -04:00
committed by GitHub
co-authored by Claude
parent 1158ca25bf
commit d14e9be0fe
2 changed files with 35 additions and 5 deletions
@@ -4,10 +4,12 @@ import CardActionArea from "@mui/material/CardActionArea";
import CardContent from "@mui/material/CardContent";
import Stack from "@mui/material/Stack";
import { ErrorAlert } from "components/Alert/ErrorAlert";
import { Button } from "components/Button/Button";
import { ExternalImage } from "components/ExternalImage/ExternalImage";
import { Loader } from "components/Loader/Loader";
import { Margins } from "components/Margins/Margins";
import { PageHeader, PageHeaderTitle } from "components/PageHeader/PageHeader";
import { ExternalLinkIcon } from "lucide-react";
import type { FC } from "react";
import { Link as RouterLink } from "react-router-dom";
import type { StarterTemplatesByTag } from "utils/starterTemplates";
@@ -23,7 +25,21 @@ export const CreateTemplateGalleryPageView: FC<
> = ({ starterTemplatesByTag, error }) => {
return (
<Margins>
<PageHeader>
<PageHeader
actions={
<Button asChild size="sm" variant="outline">
<a
href="https://registry.coder.com"
target="_blank"
rel="noopener noreferrer"
className="flex items-center"
>
Browse the Coder Registry
<ExternalLinkIcon className="size-icon-sm ml-1" />
</a>
</Button>
}
>
<PageHeaderTitle>Create a Template</PageHeaderTitle>
</PageHeader>
<Stack spacing={8}>
@@ -1,5 +1,4 @@
import { type Interpolation, type Theme, useTheme } from "@emotion/react";
import Button from "@mui/material/Button";
import IconButton from "@mui/material/IconButton";
import Tooltip from "@mui/material/Tooltip";
import { getErrorDetail, getErrorMessage } from "api/errors";
@@ -12,6 +11,7 @@ import type {
WorkspaceResource,
} from "api/typesGenerated";
import { Alert } from "components/Alert/Alert";
import { Button } from "components/Button/Button";
import { Sidebar } from "components/FullPageLayout/Sidebar";
import {
Topbar,
@@ -25,7 +25,7 @@ import { displayError } from "components/GlobalSnackbar/utils";
import { Loader } from "components/Loader/Loader";
import { TriangleAlertIcon } from "lucide-react";
import { ChevronLeftIcon } from "lucide-react";
import { PlayIcon, PlusIcon, XIcon } from "lucide-react";
import { ExternalLinkIcon, PlayIcon, PlusIcon, XIcon } from "lucide-react";
import { linkToTemplate, useLinks } from "modules/navigation";
import { ProvisionerAlert } from "modules/provisioners/ProvisionerAlert";
import { AlertVariant } from "modules/provisioners/ProvisionerAlert";
@@ -255,6 +255,20 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
paddingRight: 16,
}}
>
<span className="mr-2">
<Button asChild size="sm" variant="outline">
<a
href="https://registry.coder.com"
target="_blank"
rel="noopener noreferrer"
className="flex items-center"
>
Browse the Coder Registry
<ExternalLinkIcon className="size-icon-sm ml-1" />
</a>
</Button>
</span>
<TemplateVersionStatusBadge version={templateVersion} />
<div className="flex gap-1 items-center">
@@ -312,8 +326,8 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
dismissible
actions={
<Button
variant="text"
size="small"
variant="subtle"
size="sm"
onClick={onCreateWorkspace}
>
Create a workspace