refactor

frontend/src/settings/components/CapabilityDropdown.tsx

@@ -7,6 +7,7 @@ import {
 } from 'react';
 import type { JSX } from 'react';
 import { CheckIcon, ChevronDownIcon } from '../../ui/icons';
+import { isPlainObject } from '../../utils/typeGuards';
 
 type CapabilityValue = string | number;
 
@@ -28,14 +29,18 @@ interface CapabilityDropdownProps {
   summaryLabel?: string;
 }
 
+const isCapabilityOption = (
+  option: CapabilityDropdownOption | CapabilityValue | null | undefined,
+): option is CapabilityDropdownOption => isPlainObject(option);
+
 const resolveCapabilityValue = (
   option: CapabilityDropdownOption | CapabilityValue | null | undefined,
 ): CapabilityValue | null => {
   if (option == null) {
     return null;
   }
-  if (typeof option === 'string' || typeof option === 'number') {
-    return option;
+  if (!isCapabilityOption(option)) {
+    return option as CapabilityValue;
   }
   if (option.value != null) {
     return option.value;
@@ -166,9 +171,9 @@ const CapabilityDropdown = ({
               if (value == null) {
                 return null;
               }
-              const label = typeof formatLabel === 'function'
+              const label = formatLabel
                 ? formatLabel(value)
-                : (typeof option === 'object' && option?.label) || String(value);
+                : (isCapabilityOption(option) && option?.label) || String(value);
               const selected = selectedValues.includes(value);
               return (
                 <button