@oneuptime/common 13.0.1 → 13.0.4

package/UI/Components/Alerts/Alert.tsx

@@ -2,7 +2,13 @@ import Icon from "../Icon/Icon";
 import Color from "../../../Types/Color";
 import IconProp from "../../../Types/Icon/IconProp";
 import useTranslateValue from "../../Utils/Translation";
-import React, { FunctionComponent, ReactElement } from "react";
+import React, {
+  FunctionComponent,
+  MouseEvent,
+  ReactElement,
+  useId,
+  useRef,
+} from "react";
 
 export enum AlertType {
   INFO,
@@ -46,113 +52,137 @@ const Alert: FunctionComponent<ComponentProps> = (
   const translatedTextOnRight: string | undefined = translateString(
     props.textOnRight,
   );
-  const type: AlertType = props.type || AlertType.INFO;
+  const type: AlertType = props.type ?? AlertType.INFO;
+  const messageId: string = useId();
+  const actionButtonRef: React.RefObject<HTMLButtonElement> =
+    useRef<HTMLButtonElement>(null);
 
   const typeClassNames: {
     [key in AlertType]: {
-      text: string;
-      bg: string;
+      surface: string;
+      icon: string;
       hover: string;
     };
   } = {
     [AlertType.DANGER]: {
-      text: "text-red-200",
-      bg: "bg-red-700",
-      hover: "hover:bg-red-600",
+      surface: "border-red-200 bg-red-50 text-red-800",
+      icon: "bg-red-100 text-red-700",
+      hover: "hover:bg-red-100",
     },
     [AlertType.INFO]: {
-      text: "text-white",
-      bg: "bg-gray-700",
-      hover: "hover:bg-gray-600",
+      surface: "border-blue-200 bg-blue-50 text-blue-800",
+      icon: "bg-blue-100 text-blue-700",
+      hover: "hover:bg-blue-100",
     },
     [AlertType.WARNING]: {
-      text: "text-yellow-200",
-      bg: "bg-gray-700",
-      hover: "hover:bg-yellow-600",
+      surface: "border-amber-200 bg-amber-50 text-amber-900",
+      icon: "bg-amber-100 text-amber-700",
+      hover: "hover:bg-amber-100",
     },
     [AlertType.SUCCESS]: {
-      text: "text-green-200",
-      bg: "bg-gray-700",
-      hover: "hover:bg-green-600",
+      surface: "border-emerald-200 bg-emerald-50 text-emerald-800",
+      icon: "bg-emerald-100 text-emerald-700",
+      hover: "hover:bg-emerald-100",
     },
   };
 
-  let textClassName: string = typeClassNames[type].text;
-  const bgClassName: string = typeClassNames[type].bg;
-  const hoverClassName: string = typeClassNames[type].hover;
+  // Public status pages provide their own status color and use a filled banner.
+  const surfaceClassName: string = props.color
+    ? "border-transparent text-white"
+    : typeClassNames[type].surface;
+  const iconClassName: string = props.color
+    ? "bg-white/10 text-white"
+    : typeClassNames[type].icon;
+  const hoverClassName: string = props.color
+    ? "hover:bg-white/10"
+    : typeClassNames[type].hover;
+  const icon: IconProp =
+    props.icon ??
+    (type === AlertType.SUCCESS
+      ? IconProp.CheckCircle
+      : type === AlertType.INFO
+        ? IconProp.Info
+        : IconProp.Alert);
 
-  if (props.size === AlertSize.Large) {
-    // Add large size classes
-    textClassName += " text-lg";
-  }
+  const onClick: (event: MouseEvent<HTMLDivElement>) => void = (
+    event: MouseEvent<HTMLDivElement>,
+  ): void => {
+    /*
+     * Rich messages can contain their own links and controls. Activating one
+     * must not also activate the banner's action.
+     */
+    const control: Element | null =
+      event.target instanceof Element
+        ? event.target.closest(
+            "a, button, input, select, textarea, [role='button'], [role='link']",
+          )
+        : null;
+    if (control && control !== actionButtonRef.current) {
+      return;
+    }
+    props.onClick?.();
+  };
 
   return (
     <div
       id={props.id}
-      className={`alert rounded-md ${bgClassName} p-4 ${props.className}`}
+      className={`alert relative min-w-0 rounded-lg border p-4 ${surfaceClassName} ${props.onClick ? `cursor-pointer transition-colors ${hoverClassName}` : ""} ${props.className || ""}`}
       data-testid={props.dataTestId}
-      onClick={props.onClick}
+      onClick={props.onClick ? onClick : undefined}
       role="alert"
       aria-live="polite"
       style={props.color ? { backgroundColor: props.color.toString() } : {}}
     >
-      <div className="alert-content flex">
+      {props.onClick && (
+        <button
+          ref={actionButtonRef}
+          type="button"
+          aria-labelledby={messageId}
+          className="absolute inset-0 w-full rounded-lg focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current"
+        />
+      )}
+      <div className="alert-content relative flex items-start gap-3">
         {!props.doNotShowIcon && (
-          <div className="alert-icon flex-shrink-0">
-            {type === AlertType.DANGER && (
-              <Icon
-                icon={props.icon || IconProp.Alert}
-                className={`h-5 w-5 ${textClassName}`}
-              />
-            )}
-            {type === AlertType.WARNING && (
-              <Icon
-                icon={props.icon || IconProp.Alert}
-                className={`h-5 w-5 ${textClassName}`}
-              />
-            )}
-            {type === AlertType.SUCCESS && (
-              <Icon
-                icon={props.icon || IconProp.CheckCircle}
-                className={`h-5 w-5 ${textClassName}`}
-              />
-            )}
-            {type === AlertType.INFO && (
-              <Icon
-                icon={props.icon || IconProp.Info}
-                className={`h-5 w-5 ${textClassName}`}
-              />
-            )}
+          <div
+            className={`alert-icon flex h-8 w-8 shrink-0 items-center justify-center rounded-lg ${iconClassName}`}
+            aria-hidden="true"
+          >
+            <Icon icon={icon} className="h-5 w-5" />
           </div>
         )}
         <div
-          className={`alert-text ml-3 mr-3 flex-1 md:flex md:justify-between ${props.textClassName}`}
+          className={`alert-text min-w-0 flex-1 ${!props.doNotShowIcon && !(translatedStrongTitle && translatedTitle) ? "py-1" : ""} ${props.textClassName || ""}`}
         >
           <div
-            className={`alert-message text-sm flex justify-between w-full ${textClassName}`}
+            id={messageId}
+            className={`alert-message flex w-full min-w-0 flex-col gap-2 [overflow-wrap:anywhere] sm:flex-row sm:items-start sm:justify-between sm:gap-4 ${props.size === AlertSize.Large ? "text-lg leading-7" : "text-sm leading-6"}`}
           >
-            <div>
-              <span className="font-medium">
-                {translatedStrongTitle}{" "}
-                {translatedTitle && translatedStrongTitle ? "- " : ""}
-              </span>
-              {translatedTitle}
+            <div className="min-w-0 space-y-1">
+              {translatedStrongTitle && (
+                <div className="font-semibold">{translatedStrongTitle}</div>
+              )}
+              {translatedTitle && <div>{translatedTitle}</div>}
             </div>
-            {translatedTextOnRight && <div>{translatedTextOnRight}</div>}
+            {translatedTextOnRight && (
+              <div className="min-w-0 font-medium sm:ml-auto sm:text-right">
+                {translatedTextOnRight}
+              </div>
+            )}
           </div>
-          {props.onClose && (
-            <p className="alert-close mt-3 text-sm md:mt-0 md:ml-6">
-              <button
-                onClick={props.onClose}
-                role="alert-close-button"
-                className={`whitespace-nowrap font-medium ${textClassName} hover:${hoverClassName}`}
-              >
-                Close
-                <span aria-hidden="true"> &rarr;</span>
-              </button>
-            </p>
-          )}
         </div>
+        {props.onClose && (
+          <button
+            type="button"
+            onClick={(event: MouseEvent<HTMLButtonElement>): void => {
+              event.stopPropagation();
+              props.onClose?.();
+            }}
+            aria-label={translateString("Close")}
+            className={`alert-close flex h-8 w-8 shrink-0 items-center justify-center rounded-md transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current ${hoverClassName}`}
+          >
+            <Icon icon={IconProp.Close} className="h-4 w-4" />
+          </button>
+        )}
       </div>
     </div>
   );

package/UI/Components/Button/Button.tsx

@@ -183,7 +183,7 @@ const Button: FunctionComponent<ComponentProps> = ({
 
   if (buttonStyle === ButtonStyleType.SECONDARY) {
     loadingIconClassName += ` text-indigo-500`;
-    buttonStyleCssClass = `inline-flex items-center rounded-md border border-transparent ${
+    buttonStyleCssClass = `inline-flex rounded-md border border-transparent ${
       disabled ? "bg-indigo-300" : "bg-indigo-100 hover:bg-indigo-200"
     } text-sm font-medium text-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2`;
   }
@@ -245,6 +245,9 @@ const Button: FunctionComponent<ComponentProps> = ({
     }   focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2 md:mt-0 md:ml-3 md:w-auto md:text-sm`;
   }
 
+  // Center the icon against both desktop and taller mobile label lines.
+  buttonStyleCssClass += ` items-center`;
+
   /*
    * The one shared point every variant funnels through: hover/focus colour
    * changes ease in instead of snapping, at the same 150ms the other

package/UI/Components/Dropdown/Dropdown.tsx

@@ -63,6 +63,7 @@ export interface ComponentProps {
   dataTestId?: string | undefined;
   ariaLabel?: string | undefined;
   ariaLabelledby?: string | undefined;
+  disabled?: boolean | undefined;
 }
 
 const Dropdown: FunctionComponent<ComponentProps> = (
@@ -539,6 +540,7 @@ const Dropdown: FunctionComponent<ComponentProps> = (
         data-testid={props.dataTestId}
         tabIndex={props.tabIndex}
         isMulti={props.isMultiSelect}
+        isDisabled={props.disabled}
         value={value || null}
         onFocus={() => {
           props.onFocus?.();

package/UI/Components/Feed/Feed.tsx

@@ -1,10 +1,14 @@
 import React, { FunctionComponent, ReactElement } from "react";
 import FeedItem, { FeedItemProps } from "./FeedItem";
 import ErrorMessage from "../ErrorMessage/ErrorMessage";
+import Button, { ButtonSize, ButtonStyleType } from "../Button/Button";
 
 export interface ComponentProps {
   items: Array<FeedItemProps>;
   noItemsMessage: string;
+  hasMore?: boolean | undefined;
+  onMore?: (() => void) | undefined;
+  isLoadingMore?: boolean | undefined;
 }
 
 const Feed: FunctionComponent<ComponentProps> = (
@@ -24,6 +28,17 @@ const Feed: FunctionComponent<ComponentProps> = (
           );
         })}
       </ul>
+      {props.hasMore === true && (
+        <div className="mt-2 flex justify-center">
+          <Button
+            title="More"
+            buttonStyle={ButtonStyleType.NORMAL}
+            buttonSize={ButtonSize.Small}
+            onClick={props.onMore}
+            isLoading={props.isLoadingMore === true}
+          />
+        </div>
+      )}
     </div>
   );
 };

package/UI/Components/Feed/useFeedItems.ts

@@ -0,0 +1,227 @@
+import {
+  Dispatch,
+  MutableRefObject,
+  SetStateAction,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import {
+  DEFAULT_LIMIT,
+  LIMIT_PER_PROJECT,
+} from "../../../Types/Database/LimitMax";
+import {
+  PromiseVoidFunction,
+  VoidFunction,
+} from "../../../Types/FunctionTypes";
+import API from "../../Utils/API/API";
+import { FeedItemProps } from "./FeedItem";
+
+export interface FeedPage<TFeedModel> {
+  data: Array<TFeedModel>;
+  count: number;
+}
+
+export interface UseFeedItemsProps<TFeedModel> {
+  resourceKey: string;
+  refreshToken?: number | undefined;
+  getItems: (limit: number) => Promise<FeedPage<TFeedModel>>;
+  mapItems: (items: Array<TFeedModel>) => Array<FeedItemProps>;
+}
+
+export interface UseFeedItemsResult {
+  feedItems: Array<FeedItemProps>;
+  isLoading: boolean;
+  isLoadingMore: boolean;
+  error: string | undefined;
+  loadMoreError: string | undefined;
+  hasMore: boolean;
+  isCurrentFeedLoaded: boolean;
+  setError: Dispatch<SetStateAction<string | undefined>>;
+  refresh: PromiseVoidFunction;
+  loadMore: VoidFunction;
+}
+
+interface FetchOptions {
+  limit: number;
+  isLoadingMore: boolean;
+}
+
+/*
+ * Every dashboard activity feed follows the same paging contract: read the
+ * newest top N rows and replace that window when the reader asks for more.
+ * Re-reading from zero matters for a live feed. Offset-appending can duplicate
+ * or skip a row when a new event arrives between page requests.
+ */
+const useFeedItems: <TFeedModel>(
+  props: UseFeedItemsProps<TFeedModel>,
+) => UseFeedItemsResult = <TFeedModel>(
+  props: UseFeedItemsProps<TFeedModel>,
+): UseFeedItemsResult => {
+  const [feedItems, setFeedItems] = useState<Array<FeedItemProps>>([]);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [isLoadingMore, setIsLoadingMore] = useState<boolean>(false);
+  const [error, setError] = useState<string | undefined>(undefined);
+  const [loadMoreError, setLoadMoreError] = useState<string | undefined>(
+    undefined,
+  );
+  const [hasMore, setHasMore] = useState<boolean>(false);
+  const [loadedResourceKey, setLoadedResourceKey] = useState<string | null>(
+    null,
+  );
+
+  const activeResourceKeyRef: MutableRefObject<string> = useRef<string>(
+    props.resourceKey,
+  );
+  activeResourceKeyRef.current = props.resourceKey;
+  const previousResourceKeyRef: MutableRefObject<string | null> = useRef<
+    string | null
+  >(null);
+  const currentLimitRef: MutableRefObject<number> =
+    useRef<number>(DEFAULT_LIMIT);
+  const fetchGenerationRef: MutableRefObject<number> = useRef<number>(0);
+  const isLoadingMoreRef: MutableRefObject<boolean> = useRef<boolean>(false);
+  const getItemsRef: MutableRefObject<
+    UseFeedItemsProps<TFeedModel>["getItems"]
+  > = useRef<UseFeedItemsProps<TFeedModel>["getItems"]>(props.getItems);
+  getItemsRef.current = props.getItems;
+  const mapItemsRef: MutableRefObject<
+    UseFeedItemsProps<TFeedModel>["mapItems"]
+  > = useRef<UseFeedItemsProps<TFeedModel>["mapItems"]>(props.mapItems);
+  mapItemsRef.current = props.mapItems;
+
+  const fetchItems: (options: FetchOptions) => Promise<void> = useCallback(
+    async (options: FetchOptions): Promise<void> => {
+      const generation: number = fetchGenerationRef.current + 1;
+      fetchGenerationRef.current = generation;
+      const requestedResourceKey: string = activeResourceKeyRef.current;
+      const getItems: UseFeedItemsProps<TFeedModel>["getItems"] =
+        getItemsRef.current;
+      const mapItems: UseFeedItemsProps<TFeedModel>["mapItems"] =
+        mapItemsRef.current;
+      const isLatestRequest: () => boolean = (): boolean => {
+        return (
+          generation === fetchGenerationRef.current &&
+          requestedResourceKey === activeResourceKeyRef.current
+        );
+      };
+
+      setLoadMoreError(undefined);
+      if (options.isLoadingMore) {
+        isLoadingMoreRef.current = true;
+        setIsLoadingMore(true);
+      } else {
+        isLoadingMoreRef.current = false;
+        setIsLoadingMore(false);
+        setError(undefined);
+        setIsLoading(true);
+      }
+
+      try {
+        const page: FeedPage<TFeedModel> = await getItems(options.limit);
+
+        if (!isLatestRequest()) {
+          return;
+        }
+
+        setFeedItems(mapItems(page.data));
+        currentLimitRef.current = options.limit;
+        setHasMore(
+          page.data.length < page.count && options.limit < LIMIT_PER_PROJECT,
+        );
+        setLoadedResourceKey(requestedResourceKey);
+      } catch (err: unknown) {
+        if (!isLatestRequest()) {
+          return;
+        }
+
+        if (options.isLoadingMore) {
+          setLoadMoreError(API.getFriendlyMessage(err));
+        } else {
+          setError(API.getFriendlyMessage(err));
+          setLoadedResourceKey(requestedResourceKey);
+        }
+      } finally {
+        if (isLatestRequest()) {
+          if (options.isLoadingMore) {
+            isLoadingMoreRef.current = false;
+            setIsLoadingMore(false);
+          } else {
+            setIsLoading(false);
+          }
+        }
+      }
+    },
+    [],
+  );
+
+  const refresh: PromiseVoidFunction = useCallback(async (): Promise<void> => {
+    await fetchItems({
+      limit: currentLimitRef.current,
+      isLoadingMore: false,
+    });
+  }, [fetchItems]);
+
+  const loadMore: VoidFunction = useCallback((): void => {
+    if (
+      isLoadingMoreRef.current ||
+      currentLimitRef.current >= LIMIT_PER_PROJECT
+    ) {
+      return;
+    }
+
+    fetchItems({
+      limit: Math.min(
+        currentLimitRef.current + DEFAULT_LIMIT,
+        LIMIT_PER_PROJECT,
+      ),
+      isLoadingMore: true,
+    }).catch(() => {
+      // fetchItems converts request failures into the load-more error state.
+    });
+  }, [fetchItems]);
+
+  useEffect(() => {
+    const hasResourceChanged: boolean =
+      previousResourceKeyRef.current !== props.resourceKey;
+    previousResourceKeyRef.current = props.resourceKey;
+
+    if (hasResourceChanged) {
+      currentLimitRef.current = DEFAULT_LIMIT;
+      setFeedItems([]);
+      setHasMore(false);
+      setLoadedResourceKey(null);
+    }
+
+    fetchItems({
+      limit: hasResourceChanged ? DEFAULT_LIMIT : currentLimitRef.current,
+      isLoadingMore: false,
+    }).catch(() => {
+      // fetchItems converts request failures into the appropriate UI state.
+    });
+  }, [fetchItems, props.resourceKey, props.refreshToken]);
+
+  useEffect(() => {
+    return () => {
+      fetchGenerationRef.current += 1;
+    };
+  }, []);
+
+  const isCurrentFeedLoaded: boolean = loadedResourceKey === props.resourceKey;
+
+  return {
+    feedItems,
+    isLoading,
+    isLoadingMore,
+    error,
+    loadMoreError: isCurrentFeedLoaded ? loadMoreError : undefined,
+    hasMore,
+    isCurrentFeedLoaded,
+    setError,
+    refresh,
+    loadMore,
+  };
+};
+
+export default useFeedItems;

package/UI/Components/Forms/BasicForm.tsx

@@ -165,10 +165,22 @@ const BasicForm: ForwardRefExoticComponent<any> = forwardRef(
       props.initialValues || {},
     );
 
+    const getVisibleFormSteps: () => Array<FormStep<T>> | undefined = () => {
+      return getFormSteps()?.filter((step: FormStep<T>): boolean => {
+        return !step.showIf || step.showIf(refCurrentValue.current);
+      });
+    };
+
     const [currentFormStepId, setCurrentFormStepId] = useState<string | null>(
       null,
     );
 
+    const activeStepIndex: number =
+      formSteps?.findIndex((step: FormStep<T>) => {
+        return step.id === currentFormStepId;
+      }) ?? -1;
+    const activeStep: FormStep<T> | undefined = formSteps?.[activeStepIndex];
+
     const isOnLastFormStep: boolean =
       !currentFormStepId ||
       !formSteps ||
@@ -212,15 +224,7 @@ const BasicForm: ForwardRefExoticComponent<any> = forwardRef(
     const [touched, setTouched] = useState<Dictionary<boolean>>({});
 
     useEffect(() => {
-      setFormSteps(
-        getFormSteps()?.filter((step: FormStep<T>) => {
-          if (!step.showIf) {
-            return true;
-          }
-
-          return step.showIf(refCurrentValue.current);
-        }),
-      );
+      setFormSteps(getVisibleFormSteps());
     }, [refCurrentValue.current]);
 
     const [formFields, setFormFields] = useState<Fields<T>>([]);
@@ -264,7 +268,14 @@ const BasicForm: ForwardRefExoticComponent<any> = forwardRef(
         setFieldValue,
         submitForm,
       };
-    }, [currentValue, errors, touched, formFields]);
+    }, [
+      currentValue,
+      errors,
+      touched,
+      formFields,
+      currentFormStepId,
+      formSteps,
+    ]);
 
     useAsyncEffect(async () => {
       const fields: Fields<T> = [
@@ -404,16 +415,14 @@ const BasicForm: ForwardRefExoticComponent<any> = forwardRef(
         return;
       }
 
-      // if last step then submit.
+      // Use current values because conditional-step state can lag a field edit.
+
+      const steps: Array<FormStep<T>> | undefined = getVisibleFormSteps();
 
       if (
-        (formSteps &&
-          formSteps.length > 0 &&
-          (
-            (formSteps as Array<FormStep<T>>)[
-              formSteps.length - 1
-            ] as FormStep<T>
-          ).id === currentFormStepId) ||
+        (steps &&
+          steps.length > 0 &&
+          (steps[steps.length - 1] as FormStep<T>).id === currentFormStepId) ||
         currentFormStepId === null
       ) {
         const values: FormValues<T> = refCurrentValue.current;
@@ -493,9 +502,7 @@ const BasicForm: ForwardRefExoticComponent<any> = forwardRef(
         props.onSubmit(values, () => {
           setDidSomethingChange(false);
         });
-      } else if (formSteps && formSteps.length > 0) {
-        const steps: Array<FormStep<T>> = formSteps;
-
+      } else if (steps && steps.length > 0) {
         const currentStepIndex: number = steps.findIndex(
           (step: FormStep<T>) => {
             return step.id === currentFormStepId;
@@ -706,6 +713,20 @@ const BasicForm: ForwardRefExoticComponent<any> = forwardRef(
                 }`}
                 style={{ flex: "1 1 auto" }}
               >
+                {activeStep && (
+                  <div className="mb-5 flex items-center justify-between gap-3 lg:hidden">
+                    <p
+                      className="ml-auto text-right text-sm text-gray-500 lg:hidden"
+                      role="status"
+                    >
+                      {translateString("Step") ?? "Step"} {activeStepIndex + 1}{" "}
+                      {translateString("of") ?? "of"} {formSteps?.length}
+                      <span className="block font-medium text-gray-900">
+                        {translateString(activeStep.title) ?? activeStep.title}
+                      </span>
+                    </p>
+                  </div>
+                )}
                 {props.error && (
                   <div className="mb-3">
                     <Alert title={props.error} type={AlertType.DANGER} />