Skip to content

Commit 0938cb4

Browse files
BrunoQuaresmaBrunoQuaresma
committed
Display active version
1 parent 90e2bab commit 0938cb4

File tree

10 files changed

+92
-31
lines changed

10 files changed

+92
-31
lines changed

‎site/src/AppRouter.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -135,6 +135,10 @@ const CreateTokenPage = lazy(
135135
const TemplateFilesPage = lazy(
136136
() => import("./pages/TemplatePage/TemplateFilesPage/TemplateFilesPage"),
137137
)
138+
const TemplateVersionsPage = lazy(
139+
() =>
140+
import("./pages/TemplatePage/TemplateVersionsPage/TemplateVersionsPage"),
141+
)
138142
const TemplateSchedulePage = lazy(
139143
() =>
140144
import(
@@ -170,8 +174,8 @@ export const AppRouter: FC = () => {
170174
<Route path=":template">
171175
<Route element={<TemplateLayout />}>
172176
<Route index element={<TemplateSummaryPage />} />
173-
174177
<Route path="files" element={<TemplateFilesPage />} />
178+
<Route path="versions" element={<TemplateVersionsPage />} />
175179
</Route>
176180

177181
<Route path="workspace" element={<CreateWorkspacePage />} />

‎site/src/components/TemplateLayout/TemplateLayout.tsx

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -123,6 +123,17 @@ export const TemplateLayout: FC<{ children?: JSX.Element }> = ({
123123
Source Code
124124
</NavLink>
125125
)}
126+
<NavLink
127+
to={`/templates/${templateName}/versions`}
128+
className={({ isActive }) =>
129+
combineClasses([
130+
styles.tabItem,
131+
isActive ? styles.tabItemActive : undefined,
132+
])
133+
}
134+
>
135+
Versions
136+
</NavLink>
126137
</Stack>
127138
</Margins>
128139
</div>

‎site/src/components/VersionsTable/VersionRow.tsx

Lines changed: 24 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,46 @@
11
import { makeStyles } from "@material-ui/core/styles"
22
import TableCell from "@material-ui/core/TableCell"
33
import { TemplateVersion } from "api/typesGenerated"
4+
import { Pill } from "components/Pill/Pill"
45
import { Stack } from "components/Stack/Stack"
56
import { TimelineEntry } from "components/Timeline/TimelineEntry"
67
import { UserAvatar } from "components/UserAvatar/UserAvatar"
7-
import { useClickable } from "hooks/useClickable"
8+
import { useClickableTableRow } from "hooks/useClickableTableRow"
89
import { useTranslation } from "react-i18next"
910
import { useNavigate } from "react-router-dom"
11+
import { combineClasses } from "util/combineClasses"
1012

1113
export interface VersionRowProps {
1214
version: TemplateVersion
15+
isActive: boolean
1316
}
1417

15-
export const VersionRow: React.FC<VersionRowProps> = ({ version }) => {
18+
export const VersionRow: React.FC<VersionRowProps> = ({
19+
version,
20+
isActive,
21+
}) => {
1622
const styles = useStyles()
1723
const { t } = useTranslation("templatePage")
1824
const navigate = useNavigate()
19-
const clickableProps = useClickable(() => {
20-
navigate(`versions/${version.name}`)
25+
const clickableProps = useClickableTableRow(() => {
26+
navigate(version.name)
2127
})
2228

2329
return (
24-
<TimelineEntry data-testid={`version-${version.id}`} {...clickableProps}>
30+
<TimelineEntry
31+
data-testid={`version-${version.id}`}
32+
{...clickableProps}
33+
className={combineClasses({
34+
[clickableProps.className]: true,
35+
[styles.active]: isActive,
36+
})}
37+
>
2538
<TableCell className={styles.versionCell}>
2639
<Stack
2740
direction="row"
2841
alignItems="center"
2942
className={styles.versionWrapper}
43+
justifyContent="space-between"
3044
>
3145
<Stack direction="row" alignItems="center">
3246
<UserAvatar
@@ -49,6 +63,7 @@ export const VersionRow: React.FC<VersionRowProps> = ({ version }) => {
4963
</span>
5064
</Stack>
5165
</Stack>
66+
{isActive && <Pill text="Active version" type="success" />}
5267
</Stack>
5368
</TableCell>
5469
</TimelineEntry>
@@ -60,6 +75,10 @@ const useStyles = makeStyles((theme) => ({
6075
padding: theme.spacing(2, 4),
6176
},
6277

78+
active: {
79+
backgroundColor: theme.palette.background.paperLight,
80+
},
81+
6382
versionCell: {
6483
padding: "0 !important",
6584
position: "relative",

‎site/src/components/VersionsTable/VersionsTable.tsx

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,11 +19,13 @@ export const Language = {
1919
}
2020

2121
export interface VersionsTableProps {
22+
activeVersionId: string
2223
versions?: TypesGen.TemplateVersion[]
2324
}
2425

2526
export const VersionsTable: FC<React.PropsWithChildren<VersionsTableProps>> = ({
2627
versions,
28+
activeVersionId,
2729
}) => {
2830
return (
2931
<TableContainer>
@@ -34,7 +36,11 @@ export const VersionsTable: FC<React.PropsWithChildren<VersionsTableProps>> = ({
3436
items={versions.slice().reverse()}
3537
getDate={(version) => new Date(version.created_at)}
3638
row={(version) => (
37-
<VersionRow version={version} key={version.id} />
39+
<VersionRow
40+
version={version}
41+
key={version.id}
42+
isActive={activeVersionId === version.id}
43+
/>
3844
)}
3945
/>
4046
) : (

‎site/src/pages/TemplatePage/TemplateFilesPage/TemplateFilesPage.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,11 @@ import { useOrganizationId } from "hooks/useOrganizationId"
88
import { useTab } from "hooks/useTab"
99
import { FC, useEffect } from "react"
1010
import { Helmet } from "react-helmet-async"
11-
import { pageTitle } from "util/page"
1211
import {
1312
getTemplateVersionFiles,
1413
TemplateVersionFiles,
1514
} from "util/templateVersion"
15+
import { getTemplatePageTitle } from "../utils"
1616

1717
const fetchTemplateFiles = async (
1818
organizationId: string,
@@ -80,7 +80,7 @@ const TemplateFilesPage: FC = () => {
8080
return (
8181
<>
8282
<Helmet>
83-
<title>{pageTitle(`${template?.name} · Source Code`)}</title>
83+
<title>{getTemplatePageTitle("Source Code", template)}</title>
8484
</Helmet>
8585

8686
{templateFiles && tab.isLoaded ? (

‎site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPage.tsx

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { useTemplateLayoutContext } from "components/TemplateLayout/TemplateLayout"
22
import { FC } from "react"
33
import { Helmet } from "react-helmet-async"
4-
import { pageTitle } from "util/page"
4+
import { getTemplatePageTitle } from "../utils"
55
import { useTemplateSummaryData } from "./data"
66
import { TemplateSummaryPageView } from "./TemplateSummaryPageView"
77

@@ -15,15 +15,7 @@ export const TemplateSummaryPage: FC = () => {
1515
return (
1616
<>
1717
<Helmet>
18-
<title>
19-
{pageTitle(
20-
`${
21-
template.display_name.length > 0
22-
? template.display_name
23-
: template.name
24-
} · Template`,
25-
)}
26-
</title>
18+
<title>{getTemplatePageTitle("Template", template)}</title>
2719
</Helmet>
2820
<TemplateSummaryPageView
2921
data={data}

‎site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPageView.tsx

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ import { MemoizedMarkdown } from "components/Markdown/Markdown"
99
import { Stack } from "components/Stack/Stack"
1010
import { TemplateResourcesTable } from "components/TemplateResourcesTable/TemplateResourcesTable"
1111
import { TemplateStats } from "components/TemplateStats/TemplateStats"
12-
import { VersionsTable } from "components/VersionsTable/VersionsTable"
1312
import frontMatter from "front-matter"
1413
import { FC } from "react"
1514
import { DAUChart } from "../../../components/DAUChart/DAUChart"
@@ -32,7 +31,7 @@ export const TemplateSummaryPageView: FC<TemplateSummaryPageViewProps> = ({
3231
return <Loader />
3332
}
3433

35-
const { daus, resources, versions } = data
34+
const { daus, resources } = data
3635
const readme = frontMatter(activeVersion.readme)
3736

3837
const getStartedResources = (resources: WorkspaceResource[]) => {
@@ -53,8 +52,6 @@ export const TemplateSummaryPageView: FC<TemplateSummaryPageViewProps> = ({
5352
<MemoizedMarkdown>{readme.body}</MemoizedMarkdown>
5453
</div>
5554
</div>
56-
57-
<VersionsTable versions={versions} />
5855
</Stack>
5956
)
6057
}

‎site/src/pages/TemplatePage/TemplateSummaryPage/data.ts

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,17 @@
11
import { useQuery } from "@tanstack/react-query"
2-
import {
3-
getTemplateVersionResources,
4-
getTemplateVersions,
5-
getTemplateDAUs,
6-
} from "api/api"
2+
import { getTemplateVersionResources, getTemplateDAUs } from "api/api"
73

84
const fetchTemplateSummary = async (
95
templateId: string,
106
activeVersionId: string,
117
) => {
12-
const [resources, versions, daus] = await Promise.all([
8+
const [resources, daus] = await Promise.all([
139
getTemplateVersionResources(activeVersionId),
14-
getTemplateVersions(templateId),
1510
getTemplateDAUs(templateId),
1611
])
1712

1813
return {
1914
resources,
20-
versions,
2115
daus,
2216
}
2317
}

‎site/src/pages/TemplatePage/TemplateVersionsPage/TemplateVersionsPage.tsx

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { useQuery } from "@tanstack/react-query"
2+
import { getTemplateVersions } from "api/api"
3+
import { useTemplateLayoutContext } from "components/TemplateLayout/TemplateLayout"
4+
import { VersionsTable } from "components/VersionsTable/VersionsTable"
5+
import { Helmet } from "react-helmet-async"
6+
import { getTemplatePageTitle } from "../utils"
7+
8+
const TemplateVersionsPage = () => {
9+
const { template } = useTemplateLayoutContext()
10+
const { data } = useQuery({
11+
queryKey: ["template", "versions", template.id],
12+
queryFn: () => getTemplateVersions(template.id),
13+
})
14+
15+
return (
16+
<>
17+
<Helmet>
18+
<title>{getTemplatePageTitle("Versions", template)}</title>
19+
</Helmet>
20+
<VersionsTable
21+
versions={data}
22+
activeVersionId={template.active_version_id}
23+
/>
24+
</>
25+
)
26+
}
27+
28+
export default TemplateVersionsPage

‎site/src/pages/TemplatePage/utils.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { Template } from "api/typesGenerated"
2+
import { pageTitle } from "util/page"
3+
4+
export const getTemplatePageTitle = (title: string, template: Template) => {
5+
return pageTitle(
6+
`${
7+
template.display_name.length > 0 ? template.display_name : template.name
8+
} · ${title}`,
9+
)
10+
}

0 commit comments

Comments
 (0)