@oneuptime/common 8.0.5414 → 8.0.5438

package/Server/Services/AlertService.ts

@@ -1155,6 +1155,9 @@ ${alertSeverity.name}
       alertSeverityId: alert.alertSeverity?._id?.toString(),
       alertSeverityName: alert.alertSeverity?.name?.toString(),
     };
+    alertCountMetric.attributeKeys = TelemetryUtil.getAttributeKeys(
+      alertCountMetric.attributes,
+    );
 
     alertCountMetric.time = alertStartsAt;
     alertCountMetric.timeUnixNano = OneUptimeDate.toUnixNano(
@@ -1203,6 +1206,9 @@ ${alertSeverity.name}
           alertSeverityId: alert.alertSeverity?._id?.toString(),
           alertSeverityName: alert.alertSeverity?.name?.toString(),
         };
+        timeToAcknowledgeMetric.attributeKeys = TelemetryUtil.getAttributeKeys(
+          timeToAcknowledgeMetric.attributes,
+        );
 
         timeToAcknowledgeMetric.time =
           ackAlertStateTimeline?.startsAt ||
@@ -1256,6 +1262,9 @@ ${alertSeverity.name}
           alertSeverityId: alert.alertSeverity?._id?.toString(),
           alertSeverityName: alert.alertSeverity?.name?.toString(),
         };
+        timeToResolveMetric.attributeKeys = TelemetryUtil.getAttributeKeys(
+          timeToResolveMetric.attributes,
+        );
 
         timeToResolveMetric.time =
           resolvedAlertStateTimeline?.startsAt ||
@@ -1302,6 +1311,9 @@ ${alertSeverity.name}
         alertSeverityId: alert.alertSeverity?._id?.toString(),
         alertSeverityName: alert.alertSeverity?.name?.toString(),
       };
+      alertDurationMetric.attributeKeys = TelemetryUtil.getAttributeKeys(
+        alertDurationMetric.attributes,
+      );
 
       alertDurationMetric.time =
         lastAlertStateTimeline?.startsAt ||

package/Server/Services/IncidentService.ts

@@ -1956,6 +1956,9 @@ ${incidentSeverity.name}
       incidentSeverityId: incident.incidentSeverity?._id?.toString(),
       incidentSeverityName: incident.incidentSeverity?.name?.toString(),
     };
+    incidentCountMetric.attributeKeys = TelemetryUtil.getAttributeKeys(
+      incidentCountMetric.attributes,
+    );
 
     incidentCountMetric.time = incidentStartsAt;
     incidentCountMetric.timeUnixNano = OneUptimeDate.toUnixNano(
@@ -2013,6 +2016,9 @@ ${incidentSeverity.name}
           incidentSeverityId: incident.incidentSeverity?._id?.toString(),
           incidentSeverityName: incident.incidentSeverity?.name?.toString(),
         };
+        timeToAcknowledgeMetric.attributeKeys = TelemetryUtil.getAttributeKeys(
+          timeToAcknowledgeMetric.attributes,
+        );
 
         timeToAcknowledgeMetric.time =
           ackIncidentStateTimeline?.startsAt ||
@@ -2075,6 +2081,9 @@ ${incidentSeverity.name}
           incidentSeverityId: incident.incidentSeverity?._id?.toString(),
           incidentSeverityName: incident.incidentSeverity?.name?.toString(),
         };
+        timeToResolveMetric.attributeKeys = TelemetryUtil.getAttributeKeys(
+          timeToResolveMetric.attributes,
+        );
 
         timeToResolveMetric.time =
           resolvedIncidentStateTimeline?.startsAt ||
@@ -2132,6 +2141,9 @@ ${incidentSeverity.name}
         incidentSeverityId: incident.incidentSeverity?._id?.toString(),
         incidentSeverityName: incident.incidentSeverity?.name?.toString(),
       };
+      incidentDurationMetric.attributeKeys = TelemetryUtil.getAttributeKeys(
+        incidentDurationMetric.attributes,
+      );
 
       incidentDurationMetric.time =
         lastIncidentStateTimeline?.startsAt ||

package/Server/Services/OpenTelemetryIngestService.ts

@@ -212,6 +212,10 @@ export default class OTelIngestService {
       };
     }
 
+    newDbMetric.attributeKeys = TelemetryUtil.getAttributeKeys(
+      newDbMetric.attributes,
+    );
+
     // aggregationTemporality
 
     if (aggregationTemporality) {

package/Server/Services/TelemetryAttributeService.ts

@@ -18,6 +18,7 @@ type TelemetrySource = {
   service: AnalyticsDatabaseService<any>;
   tableName: string;
   attributesColumn: string;
+  attributeKeysColumn: string;
   timeColumn: string;
 };
 
@@ -42,6 +43,7 @@ export class TelemetryAttributeService {
           service: LogDatabaseService,
           tableName: LogDatabaseService.model.tableName,
           attributesColumn: "attributes",
+          attributeKeysColumn: "attributeKeys",
           timeColumn: "time",
         };
       case TelemetryType.Metric:
@@ -49,6 +51,7 @@ export class TelemetryAttributeService {
           service: MetricDatabaseService,
           tableName: MetricDatabaseService.model.tableName,
           attributesColumn: "attributes",
+          attributeKeysColumn: "attributeKeys",
           timeColumn: "time",
         };
       case TelemetryType.Trace:
@@ -56,6 +59,7 @@ export class TelemetryAttributeService {
           service: SpanDatabaseService,
           tableName: SpanDatabaseService.model.tableName,
           attributesColumn: "attributes",
+          attributeKeysColumn: "attributeKeys",
           timeColumn: "startTime",
         };
       default:
@@ -213,6 +217,7 @@ export class TelemetryAttributeService {
     projectId: ObjectID;
     tableName: string;
     attributesColumn: string;
+    attributeKeysColumn: string;
     timeColumn: string;
   }): Statement {
     const lookbackStartDate: Date =
@@ -220,14 +225,24 @@ export class TelemetryAttributeService {
 
     const statement: Statement = SQL`
       WITH filtered AS (
-        SELECT ${data.attributesColumn} AS attrs
+        SELECT arrayJoin(
+            if(
+              ${data.attributeKeysColumn} IS NULL OR empty(${data.attributeKeysColumn}),
+              JSONExtractKeys(${data.attributesColumn}),
+              ${data.attributeKeysColumn}
+            )
+          ) AS attribute
         FROM ${data.tableName}
         WHERE projectId = ${{
           type: TableColumnType.ObjectID,
           value: data.projectId,
         }}
-          AND ${data.attributesColumn} IS NOT NULL
-          AND ${data.attributesColumn} != ''
+          AND (
+            ${data.attributeKeysColumn} IS NOT NULL OR (
+              ${data.attributesColumn} IS NOT NULL AND
+              ${data.attributesColumn} != ''
+            )
+          )
           AND ${data.timeColumn} >= ${{
             type: TableColumnType.Date,
             value: lookbackStartDate,
@@ -238,8 +253,9 @@ export class TelemetryAttributeService {
           value: TelemetryAttributeService.ROW_SCAN_LIMIT,
         }}
       )
-      SELECT DISTINCT arrayJoin(JSONExtractKeys(attrs)) AS attribute
+      SELECT DISTINCT attribute
       FROM filtered
+      WHERE attribute IS NOT NULL AND attribute != ''
       ORDER BY attribute ASC
       LIMIT ${{
         type: TableColumnType.Number,
@@ -259,6 +275,7 @@ export class TelemetryAttributeService {
         projectId: data.projectId,
         tableName: data.source.tableName,
         attributesColumn: data.source.attributesColumn,
+        attributeKeysColumn: data.source.attributeKeysColumn,
         timeColumn: data.source.timeColumn,
       });
 

package/Server/Utils/Monitor/MonitorResource.ts

@@ -61,6 +61,12 @@ import MonitorLogService from "../../Services/MonitorLogService";
 import ExceptionMessages from "../../../Types/Exception/ExceptionMessages";
 
 export default class MonitorResourceUtil {
+  private static setAttributeKeys(metric: Metric): void {
+    metric.attributeKeys = TelemetryUtil.getAttributeKeys(
+      metric.attributes as JSONObject,
+    );
+  }
+
   @CaptureSpan()
   public static async monitorResource(
     dataToProcess: DataToProcess,
@@ -683,6 +689,8 @@ export default class MonitorResourceUtil {
           monitorMetric.attributes["probeName"] = data.probeName.toString();
         }
 
+        MonitorResourceUtil.setAttributeKeys(monitorMetric);
+
         monitorMetric.time = OneUptimeDate.getCurrentDate();
         monitorMetric.timeUnixNano = OneUptimeDate.getCurrentDateAsUnixNano();
         monitorMetric.metricPointType = MetricPointType.Sum;
@@ -730,6 +738,8 @@ export default class MonitorResourceUtil {
           monitorMetric.attributes["probeName"] = data.probeName.toString();
         }
 
+        MonitorResourceUtil.setAttributeKeys(monitorMetric);
+
         monitorMetric.time = OneUptimeDate.getCurrentDate();
         monitorMetric.timeUnixNano = OneUptimeDate.getCurrentDateAsUnixNano();
         monitorMetric.metricPointType = MetricPointType.Sum;
@@ -768,6 +778,8 @@ export default class MonitorResourceUtil {
           monitorMetric.attributes["probeName"] = data.probeName.toString();
         }
 
+        MonitorResourceUtil.setAttributeKeys(monitorMetric);
+
         monitorMetric.time = OneUptimeDate.getCurrentDate();
         monitorMetric.timeUnixNano = OneUptimeDate.getCurrentDateAsUnixNano();
         monitorMetric.metricPointType = MetricPointType.Sum;
@@ -809,6 +821,8 @@ export default class MonitorResourceUtil {
             monitorMetric.attributes["probeName"] = data.probeName.toString();
           }
 
+          MonitorResourceUtil.setAttributeKeys(monitorMetric);
+
           monitorMetric.time = OneUptimeDate.getCurrentDate();
           monitorMetric.timeUnixNano = OneUptimeDate.getCurrentDateAsUnixNano();
           monitorMetric.metricPointType = MetricPointType.Sum;
@@ -857,6 +871,8 @@ export default class MonitorResourceUtil {
         monitorMetric.attributes["probeName"] = data.probeName.toString();
       }
 
+      MonitorResourceUtil.setAttributeKeys(monitorMetric);
+
       monitorMetric.time = OneUptimeDate.getCurrentDate();
       monitorMetric.timeUnixNano = OneUptimeDate.getCurrentDateAsUnixNano();
       monitorMetric.metricPointType = MetricPointType.Sum;
@@ -909,6 +925,8 @@ export default class MonitorResourceUtil {
           monitorMetric.attributes["probeName"] = data.probeName.toString();
         }
 
+        MonitorResourceUtil.setAttributeKeys(monitorMetric);
+
         monitorMetric.time = OneUptimeDate.getCurrentDate();
         monitorMetric.timeUnixNano = OneUptimeDate.getCurrentDateAsUnixNano();
         monitorMetric.metricPointType = MetricPointType.Sum;
@@ -952,6 +970,8 @@ export default class MonitorResourceUtil {
         monitorMetric.attributes["probeName"] = data.probeName.toString();
       }
 
+      MonitorResourceUtil.setAttributeKeys(monitorMetric);
+
       monitorMetric.time = OneUptimeDate.getCurrentDate();
       monitorMetric.timeUnixNano = OneUptimeDate.getCurrentDateAsUnixNano();
       monitorMetric.metricPointType = MetricPointType.Sum;
@@ -995,6 +1015,8 @@ export default class MonitorResourceUtil {
         monitorMetric.attributes["probeName"] = data.probeName.toString();
       }
 
+      MonitorResourceUtil.setAttributeKeys(monitorMetric);
+
       monitorMetric.time = OneUptimeDate.getCurrentDate();
       monitorMetric.timeUnixNano = OneUptimeDate.getCurrentDateAsUnixNano();
       monitorMetric.metricPointType = MetricPointType.Sum;
@@ -1029,6 +1051,8 @@ export default class MonitorResourceUtil {
         ).probeId.toString(),
       };
 
+      MonitorResourceUtil.setAttributeKeys(monitorMetric);
+
       monitorMetric.time = OneUptimeDate.getCurrentDate();
       monitorMetric.timeUnixNano = OneUptimeDate.getCurrentDateAsUnixNano();
       monitorMetric.metricPointType = MetricPointType.Sum;

package/Server/Utils/Telemetry/Telemetry.ts

@@ -252,4 +252,17 @@ export default class TelemetryUtil {
 
     return finalObj;
   }
+
+  public static getAttributeKeys(
+    attributes:
+      | Dictionary<AttributeType | Array<AttributeType> | JSONObject>
+      | JSONObject
+      | undefined,
+  ): Array<string> {
+    if (!attributes || typeof attributes !== "object") {
+      return [];
+    }
+
+    return Object.keys(attributes).sort();
+  }
 }

package/Types/AnalyticsDatabase/MaterializedView.ts

@@ -0,0 +1,4 @@
+export default interface MaterializedView {
+  name: string;
+  query: string;
+}

package/Types/AnalyticsDatabase/Projection.ts

@@ -0,0 +1,4 @@
+export default interface Projection {
+  name: string;
+  query: string;
+}

package/Types/Date.ts

@@ -1076,6 +1076,114 @@ export default class OneUptimeDate {
     return formattedString;
   }
 
+  public static getHumanizedDurationFromNanoseconds(data: {
+    nanoseconds: number;
+    maxParts?: number;
+  }): string {
+    let { nanoseconds } = data;
+    const maxParts: number = data.maxParts ?? 2;
+
+    if (!Number.isFinite(nanoseconds)) {
+      return "-";
+    }
+
+    if (nanoseconds === 0) {
+      return "0 ms";
+    }
+
+    const sign: string = nanoseconds < 0 ? "-" : "";
+    nanoseconds = Math.abs(nanoseconds);
+
+    if (nanoseconds < 1000) {
+      return sign + Math.round(nanoseconds).toString() + " ns";
+    }
+
+    const microseconds: number = nanoseconds / 1000;
+    if (microseconds < 1000) {
+      return sign + OneUptimeDate.formatDurationValue(microseconds) + " μs";
+    }
+
+    const milliseconds: number = nanoseconds / 1000000;
+    if (milliseconds < 1000) {
+      return sign + OneUptimeDate.formatDurationValue(milliseconds) + " ms";
+    }
+
+    const seconds: number = nanoseconds / 1000000000;
+
+    if (seconds < 60) {
+      return sign + OneUptimeDate.formatDurationValue(seconds) + " s";
+    }
+
+    const units: Array<{ label: string; seconds: number }> = [
+      { label: "d", seconds: 86400 },
+      { label: "h", seconds: 3600 },
+      { label: "m", seconds: 60 },
+      { label: "s", seconds: 1 },
+    ];
+
+    let remainingSeconds: number = Math.floor(seconds);
+    const parts: string[] = [];
+
+    for (const unit of units) {
+      if (parts.length >= maxParts) {
+        break;
+      }
+
+      if (remainingSeconds < unit.seconds) {
+        continue;
+      }
+
+      const value: number = Math.floor(remainingSeconds / unit.seconds);
+
+      if (value > 0) {
+        parts.push(`${value}${unit.label}`);
+        remainingSeconds -= value * unit.seconds;
+      }
+    }
+
+    const fractionalSeconds: number = seconds - Math.floor(seconds);
+    const leftoverSeconds: number = remainingSeconds + fractionalSeconds;
+
+    if (leftoverSeconds > 0) {
+      if (parts.length === 0) {
+        parts.push(`${OneUptimeDate.formatDurationValue(leftoverSeconds)}s`);
+      } else if (parts[parts.length - 1]?.endsWith("s")) {
+        const numericValue: number = parseFloat(
+          parts[parts.length - 1]!.slice(0, -1),
+        );
+        const updatedSeconds: number = numericValue + leftoverSeconds;
+        parts[parts.length - 1] =
+          `${OneUptimeDate.formatDurationValue(updatedSeconds)}s`;
+      } else if (parts.length < maxParts) {
+        parts.push(`${OneUptimeDate.formatDurationValue(leftoverSeconds)}s`);
+      }
+    }
+
+    if (parts.length === 0) {
+      return sign + OneUptimeDate.formatDurationValue(seconds) + " s";
+    }
+
+    const trimmedParts: string[] = parts.slice(0, maxParts);
+
+    if (sign) {
+      trimmedParts[0] = sign + trimmedParts[0];
+    }
+
+    return trimmedParts.join(" ");
+  }
+
+  private static formatDurationValue(value: number): string {
+    const abs: number = Math.abs(value);
+
+    if (abs >= 100) {
+      return Math.round(value).toString();
+    }
+
+    const decimalPlaces: number = 2;
+    const fixed: string = value.toFixed(decimalPlaces);
+    return fixed.replace(/\.0+$/, "").replace(/(\.\d*?[1-9])0+$/, "$1");
+  }
+
   public static getGmtOffsetByTimezone(timezone: Timezone): number {
     return moment.tz(timezone).utcOffset();
   }

package/UI/Components/AutocompleteTextInput/AutocompleteTextInput.tsx

@@ -0,0 +1,250 @@
+import React, {
+  FunctionComponent,
+  ReactElement,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+
+export interface ComponentProps {
+  value?: string;
+  onChange?: ((value: string) => void) | undefined;
+  suggestions?: Array<string> | undefined;
+  placeholder?: string | undefined;
+  className?: string | undefined;
+  menuClassName?: string | undefined;
+  disabled?: boolean | undefined;
+  autoFocus?: boolean | undefined;
+  dataTestId?: string | undefined;
+  onFocus?: (() => void) | undefined;
+  onBlur?: (() => void) | undefined;
+  outerDivClassName?: string | undefined;
+  disableSpellCheck?: boolean | undefined;
+}
+
+const BASE_INPUT_CLASS: string =
+  "block w-full rounded-md border border-gray-300 bg-white py-2 pl-3 pr-3 text-sm placeholder-gray-500 focus:border-indigo-500 focus:text-gray-900 focus:placeholder-gray-400 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm";
+
+const MAX_SUGGESTIONS: number = 50;
+
+// Provides a free-form text input with an optional suggestion dropdown.
+const AutocompleteTextInput: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  const [inputValue, setInputValue] = useState<string>(props.value || "");
+  const [isMenuVisible, setIsMenuVisible] = useState<boolean>(false);
+  const [highlightedIndex, setHighlightedIndex] = useState<number>(-1);
+  const containerRef: React.MutableRefObject<HTMLDivElement | null> =
+    useRef<HTMLDivElement | null>(null);
+  const blurTimeoutRef: React.MutableRefObject<number | null> = useRef<
+    number | null
+  >(null);
+  const listboxIdRef: React.MutableRefObject<string> = useRef<string>(
+    `autocomplete-suggestions-${Math.random().toString(36).slice(2, 10)}`,
+  );
+
+  useEffect(() => {
+    setInputValue(props.value || "");
+  }, [props.value]);
+
+  useEffect(() => {
+    const handleClickOutside: (event: MouseEvent) => void = (
+      event: MouseEvent,
+    ) => {
+      if (
+        containerRef.current &&
+        event.target instanceof Node &&
+        !containerRef.current.contains(event.target)
+      ) {
+        setIsMenuVisible(false);
+        setHighlightedIndex(-1);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+
+  const suggestions: Array<string> = useMemo(() => {
+    const uniqueSuggestions: Array<string> = props.suggestions
+      ? Array.from(new Set(props.suggestions))
+      : [];
+
+    if (uniqueSuggestions.length === 0) {
+      return [];
+    }
+
+    const normalizedInput: string = inputValue.trim().toLowerCase();
+
+    if (normalizedInput === "") {
+      return uniqueSuggestions.slice(0, MAX_SUGGESTIONS);
+    }
+
+    return uniqueSuggestions
+      .filter((suggestion: string) => {
+        return suggestion.toLowerCase().includes(normalizedInput);
+      })
+      .slice(0, MAX_SUGGESTIONS);
+  }, [inputValue, props.suggestions]);
+
+  const showMenu: boolean = isMenuVisible && suggestions.length > 0;
+
+  const getInputClassName: () => string = (): string => {
+    let className: string = props.className || BASE_INPUT_CLASS;
+
+    if (props.disabled) {
+      className += " bg-gray-100 text-gray-500 cursor-not-allowed";
+    }
+
+    return className;
+  };
+
+  const clearBlurTimeout: () => void = (): void => {
+    if (blurTimeoutRef.current !== null) {
+      window.clearTimeout(blurTimeoutRef.current);
+      blurTimeoutRef.current = null;
+    }
+  };
+
+  const handleSuggestionSelect: (value: string) => void = (value: string) => {
+    clearBlurTimeout();
+    setInputValue(value);
+    props.onChange?.(value);
+    setIsMenuVisible(false);
+    setHighlightedIndex(-1);
+  };
+
+  const handleInputChange: (
+    event: React.ChangeEvent<HTMLInputElement>,
+  ) => void = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const value: string = event.target.value;
+    setInputValue(value);
+    props.onChange?.(value);
+    setIsMenuVisible(true);
+    setHighlightedIndex(-1);
+  };
+
+  const handleInputFocus: () => void = () => {
+    clearBlurTimeout();
+    setIsMenuVisible(true);
+    props.onFocus?.();
+  };
+
+  const handleInputBlur: () => void = () => {
+    clearBlurTimeout();
+    blurTimeoutRef.current = window.setTimeout(() => {
+      setIsMenuVisible(false);
+      setHighlightedIndex(-1);
+      props.onBlur?.();
+    }, 150);
+  };
+
+  const handleKeyDown: (
+    event: React.KeyboardEvent<HTMLInputElement>,
+  ) => void = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (!showMenu) {
+      return;
+    }
+
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      setHighlightedIndex((previousIndex: number) => {
+        const nextIndex: number = previousIndex + 1;
+        if (nextIndex >= suggestions.length) {
+          return 0;
+        }
+        return nextIndex;
+      });
+    }
+
+    if (event.key === "ArrowUp") {
+      event.preventDefault();
+      setHighlightedIndex((previousIndex: number) => {
+        if (previousIndex <= 0) {
+          return suggestions.length - 1;
+        }
+        return previousIndex - 1;
+      });
+    }
+
+    if (event.key === "Enter") {
+      if (highlightedIndex >= 0 && highlightedIndex < suggestions.length) {
+        event.preventDefault();
+        handleSuggestionSelect(suggestions[highlightedIndex]!);
+      }
+    }
+
+    if (event.key === "Escape") {
+      setIsMenuVisible(false);
+      setHighlightedIndex(-1);
+    }
+  };
+
+  useEffect(() => {
+    if (highlightedIndex >= suggestions.length) {
+      setHighlightedIndex(suggestions.length - 1);
+    }
+  }, [suggestions, highlightedIndex]);
+
+  return (
+    <div
+      ref={containerRef}
+      className={props.outerDivClassName || "relative mt-2 mb-1 w-full"}
+    >
+      <input
+        autoFocus={props.autoFocus}
+        className={getInputClassName()}
+        data-testid={props.dataTestId}
+        disabled={props.disabled}
+        aria-autocomplete="list"
+        aria-controls={listboxIdRef.current}
+        aria-expanded={showMenu}
+        role="combobox"
+        onBlur={handleInputBlur}
+        onChange={handleInputChange}
+        onFocus={handleInputFocus}
+        onKeyDown={handleKeyDown}
+        placeholder={props.placeholder}
+        spellCheck={!props.disableSpellCheck}
+        type="text"
+        value={inputValue}
+      />
+      {showMenu && (
+        <div
+          className={
+            props.menuClassName ||
+            "absolute z-10 mt-1 max-h-56 w-full overflow-auto rounded-md border border-gray-200 bg-white py-1 text-sm shadow-lg"
+          }
+          id={listboxIdRef.current}
+          role="listbox"
+        >
+          {suggestions.map((suggestion: string, index: number) => {
+            const isActive: boolean = index === highlightedIndex;
+            return (
+              <button
+                key={`${suggestion}-${index}`}
+                type="button"
+                role="option"
+                aria-selected={isActive}
+                className={`flex w-full items-center px-3 py-2 text-left hover:bg-indigo-50 ${isActive ? "bg-indigo-600 text-white hover:bg-indigo-500" : "text-gray-700"}`}
+                onMouseDown={(event: React.MouseEvent<HTMLButtonElement>) => {
+                  event.preventDefault();
+                }}
+                onClick={() => {
+                  handleSuggestionSelect(suggestion);
+                }}
+              >
+                {suggestion}
+              </button>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default AutocompleteTextInput;