Update versions to timeline

coder · BrunoQuaresma · Oct 31, 2022 · Oct 28, 2022 · Oct 28, 2022 · Oct 28, 2022
commit ec029e87bbb7ed48cb93050332f3683b9711dc33
diff --git a/site/src/components/VersionsTable/VersionRow.tsx b/site/src/components/VersionsTable/VersionRow.tsx
@@ -1,77 +1,50 @@
 import { makeStyles } from "@material-ui/core/styles"
 import TableCell from "@material-ui/core/TableCell"
 import TableRow from "@material-ui/core/TableRow"
-import { WorkspaceBuild } from "api/typesGenerated"
+import { TemplateVersion } from "api/typesGenerated"
 import { Stack } from "components/Stack/Stack"
-import { useClickable } from "hooks/useClickable"
+import { UserAvatar } from "components/UserAvatar/UserAvatar"
 import { useTranslation } from "react-i18next"
-import { useNavigate } from "react-router-dom"
-import { MONOSPACE_FONT_FAMILY } from "theme/constants"
-import {
-  displayWorkspaceBuildDuration,
-  getDisplayWorkspaceBuildInitiatedBy,
-} from "util/workspace"
 
 export interface VersionRowProps {
-  version: WorkspaceVersion
+  version: TemplateVersion
 }
 
-export const VersionRow: React.FC<VersionRowProps> = ({ build }) => {
+export const VersionRow: React.FC<VersionRowProps> = ({ version }) => {
   const styles = useStyles()
-  const { t } = useTranslation("workspacePage")
-  const initiatedBy = getDisplayWorkspaceBuildInitiatedBy(build)
-  const navigate = useNavigate()
-  const clickableProps = useClickable(() =>
-    navigate(`builds/${build.build_number}`),
-  )
+  const { t } = useTranslation("templatePage")
 
   return (
     <TableRow
-      hover
-      data-testid={`build-${build.id}`}
-      className={styles.buildRow}
-      {...clickableProps}
+      className={styles.versionRow}
+      data-testid={`version-${version.id}`}
     >
-      <TableCell className={styles.buildCell}>
+      <TableCell className={styles.versionCell}>
         <Stack
           direction="row"
           alignItems="center"
-          className={styles.buildWrapper}
+          className={styles.versionWrapper}
         >
           <Stack direction="row" alignItems="center">
-            <BuildAvatar build={build} />
-            <div>
-              <Stack
-                className={styles.buildSummary}
-                direction="row"
-                alignItems="center"
-                spacing={1}
-              >
-                <span>
-                  <strong>{initiatedBy}</strong>{" "}
-                  {build.reason !== "initiator"
-                    ? t("buildMessage.automatically")
-                    : ""}
-                  <strong>{t(`buildMessage.${build.transition}`)}</strong>{" "}
-                  {t("buildMessage.theWorkspace")}
-                </span>
-
-                <span className={styles.buildTime}>
-                  {new Date(build.created_at).toLocaleTimeString()}
-                </span>
-              </Stack>
-
-              <Stack direction="row" spacing={1}>
-                <span className={styles.buildInfo}>
-                  {t("buildData.reason")}: <strong>{build.reason}</strong>
-                </span>
-
-                <span className={styles.buildInfo}>
-                  {t("buildData.duration")}:{" "}
-                  <strong>{displayWorkspaceBuildDuration(build)}</strong>
-                </span>
-              </Stack>
-            </div>
+            <UserAvatar
+              username={version.created_by.username}
+              avatarURL={version.created_by.avatar_url}
+            />
+            <Stack
+              className={styles.versionSummary}
+              direction="row"
+              alignItems="center"
+              spacing={1}
+            >
+              <span>
+                <strong>{version.created_by.username}</strong>{" "}
+                {t("createdVersion")} <strong>{version.name}</strong>
+              </span>
+
+              <span className={styles.versionTime}>
+                {new Date(version.created_at).toLocaleTimeString()}
+              </span>
+            </Stack>
           </Stack>
         </Stack>
       </TableCell>
@@ -80,16 +53,7 @@ export const VersionRow: React.FC<VersionRowProps> = ({ build }) => {
 }
 
 const useStyles = makeStyles((theme) => ({
-  buildRow: {
-    cursor: "pointer",
-
-    "&:focus": {
-      outlineStyle: "solid",
-      outlineOffset: -1,
-      outlineWidth: 2,
-      outlineColor: theme.palette.secondary.dark,
-    },
-
+  versionRow: {
     "&:not(:last-child) td:before": {
       position: "absolute",
       top: 20,
@@ -102,42 +66,23 @@ const useStyles = makeStyles((theme) => ({
     },
   },
 
-  buildWrapper: {
+  versionWrapper: {
     padding: theme.spacing(2, 4),
   },
 
-  buildCell: {
+  versionCell: {
     padding: "0 !important",
     position: "relative",
     borderBottom: 0,
   },
 
-  buildSummary: {
+  versionSummary: {
     ...theme.typography.body1,
     fontFamily: "inherit",
   },
 
-  buildInfo: {
-    ...theme.typography.body2,
-    fontSize: 12,
-    fontFamily: "inherit",
-    color: theme.palette.text.secondary,
-    display: "block",
-  },
-
-  buildTime: {
+  versionTime: {
     color: theme.palette.text.secondary,
     fontSize: 12,
   },
-
-  buildRight: {
-    width: "auto",
-  },
-
-  buildExtraInfo: {
-    ...theme.typography.body2,
-    fontFamily: MONOSPACE_FONT_FAMILY,
-    color: theme.palette.text.secondary,
-    whiteSpace: "nowrap",
-  },
 }))
diff --git a/site/src/components/VersionsTable/VersionsTable.tsx b/site/src/components/VersionsTable/VersionsTable.tsx
@@ -1,16 +1,15 @@
 import Box from "@material-ui/core/Box"
-import { Theme } from "@material-ui/core/styles"
 import Table from "@material-ui/core/Table"
 import TableBody from "@material-ui/core/TableBody"
 import TableCell from "@material-ui/core/TableCell"
 import TableContainer from "@material-ui/core/TableContainer"
-import TableHead from "@material-ui/core/TableHead"
 import TableRow from "@material-ui/core/TableRow"
-import useTheme from "@material-ui/styles/useTheme"
+import { Timeline } from "components/Timeline/Timeline"
 import { FC } from "react"
 import * as TypesGen from "../../api/typesGenerated"
 import { EmptyState } from "../EmptyState/EmptyState"
 import { TableLoader } from "../TableLoader/TableLoader"
+import { VersionRow } from "./VersionRow"
 
 export const Language = {
   emptyMessage: "No versions found",
@@ -26,39 +25,21 @@ export interface VersionsTableProps {
 export const VersionsTable: FC<React.PropsWithChildren<VersionsTableProps>> = ({
   versions,
 }) => {
-  const isLoading = !versions
-  const theme: Theme = useTheme()
-
   return (
     <TableContainer>
       <Table data-testid="versions-table">
         <TableBody>
-          {isLoading && <TableLoader />}
-          {versions && <Timeline items={versions} />}
-          {versions &&
-            versions
-              .slice()
-              .reverse()
-              .map((version) => {
-                return (
-                  <TableRow
-                    key={version.id}
-                    data-testid={`version-${version.id}`}
-                  >
-                    <TableCell>{version.name}</TableCell>
-                    <TableCell>
-                      <span style={{ color: theme.palette.text.secondary }}>
-                        {new Date(version.created_at).toLocaleString()}
-                      </span>
-                    </TableCell>
-                    <TableCell>
-                      <span style={{ color: theme.palette.text.secondary }}>
-                        {version.created_by_name}
-                      </span>
-                    </TableCell>
-                  </TableRow>
-                )
-              })}
+          {versions ? (
+            <Timeline
+              items={versions.slice().reverse()}
+              getDate={(version) => new Date(version.created_at)}
+              row={(version) => (
+                <VersionRow version={version} key={version.id} />
+              )}
+            />
+          ) : (
+            <TableLoader />
+          )}
 
           {versions && versions.length === 0 && (
             <TableRow>

diff --git a/site/src/i18n/en/templatePage.json b/site/src/i18n/en/templatePage.json
@@ -1,3 +1,4 @@
 {
-  "deleteSuccess": "Template successfully deleted."
+  "deleteSuccess": "Template successfully deleted.",
+  "createdVersion": "created the version"
 }