refactor(site): update versions table design (#9540)

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>

site/src/components/VersionsTable/VersionsTable.tsx

@@ -29,13 +29,27 @@ 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 +57,7 @@ export const VersionsTable: FC<React.PropsWithChildren<VersionsTableProps>> = ({
                   version={version}
                   key={version.id}
                   isActive={activeVersionId === version.id}
+                  isLatest={latestVersionId === version.id}
                 />
               )}
             />