add visual cues for configured locators

Author: going-confetti

src/views/BrowserTestEditor/ActionForms/forms/LocatorForm.tsx

@@ -5,6 +5,7 @@ import {
   Popover,
   RadioGroup,
   Separator,
+  Text,
   Tooltip,
 } from '@radix-ui/themes'
 import { WholeWordIcon } from 'lucide-react'
@@ -60,6 +61,12 @@ export function LocatorForm({
 
   const currentLocator = values[current] ?? initializeLocatorValues(current)
 
+  const configuredTypes = new Set(
+    Object.entries(values)
+      .filter(([, locator]) => locator && isLocatorConfigured(locator))
+      .map(([type]) => type)
+  )
+
   const handleChangeCurrent = (type: LocatorOptions['current']) => {
     if (dirtyTypes.has(current)) {
       setTouchedTypes((prev) => {
@@ -131,7 +138,12 @@ export function LocatorForm({
                 .filter(([type]) => type !== 'text')
                 .map(([type, label]) => (
                   <RadioGroup.Item value={type} key={type}>
-                    {label}
+                    <Text
+                      weight={configuredTypes.has(type) ? 'medium' : 'regular'}
+                      color={configuredTypes.has(type) ? undefined : 'gray'}
+                    >
+                      {label}
+                    </Text>
                   </RadioGroup.Item>
                 ))}
             </RadioGroup.Root>
@@ -365,6 +377,14 @@ function initializeLocatorValues(type: ActionLocator['type']): ActionLocator {
   }
 }
 
+function isLocatorConfigured(locator: ActionLocator | undefined): boolean {
+  if (!locator) return false
+
+  // Since validateLocator only checks for empty values, we re-use it to check if the locator is configured.
+  // This isn't perfect, but it's a good enough approximation.
+  return validateLocator(locator).isValid
+}
+
 function addIfAbsent<T>(set: Set<T>, value: T) {
   return set.has(value) ? set : new Set(set).add(value)
 }