Skip to content
Merged
Show file tree
Hide file tree
Changes from 1 commit
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
Next Next commit
refactor(site): update versions table design
  • Loading branch information
aslilac committed Sep 6, 2023
commit 69c9076b8cb68623dcb4794ed0e2310f11ad4531
18 changes: 11 additions & 7 deletions site/src/components/VersionsTable/VersionRow.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,14 @@ import { combineClasses } from "utils/combineClasses"
export interface VersionRowProps {
version: TemplateVersion
isActive: boolean
isLatest: boolean
onPromoteClick?: (templateVersionId: string) => void
}

export const VersionRow: React.FC<VersionRowProps> = ({
version,
isActive,
isLatest,
onPromoteClick,
}) => {
const styles = useStyles()
Expand Down Expand Up @@ -68,22 +70,24 @@ export const VersionRow: React.FC<VersionRowProps> = ({
</span>
</Stack>
</Stack>
{isActive ? (
<Pill text="Active version" type="success" />
) : (
onPromoteClick && (

<Stack direction="row" alignItems="center" spacing={2}>
{isActive && <Pill text="Active" type="success" />}
{isLatest && <Pill text="Newest" type="info" />}
{onPromoteClick && (
<Button
className={styles.promoteButton}
disabled={isActive}
onClick={(e) => {
e.preventDefault()
e.stopPropagation()
onPromoteClick(version.id)
}}
>
Promote version
Promote
</Button>
)
)}
)}
</Stack>
</Stack>
</TableCell>
</TimelineEntry>
Expand Down
15 changes: 14 additions & 1 deletion site/src/components/VersionsTable/VersionsTable.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -29,20 +29,33 @@ export const VersionsTable: FC<React.PropsWithChildren<VersionsTableProps>> = ({
onPromoteClick,
activeVersionId,
}) => {
const latestVersionId = versions?.reduce(
(latestSoFar, against) => {
if (!latestSoFar) return against

return new Date(against.updated_at).getTime() >
new Date(latestSoFar.updated_at).getTime()
? against
: latestSoFar
},
undefined as TypesGen.TemplateVersion | undefined,
)?.id

return (
<TableContainer>
<Table data-testid="versions-table">
<TableBody>
{versions ? (
<Timeline
items={versions.slice().reverse()}
items={[...versions].reverse()}
getDate={(version) => new Date(version.created_at)}
row={(version) => (
<VersionRow
onPromoteClick={onPromoteClick}
version={version}
key={version.id}
isActive={activeVersionId === version.id}
isLatest={latestVersionId === version.id}
/>
)}
/>
Expand Down