From 9b930f8fadcb1820e91687465ea4b9b4f63371ad Mon Sep 17 00:00:00 2001
From: Bruno Quaresma <bruno@coder.com>
Date: Fri, 2 Feb 2024 11:13:35 -0300
Subject: [PATCH] feat(site): show deprecation message on template page
 (#11996)

---
 .../TemplatePageHeader.stories.tsx            | 11 ++++++++
 .../pages/TemplatePage/TemplatePageHeader.tsx | 28 +++++++++++++------
 2 files changed, 30 insertions(+), 9 deletions(-)

diff --git a/site/src/pages/TemplatePage/TemplatePageHeader.stories.tsx b/site/src/pages/TemplatePage/TemplatePageHeader.stories.tsx
index e5e837145a..7def82b032 100644
--- a/site/src/pages/TemplatePage/TemplatePageHeader.stories.tsx
+++ b/site/src/pages/TemplatePage/TemplatePageHeader.stories.tsx
@@ -26,3 +26,14 @@ export const CanNotUpdate: Story = {
     },
   },
 };
+
+export const Deprecated: Story = {
+  args: {
+    template: {
+      ...MockTemplate,
+      deprecated: true,
+      deprecation_message:
+        "This template is not going to be used anymore. [See details](#details).",
+    },
+  },
+};
diff --git a/site/src/pages/TemplatePage/TemplatePageHeader.tsx b/site/src/pages/TemplatePage/TemplatePageHeader.tsx
index 90515523e1..cfa686d93d 100644
--- a/site/src/pages/TemplatePage/TemplatePageHeader.tsx
+++ b/site/src/pages/TemplatePage/TemplatePageHeader.tsx
@@ -35,6 +35,7 @@ import {
 } from "components/MoreMenu/MoreMenu";
 import Divider from "@mui/material/Divider";
 import { Pill } from "components/Pill/Pill";
+import { MemoizedInlineMarkdown } from "components/Markdown/Markdown";
 
 type TemplateMenuProps = {
   templateName: string;
@@ -203,20 +204,29 @@ export const TemplatePageHeader: FC<TemplatePageHeaderProps> = ({
           )}
 
           <div>
-            <PageHeaderTitle>
-              {template.display_name.length > 0
-                ? template.display_name
-                : template.name}
-            </PageHeaderTitle>
+            <Stack direction="row" alignItems="center" spacing={1}>
+              <PageHeaderTitle>
+                {template.display_name.length > 0
+                  ? template.display_name
+                  : template.name}
+              </PageHeaderTitle>
+              {template.deprecated && <Pill type="warning">Deprecated</Pill>}
+            </Stack>
 
-            {template.description !== "" && (
+            {template.deprecation_message !== "" ? (
               <PageHeaderSubtitle condensed>
-                {template.description}
+                <MemoizedInlineMarkdown>
+                  {template.deprecation_message}
+                </MemoizedInlineMarkdown>
               </PageHeaderSubtitle>
+            ) : (
+              template.description !== "" && (
+                <PageHeaderSubtitle condensed>
+                  {template.description}
+                </PageHeaderSubtitle>
+              )
             )}
           </div>
-
-          {template.deprecated && <Pill type="warning">Deprecated</Pill>}
         </Stack>
       </PageHeader>
     </Margins>