@oneuptime/common 14.0.8 → 14.0.9

package/UI/Components/OrderedStatesList/Item.tsx

@@ -1,6 +1,5 @@
 import ActionButtonSchema from "../ActionButton/ActionButtonSchema";
-import Button, { ButtonSize } from "../Button/Button";
-import ConfirmModal from "../Modal/ConfirmModal";
+import RowActions from "../ActionButton/RowActions";
 import GenericObject from "../../../Types/GenericObject";
 import React, { ReactElement, useState, useEffect } from "react";
 
@@ -20,14 +19,6 @@ type ItemFunction = <T extends GenericObject>(
 const Item: ItemFunction = <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);
 
@@ -46,17 +37,6 @@ const Item: ItemFunction = <T extends GenericObject>(
 
   return (
     <div className="text-center border border-gray-300 rounded p-10 space-y-4 w-fit">
-      {error && (
-        <ConfirmModal
-          title={`Error`}
-          description={error}
-          submitButtonText={"Close"}
-          onSubmit={() => {
-            return setError("");
-          }}
-        />
-      )}
-
       {!props.getTitleElement && (
         <div>
           {props.item[props.titleField]
@@ -83,57 +63,12 @@ const Item: ItemFunction = <T extends GenericObject>(
           </div>
         )}
       </div>
-      <div className="flex justify-center">
-        {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} className="">
-                <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>
+      <RowActions<T>
+        item={props.item}
+        actionButtons={props.actionButtons}
+        isMobile={isMobile}
+        className="justify-center"
+      />
     </div>
   );
 };

package/UI/Components/StatusPage/ResourceGrid.tsx

@@ -6,6 +6,8 @@ import StatusPageResourceExplorerUtil, {
 import Button, { ButtonSize, ButtonStyleType } from "../Button/Button";
 import CheckboxElement from "../Checkbox/Checkbox";
 import Icon, { ThickProp } from "../Icon/Icon";
+import MoreMenu from "../MoreMenu/MoreMenu";
+import MoreMenuItem from "../MoreMenu/MoreMenuItem";
 import React, { FunctionComponent, ReactElement, useMemo } from "react";
 
 export interface ComponentProps {
@@ -38,8 +40,28 @@ export interface ComponentProps {
   onAddToCell: (rowValue: string | null, columnValue: string | null) => void;
   onEdit: (statusPageResource: StatusPageResource) => void;
   onDelete: (statusPageResource: StatusPageResource) => void;
+  /*
+   * See ResourceList: a list row's ⋯ menu offers the resource's id, and a grid
+   * chip is the same resource, so its menu offers it too.
+   */
+  onShowId: (statusPageResource: StatusPageResource) => void;
 }
 
+/*
+ * The chip's actions fade in on hover and on keyboard focus, so a cell full of
+ * monitors reads as names rather than as a column of icons. Neither of those
+ * holds while the ⋯ menu is open, though: the menu is drawn in the body, so the
+ * pointer leaves the chip to reach it and focus moves into it - and the trigger
+ * the menu hangs from would fade out from under it. The trigger says it is
+ * expanded for as long as the menu is open, so that is what keeps it shown.
+ */
+const CHIP_ACTIONS_CLASS_NAME: string =
+  "flex flex-shrink-0 items-center gap-0.5 opacity-0 transition-opacity focus-within:opacity-100 group-hover:opacity-100 has-[[aria-expanded=true]]:opacity-100";
+
+/* A stranded resource needs fixing, so its actions are not held back. */
+const ORPHAN_ACTIONS_CLASS_NAME: string =
+  "flex flex-shrink-0 items-center gap-0.5";
+
 /*
  * A group whose view mode is Grid, edited as the matrix it renders as on the
  * public status page: one column per column axis value, one row per row axis
@@ -114,6 +136,100 @@ const ResourceGrid: FunctionComponent<ComponentProps> = (
     );
   };
 
+  type RenderActionsFunction = (data: {
+    statusPageResource: StatusPageResource;
+    editTooltip: string;
+    className: string;
+  }) => ReactElement;
+
+  /*
+   * The same two controls a list row carries, so that switching a group's view
+   * mode moves its resources around without changing what can be done to them
+   * or where: edit stays one click away, and everything else - the id, and the
+   * removal that deserves a moment's thought - waits behind ⋯.
+   *
+   * The menu is portalled because the grid scrolls sideways inside an
+   * overflow-x-auto box, which would clip a menu opened under a chip in the
+   * bottom row, or under one in the last column.
+   */
+  const renderActions: RenderActionsFunction = (data: {
+    statusPageResource: StatusPageResource;
+    editTooltip: string;
+    className: string;
+  }): ReactElement => {
+    const statusPageResource: StatusPageResource = data.statusPageResource;
+    const name: string =
+      StatusPageResourceExplorerUtil.getResourceName(statusPageResource);
+
+    const menuItems: Array<ReactElement> = [
+      <MoreMenuItem
+        key="show-id"
+        text="Show ID"
+        icon={IconProp.Info}
+        onClick={() => {
+          props.onShowId(statusPageResource);
+        }}
+      />,
+    ];
+
+    if (props.isDeleteable) {
+      menuItems.push(
+        <MoreMenuItem
+          key="delete"
+          text="Remove from status page"
+          icon={IconProp.Trash}
+          isDestructive={true}
+          onClick={() => {
+            props.onDelete(statusPageResource);
+          }}
+        />,
+      );
+    }
+
+    return (
+      <div
+        className={data.className}
+        data-testid="status-page-resource-grid-actions"
+      >
+        {props.isEditable ? (
+          <Button
+            buttonSize={ButtonSize.Small}
+            buttonStyle={ButtonStyleType.ICON}
+            icon={IconProp.Edit}
+            title=""
+            tooltip={data.editTooltip}
+            ariaLabel={`Edit ${name}`}
+            dataTestId="status-page-resource-grid-edit"
+            className="text-gray-400 hover:bg-gray-200 hover:text-gray-700"
+            onClick={() => {
+              props.onEdit(statusPageResource);
+            }}
+          />
+        ) : (
+          <></>
+        )}
+
+        <MoreMenu
+          text={`More actions for ${name}`}
+          menuIcon={IconProp.EllipsisHorizontal}
+          isMenuPortaled={true}
+          elementToBeShownInsteadOfButton={
+            <button
+              type="button"
+              aria-label={`More actions for ${name}`}
+              data-testid="status-page-resource-grid-more"
+              className="flex h-7 w-7 items-center justify-center rounded-md text-gray-400 transition-colors hover:bg-gray-200 hover:text-gray-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-400"
+            >
+              <Icon icon={IconProp.EllipsisHorizontal} className="h-5 w-5" />
+            </button>
+          }
+        >
+          {menuItems}
+        </MoreMenu>
+      </div>
+    );
+  };
+
   type RenderResourceChipFunction = (
     statusPageResource: StatusPageResource,
   ) => ReactElement;
@@ -153,43 +269,11 @@ const ResourceGrid: FunctionComponent<ComponentProps> = (
           )}
         </div>
 
-        <div className="flex items-center gap-0.5 opacity-0 transition-opacity focus-within:opacity-100 group-hover:opacity-100">
-          {props.isEditable ? (
-            <Button
-              buttonSize={ButtonSize.Small}
-              buttonStyle={ButtonStyleType.ICON}
-              icon={IconProp.Edit}
-              title=""
-              tooltip="Edit this resource"
-              ariaLabel={`Edit ${name}`}
-              dataTestId="status-page-resource-grid-edit"
-              className="text-gray-400 hover:bg-gray-200 hover:text-gray-700"
-              onClick={() => {
-                props.onEdit(statusPageResource);
-              }}
-            />
-          ) : (
-            <></>
-          )}
-
-          {props.isDeleteable ? (
-            <Button
-              buttonSize={ButtonSize.Small}
-              buttonStyle={ButtonStyleType.ICON}
-              icon={IconProp.Trash}
-              title=""
-              tooltip="Remove this resource from the status page"
-              ariaLabel={`Remove ${name}`}
-              dataTestId="status-page-resource-grid-delete"
-              className="text-gray-400 hover:bg-red-50 hover:text-red-600"
-              onClick={() => {
-                props.onDelete(statusPageResource);
-              }}
-            />
-          ) : (
-            <></>
-          )}
-        </div>
+        {renderActions({
+          statusPageResource,
+          editTooltip: "Edit this resource",
+          className: CHIP_ACTIONS_CLASS_NAME,
+        })}
       </div>
     );
   };
@@ -313,11 +397,6 @@ const ResourceGrid: FunctionComponent<ComponentProps> = (
           <div className="mt-3 flex flex-col gap-2">
             {gridModel.orphanResources.map(
               (statusPageResource: StatusPageResource) => {
-                const name: string =
-                  StatusPageResourceExplorerUtil.getResourceName(
-                    statusPageResource,
-                  );
-
                 return (
                   <div
                     key={statusPageResource._id?.toString()}
@@ -343,41 +422,11 @@ const ResourceGrid: FunctionComponent<ComponentProps> = (
                       </div>
                     </div>
 
-                    <div className="flex flex-shrink-0 items-center gap-0.5">
-                      {props.isEditable ? (
-                        <Button
-                          buttonSize={ButtonSize.Small}
-                          buttonStyle={ButtonStyleType.ICON}
-                          icon={IconProp.Edit}
-                          title=""
-                          tooltip="Put this resource on the grid"
-                          ariaLabel={`Edit ${name}`}
-                          className="text-gray-400 hover:bg-gray-200 hover:text-gray-700"
-                          onClick={() => {
-                            props.onEdit(statusPageResource);
-                          }}
-                        />
-                      ) : (
-                        <></>
-                      )}
-
-                      {props.isDeleteable ? (
-                        <Button
-                          buttonSize={ButtonSize.Small}
-                          buttonStyle={ButtonStyleType.ICON}
-                          icon={IconProp.Trash}
-                          title=""
-                          tooltip="Remove this resource from the status page"
-                          ariaLabel={`Remove ${name}`}
-                          className="text-gray-400 hover:bg-red-50 hover:text-red-600"
-                          onClick={() => {
-                            props.onDelete(statusPageResource);
-                          }}
-                        />
-                      ) : (
-                        <></>
-                      )}
-                    </div>
+                    {renderActions({
+                      statusPageResource,
+                      editTooltip: "Put this resource on the grid",
+                      className: ORPHAN_ACTIONS_CLASS_NAME,
+                    })}
                   </div>
                 );
               },

package/UI/Components/Table/TableBody.tsx

@@ -57,6 +57,7 @@ const TableBody: TableBodyFunction = <T extends GenericObject>(
     isItemSelectable: boolean;
     itemSelectLabel: string | undefined;
     itemNotSelectableReason: string | undefined;
+    itemLabel: string | undefined;
   };
 
   const getSelectionProps: SelectionPropsFunction = (item: T) => {
@@ -71,8 +72,12 @@ const TableBody: TableBodyFunction = <T extends GenericObject>(
         }),
     );
 
-    const label: string | undefined = props.bulkItemToString
-      ? `Select ${props.bulkItemToString(item)}`
+    const itemLabel: string | undefined = props.bulkItemToString
+      ? props.bulkItemToString(item)
+      : undefined;
+
+    const label: string | undefined = itemLabel
+      ? `Select ${itemLabel}`
       : undefined;
 
     return {
@@ -84,6 +89,7 @@ const TableBody: TableBodyFunction = <T extends GenericObject>(
       itemNotSelectableReason: props.itemNotSelectableReason
         ? props.itemNotSelectableReason(item)
         : undefined,
+      itemLabel: itemLabel,
     };
   };
 

package/UI/Components/Table/TableRow.tsx

@@ -1,5 +1,6 @@
 import ActionButtonSchema from "../ActionButton/ActionButtonSchema";
-import Button, { ButtonSize, ButtonStyleType } from "../Button/Button";
+import RowActions from "../ActionButton/RowActions";
+import { ButtonStyleType } from "../Button/Button";
 import CheckboxElement from "../Checkbox/Checkbox";
 import ColorInput from "../ColorViewer/ColorViewer";
 import Icon, { ThickProp } from "../Icon/Icon";
@@ -52,6 +53,8 @@ export interface ComponentProps<T extends GenericObject> {
   itemSelectLabel?: string | undefined;
   /** Hover text for a row whose box is locked. Says why, in the caller's words. */
   itemNotSelectableReason?: string | undefined;
+  /** What this row is ("Monitor: Checkout API"), for its ⋯ menu's name. */
+  itemLabel?: string | undefined;
 
   // responsive
   isMobile?: boolean;
@@ -74,16 +77,8 @@ const TableRow: TableRowFunction = <T extends GenericObject>(
     }, obj);
   };
 
-  const [isButtonLoading, setIsButtonLoading] = useState<Array<boolean>>(
-    props.actionButtons?.map(() => {
-      return false;
-    }) || [],
-  );
-
   const [tooltipModalText, setTooltipModalText] = useState<string>("");
 
-  const [error, setError] = useState<string>("");
-
   // Track mobile view for responsive behavior
   const [isMobile, setIsMobile] = useState<boolean>(false);
 
@@ -198,71 +193,15 @@ const TableRow: TableRowFunction = <T extends GenericObject>(
                     : null;
 
                   return (
-                    <div key={i} className="flex flex-wrap gap-2">
+                    <div key={i} className="flex flex-wrap items-center gap-2">
                       {customAction}
-                      {error && (
-                        <ConfirmModal
-                          title={`Error`}
-                          description={error}
-                          submitButtonText={"Close"}
-                          onSubmit={() => {
-                            return setError("");
-                          }}
-                        />
-                      )}
-                      {props.actionButtons?.map(
-                        (
-                          button: ActionButtonSchema<T>,
-                          actionIndex: number,
-                        ) => {
-                          if (
-                            button.isVisible &&
-                            !button.isVisible(props.item)
-                          ) {
-                            return <div key={actionIndex}></div>;
-                          }
-
-                          if (button.hideOnMobile) {
-                            return <div key={actionIndex}></div>;
-                          }
-
-                          return (
-                            <Button
-                              key={actionIndex}
-                              buttonSize={ButtonSize.Small}
-                              title={button.title}
-                              icon={button.icon}
-                              buttonStyle={button.buttonStyleType}
-                              isLoading={isButtonLoading[actionIndex]}
-                              disabled={button.disabled}
-                              tooltip={button.tooltip}
-                              onClick={() => {
-                                if (button.disabled) {
-                                  return;
-                                }
-
-                                if (button.onClick) {
-                                  isButtonLoading[actionIndex] = true;
-                                  setIsButtonLoading(isButtonLoading);
-
-                                  button.onClick(
-                                    props.item,
-                                    () => {
-                                      isButtonLoading[actionIndex] = false;
-                                      setIsButtonLoading(isButtonLoading);
-                                    },
-                                    (err: Error) => {
-                                      isButtonLoading[actionIndex] = false;
-                                      setIsButtonLoading(isButtonLoading);
-                                      setError((err as Error).message);
-                                    },
-                                  );
-                                }
-                              }}
-                            />
-                          );
-                        },
-                      )}
+                      <RowActions<T>
+                        item={props.item}
+                        actionButtons={props.actionButtons}
+                        isMobile={true}
+                        className="justify-start"
+                        itemLabel={props.itemLabel}
+                      />
                     </div>
                   );
                 }
@@ -501,8 +440,8 @@ const TableRow: TableRowFunction = <T extends GenericObject>(
                 getTableCellContentClassName<T>(column);
 
               const actionsContainerClassName: string = contentWrapperClassName
-                ? `flex justify-end ${contentWrapperClassName}`
-                : "flex justify-end";
+                ? `flex items-center justify-end gap-2 ${contentWrapperClassName}`
+                : "flex items-center justify-end gap-2";
 
               return (
                 <td
@@ -528,71 +467,12 @@ const TableRow: TableRowFunction = <T extends GenericObject>(
                   {column.type === FieldType.Actions && (
                     <div className={actionsContainerClassName}>
                       {columnContent}
-                      {error && (
-                        <div className="text-align-left">
-                          <ConfirmModal
-                            title={`Error`}
-                            description={error}
-                            submitButtonText={"Close"}
-                            onSubmit={() => {
-                              return setError("");
-                            }}
-                          />
-                        </div>
-                      )}
-                      {props.actionButtons?.map(
-                        (button: ActionButtonSchema<T>, i: number) => {
-                          if (
-                            button.isVisible &&
-                            !button.isVisible(props.item)
-                          ) {
-                            return <div key={i}></div>;
-                          }
-
-                          // Hide button on mobile if hideOnMobile is true
-                          if (button.hideOnMobile && isMobileView) {
-                            return <div key={i}></div>;
-                          }
-
-                          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>
-                          );
-                        },
-                      )}
+                      <RowActions<T>
+                        item={props.item}
+                        actionButtons={props.actionButtons}
+                        isMobile={isMobileView}
+                        itemLabel={props.itemLabel}
+                      />
                     </div>
                   )}
                 </td>

package/UI/Components/TelemetryViewer/TelemetryViewer.tsx

@@ -22,9 +22,10 @@ import ComponentLoader from "../ComponentLoader/ComponentLoader";
 import ErrorMessage from "../ErrorMessage/ErrorMessage";
 import Icon from "../Icon/Icon";
 import IconProp from "../../../Types/Icon/IconProp";
-import useHistogramZoom, {
-  HistogramZoomState,
-} from "../Charts/Utils/useHistogramZoom";
+import useViewerTimeRangeZoom, {
+  ViewerTimeRangeZoom,
+} from "./useViewerTimeRangeZoom";
+import { TimeRangeZoomProvider } from "../Charts/TimeRangeZoom/TimeRangeZoomContext";
 
 export interface TelemetryViewerProps<T> {
   // -- Data --
@@ -169,10 +170,15 @@ function TelemetryViewerInner<T>(props: TelemetryViewerProps<T>): ReactElement {
   /*
    * 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 same zoom is
+   * offered to everything the viewer renders (see the provider below), so
+   * a drag across the analytics chart retimes the viewer just like one
+   * across the histogram. 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,
@@ -190,7 +196,7 @@ function TelemetryViewerInner<T>(props: TelemetryViewerProps<T>): ReactElement {
 
   const showFacetToggle: boolean = showFacets && !props.mainContentOverride;
 
-  return (
+  const viewer: ReactElement = (
     <div className="flex min-h-0 w-full flex-1 flex-col gap-3">
       {/* Toolbar */}
       <div className="flex flex-wrap items-center gap-2">
@@ -247,7 +253,12 @@ function TelemetryViewerInner<T>(props: TelemetryViewerProps<T>): ReactElement {
 
         <TelemetryTimeRangePicker
           value={props.timeRange}
-          onChange={histogramZoom.onTimeRangeChange || props.onTimeRangeChange}
+          onChange={viewerZoom.onTimeRangeChange || props.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}
         />
 
         {props.live && (
@@ -320,8 +331,8 @@ function TelemetryViewerInner<T>(props: TelemetryViewerProps<T>): ReactElement {
             series={props.histogramSeries}
             title={props.histogramTitle}
             bucketIntervalMs={props.histogramBucketIntervalMs}
-            onTimeRangeSelect={histogramZoom.onTimeRangeSelect}
-            onZoomOut={histogramZoom.onZoomOut}
+            onTimeRangeSelect={viewerZoom.onTimeRangeSelect}
+            onZoomOut={viewerZoom.onZoomOut}
             headerActions={props.histogramHeaderActions}
             valueFormatter={props.histogramValueFormatter}
           />
@@ -419,6 +430,26 @@ function TelemetryViewerInner<T>(props: TelemetryViewerProps<T>): ReactElement {
       {props.detailPanel}
     </div>
   );
+
+  /*
+   * Every chart in the viewer zooms the viewer's own window: the histogram,
+   * the analytics charts a host renders as mainContentOverride, and the
+   * picker's "Reset zoom", which is how a keyboard user gets back out. It
+   * also shadows any zoom a page around the viewer offers, since a drag
+   * here is about this explorer's window, 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>
+  );
 }
 
 // Generic functional component wrapper so TypeScript can infer <T>.