feat: rich parameters: introduce display_name (#6919)

* model

* DB

* fix: DisplayName

* proto

* Proto

* Update go dep

* fixme

* fix format

* config

* fmt

* fix

* Fix

* fix

* chore(UI): redirecting from workspace page if 404 (#6880)

* model

* CLI: Display parameter

* fix

* update dep

* fix

* fix

* fix

* UI changes

* fmt

---------

Co-authored-by: Kira Pilot <kira@coder.com>

site/src/api/typesGenerated.ts

@@ -850,6 +850,7 @@ export interface TemplateVersionGitAuth {
 // From codersdk/templateversions.go
 export interface TemplateVersionParameter {
   readonly name: string
+  readonly display_name?: string
   readonly description: string
   readonly description_plaintext: string
   readonly type: string

site/src/components/RichParameterInput/RichParameterInput.stories.tsx

@@ -175,3 +175,15 @@ DescriptionWithLinks.args = {
     options: [],
   }),
 }
+
+export const BasicWithDisplayName = Template.bind({})
+BasicWithDisplayName.args = {
+  initialValue: "initial-value",
+  id: "project_name",
+  parameter: createTemplateVersionParameter({
+    name: "project_name",
+    display_name: "Project Name",
+    description:
+      "Customize the name of a Google Cloud project that will be created!",
+  }),
+}

site/src/components/RichParameterInput/RichParameterInput.tsx

@@ -22,6 +22,9 @@ export interface ParameterLabelProps {
 const ParameterLabel: FC<ParameterLabelProps> = ({ id, parameter }) => {
   const styles = useStyles()
   const hasDescription = parameter.description && parameter.description !== ""
+  const displayName = parameter.display_name
+    ? parameter.display_name
+    : parameter.name
 
   return (
     <label htmlFor={id}>
@@ -38,13 +41,13 @@ const ParameterLabel: FC<ParameterLabelProps> = ({ id, parameter }) => {
 
         {hasDescription ? (
           <Stack spacing={0.5}>
-            <span className={styles.labelCaption}>{parameter.name}</span>
+            <span className={styles.labelCaption}>{displayName}</span>
             <span className={styles.labelPrimary}>
               <MemoizedMarkdown>{parameter.description}</MemoizedMarkdown>
             </span>
           </Stack>
         ) : (
-          <span className={styles.labelPrimary}>{parameter.name}</span>
+          <span className={styles.labelPrimary}>{displayName}</span>
         )}
       </Stack>
     </label>