Smoother flow with match expressions add/remove

Signed-off-by: David Martin <[email protected]>

src/components/dnspolicy/LoadBalancingField.tsx

@@ -10,8 +10,6 @@ interface LoadBalancingProps {
 
 const LoadBalancingField: React.FC<LoadBalancingProps> = ({ loadBalancing, onChange }) => {
   const operatorOptions = ['In', 'NotIn', 'Exists', 'DoesNotExist'];
-
-  const [isSelectOpen, setIsSelectOpen] = React.useState<{ [key: string]: boolean }>({});
   const [customWeights, setCustomWeights] = React.useState<WeightedCustom[]>(loadBalancing.weighted.custom || []);
 
   // Update customWeights and ensure it updates the loadBalancing object
@@ -22,19 +20,28 @@ const LoadBalancingField: React.FC<LoadBalancingProps> = ({ loadBalancing, onCha
       weighted: { ...loadBalancing.weighted, custom: updatedWeights },
     });
   };
-  
+
   const addCustomSelector = () => {
-    const updatedWeights = [
+    const updatedWeights: WeightedCustom[] = [
       ...customWeights,
       {
-        selector: { matchExpressions: [], matchLabels: {} },
-        weight: 0,
+        selector: {
+          matchExpressions: [
+            {
+              key: '',
+              operator: 'In', // Default operator
+              values: [''], // Add one empty value by default for "In" operator
+            },
+          ],
+          matchLabels: {},
+        },
+        weight: 0, // Default weight
       },
     ];
+
     updateCustomWeights(updatedWeights);
   };
 
-
   const removeCustomSelector = (index: number) => {
     const updatedWeights = customWeights.filter((_, i) => i !== index);
     updateCustomWeights(updatedWeights);
@@ -44,26 +51,30 @@ const LoadBalancingField: React.FC<LoadBalancingProps> = ({ loadBalancing, onCha
     const updatedCustoms = [...customWeights];
     const matchExpressions = updatedCustoms[index].selector.matchExpressions || [];
     matchExpressions[expIndex] = { ...matchExpressions[expIndex], [field]: value };
+
+    // If the operator is 'Exists' or 'DoesNotExist', remove the 'values' field
+    if (field === 'operator' && (value === 'Exists' || value === 'DoesNotExist')) {
+      delete matchExpressions[expIndex].values; // Remove values if the operator does not need it
+    }
+
     updatedCustoms[index].selector.matchExpressions = matchExpressions;
     updateCustomWeights(updatedCustoms);
   };
 
   const addMatchExpression = (index: number) => {
     const updatedCustoms = [...customWeights];
 
+    const newExpression: MatchExpression = {
+      key: '',
+      operator: 'In', // Default to 'In', can be changed by the user
+      values: [''], // Add an empty string for the first value by default
+    };
+
     updatedCustoms[index].selector.matchExpressions = [
       ...(updatedCustoms[index].selector.matchExpressions || []),
-      { key: '', operator: 'In', values: [] },
+      newExpression,
     ];
 
-    const newExpIndex = updatedCustoms[index].selector.matchExpressions.length - 1;
-    const key = `${index}-${newExpIndex}`;
-
-    setIsSelectOpen((prev) => ({
-      ...prev,
-      [key]: false,
-    }));
-
     updateCustomWeights(updatedCustoms);
   };
 
@@ -125,13 +136,19 @@ const LoadBalancingField: React.FC<LoadBalancingProps> = ({ loadBalancing, onCha
           <div key={index} style={{ marginBottom: '16px', border: '1px solid #ccc', padding: '16px' }}>
             <h3>Custom Selector {index + 1}</h3>
 
+            {/* Weight */}
+            <FormGroup label="Weight" isRequired fieldId={`weight-${index}`}>
+              <TextInput
+                id={`weight-${index}`}
+                type="number"
+                value={custom.weight}
+                onChange={(event) => updateWeight(index, Number(event.currentTarget.value))}
+                isRequired
+              />
+            </FormGroup>
+
             {/* Match Expressions */}
             {custom.selector.matchExpressions?.map((expression, expIndex) => {
-              const key = `${index}-${expIndex}`;
-              // Ensure the key exists in isSelectOpen before rendering
-              if (!(key in isSelectOpen)) {
-                return null;  // Skip rendering if the key is not initialized yet
-              }
 
               return (
                 <div key={expIndex} style={{ marginBottom: '8px' }}>
@@ -156,7 +173,7 @@ const LoadBalancingField: React.FC<LoadBalancingProps> = ({ loadBalancing, onCha
                       ))}
                     </FormSelect>
                   </FormGroup>
-                  {/* Values Input (Only show for "In" and "NotIn" operators) */}
+                  {/* Values Input (Always show one empty value for "In" and "NotIn") */}
                   {(expression.operator === 'In' || expression.operator === 'NotIn') && (
                     <FormGroup label="Values" fieldId={`values-${index}-${expIndex}`}>
                       {expression.values?.map((value, valueIndex) => (
@@ -191,17 +208,6 @@ const LoadBalancingField: React.FC<LoadBalancingProps> = ({ loadBalancing, onCha
               Add Match Expression
             </Button>
 
-            {/* Weight */}
-            <FormGroup label="Weight" isRequired fieldId={`weight-${index}`}>
-              <TextInput
-                id={`weight-${index}`}
-                type="number"
-                value={custom.weight}
-                onChange={(event) => updateWeight(index, Number(event.currentTarget.value))}
-                isRequired
-              />
-            </FormGroup>
-
             <Button variant="danger" onClick={() => removeCustomSelector(index)}>
               Remove Custom Selector
             </Button>