npm - @oneuptime/common - Versions diffs - 12.0.5 → 12.0.7 - Mend

@oneuptime/common 12.0.5 → 12.0.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (901) hide show

package/UI/Components/SideOver/SideOver.tsx CHANGED Viewed

@@ -1,7 +1,16 @@
 import Button, { ButtonStyleType } from "../Button/Button";
 import Icon from "../Icon/Icon";
 import IconProp from "../../../Types/Icon/IconProp";
-import React, { FunctionComponent, ReactElement } from "react";
+import { lockPageScroll, unlockPageScroll } from "../../Utils/PageScrollLock";
+import React, {
+  FunctionComponent,
+  ReactElement,
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useState,
+} from "react";
+import { createPortal } from "react-dom";
 export enum SideOverSize {
   Small = "Small",
@@ -19,8 +28,42 @@ export interface ComponentProps {
   submitButtonText?: string | undefined;
   leftFooterElement?: ReactElement | undefined;
   size?: SideOverSize | undefined;
+  /*
+   * Opt out of hiding the page's scrollbar while the panel is open. Only worth
+   * setting for a panel that is a permanent part of its page rather than a
+   * transient drawer — every current caller wants the lock.
+   */
+  disablePageScrollLock?: boolean | undefined;
 }
+type PortalTargetFunction = () => HTMLElement | null;
+/*
+ * Where the panel is appended in the DOM, not where it appears on screen — it
+ * is `position: fixed` either way.
+ *
+ * Two reasons it cannot simply stay where the caller rendered it. First, any
+ * ancestor with a z-index traps the panel in that ancestor's stacking context,
+ * which is how a map's zoom toolbar (z-20) ended up painting on top of an open
+ * device panel. Second, and unfixable by z-index at all: only the fullscreen
+ * element's own subtree reaches the browser's top layer, so a panel appended to
+ * <body> while a chart or map is fullscreen is not painted anywhere. Following
+ * document.fullscreenElement keeps the panel visible in both modes.
+ */
+const getPortalTarget: PortalTargetFunction = (): HTMLElement | null => {
+  if (typeof document === "undefined") {
+    return null;
+  }
+  const fullscreenElement: Element | null = document.fullscreenElement;
+  if (fullscreenElement instanceof HTMLElement) {
+    return fullscreenElement;
+  }
+  return document.body;
+};
 const SideOver: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
@@ -34,85 +77,169 @@ const SideOver: FunctionComponent<ComponentProps> = (
     widthClass = "max-w-7xl";
   }
-  return (
+  const titleId: string = useId();
+  const descriptionId: string = useId();
+  const [portalTarget, setPortalTarget] = useState<HTMLElement | null>(
+    getPortalTarget,
+  );
+  useEffect(() => {
+    const syncPortalTarget: () => void = (): void => {
+      setPortalTarget(getPortalTarget());
+    };
+    /*
+     * Re-read once on mount as well: the first render happens before the
+     * browser has necessarily settled document.fullscreenElement.
+     */
+    syncPortalTarget();
+    document.addEventListener("fullscreenchange", syncPortalTarget);
+    return () => {
+      document.removeEventListener("fullscreenchange", syncPortalTarget);
+    };
+  }, []);
+  /*
+   * A layout effect, not an ordinary one. Hiding the page scrollbar widens the
+   * viewport that `right: 0` resolves against, so a panel that painted before
+   * the lock landed would visibly jump sideways by the scrollbar's width on
+   * every platform that draws a classic scrollbar. Locking before paint means
+   * the panel is only ever drawn in its final position.
+   */
+  useLayoutEffect(() => {
+    if (props.disablePageScrollLock) {
+      return undefined;
+    }
+    lockPageScroll();
+    return () => {
+      unlockPageScroll();
+    };
+  }, [props.disablePageScrollLock]);
+  const sideOver: ReactElement = (
+    /*
+     * z-30 clears every tier of page chrome (sticky headers and table headers
+     * at z-10/z-20, map and log-viewer toolbars at z-20) while staying under
+     * the app-wide overlays that must remain visible over a panel: Toast and
+     * the AI chat panel at z-40, Modal at z-50, portalled dropdown menus at
+     * z-60. Deliberately NOT z-40 — Toast and AIChatPanel are mounted ahead of
+     * the routed page in App.tsx, so an equal z-index would be broken in this
+     * panel's favour by document order and toasts would disappear behind it.
+     *
+     * role="dialog" without aria-modal, because the panel genuinely is not
+     * modal: everything outside it stays clickable by design (both topology
+     * maps let you click straight from one node's panel to the next). Claiming
+     * aria-modal also made this panel the last entry in Modal's dialog stack,
+     * which silently disabled Escape, backdrop-dismissal and initial focus on
+     * any Modal that was already open.
+     */
     <div
-      className="relative z-10"
-      aria-labelledby="slide-over-title"
+      className="relative z-30"
+      aria-labelledby={titleId}
+      aria-describedby={props.description ? descriptionId : undefined}
       role="dialog"
-      aria-modal="true"
+      data-testid="side-over"
     >
-      <div className="inset-0"></div>
-      <div className="inset-0 overflow-hidden">
-        <div className="inset-0 overflow-hidden">
-          <div className="pointer-events-none fixed inset-y-0 right-0 flex max-w-full">
-            <div className={`pointer-events-auto w-screen ${widthClass}`}>
-              <div className="flex h-full flex-col bg-white shadow-xl">
-                <div className="flex-shrink-0 flex flex-col bg-gray-50 px-4 py-6 sm:px-6">
-                  <div className="flex items-start justify-between space-x-3">
-                    <div className="space-y-1">
-                      <h2
-                        className="text-lg font-medium text-gray-900"
-                        id="slide-over-title"
-                      >
-                        {props.title}
-                      </h2>
-                      <p className="text-sm text-gray-500">
-                        {props.description}
-                      </p>
-                    </div>
-                    <div className="flex h-7 items-center">
-                      <button
-                        onClick={() => {
-                          props.onClose();
-                        }}
-                        type="button"
-                        className="text-gray-400 hover:text-gray-500"
-                      >
-                        <span className="sr-only">Close panel</span>
-                        <Icon className="h-6 w-6" icon={IconProp.Close} />
-                      </button>
-                    </div>
-                  </div>
-                </div>
-                <div className="h-full overflow-y-scroll">
-                  <div className="space-y-6 py-6 sm:space-y-0 sm:divide-y sm:divide-gray-200 sm:py-0 p-5">
-                    {props.children}
-                  </div>
+      <div
+        className="pointer-events-none fixed inset-0 flex justify-end"
+        data-testid="side-over-layer"
+      >
+        <div className={`pointer-events-auto w-full ${widthClass}`}>
+          <div className="flex h-full flex-col bg-white shadow-xl">
+            <div className="flex-shrink-0 flex flex-col bg-gray-50 px-4 py-6 sm:px-6">
+              <div className="flex items-start justify-between space-x-3">
+                <div className="space-y-1">
+                  <h2
+                    className="text-lg font-medium text-gray-900"
+                    id={titleId}
+                    data-testid="side-over-title"
+                  >
+                    {props.title}
+                  </h2>
+                  <p
+                    className="text-sm text-gray-500"
+                    id={descriptionId}
+                    data-testid="side-over-description"
+                  >
+                    {props.description}
+                  </p>
                 </div>
-                <div className="flex-shrink-0 border-t border-gray-200 px-4 py-5 sm:px-6 flex justify-between">
-                  <div className="flex justify-start space-x-3">
-                    {props.leftFooterElement}
-                  </div>
-                  <div className="flex justify-end space-x-3">
-                    <Button
-                      title="Close"
-                      onClick={() => {
-                        props.onClose();
-                      }}
-                      buttonStyle={ButtonStyleType.NORMAL}
-                    />
-                    {props.onSubmit && (
-                      <Button
-                        title={props.submitButtonText || "Save"}
-                        disabled={props.submitButtonDisabled}
-                        onClick={() => {
-                          props.onSubmit!();
-                        }}
-                        buttonStyle={ButtonStyleType.PRIMARY}
-                      />
-                    )}
-                  </div>
+                <div className="flex h-7 items-center">
+                  <button
+                    onClick={() => {
+                      props.onClose();
+                    }}
+                    type="button"
+                    title="Close panel"
+                    data-testid="close-button"
+                    className="text-gray-400 hover:text-gray-500"
+                  >
+                    <span className="sr-only">Close panel</span>
+                    <Icon className="h-6 w-6" icon={IconProp.Close} />
+                  </button>
                 </div>
               </div>
             </div>
+            {/*
+             * overflow-y-auto, not overflow-y-scroll: `scroll` paints a dead
+             * track down the panel's right edge even when the content fits,
+             * immediately beside the page's own scrollbar, which reads as the
+             * page scrollbar bleeding through the panel. overscroll-contain
+             * stops a wheel past the end of the panel from scrolling the page
+             * out from under it.
+             */}
+            <div
+              className="min-h-0 flex-1 overflow-y-auto overscroll-contain"
+              data-testid="side-over-content"
+            >
+              <div className="space-y-6 py-6 sm:space-y-0 sm:divide-y sm:divide-gray-200 sm:py-0 p-5">
+                {props.children}
+              </div>
+            </div>
+            <div
+              className="flex-shrink-0 border-t border-gray-200 px-4 py-5 sm:px-6 flex justify-between"
+              data-testid="side-over-footer"
+            >
+              <div className="flex justify-start space-x-3">
+                {props.leftFooterElement}
+              </div>
+              <div className="flex justify-end space-x-3">
+                <Button
+                  title="Close"
+                  onClick={() => {
+                    props.onClose();
+                  }}
+                  buttonStyle={ButtonStyleType.NORMAL}
+                />
+                {props.onSubmit && (
+                  <Button
+                    title={props.submitButtonText || "Save"}
+                    disabled={props.submitButtonDisabled}
+                    onClick={() => {
+                      props.onSubmit!();
+                    }}
+                    buttonStyle={ButtonStyleType.PRIMARY}
+                  />
+                )}
+              </div>
+            </div>
           </div>
         </div>
       </div>
     </div>
   );
+  if (!portalTarget) {
+    return sideOver;
+  }
+  return createPortal(sideOver, portalTarget);
 };
 export default SideOver;

package/UI/Components/StatusPage/ResourceGrid.tsx ADDED Viewed

@@ -0,0 +1,314 @@
+import StatusPageResource from "../../../Models/DatabaseModels/StatusPageResource";
+import IconProp from "../../../Types/Icon/IconProp";
+import StatusPageResourceExplorerUtil, {
+  StatusPageResourceGridModel,
+} from "../../../Utils/StatusPage/ResourceExplorer";
+import Button, { ButtonSize, ButtonStyleType } from "../Button/Button";
+import Icon, { ThickProp } from "../Icon/Icon";
+import React, { FunctionComponent, ReactElement, useMemo } from "react";
+export interface ComponentProps {
+  rowLabel: string;
+  columnLabel: string;
+  rowValues: Array<string>;
+  columnValues: Array<string>;
+  statusPageResources: Array<StatusPageResource>;
+  /* See ResourceList: the monitor element lives in the dashboard. */
+  getResourceElement: (statusPageResource: StatusPageResource) => ReactElement;
+  isCreateable: boolean;
+  isEditable: boolean;
+  isDeleteable: boolean;
+  onAddToCell: (rowValue: string | null, columnValue: string | null) => void;
+  onEdit: (statusPageResource: StatusPageResource) => void;
+  onDelete: (statusPageResource: StatusPageResource) => void;
+}
+/*
+ * 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
+ * value, and every cell a place to put monitors.
+ *
+ * Nothing here is chrome of its own. The group's name, its counts, its create
+ * buttons and its search all live in the pane header above, exactly as they do
+ * for a list group - the two are the same thing arranged differently, and an
+ * operator switching a group's view mode should not find the screen around it
+ * has changed too.
+ */
+const ResourceGrid: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  const gridModel: StatusPageResourceGridModel =
+    useMemo((): StatusPageResourceGridModel => {
+      return StatusPageResourceExplorerUtil.buildGridModel({
+        statusPageResources: props.statusPageResources,
+        rowValues: props.rowValues,
+        columnValues: props.columnValues,
+      });
+    }, [props.statusPageResources, props.rowValues, props.columnValues]);
+  type RenderResourceChipFunction = (
+    statusPageResource: StatusPageResource,
+  ) => ReactElement;
+  const renderResourceChip: RenderResourceChipFunction = (
+    statusPageResource: StatusPageResource,
+  ): ReactElement => {
+    const name: string =
+      StatusPageResourceExplorerUtil.getResourceName(statusPageResource);
+    return (
+      <div
+        key={statusPageResource._id?.toString()}
+        className="group flex items-center justify-between gap-2 rounded-lg border border-gray-200 bg-white px-2 py-1.5 text-xs shadow-sm transition-shadow hover:shadow"
+        data-testid="status-page-resource-grid-cell-item"
+      >
+        <div className="min-w-0 flex-1">
+          <div className="truncate font-medium text-gray-900">
+            {props.getResourceElement(statusPageResource)}
+          </div>
+          {statusPageResource.displayName &&
+          statusPageResource.displayName !== name ? (
+            <div className="truncate text-[11px] text-gray-500">
+              {statusPageResource.displayName}
+            </div>
+          ) : (
+            <></>
+          )}
+        </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>
+      </div>
+    );
+  };
+  type RenderCellFunction = (
+    rowValue: string,
+    columnValue: string,
+  ) => ReactElement;
+  const renderCell: RenderCellFunction = (
+    rowValue: string,
+    columnValue: string,
+  ): ReactElement => {
+    const cell: Array<StatusPageResource> =
+      gridModel.resourcesByCellKey.get(
+        StatusPageResourceExplorerUtil.getGridCellKey(rowValue, columnValue),
+      ) || [];
+    return (
+      <div className="flex min-h-[3.25rem] flex-col gap-1.5">
+        {cell.map((statusPageResource: StatusPageResource) => {
+          return renderResourceChip(statusPageResource);
+        })}
+        {props.isCreateable ? (
+          <button
+            type="button"
+            aria-label={`Add a monitor to ${rowValue} and ${columnValue}`}
+            data-testid="status-page-resource-grid-cell-add"
+            onClick={() => {
+              props.onAddToCell(rowValue, columnValue);
+            }}
+            className="flex items-center justify-center gap-1 rounded-lg border border-dashed border-gray-300 py-1.5 text-xs text-gray-500 transition-colors hover:border-indigo-400 hover:bg-indigo-50 hover:text-indigo-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-300"
+          >
+            <Icon
+              icon={IconProp.Add}
+              className="h-3.5 w-3.5"
+              thick={ThickProp.Thick}
+            />
+            <span>{cell.length > 0 ? "Add" : "Add monitor"}</span>
+          </button>
+        ) : (
+          <></>
+        )}
+      </div>
+    );
+  };
+  /*
+   * A grid with no axes has no cells to draw, and nothing useful to say that
+   * the caller has not already said: the pane that mounts this owns the "this
+   * group has no rows or columns yet" notice, because it is the thing that can
+   * offer the button which fixes it. Two boxes explaining the same emptiness is
+   * worse than one.
+   */
+  if (props.rowValues.length === 0 || props.columnValues.length === 0) {
+    return <span data-testid="status-page-resource-grid-no-axes" />;
+  }
+  return (
+    <div data-testid="status-page-resource-grid">
+      <div className="overflow-x-auto">
+        <table className="min-w-full border-separate border-spacing-0">
+          <thead>
+            <tr>
+              <th className="sticky left-0 z-10 rounded-tl-lg border-b border-r border-gray-200 bg-gray-50 px-3 py-2 text-left text-[11px] font-semibold uppercase tracking-wide text-gray-500">
+                {props.rowLabel}
+              </th>
+              {props.columnValues.map((columnValue: string) => {
+                return (
+                  <th
+                    key={columnValue}
+                    className="min-w-[13rem] border-b border-gray-200 bg-gray-50 px-3 py-2 text-left text-[11px] font-semibold uppercase tracking-wide text-gray-500"
+                  >
+                    {columnValue}
+                  </th>
+                );
+              })}
+            </tr>
+          </thead>
+          <tbody>
+            {props.rowValues.map((rowValue: string) => {
+              return (
+                <tr key={rowValue}>
+                  <th className="sticky left-0 z-10 border-b border-r border-gray-200 bg-white px-3 py-3 text-left align-top text-xs font-semibold text-gray-800">
+                    {rowValue}
+                  </th>
+                  {props.columnValues.map((columnValue: string) => {
+                    return (
+                      <td
+                        key={columnValue}
+                        className="border-b border-gray-200 px-2 py-2 align-top"
+                      >
+                        {renderCell(rowValue, columnValue)}
+                      </td>
+                    );
+                  })}
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+      {gridModel.orphanResources.length > 0 ? (
+        <div
+          className="mt-4 rounded-lg border border-amber-200 bg-amber-50 p-3"
+          data-testid="status-page-resource-grid-orphans"
+        >
+          <div className="text-xs font-semibold text-amber-800">
+            {gridModel.orphanResources.length.toLocaleString()} resource
+            {gridModel.orphanResources.length === 1 ? "" : "s"} are not on the
+            grid
+          </div>
+          <p className="mt-0.5 text-xs text-amber-700">
+            Their {props.rowLabel.toLowerCase()} or{" "}
+            {props.columnLabel.toLowerCase()} is not one this group defines, so
+            visitors never see them. Edit each one to put it in a cell.
+          </p>
+          <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()}
+                    className="flex items-center justify-between gap-2 rounded-lg border border-amber-200 bg-white px-3 py-2 text-xs"
+                    data-testid="status-page-resource-grid-orphan"
+                  >
+                    <div className="min-w-0 flex-1">
+                      <div className="truncate font-medium text-gray-900">
+                        {props.getResourceElement(statusPageResource)}
+                      </div>
+                      <div className="truncate text-gray-500">
+                        {props.rowLabel}:{" "}
+                        {statusPageResource.rowAxisValue || "—"} ·{" "}
+                        {props.columnLabel}:{" "}
+                        {statusPageResource.columnAxisValue || "—"}
+                      </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>
+                  </div>
+                );
+              },
+            )}
+          </div>
+        </div>
+      ) : (
+        <></>
+      )}
+    </div>
+  );
+};
+export default ResourceGrid;