Make global value clearer as used

frontend/src/components/configCommon.tsx

@@ -28,12 +28,15 @@ export function CommonFields({
         <ConfigField
           label="Event Similarity"
           description="Required event name similarity, between 0.0 - 1.0"
-          placeholder="0.9"
           type="fraction"
           value={config.eventSimilarity}
-          withGlobalFallback={!!globalConfig}
-          globalFallbackValue={globalConfig?.eventSimilarity}
           showReset={true}
+          resetValue={-1}
+          defaultValuePlaceholder="0.9"
+          showGlobalReset={!!globalConfig}
+          globalValuePlaceholder={
+            globalConfig?.eventSimilarity?.toString() || "0.9"
+          }
           updateValue={(value) => {
             updateConfig({ ...config, eventSimilarity: value });
           }}
@@ -42,12 +45,13 @@ export function CommonFields({
         <ConfigField
           label="Number of Tickets"
           description="Required number of tickets"
-          placeholder="Any"
           type="integer"
           value={config.numTickets}
-          globalFallbackValue={globalConfig?.numTickets}
-          withGlobalFallback={!!globalConfig}
           showReset={true}
+          resetValue={-1}
+          defaultValuePlaceholder="Any"
+          showGlobalReset={!!globalConfig}
+          globalValuePlaceholder={globalConfig?.numTickets?.toString() || "Any"}
           updateValue={(value) => {
             updateConfig({ ...config, numTickets: value });
           }}
@@ -56,12 +60,15 @@ export function CommonFields({
         <ConfigField
           label="Max Ticket Price"
           description="Maximum price per ticket (including fee) in pounds (£)"
-          placeholder="No Max"
           type="price"
           value={config.maxTicketPrice}
-          globalFallbackValue={globalConfig?.maxTicketPrice}
-          withGlobalFallback={!!globalConfig}
           showReset={true}
+          resetValue={-1}
+          defaultValuePlaceholder="No Max"
+          showGlobalReset={!!globalConfig}
+          globalValuePlaceholder={
+            globalConfig?.maxTicketPrice?.toString() || "No Max"
+          }
           updateValue={(value) => {
             updateConfig({ ...config, maxTicketPrice: value });
           }}
@@ -70,12 +77,15 @@ export function CommonFields({
         <ConfigField
           label="Minimum Discount"
           description="Minimum discount (including fee) on the original price as a percentage"
-          placeholder="No Min"
           type="percentage"
           value={config.discount}
-          globalFallbackValue={globalConfig?.discount}
-          withGlobalFallback={!!globalConfig}
           showReset={true}
+          resetValue={-1}
+          defaultValuePlaceholder="No Min"
+          showGlobalReset={!!globalConfig}
+          globalValuePlaceholder={
+            globalConfig?.discount?.toString() || "No Min"
+          }
           updateValue={(value) => {
             updateConfig({ ...config, discount: value });
           }}

frontend/src/components/configField.tsx

@@ -7,44 +7,45 @@ import { NumericFormat } from "react-number-format";
 interface ConfigFieldProps<T extends string | number> {
   label: string;
   description: string;
-  placeholder?: string;
   type: "text" | "number" | "integer" | "fraction" | "percentage" | "price";
   value?: T;
-  globalFallbackValue?: T;
-  withGlobalFallback?: boolean;
-  showReset?: boolean;
+  showReset?: boolean; // Whether to show reset button
+  resetValue?: T; // Value to set when reset is clicked
+  defaultValuePlaceholder?: string; // Placeholder to use when field will use the default value (i.e. reset)
+  showGlobalReset?: boolean; // Whether to show global reset button. Should only be true if field is not a global field
+  globalValuePlaceholder?: string; // Placeholder to use when field will use the global value (i.e. global reset)
   updateValue: (newValue?: T) => void;
 }
 
 export function ConfigField<T extends string | number>({
   label,
   description,
-  placeholder,
   type,
   value,
-  withGlobalFallback = false,
-  globalFallbackValue = undefined,
+  resetValue,
+  globalValuePlaceholder,
+  defaultValuePlaceholder,
   showReset = true,
+  showGlobalReset = false,
   updateValue,
 }: ConfigFieldProps<T>) {
-  // Determine the field value to display
   let fieldValue = value;
+
+  // Determine whether value means field will use global/default
+  // value, and there the placeholder to use.
   let isLinkedToGlobal = false;
-  if (fieldValue === undefined && withGlobalFallback) {
-    // If no value is set, and we want to use global fallback
-    fieldValue = globalFallbackValue;
+  let placeholder = "";
+  if (showGlobalReset && fieldValue === undefined) {
+    placeholder = `${globalValuePlaceholder} (Global)`;
     isLinkedToGlobal = true;
-  } else if (typeof fieldValue === "number" && fieldValue < 0) {
-    // If value is negative number, set undefined to show placeholder
-    fieldValue = undefined;
-  }
-
-  // Determine the reset value based on type
-  let resetValue: T;
-  if (type === "text") {
-    resetValue = "" as T;
-  } else {
-    resetValue = -1 as T;
+  } else if (
+    showReset &&
+    (fieldValue === undefined ||
+      (typeof fieldValue === "string" && fieldValue === "") ||
+      (typeof fieldValue === "number" && fieldValue < 0))
+  ) {
+    placeholder = `${defaultValuePlaceholder} (Default)`;
+    fieldValue = undefined; // Unset value so placeholder is shown
   }
 
   const renderInput = () => {
@@ -93,13 +94,13 @@ export function ConfigField<T extends string | number>({
         <div className="flex items-center space-x-2">
           <Label>{label}</Label>
 
-          {withGlobalFallback && (
+          {showGlobalReset && (
             <LinkedStatusTooltip isLinked={isLinkedToGlobal} />
           )}
         </div>
 
         <div className="ml-auto flex items-center">
-          {withGlobalFallback && (
+          {showGlobalReset && (
             <ResetButton
               resetType="global"
               onClick={() => {