@oneuptime/common 11.3.28 → 11.4.1

package/UI/Components/Markdown.tsx/MarkdownViewer.tsx

@@ -70,6 +70,7 @@ SyntaxHighlighter.registerLanguage("http", http);
 import mermaid from "mermaid";
 import DOMPurify from "dompurify";
 import OneUptimeDate from "../../../Types/Date";
+import { Theme, useTheme } from "../../Utils/Theme";
 
 /*
  * ISO 8601 timestamps produced by OneUptimeDate.toString() — the
@@ -80,22 +81,37 @@ import OneUptimeDate from "../../../Types/Date";
 const ISO_8601_REGEX: RegExp =
   /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(?:\.\d{1,6})?Z$/;
 
-// Initialize mermaid
-mermaid.initialize({
-  startOnLoad: false,
-  theme: "default",
-  securityLevel: "strict",
-  fontFamily: "inherit",
-  themeVariables: {
-    background: "#ffffff",
-    primaryColor: "#e0f2fe",
-    primaryTextColor: "#1e293b",
-    primaryBorderColor: "#0ea5e9",
-    lineColor: "#64748b",
-    secondaryColor: "#f1f5f9",
-    tertiaryColor: "#ffffff",
-  },
-});
+const initializeMermaid: (theme: Theme) => void = (theme: Theme): void => {
+  const isDark: boolean = theme === Theme.Dark;
+
+  mermaid.initialize({
+    startOnLoad: false,
+    theme: isDark ? "dark" : "default",
+    securityLevel: "strict",
+    fontFamily: "inherit",
+    themeVariables: isDark
+      ? {
+          background: "#111827",
+          primaryColor: "#1e3a5f",
+          primaryTextColor: "#f8fafc",
+          primaryBorderColor: "#38bdf8",
+          lineColor: "#94a3b8",
+          secondaryColor: "#1e293b",
+          tertiaryColor: "#0f172a",
+        }
+      : {
+          background: "#ffffff",
+          primaryColor: "#e0f2fe",
+          primaryTextColor: "#1e293b",
+          primaryBorderColor: "#0ea5e9",
+          lineColor: "#64748b",
+          secondaryColor: "#f1f5f9",
+          tertiaryColor: "#ffffff",
+        },
+  });
+};
+
+initializeMermaid(Theme.Light);
 
 // Mermaid diagram component
 const MermaidDiagram: FunctionComponent<{ chart: string }> = ({
@@ -105,22 +121,26 @@ const MermaidDiagram: FunctionComponent<{ chart: string }> = ({
 }) => {
   const containerRef: React.RefObject<HTMLDivElement> =
     useRef<HTMLDivElement>(null);
+  const theme: Theme = useTheme();
 
   useEffect(() => {
+    let isCancelled: boolean = false;
+
     const renderDiagram: () => Promise<void> = async (): Promise<void> => {
       if (containerRef.current) {
         containerRef.current.innerHTML = "";
         try {
+          initializeMermaid(theme);
           const id: string = `mermaid-${Math.random().toString(36).substr(2, 9)}`;
           const { svg } = await mermaid.render(id, chart);
-          if (containerRef.current) {
+          if (containerRef.current && !isCancelled) {
             containerRef.current.innerHTML = DOMPurify.sanitize(svg, {
               USE_PROFILES: { svg: true, svgFilters: true },
               ADD_TAGS: ["foreignObject"],
             });
           }
         } catch (error) {
-          if (containerRef.current) {
+          if (containerRef.current && !isCancelled) {
             const errorMessage: string = String(error);
             const errorEl: HTMLPreElement = document.createElement("pre");
             errorEl.className = "text-red-500";
@@ -131,8 +151,12 @@ const MermaidDiagram: FunctionComponent<{ chart: string }> = ({
         }
       }
     };
-    renderDiagram();
-  }, [chart]);
+    void renderDiagram();
+
+    return (): void => {
+      isCancelled = true;
+    };
+  }, [chart, theme]);
 
   return (
     <div

package/UI/Components/Modal/ConfirmModal.tsx

@@ -48,7 +48,7 @@ const ConfirmModal: FunctionComponent<ComponentProps> = (
     >
       <div
         data-testid="confirm-modal-description"
-        className="text-gray-500 mt-5 text-sm whitespace-pre-wrap break-words max-h-96 overflow-y-auto pr-1"
+        className="max-h-96 overflow-y-auto whitespace-pre-wrap break-words pr-1 text-sm leading-6 text-gray-600"
       >
         {translatedDescription}
       </div>

package/UI/Components/Modal/Modal.tsx

@@ -1,4 +1,4 @@
-import Button, { ButtonStyleType } from "../Button/Button";
+import { ButtonStyleType } from "../Button/Button";
 import ButtonType from "../Button/ButtonTypes";
 import Icon, { IconType, SizeProp, ThickProp } from "../Icon/Icon";
 import Loader, { LoaderType } from "../Loader/Loader";
@@ -11,6 +11,7 @@ import React, {
   FunctionComponent,
   ReactElement,
   useEffect,
+  useId,
   useRef,
 } from "react";
 
@@ -56,162 +57,253 @@ const Modal: FunctionComponent<ComponentProps> = (
   const translatedCloseButtonText: string | undefined = translateString(
     props.closeButtonText,
   );
+  const translatedCloseLabel: string = translateString("Close") || "Close";
   const modalRef: React.RefObject<HTMLDivElement> =
     useRef<HTMLDivElement>(null);
+  const previouslyFocusedElementRef: React.MutableRefObject<HTMLElement | null> =
+    useRef<HTMLElement | null>(
+      typeof document !== "undefined" &&
+        document.activeElement instanceof HTMLElement
+        ? document.activeElement
+        : null,
+    );
+  const onCloseRef: React.MutableRefObject<(() => void) | undefined> = useRef<
+    (() => void) | undefined
+  >(props.onClose);
+  const titleId: string = useId();
+  const descriptionId: string = useId();
 
-  // Handle Escape key to close modal
   useEffect(() => {
-    const handleEscapeKey: (event: KeyboardEvent) => void = (
+    onCloseRef.current = props.onClose;
+  }, [props.onClose]);
+
+  useEffect(() => {
+    const modal: HTMLDivElement | null = modalRef.current;
+    if (!modal) {
+      return;
+    }
+
+    const getFocusableElements: () => Array<HTMLElement> =
+      (): Array<HTMLElement> => {
+        return Array.from(
+          modal.querySelectorAll<HTMLElement>(
+            'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
+          ),
+        ).filter((element: HTMLElement) => {
+          return (
+            !element.hasAttribute("disabled") &&
+            element.getAttribute("aria-hidden") !== "true"
+          );
+        });
+      };
+
+    const isTopmostDialog: () => boolean = (): boolean => {
+      const openDialogs: Array<Element> = Array.from(
+        document.querySelectorAll('[role="dialog"][aria-modal="true"]'),
+      );
+
+      return openDialogs[openDialogs.length - 1] === modal;
+    };
+
+    const initialFocusElement: HTMLElement | undefined =
+      getFocusableElements().find((element: HTMLElement) => {
+        return element.getAttribute("data-testid") !== "close-button";
+      });
+
+    if (isTopmostDialog()) {
+      (initialFocusElement || modal).focus();
+    }
+
+    const handleKeyDown: (event: KeyboardEvent) => void = (
       event: KeyboardEvent,
     ): void => {
-      if (event.key === "Escape" && props.onClose) {
-        props.onClose();
+      if (event.defaultPrevented || !isTopmostDialog()) {
+        return;
+      }
+
+      if (event.key === "Escape" && onCloseRef.current) {
+        event.preventDefault();
+        onCloseRef.current();
+        return;
+      }
+
+      if (event.key !== "Tab") {
+        return;
+      }
+
+      const focusableElements: Array<HTMLElement> = getFocusableElements();
+
+      if (focusableElements.length === 0) {
+        event.preventDefault();
+        modal.focus();
+        return;
+      }
+
+      const firstFocusableElement: HTMLElement = focusableElements[0]!;
+      const lastFocusableElement: HTMLElement =
+        focusableElements[focusableElements.length - 1]!;
+      const activeElement: Element | null = document.activeElement;
+
+      if (
+        event.shiftKey &&
+        (activeElement === firstFocusableElement ||
+          !modal.contains(activeElement))
+      ) {
+        event.preventDefault();
+        lastFocusableElement.focus();
+      } else if (
+        !event.shiftKey &&
+        (activeElement === lastFocusableElement ||
+          !modal.contains(activeElement))
+      ) {
+        event.preventDefault();
+        firstFocusableElement.focus();
       }
     };
 
-    document.addEventListener("keydown", handleEscapeKey);
+    document.addEventListener("keydown", handleKeyDown);
+
     return () => {
-      document.removeEventListener("keydown", handleEscapeKey);
-    };
-  }, [props.onClose]);
+      document.removeEventListener("keydown", handleKeyDown);
 
-  // Focus trap and initial focus
-  useEffect(() => {
-    const modal: HTMLDivElement | null = modalRef.current;
-    if (modal) {
-      // Focus the first focusable element in the modal, excluding the close button
-      const focusableElements: NodeListOf<Element> = modal.querySelectorAll(
-        'button:not([data-testid="close-button"]), [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
-      );
-      const firstFocusable: HTMLElement | undefined = focusableElements[0] as
-        | HTMLElement
-        | undefined;
-      if (firstFocusable) {
-        firstFocusable.focus();
+      if (previouslyFocusedElementRef.current?.isConnected) {
+        previouslyFocusedElementRef.current.focus();
       }
-    }
+    };
   }, []);
 
-  let iconBgColor: string = "bg-indigo-100";
+  let iconBgColor: string = "bg-indigo-50";
   let iconColor: string = "text-indigo-600";
+  let iconRingColor: string = "ring-indigo-100";
 
   if (props.iconType === IconType.Info) {
-    iconBgColor = "bg-indigo-100";
+    iconBgColor = "bg-indigo-50";
     iconColor = "text-indigo-600";
+    iconRingColor = "ring-indigo-100";
   } else if (props.iconType === IconType.Warning) {
-    iconBgColor = "bg-yellow-100";
-    iconColor = "text-yellow-600";
+    iconBgColor = "bg-yellow-50";
+    iconColor = "text-yellow-700";
+    iconRingColor = "ring-yellow-100";
   } else if (props.iconType === IconType.Success) {
-    iconBgColor = "bg-green-100";
+    iconBgColor = "bg-green-50";
     iconColor = "text-green-600";
+    iconRingColor = "ring-green-100";
   } else if (props.iconType === IconType.Danger) {
-    iconBgColor = "bg-red-100";
+    iconBgColor = "bg-red-50";
     iconColor = "text-red-600";
+    iconRingColor = "ring-red-100";
+  }
+
+  let modalWidthClassName: string = "sm:max-w-lg md:max-w-lg";
+
+  if (props.modalWidth === ModalWidth.Medium) {
+    modalWidthClassName = "sm:max-w-3xl md:max-w-3xl";
+  } else if (props.modalWidth === ModalWidth.Large) {
+    modalWidthClassName = "sm:max-w-7xl md:max-w-7xl";
   }
 
   return (
-    <div
-      ref={modalRef}
-      className="relative z-20"
-      aria-labelledby="modal-title"
-      aria-describedby={props.description ? "modal-description" : undefined}
-      role="dialog"
-      aria-modal="true"
-    >
-      <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>
+    <div className="relative z-50">
+      <div
+        className="fixed inset-0 bg-gray-950/45 backdrop-blur-[2px]"
+        data-testid="modal-backdrop"
+        aria-hidden="true"
+      />
 
-      <div className="fixed inset-0 z-20 overflow-y-auto">
-        <div className="flex min-h-screen items-end justify-center p-0 text-center md:items-center md:p-4">
+      <div className="fixed inset-0 z-50 overflow-y-auto">
+        <div className="flex min-h-full items-end justify-center p-0 text-center sm:items-center sm:p-6">
           <div
-            className={`relative transform bg-white text-left shadow-xl transition-all w-full h-full md:rounded-lg md:my-8 ${
-              props.modalWidth && props.modalWidth === ModalWidth.Large
-                ? "md:max-w-7xl"
-                : ""
-            } ${
-              props.modalWidth && props.modalWidth === ModalWidth.Medium
-                ? "md:max-w-3xl"
-                : ""
-            } ${!props.modalWidth ? "md:max-w-lg" : ""} `}
+            ref={modalRef}
+            className={`relative flex max-h-[calc(100vh-1rem)] w-full flex-col rounded-t-2xl border border-gray-200/80 bg-white text-left shadow-2xl ring-1 ring-black/5 sm:my-8 sm:max-h-[calc(100vh-3rem)] sm:rounded-xl ${modalWidthClassName}`}
             data-testid="modal"
+            aria-labelledby={titleId}
+            aria-describedby={translatedDescription ? descriptionId : undefined}
+            role="dialog"
+            aria-modal="true"
+            tabIndex={-1}
           >
-            {props.onClose && (
-              <div className="absolute top-0 right-0 z-10 pt-4 pr-4 md:hidden lg:block">
-                <Button
-                  buttonStyle={ButtonStyleType.ICON}
-                  icon={IconProp.Close}
-                  iconSize={SizeProp.Large}
-                  title="Close"
-                  dataTestId="close-button"
-                  onClick={props.onClose}
-                />
+            <div className="relative flex shrink-0 flex-col gap-4 rounded-t-2xl border-b border-gray-100 bg-white px-5 py-4 sm:flex-row sm:items-start sm:justify-between sm:gap-6 sm:rounded-t-xl sm:px-6">
+              <div
+                className={`flex min-w-0 flex-1 items-start gap-3 ${
+                  props.onClose ? "pr-9 sm:pr-0" : ""
+                }`}
+              >
+                {props.icon && (
+                  <div
+                    className={`flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-lg ${iconBgColor} ring-1 ring-inset ${iconRingColor}`}
+                    data-testid="icon"
+                  >
+                    <Icon
+                      thick={ThickProp.Thick}
+                      type={
+                        props.iconType === undefined
+                          ? IconType.Info
+                          : props.iconType
+                      }
+                      className={`${iconColor} h-5 w-5`}
+                      icon={props.icon}
+                      size={SizeProp.Five}
+                    />
+                  </div>
+                )}
+                <div className="min-w-0 flex-1">
+                  <h3
+                    data-testid="modal-title"
+                    className="text-base font-semibold leading-6 tracking-tight text-gray-900"
+                    id={titleId}
+                  >
+                    {translatedTitle}
+                  </h3>
+                  {translatedDescription && (
+                    <p
+                      id={descriptionId}
+                      data-testid="modal-description"
+                      className="mt-0.5 text-sm leading-5 text-gray-500"
+                    >
+                      {translatedDescription}
+                    </p>
+                  )}
+                </div>
               </div>
-            )}
-            <div className="p-4 md:p-6">
-              {props.icon && (
+              {props.rightElement && (
                 <div
-                  className={`mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full ${iconBgColor} md:mx-0 md:h-10 md:w-10`}
-                  data-testid="icon"
+                  data-testid="right-element"
+                  className={`flex-shrink-0 ${props.onClose ? "pr-9" : ""}`}
                 >
-                  <Icon
-                    thick={ThickProp.Thick}
-                    type={
-                      props.iconType === undefined
-                        ? IconType.Info
-                        : props.iconType
-                    }
-                    className={`${iconColor} h-6 w-6 stroke-2`}
-                    icon={props.icon}
-                    size={SizeProp.Large}
-                  />
+                  {props.rightElement}
                 </div>
               )}
-              <div className="text-left md:mt-0 md:ml-4 md:mr-4">
-                <div className="flex flex-col md:flex-row md:justify-between">
-                  <div className="flex-1">
-                    <h3
-                      data-testid="modal-title"
-                      className={`text-lg font-medium leading-6 text-gray-900 ${
-                        props.icon ? "mt-4 md:ml-10 md:-mt-8 md:mb-5" : ""
-                      }`}
-                      id="modal-title"
-                    >
-                      {translatedTitle}
-                    </h3>
-                    {translatedDescription && (
-                      <p
-                        id="modal-description"
-                        data-testid="modal-description"
-                        className="text-sm leading-6 text-gray-500 mt-2"
-                      >
-                        {translatedDescription}
-                      </p>
-                    )}
+              {props.onClose && (
+                <button
+                  type="button"
+                  title={translatedCloseLabel}
+                  aria-label={translatedCloseLabel}
+                  data-testid="close-button"
+                  onClick={props.onClose}
+                  className="absolute right-4 top-4 inline-flex h-8 w-8 items-center justify-center rounded-md text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2"
+                >
+                  <Icon icon={IconProp.Close} className="h-4 w-4" />
+                </button>
+              )}
+            </div>
+
+            <div
+              className="min-h-0 flex-1 overflow-y-auto overscroll-contain px-5 py-5 sm:px-6"
+              data-testid="modal-content"
+            >
+              <ModalBody error={props.error}>
+                {!props.isBodyLoading ? (
+                  props.children
+                ) : (
+                  <div className="modal-body flex justify-center py-16">
+                    <Loader
+                      loaderType={LoaderType.Bar}
+                      color={VeryLightGray}
+                      size={200}
+                    />
                   </div>
-                  {props.rightElement && (
-                    <div
-                      data-testid="right-element"
-                      className="mt-4 md:mt-0 lg:mr-4"
-                    >
-                      {props.rightElement}
-                    </div>
-                  )}
-                </div>
-                <div className="mt-2">
-                  <ModalBody error={props.error}>
-                    {!props.isBodyLoading ? (
-                      props.children
-                    ) : (
-                      <div className="modal-body mt-20 mb-20 flex justify-center">
-                        <Loader
-                          loaderType={LoaderType.Bar}
-                          color={VeryLightGray}
-                          size={200}
-                        />
-                      </div>
-                    )}
-                  </ModalBody>
-                </div>
-              </div>
+                )}
+              </ModalBody>
             </div>
             <ModalFooter
               submitButtonType={

package/UI/Components/Modal/ModalFooter.tsx

@@ -18,14 +18,42 @@ export interface ComponentProps {
 const ModalFooter: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
+  if (!props.onClose && !props.onSubmit && !props.leftFooterElement) {
+    return <></>;
+  }
+
   return (
-    <div className="bg-gray-50 px-4 py-3 flex flex-row gap-3 md:px-6 md:justify-between">
+    <div
+      className="flex shrink-0 flex-col gap-3 rounded-b-2xl border-t border-gray-100 bg-gray-50/70 px-5 py-3 sm:flex-row sm:items-center sm:justify-between sm:rounded-b-xl sm:px-6"
+      data-testid="modal-footer"
+    >
       {props.leftFooterElement ? (
-        <div className="flex flex-row gap-3">{props.leftFooterElement}</div>
+        <div className="flex w-full flex-col gap-2 sm:w-auto sm:flex-row sm:flex-wrap sm:items-center [&>div]:w-full [&>div]:flex-col [&_button]:!w-full sm:[&>div]:w-auto sm:[&>div]:flex-row sm:[&_button]:!ml-0 sm:[&_button]:!w-auto">
+          {props.leftFooterElement}
+        </div>
       ) : (
-        <div />
+        <div className="hidden sm:block" />
       )}
-      <div className="flex flex-row gap-3 md:flex-row-reverse">
+      <div className="flex w-full flex-col gap-2 sm:w-auto sm:flex-row sm:items-center">
+        {props.onClose ? (
+          <Button
+            buttonStyle={
+              props.closeButtonStyleType
+                ? props.closeButtonStyleType
+                : ButtonStyleType.NORMAL
+            }
+            title={props.closeButtonText ? props.closeButtonText : "Cancel"}
+            data-dismiss="modal"
+            onClick={() => {
+              props.onClose?.();
+            }}
+            dataTestId="modal-footer-close-button"
+            className="sm:!w-auto md:!ml-0"
+          />
+        ) : (
+          <></>
+        )}
+
         {props.onSubmit ? (
           <Button
             buttonStyle={
@@ -47,24 +75,7 @@ const ModalFooter: FunctionComponent<ComponentProps> = (
                 : ButtonType.Button
             }
             dataTestId="modal-footer-submit-button"
-          />
-        ) : (
-          <></>
-        )}
-
-        {props.onClose ? (
-          <Button
-            buttonStyle={
-              props.closeButtonStyleType
-                ? props.closeButtonStyleType
-                : ButtonStyleType.NORMAL
-            }
-            title={props.closeButtonText ? props.closeButtonText : "Cancel"}
-            data-dismiss="modal"
-            onClick={() => {
-              props.onClose?.();
-            }}
-            dataTestId="modal-footer-close-button"
+            className="sm:!w-auto md:!ml-0"
           />
         ) : (
           <></>

package/UI/Components/ModelTable/TableView.tsx

@@ -226,7 +226,7 @@ const TableViewElement: <T extends DatabaseBaseModel | AnalyticsBaseModel>(
   const getMenuContents: GetReactElementArrayFunction =
     (): Array<ReactElement> => {
       if (isLoading) {
-        return [<BarLoader key={-1} />];
+        return [<BarLoader key={-1} color="var(--ou-link, #4f46e5)" />];
       }
 
       const elements: Array<ReactElement> = [];