@oneuptime/common 13.0.3 → 13.0.5

package/UI/Components/MemberRoleAssignment/MemberRoleAssignment.tsx

@@ -4,7 +4,7 @@ import React, {
   useState,
   useCallback,
 } from "react";
-import Card from "../Card/Card";
+import Card, { CardHeaderLayout } from "../Card/Card";
 import IconProp from "../../../Types/Icon/IconProp";
 import Color from "../../../Types/Color";
 import ObjectID from "../../../Types/ObjectID";
@@ -59,6 +59,8 @@ export interface ComponentProps {
   onRefresh?: () => Promise<void>;
   emptyStateMessage?: string;
   className?: string;
+  // Handed to the Card; "stacked" suits a narrow column.
+  headerLayout?: CardHeaderLayout | undefined;
 }
 
 interface ReassignState {
@@ -190,6 +192,7 @@ const MemberRoleAssignment: FunctionComponent<ComponentProps> = (
         title={cardTitle}
         description={cardDescription}
         className={props.className}
+        headerLayout={props.headerLayout}
       >
         <ComponentLoader />
       </Card>
@@ -202,6 +205,7 @@ const MemberRoleAssignment: FunctionComponent<ComponentProps> = (
         title={cardTitle}
         description={cardDescription}
         className={props.className}
+        headerLayout={props.headerLayout}
       >
         <ErrorMessage message={props.error} />
       </Card>
@@ -219,21 +223,31 @@ const MemberRoleAssignment: FunctionComponent<ComponentProps> = (
     isLastInGroup?: boolean,
   ): ReactElement => {
     const isPrimaryRole: boolean = role.isPrimaryRole || false;
+    const memberLabel: string = member.userName || member.userEmail;
 
+    /*
+     * The row wraps rather than overflows. The identity block asks for at
+     * least 8rem and truncates the name and email past that, so on a full
+     * width page everything sits on one line. In a narrow sidebar the small
+     * remove icon still fits beside it, and the wider Reassign action drops
+     * onto its own line instead of being clipped - indented (avatar plus gap,
+     * less the button's own padding) so it lines up under the name.
+     */
     return (
       <div
         key={member.memberId.toString()}
-        className={`flex items-center justify-between py-2 ${!isLastInGroup ? "border-b border-gray-100" : ""}`}
+        data-testid="member-role-row"
+        className={`flex flex-wrap items-center justify-between gap-x-2 gap-y-1 py-2 ${!isLastInGroup ? "border-b border-gray-100" : ""}`}
       >
-        <div className="flex items-center gap-3">
+        <div className="flex min-w-[8rem] flex-1 items-center gap-3">
           {member.userProfilePictureUrl ? (
             <Image
               imageUrl={member.userProfilePictureUrl}
               alt={member.userName}
-              className="h-8 w-8 rounded-full object-cover"
+              className="h-8 w-8 flex-shrink-0 rounded-full object-cover"
             />
           ) : (
-            <div className="h-8 w-8 rounded-full bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center">
+            <div className="h-8 w-8 flex-shrink-0 rounded-full bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center">
               <span className="text-xs font-medium text-white">
                 {member.userName?.charAt(0)?.toUpperCase() ||
                   member.userEmail?.charAt(0)?.toUpperCase() ||
@@ -241,12 +255,18 @@ const MemberRoleAssignment: FunctionComponent<ComponentProps> = (
               </span>
             </div>
           )}
-          <div className="min-w-0">
-            <p className="text-sm font-medium text-gray-900 truncate">
-              {member.userName || member.userEmail}
+          <div className="min-w-0 flex-1">
+            <p
+              className="text-sm font-medium text-gray-900 truncate"
+              title={memberLabel}
+            >
+              {memberLabel}
             </p>
             {member.userName && member.userEmail && (
-              <p className="text-xs text-gray-500 truncate">
+              <p
+                className="text-xs text-gray-500 truncate"
+                title={member.userEmail}
+              >
                 {member.userEmail}
               </p>
             )}
@@ -258,8 +278,9 @@ const MemberRoleAssignment: FunctionComponent<ComponentProps> = (
             onClick={() => {
               setReassignState({ member, role });
             }}
-            className="inline-flex items-center gap-1 px-2 py-1 text-xs font-medium text-indigo-600 hover:text-indigo-800 hover:bg-indigo-50 rounded-md transition-colors"
+            className="ml-9 inline-flex flex-shrink-0 items-center gap-1 px-2 py-1 text-xs font-medium text-indigo-600 hover:text-indigo-800 hover:bg-indigo-50 rounded-md transition-colors"
             title="Reassign"
+            aria-label={`Reassign ${role.name} from ${memberLabel}`}
           >
             <Icon icon={IconProp.ArrowCircleRight} className="w-3.5 h-3.5" />
             Reassign
@@ -271,8 +292,9 @@ const MemberRoleAssignment: FunctionComponent<ComponentProps> = (
               setShowConfirmDelete(member);
             }}
             disabled={isUnassigning?.toString() === member.memberId.toString()}
-            className="inline-flex items-center p-1.5 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-md transition-colors disabled:opacity-50"
+            className="ml-auto inline-flex flex-shrink-0 items-center p-1.5 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-md transition-colors disabled:opacity-50"
             title="Remove"
+            aria-label={`Remove ${memberLabel} from ${role.name}`}
           >
             {isUnassigning?.toString() === member.memberId.toString() ? (
               <Icon icon={IconProp.Refresh} className="w-4 h-4 animate-spin" />
@@ -291,6 +313,7 @@ const MemberRoleAssignment: FunctionComponent<ComponentProps> = (
         title={cardTitle}
         description={cardDescription}
         className={props.className}
+        headerLayout={props.headerLayout}
         buttons={
           props.onRefresh
             ? [
@@ -345,16 +368,21 @@ const MemberRoleAssignment: FunctionComponent<ComponentProps> = (
                     key={role.id.toString()}
                     className="border border-gray-200 rounded-lg overflow-hidden"
                   >
-                    {/* Role Header */}
+                    {/*
+                     * Role Header. Wraps like a member row: the Assign
+                     * button moves under the role name (icon plus gap) when
+                     * the card is too narrow to hold both.
+                     */}
                     <div
-                      className="px-4 py-3 flex items-center justify-between"
+                      data-testid="member-role-header"
+                      className="px-4 py-3 flex flex-wrap items-center justify-between gap-x-3 gap-y-2"
                       style={{
                         backgroundColor: role.color
                           ? `${role.color.toString()}10`
                           : "#f9fafb",
                       }}
                     >
-                      <div className="flex items-center gap-3">
+                      <div className="flex min-w-[8rem] flex-1 items-center gap-3">
                         <div
                           className="w-9 h-9 rounded-lg flex items-center justify-center flex-shrink-0"
                           style={{
@@ -371,9 +399,9 @@ const MemberRoleAssignment: FunctionComponent<ComponentProps> = (
                             }}
                           />
                         </div>
-                        <div>
-                          <div className="flex items-center gap-2">
-                            <span className="text-sm font-semibold text-gray-900">
+                        <div className="min-w-0 flex-1">
+                          <div className="flex flex-wrap items-center gap-x-2 gap-y-1">
+                            <span className="min-w-0 break-words text-sm font-semibold text-gray-900">
                               {role.name}
                             </span>
                             {role.isPrimaryRole && (
@@ -402,7 +430,7 @@ const MemberRoleAssignment: FunctionComponent<ComponentProps> = (
                           onClick={() => {
                             setActiveRoleDropdown(role.id);
                           }}
-                          className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-md transition-all shadow-sm text-gray-700 bg-white border border-gray-300 hover:bg-gray-50 hover:border-gray-400"
+                          className="ml-12 inline-flex flex-shrink-0 items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-md transition-all shadow-sm text-gray-700 bg-white border border-gray-300 hover:bg-gray-50 hover:border-gray-400"
                         >
                           <Icon icon={IconProp.Add} className="w-3.5 h-3.5" />
                           {members.length === 0 ? "Assign" : "Add More"}
@@ -414,8 +442,8 @@ const MemberRoleAssignment: FunctionComponent<ComponentProps> = (
                     {isDropdownActive && (
                       <div className="px-4 py-3 bg-gray-50 border-b border-gray-200">
                         {availableUsers.length === 0 ? (
-                          <div className="flex items-center justify-between">
-                            <p className="text-sm text-red-600">
+                          <div className="flex flex-wrap items-center justify-between gap-2">
+                            <p className="min-w-0 text-sm text-red-600">
                               All users are already assigned to this role.
                             </p>
                             <button
@@ -430,8 +458,8 @@ const MemberRoleAssignment: FunctionComponent<ComponentProps> = (
                             </button>
                           </div>
                         ) : (
-                          <div className="flex items-center gap-2">
-                            <div className="flex-1 max-w-sm">
+                          <div className="flex flex-wrap items-center gap-2">
+                            <div className="min-w-[10rem] max-w-sm flex-1">
                               <Dropdown
                                 options={availableUsers}
                                 placeholder="Select member..."

package/UI/Components/ModelDetail/CardModelDetail.tsx

@@ -59,7 +59,22 @@ const CardModelDetail: <TBaseModel extends BaseModel>(
     onBeforeEditRef.current = props.onBeforeEdit;
   }, [props.onBeforeEdit]);
 
+  /*
+   * Only a real change to props.refresher toggles the internal one. Toggling
+   * on mount as well handed ModelDetail a second refresher value right after
+   * its first render, so every card sent two getItem requests on page load.
+   * Comparing against the last seen value, rather than skipping the first
+   * run, also holds when StrictMode re-runs effects on mount.
+   */
+  const lastPropsRefresherRef: React.MutableRefObject<boolean | undefined> =
+    useRef<boolean | undefined>(props.refresher);
+
   useEffect(() => {
+    if (lastPropsRefresherRef.current === props.refresher) {
+      return;
+    }
+
+    lastPropsRefresherRef.current = props.refresher;
     setRefresher(!refresher);
   }, [props.refresher]);
 

package/UI/Components/ModelDetail/ModelDetail.tsx

@@ -2,7 +2,7 @@ import API from "../../Utils/API/API";
 import ModelAPI from "../../Utils/ModelAPI/ModelAPI";
 import PermissionUtil from "../../Utils/Permission";
 import User from "../../Utils/User";
-import Detail from "../Detail/Detail";
+import Detail, { DetailStyle } from "../Detail/Detail";
 import DetailField from "../Detail/Field";
 import ErrorMessage from "../ErrorMessage/ErrorMessage";
 import Loader, { LoaderType } from "../Loader/Loader";
@@ -11,14 +11,11 @@ import BaseModel from "../../../Models/DatabaseModels/DatabaseBaseModel/Database
 import { ColumnAccessControl } from "../../../Types/BaseDatabase/AccessControl";
 import { VeryLightGray } from "../../../Types/BrandColors";
 import Dictionary from "../../../Types/Dictionary";
-import {
-  PromiseVoidFunction,
-  VoidFunction,
-} from "../../../Types/FunctionTypes";
+import { PromiseVoidFunction } from "../../../Types/FunctionTypes";
 import { JSONObject } from "../../../Types/JSON";
 import ObjectID from "../../../Types/ObjectID";
 import Permission, { PermissionHelper } from "../../../Types/Permission";
-import React, { ReactElement, useEffect, useState } from "react";
+import React, { ReactElement, useEffect, useRef, useState } from "react";
 import { useAsyncEffect } from "use-async-effect";
 import Select from "../../../Types/BaseDatabase/Select";
 
@@ -30,11 +27,13 @@ export interface ComponentProps<TBaseModel extends BaseModel> {
   modelId: ObjectID;
   modelAPI?: typeof ModelAPI | undefined;
   onError?: ((error: string) => void) | undefined;
-  onItemLoaded?: (item: TBaseModel) => void | undefined;
+  onItemLoaded?: ((item: TBaseModel) => void) | undefined;
   refresher?: undefined | boolean;
   showDetailsInNumberOfColumns?: number | undefined;
   onBeforeFetch?: (() => Promise<JSONObject>) | undefined;
   selectMoreFields?: Select<TBaseModel>;
+  // Forwarded to Detail. Leave unset for the default layout.
+  style?: DetailStyle | undefined;
 }
 
 const ModelDetail: <TBaseModel extends BaseModel>(
@@ -42,7 +41,6 @@ const ModelDetail: <TBaseModel extends BaseModel>(
 ) => ReactElement = <TBaseModel extends BaseModel>(
   props: ComponentProps<TBaseModel>,
 ): ReactElement => {
-  const [fields, setFields] = useState<Array<DetailField<TBaseModel>>>([]);
   const [isLoading, setIsLoading] = useState<boolean>(true);
   const [error, setError] = useState<string>("");
   const [item, setItem] = useState<TBaseModel | null>(null);
@@ -51,6 +49,19 @@ const ModelDetail: <TBaseModel extends BaseModel>(
     JSONObject | undefined
   >(undefined);
 
+  /*
+   * Bumped by every fetch (and on unmount). A response only lands if no newer
+   * fetch has started since, so a slow earlier request can never overwrite
+   * the item - or call onItemLoaded with - what a later one already loaded.
+   */
+  const fetchGenerationRef: React.MutableRefObject<number> = useRef<number>(0);
+
+  useEffect(() => {
+    return () => {
+      fetchGenerationRef.current++;
+    };
+  }, []);
+
   type HasPermissionToReadFieldFunction = (fieldName: string) => boolean;
 
   /*
@@ -152,9 +163,18 @@ const ModelDetail: <TBaseModel extends BaseModel>(
       return relationSelect;
     };
 
-  const setDetailFields: VoidFunction = (): void => {
-    // set fields.
+  type GetDetailFieldsFunction = () => Array<DetailField<TBaseModel>>;
 
+  /*
+   * Derived on every render rather than stored once at mount. A getElement
+   * usually closes over the page's state and props (a resend handler, a
+   * translation function, a field set that depends on data the page loads
+   * later), and a copy captured at mount keeps rendering - and calling back
+   * with - those first values forever.
+   */
+  const getDetailFields: GetDetailFieldsFunction = (): Array<
+    DetailField<TBaseModel>
+  > => {
     const userPermissions: Array<Permission> =
       PermissionUtil.getAllPermissions();
 
@@ -206,16 +226,19 @@ const ModelDetail: <TBaseModel extends BaseModel>(
       }
     }
 
-    setFields(fieldsToSet);
+    return fieldsToSet;
   };
 
-  useEffect(() => {
-    if (props.modelType) {
-      setDetailFields();
-    }
-  }, [onBeforeFetchData, props.modelType]);
-
   const fetchItem: PromiseVoidFunction = async (): Promise<void> => {
+    fetchGenerationRef.current++;
+    const generation: number = fetchGenerationRef.current;
+
+    type IsStaleFunction = () => boolean;
+
+    const isStale: IsStaleFunction = (): boolean => {
+      return generation !== fetchGenerationRef.current;
+    };
+
     // get item.
     setIsLoading(true);
     props.onLoadingChange?.(true);
@@ -223,6 +246,11 @@ const ModelDetail: <TBaseModel extends BaseModel>(
     try {
       if (props.onBeforeFetch) {
         const model: JSONObject = await props.onBeforeFetch();
+
+        if (isStale()) {
+          return;
+        }
+
         setOnBeforeFetchData(model);
       }
 
@@ -237,6 +265,10 @@ const ModelDetail: <TBaseModel extends BaseModel>(
         },
       });
 
+      if (isStale()) {
+        return;
+      }
+
       if (!item) {
         setError(
           `Cannot load ${(
@@ -253,6 +285,10 @@ const ModelDetail: <TBaseModel extends BaseModel>(
 
       setItem(item);
     } catch (err) {
+      if (isStale()) {
+        return;
+      }
+
       setError(API.getFriendlyMessage(err));
       props.onError?.(API.getFriendlyMessage(err));
     }
@@ -260,11 +296,19 @@ const ModelDetail: <TBaseModel extends BaseModel>(
     props.onLoadingChange?.(false);
   };
 
+  /*
+   * Keyed on the id's string, not the ObjectID. Pages build that ObjectID
+   * inline (Navigation.getLastParamAsObjectID(), ObjectID.getZeroObjectID(),
+   * ProjectUtil.getCurrentProjectId()), each of which returns a new instance
+   * per call - so keying on identity refetched, and flashed the loader, on
+   * every parent re-render, and looped forever on a page whose onItemLoaded
+   * set state. A page that needs fresh data has to say so through refresher.
+   */
   useAsyncEffect(async () => {
     if (props.modelId && props.modelType) {
       await fetchItem();
     }
-  }, [props.modelId, props.refresher, props.modelType]);
+  }, [props.modelId?.toString(), props.refresher, props.modelType]);
 
   if (isLoading) {
     return (
@@ -310,8 +354,9 @@ const ModelDetail: <TBaseModel extends BaseModel>(
     <Detail
       id={props.id}
       item={item}
-      fields={fields}
+      fields={getDetailFields()}
       showDetailsInNumberOfColumns={props.showDetailsInNumberOfColumns}
+      style={props.style}
     />
   );
 };

package/UI/Components/ModelList/ModelList.tsx

@@ -21,7 +21,7 @@ import BadDataException from "../../../Types/Exception/BadDataException";
 import { PromiseVoidFunction } from "../../../Types/FunctionTypes";
 import { JSONArray } from "../../../Types/JSON";
 import ObjectID from "../../../Types/ObjectID";
-import React, { ReactElement, useEffect, useState } from "react";
+import React, { ReactElement, useEffect, useRef, useState } from "react";
 import Select from "../../../Types/BaseDatabase/Select";
 
 export interface ComponentProps<TBaseModel extends BaseModel> {
@@ -76,17 +76,25 @@ const ModelList: <TBaseModel extends BaseModel>(
     props.onSelectChange?.(selectedList);
   }, [selectedList]);
 
+  /*
+   * Bumped by every fetch (and on unmount). A response only lands if no newer
+   * fetch has started since, so a slow earlier request - e.g. one still in
+   * flight when refreshToggle flips - can never overwrite a newer list.
+   */
+  const fetchGenerationRef: React.MutableRefObject<number> = useRef<number>(0);
+
   useEffect(() => {
-    fetchItems().catch((err: Error) => {
-      setError(API.getFriendlyMessage(err));
-    });
-  }, [props.refreshToggle]);
+    return () => {
+      fetchGenerationRef.current++;
+    };
+  }, []);
 
+  // Also runs on mount, so this is the initial fetch too.
   useEffect(() => {
     fetchItems().catch((err: Error) => {
       setError(API.getFriendlyMessage(err));
     });
-  }, []);
+  }, [props.refreshToggle]);
 
   useEffect(() => {
     if (!props.isSearchEnabled) {
@@ -95,6 +103,15 @@ const ModelList: <TBaseModel extends BaseModel>(
   }, [props.isSearchEnabled, modelList]);
 
   const fetchItems: PromiseVoidFunction = async (): Promise<void> => {
+    fetchGenerationRef.current++;
+    const generation: number = fetchGenerationRef.current;
+
+    type IsStaleFunction = () => boolean;
+
+    const isStale: IsStaleFunction = (): boolean => {
+      return generation !== fetchGenerationRef.current;
+    };
+
     setError("");
     setIsLoading(true);
 
@@ -159,9 +176,17 @@ const ModelList: <TBaseModel extends BaseModel>(
         });
       }
 
+      if (isStale()) {
+        return;
+      }
+
       props.onListLoaded?.(listResult.data);
       setModalList(listResult.data);
     } catch (err) {
+      if (isStale()) {
+        return;
+      }
+
       setError(API.getFriendlyMessage(err));
     }
 
@@ -209,12 +234,12 @@ const ModelList: <TBaseModel extends BaseModel>(
         id: item.id,
       });
 
+      // fetchItems clears the loader itself - unless a newer fetch owns it.
       await fetchItems();
     } catch (err) {
       setError(API.getFriendlyMessage(err));
+      setIsLoading(false);
     }
-
-    setIsLoading(false);
   };
 
   return (