@oneuptime/common 10.4.14 → 10.4.15

package/UI/Components/CustomFields/CustomFieldsDetail.tsx

@@ -4,11 +4,13 @@ import { ButtonStyleType } from "../Button/Button";
 import Card from "../Card/Card";
 import ComponentLoader from "../ComponentLoader/ComponentLoader";
 import Detail from "../Detail/Detail";
+import { DropdownOption } from "../Dropdown/Dropdown";
 import ErrorMessage from "../ErrorMessage/ErrorMessage";
 import BasicFormModal from "../FormModal/BasicFormModal";
 import BaseModel, {
   DatabaseBaseModelType,
 } from "../../../Models/DatabaseModels/DatabaseBaseModel/DatabaseBaseModel";
+import CustomFieldType from "../../../Types/CustomField/CustomFieldType";
 import { LIMIT_PER_PROJECT } from "../../../Types/Database/LimitMax";
 import { PromiseVoidFunction } from "../../../Types/FunctionTypes";
 import IconProp from "../../../Types/Icon/IconProp";
@@ -17,6 +19,25 @@ import ObjectID from "../../../Types/ObjectID";
 import React, { FunctionComponent, ReactElement, useState } from "react";
 import useAsyncEffect from "use-async-effect";
 
+const parseDropdownOptions: (value: unknown) => Array<DropdownOption> = (
+  value: unknown,
+): Array<DropdownOption> => {
+  if (typeof value !== "string" || !value) {
+    return [];
+  }
+  return value
+    .split("\n")
+    .map((line: string) => {
+      return line.trim();
+    })
+    .filter((line: string) => {
+      return line.length > 0;
+    })
+    .map((line: string) => {
+      return { label: line, value: line };
+    });
+};
+
 export interface ComponentProps {
   title: string;
   description: string;
@@ -54,6 +75,7 @@ const CustomFieldsDetail: FunctionComponent<ComponentProps> = (
             name: true,
             customFieldType: true,
             description: true,
+            dropdownOptions: true,
           } as any,
           sort: {},
         });
@@ -137,12 +159,20 @@ const CustomFieldsDetail: FunctionComponent<ComponentProps> = (
             id={props.name}
             item={(model as any)["customFields"] || {}}
             fields={schemaList.map((schemaItem: BaseModel) => {
+              const isDropdown: boolean =
+                (schemaItem as any).customFieldType ===
+                  CustomFieldType.Dropdown ||
+                (schemaItem as any).customFieldType ===
+                  CustomFieldType.MultiSelectDropdown;
               return {
                 key: (schemaItem as any).name,
                 title: (schemaItem as any).name,
                 description: (schemaItem as any).description,
                 fieldType: (schemaItem as any).customFieldType,
                 placeholder: "No data entered",
+                dropdownOptions: isDropdown
+                  ? parseDropdownOptions((schemaItem as any).dropdownOptions)
+                  : undefined,
               };
             })}
             showDetailsInNumberOfColumns={1}
@@ -161,6 +191,11 @@ const CustomFieldsDetail: FunctionComponent<ComponentProps> = (
             formProps={{
               initialValues: (model as any)["customFields"] || {},
               fields: schemaList.map((schemaItem: BaseModel) => {
+                const isDropdown: boolean =
+                  (schemaItem as any).customFieldType ===
+                    CustomFieldType.Dropdown ||
+                  (schemaItem as any).customFieldType ===
+                    CustomFieldType.MultiSelectDropdown;
                 return {
                   field: {
                     [(schemaItem as any).name]: true,
@@ -170,6 +205,9 @@ const CustomFieldsDetail: FunctionComponent<ComponentProps> = (
                   fieldType: (schemaItem as any).customFieldType,
                   required: false,
                   placeholder: "",
+                  dropdownOptions: isDropdown
+                    ? parseDropdownOptions((schemaItem as any).dropdownOptions)
+                    : undefined,
                 };
               }),
             }}

package/UI/Components/CustomFields/DropdownOptionsInput.tsx

@@ -0,0 +1,150 @@
+import Button, { ButtonSize, ButtonStyleType } from "../Button/Button";
+import Input, { InputType } from "../Input/Input";
+import IconProp from "../../../Types/Icon/IconProp";
+import React, {
+  FunctionComponent,
+  MutableRefObject,
+  ReactElement,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+
+export interface ComponentProps {
+  initialValue?: string | undefined;
+  onChange?: ((value: string) => void) | undefined;
+  placeholder?: string | undefined;
+  error?: string | undefined;
+  onBlur?: (() => void) | undefined;
+}
+
+const parseValue: (value: string | undefined) => Array<string> = (
+  value: string | undefined,
+): Array<string> => {
+  if (!value) {
+    return [];
+  }
+  return value
+    .split("\n")
+    .map((line: string) => {
+      return line.trim();
+    })
+    .filter((line: string) => {
+      return line.length > 0;
+    });
+};
+
+const serializeValue: (options: Array<string>) => string = (
+  options: Array<string>,
+): string => {
+  return options
+    .map((option: string) => {
+      return option.trim();
+    })
+    .filter((option: string) => {
+      return option.length > 0;
+    })
+    .join("\n");
+};
+
+const DropdownOptionsInput: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  const [options, setOptions] = useState<Array<string>>(() => {
+    const parsed: Array<string> = parseValue(props.initialValue);
+    return parsed.length > 0 ? parsed : [""];
+  });
+
+  const lastEmittedRef: MutableRefObject<string> = useRef<string>(
+    serializeValue(parseValue(props.initialValue)),
+  );
+
+  useEffect(() => {
+    const serialized: string = serializeValue(options);
+    if (serialized !== lastEmittedRef.current) {
+      lastEmittedRef.current = serialized;
+      if (props.onChange) {
+        props.onChange(serialized);
+      }
+    }
+  }, [options]);
+
+  type UpdateAtFn = (index: number, value: string) => void;
+  const updateAt: UpdateAtFn = (index: number, value: string): void => {
+    setOptions((prev: Array<string>) => {
+      const next: Array<string> = [...prev];
+      next[index] = value;
+      return next;
+    });
+  };
+
+  type RemoveAtFn = (index: number) => void;
+  const removeAt: RemoveAtFn = (index: number): void => {
+    setOptions((prev: Array<string>) => {
+      const next: Array<string> = prev.filter((_: string, i: number) => {
+        return i !== index;
+      });
+      return next.length > 0 ? next : [""];
+    });
+  };
+
+  type AddOptionFn = () => void;
+  const addOption: AddOptionFn = (): void => {
+    setOptions((prev: Array<string>) => {
+      return [...prev, ""];
+    });
+  };
+
+  return (
+    <div>
+      <div className="space-y-2">
+        {options.map((value: string, index: number) => {
+          return (
+            <div key={index} className="flex items-center gap-2">
+              <div className="flex h-7 w-7 items-center justify-center rounded-md bg-gray-100 text-xs font-medium text-gray-500">
+                {index + 1}
+              </div>
+              <div className="flex-1">
+                <Input
+                  value={value}
+                  placeholder={props.placeholder || `Option ${index + 1}`}
+                  onChange={(newValue: string) => {
+                    updateAt(index, newValue);
+                  }}
+                  onBlur={() => {
+                    if (props.onBlur) {
+                      props.onBlur();
+                    }
+                  }}
+                  type={InputType.TEXT}
+                />
+              </div>
+              <Button
+                title="Remove"
+                buttonStyle={ButtonStyleType.ICON}
+                icon={IconProp.Trash}
+                onClick={() => {
+                  removeAt(index);
+                }}
+              />
+            </div>
+          );
+        })}
+      </div>
+      <div className="mt-3">
+        <Button
+          title="Add Option"
+          icon={IconProp.Add}
+          buttonSize={ButtonSize.Small}
+          buttonStyle={ButtonStyleType.NORMAL}
+          onClick={addOption}
+        />
+      </div>
+      {props.error ? (
+        <p className="mt-2 text-sm text-red-500">{props.error}</p>
+      ) : null}
+    </div>
+  );
+};
+
+export default DropdownOptionsInput;

package/UI/Components/Detail/Detail.tsx

@@ -113,25 +113,84 @@ const Detail: DetailFunction = <T extends GenericObject>(
     }
 
     return (
-      <span className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-indigo-50 border border-indigo-100 text-indigo-700 text-sm font-medium">
+      <span className="inline-flex items-center gap-x-1.5 px-2 py-1 rounded-md bg-indigo-50 text-indigo-700 text-xs font-medium ring-1 ring-inset ring-indigo-700/10">
         <svg
-          className="w-3.5 h-3.5 text-indigo-500"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
+          className="h-1.5 w-1.5 fill-indigo-500"
+          viewBox="0 0 6 6"
+          aria-hidden="true"
         >
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            strokeWidth={2}
-            d="M9 5l7 7-7 7"
-          />
+          <circle cx={3} cy={3} r={3} />
         </svg>
         {selectedOption.label as string}
       </span>
     );
   };
 
+  type GetMultiSelectDropdownViewerFunction = (
+    data: Array<string | number | boolean> | string,
+    options: Array<DropdownOption | DropdownOptionGroup>,
+    placeholder: string,
+  ) => ReactElement;
+
+  const getMultiSelectDropdownViewer: GetMultiSelectDropdownViewerFunction = (
+    data: Array<string | number | boolean> | string,
+    options: Array<DropdownOption | DropdownOptionGroup>,
+    placeholder: string,
+  ): ReactElement => {
+    const values: Array<string | number | boolean> = Array.isArray(data)
+      ? data
+      : typeof data === "string" && data.length > 0
+        ? [data]
+        : [];
+
+    if (values.length === 0) {
+      return (
+        <span className="text-gray-400 italic text-sm">{placeholder}</span>
+      );
+    }
+
+    const flatOptions: Array<DropdownOption> = (options || []).flatMap(
+      (item: DropdownOption | DropdownOptionGroup) => {
+        if ("options" in item && Array.isArray(item.options)) {
+          return item.options;
+        }
+        return [item as DropdownOption];
+      },
+    );
+
+    return (
+      <div className="flex flex-wrap gap-1.5">
+        {values.map(
+          (value: string | number | boolean, index: number): ReactElement => {
+            const matched: DropdownOption | undefined = flatOptions.find(
+              (option: DropdownOption) => {
+                return option.value === value;
+              },
+            );
+            const label: string = matched
+              ? (matched.label as string)
+              : String(value);
+            return (
+              <span
+                key={`${String(value)}-${index}`}
+                className="inline-flex items-center gap-x-1.5 px-2 py-1 rounded-md bg-indigo-50 text-indigo-700 text-xs font-medium ring-1 ring-inset ring-indigo-700/10"
+              >
+                <svg
+                  className="h-1.5 w-1.5 fill-indigo-500"
+                  viewBox="0 0 6 6"
+                  aria-hidden="true"
+                >
+                  <circle cx={3} cy={3} r={3} />
+                </svg>
+                {label}
+              </span>
+            );
+          },
+        )}
+      </div>
+    );
+  };
+
   type GetDictionaryOfStringsViewerFunction = (
     data: Dictionary<string>,
   ) => ReactElement;
@@ -432,6 +491,14 @@ const Detail: DetailFunction = <T extends GenericObject>(
       );
     }
 
+    if (field.fieldType === FieldType.MultiSelectDropdown) {
+      data = getMultiSelectDropdownViewer(
+        data as Array<string | number | boolean> | string,
+        field.dropdownOptions || [],
+        field.placeholder as string,
+      );
+    }
+
     if (data && field.fieldType === FieldType.HiddenText) {
       data = (
         <HiddenText

package/UI/Components/List/List.tsx

@@ -21,6 +21,11 @@ export interface ComponentProps<T extends GenericObject> {
   onNavigateToPage: (pageNumber: number, itemsOnPage: number) => void;
   currentPageNumber: number;
   totalItemsCount: number;
+  /*
+   * Optional. Forwarded to Pagination. When set, count is a lower
+   * bound and pagination switches to a prev/next-only UI.
+   */
+  hasMore?: boolean | undefined;
   itemsOnPage: number;
   enableDragAndDrop?: boolean | undefined;
   dragDropIndexField?: keyof T | undefined;
@@ -141,6 +146,7 @@ const List: ListFunction = <T extends GenericObject>(
                 pluralLabel={props.pluralLabel}
                 currentPageNumber={props.currentPageNumber}
                 totalItemsCount={props.totalItemsCount}
+                hasMore={props.hasMore}
                 itemsOnPage={props.itemsOnPage}
                 onNavigateToPage={props.onNavigateToPage}
                 isLoading={props.isLoading}

package/UI/Components/ModelTable/BaseModelTable.tsx

@@ -161,6 +161,11 @@ export interface BaseTableProps<
     | undefined
     | ((data: Array<TBaseModel>, totalCount: number) => void);
   cardProps?: CardComponentProps | undefined;
+  /**
+   * Optional content rendered inside the card body, above the table rows.
+   * Useful for in-table filter chips, alerts, etc.
+   */
+  topContent?: ReactElement | undefined;
   helpContent?:
     | {
         title: string;
@@ -240,6 +245,19 @@ export interface BaseTableProps<
 
   saveFilterProps?: SaveFilterProps | undefined;
 
+  /**
+   * Extra serializable state to persist alongside the saved view (e.g. facet
+   * selections from a parent hook). Stored on `TableView.facets`. The shape
+   * is opaque to ModelTable.
+   */
+  currentFacetState?: JSONObject | undefined;
+  /**
+   * Called when a saved view is loaded so the parent can restore its facet
+   * state. `null` means "no saved facet data" (e.g. the user reset to the
+   * default empty view).
+   */
+  onFacetStateRestored?: ((state: JSONObject | null) => void) | undefined;
+
   onFilterApplied?: ((isFilterApplied: boolean) => void) | undefined;
 
   formSummary?: FormSummaryConfig | undefined;
@@ -363,6 +381,13 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
   const [query, setQuery] = useState<Query<TBaseModel>>({});
   const [currentPageNumber, setCurrentPageNumber] = useState<number>(1);
   const [totalItemsCount, setTotalItemsCount] = useState<number>(0);
+  /*
+   * Analytics endpoints (Log/Span/Metric/...) skip COUNT(*) for
+   * performance and instead return `hasMore`. When `hasMore` is
+   * `undefined`, the endpoint emitted an exact `count` and the
+   * pagination falls back to the count-based UI.
+   */
+  const [hasMore, setHasMore] = useState<boolean | undefined>(undefined);
   const [isLoading, setIsLoading] = useState<boolean>(true);
 
   const [error, setError] = useState<string>("");
@@ -1171,7 +1196,16 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
       });
 
       setTotalItemsCount(listResult.count);
+      setHasMore(listResult.hasMore);
       setData(listResult.data);
+      /*
+       * Fire onFetchSuccess so consumers (e.g. the resource-owners hook)
+       * can react to the loaded page. Previously the prop was declared
+       * but never invoked, which broke per-row owner enrichment.
+       */
+      if (props.onFetchSuccess) {
+        props.onFetchSuccess(listResult.data, listResult.count);
+      }
     } catch (err) {
       setError(API.getFriendlyMessage(err));
     }
@@ -1260,6 +1294,7 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
           currentSortBy={sortBy}
           currentItemsOnPage={itemsOnPage}
           currentSortOrder={sortOrder}
+          currentFacetState={props.currentFacetState}
           onViewChange={async (tableView: TableView | null) => {
             setTableView(tableView);
 
@@ -1286,12 +1321,22 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
               if (classicTableFilters.length === 0) {
                 await getFilterDropdownItems();
               }
+
+              if (props.onFacetStateRestored) {
+                props.onFacetStateRestored(
+                  (tableView.facets as JSONObject | undefined) || null,
+                );
+              }
             } else {
               setQuery({});
               setSortBy(null);
               setSortOrder(SortOrder.Descending);
               setItemsOnPage(10);
               setCurrentPageNumber(1);
+
+              if (props.onFacetStateRestored) {
+                props.onFacetStateRestored(null);
+              }
             }
           }}
         />
@@ -1577,6 +1622,17 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
     serializeToTableColumns();
   }, [data]);
 
+  /*
+   * Re-serialize whenever the parent passes a new `columns` reference. The
+   * column array carries `getElement` closures that capture parent state
+   * (e.g. an owners map populated asynchronously). Without this, the cell
+   * renders are frozen at first paint and never see updated state — which
+   * is what made the Owners column stick on "Loading…" forever.
+   */
+  useEffect(() => {
+    serializeToTableColumns();
+  }, [props.columns]);
+
   const setActionSchema: VoidFunction = () => {
     const permissions: Array<Permission> = PermissionUtil.getAllPermissions();
 
@@ -2063,6 +2119,7 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
         dragDropIdField={"_id"}
         dragDropIndexField={props.dragDropIndexField}
         totalItemsCount={totalItemsCount}
+        hasMore={hasMore}
         data={data}
         id={props.id}
         columns={tableColumns}
@@ -2219,6 +2276,7 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
         dragDropIndexField={props.dragDropIndexField}
         isLoading={getTableLoadingState()}
         totalItemsCount={totalItemsCount}
+        hasMore={hasMore}
         data={data}
         id={props.id}
         fields={fields}
@@ -2429,7 +2487,8 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
       })
       .filter((l: SearchLabelOption) => {
         return (
-          lowerPrefix.length === 0 || l.name.toLowerCase().includes(lowerPrefix)
+          lowerPrefix.length === 0 ||
+          l.name.toLowerCase().startsWith(lowerPrefix)
         );
       })
       .slice(0, 8);
@@ -2600,7 +2659,7 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
                 />
               </div>
             )}
-            {showMatchPill && totalItemsCount >= 0 && (
+            {showMatchPill && totalItemsCount >= 0 && hasMore === undefined && (
               <span
                 className="flex-none whitespace-nowrap rounded-full bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-700"
                 title={`${totalItemsCount} ${totalItemsCount === 1 ? "result" : "results"}`}
@@ -2608,6 +2667,17 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
                 {totalItemsCount} {totalItemsCount === 1 ? "match" : "matches"}
               </span>
             )}
+            {showMatchPill && hasMore !== undefined && data.length > 0 && (
+              <span
+                className="flex-none whitespace-nowrap rounded-full bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-700"
+                title={`${data.length}${hasMore ? "+" : ""} ${
+                  data.length === 1 ? "result" : "results"
+                } on this page`}
+              >
+                {data.length}
+                {hasMore ? "+" : ""} {data.length === 1 ? "match" : "matches"}
+              </span>
+            )}
             {searchText.length > 0 || selectedLabels.length > 0 ? (
               <button
                 type="button"
@@ -3055,6 +3125,7 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
               ) : (
                 <></>
               )}
+              {props.topContent || <></>}
               {tableColumns.length > 0 && showAs === ShowAs.Table ? (
                 getTable()
               ) : (
@@ -3081,6 +3152,7 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
           ) : (
             <></>
           )}
+          {!props.cardProps && props.topContent}
           {!props.cardProps && showAs === ShowAs.Table ? getTable() : <></>}
           {!props.cardProps && showAs === ShowAs.List ? getList() : <></>}
         </div>