chore: Make deployment admin page show better durations (#6856)

* chore: Make deployment admin page show better durations

Also fix group mappings

site/src/components/DeploySettingsLayout/Options.test.tsx

@@ -0,0 +1,73 @@
+import { optionValue } from "./OptionsTable"
+import { DeploymentOption } from "api/types"
+
+const defaultOption: DeploymentOption = {
+  name: "",
+  description: "",
+  flag: "",
+  flag_shorthand: "",
+  value: "",
+  hidden: false,
+}
+
+describe("optionValue", () => {
+  it.each<{
+    option: DeploymentOption
+    expected: string | string[] | unknown
+  }>([
+    {
+      option: {
+        ...defaultOption,
+        name: "Max Token Lifetime",
+        value: 3600 * 1e9,
+      },
+      expected: "1 hour",
+    },
+    {
+      option: {
+        ...defaultOption,
+        name: "Max Token Lifetime",
+        value: 24 * 3600 * 1e9,
+      },
+      expected: "1 day",
+    },
+    {
+      option: {
+        ...defaultOption,
+        name: "Session Duration",
+        value: 3600 * 1e9,
+      },
+      expected: "1 hour",
+    },
+    {
+      option: {
+        ...defaultOption,
+        name: "Session Duration",
+        value: 24 * 3600 * 1e9,
+      },
+      expected: "1 day",
+    },
+    {
+      option: {
+        ...defaultOption,
+        name: "Strict-Transport-Security",
+        value: 1000,
+      },
+      expected: "1000s",
+    },
+    {
+      option: {
+        ...defaultOption,
+        name: "OIDC Group Mapping",
+        value: {
+          "123": "foo",
+          "456": "bar",
+          "789": "baz",
+        },
+      },
+      expected: [`"123"->"foo"`, `"456"->"bar"`, `"789"->"baz"`],
+    },
+  ])(`[$option.name]optionValue($option.value)`, ({ option, expected }) => {
+    expect(optionValue(option)).toEqual(expected)
+  })
+})

site/src/components/DeploySettingsLayout/OptionsTable.tsx

@@ -13,6 +13,7 @@ import {
 } from "components/DeploySettingsLayout/Option"
 import { FC } from "react"
 import { DisabledBadge } from "./Badges"
+import { intervalToDuration, formatDuration } from "date-fns"
 
 const OptionsTable: FC<{
   options: DeploymentOption[]
@@ -34,7 +35,11 @@ const OptionsTable: FC<{
         </TableHead>
         <TableBody>
           {Object.values(options).map((option) => {
-            if (option.value === null || option.value === "") {
+            if (
+              option.value === null ||
+              option.value === "" ||
+              option.value === undefined
+            ) {
               return null
             }
             return (
@@ -45,7 +50,7 @@ const OptionsTable: FC<{
                 </TableCell>
 
                 <TableCell>
-                  <OptionValue>{option.value}</OptionValue>
+                  <OptionValue>{optionValue(option)}</OptionValue>
                 </TableCell>
               </TableRow>
             )
@@ -56,6 +61,31 @@ const OptionsTable: FC<{
   )
 }
 
+// optionValue is a helper function to format the value of a specific deployment options
+export function optionValue(
+  option: DeploymentOption,
+): string[] | string | unknown {
+  switch (option.name) {
+    case "Max Token Lifetime":
+    case "Session Duration":
+      // intervalToDuration takes ms, so convert nanoseconds to ms
+      return formatDuration(
+        intervalToDuration({ start: 0, end: (option.value as number) / 1e6 }),
+      )
+    case "Strict-Transport-Security":
+      if (option.value === 0) {
+        return "Disabled"
+      }
+      return (option.value as number).toString() + "s"
+    case "OIDC Group Mapping":
+      return Object.entries(option.value as Record<string, string>).map(
+        ([key, value]) => `"${key}"->"${value}"`,
+      )
+    default:
+      return option.value
+  }
+}
+
 const useStyles = makeStyles((theme) => ({
   table: {
     "& td": {

site/src/pages/CreateTokenPage/utils.test.tsx

@@ -12,10 +12,6 @@ describe("unit/CreateTokenForm", () => {
       maxTokenLifetime: number
       expected: LifetimeDay[]
     }>([
-      {
-        maxTokenLifetime: 0,
-        expected: lifetimeDayPresets,
-      },
       { maxTokenLifetime: 6 * 24 * NANO_HOUR, expected: [] },
       {
         maxTokenLifetime: 20 * 24 * NANO_HOUR,