@oneuptime/common 14.0.8 → 14.0.10

package/UI/Components/EntityDropdown/EntityDropdown.tsx

@@ -474,6 +474,8 @@ const EntityDropdown: FunctionComponent<EntityDropdownProps> = (
     useRef<HTMLDivElement | null>(null);
   const inputRef: React.MutableRefObject<HTMLInputElement | null> =
     useRef<HTMLInputElement | null>(null);
+  const valueButtonRef: React.MutableRefObject<HTMLButtonElement | null> =
+    useRef<HTMLButtonElement | null>(null);
   const debounceRef: React.MutableRefObject<number | null> = useRef<
     number | null
   >(null);
@@ -573,6 +575,67 @@ const EntityDropdown: FunctionComponent<EntityDropdownProps> = (
     };
   }, []);
 
+  /*
+   * The keyboard's side of the click-outside above. Tabbing out of the
+   * dropdown - from the input, or on past the last option in the menu - onto
+   * the next field used to leave the menu open, and when that field opened a
+   * popup of its own (the next dropdown, the Affected Resources picker) the
+   * two stacked on top of each other. The menu is a DOM child of the
+   * container (laid out fixed, never portalled), so moving between the input,
+   * the chips, the menu's tabs and its options stays inside and keeps it open.
+   *
+   * Only a move onto another element closes it. With no element to go to
+   * (relatedTarget null, or the document itself) focus went nowhere in
+   * particular - the window lost focus, a press landed on something that
+   * takes no focus, the focused option unmounted - and presses are for the
+   * listener above to judge.
+   */
+  const closeWhenFocusLeaves: (
+    event: React.FocusEvent<HTMLDivElement>,
+  ) => void = (event: React.FocusEvent<HTMLDivElement>): void => {
+    const nextFocused: EventTarget | null = event.relatedTarget;
+
+    if (
+      !(nextFocused instanceof Element) ||
+      event.currentTarget.contains(nextFocused)
+    ) {
+      return;
+    }
+
+    setIsOpen(false);
+    setHighlightedIndex(-1);
+  };
+
+  /*
+   * A single-select showing its value swaps elements as the menu opens and
+   * closes: the value button while closed, the search input while open. Focus
+   * meant for the field across that swap has to wait for the element taking
+   * over, which is not mounted yet when the swap is asked for. Set by the
+   * value button, which hands focus to the search input as the menu opens,
+   * and by Escape, which hands it back to the value button as the menu
+   * closes (see closeMenuOnEscape). Without it focus went down with the
+   * element being replaced, to the page: typing did not search, focus could
+   * never leave the dropdown to close the menu (see closeWhenFocusLeaves),
+   * and a keyboard user was left outside the field they were working in.
+   */
+  const focusFieldAfterSwapRef: React.MutableRefObject<boolean> =
+    useRef<boolean>(false);
+
+  useLayoutEffect(() => {
+    if (!focusFieldAfterSwapRef.current) {
+      return;
+    }
+
+    focusFieldAfterSwapRef.current = false;
+
+    if (isOpen) {
+      inputRef.current?.focus();
+      return;
+    }
+
+    valueButtonRef.current?.focus();
+  }, [isOpen]);
+
   useEffect(() => {
     return () => {
       if (debounceRef.current !== null) {
@@ -1179,11 +1242,49 @@ const EntityDropdown: FunctionComponent<EntityDropdownProps> = (
   const showSingleSelectedText: boolean =
     !isMulti && !isOpen && selectedOptions.length > 0;
 
+  /*
+   * Escape while the menu is open closes just the menu, wherever focus is in
+   * the dropdown: the search input, or - reached with Tab - an option, one of
+   * the menu's tabs or footer buttons, a chip or the Clear button. It is
+   * claimed, so Modal's document listener never hears it: that listener
+   * closes the whole form and throws away its unsaved edits, which is what
+   * Escape on a Tab-reached option used to do while Escape in the input only
+   * closed the menu. With the menu already closed Escape is left alone, so
+   * the next press still closes the modal.
+   *
+   * Focus goes back to the field rather than down with the menu's buttons.
+   */
+  const closeMenuOnEscape: (
+    event: React.KeyboardEvent<HTMLDivElement>,
+  ) => void = (event: React.KeyboardEvent<HTMLDivElement>): void => {
+    if (event.key !== "Escape" || !isOpen) {
+      return;
+    }
+
+    event.preventDefault();
+
+    if (!isMulti && selectedOptions.length > 0) {
+      /*
+       * Closing swaps the search input for the value button, so focus waits
+       * for the button to mount (see focusFieldAfterSwapRef).
+       */
+      focusFieldAfterSwapRef.current = true;
+    } else {
+      // Focusing the input asks to open the menu; closing it after wins.
+      inputRef.current?.focus();
+    }
+
+    setIsOpen(false);
+    setHighlightedIndex(-1);
+  };
+
   return (
     <div
       ref={containerRef}
       id={props.id}
       className={props.className || "relative mt-2 mb-1 w-full"}
+      onBlur={closeWhenFocusLeaves}
+      onKeyDown={closeMenuOnEscape}
     >
       {isMulti && selectedOptions.length > 0 && (
         <div className="mb-2 flex flex-wrap gap-1.5">
@@ -1240,6 +1341,7 @@ const EntityDropdown: FunctionComponent<EntityDropdownProps> = (
          */}
         {showSingleSelectedText && (
           <button
+            ref={valueButtonRef}
             type="button"
             disabled={props.disabled}
             aria-labelledby={props.ariaLabelledby}
@@ -1247,8 +1349,8 @@ const EntityDropdown: FunctionComponent<EntityDropdownProps> = (
               if (props.disabled) {
                 return;
               }
+              focusFieldAfterSwapRef.current = true;
               setIsOpen(true);
-              inputRef.current?.focus();
             }}
             onFocus={() => {
               props.onFocus?.();
@@ -1406,16 +1508,10 @@ const EntityDropdown: FunctionComponent<EntityDropdownProps> = (
                   }
                   return;
                 }
-                if (event.key === "Escape") {
-                  /*
-                   * The modal also listens for Escape. Consume it here so the
-                   * first press closes the menu without dismissing the form.
-                   */
-                  event.preventDefault();
-                  setIsOpen(false);
-                  setHighlightedIndex(-1);
-                  return;
-                }
+                /*
+                 * Escape bubbles to the container, which closes the menu for
+                 * every control in the dropdown alike (closeMenuOnEscape).
+                 */
                 if (
                   event.key === "Backspace" &&
                   searchQuery === "" &&

package/UI/Components/Forms/Fields/FormField.tsx

@@ -499,6 +499,15 @@ const FormField: <T extends GenericObject>(
                 id={props.field.id}
                 tabIndex={0}
                 dataTestId={props.field.dataTestId}
+                /*
+                 * A field its form locks (an alert's monitor, when that
+                 * monitor raised the alert) must not open, change or clear.
+                 * Only field.disabled: the form-wide props.isDisabled also
+                 * covers the form's own dropdown-options load, which
+                 * EntityDropdown never waits on because it searches the
+                 * server itself.
+                 */
+                disabled={props.field.disabled}
                 onChange={(
                   value: DropdownValue | Array<DropdownValue> | null,
                 ) => {
@@ -532,6 +541,7 @@ const FormField: <T extends GenericObject>(
                 id={props.field.id}
                 tabIndex={0}
                 dataTestId={props.field.dataTestId}
+                disabled={props.field.disabled}
                 onChange={async (
                   value: DropdownValue | Array<DropdownValue> | null,
                 ) => {

package/UI/Components/Input/Input.tsx

@@ -8,6 +8,7 @@ import React, {
   FunctionComponent,
   ReactElement,
   useEffect,
+  useLayoutEffect,
   useRef,
   useState,
 } from "react";
@@ -70,6 +71,48 @@ export interface ComponentProps {
   autoComplete?: string | undefined;
 }
 
+type GetDateDisplayValueFunction = (
+  value: string | Date,
+  type: InputType | undefined,
+) => string | undefined;
+
+/*
+ * The text a date or datetime-local input shows for a stored value, in the
+ * form the browser's picker reads. Undefined leaves the display as it is: a
+ * value holding " - " is an InBetween range, which only a range filter shows.
+ * So does anything that is neither a string nor a Date - an untyped caller's
+ * number or JSON object - which the input has never tried to parse, and which
+ * would now be parsed during render, where a throw takes the page down.
+ */
+const getDateDisplayValue: GetDateDisplayValueFunction = (
+  value: string | Date,
+  type: InputType | undefined,
+): string | undefined => {
+  if (!value) {
+    return "";
+  }
+
+  if (typeof value !== "string" && !(value instanceof Date)) {
+    return undefined;
+  }
+
+  if (typeof value === "string" && value.includes(" - ")) {
+    return undefined;
+  }
+
+  const date: Date =
+    value instanceof Date ? value : OneUptimeDate.fromString(value);
+
+  try {
+    return type === InputType.DATETIME_LOCAL
+      ? OneUptimeDate.toDateTimeLocalString(date)
+      : OneUptimeDate.asDateForDatabaseQuery(date);
+  } catch (err: unknown) {
+    Logger.error(err as Error);
+    return "";
+  }
+};
+
 const Input: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
@@ -92,61 +135,54 @@ const Input: FunctionComponent<ComponentProps> = (
     className += " bg-gray-100 text-gray-500 cursor-not-allowed";
   }
 
-  const [value, setValue] = useState<string | Date>("");
+  const isDateInput: boolean =
+    props.type === InputType.DATE || props.type === InputType.DATETIME_LOCAL;
+
+  /*
+   * Seeded from the props on the first render, not by an effect after it.
+   *
+   * Seeding it from an effect meant the <input> was inserted blank and only
+   * filled in a task or more later, and in between it was on screen, focusable
+   * and typeable. Anything that put the caret in it during that window had it
+   * moved to the end when the value landed, so what was typed next went AFTER
+   * the prefilled text: the SLO burn rate form's Incident Title became "SLO
+   * burn rate: {{sloName}} — {{ruleName}}Coordinate response for {{sloName}}"
+   * when a fill selected the blank field just before its default template
+   * arrived. TextArea and MarkdownEditor already start from their props.
+   *
+   * The effects further down still follow a value or initialValue that
+   * changes after mounting.
+   */
+  const [value, setValue] = useState<string | Date>((): string | Date => {
+    return props.value || props.initialValue || "";
+  });
 
   /*
    * Only dates need a display form that differs from the stored value, and
    * working it out means parsing, so it stays in state behind an effect.
-   * Text keeps no second copy - see the comment on displayValue below.
+   * Text keeps no second copy - see the comment on displayValue below. Like
+   * the value, it starts from what the input mounts with.
    */
-  const [dateDisplayValue, setDateDisplayValue] = useState<string>("");
+  const [dateDisplayValue, setDateDisplayValue] = useState<string>(
+    (): string => {
+      return isDateInput ? getDateDisplayValue(value, props.type) ?? "" : "";
+    },
+  );
   const ref: React.MutableRefObject<HTMLInputElement | null> =
     useRef<HTMLInputElement | null>(null);
 
-  const isDateInput: boolean =
-    props.type === InputType.DATE || props.type === InputType.DATETIME_LOCAL;
-
   useEffect(() => {
-    if (
-      props.type === InputType.DATE ||
-      props.type === InputType.DATETIME_LOCAL
-    ) {
-      if (value && (value as unknown) instanceof Date) {
-        let dateString: string = "";
-        try {
-          if (props.type === InputType.DATETIME_LOCAL) {
-            dateString = OneUptimeDate.toDateTimeLocalString(value as any);
-          } else {
-            dateString = OneUptimeDate.asDateForDatabaseQuery(value);
-          }
-        } catch (e: any) {
-          Logger.error(e);
-        }
-        setDateDisplayValue(dateString);
-      } else if (
-        value &&
-        (value as any).includes &&
-        !(value as any).includes(" - ")
-      ) {
-        // " - " is for InBetween dates.
-        const date: Date = OneUptimeDate.fromString(value);
-        let dateString: string = "";
-        try {
-          if (props.type === InputType.DATETIME_LOCAL) {
-            dateString = OneUptimeDate.toDateTimeLocalString(date);
-          } else {
-            dateString = OneUptimeDate.asDateForDatabaseQuery(date);
-          }
-        } catch (err: any) {
-          Logger.error(err);
-        }
-        setDateDisplayValue(dateString);
-      } else if (
-        !value ||
-        ((value as any).includes && !(value as any).includes(" - "))
-      ) {
-        setDateDisplayValue("");
-      }
+    if (!isDateInput) {
+      return;
+    }
+
+    const nextDateDisplayValue: string | undefined = getDateDisplayValue(
+      value,
+      props.type,
+    );
+
+    if (nextDateDisplayValue !== undefined) {
+      setDateDisplayValue(nextDateDisplayValue);
     }
   }, [value]);
 
@@ -172,7 +208,14 @@ const Input: FunctionComponent<ComponentProps> = (
     ? dateDisplayValue
     : (value as string) || "";
 
-  useEffect(() => {
+  /*
+   * A layout effect, so the write lands in the same commit that rendered the
+   * value. A passive effect runs after that commit, and for one that did not
+   * come from a click or a keystroke - data arriving, a timer - that is a later
+   * task. In between, the field would be on screen blank even though this
+   * component already knows what it holds.
+   */
+  useLayoutEffect(() => {
     const input: HTMLInputElement | null = ref.current;
 
     /*
@@ -185,16 +228,6 @@ const Input: FunctionComponent<ComponentProps> = (
     }
   }, [ref, displayValue]);
 
-  useEffect(() => {
-    if (props.initialValue) {
-      setValue(props.initialValue);
-    }
-
-    if (props.value) {
-      setValue(props.value);
-    }
-  }, []);
-
   useEffect(() => {
     if (props.initialValue) {
       setValue(props.initialValue);

package/UI/Components/List/ListRow.tsx

@@ -1,9 +1,8 @@
 import ActionButtonSchema from "../ActionButton/ActionButtonSchema";
-import Button, { ButtonSize } from "../Button/Button";
+import RowActions from "../ActionButton/RowActions";
 import Detail from "../Detail/Detail";
 import Field from "../Detail/Field";
 import Icon, { ThickProp } from "../Icon/Icon";
-import ConfirmModal from "../Modal/ConfirmModal";
 import GenericObject from "../../../Types/GenericObject";
 import IconProp from "../../../Types/Icon/IconProp";
 import React, { ReactElement, useState, useEffect } from "react";
@@ -31,14 +30,6 @@ type ListRowFunction = <T extends GenericObject>(
 const ListRow: ListRowFunction = <T extends GenericObject>(
   props: ComponentProps<T>,
 ): ReactElement => {
-  const [isButtonLoading, setIsButtonLoading] = useState<Array<boolean>>(
-    props.actionButtons?.map(() => {
-      return false;
-    }) || [],
-  );
-
-  const [error, setError] = useState<string>("");
-
   // Track mobile view for responsive behavior
   const [isMobile, setIsMobile] = useState<boolean>(false);
 
@@ -96,71 +87,14 @@ const ListRow: ListRowFunction = <T extends GenericObject>(
           )}
         </div>
 
-        <div
-          className={
-            props.enableDragAndDrop ? `flex mt-5 ml-5` : `flex mt-5 -ml-3`
-          }
-        >
-          {props.actionButtons?.map(
-            (button: ActionButtonSchema<T>, i: number) => {
-              if (button.isVisible && !button.isVisible(props.item)) {
-                return <></>;
-              }
-
-              // Hide button on mobile if hideOnMobile is true
-              if (button.hideOnMobile && isMobile) {
-                return <></>;
-              }
-
-              return (
-                <div key={i}>
-                  <Button
-                    buttonSize={ButtonSize.Small}
-                    title={button.title}
-                    icon={button.icon}
-                    buttonStyle={button.buttonStyleType}
-                    isLoading={isButtonLoading[i]}
-                    disabled={button.disabled}
-                    tooltip={button.tooltip}
-                    onClick={() => {
-                      if (button.disabled) {
-                        return;
-                      }
-
-                      if (button.onClick) {
-                        isButtonLoading[i] = true;
-                        setIsButtonLoading(isButtonLoading);
-                        button.onClick(
-                          props.item,
-                          () => {
-                            // on action complete
-                            isButtonLoading[i] = false;
-                            setIsButtonLoading(isButtonLoading);
-                          },
-                          (err: Error) => {
-                            isButtonLoading[i] = false;
-                            setIsButtonLoading(isButtonLoading);
-                            setError((err as Error).message);
-                          },
-                        );
-                      }
-                    }}
-                  />
-                </div>
-              );
-            },
-          )}
-        </div>
-        {error && (
-          <ConfirmModal
-            title={`Error`}
-            description={error}
-            submitButtonText={"Close"}
-            onSubmit={() => {
-              return setError("");
-            }}
+        <div className={props.enableDragAndDrop ? `mt-5 ml-8` : `mt-5`}>
+          <RowActions<T>
+            item={props.item}
+            actionButtons={props.actionButtons}
+            isMobile={isMobile}
+            className="justify-start"
           />
-        )}
+        </div>
       </div>
     );
   };

package/UI/Components/LogsViewer/LogsViewer.tsx

@@ -68,9 +68,10 @@ import ProjectUtil from "../../Utils/Project";
 import TelemetryServiceUtil from "../../Utils/TelemetryService";
 import ObjectID from "../../../Types/ObjectID";
 import OneUptimeDate from "../../../Types/Date";
-import useHistogramZoom, {
-  HistogramZoomState,
-} from "../Charts/Utils/useHistogramZoom";
+import useViewerTimeRangeZoom, {
+  ViewerTimeRangeZoom,
+} from "../TelemetryViewer/useViewerTimeRangeZoom";
+import { TimeRangeZoomProvider } from "../Charts/TimeRangeZoom/TimeRangeZoomContext";
 import useTelemetryEntityNames from "../../Utils/Telemetry/UseTelemetryEntityNames";
 import { TelemetryEntityNameMap } from "../../Utils/Telemetry/TelemetryEntityNames";
 import {
@@ -342,10 +343,15 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
   /*
    * Drag-zooming the histogram is a one-way trip on its own: it swaps the
    * window for a custom one and nothing remembers what the reader was
-   * looking at. This keeps that window so a double-click on the chart can
-   * hand it back.
+   * looking at. This keeps that window so a double-click on a chart, or
+   * "Reset zoom" beside the picker, can hand it back. The analytics chart
+   * shares the same zoom (see the provider below), so dragging across
+   * either one retimes the whole viewer, and either one zooms back out. A
+   * viewer pinned to the window of a zoom offered around it (a telemetry
+   * snapshot's primary explorer) follows that zoom instead, so a drag here
+   * retimes everything that zoom does.
    */
-  const histogramZoom: HistogramZoomState = useHistogramZoom({
+  const viewerZoom: ViewerTimeRangeZoom = useViewerTimeRangeZoom({
     timeRange: props.timeRange,
     onTimeRangeSelect: props.onHistogramTimeRangeSelect,
     onTimeRangeChange: props.onTimeRangeChange,
@@ -1192,10 +1198,15 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
       exportLogs(displayedLogs, LogExportFormat.JSON, selectedColumns);
     },
     ...(props.liveOptions ? { liveOptions: props.liveOptions } : {}),
-    ...(props.timeRange && histogramZoom.onTimeRangeChange
+    ...(props.timeRange && viewerZoom.onTimeRangeChange
       ? {
           timeRange: props.timeRange,
-          onTimeRangeChange: histogramZoom.onTimeRangeChange,
+          onTimeRangeChange: viewerZoom.onTimeRangeChange,
+          /*
+           * A followed zoom's way back is shown by whoever offers it (the
+           * snapshot's, beside its badge): one Reset zoom per zoom.
+           */
+          showResetZoom: !viewerZoom.followsEnclosingZoom,
         }
       : {}),
     showKeyboardShortcuts,
@@ -1219,7 +1230,7 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
       : {}),
   };
 
-  return (
+  const viewer: ReactElement = (
     <div className="space-y-2">
       {props.showFilters && (
         <div>
@@ -1255,8 +1266,8 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
           buckets={props.histogramBuckets}
           isLoading={props.histogramLoading || false}
           bucketIntervalMs={props.histogramBucketIntervalMs}
-          onTimeRangeSelect={histogramZoom.onTimeRangeSelect}
-          onZoomOut={histogramZoom.onZoomOut}
+          onTimeRangeSelect={viewerZoom.onTimeRangeSelect}
+          onZoomOut={viewerZoom.onZoomOut}
         />
       )}
 
@@ -1381,6 +1392,24 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
       )}
     </div>
   );
+
+  /*
+   * The histogram, the analytics chart and the toolbar's "Reset zoom" all
+   * work on this viewer's window, whatever page it sits in, so the viewer's
+   * zoom shadows any zoom offered around it, unless that zoom is over this
+   * very window: the viewer then hands that zoom on (see
+   * useViewerTimeRangeZoom). A host that cannot zoom (no select handler)
+   * leaves whatever surrounds the viewer in place.
+   */
+  if (!viewerZoom.zoom) {
+    return viewer;
+  }
+
+  return (
+    <TimeRangeZoomProvider zoom={viewerZoom.zoom}>
+      {viewer}
+    </TimeRangeZoomProvider>
+  );
 };
 
 export default LogsViewer;

package/UI/Components/LogsViewer/components/LogTimeRangePicker.tsx

@@ -1,10 +1,17 @@
 import React, { FunctionComponent, ReactElement } from "react";
 import RangeStartAndEndDateTime from "../../../../Types/Time/RangeStartAndEndDateTime";
 import TimeRangePickerDropdown from "../../Date/TimeRangePickerDropdown";
+import ResetTimeRangeZoomButton from "../../Charts/TimeRangeZoom/ResetTimeRangeZoomButton";
 
 export interface LogTimeRangePickerProps {
   value: RangeStartAndEndDateTime;
   onChange: (value: RangeStartAndEndDateTime) => void;
+  /*
+   * False while the viewer follows a zoom offered around it (see
+   * useViewerTimeRangeZoom): whoever offers that zoom shows its "Reset
+   * zoom", and a second one here would only repeat it.
+   */
+  showResetZoom?: boolean | undefined;
 }
 
 // Matches the Tailwind `w-72` on the rendered dropdown (18rem).
@@ -16,13 +23,22 @@ export const LOG_TIME_RANGE_PICKER_TEST_ID_PREFIX: string =
 const LogTimeRangePicker: FunctionComponent<LogTimeRangePickerProps> = (
   props: LogTimeRangePickerProps,
 ): ReactElement => {
+  /*
+   * Once a drag on the log volume or analytics chart has zoomed the viewer,
+   * the picker only reads "Custom". The reset button beside it is the way
+   * back for anyone who does not know to double-click a chart, and the only
+   * one for keyboard users. It renders nothing unless the viewer is zoomed.
+   */
   return (
-    <TimeRangePickerDropdown
-      value={props.value}
-      onChange={props.onChange}
-      dataTestIdPrefix={LOG_TIME_RANGE_PICKER_TEST_ID_PREFIX}
-      dropdownWidthInPx={LOG_TIME_RANGE_DROPDOWN_WIDTH_IN_PX}
-    />
+    <div className="inline-flex items-center gap-1.5">
+      <TimeRangePickerDropdown
+        value={props.value}
+        onChange={props.onChange}
+        dataTestIdPrefix={LOG_TIME_RANGE_PICKER_TEST_ID_PREFIX}
+        dropdownWidthInPx={LOG_TIME_RANGE_DROPDOWN_WIDTH_IN_PX}
+      />
+      {props.showResetZoom === false ? null : <ResetTimeRangeZoomButton />}
+    </div>
   );
 };