+ const handleNavigate = () => {
+ posthog.capture('template detail opened', {
+ templateId: template.templateID,
+ fromTab: 'list',
+ })
+ }
+
+ const content = (
+ <>
{nameValue}
{additionalNames.length > 0 && (
)}
- {'isDefault' in row.original && row.original.isDefault && (
-
- )}
+ {isDefault &&
}
{nameValue !== '--' && (
-
{wasCopied ? (
) : (
)}
-
+
+ )}
+
+ )
+
+ if (isLinkable) {
+ return (
+
+ {content}
+
+ )
+ }
+
+ return (
+
+ {content}
)
}
@@ -452,7 +489,7 @@ export function VisibilityCell({
{!isPublic && }
{isPublic ? 'Public' : 'Internal'}
diff --git a/src/features/dashboard/templates/tags/arrow-divider.tsx b/src/features/dashboard/templates/tags/arrow-divider.tsx
new file mode 100644
index 000000000..b561c8b77
--- /dev/null
+++ b/src/features/dashboard/templates/tags/arrow-divider.tsx
@@ -0,0 +1,11 @@
+import { ArrowRightIcon } from '@/ui/primitives/icons'
+
+export function ArrowDivider() {
+ return (
+
+ )
+}
diff --git a/src/features/dashboard/templates/tags/assign-dialog.tsx b/src/features/dashboard/templates/tags/assign-dialog.tsx
new file mode 100644
index 000000000..1ed675ff0
--- /dev/null
+++ b/src/features/dashboard/templates/tags/assign-dialog.tsx
@@ -0,0 +1,262 @@
+'use client'
+
+import { useQuery } from '@tanstack/react-query'
+import { type FormEvent, useEffect, useId, useRef, useState } from 'react'
+import { useDebouncedValue } from '@/lib/hooks/use-debounced-value'
+import { useTRPC } from '@/trpc/client'
+import { Button } from '@/ui/primitives/button'
+import {
+ Dialog,
+ DialogContent,
+ DialogHeader,
+ DialogTitle,
+ DialogTrigger,
+} from '@/ui/primitives/dialog'
+import { AddIcon } from '@/ui/primitives/icons'
+import { ArrowDivider } from './arrow-divider'
+import BuildPicker, { type BuildSelectionSource } from './build-picker'
+import {
+ TagDialogFooter,
+ TagDialogStageTransition,
+ TagDialogSuccess,
+} from './components'
+import {
+ isValidTagShape,
+ normalizeTagInput,
+ TAG_MAX_LENGTH,
+ TAG_REGEX,
+} from './helpers'
+import { trackTagTableInteraction } from './table-config'
+import TagNameField, { type TagNameStatus } from './tag-name-field'
+import { useTagAssignmentMutation } from './use-tag-assignment-mutation'
+
+const NAME_DEBOUNCE_MS = 350
+
+interface AssignTagDialogProps {
+ teamSlug: string
+ templateId: string
+ templateName: string
+}
+
+export default function AssignTagDialog(props: AssignTagDialogProps) {
+ const [open, setOpen] = useState(false)
+ const [isPending, setIsPending] = useState(false)
+ const isPendingRef = useRef(false)
+ isPendingRef.current = isPending
+
+ const handleOpenChange = (next: boolean) => {
+ if (!next && isPendingRef.current) return
+ setOpen(next)
+ }
+
+ return (
+
+ )
+}
+
+interface AssignTagDialogBodyProps extends AssignTagDialogProps {
+ open: boolean
+ onClose: () => void
+ onPendingChange: (pending: boolean) => void
+}
+
+function AssignTagDialogBody({
+ open,
+ teamSlug,
+ templateId,
+ templateName,
+ onClose,
+ onPendingChange,
+}: AssignTagDialogBodyProps) {
+ const trpc = useTRPC()
+ const formId = useId()
+
+ const [name, setNameRaw] = useState('')
+ const [selectedBuildId, setSelectedBuildId] = useState(null)
+ const [selectionSource, setSelectionSource] =
+ useState(null)
+
+ const debouncedName = useDebouncedValue(name, NAME_DEBOUNCE_MS)
+ const normalizedDebouncedName = debouncedName.trim()
+ const hasValidShape = isValidTagShape(normalizedDebouncedName)
+
+ const existsQuery = useQuery(
+ trpc.templates.checkTagExists.queryOptions(
+ { teamSlug, templateId, tag: normalizedDebouncedName },
+ {
+ enabled: open && hasValidShape,
+ staleTime: 0,
+ refetchOnWindowFocus: false,
+ }
+ )
+ )
+
+ const { mutation, stage } = useTagAssignmentMutation({
+ teamSlug,
+ templateId,
+ operation: 'assign',
+ })
+
+ useEffect(() => {
+ onPendingChange(mutation.isPending)
+ }, [mutation.isPending, onPendingChange])
+
+ useEffect(() => {
+ trackTagTableInteraction('assign opened', { template_id: templateId })
+ }, [templateId])
+
+ const setName = (raw: string) => {
+ setNameRaw(normalizeTagInput(raw))
+ if (mutation.isError) mutation.reset()
+ }
+
+ const handleSetSelectedBuildId = (
+ id: string | null,
+ source: BuildSelectionSource
+ ) => {
+ setSelectedBuildId(id)
+ setSelectionSource(id ? source : null)
+ if (mutation.isError) mutation.reset()
+ }
+
+ const nameStatus = computeNameStatus()
+
+ function computeNameStatus(): TagNameStatus {
+ if (name.trim() === '') return 'idle'
+ if (name.length > TAG_MAX_LENGTH || !TAG_REGEX.test(name)) return 'invalid'
+ if (name !== normalizedDebouncedName) return 'checking'
+ if (!hasValidShape) return 'invalid'
+ if (existsQuery.isFetching) return 'checking'
+
+ const data = existsQuery.data
+ if (!data || data.normalizedTag !== normalizedDebouncedName)
+ return 'checking'
+
+ return data.exists ? 'exists' : 'available'
+ }
+
+ const canSubmit =
+ nameStatus === 'available' &&
+ selectedBuildId !== null &&
+ !mutation.isPending
+
+ const handleSubmit = (e: FormEvent) => {
+ e.preventDefault()
+ if (!canSubmit || !selectedBuildId) return
+
+ const data = existsQuery.data
+ if (
+ !data ||
+ data.normalizedTag !== normalizedDebouncedName ||
+ data.exists
+ ) {
+ return
+ }
+
+ const tagToSubmit = data.normalizedTag
+ trackTagTableInteraction('assign submitted', {
+ via_search: selectionSource === 'search',
+ })
+ mutation.mutate({
+ teamSlug,
+ templateId,
+ templateName,
+ buildId: selectedBuildId,
+ tag: tagToSubmit,
+ })
+ }
+
+ const successTag =
+ existsQuery.data?.normalizedTag ??
+ mutation.data?.tags[0] ??
+ normalizedDebouncedName
+
+ return (
+
+
+
+ {stage === 'success'
+ ? `‘${successTag}’ assigned successfully`
+ : 'Assign new tag'}
+
+
+
+ {stage === 'success' ? (
+
+ ) : (
+
+ )}
+
+
+
+ )
+}
diff --git a/src/features/dashboard/templates/tags/build-link.tsx b/src/features/dashboard/templates/tags/build-link.tsx
new file mode 100644
index 000000000..c79dd7d61
--- /dev/null
+++ b/src/features/dashboard/templates/tags/build-link.tsx
@@ -0,0 +1,67 @@
+'use client'
+
+import { useMemo } from 'react'
+import { PROTECTED_URLS } from '@/configs/urls'
+import { formatRelativeAgo } from '@/lib/utils/formatting'
+import { cn } from '@/lib/utils/ui'
+import { HoverPrefetchLink } from '@/ui/hover-prefetch-link'
+import { NULL_BUILD_ID } from './constants'
+
+interface BuildLinkProps {
+ teamSlug: string
+ templateId: string
+ buildId: string
+ assignedAt: string
+}
+
+export function BuildLink({
+ teamSlug,
+ templateId,
+ buildId,
+ assignedAt,
+}: BuildLinkProps) {
+ const shortId = useMemo(() => {
+ if (buildId === NULL_BUILD_ID) return '--'
+ if (buildId.length <= 12) return buildId
+ return `${buildId.slice(0, 5)}...${buildId.slice(-5)}`
+ }, [buildId])
+
+ const relative = useMemo(() => {
+ const d = new Date(assignedAt)
+ return Number.isNaN(d.getTime()) ? '' : formatRelativeAgo(d)
+ }, [assignedAt])
+
+ const isLinkable = buildId !== NULL_BUILD_ID
+
+ const inner = (
+
+ {shortId}
+
+ )
+
+ return (
+
+ {isLinkable ? (
+
+ {inner}
+
+ ) : (
+ {inner}
+ )}
+ {relative && (
+
+ · {relative}
+
+ )}
+
+ )
+}
diff --git a/src/features/dashboard/templates/tags/build-picker-row.tsx b/src/features/dashboard/templates/tags/build-picker-row.tsx
new file mode 100644
index 000000000..ddd98c823
--- /dev/null
+++ b/src/features/dashboard/templates/tags/build-picker-row.tsx
@@ -0,0 +1,44 @@
+'use client'
+
+import { memo } from 'react'
+import { cn } from '@/lib/utils'
+import { formatTimeAgoCompact } from '@/lib/utils/formatting'
+import { Label } from '@/ui/primitives/label'
+import { RadioGroupItem } from '@/ui/primitives/radio-group'
+
+interface BuildPickerRowProps {
+ buildId: string
+ createdAt: number
+ disabled?: boolean
+ dimmed?: boolean
+}
+
+function BuildPickerRowComponent({
+ buildId,
+ createdAt,
+ disabled,
+ dimmed,
+}: BuildPickerRowProps) {
+ const id = `build-row-${buildId}`
+
+ return (
+
+ )
+}
+
+export const BuildPickerRow = memo(BuildPickerRowComponent)
diff --git a/src/features/dashboard/templates/tags/build-picker.tsx b/src/features/dashboard/templates/tags/build-picker.tsx
new file mode 100644
index 000000000..f6f155287
--- /dev/null
+++ b/src/features/dashboard/templates/tags/build-picker.tsx
@@ -0,0 +1,348 @@
+'use client'
+
+import { useQuery } from '@tanstack/react-query'
+import { type ReactElement, useEffect, useId, useMemo, useState } from 'react'
+import type { ListedBuildModel } from '@/core/modules/builds/models'
+import { useDebouncedValue } from '@/lib/hooks/use-debounced-value'
+import { cn } from '@/lib/utils'
+import { useTRPC } from '@/trpc/client'
+import { Button } from '@/ui/primitives/button'
+import { AlertIcon, BuildIcon, SearchIcon } from '@/ui/primitives/icons'
+import { RadioGroup } from '@/ui/primitives/radio-group'
+import { Skeleton } from '@/ui/primitives/skeleton'
+import { BuildPickerRow } from './build-picker-row'
+import { isValidUuid } from './helpers'
+
+type BuildsQueryResult = {
+ data?: { data: ListedBuildModel[]; nextCursor: string | null }
+ isPending: boolean
+ isError: boolean
+ refetch: () => void
+}
+
+export type BuildSelectionSource = 'default' | 'search'
+
+const DEFAULT_LIMIT = 5
+
+interface BuildPickerProps {
+ open: boolean
+ teamSlug: string
+ templateId: string
+ currentBuildId?: string
+ selectedBuildId: string | null
+ onSelect: (buildId: string | null, source: BuildSelectionSource) => void
+ disabled?: boolean
+}
+
+export default function BuildPicker({
+ open,
+ teamSlug,
+ templateId,
+ currentBuildId,
+ selectedBuildId,
+ onSelect,
+ disabled,
+}: BuildPickerProps) {
+ const trpc = useTRPC()
+ const [searchValue, setSearchValue] = useState('')
+ const debouncedSearch = useDebouncedValue(searchValue.trim(), 300)
+ const isUuid = isValidUuid(debouncedSearch)
+
+ // Fetch one extra so we can still show DEFAULT_LIMIT rows after filtering out
+ // the currently-assigned build.
+ const defaultQuery = useQuery(
+ trpc.builds.list.queryOptions(
+ {
+ teamSlug,
+ buildIdOrTemplate: templateId,
+ statuses: ['success'],
+ limit: DEFAULT_LIMIT + 1,
+ },
+ {
+ enabled: open,
+ staleTime: 30_000,
+ refetchOnWindowFocus: false,
+ }
+ )
+ )
+
+ const searchQuery = useQuery(
+ trpc.builds.list.queryOptions(
+ {
+ teamSlug,
+ buildIdOrTemplate: debouncedSearch,
+ statuses: ['success'],
+ limit: 1,
+ },
+ {
+ enabled: open && isUuid,
+ staleTime: 30_000,
+ refetchOnWindowFocus: false,
+ retry: false,
+ }
+ )
+ )
+
+ const isSearchMode = debouncedSearch.length > 0 && isUuid
+
+ const defaultBuilds = useMemo(() => {
+ const all = defaultQuery.data?.data ?? []
+ const filtered = currentBuildId
+ ? all.filter((b) => b.id !== currentBuildId)
+ : all
+ return filtered.slice(0, DEFAULT_LIMIT)
+ }, [defaultQuery.data, currentBuildId])
+
+ const searchResult = useMemo(() => {
+ if (!isSearchMode) return null
+ const build = searchQuery.data?.data[0]
+ if (!build) return { kind: 'not-found' as const }
+ if (build.templateId !== templateId) return { kind: 'not-found' as const }
+ if (currentBuildId && build.id === currentBuildId) {
+ return { kind: 'already-assigned' as const, build }
+ }
+ return { kind: 'found' as const, build }
+ }, [isSearchMode, searchQuery.data, templateId, currentBuildId])
+
+ useEffect(() => {
+ if (!selectedBuildId) return
+ if (isSearchMode) {
+ if (
+ searchResult?.kind === 'found' &&
+ searchResult.build.id === selectedBuildId
+ ) {
+ return
+ }
+ onSelect(null, 'search')
+ return
+ }
+ if (!defaultBuilds.some((b) => b.id === selectedBuildId)) {
+ onSelect(null, 'default')
+ }
+ }, [selectedBuildId, isSearchMode, searchResult, defaultBuilds, onSelect])
+
+ return (
+
+ )
+}
+
+interface PickerBodyProps {
+ isSearchMode: boolean
+ defaultQuery: BuildsQueryResult
+ searchQuery: BuildsQueryResult
+ searchResult:
+ | { kind: 'found'; build: ListedBuildModel }
+ | { kind: 'already-assigned'; build: ListedBuildModel }
+ | { kind: 'not-found' }
+ | null
+ defaultBuilds: ListedBuildModel[]
+ selectedBuildId: string | null
+ onSelect: (buildId: string | null, source: BuildSelectionSource) => void
+ disabled?: boolean
+}
+
+function PickerBody({
+ isSearchMode,
+ defaultQuery,
+ searchQuery,
+ searchResult,
+ defaultBuilds,
+ selectedBuildId,
+ onSelect,
+ disabled,
+}: PickerBodyProps) {
+ if (isSearchMode) {
+ if (searchQuery.isPending) {
+ return
+ }
+ if (searchQuery.isError) {
+ return (
+ }
+ title="Failed to look up build."
+ action={
+
+ }
+ />
+ )
+ }
+ if (!searchResult || searchResult.kind === 'not-found') {
+ return (
+ }
+ title="No build found"
+ />
+ )
+ }
+ if (searchResult.kind === 'already-assigned') {
+ return
+ }
+ return (
+ onSelect(value || null, 'search')}
+ className="flex flex-col gap-1"
+ aria-label="Build search result"
+ >
+
+
+ )
+ }
+
+ if (defaultQuery.isPending) {
+ return
+ }
+ if (defaultQuery.isError) {
+ return (
+ }
+ title="Failed to load builds."
+ action={
+
+ }
+ />
+ )
+ }
+ if (defaultBuilds.length === 0) {
+ return (
+ }
+ title="No ready builds yet"
+ description="Latest successful builds appear here."
+ />
+ )
+ }
+ return (
+ onSelect(value || null, 'default')}
+ className="flex flex-col gap-0.5"
+ aria-label="Recent ready builds"
+ >
+ {defaultBuilds.map((build) => (
+
+ ))}
+
+ )
+}
+
+interface BuildSearchInputProps {
+ value: string
+ onChange: (next: string) => void
+ disabled?: boolean
+}
+
+function BuildSearchInput({
+ value,
+ onChange,
+ disabled,
+}: BuildSearchInputProps) {
+ const id = useId()
+ return (
+
+ )
+}
+
+function SkeletonRows({ count }: { count: number }) {
+ return (
+
+ {Array.from({ length: count }, (_, i) => (
+ -
+
+
+
+
+ ))}
+
+ )
+}
+
+interface PickerMessageProps {
+ icon: ReactElement
+ title: string
+ description?: string
+ action?: ReactElement
+}
+
+function AlreadyAssignedMessage() {
+ return (
+
+ )
+}
+
+function PickerMessage({
+ icon,
+ title,
+ description,
+ action,
+}: PickerMessageProps) {
+ return (
+
+ {icon}
+
{title}
+ {description ? (
+
+ {description}
+
+ ) : null}
+ {action ?
{action}
: null}
+
+
+ {label}
+
+
+ {buildId}
+
+
+ )
+}
diff --git a/src/features/dashboard/templates/tags/components/tag-dialog-footer.tsx b/src/features/dashboard/templates/tags/components/tag-dialog-footer.tsx
new file mode 100644
index 000000000..95a71b99e
--- /dev/null
+++ b/src/features/dashboard/templates/tags/components/tag-dialog-footer.tsx
@@ -0,0 +1,116 @@
+'use client'
+
+import type { ComponentProps } from 'react'
+import { cn } from '@/lib/utils/ui'
+import { Button } from '@/ui/primitives/button'
+import { DialogFooter } from '@/ui/primitives/dialog'
+import { Loader } from '@/ui/primitives/loader'
+import type { TagDialogStage } from '../helpers'
+
+export type { TagDialogStage }
+
+type BaseProps = {
+ stage: TagDialogStage
+ canSubmit: boolean
+ errorMessage: string | null
+ submitLabel: string
+ pendingLabel: string
+ onCancel: () => void
+ onDismiss: () => void
+}
+
+type SubmitWiring =
+ | { formId: string; onSubmit?: never }
+ | { formId?: never; onSubmit: () => void }
+
+type Props = BaseProps & SubmitWiring
+
+export function TagDialogFooter({
+ stage,
+ canSubmit,
+ errorMessage,
+ submitLabel,
+ pendingLabel,
+ onCancel,
+ onDismiss,
+ formId,
+ onSubmit,
+}: Props) {
+ const submitTrigger: ComponentProps = formId
+ ? { type: 'submit', form: formId }
+ : { onClick: onSubmit }
+
+ switch (stage) {
+ case 'success':
+ return (
+
+
+
+ )
+ case 'pending':
+ return (
+
+
+
+
+
+ {pendingLabel}…
+
+
+
+ )
+ case 'error':
+ return (
+
+
+
+
+
+
+
+ )
+ default:
+ return (
+
+
+
+
+
+
+
+ )
+ }
+}
+
+function InlineMessage({
+ stage,
+ errorMessage,
+}: {
+ stage: Exclude
+ errorMessage: string | null
+}) {
+ const isError = stage === 'error'
+ const text = isError ? (errorMessage ?? 'Action failed.') : '\u00a0'
+
+ return (
+
+ {text}
+
+ )
+}
diff --git a/src/features/dashboard/templates/tags/components/tag-dialog-stage-transition.tsx b/src/features/dashboard/templates/tags/components/tag-dialog-stage-transition.tsx
new file mode 100644
index 000000000..db7dda126
--- /dev/null
+++ b/src/features/dashboard/templates/tags/components/tag-dialog-stage-transition.tsx
@@ -0,0 +1,37 @@
+'use client'
+
+import { AnimatePresence, motion, useReducedMotion } from 'motion/react'
+import type { ReactNode } from 'react'
+import { cn, EASE_IN_OUT_QUART } from '@/lib/utils/ui'
+
+interface TagDialogStageTransitionProps {
+ phase: string
+ className?: string
+ children: ReactNode
+}
+
+export function TagDialogStageTransition({
+ phase,
+ className,
+ children,
+}: TagDialogStageTransitionProps) {
+ const reduceMotion = useReducedMotion()
+
+ return (
+
+
+ {children}
+
+
+ )
+}
diff --git a/src/features/dashboard/templates/tags/components/tag-dialog-success.tsx b/src/features/dashboard/templates/tags/components/tag-dialog-success.tsx
new file mode 100644
index 000000000..c49f613e1
--- /dev/null
+++ b/src/features/dashboard/templates/tags/components/tag-dialog-success.tsx
@@ -0,0 +1,39 @@
+'use client'
+
+import { cn } from '@/lib/utils/ui'
+import { CheckIcon } from '@/ui/primitives/icons'
+import { MiddleTruncate } from '@/ui/primitives/middle-truncate'
+
+interface TagDialogSuccessProps {
+ tag: string
+ message: string
+ className?: string
+}
+
+export function TagDialogSuccess({
+ tag,
+ message,
+ className,
+}: TagDialogSuccessProps) {
+ return (
+
+
+
+
+ ‘
+
+ ’
+
+ {message}
+
+
+
+
+
+ {hasSearch ? 'No matching tags' : 'No tags yet'}
+
+
+ {hasSearch
+ ? 'Try a different search term.'
+ : 'Tags identify builds. Assign one when you promote a build to a named release.'}
+
+
+
+
+
+
+
+
+
+
+
+
+ Tags identify builds and can only be assigned to one build at once.{' '}
+
+ Read more
+
+ .
+
+ {!hasSearch && (
+
+ {total} tags in total
+
+ )}
+
+
+
+
+ No assignment history for tag{' '}
+ {tag}.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {
+ e.preventDefault()
+ setMenuOpen(false)
+ setDeleteOpen(true)
+ }}
+ >
+
+ Delete
+
+
+
+
+
+
+
+
+
+ Assigned to
+
+
+ )
+
+ if (isCurrentBuild) {
+ return (
+
+ {buildSummary}
+
+ Currently assigned
+
+
+ )
+ }
+
+ const handleClick = (e: MouseEvent) => {
+ const target = e.target as HTMLElement | null
+ if (target?.closest('button, a, [role=button]') !== e.currentTarget) {
+ return
+ }
+ onRequestRollback(assignment)
+ }
+ const handleKeyDown = (e: KeyboardEvent) => {
+ if (e.currentTarget !== e.target) return
+ if (e.key === 'Enter' || e.key === ' ') {
+ e.preventDefault()
+ onRequestRollback(assignment)
+ }
+ }
+
+ return (
+ // biome-ignore lint/a11y/useSemanticElements: The row contains nested links, so a button would be invalid HTML.
+
+ {buildSummary}
+
+
+ Rollback to this build
+
+
+ )
+}
diff --git a/src/features/dashboard/templates/tags/history/tag-history-view.tsx b/src/features/dashboard/templates/tags/history/tag-history-view.tsx
new file mode 100644
index 000000000..55b5538cf
--- /dev/null
+++ b/src/features/dashboard/templates/tags/history/tag-history-view.tsx
@@ -0,0 +1,249 @@
+'use client'
+
+import {
+ keepPreviousData,
+ useInfiniteQuery,
+ useQueryClient,
+ useSuspenseQuery,
+} from '@tanstack/react-query'
+import { useVirtualizer } from '@tanstack/react-virtual'
+import { useRouter } from 'next/navigation'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { PROTECTED_URLS } from '@/configs/urls'
+import type { TemplateTagAssignment } from '@/core/modules/templates/models'
+import { LoadMoreButton } from '@/features/dashboard/templates/builds/table-cells'
+import { getTemplateDisplayName } from '@/features/dashboard/templates/helpers'
+import { useTRPC } from '@/trpc/client'
+import { Loader } from '@/ui/primitives/loader'
+import { TAG_HISTORY_PAGE_LIMIT } from '../constants'
+import RollbackTagDialog, { type RollbackSurface } from '../rollback-dialog'
+import { TagHistoryEmpty } from './tag-history-empty'
+import { TagHistoryHeader } from './tag-history-header'
+import { TagHistoryRow } from './tag-history-row'
+
+interface TagHistoryViewProps {
+ teamSlug: string
+ templateId: string
+ tag: string
+}
+
+const ROW_HEIGHT_PX = 32
+const VIRTUAL_OVERSCAN = 12
+const PREFETCH_THRESHOLD = 8
+const HEADER_SCROLL_MARGIN_PX = 44
+
+export default function TagHistoryView({
+ teamSlug,
+ templateId,
+ tag,
+}: TagHistoryViewProps) {
+ 'use no memo'
+
+ const trpc = useTRPC()
+ const queryClient = useQueryClient()
+ const router = useRouter()
+ const scrollRef = useRef(null)
+
+ useEffect(() => {
+ if (typeof window === 'undefined') return
+ const url = new URL(window.location.href)
+ if (!url.searchParams.has('tags-table')) return
+ url.searchParams.delete('tags-table')
+ window.history.replaceState(window.history.state, '', url)
+ }, [])
+
+ const { data: templateData } = useSuspenseQuery(
+ trpc.templates.getTemplate.queryOptions(
+ { teamSlug, templateId },
+ {
+ refetchOnMount: false,
+ refetchOnWindowFocus: true,
+ refetchOnReconnect: true,
+ }
+ )
+ )
+
+ const templateName = useMemo(
+ () => getTemplateDisplayName(templateData.template),
+ [templateData]
+ )
+
+ const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isPending } =
+ useInfiniteQuery(
+ trpc.templates.getTagAssignments.infiniteQueryOptions(
+ { teamSlug, templateId, tag, limit: TAG_HISTORY_PAGE_LIMIT },
+ {
+ getNextPageParam: (page) => page.nextCursor ?? undefined,
+ initialCursor: undefined,
+ placeholderData: keepPreviousData,
+ refetchOnWindowFocus: true,
+ }
+ )
+ )
+
+ const assignments = useMemo(
+ () => data?.pages.flatMap((p) => p.data) ?? [],
+ [data]
+ )
+
+ const primary = assignments[0]
+ const previous = assignments[1]
+ const history = useMemo(() => assignments.slice(1), [assignments])
+
+ const virtualizer = useVirtualizer({
+ count: history.length,
+ getScrollElement: () => scrollRef.current,
+ estimateSize: () => ROW_HEIGHT_PX,
+ overscan: VIRTUAL_OVERSCAN,
+ scrollMargin: HEADER_SCROLL_MARGIN_PX,
+ })
+
+ const virtualItems = virtualizer.getVirtualItems()
+ const lastVisibleIndex = virtualItems[virtualItems.length - 1]?.index ?? -1
+
+ useEffect(() => {
+ if (
+ hasNextPage &&
+ !isFetchingNextPage &&
+ lastVisibleIndex >= history.length - PREFETCH_THRESHOLD
+ ) {
+ fetchNextPage()
+ }
+ }, [
+ hasNextPage,
+ isFetchingNextPage,
+ lastVisibleIndex,
+ history.length,
+ fetchNextPage,
+ ])
+
+ const tagAssignmentsQueryKey =
+ trpc.templates.getTagAssignments.infiniteQueryOptions({
+ teamSlug,
+ templateId,
+ tag,
+ }).queryKey
+
+ const handleTagDeleted = async () => {
+ await queryClient.invalidateQueries({ queryKey: tagAssignmentsQueryKey })
+ router.push(PROTECTED_URLS.TEMPLATE_TAGS(teamSlug, templateId))
+ }
+
+ const handleRolledBack = useCallback(async () => {
+ await queryClient.invalidateQueries({ queryKey: tagAssignmentsQueryKey })
+ }, [queryClient, tagAssignmentsQueryKey])
+
+ const [rollbackRequest, setRollbackRequest] = useState<{
+ target: TemplateTagAssignment
+ currentBuildId: string
+ surface: RollbackSurface
+ } | null>(null)
+
+ const requestRollback = useCallback(
+ (target: TemplateTagAssignment, surface: RollbackSurface) => {
+ if (!primary) return
+ setRollbackRequest({
+ target,
+ currentBuildId: primary.buildId,
+ surface,
+ })
+ },
+ [primary]
+ )
+
+ const handleRequestRowRollback = useCallback(
+ (target: TemplateTagAssignment) => requestRollback(target, 'history-row'),
+ [requestRollback]
+ )
+
+ const handleRequestHeaderRollback = previous
+ ? () => requestRollback(previous, 'history-header')
+ : undefined
+
+ if (isPending) {
+ return (
+
+
+
+ )
+ }
+
+ if (!primary) {
+ return
+ }
+
+ return (
+
+
+
+
+
+ {virtualItems.map((virtualRow) => {
+ const assignment = history[virtualRow.index]
+ if (!assignment) return null
+ return (
+
virtualizer.measureElement(node)}
+ className="absolute left-0 right-0 border-b border-stroke/80"
+ style={{
+ transform: `translateY(${virtualRow.start - HEADER_SCROLL_MARGIN_PX}px)`,
+ }}
+ >
+
+
+ )
+ })}
+
+
+ {hasNextPage && (
+
+ fetchNextPage()}
+ />
+
+ )}
+
+
+
{
+ if (!next) setRollbackRequest(null)
+ }}
+ tag={tag}
+ currentBuildId={rollbackRequest?.currentBuildId ?? ''}
+ targetBuildId={rollbackRequest?.target.buildId ?? ''}
+ teamSlug={teamSlug}
+ templateId={templateId}
+ templateName={templateName}
+ surface={rollbackRequest?.surface ?? 'history-row'}
+ onRolledBack={handleRolledBack}
+ />
+
+
+
+
+
+
+
+
+ e.stopPropagation()}
+ >
+
+
+
+
+ {
+ e.preventDefault()
+ setMenuOpen(false)
+ setDeleteOpen(true)
+ }}
+ >
+
+ Delete
+
+
+
+
+
+
+
+
+
+
+ {table.getHeaderGroups().map((headerGroup) => (
+
+ {headerGroup.headers.map((header) => (
+ s.id === header.id)?.desc}
+ align={header.id === 'actions' ? 'right' : 'left'}
+ className={cn(
+ 'h-auto px-0',
+ header.id === 'tag' && 'flex-1 min-w-0',
+ header.id === 'assignedAt' && 'w-[178px] shrink-0',
+ header.id === 'actions' &&
+ 'w-[203px] max-sm:w-4 shrink-0 justify-end'
+ )}
+ style={
+ header.id === 'tag' ? undefined : { width: undefined }
+ }
+ >
+
+ {header.isPlaceholder
+ ? null
+ : flexRender(
+ header.column.columnDef.header,
+ header.getContext()
+ )}
+
+
+ ))}
+
+ ))}
+
+
+ {showLoader && (
+
+
+
+ )}
+
+ {showEmpty && }
+
+ {hasData && (
+
+ {virtualItems.map((virtualRow) => {
+ const row = rows[virtualRow.index]
+ if (!row) return null
+ return (
+
virtualizer.measureElement(node)}
+ className={cn(
+ 'absolute left-0 right-0',
+ 'hover:z-20 focus-within:z-10',
+ 'border-b border-stroke/80',
+ 'has-[button[aria-haspopup=menu][data-state=open]]:z-10'
+ )}
+ style={{
+ transform: `translateY(${
+ virtualRow.start - HEADER_SCROLL_MARGIN_PX
+ }px)`,
+ }}
+ >
+
+
+ )
+ })}
+
+
+
+ )}
+
+
+
+
+ {canExpand && (
+
+
+
+ )}
+
+ {row.getVisibleCells().map((cell) => (
+
+ {flexRender(cell.column.columnDef.cell, cell.getContext())}
+
+ ))}
+
+
+
+
+
+ {isExpanded && (
+
+ {row.original.assignments.slice(1).map((assignment) => (
+
+ ))}
+ {row.original.hasMore && (
+
+ )}
+
+ )}
+
+
+ Allowed:
+ a-z,
+ 0-9
+ ,(
+ .
+ )
+ ,(
+ _
+ )
+ ,(
+ -
+ )
+
+
+ Max {maxLength} characters
+
+
+
+
+ )
+}
diff --git a/src/features/dashboard/templates/tags/tag-name-field.tsx b/src/features/dashboard/templates/tags/tag-name-field.tsx
new file mode 100644
index 000000000..c78a880cb
--- /dev/null
+++ b/src/features/dashboard/templates/tags/tag-name-field.tsx
@@ -0,0 +1,78 @@
+'use client'
+
+import { type ReactElement, useId } from 'react'
+import { cn } from '@/lib/utils'
+import { Loader } from '@/ui/primitives/loader'
+import TagFormatInvalidTooltip from './tag-format-invalid-tooltip'
+
+export type TagNameStatus =
+ | 'idle'
+ | 'invalid'
+ | 'checking'
+ | 'exists'
+ | 'available'
+
+interface TagNameFieldProps {
+ value: string
+ onChange: (value: string) => void
+ status: TagNameStatus
+ disabled?: boolean
+ autoFocus?: boolean
+}
+
+const STATUS_INDICATOR: Partial> = {
+ checking: ,
+ exists: (
+
+ Already exists
+
+ ),
+ invalid: ,
+}
+
+export default function TagNameField({
+ value,
+ onChange,
+ status,
+ disabled,
+ autoFocus,
+}: TagNameFieldProps) {
+ const id = useId()
+ const indicator = STATUS_INDICATOR[status]
+ const showAsInvalid = status === 'invalid' || status === 'exists'
+
+ return (
+
+ )
+}
diff --git a/src/features/dashboard/templates/tags/types.ts b/src/features/dashboard/templates/tags/types.ts
new file mode 100644
index 000000000..001feab55
--- /dev/null
+++ b/src/features/dashboard/templates/tags/types.ts
@@ -0,0 +1,8 @@
+import type { TemplateTagAssignment } from '@/core/modules/templates/models'
+
+export interface TagGroup {
+ tag: string
+ primaryAssignment: TemplateTagAssignment
+ assignments: TemplateTagAssignment[]
+ hasMore: boolean
+}
diff --git a/src/features/dashboard/templates/tags/use-tag-assignment-mutation.ts b/src/features/dashboard/templates/tags/use-tag-assignment-mutation.ts
new file mode 100644
index 000000000..1c7ba8a8a
--- /dev/null
+++ b/src/features/dashboard/templates/tags/use-tag-assignment-mutation.ts
@@ -0,0 +1,67 @@
+'use client'
+
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { useCallback } from 'react'
+import { useTRPC } from '@/trpc/client'
+import { type TagDialogStage, tagDialogStageFromMutation } from './helpers'
+import { trackTagTableInteraction } from './table-config'
+
+export type TagOperation = 'assign' | 'reassign' | 'rollback'
+
+interface UseTagAssignmentMutationOptions {
+ teamSlug: string
+ templateId: string
+ operation: TagOperation
+ analyticsContext?: Record
+ onSuccess?: () => void | Promise
+}
+
+export function useTagAssignmentMutation({
+ teamSlug,
+ templateId,
+ operation,
+ analyticsContext,
+ onSuccess,
+}: UseTagAssignmentMutationOptions) {
+ const trpc = useTRPC()
+ const queryClient = useQueryClient()
+
+ const invalidate = useCallback(() => {
+ queryClient.invalidateQueries({
+ queryKey: trpc.templates.getTagGroups.infiniteQueryOptions({
+ teamSlug,
+ templateId,
+ }).queryKey,
+ })
+ queryClient.invalidateQueries({
+ queryKey: trpc.templates.getTagCount.queryOptions({
+ teamSlug,
+ templateId,
+ }).queryKey,
+ })
+ }, [queryClient, trpc, teamSlug, templateId])
+
+ const mutation = useMutation(
+ trpc.templates.assignTag.mutationOptions({
+ onSuccess: () => {
+ invalidate()
+ trackTagTableInteraction(
+ `${operation} succeeded`,
+ analyticsContext ?? {}
+ )
+ void onSuccess?.()
+ },
+ onError: (error) => {
+ trackTagTableInteraction(`${operation} failed`, {
+ ...analyticsContext,
+ error_status: error.data?.httpStatus ?? null,
+ error_code: error.data?.code ?? null,
+ })
+ },
+ })
+ )
+
+ const stage: TagDialogStage = tagDialogStageFromMutation(mutation)
+
+ return { mutation, stage }
+}
diff --git a/src/lib/hooks/use-debounced-value.ts b/src/lib/hooks/use-debounced-value.ts
new file mode 100644
index 000000000..e75ee907e
--- /dev/null
+++ b/src/lib/hooks/use-debounced-value.ts
@@ -0,0 +1,12 @@
+import { useEffect, useState } from 'react'
+
+export function useDebouncedValue(value: T, delay: number): T {
+ const [debounced, setDebounced] = useState(value)
+
+ useEffect(() => {
+ const timeout = setTimeout(() => setDebounced(value), delay)
+ return () => clearTimeout(timeout)
+ }, [value, delay])
+
+ return debounced
+}
diff --git a/src/lib/hooks/use-filter-change-tracking.ts b/src/lib/hooks/use-filter-change-tracking.ts
new file mode 100644
index 000000000..f130cf722
--- /dev/null
+++ b/src/lib/hooks/use-filter-change-tracking.ts
@@ -0,0 +1,26 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+/**
+ * Tracks when any value in `deps` changes after the first render and exposes a
+ * `isFilterRefetching` flag that callers clear once their underlying fetch
+ * settles. Use to drive a refetch overlay on tables that paginate via
+ * server-side filters/sort.
+ */
+export function useFilterChangeTracking(deps: unknown[]) {
+ const [isFilterRefetching, setIsFilterRefetching] = useState(false)
+ const isFirstRender = useRef(true)
+
+ useEffect(() => {
+ if (isFirstRender.current) {
+ isFirstRender.current = false
+ return
+ }
+ setIsFilterRefetching(true)
+ }, deps)
+
+ const clearFilterRefetching = useCallback(() => {
+ setIsFilterRefetching(false)
+ }, [])
+
+ return { isFilterRefetching, clearFilterRefetching }
+}
diff --git a/src/lib/hooks/use-now.ts b/src/lib/hooks/use-now.ts
new file mode 100644
index 000000000..aed640395
--- /dev/null
+++ b/src/lib/hooks/use-now.ts
@@ -0,0 +1,15 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+
+export function useNow(intervalMs: number, enabled = true): number {
+ const [now, setNow] = useState(() => Date.now())
+
+ useEffect(() => {
+ if (!enabled) return
+ const id = setInterval(() => setNow(Date.now()), intervalMs)
+ return () => clearInterval(id)
+ }, [intervalMs, enabled])
+
+ return now
+}
diff --git a/src/lib/hooks/use-page-title.ts b/src/lib/hooks/use-page-title.ts
new file mode 100644
index 000000000..daf0c4bb1
--- /dev/null
+++ b/src/lib/hooks/use-page-title.ts
@@ -0,0 +1,42 @@
+'use client'
+
+import { useEffect } from 'react'
+import { create } from 'zustand'
+import type { TitleSegment } from '@/configs/layout'
+
+export interface PageTitleOverride {
+ title: string | TitleSegment[]
+ copyValue?: string
+}
+
+interface PageTitleStore {
+ override: PageTitleOverride | null
+ setOverride: (override: PageTitleOverride | null) => void
+}
+
+export const usePageTitleStore = create((set) => ({
+ override: null,
+ setOverride: (override) => set({ override }),
+}))
+
+export function usePageTitle(
+ title: string | TitleSegment[] | null,
+ copyValue?: string
+) {
+ useEffect(() => {
+ if (title === null) {
+ usePageTitleStore.getState().setOverride(null)
+ return
+ }
+
+ usePageTitleStore.getState().setOverride({ title, copyValue })
+
+ return () => {
+ // Don't clear if a subsequent page has already replaced our override.
+ const current = usePageTitleStore.getState().override
+ if (current && current.title === title) {
+ usePageTitleStore.getState().setOverride(null)
+ }
+ }
+ }, [title, copyValue])
+}
diff --git a/src/lib/utils/ui.ts b/src/lib/utils/ui.ts
index 49b6770ce..4a753aee7 100644
--- a/src/lib/utils/ui.ts
+++ b/src/lib/utils/ui.ts
@@ -7,7 +7,9 @@ export function cn(...inputs: ClassValue[]) {
/**
* Animation easing curves
- * ⚠️ Must be kept in sync with theme.css utilities (anim-ease-appear, anim-ease-transform)
+ * ⚠️ Must be kept in sync with theme.css `--ease-*` tokens.
*/
export const EASE_APPEAR = [0.23, 1, 0.32, 1] as const // ease-out-quint
export const EASE_TRANSFORM = [0.79, 0.14, 0.15, 0.86] as const // ease-in-out-circ
+export const EASE_IN_OUT_QUART = [0.77, 0, 0.18, 1] as const // ease-in-out-quart
+export const EASE_IN_OUT_QUINT = [0.83, 0, 0.17, 1] as const // ease-in-out-quint
diff --git a/src/styles/globals.css b/src/styles/globals.css
index aa092142d..3b536c73e 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -10,6 +10,10 @@
border-radius: 2px;
}
+html {
+ caret-color: var(--accent-main-highlight);
+}
+
*::selection {
background-color: var(--accent-main-bg);
}
diff --git a/src/styles/theme.css b/src/styles/theme.css
index 2d05dd6cc..67d639654 100644
--- a/src/styles/theme.css
+++ b/src/styles/theme.css
@@ -12,16 +12,23 @@
@apply bg-bg text-fg prose-body antialiased;
}
+ /* Inline heading styles to allow utility overrides. */
h1,
h2,
h3 {
- @apply prose-headline uppercase;
+ font-size: 1.25rem;
+ line-height: 1.25rem;
+ font-weight: 700;
+ text-transform: uppercase;
}
h4,
h5,
h6 {
- @apply prose-headline-small uppercase;
+ font-size: 1rem;
+ line-height: 1.25rem;
+ font-weight: 700;
+ text-transform: uppercase;
}
.font-mono {
@@ -480,6 +487,10 @@
--animate-shiny-text: shiny-text 0.5s linear infinite;
--animate-loader-slash: loader-slash 0.4s linear infinite;
--animate-loader-square: loader-square 0.4s linear infinite;
+
+ /* Easings (kept in sync with src/lib/utils/ui.ts) */
+ --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
+ --ease-in-out-quint: cubic-bezier(0.83, 0, 0.17, 1);
}
/* Container */
diff --git a/src/ui/copy-button-inline.tsx b/src/ui/copy-button-inline.tsx
index 3e5771bb0..5f4959cc4 100644
--- a/src/ui/copy-button-inline.tsx
+++ b/src/ui/copy-button-inline.tsx
@@ -10,12 +10,14 @@ export default function CopyButtonInline({
children,
className,
iconPosition = 'right',
+ truncate = true,
'aria-label': ariaLabel,
}: {
value: string
children: React.ReactNode
className?: string
iconPosition?: 'left' | 'right'
+ truncate?: boolean
'aria-label'?: string
}) {
const [wasCopied, copy] = useClipboard(1000)
@@ -72,7 +74,9 @@ export default function CopyButtonInline({
)}
>
{iconPosition === 'left' && icon}
- {children}
+
+ {children}
+
{iconPosition === 'right' && icon}
)
diff --git a/src/ui/hover-prefetch-link.tsx b/src/ui/hover-prefetch-link.tsx
index 80e7f6176..00e8d1754 100644
--- a/src/ui/hover-prefetch-link.tsx
+++ b/src/ui/hover-prefetch-link.tsx
@@ -1,11 +1,16 @@
'use client'
-import Link, { type LinkProps } from 'next/link'
-import { forwardRef, useState } from 'react'
+import Link from 'next/link'
+import { type ComponentPropsWithoutRef, forwardRef, useState } from 'react'
+
+type HoverPrefetchLinkProps = Omit<
+ ComponentPropsWithoutRef,
+ 'prefetch' | 'onMouseEnter'
+>
export const HoverPrefetchLink = forwardRef<
HTMLAnchorElement,
- Omit & { children: React.ReactNode }
+ HoverPrefetchLinkProps
>(function HoverPrefetchLink({ href, children, ...props }, ref) {
const [active, setActive] = useState(false)
diff --git a/src/ui/primitives/button.tsx b/src/ui/primitives/button.tsx
index 25219ab5d..2f370fb71 100644
--- a/src/ui/primitives/button.tsx
+++ b/src/ui/primitives/button.tsx
@@ -72,6 +72,7 @@ const buttonVariants = cva(
size: {
default:
'[&_svg]:size-4 h-9 py-1.5 gap-1 [&:has(svg)]:pr-3 [&:has(svg)]:pl-2.5 px-4',
+ small: 'h-7 py-1.5 gap-1 [&_svg]:size-4 px-2.5',
none: 'gap-1 [&_svg]:size-4',
},
},
diff --git a/src/ui/primitives/dialog.tsx b/src/ui/primitives/dialog.tsx
index df083de53..1a8473df4 100644
--- a/src/ui/primitives/dialog.tsx
+++ b/src/ui/primitives/dialog.tsx
@@ -72,7 +72,7 @@ function DialogContent({
'bg-bg-1 text-body text-fg-secondary',
'fixed top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%]',
'z-50 grid w-[calc(100%-2rem)] max-h-[calc(100svh-2rem)] overflow-y-auto sm:w-full sm:max-w-lg',
- 'gap-3 border p-5 pt-4 focus:ring-0 focus:outline-none',
+ 'gap-3 border px-5 py-4 focus:ring-0 focus:outline-none',
'data-[state=open]:animate-in data-[state=closed]:animate-out',
'anim-ease-appear anim-duration-normal', // exit animation is faster
'data-[state=open]:anim-duration-slow',
@@ -88,8 +88,8 @@ function DialogContent({
)
diff --git a/src/ui/primitives/icons.tsx b/src/ui/primitives/icons.tsx
index 126e7797a..1d84bd373 100644
--- a/src/ui/primitives/icons.tsx
+++ b/src/ui/primitives/icons.tsx
@@ -578,6 +578,32 @@ export const IndicatorDotsIcon = ({ className, ...props }: IconProps) => (
)
+export const MoreActionsIcon = ({ className, ...props }: IconProps) => (
+
+)
+
export const UnhealthyIcon = ({ className, ...props }: IconProps) => (
)
+export const TriangleIcon = ({ className, ...props }: IconProps) => (
+
+)
+
export const TrashIcon = ({ className, ...props }: IconProps) => (
)
+export const UndoIcon = ({ className, ...props }: IconProps) => (
+
+)
+
export const RemoveIcon = ({ className, ...props }: IconProps) => (
)
+
+export const TagIcon = ({ className, ...props }: IconProps) => (
+
+)
diff --git a/src/ui/primitives/middle-truncate.tsx b/src/ui/primitives/middle-truncate.tsx
new file mode 100644
index 000000000..9ac375226
--- /dev/null
+++ b/src/ui/primitives/middle-truncate.tsx
@@ -0,0 +1,34 @@
+import type * as React from 'react'
+import { cn } from '@/lib/utils/ui'
+
+const DEFAULT_TAIL_CHARS = 6
+
+export interface MiddleTruncateProps extends React.ComponentProps<'span'> {
+ text: string
+ tail?: number
+}
+
+export function MiddleTruncate({
+ text,
+ tail = DEFAULT_TAIL_CHARS,
+ className,
+ ...props
+}: MiddleTruncateProps) {
+ if (text.length <= tail * 2) {
+ return (
+
+ {text}
+
+ )
+ }
+
+ const head = text.slice(0, -tail)
+ const end = text.slice(-tail)
+
+ return (
+
+ {head}
+ {end}
+
+ )
+}
diff --git a/src/ui/row-hover-frame.tsx b/src/ui/row-hover-frame.tsx
new file mode 100644
index 000000000..cb1252f75
--- /dev/null
+++ b/src/ui/row-hover-frame.tsx
@@ -0,0 +1,39 @@
+import { cn } from '@/lib/utils/ui'
+
+interface RowHoverFrameProps {
+ className?: string
+}
+
+export function RowHoverFrame({ className }: RowHoverFrameProps) {
+ return (
+
+
+
+
+
+
+ )
+}
diff --git a/tests/unit/assign-tag-dialog-helpers.test.ts b/tests/unit/assign-tag-dialog-helpers.test.ts
new file mode 100644
index 000000000..10a6885d0
--- /dev/null
+++ b/tests/unit/assign-tag-dialog-helpers.test.ts
@@ -0,0 +1,78 @@
+import { describe, expect, it } from 'vitest'
+import {
+ buildAssignTarget,
+ isValidTagShape,
+ isValidUuid,
+ normalizeTagInput,
+ TAG_MAX_LENGTH,
+} from '@/features/dashboard/templates/tags/helpers'
+
+describe('normalizeTagInput', () => {
+ it('lowercases ASCII letters so user input matches the server normalization', () => {
+ expect(normalizeTagInput('MyRelease')).toBe('myrelease')
+ })
+
+ it('replaces every whitespace character with a hyphen without collapsing runs', () => {
+ expect(normalizeTagInput('new release')).toBe('new-release')
+ expect(normalizeTagInput('new release')).toBe('new--release')
+ expect(normalizeTagInput('paste\twith\nnewlines')).toBe(
+ 'paste-with-newlines'
+ )
+ })
+
+ it('leaves an already-valid value untouched', () => {
+ expect(normalizeTagInput('v1.2.3-rc4')).toBe('v1.2.3-rc4')
+ })
+})
+
+describe('isValidTagShape', () => {
+ it('accepts the tag charset shared with infra `id.tagRegex`', () => {
+ expect(isValidTagShape('new-release')).toBe(true)
+ expect(isValidTagShape('v1.2.3')).toBe(true)
+ expect(isValidTagShape('snake_case')).toBe(true)
+ })
+
+ it('rejects uppercase characters', () => {
+ expect(isValidTagShape('MyTag')).toBe(false)
+ })
+
+ it('rejects whitespace and reserved chars', () => {
+ expect(isValidTagShape('with space')).toBe(false)
+ expect(isValidTagShape('slash/here')).toBe(false)
+ expect(isValidTagShape('colon:here')).toBe(false)
+ expect(isValidTagShape('')).toBe(false)
+ })
+
+ it('caps length at the infra tag max', () => {
+ expect(isValidTagShape('a'.repeat(TAG_MAX_LENGTH))).toBe(true)
+ expect(isValidTagShape('a'.repeat(TAG_MAX_LENGTH + 1))).toBe(false)
+ })
+})
+
+describe('isValidUuid', () => {
+ it('accepts canonical UUIDs', () => {
+ expect(isValidUuid('bcdaef01-2345-6789-0abc-def123456789')).toBe(true)
+ })
+
+ it('is case insensitive', () => {
+ expect(isValidUuid('BCDAEF01-2345-6789-0ABC-DEF123456789')).toBe(true)
+ })
+
+ it('rejects partial UUIDs', () => {
+ expect(isValidUuid('bcdaef01-2345')).toBe(false)
+ })
+
+ it('rejects malformed UUIDs', () => {
+ expect(isValidUuid('not-a-uuid')).toBe(false)
+ expect(isValidUuid('')).toBe(false)
+ expect(isValidUuid(' bcdaef01-2345-6789-0abc-def123456789 ')).toBe(false)
+ })
+})
+
+describe('buildAssignTarget', () => {
+ it('joins template name and build UUID with a colon', () => {
+ expect(
+ buildAssignTarget('my-template', 'bcdaef01-2345-6789-0abc-def123456789')
+ ).toBe('my-template:bcdaef01-2345-6789-0abc-def123456789')
+ })
+})
diff --git a/tests/unit/tag-groups-helpers.test.ts b/tests/unit/tag-groups-helpers.test.ts
new file mode 100644
index 000000000..674399523
--- /dev/null
+++ b/tests/unit/tag-groups-helpers.test.ts
@@ -0,0 +1,122 @@
+import { describe, expect, it } from 'vitest'
+import {
+ getActiveTagSearch,
+ hasInvalidTagSearchInput,
+ sanitizeTagSearch,
+ serverSortToSorting,
+ sortingToServerSort,
+} from '@/features/dashboard/templates/tags/table-config'
+
+describe('sanitizeTagSearch', () => {
+ it('returns empty for empty input', () => {
+ expect(sanitizeTagSearch('')).toBe('')
+ })
+
+ it('lowercases ASCII letters', () => {
+ expect(sanitizeTagSearch('PROD')).toBe('prod')
+ })
+
+ it('keeps dots, underscores, hyphens', () => {
+ expect(sanitizeTagSearch('a_b-c.d')).toBe('a_b-c.d')
+ })
+
+ it('strips disallowed characters', () => {
+ expect(sanitizeTagSearch('prod@v1!')).toBe('prodv1')
+ expect(sanitizeTagSearch('%')).toBe('')
+ expect(sanitizeTagSearch('a b c')).toBe('abc')
+ })
+
+ it('caps length at 64 characters', () => {
+ const long = 'a'.repeat(80)
+ expect(sanitizeTagSearch(long)).toHaveLength(64)
+ })
+
+ it('treats all-invalid input as empty', () => {
+ expect(sanitizeTagSearch('@@@')).toBe('')
+ })
+})
+
+describe('getActiveTagSearch', () => {
+ it('returns undefined for empty input', () => {
+ expect(getActiveTagSearch('')).toBeUndefined()
+ })
+
+ it('returns sanitized value for valid input', () => {
+ expect(getActiveTagSearch('PROD')).toBe('prod')
+ })
+
+ it('returns undefined while input is invalid', () => {
+ expect(getActiveTagSearch('${}1')).toBeUndefined()
+ expect(getActiveTagSearch('@@@')).toBeUndefined()
+ })
+})
+
+describe('hasInvalidTagSearchInput', () => {
+ it('returns false for empty input', () => {
+ expect(hasInvalidTagSearchInput('')).toBe(false)
+ })
+
+ it('returns false for allowed characters only', () => {
+ expect(hasInvalidTagSearchInput('prod_v1')).toBe(false)
+ expect(hasInvalidTagSearchInput('PROD')).toBe(false)
+ })
+
+ it('returns true when any disallowed character is present', () => {
+ expect(hasInvalidTagSearchInput('${}1')).toBe(true)
+ expect(hasInvalidTagSearchInput('prod@v1')).toBe(true)
+ expect(hasInvalidTagSearchInput('a b')).toBe(true)
+ })
+
+ it('returns true when input exceeds max length', () => {
+ expect(hasInvalidTagSearchInput('a'.repeat(65))).toBe(true)
+ })
+})
+
+describe('sortingToServerSort', () => {
+ it('returns latest_desc for empty sorting', () => {
+ expect(sortingToServerSort([])).toBe('latest_desc')
+ })
+
+ it('returns latest_desc for multi-column sorting (server only supports single)', () => {
+ expect(
+ sortingToServerSort([
+ { id: 'tag', desc: false },
+ { id: 'assignedAt', desc: true },
+ ])
+ ).toBe('latest_desc')
+ })
+
+ it('maps assignedAt desc/asc', () => {
+ expect(sortingToServerSort([{ id: 'assignedAt', desc: true }])).toBe(
+ 'latest_desc'
+ )
+ expect(sortingToServerSort([{ id: 'assignedAt', desc: false }])).toBe(
+ 'latest_asc'
+ )
+ })
+
+ it('maps tag asc/desc', () => {
+ expect(sortingToServerSort([{ id: 'tag', desc: false }])).toBe('name_asc')
+ expect(sortingToServerSort([{ id: 'tag', desc: true }])).toBe('name_desc')
+ })
+
+ it('defaults unknown column id to latest_desc', () => {
+ expect(sortingToServerSort([{ id: 'unknown', desc: false }])).toBe(
+ 'latest_desc'
+ )
+ })
+})
+
+describe('serverSortToSorting', () => {
+ it('round-trips with sortingToServerSort for every variant', () => {
+ const variants = [
+ 'latest_desc',
+ 'latest_asc',
+ 'name_asc',
+ 'name_desc',
+ ] as const
+ for (const v of variants) {
+ expect(sortingToServerSort(serverSortToSorting(v))).toBe(v)
+ }
+ })
+})
diff --git a/tests/unit/templates-repository-assign-tag.test.ts b/tests/unit/templates-repository-assign-tag.test.ts
new file mode 100644
index 000000000..6b4818aed
--- /dev/null
+++ b/tests/unit/templates-repository-assign-tag.test.ts
@@ -0,0 +1,148 @@
+import { describe, expect, it, vi } from 'vitest'
+import { createTemplatesRepository } from '@/core/modules/templates/repository.server'
+
+function createApiResponse(input: {
+ ok: boolean
+ status: number
+ data?: T
+ error?: { message?: string } | null
+}) {
+ return {
+ data: input.data,
+ error: input.error ?? null,
+ response: { ok: input.ok, status: input.status },
+ }
+}
+
+function createDeps(infraPost: ReturnType) {
+ return {
+ apiClient: {
+ GET: vi.fn(),
+ POST: vi.fn(),
+ PATCH: vi.fn(),
+ DELETE: vi.fn(),
+ } as unknown as Parameters<
+ typeof createTemplatesRepository
+ >[1]['apiClient'],
+ infraClient: {
+ GET: vi.fn(),
+ POST: infraPost,
+ PATCH: vi.fn(),
+ DELETE: vi.fn(),
+ } as unknown as Parameters<
+ typeof createTemplatesRepository
+ >[1]['infraClient'],
+ authHeaders: vi.fn(() => ({ 'X-Supabase-Token': 'token' })),
+ resolveAuthUserEmailsById: vi.fn(async () => new Map()),
+ }
+}
+
+const scope = { accessToken: 'token', teamId: 'team-id' }
+
+describe('createTemplatesRepository.assignTag', () => {
+ it('builds the infra target as ":" and forwards the tag', async () => {
+ const post = vi.fn().mockResolvedValue(
+ createApiResponse<{ tags: string[]; buildID: string }>({
+ ok: true,
+ status: 201,
+ data: {
+ tags: ['new-release'],
+ buildID: 'bcdaef01-2345-6789-0abc-def123456789',
+ },
+ })
+ )
+ const repo = createTemplatesRepository(scope, createDeps(post))
+
+ const result = await repo.assignTag({
+ templateName: 'my-template',
+ buildId: 'bcdaef01-2345-6789-0abc-def123456789',
+ tag: 'new-release',
+ })
+
+ expect(result).toEqual({
+ ok: true,
+ data: {
+ tags: ['new-release'],
+ buildID: 'bcdaef01-2345-6789-0abc-def123456789',
+ },
+ })
+ expect(post).toHaveBeenCalledWith(
+ '/templates/tags',
+ expect.objectContaining({
+ body: {
+ target: 'my-template:bcdaef01-2345-6789-0abc-def123456789',
+ tags: ['new-release'],
+ },
+ })
+ )
+ })
+
+ it('maps a 400 response to a validation repo error preserving the server message', async () => {
+ const post = vi.fn().mockResolvedValue(
+ createApiResponse({
+ ok: false,
+ status: 400,
+ error: { message: 'Invalid tag' },
+ })
+ )
+ const repo = createTemplatesRepository(scope, createDeps(post))
+
+ const result = await repo.assignTag({
+ templateName: 'my-template',
+ buildId: 'bcdaef01-2345-6789-0abc-def123456789',
+ tag: 'Bad Tag',
+ })
+
+ expect(result).toEqual({
+ ok: false,
+ error: expect.objectContaining({
+ code: 'validation',
+ status: 400,
+ message: 'Invalid tag',
+ }),
+ })
+ })
+
+ it('maps a 404 response to a not-found repo error', async () => {
+ const post = vi.fn().mockResolvedValue(
+ createApiResponse({
+ ok: false,
+ status: 404,
+ error: { message: 'Template not found' },
+ })
+ )
+ const repo = createTemplatesRepository(scope, createDeps(post))
+
+ const result = await repo.assignTag({
+ templateName: 'unknown',
+ buildId: 'bcdaef01-2345-6789-0abc-def123456789',
+ tag: 'v1',
+ })
+
+ expect(result.ok).toBe(false)
+ if (result.ok) return
+ expect(result.error.status).toBe(404)
+ })
+
+ it('maps a 500 response to a generic repo error', async () => {
+ const post = vi.fn().mockResolvedValue(
+ createApiResponse({
+ ok: false,
+ status: 500,
+ error: { message: 'duplicate key value violates unique constraint' },
+ })
+ )
+ const repo = createTemplatesRepository(scope, createDeps(post))
+
+ const result = await repo.assignTag({
+ templateName: 'my-template',
+ buildId: 'bcdaef01-2345-6789-0abc-def123456789',
+ tag: 'existing',
+ })
+
+ expect(result.ok).toBe(false)
+ if (result.ok) return
+ expect(result.error.status).toBe(500)
+ expect(result.error.message).toContain('duplicate key')
+ })
+})