coder · BrunoQuaresma · Jul 13, 2023 · Jul 11, 2023 · Jul 11, 2023 · Jul 12, 2023
diff --git a/coderd/apidoc/docs.go b/coderd/apidoc/docs.go
diff --git a/coderd/apidoc/swagger.json b/coderd/apidoc/swagger.json
diff --git a/coderd/database/queries.sql.go b/coderd/database/queries.sql.go
diff --git a/coderd/database/queries/templateversions.sql b/coderd/database/queries/templateversions.sql
@@ -91,7 +91,8 @@ UPDATE
 SET
 	template_id = $2,
 	updated_at = $3,
-	name = $4
+	name = $4,
+	message = $5
 WHERE
 	id = $1 RETURNING *;
 

diff --git a/coderd/templateversions.go b/coderd/templateversions.go
@@ -106,12 +106,17 @@ func (api *API) patchTemplateVersion(rw http.ResponseWriter, r *http.Request) {
 		TemplateID: templateVersion.TemplateID,
 		UpdatedAt:  database.Now(),
 		Name:       templateVersion.Name,
+		Message:    templateVersion.Message,
 	}
 
 	if params.Name != "" {
 		updateParams.Name = params.Name
 	}
 
+	if params.Message != "" {
+		updateParams.Message = params.Message
+	}
+
 	errTemplateVersionNameConflict := xerrors.New("template version name must be unique for a template")
 
 	var updatedTemplateVersion database.TemplateVersion

diff --git a/codersdk/templateversions.go b/codersdk/templateversions.go
@@ -87,7 +87,8 @@ type TemplateVersionVariable struct {
 }
 
 type PatchTemplateVersionRequest struct {
-	Name string `json:"name" validate:"omitempty,template_version_name"`
+	Name    string `json:"name" validate:"omitempty,template_version_name"`
+	Message string `json:"message" validate:"omitempty"`
 }
 
 // TemplateVersion returns a template version by ID.

diff --git a/docs/api/schemas.md b/docs/api/schemas.md
@@ -3222,15 +3222,17 @@ AuthorizationObject can represent a "set" of objects, such as: all workspaces in
 
 ```json
 {
+  "message": "string",
   "name": "string"
 }
 ```
 
 ### Properties
 
-| Name   | Type   | Required | Restrictions | Description |
-| ------ | ------ | -------- | ------------ | ----------- |
-| `name` | string | false    |              |             |
+| Name      | Type   | Required | Restrictions | Description |
+| --------- | ------ | -------- | ------------ | ----------- |
+| `message` | string | false    |              |             |
+| `name`    | string | false    |              |             |
 
 ## codersdk.PatchWorkspaceProxy
 

diff --git a/docs/api/templates.md b/docs/api/templates.md
@@ -1249,6 +1249,7 @@ curl -X PATCH http://coder-server:8080/api/v2/templateversions/{templateversion}
 
 ```json
 {
+  "message": "string",
   "name": "string"
 }
 ```

diff --git a/site/src/api/typesGenerated.ts b/site/src/api/typesGenerated.ts
@@ -644,6 +644,7 @@ export interface PatchGroupRequest {
 // From codersdk/templateversions.go
 export interface PatchTemplateVersionRequest {
   readonly name: string
+  readonly message: string
 }
 
 // From codersdk/workspaceproxy.go

diff --git a/site/src/components/TemplateVersionEditor/PublishTemplateVersionDialog.tsx b/site/src/components/TemplateVersionEditor/PublishTemplateVersionDialog.tsx
@@ -32,10 +32,12 @@ export const PublishTemplateVersionDialog: FC<
   const form = useFormik({
     initialValues: {
       name: defaultName,
+      message: "",
       isActiveVersion: false,
     },
     validationSchema: Yup.object({
       name: Yup.string().required(),
+      message: Yup.string(),
       isActiveVersion: Yup.boolean(),
     }),
     onSubmit: onConfirm,
@@ -70,6 +72,16 @@ export const PublishTemplateVersionDialog: FC<
               disabled={isPublishing}
             />
 
+            <TextField
+              {...getFieldHelpers("message")}
+              label="Message"
+              placeholder="Write a short message about the changes you made..."
+              autoFocus
+              disabled={isPublishing}
+              multiline
+              rows={5}
+            />
+
             <FormControlLabel
               label="Promote to default version"
               control={

diff --git a/site/src/components/Tooltips/OutdatedHelpTooltip.tsx b/site/src/components/Tooltips/OutdatedHelpTooltip.tsx
diff --git a/site/src/components/Tooltips/WorkspaceOutdatedTooltip.tsx b/site/src/components/Tooltips/WorkspaceOutdatedTooltip.tsx
@@ -0,0 +1,138 @@
+import RefreshIcon from "@mui/icons-material/Refresh"
+import { FC } from "react"
+import {
+  HelpTooltip,
+  HelpTooltipAction,
+  HelpTooltipLinksGroup,
+  HelpTooltipText,
+  HelpTooltipTitle,
+} from "./HelpTooltip"
+import InfoIcon from "@mui/icons-material/InfoOutlined"
+import { makeStyles } from "@mui/styles"
+import { colors } from "theme/colors"
+import { useQuery } from "@tanstack/react-query"
+import { getTemplate, getTemplateVersion } from "api/api"
+import Box from "@mui/material/Box"
+import Skeleton from "@mui/material/Skeleton"
+import Link from "@mui/material/Link"
+
+export const Language = {
+  outdatedLabel: "Outdated",
+  versionTooltipText:
+    "This workspace version is outdated and a newer version is available.",
+  updateVersionLabel: "Update version",
+}
+
+interface TooltipProps {
+  onUpdateVersion: () => void
+  templateId: string
+  ariaLabel?: string
+}
+
+export const WorkspaceOutdatedTooltip: FC<TooltipProps> = ({
+  onUpdateVersion,
+  ariaLabel,
+  templateId,
+}) => {
+  const styles = useStyles()
+  const { data: activeVersion } = useQuery({
+    queryFn: async () => {
+      const template = await getTemplate(templateId)
+      const activeVersion = await getTemplateVersion(template.active_version_id)
+      return activeVersion
+    },
+    queryKey: ["templates", templateId, "activeVersion"],
+  })
+
+  return (
+    <HelpTooltip
+      size="small"
+      icon={InfoIcon}
+      iconClassName={styles.icon}
+      buttonClassName={styles.button}
+    >
+      <HelpTooltipTitle>{Language.outdatedLabel}</HelpTooltipTitle>
+      <HelpTooltipText>{Language.versionTooltipText}</HelpTooltipText>
+
+      <Box
+        sx={{
+          display: "flex",
+          flexDirection: "column",
+          gap: 1,
+          py: 1,
+          fontSize: 13,
+        }}
+      >
+        <Box>
+          <Box
+            sx={{
+              color: (theme) => theme.palette.text.primary,
+              fontWeight: 600,
+            }}
+          >
+            New version
+          </Box>
+          <Box>
+            {activeVersion ? (
+              <Link
+                href={`/templates/docker/versions/${activeVersion.name}`}
+                target="_blank"
+                sx={{ color: (theme) => theme.palette.primary.light }}
+              >
+                {activeVersion.name}
+              </Link>
+            ) : (
+              <Skeleton variant="text" height={20} width={100} />
+            )}
+          </Box>
+        </Box>
+
+        <Box>
+          <Box
+            sx={{
+              color: (theme) => theme.palette.text.primary,
+              fontWeight: 600,
+            }}
+          >
+            Message
+          </Box>
+          <Box>
+            {activeVersion ? (
+              activeVersion.message === "" ? (
+                "No message"
+              ) : (
+                activeVersion.message
+              )
+            ) : (
+              <Skeleton variant="text" height={20} width={150} />
+            )}
+          </Box>
+        </Box>
+      </Box>
+
+      <HelpTooltipLinksGroup>
+        <HelpTooltipAction
+          icon={RefreshIcon}
+          onClick={onUpdateVersion}
+          ariaLabel={ariaLabel}
+        >
+          {Language.updateVersionLabel}
+        </HelpTooltipAction>
+      </HelpTooltipLinksGroup>
+    </HelpTooltip>
+  )
+}
+
+const useStyles = makeStyles(() => ({
+  icon: {
+    color: colors.yellow[5],
+  },
+
+  button: {
+    opacity: 1,
+
+    "&:hover": {
+      opacity: 1,
+    },
+  },
+}))
diff --git a/site/src/components/Tooltips/index.ts b/site/src/components/Tooltips/index.ts
@@ -1,4 +1,4 @@
 export { AuditHelpTooltip } from "./AuditHelpTooltip"
-export { OutdatedHelpTooltip } from "./OutdatedHelpTooltip"
+export { WorkspaceOutdatedTooltip } from "./WorkspaceOutdatedTooltip"
 export { UserRoleHelpTooltip } from "./UserRoleHelpTooltip"
 export { WorkspaceHelpTooltip } from "./WorkspaceHelpTooltip"
diff --git a/site/src/components/WorkspaceStats/WorkspaceStats.tsx b/site/src/components/WorkspaceStats/WorkspaceStats.tsx
@@ -1,5 +1,5 @@
 import Link from "@mui/material/Link"
-import { OutdatedHelpTooltip } from "components/Tooltips"
+import { WorkspaceOutdatedTooltip } from "components/Tooltips"
 import { FC, useRef, useState } from "react"
 import { Link as RouterLink } from "react-router-dom"
 import { createDayString } from "utils/createDayString"
@@ -101,7 +101,8 @@ export const WorkspaceStats: FC<WorkspaceStatsProps> = ({
               </Link>
 
               {workspace.outdated && (
-                <OutdatedHelpTooltip
+                <WorkspaceOutdatedTooltip
+                  templateId={workspace.template_id}
                   onUpdateVersion={handleUpdate}
                   ariaLabel="update version"
                 />

diff --git a/site/src/components/WorkspacesTable/WorkspacesRow.tsx b/site/src/components/WorkspacesTable/WorkspacesRow.tsx
@@ -9,7 +9,7 @@ import { useNavigate } from "react-router-dom"
 import { getDisplayWorkspaceTemplateName } from "utils/workspace"
 import { LastUsed } from "../LastUsed/LastUsed"
 import { Workspace } from "api/typesGenerated"
-import { OutdatedHelpTooltip } from "components/Tooltips/OutdatedHelpTooltip"
+import { WorkspaceOutdatedTooltip } from "components/Tooltips/WorkspaceOutdatedTooltip"
 import { Avatar } from "components/Avatar/Avatar"
 import { Stack } from "components/Stack/Stack"
 import { useClickableTableRow } from "hooks/useClickableTableRow"
@@ -34,7 +34,8 @@ export const WorkspacesRow: FC<{
             <Stack direction="row" spacing={0} alignItems="center">
               {workspace.name}
               {workspace.outdated && (
-                <OutdatedHelpTooltip
+                <WorkspaceOutdatedTooltip
+                  templateId={workspace.template_id}
                   onUpdateVersion={() => {
                     onUpdateWorkspace(workspace)
                   }}
-Original file line number
+Diff line change
@@ Expand Up @@
     ```json
     {
+      "message": "string",
       "name": "string"
     }
     ```
@@ Expand Down @@