@oneuptime/common 11.7.2 → 11.7.4

package/UI/Components/Runbook/StepTimeoutInput.tsx

@@ -0,0 +1,173 @@
+import React, {
+  FunctionComponent,
+  ReactElement,
+  ReactNode,
+  useEffect,
+  useId,
+  useState,
+} from "react";
+import {
+  NON_NUMERIC_TIMEOUT_MESSAGE,
+  TimeoutBounds,
+  getTimeoutValidationError,
+  secondsInputValueToTimeoutInMs,
+  timeoutInMsToSecondsInputValue,
+  willTimeoutBeClamped,
+} from "../../../Types/Runbook/RunbookStepTimeout";
+
+export interface ComponentProps {
+  label: string;
+  // Stored value, in milliseconds. Undefined means "use the default".
+  value: number | undefined;
+  bounds: TimeoutBounds;
+  onChange: (timeoutInMs: number | undefined) => void;
+  description?: ReactNode | undefined;
+  dataTestId?: string | undefined;
+  disabled?: boolean | undefined;
+}
+
+/*
+ * Seconds-in, milliseconds-out editor for a per-step timeout.
+ *
+ * The typed text is held locally rather than derived from the stored value on
+ * every keystroke: deriving it would fight the author mid-edit, because a
+ * partially typed "0" or an emptied field both resolve to "unset" and would
+ * erase what they were typing. The stored value only moves when the text
+ * parses to something usable.
+ */
+const StepTimeoutInput: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  const uniqueId: string = useId();
+  const inputId: string = `step-timeout-${uniqueId}`;
+  const describedById: string = `step-timeout-help-${uniqueId}`;
+  const errorId: string = `step-timeout-error-${uniqueId}`;
+
+  const [text, setText] = useState<string>(
+    timeoutInMsToSecondsInputValue(props.value),
+  );
+
+  /*
+   * A number input reports an empty string for text it cannot parse — a
+   * dangling exponent ("1e"), a lone "-" — while still showing that text to
+   * the author. Tracked separately from `text` so an unparseable keystroke
+   * does not read as "the author cleared the field".
+   */
+  const [hasUnparseableInput, setHasUnparseableInput] =
+    useState<boolean>(false);
+
+  /*
+   * Re-sync when the step being edited changes underneath us (collapse /
+   * reorder / reload). Skipped while the text still represents the stored
+   * value so the author's in-progress typing survives re-renders.
+   */
+  useEffect(() => {
+    const storedAsText: string = timeoutInMsToSecondsInputValue(props.value);
+    setText((currentText: string) => {
+      return secondsInputValueToTimeoutInMs(currentText) === props.value
+        ? currentText
+        : storedAsText;
+    });
+  }, [props.value]);
+
+  const validationError: string | null = hasUnparseableInput
+    ? NON_NUMERIC_TIMEOUT_MESSAGE
+    : getTimeoutValidationError(text, props.bounds);
+
+  const defaultInSeconds: number = props.bounds.defaultInMs / 1000;
+
+  const handleChange: (value: string, isUnparseable: boolean) => void = (
+    value: string,
+    isUnparseable: boolean,
+  ): void => {
+    if (isUnparseable) {
+      /*
+       * Hold the stored value. Reporting undefined here would discard a
+       * timeout the author had already saved, without them touching a digit —
+       * the field would look edited, save cleanly, and the step would silently
+       * drop back to the default.
+       */
+      setHasUnparseableInput(true);
+      return;
+    }
+
+    setHasUnparseableInput(false);
+    setText(value);
+    props.onChange(secondsInputValueToTimeoutInMs(value));
+  };
+
+  /*
+   * Only a usable-but-out-of-range value gets clamped at run time. Anything
+   * unusable falls back to the default instead, so the two cases need
+   * different copy.
+   */
+  const consequence: string = hasUnparseableInput
+    ? "The saved value is unchanged."
+    : willTimeoutBeClamped(text, props.bounds)
+      ? "Values outside the range are clamped when the step runs."
+      : "Leave the field blank to use the default.";
+
+  let inputClassName: 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";
+
+  if (validationError) {
+    inputClassName +=
+      " border-red-300 text-red-900 placeholder-red-300 focus:border-red-500 focus:ring-red-500";
+  }
+
+  if (props.disabled) {
+    inputClassName += " bg-gray-100 text-gray-500 cursor-not-allowed";
+  }
+
+  return (
+    <div>
+      <label
+        htmlFor={inputId}
+        className="block text-xs font-medium text-gray-700 mb-1.5"
+      >
+        {props.label}
+        <span className="ml-2 text-[10px] font-normal text-gray-400">
+          seconds
+        </span>
+      </label>
+      <input
+        id={inputId}
+        type="number"
+        inputMode="decimal"
+        min={props.bounds.minInMs / 1000}
+        max={props.bounds.maxInMs / 1000}
+        step="any"
+        disabled={props.disabled}
+        className={inputClassName}
+        value={text}
+        placeholder={`${defaultInSeconds}`}
+        /*
+         * The error is part of the field's description, not only a live region:
+         * a screen reader that reaches an already-invalid field on focus still
+         * hears why.
+         */
+        aria-describedby={
+          validationError ? `${describedById} ${errorId}` : describedById
+        }
+        aria-invalid={validationError ? true : undefined}
+        data-testid={props.dataTestId}
+        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+          handleChange(e.target.value, e.target.validity?.badInput === true);
+        }}
+      />
+      <p id={describedById} className="text-xs text-gray-500 mt-1.5">
+        {props.description ? <>{props.description} </> : null}
+        Leave blank to use the default of {defaultInSeconds} seconds. Allowed
+        range: {props.bounds.minInMs / 1000}–{props.bounds.maxInMs / 1000}{" "}
+        seconds.
+      </p>
+      {validationError ? (
+        <p id={errorId} role="alert" className="text-xs text-red-600 mt-1">
+          {validationError} {consequence}
+        </p>
+      ) : null}
+    </div>
+  );
+};
+
+export default StepTimeoutInput;

package/UI/Components/SideMenu/SideMenu.tsx

@@ -415,30 +415,50 @@ const SideMenu: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
       role="navigation"
       aria-label="Main navigation"
     >
-      <div className="sticky top-6">
+      {/*
+       * Stick below the app header, not at the top of the viewport. The header
+       * is sticky too, so a plain `top-6` slides the first menu items behind it
+       * as soon as the page scrolls. --app-header-height is measured and
+       * published by MasterPage; the 0px fallback keeps this correct on pages
+       * that render without a sticky header.
+       */}
+      <div
+        className="sticky"
+        style={{ top: "calc(var(--app-header-height, 0px) + 1.5rem)" }}
+      >
         <div
           className={`
+            flex flex-col
             bg-white rounded-2xl
             border border-gray-200/80
             shadow-sm
             overflow-hidden
           `}
+          /*
+           * Menus longer than the viewport (the Kubernetes cluster menu, for
+           * one) would otherwise get pushed back up behind the header near the
+           * bottom of a long page. Cap the card to the space left under the
+           * header and let the item list scroll inside it instead.
+           */
+          style={{
+            maxHeight: "calc(100vh - var(--app-header-height, 0px) - 3rem)",
+          }}
         >
           {/* Optional Header */}
           {props.header && (
-            <div className="px-3 py-3 border-b border-gray-100 bg-gradient-to-b from-gray-50 to-white">
+            <div className="flex-shrink-0 px-3 py-3 border-b border-gray-100 bg-gradient-to-b from-gray-50 to-white">
               {props.header}
             </div>
           )}
 
           {/* Menu Content */}
-          <nav className="p-2">
+          <nav className="p-2 min-h-0 overflow-y-auto">
             <div className="space-y-0.5">{renderMenuContent()}</div>
           </nav>
 
           {/* Optional Footer */}
           {props.footer && (
-            <div className="px-3 py-2 border-t border-gray-100 bg-gray-50/50">
+            <div className="flex-shrink-0 px-3 py-2 border-t border-gray-100 bg-gray-50/50">
               {props.footer}
             </div>
           )}

package/UI/Components/StatusPage/ResourceGroupSection.tsx

@@ -0,0 +1,231 @@
+import Icon, { ThickProp } from "../Icon/Icon";
+import MarkdownViewer from "../Markdown.tsx/LazyMarkdownViewer";
+import IconProp from "../../../Types/Icon/IconProp";
+import StatusPageGroupNestingLayoutUtil from "../../../Utils/StatusPage/GroupNestingLayout";
+import React, {
+  FunctionComponent,
+  ReactElement,
+  useEffect,
+  useState,
+} from "react";
+
+export interface ComponentProps {
+  /*
+   * 0 for a top level group, 1 for its children, and so on. Everything about
+   * how this section is drawn comes from it - see GroupNestingLayout.
+   */
+  depth: number;
+  name: string;
+  /*
+   * Markdown. Rendered below the header rather than inside it - a description
+   * may contain links, and a link inside a button is not something a browser or
+   * a screen reader can make sense of.
+   */
+  description?: string | undefined;
+  /*
+   * Rendered next to the name when the group has sub groups. Pre-translated by
+   * the caller: this component has no i18n of its own.
+   */
+  subGroupCountLabel?: string | undefined;
+  /*
+   * The group's rolled up status or uptime, already formatted and translated by
+   * the caller ("99.9% uptime", "Operational"). Drawn with a status dot so it
+   * reads as a rollup of everything below rather than as one more resource
+   * reading, and it stays visible while the section is open - the point of the
+   * hierarchy is that every level always shows what it rolls up, and a number
+   * that disappears on expand is a number you cannot compare against the level
+   * below it.
+   */
+  rollupLabel?: string | undefined;
+  /* Hex or css colour for the rollup, from the rolled up status. */
+  rollupColor?: string | undefined;
+  isInitiallyExpanded?: boolean | undefined;
+  /* The group's own resources. */
+  resourcesElement?: ReactElement | undefined;
+  /* Nested sections, normally one per sub group. */
+  subGroupsElement?: ReactElement | undefined;
+  hasOwnResources?: boolean | undefined;
+  subGroupCount?: number | undefined;
+  testId?: string | undefined;
+}
+
+/*
+ * One level of the status page resource group hierarchy.
+ *
+ * A top level group is a card. Everything under it is a row on a tree rail -
+ * no card, no second border, no background tint stacked on the last one - so
+ * the hierarchy stays readable however deep it goes and the uptime bars keep
+ * the width they need.
+ */
+const ResourceGroupSection: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  const [isOpen, setIsOpen] = useState<boolean>(
+    Boolean(props.isInitiallyExpanded),
+  );
+
+  /*
+   * Groups arrive with the page payload, so isInitiallyExpanded can flip after
+   * the first render. Keyed on the *boolean*, not on the prop: the column is an
+   * optional boolean, so it routinely arrives as undefined and settles to false,
+   * and keying on the prop would fire on that and slam shut a section the
+   * visitor had just opened.
+   */
+  const initiallyExpanded: boolean = Boolean(props.isInitiallyExpanded);
+
+  useEffect(() => {
+    setIsOpen(initiallyExpanded);
+  }, [initiallyExpanded]);
+
+  const generatedId: string = React.useId();
+  const bodyId: string = `status-page-group-body-${generatedId}`;
+  const descriptionId: string = `status-page-group-description-${generatedId}`;
+
+  const isRootLevel: boolean = StatusPageGroupNestingLayoutUtil.isRootLevel({
+    depth: props.depth,
+  });
+
+  const subGroupCount: number = props.subGroupCount || 0;
+
+  const showSubGroupDivider: boolean =
+    StatusPageGroupNestingLayoutUtil.shouldShowSubGroupDivider({
+      hasOwnResources: Boolean(props.hasOwnResources),
+      subGroupCount: subGroupCount,
+    });
+
+  return (
+    <div
+      className={StatusPageGroupNestingLayoutUtil.getContainerClassName({
+        depth: props.depth,
+      })}
+      data-testid={
+        props.testId ||
+        (isRootLevel ? "status-page-group" : "status-page-nested-group")
+      }
+      data-depth={props.depth}
+    >
+      <button
+        type="button"
+        className={StatusPageGroupNestingLayoutUtil.getHeaderClassName({
+          depth: props.depth,
+        })}
+        aria-expanded={isOpen}
+        aria-controls={isOpen ? bodyId : undefined}
+        aria-describedby={props.description ? descriptionId : undefined}
+        data-testid="status-page-group-header"
+        onClick={() => {
+          setIsOpen(!isOpen);
+        }}
+      >
+        <span
+          className={StatusPageGroupNestingLayoutUtil.getHeaderRowClassName()}
+        >
+          <span
+            className={`${StatusPageGroupNestingLayoutUtil.getChevronBoxClassName()} ${
+              isOpen ? "bg-gray-900/5 text-gray-700" : "text-gray-400"
+            }`}
+            data-testid="status-page-group-chevron"
+            aria-hidden="true"
+          >
+            <Icon
+              className={`h-3.5 w-3.5 transition-transform duration-200 ease-out ${
+                isOpen ? "rotate-90" : ""
+              }`}
+              icon={IconProp.ChevronRight}
+              thick={ThickProp.Thick}
+            />
+          </span>
+          <span
+            className={StatusPageGroupNestingLayoutUtil.getTitleClassName({
+              depth: props.depth,
+            })}
+            title={props.name}
+          >
+            {props.name}
+          </span>
+          {props.subGroupCountLabel ? (
+            <span
+              className={StatusPageGroupNestingLayoutUtil.getSubGroupCountBadgeClassName()}
+              data-testid="status-page-group-sub-group-count"
+            >
+              {props.subGroupCountLabel}
+            </span>
+          ) : (
+            <></>
+          )}
+        </span>
+        {props.rollupLabel ? (
+          <span
+            className={StatusPageGroupNestingLayoutUtil.getRollupClassName()}
+            data-testid="status-page-group-rollup"
+          >
+            <span className="inline-flex items-center gap-1.5">
+              <span
+                className={StatusPageGroupNestingLayoutUtil.getRollupDotClassName()}
+                style={
+                  props.rollupColor
+                    ? { backgroundColor: props.rollupColor }
+                    : undefined
+                }
+                data-testid="status-page-group-rollup-dot"
+                aria-hidden="true"
+              />
+              <span
+                className={StatusPageGroupNestingLayoutUtil.getRollupLabelClassName()}
+                style={
+                  props.rollupColor ? { color: props.rollupColor } : undefined
+                }
+              >
+                {props.rollupLabel}
+              </span>
+            </span>
+          </span>
+        ) : (
+          <></>
+        )}
+      </button>
+      {props.description ? (
+        <div
+          id={descriptionId}
+          className={StatusPageGroupNestingLayoutUtil.getDescriptionClassName()}
+          data-testid="status-page-group-description"
+        >
+          <MarkdownViewer text={props.description} />
+        </div>
+      ) : (
+        <></>
+      )}
+      {isOpen ? (
+        <div
+          id={bodyId}
+          className={StatusPageGroupNestingLayoutUtil.getBodyClassName({
+            depth: props.depth,
+          })}
+          data-testid="status-page-group-body"
+        >
+          {props.resourcesElement || <></>}
+          {props.subGroupsElement ? (
+            <div
+              className={`${
+                showSubGroupDivider
+                  ? StatusPageGroupNestingLayoutUtil.getSubGroupDividerClassName()
+                  : ""
+              } ${StatusPageGroupNestingLayoutUtil.getSubGroupListClassName({
+                depth: props.depth,
+              })}`.trim()}
+              data-testid="status-page-sub-group-list"
+            >
+              {props.subGroupsElement}
+            </div>
+          ) : (
+            <></>
+          )}
+        </div>
+      ) : (
+        <></>
+      )}
+    </div>
+  );
+};
+
+export default ResourceGroupSection;

package/UI/Components/Table/Table.tsx

@@ -181,10 +181,23 @@ const Table: TableFunction = <T extends GenericObject>(
     }
   }, [props.bulkSelectedItems]);
 
+  /*
+   * Width of the loading / error / "no items" row, in cells. It has to match
+   * what TableHeader actually renders or those messages sit under part of the
+   * table instead of spanning it: the Actions column is already one of
+   * `props.columns`, and the drag-handle and bulk-select cells are extra
+   * leading columns that only exist when those features are on.
+   */
   let colspan: number = props.columns.length || 0;
-  if (props.actionButtons && props.actionButtons?.length > 0) {
+  if (props.enableDragAndDrop) {
     colspan++;
   }
+  if (isBulkActionsEnabled) {
+    colspan++;
+  }
+  if (colspan === 0) {
+    colspan = 1;
+  }
 
   const getTablebody: GetReactElementFunction = (): ReactElement => {
     if (props.isLoading) {