ts-pattern for nicer exhaustiveness

app/components/InstanceAutoRestartPopover.tsx

@@ -10,6 +10,7 @@ import cn from 'classnames'
 import { formatDistanceToNow } from 'date-fns'
 import { useState, type ReactNode } from 'react'
 import { Link } from 'react-router'
+import { match } from 'ts-pattern'
 
 import {
   AutoRestart12Icon,
@@ -52,24 +53,6 @@ const helpText = {
   ),
 }
 
-// ts-pattern could make this less ugly
-const PolicyBadge = ({ policy }: { policy?: InstanceAutoRestartPolicy }) => {
-  if (policy === 'never') {
-    return (
-      <Badge color="neutral" variant="solid">
-        never
-      </Badge>
-    )
-  } else if (policy === 'best_effort') {
-    return <Badge>best effort</Badge>
-  } else if (policy === undefined) {
-    return <Badge color="neutral">Default</Badge>
-  } else {
-    const _exhaustiveCheck: never = policy
-    return _exhaustiveCheck
-  }
-}
-
 export const InstanceAutoRestartPopover = ({
   enabled,
   policy,
@@ -116,7 +99,15 @@ export const InstanceAutoRestartPopover = ({
             to={pb.instanceSettings(instanceSelector)}
             className="group -m-1 flex w-full items-center justify-between rounded px-1"
           >
-            <PolicyBadge policy={policy} />
+            {match(policy)
+              .with('never', () => (
+                <Badge color="neutral" variant="solid">
+                  never
+                </Badge>
+              ))
+              .with('best_effort', () => <Badge>best effort</Badge>)
+              .with(undefined, () => <Badge color="neutral">Default</Badge>)
+              .exhaustive()}
             <div className="transition-transform group-hover:translate-x-1">
               <NextArrow12Icon />
             </div>

app/pages/project/instances/instance/tabs/SettingsTab.tsx

@@ -9,13 +9,9 @@
 import { format, formatDistanceToNow } from 'date-fns'
 import { useId, useState, type ReactNode } from 'react'
 import { useForm } from 'react-hook-form'
+import { match } from 'ts-pattern'
 
-import {
-  apiQueryClient,
-  useApiMutation,
-  usePrefetchedApiQuery,
-  type InstanceUpdate,
-} from '~/api'
+import { apiQueryClient, useApiMutation, usePrefetchedApiQuery } from '~/api'
 import { ListboxField } from '~/components/form/fields/ListboxField'
 import { useInstanceSelector } from '~/hooks/use-params'
 import { addToast } from '~/stores/toast'
@@ -28,13 +24,6 @@ import { useInterval } from '~/ui/lib/use-interval'
 import { links } from '~/util/links'
 
 type FormPolicy = 'default' | 'never' | 'best_effort'
-type ApiPolicy = InstanceUpdate['autoRestartPolicy']
-
-const formPolicyToApiPolicy: Record<FormPolicy, ApiPolicy> = {
-  default: undefined,
-  never: 'never',
-  best_effort: 'best_effort',
-}
 
 const restartPolicyItems: ListboxItem<FormPolicy>[] = [
   { value: 'default', label: 'Default' },
@@ -83,7 +72,11 @@ export function Component() {
         ncpus: instance.ncpus,
         memory: instance.memory,
         bootDisk: instance.bootDiskId,
-        autoRestartPolicy: formPolicyToApiPolicy[values.autoRestartPolicy],
+        autoRestartPolicy: match(values.autoRestartPolicy)
+          .with('default', () => undefined)
+          .with('never', () => 'never' as const)
+          .with('best_effort', () => 'best_effort' as const)
+          .exhaustive(),
       },
     })
   })

package.json

@@ -68,6 +68,7 @@
     "recharts": "^2.12.7",
     "remeda": "^2.14.0",
     "simplebar-react": "^3.2.6",
+    "ts-pattern": "^5.6.2",
     "tslib": "^2.7.0",
     "tunnel-rat": "0.0.4",
     "uuid": "^10.0.0",