refactor

frontend/src/settings/sections/CapabilitySetsSection.tsx

@@ -8,6 +8,7 @@ import React, {
 import type { SettingsSectionConfig } from '../SettingsModal';
 import { IconX } from '../../ui/icons';
 import CapabilityDropdown, { CapabilityDropdownOption } from '../components/CapabilityDropdown';
+import { isPlainObject } from '../../utils/typeGuards';
 
 type CapabilityValue = string | number;
 type CapabilitySetId = string | number;
@@ -54,12 +55,15 @@ interface CapabilitySetsSectionProps {
 
 type CapabilityOptionInput = CapabilityDropdownOption | CapabilityValue | null | undefined;
 
+const isCapabilityOption = (option: CapabilityOptionInput): option is CapabilityDropdownOption =>
+  isPlainObject(option);
+
 const resolveCapabilityValue = (option: CapabilityOptionInput): 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 as CapabilityValue;
@@ -99,12 +103,13 @@ const CapabilitySetsSection: React.FC<CapabilitySetsSectionProps> = ({
 
   const capabilitySelectionOptions = useMemo<CapabilityDropdownOption[]>(() => (
     (capabilities ?? []).map((capability) => {
-      if (typeof capability !== 'string') {
-        return { value: capability, label: String(capability) };
+      const capabilityLabel = `${capability ?? ''}`;
+      if (!capabilityLabel.includes(':')) {
+        return { value: capability, label: capabilityLabel };
       }
-      const [namespace, action] = capability.split(':');
+      const [namespace, action] = capabilityLabel.split(':');
       if (!namespace || !action) {
-        return { value: capability, label: capability };
+        return { value: capability, label: capabilityLabel };
       }
       const formattedNamespace = `${namespace.charAt(0).toUpperCase()}${namespace.slice(1)}`;
       const formattedAction = action.replace(/_/g, ' ');
@@ -161,7 +166,7 @@ const CapabilitySetsSection: React.FC<CapabilitySetsSectionProps> = ({
       label: set.label || set.slug || set.id,
       capabilities: Array.isArray(set.capabilities) ? set.capabilities : [],
       isSystem: Boolean(set?.is_system),
-      version: typeof set?.cap_version === 'number' ? set.cap_version : null,
+      version: Number.isFinite(set?.cap_version) ? Number(set.cap_version) : null,
     })),
     [capabilitySets],
   );
@@ -492,7 +497,7 @@ const CapabilitySetsSection: React.FC<CapabilitySetsSectionProps> = ({
                         : '—'}
                     </td>
                     <td>{isSystem ? 'Yes' : 'No'}</td>
-                    <td>{typeof set.cap_version === 'number' ? set.cap_version : '—'}</td>
+                    <td>{Number.isFinite(set.cap_version) ? Number(set.cap_version) : '—'}</td>
                     <td className="settings-table__actions">
                       {isSystem ? (
                         <span className="settings-status">System set</span>