@oneuptime/common 9.4.7 → 9.4.8

package/UI/Components/ColorViewer/ColorViewer.tsx

@@ -13,12 +13,29 @@ export interface ComponentProps {
 const ColorInput: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
+  const hasOnClick: boolean = Boolean(props.onClick);
+  const colorLabel: string =
+    props.value?.toString() || props.placeholder || "No Color Selected";
+
+  const handleKeyDown: (event: React.KeyboardEvent) => void = (
+    event: React.KeyboardEvent,
+  ): void => {
+    if (hasOnClick && (event.key === "Enter" || event.key === " ")) {
+      event.preventDefault();
+      props.onClick?.();
+    }
+  };
+
   return (
     <div
       className={`flex ${props.className}`}
       onClick={() => {
         props.onClick?.();
       }}
+      onKeyDown={handleKeyDown}
+      role={hasOnClick ? "button" : undefined}
+      tabIndex={hasOnClick ? 0 : undefined}
+      aria-label={hasOnClick ? `Color picker: ${colorLabel}` : undefined}
       data-testid={props.dataTestId}
     >
       {props.value && (
@@ -34,11 +51,10 @@ const ColorInput: FunctionComponent<ComponentProps> = (
             marginRight: "7px",
             borderStyle: "solid",
           }}
+          aria-hidden="true"
         ></div>
       )}
-      <div>
-        {props.value?.toString() || props.placeholder || "No Color Selected"}
-      </div>
+      <div>{colorLabel}</div>
     </div>
   );
 };

package/UI/Components/CopyableButton/CopyableButton.tsx

@@ -19,16 +19,33 @@ const CopyableButton: FunctionComponent<ComponentProps> = (
     }, 2000);
   };
 
+  const handleCopy: () => Promise<void> = async (): Promise<void> => {
+    refreshCopyToClipboardState();
+    await navigator.clipboard?.writeText(props.textToBeCopied);
+  };
+
+  const handleKeyDown: (event: React.KeyboardEvent) => Promise<void> = async (
+    event: React.KeyboardEvent,
+  ): Promise<void> => {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      await handleCopy();
+    }
+  };
+
   return (
     <div
       className={`${
         copiedToClipboard ? "" : "cursor-pointer mt-0.5"
       } flex ml-1 text-gray-500`}
-      onClick={async () => {
-        refreshCopyToClipboardState();
-        await navigator.clipboard?.writeText(props.textToBeCopied);
-      }}
-      role="copy-to-clipboard"
+      onClick={handleCopy}
+      onKeyDown={handleKeyDown}
+      role="button"
+      tabIndex={0}
+      aria-label={
+        copiedToClipboard ? "Copied to clipboard" : "Copy to clipboard"
+      }
+      aria-live="polite"
     >
       {" "}
       {copiedToClipboard ? (

package/UI/Components/Detail/Detail.tsx

@@ -395,7 +395,7 @@ const Detail: DetailFunction = <T extends GenericObject>(
                 style={{
                   height: "100px",
                 }}
-                alt=""
+                alt={field.title ? `${field.title} image` : "Uploaded image"}
               />
             </div>
           </div>

package/UI/Components/Dropdown/Dropdown.tsx

@@ -2,6 +2,7 @@ import ObjectID from "../../../Types/ObjectID";
 import React, {
   FunctionComponent,
   ReactElement,
+  useId,
   useLayoutEffect,
   useRef,
   useState,
@@ -51,11 +52,15 @@ export interface ComponentProps {
   error?: string | undefined;
   id?: string | undefined;
   dataTestId?: string | undefined;
+  ariaLabel?: string | undefined;
 }
 
 const Dropdown: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
+  const uniqueId: string = useId();
+  const errorId: string = `dropdown-error-${uniqueId}`;
+
   type GetDropdownOptionFromValueFunctionProps =
     | undefined
     | DropdownValue
@@ -497,6 +502,9 @@ const Dropdown: FunctionComponent<ComponentProps> = (
         onFocus={() => {
           props.onFocus?.();
         }}
+        aria-label={props.ariaLabel}
+        aria-invalid={props.error ? true : undefined}
+        aria-describedby={props.error ? errorId : undefined}
         classNames={{
           control: (
             state: ControlProps<DropdownOption, boolean, GroupBase<any>>,
@@ -699,7 +707,12 @@ const Dropdown: FunctionComponent<ComponentProps> = (
         }}
       />
       {props.error && (
-        <p data-testid="error-message" className="mt-1 text-sm text-red-400">
+        <p
+          id={errorId}
+          data-testid="error-message"
+          className="mt-1 text-sm text-red-400"
+          role="alert"
+        >
           {props.error}
         </p>
       )}

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

@@ -105,6 +105,29 @@ const FormField: <T extends GenericObject>(
     }
   };
 
+  type GetAutoCompleteFunction = (
+    fieldType: FormFieldSchemaType,
+  ) => string | undefined;
+
+  const getAutoComplete: GetAutoCompleteFunction = (
+    fieldType: FormFieldSchemaType,
+  ): string | undefined => {
+    switch (fieldType) {
+      case FormFieldSchemaType.Email:
+        return "email";
+      case FormFieldSchemaType.Password:
+        return "current-password";
+      case FormFieldSchemaType.Phone:
+        return "tel";
+      case FormFieldSchemaType.Name:
+        return "name";
+      case FormFieldSchemaType.URL:
+        return "url";
+      default:
+        return undefined;
+    }
+  };
+
   const getFormField: GetReactElementFunction = (): ReactElement => {
     const [
       showMultiSelectCheckboxCategoryModal,
@@ -737,6 +760,11 @@ const FormField: <T extends GenericObject>(
               error={props.touched && props.error ? props.error : undefined}
               dataTestId={props.field.dataTestId}
               type={fieldType as InputType}
+              autoComplete={
+                props.field.fieldType
+                  ? getAutoComplete(props.field.fieldType)
+                  : undefined
+              }
               onChange={(value: string) => {
                 onChange(value);
                 props.setFieldValue(props.fieldName, value);

package/UI/Components/FullPageModal/FullPageModal.tsx

@@ -10,13 +10,44 @@ export interface ComponentProps {
 const FullPageModal: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
+  const handleClose: () => void = (): void => {
+    props.onClose?.();
+  };
+
+  const handleKeyDown: (event: React.KeyboardEvent) => void = (
+    event: React.KeyboardEvent,
+  ): void => {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      handleClose();
+    }
+  };
+
+  // Handle Escape key at the modal level
+  React.useEffect(() => {
+    const handleEscapeKey: (event: KeyboardEvent) => void = (
+      event: KeyboardEvent,
+    ): void => {
+      if (event.key === "Escape") {
+        handleClose();
+      }
+    };
+
+    document.addEventListener("keydown", handleEscapeKey);
+    return () => {
+      document.removeEventListener("keydown", handleEscapeKey);
+    };
+  }, []);
+
   return (
-    <div className="full-page-modal">
+    <div className="full-page-modal" role="dialog" aria-modal="true">
       <div
         className="margin-50 align-right"
-        onClick={() => {
-          props.onClose?.();
-        }}
+        onClick={handleClose}
+        onKeyDown={handleKeyDown}
+        role="button"
+        tabIndex={0}
+        aria-label="Close modal"
       >
         <Icon
           icon={IconProp.Close}

package/UI/Components/Input/Input.tsx

@@ -40,6 +40,7 @@ export interface ComponentProps {
   autoFocus?: boolean | undefined;
   disableSpellCheck?: boolean | undefined;
   showSecondsForDateTime?: boolean | undefined;
+  autoComplete?: string | undefined;
 }
 
 const Input: FunctionComponent<ComponentProps> = (
@@ -156,6 +157,9 @@ const Input: FunctionComponent<ComponentProps> = (
           onClick={props.onClick}
           data-testid={props.dataTestId}
           spellCheck={!props.disableSpellCheck}
+          autoComplete={props.autoComplete}
+          aria-invalid={props.error ? "true" : undefined}
+          aria-describedby={props.error ? "input-error-message" : undefined}
           onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
             const value: string | Date = e.target.value;
 
@@ -205,14 +209,22 @@ const Input: FunctionComponent<ComponentProps> = (
         />
 
         {props.error && (
-          <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+          <div
+            className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3"
+            aria-hidden="true"
+          >
             <Icon icon={IconProp.ErrorSolid} className="h-5 w-5 text-red-500" />
           </div>
         )}
       </div>
 
       {props.error && (
-        <p data-testid="error-message" className="mt-1 text-sm text-red-400">
+        <p
+          id="input-error-message"
+          data-testid="error-message"
+          className="mt-1 text-sm text-red-400"
+          role="alert"
+        >
           {props.error}
         </p>
       )}

package/UI/Components/Link/Link.tsx

@@ -53,6 +53,7 @@ const Link: FunctionComponent<ComponentProps> = (
       onMouseLeave={props.onMouseLeave}
       style={props.style}
       title={props.title}
+      aria-label={props.title}
       onAuxClick={(event: React.MouseEvent<HTMLAnchorElement>) => {
         // middle click
         if (event.button === 1) {

package/UI/Components/Loader/Loader.tsx

@@ -25,11 +25,14 @@ const Loader: FunctionComponent<ComponentProps> = ({
   if (loaderType === LoaderType.Bar) {
     return (
       <div
-        role="presentation"
+        role="status"
+        aria-label="Loading"
+        aria-live="polite"
         className={`flex justify-center mt-1 ${className}`.trim()}
         data-testid="bar-loader"
       >
         <BarLoader height={4} width={size} color={color.toString()} />
+        <span className="sr-only">Loading...</span>
       </div>
     );
   }
@@ -37,11 +40,14 @@ const Loader: FunctionComponent<ComponentProps> = ({
   if (loaderType === LoaderType.Beats) {
     return (
       <div
-        role="presentation"
+        role="status"
+        aria-label="Loading"
+        aria-live="polite"
         className={`justify-center mt-1 ${className}`.trim()}
         data-testid="beat-loader"
       >
         <BeatLoader size={size} color={color.toString()} />
+        <span className="sr-only">Loading...</span>
       </div>
     );
   }

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

@@ -1,10 +1,70 @@
-import React, { FunctionComponent, ReactElement } from "react";
+import React, {
+  FunctionComponent,
+  ReactElement,
+  useEffect,
+  useRef,
+} from "react";
 // https://github.com/remarkjs/react-markdown
 import ReactMarkdown from "react-markdown";
 // https://github.com/remarkjs/remark-gfm
 import remarkGfm from "remark-gfm";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { a11yDark } from "react-syntax-highlighter/dist/esm/styles/prism";
+import mermaid from "mermaid";
+
+// Initialize mermaid
+mermaid.initialize({
+  startOnLoad: false,
+  theme: "default",
+  securityLevel: "loose",
+  fontFamily: "inherit",
+  themeVariables: {
+    background: "#ffffff",
+    primaryColor: "#e0f2fe",
+    primaryTextColor: "#1e293b",
+    primaryBorderColor: "#0ea5e9",
+    lineColor: "#64748b",
+    secondaryColor: "#f1f5f9",
+    tertiaryColor: "#ffffff",
+  },
+});
+
+// Mermaid diagram component
+const MermaidDiagram: FunctionComponent<{ chart: string }> = ({
+  chart,
+}: {
+  chart: string;
+}) => {
+  const containerRef: React.RefObject<HTMLDivElement | null> =
+    useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const renderDiagram: () => Promise<void> = async (): Promise<void> => {
+      if (containerRef.current) {
+        containerRef.current.innerHTML = "";
+        try {
+          const id: string = `mermaid-${Math.random().toString(36).substr(2, 9)}`;
+          const { svg } = await mermaid.render(id, chart);
+          if (containerRef.current) {
+            containerRef.current.innerHTML = svg;
+          }
+        } catch (error) {
+          if (containerRef.current) {
+            containerRef.current.innerHTML = `<pre class="text-red-500">Error rendering diagram: ${error}</pre>`;
+          }
+        }
+      }
+    };
+    renderDiagram();
+  }, [chart]);
+
+  return (
+    <div
+      ref={containerRef}
+      className="my-4 flex justify-center bg-white p-4 rounded-lg"
+    />
+  );
+};
 
 export interface ComponentProps {
   text: string;
@@ -84,6 +144,16 @@ const MarkdownViewer: FunctionComponent<ComponentProps> = (
           },
 
           pre: ({ children, ...rest }: any) => {
+            // Check if this is a mermaid diagram - don't render pre wrapper for mermaid
+            const isMermaid: boolean =
+              React.isValidElement(children) &&
+              (children as any).props?.className?.includes("language-mermaid");
+
+            if (isMermaid) {
+              // For mermaid, just return the children (MermaidDiagram component)
+              return <>{children}</>;
+            }
+
             // Avoid double borders when SyntaxHighlighter is already styling the block.
             const isSyntaxHighlighter: boolean =
               React.isValidElement(children) &&
@@ -184,6 +254,11 @@ const MarkdownViewer: FunctionComponent<ComponentProps> = (
               "",
             );
 
+            // Handle mermaid diagrams
+            if (match && match[1] === "mermaid") {
+              return <MermaidDiagram chart={content} />;
+            }
+
             const codeClassName: string =
               content.includes("\n") ||
               (match &&

package/UI/Components/Modal/Modal.tsx

@@ -6,7 +6,12 @@ import ModalBody from "./ModalBody";
 import ModalFooter from "./ModalFooter";
 import { VeryLightGray } from "../../../Types/BrandColors";
 import IconProp from "../../../Types/Icon/IconProp";
-import React, { FunctionComponent, ReactElement } from "react";
+import React, {
+  FunctionComponent,
+  ReactElement,
+  useEffect,
+  useRef,
+} from "react";
 
 export enum ModalWidth {
   Normal,
@@ -38,6 +43,42 @@ export interface ComponentProps {
 const Modal: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
+  const modalRef: React.RefObject<HTMLDivElement> =
+    useRef<HTMLDivElement>(null);
+
+  // Handle Escape key to close modal
+  useEffect(() => {
+    const handleEscapeKey: (event: KeyboardEvent) => void = (
+      event: KeyboardEvent,
+    ): void => {
+      if (event.key === "Escape" && props.onClose) {
+        props.onClose();
+      }
+    };
+
+    document.addEventListener("keydown", handleEscapeKey);
+    return () => {
+      document.removeEventListener("keydown", handleEscapeKey);
+    };
+  }, [props.onClose]);
+
+  // 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();
+      }
+    }
+  }, []);
+
   let iconBgColor: string = "bg-indigo-100";
   let iconColor: string = "text-indigo-600";
 
@@ -57,8 +98,10 @@ const Modal: FunctionComponent<ComponentProps> = (
 
   return (
     <div
+      ref={modalRef}
       className="relative z-20"
       aria-labelledby="modal-title"
+      aria-describedby={props.description ? "modal-description" : undefined}
       role="dialog"
       aria-modal="true"
     >
@@ -122,12 +165,13 @@ const Modal: FunctionComponent<ComponentProps> = (
                       {props.title}
                     </h3>
                     {props.description && (
-                      <h3
+                      <p
+                        id="modal-description"
                         data-testid="modal-description"
                         className="text-sm leading-6 text-gray-500 mt-2"
                       >
                         {props.description}
-                      </h3>
+                      </p>
                     )}
                   </div>
                   {props.rightElement && (

package/UI/Components/ModelTable/BaseModelTable.tsx

@@ -36,7 +36,8 @@ import FormValues from "../Forms/Types/FormValues";
 import List from "../List/List";
 import { ListDetailProps } from "../List/ListRow";
 import ConfirmModal from "../Modal/ConfirmModal";
-import { ModalWidth } from "../Modal/Modal";
+import Modal, { ModalWidth } from "../Modal/Modal";
+import MarkdownViewer from "../Markdown.tsx/MarkdownViewer";
 import Filter from "../ModelFilter/Filter";
 import { DropdownOption, DropdownOptionLabel } from "../Dropdown/Dropdown";
 import OrderedStatesList from "../OrderedStatesList/OrderedStatesList";
@@ -153,6 +154,13 @@ export interface BaseTableProps<
     | undefined
     | ((data: Array<TBaseModel>, totalCount: number) => void);
   cardProps?: CardComponentProps | undefined;
+  helpContent?:
+    | {
+        title: string;
+        description?: string | undefined;
+        markdown: string;
+      }
+    | undefined;
   documentationLink?: Route | URL | undefined;
   videoLink?: Route | URL | undefined;
   showCreateForm?: undefined | boolean;
@@ -279,6 +287,7 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
   );
 
   const [showViewIdModal, setShowViewIdModal] = useState<boolean>(false);
+  const [showHelpModal, setShowHelpModal] = useState<boolean>(false);
   const [viewId, setViewId] = useState<string | null>(null);
   const [tableColumns, setColumns] = useState<Array<TableColumn<TBaseModel>>>(
     [],
@@ -1046,6 +1055,19 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
       });
     }
 
+    // Add help content button if provided
+    if (props.helpContent) {
+      headerbuttons.push({
+        title: "",
+        icon: IconProp.Help,
+        buttonStyle: ButtonStyleType.ICON,
+        className: "py-0 pr-0 pl-1 mt-1",
+        onClick: () => {
+          setShowHelpModal(true);
+        },
+      });
+    }
+
     // Add video link button if provided
     if (props.videoLink) {
       headerbuttons.push({
@@ -2105,6 +2127,25 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
           closeButtonType={ButtonStyleType.OUTLINE}
         />
       )}
+
+      {showHelpModal && props.helpContent && (
+        <Modal
+          title={props.helpContent.title}
+          description={props.helpContent.description}
+          onClose={() => {
+            setShowHelpModal(false);
+          }}
+          modalWidth={ModalWidth.Large}
+          submitButtonText="Close"
+          onSubmit={() => {
+            setShowHelpModal(false);
+          }}
+        >
+          <div className="p-2">
+            <MarkdownViewer text={props.helpContent.markdown} />
+          </div>
+        </Modal>
+      )}
     </>
   );
 };