From 69c9076b8cb68623dcb4794ed0e2310f11ad4531 Mon Sep 17 00:00:00 2001
From: McKayla Washburn <mckayla@hey.com>
Date: Wed, 6 Sep 2023 00:14:33 +0000
Subject: [PATCH 1/2] refactor(site): update versions table design

---
 .../components/VersionsTable/VersionRow.tsx    | 18 +++++++++++-------
 .../components/VersionsTable/VersionsTable.tsx | 15 ++++++++++++++-
 2 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/site/src/components/VersionsTable/VersionRow.tsx b/site/src/components/VersionsTable/VersionRow.tsx
index 52f72169deaa5..6329f2bc0b603 100644
--- a/site/src/components/VersionsTable/VersionRow.tsx
+++ b/site/src/components/VersionsTable/VersionRow.tsx
@@ -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()
@@ -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>
diff --git a/site/src/components/VersionsTable/VersionsTable.tsx b/site/src/components/VersionsTable/VersionsTable.tsx
index 57e5a256471e3..7882bb07016f6 100644
--- a/site/src/components/VersionsTable/VersionsTable.tsx
+++ b/site/src/components/VersionsTable/VersionsTable.tsx
@@ -29,13 +29,25 @@ 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
@@ -43,6 +55,7 @@ export const VersionsTable: FC<React.PropsWithChildren<VersionsTableProps>> = ({
                   version={version}
                   key={version.id}
                   isActive={activeVersionId === version.id}
+                  isLatest={latestVersionId === version.id}
                 />
               )}
             />

From fda1551cd1ebc961de7a102172bf9b1625df3146 Mon Sep 17 00:00:00 2001
From: McKayla Washburn <mckayla@hey.com>
Date: Wed, 6 Sep 2023 00:22:06 +0000
Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=A7=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 site/src/components/VersionsTable/VersionsTable.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/site/src/components/VersionsTable/VersionsTable.tsx b/site/src/components/VersionsTable/VersionsTable.tsx
index 7882bb07016f6..cb1be9499a5c2 100644
--- a/site/src/components/VersionsTable/VersionsTable.tsx
+++ b/site/src/components/VersionsTable/VersionsTable.tsx
@@ -31,7 +31,9 @@ export const VersionsTable: FC<React.PropsWithChildren<VersionsTableProps>> = ({
 }) => {
   const latestVersionId = versions?.reduce(
     (latestSoFar, against) => {
-      if (!latestSoFar) return against
+      if (!latestSoFar) {
+        return against
+      }
 
       return new Date(against.updated_at).getTime() >
         new Date(latestSoFar.updated_at).getTime()