@oneuptime/common 11.7.3 → 12.0.0

package/UI/Components/ModelTable/BaseModelTable.tsx

@@ -665,6 +665,66 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
   const [error, setError] = useState<string>("");
   const [tableFilterError, setTableFilterError] = useState<string>("");
 
+  /*
+   * Auto-detect label support from the existing filters array. We look for
+   * the filter whose `filterEntityType` class name is "Label" and reuse its
+   * dropdown wiring (entity type, fetch query, label/value field names) so
+   * search inherits whatever scoping the filter popup already had.
+   *
+   * Computed before the search state below because the `labels` slice of a
+   * restored URL is only meaningful when this is non-null.
+   */
+  type LabelFilterConfig = {
+    fieldKey: string;
+    entityType: any;
+    fetchQuery: any;
+    labelField: string;
+  };
+
+  const labelFilterConfig: LabelFilterConfig | null = useMemo(() => {
+    const filter: Filter<TBaseModel> | undefined = props.filters.find(
+      (f: Filter<TBaseModel>) => {
+        return (
+          f.filterEntityType &&
+          (f.filterEntityType as any).name === "Label" &&
+          f.field &&
+          f.filterDropdownField
+        );
+      },
+    );
+    if (!filter || !filter.field || !filter.filterDropdownField) {
+      return null;
+    }
+    const fieldKey: string | undefined = Object.keys(filter.field)[0];
+    if (!fieldKey) {
+      return null;
+    }
+    return {
+      fieldKey,
+      entityType: filter.filterEntityType,
+      fetchQuery: filter.filterQuery || {},
+      labelField: filter.filterDropdownField.label,
+    };
+  }, [props.filters]);
+
+  /*
+   * The label chips are a feature of the in-search Label filter, so a table
+   * without one has to ignore the URL's `labels` slice entirely.
+   *
+   * Tables that have since moved Labels out to a facet chip (Monitors,
+   * Network Devices) still receive `labels` from older shared/bookmarked
+   * links. Seeding those ids anyway produced a chip the table could neither
+   * name (`availableLabels` is only fetched when there *is* a config) nor
+   * apply (`buildSearchQueryFragment` skips the constraint for the same
+   * reason): a force-expanded search box with a raw-UUID pill sitting above a
+   * completely unfiltered list, re-persisted on every write until the user
+   * clicked its ×. Dropping it here also means the next view write omits the
+   * key, so the URL heals itself.
+   */
+  const restoredLabelIds: Array<string> = labelFilterConfig
+    ? initialUrlState.view.labels || []
+    : [];
+
   const [searchText, setSearchText] = useState<string>(
     initialUrlState.view.search || "",
   );
@@ -673,9 +733,7 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
   );
   const [isSearchFocused, setIsSearchFocused] = useState<boolean>(false);
   const [isSearchExpanded, setIsSearchExpanded] = useState<boolean>(
-    Boolean(
-      initialUrlState.view.search || (initialUrlState.view.labels || []).length,
-    ),
+    Boolean(initialUrlState.view.search || restoredLabelIds.length),
   );
   const searchInputRef: React.RefObject<HTMLInputElement> =
     React.useRef<HTMLInputElement>(null!);
@@ -697,7 +755,7 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
   const [selectedLabels, setSelectedLabels] = useState<
     Array<SearchLabelOption>
   >(() => {
-    return (initialUrlState.view.labels || []).map((id: string) => {
+    return restoredLabelIds.map((id: string) => {
       return { id: id, name: id, color: "#94a3b8" };
     });
   });
@@ -793,43 +851,24 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
   }, [debouncedSearchText, selectedLabelIdsKey]);
 
   /*
-   * Auto-detect label support from the existing filters array. We look for
-   * the filter whose `filterEntityType` class name is "Label" and reuse its
-   * dropdown wiring (entity type, fetch query, label/value field names) so
-   * search inherits whatever scoping the filter popup already had.
+   * `props.filters` is not frozen — a page can rebuild it after mount, and
+   * that is exactly how a Labels filter leaves the popup for the facet bar.
+   * Chips left over from a config that no longer exists are unnameable and
+   * unappliable, so drop them here too rather than only at mount.
    */
-  type LabelFilterConfig = {
-    fieldKey: string;
-    entityType: any;
-    fetchQuery: any;
-    labelField: string;
-  };
-
-  const labelFilterConfig: LabelFilterConfig | null = useMemo(() => {
-    const filter: Filter<TBaseModel> | undefined = props.filters.find(
-      (f: Filter<TBaseModel>) => {
-        return (
-          f.filterEntityType &&
-          (f.filterEntityType as any).name === "Label" &&
-          f.field &&
-          f.filterDropdownField
-        );
-      },
-    );
-    if (!filter || !filter.field || !filter.filterDropdownField) {
-      return null;
-    }
-    const fieldKey: string | undefined = Object.keys(filter.field)[0];
-    if (!fieldKey) {
-      return null;
+  useEffect(() => {
+    if (labelFilterConfig) {
+      return;
     }
-    return {
-      fieldKey,
-      entityType: filter.filterEntityType,
-      fetchQuery: filter.filterQuery || {},
-      labelField: filter.filterDropdownField.label,
-    };
-  }, [props.filters]);
+
+    setSelectedLabels((existing: Array<SearchLabelOption>) => {
+      /*
+       * Same array when there is nothing to clear, so this costs an idle table
+       * no re-render.
+       */
+      return existing.length === 0 ? existing : [];
+    });
+  }, [labelFilterConfig]);
 
   // Fetch labels on first search expansion if this resource supports them.
   useEffect(() => {
@@ -3263,36 +3302,46 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
             />
             {/* Pills + input wrap row */}
             <div className="flex min-w-0 flex-1 flex-wrap items-center gap-1.5">
-              {selectedLabels.map((label: SearchLabelOption) => {
-                return (
-                  <span
-                    key={label.id}
-                    className="inline-flex items-center gap-1 rounded-full bg-gray-50 py-0.5 pl-2 pr-1 text-xs font-medium text-gray-700 ring-1 ring-inset ring-gray-200 transition-all hover:bg-gray-100"
-                    title={`Label: ${label.name}`}
-                  >
+              {/*
+               * Gated on label support as well as on the chips themselves: a
+               * pill this table cannot name, apply or refill is never worth
+               * drawing, whatever left it in state.
+               */}
+              {hasLabelSupport &&
+                selectedLabels.map((label: SearchLabelOption) => {
+                  return (
                     <span
-                      className="h-2 w-2 flex-none rounded-full"
-                      style={{ backgroundColor: label.color }}
-                      aria-hidden="true"
-                    />
-                    <span className="max-w-[8rem] truncate">{label.name}</span>
-                    <button
-                      type="button"
-                      onMouseDown={(e: React.MouseEvent<HTMLButtonElement>) => {
-                        e.preventDefault();
-                      }}
-                      onClick={() => {
-                        removeLabel(label.id);
-                      }}
-                      title="Remove label"
-                      aria-label={`Remove ${label.name}`}
-                      className="ml-0.5 flex-none rounded-full p-0.5 text-gray-400 transition-colors hover:bg-gray-200 hover:text-gray-700"
+                      key={label.id}
+                      className="inline-flex items-center gap-1 rounded-full bg-gray-50 py-0.5 pl-2 pr-1 text-xs font-medium text-gray-700 ring-1 ring-inset ring-gray-200 transition-all hover:bg-gray-100"
+                      title={`Label: ${label.name}`}
                     >
-                      <Icon icon={IconProp.Close} className="h-3 w-3" />
-                    </button>
-                  </span>
-                );
-              })}
+                      <span
+                        className="h-2 w-2 flex-none rounded-full"
+                        style={{ backgroundColor: label.color }}
+                        aria-hidden="true"
+                      />
+                      <span className="max-w-[8rem] truncate">
+                        {label.name}
+                      </span>
+                      <button
+                        type="button"
+                        onMouseDown={(
+                          e: React.MouseEvent<HTMLButtonElement>,
+                        ) => {
+                          e.preventDefault();
+                        }}
+                        onClick={() => {
+                          removeLabel(label.id);
+                        }}
+                        title="Remove label"
+                        aria-label={`Remove ${label.name}`}
+                        className="ml-0.5 flex-none rounded-full p-0.5 text-gray-400 transition-colors hover:bg-gray-200 hover:text-gray-700"
+                      >
+                        <Icon icon={IconProp.Close} className="h-3 w-3" />
+                      </button>
+                    </span>
+                  );
+                })}
               <input
                 ref={searchInputRef}
                 type="text"

package/UI/Components/ModelTable/ColumnCustomizationModal.tsx

@@ -12,6 +12,7 @@ import {
   DragDropContext,
   Draggable,
   DraggableProvided,
+  DraggableStateSnapshot,
   Droppable,
   DroppableProvided,
   DropResult,
@@ -88,6 +89,14 @@ const ColumnCustomizationModal: ColumnCustomizationModalFunction = <
     });
   }, [entries, normalizedSearch, isSearching]);
 
+  /*
+   * Both bulk actions are switched off when they have nothing left to do -
+   * "Show all" with everything already on is a no-op, and "Hide all" cannot go
+   * below the one column that has to stay.
+   */
+  const isEverythingVisible: boolean = visibleCount === entries.length;
+  const isOnlyOneVisible: boolean = visibleCount <= 1;
+
   type ToggleFunction = (id: string, isVisible: boolean) => void;
 
   const toggleColumn: ToggleFunction = (
@@ -183,6 +192,37 @@ const ColumnCustomizationModal: ColumnCustomizationModalFunction = <
     });
   };
 
+  type GetBulkActionFunction = (data: {
+    title: string;
+    dataTestId: string;
+    disabled: boolean;
+    onClick: () => void;
+  }) => ReactElement;
+
+  /*
+   * Rendered as plain buttons rather than through <Button>: these sit inside
+   * the body as a compact pair, and the shared button styles are sized for a
+   * footer.
+   */
+  const getBulkAction: GetBulkActionFunction = (data: {
+    title: string;
+    dataTestId: string;
+    disabled: boolean;
+    onClick: () => void;
+  }): ReactElement => {
+    return (
+      <button
+        type="button"
+        data-testid={data.dataTestId}
+        disabled={data.disabled}
+        onClick={data.onClick}
+        className="rounded-md px-2 py-1 text-xs font-medium text-gray-600 transition-colors hover:bg-white hover:text-gray-900 hover:shadow-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 disabled:cursor-not-allowed disabled:text-gray-300 disabled:hover:bg-transparent disabled:hover:shadow-none"
+      >
+        {data.title}
+      </button>
+    );
+  };
+
   type GetRowFunction = (data: {
     entry: CustomizableColumn<TBaseModel>;
     index: number;
@@ -199,27 +239,50 @@ const ColumnCustomizationModal: ColumnCustomizationModalFunction = <
     const isOnlyVisibleColumn: boolean = entry.isVisible && visibleCount <= 1;
 
     return (
-      <div className="flex items-center gap-3 px-3 py-2">
-        {data.dragHandle || <div className="w-4" />}
+      <div className="group flex items-center gap-2 px-3 py-2 transition-colors hover:bg-gray-50">
+        {data.dragHandle || <div className="w-5 flex-none" />}
 
-        <div className="flex-1 min-w-0">
+        <div className="min-w-0 flex-1">
           <CheckboxElement
             value={entry.isVisible}
             disabled={isOnlyVisibleColumn}
             dataTestId={`column-toggle-${entry.id}`}
-            title={entry.column.title}
+            outerDivClassName="relative flex items-center"
+            title={
+              <span
+                className={
+                  entry.isVisible
+                    ? "text-sm font-medium text-gray-900"
+                    : "text-sm font-normal text-gray-400"
+                }
+              >
+                {entry.column.title}
+              </span>
+            }
             onChange={(value: boolean) => {
               toggleColumn(entry.id, value);
             }}
           />
         </div>
 
-        <div className="flex flex-none items-center gap-1">
+        {isOnlyVisibleColumn && (
+          <span
+            className="flex-none rounded-full bg-gray-100 px-2 py-0.5 text-[11px] font-medium text-gray-500"
+            data-testid={`column-locked-${entry.id}`}
+          >
+            Required
+          </span>
+        )}
+
+        <div className="flex flex-none items-center gap-0.5">
           <Button
             buttonSize={ButtonSize.Small}
             buttonStyle={ButtonStyleType.ICON}
             icon={IconProp.ChevronUp}
             title=""
+            tooltip="Move up"
+            ariaLabel={`Move ${entry.column.title} up`}
+            className="text-gray-400 hover:bg-gray-200 hover:text-gray-700 disabled:text-gray-200 disabled:hover:bg-transparent"
             dataTestId={`column-move-up-${entry.id}`}
             disabled={isSearching || index === 0}
             onClick={() => {
@@ -231,6 +294,9 @@ const ColumnCustomizationModal: ColumnCustomizationModalFunction = <
             buttonStyle={ButtonStyleType.ICON}
             icon={IconProp.ChevronDown}
             title=""
+            tooltip="Move down"
+            ariaLabel={`Move ${entry.column.title} down`}
+            className="text-gray-400 hover:bg-gray-200 hover:text-gray-700 disabled:text-gray-200 disabled:hover:bg-transparent"
             dataTestId={`column-move-down-${entry.id}`}
             disabled={isSearching || index === entries.length - 1}
             onClick={() => {
@@ -248,10 +314,13 @@ const ColumnCustomizationModal: ColumnCustomizationModalFunction = <
     if (shownEntries.length === 0) {
       return (
         <div
-          className="px-3 py-6 text-center text-sm text-gray-400"
+          className="flex flex-col items-center gap-2 px-3 py-10 text-center"
           data-testid="column-customization-no-results"
         >
-          No columns match &quot;{searchText}&quot;.
+          <Icon icon={IconProp.Search} className="h-6 w-6 text-gray-300" />
+          <p className="text-sm text-gray-500">
+            No columns match &quot;{searchText}&quot;.
+          </p>
         </div>
       );
     }
@@ -287,6 +356,7 @@ const ColumnCustomizationModal: ColumnCustomizationModalFunction = <
                 ref={droppableProvided.innerRef}
                 {...droppableProvided.droppableProps}
                 className="divide-y divide-gray-100"
+                aria-label="Columns"
               >
                 {shownEntries.map(
                   (entry: CustomizableColumn<TBaseModel>, index: number) => {
@@ -296,12 +366,19 @@ const ColumnCustomizationModal: ColumnCustomizationModalFunction = <
                         index={index}
                         key={entry.id}
                       >
-                        {(draggableProvided: DraggableProvided) => {
+                        {(
+                          draggableProvided: DraggableProvided,
+                          draggableSnapshot: DraggableStateSnapshot,
+                        ) => {
                           return (
                             <div
                               ref={draggableProvided.innerRef}
                               {...draggableProvided.draggableProps}
-                              className="bg-white"
+                              className={
+                                draggableSnapshot.isDragging
+                                  ? "rounded-md bg-white shadow-lg ring-1 ring-gray-200"
+                                  : "bg-white"
+                              }
                             >
                               {getRowContents({
                                 entry,
@@ -309,7 +386,7 @@ const ColumnCustomizationModal: ColumnCustomizationModalFunction = <
                                 dragHandle: (
                                   <div
                                     {...draggableProvided.dragHandleProps}
-                                    className="flex-none cursor-grab text-gray-400 hover:text-gray-600 active:cursor-grabbing"
+                                    className="flex w-5 flex-none cursor-grab justify-center text-gray-300 transition-colors group-hover:text-gray-500 active:cursor-grabbing"
                                     aria-label={`Drag to reorder ${entry.column.title}`}
                                     title="Drag to reorder"
                                   >
@@ -344,7 +421,6 @@ const ColumnCustomizationModal: ColumnCustomizationModalFunction = <
         "Choose which columns to show and drag them into the order you want."
       }
       modalWidth={ModalWidth.Medium}
-      icon={IconProp.TableCells}
       submitButtonText="Save"
       closeButtonText="Cancel"
       onClose={props.onClose}
@@ -357,8 +433,9 @@ const ColumnCustomizationModal: ColumnCustomizationModalFunction = <
         ) : (
           <Button
             title="Reset to default"
+            icon={IconProp.Refresh}
             buttonSize={ButtonSize.Normal}
-            buttonStyle={ButtonStyleType.OUTLINE}
+            buttonStyle={ButtonStyleType.NORMAL}
             dataTestId="column-customization-reset"
             onClick={() => {
               props.onReset();
@@ -368,50 +445,76 @@ const ColumnCustomizationModal: ColumnCustomizationModalFunction = <
       }
     >
       <div className="space-y-3" data-testid="column-customization-modal">
-        <div className="flex items-center justify-between gap-3">
-          <div className="flex-1">
-            <Input
-              type={InputType.TEXT}
-              placeholder="Search columns..."
-              value={searchText}
-              dataTestId="column-customization-search"
-              onChange={(value: string) => {
-                setSearchText(value);
-              }}
-            />
+        <div className="relative">
+          <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
+            <Icon icon={IconProp.Search} className="h-4 w-4 text-gray-400" />
           </div>
-          <div className="flex flex-none gap-2">
-            <Button
-              title="Show all"
-              buttonSize={ButtonSize.Small}
-              buttonStyle={ButtonStyleType.OUTLINE}
-              dataTestId="column-customization-show-all"
-              onClick={() => {
-                setAllVisible(true);
-              }}
-            />
-            <Button
-              title="Hide all"
-              buttonSize={ButtonSize.Small}
-              buttonStyle={ButtonStyleType.OUTLINE}
-              dataTestId="column-customization-hide-all"
+          <Input
+            type={InputType.TEXT}
+            placeholder="Search columns..."
+            value={searchText}
+            dataTestId="column-customization-search"
+            outerDivClassName="w-full"
+            className="block w-full rounded-md border border-gray-300 bg-white py-2 pl-9 pr-9 text-sm placeholder-gray-400 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
+            onChange={(value: string) => {
+              setSearchText(value);
+            }}
+          />
+          {searchText.length > 0 && (
+            <button
+              type="button"
+              aria-label="Clear search"
+              title="Clear search"
+              data-testid="column-customization-search-clear"
               onClick={() => {
-                setAllVisible(false);
+                setSearchText("");
               }}
-            />
-          </div>
+              className="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-400 transition-colors hover:text-gray-600 focus:outline-none focus-visible:text-gray-600"
+            >
+              <Icon icon={IconProp.Close} className="h-4 w-4" />
+            </button>
+          )}
         </div>
 
-        <div
-          className="text-xs text-gray-500"
-          data-testid="column-customization-count"
-        >
-          {visibleCount} of {entries.length} columns shown
+        <div className="flex items-center justify-between gap-3">
+          <div
+            className="text-xs font-medium text-gray-500"
+            data-testid="column-customization-count"
+          >
+            {visibleCount} of {entries.length} columns shown
+          </div>
+          <div className="flex flex-none items-center gap-1 rounded-md bg-gray-50 p-0.5 ring-1 ring-inset ring-gray-200">
+            {getBulkAction({
+              title: "Show all",
+              dataTestId: "column-customization-show-all",
+              disabled: isEverythingVisible,
+              onClick: () => {
+                setAllVisible(true);
+              },
+            })}
+            {getBulkAction({
+              title: "Hide all",
+              dataTestId: "column-customization-hide-all",
+              disabled: isOnlyOneVisible,
+              onClick: () => {
+                setAllVisible(false);
+              },
+            })}
+          </div>
         </div>
 
-        <div className="rounded-md border border-gray-200 overflow-hidden">
+        <div className="max-h-80 overflow-y-auto overscroll-contain rounded-md border border-gray-200 bg-white">
           {getList()}
         </div>
+
+        <p
+          className="text-xs text-gray-400"
+          data-testid="column-customization-hint"
+        >
+          {isSearching
+            ? "Clear the search to reorder columns."
+            : "Drag a row, or use the arrows, to change the column order."}
+        </p>
       </div>
     </Modal>
   );

package/UI/Components/ModelTable/CustomFieldColumns.tsx

@@ -1,9 +1,14 @@
 import Column from "./Column";
 import Columns from "./Columns";
 import FieldType from "../Types/FieldType";
+import DropdownValueBadge from "../Dropdown/DropdownValueBadge";
 import AnalyticsBaseModel from "../../../Models/AnalyticsModels/AnalyticsBaseModel/AnalyticsBaseModel";
 import BaseModel from "../../../Models/DatabaseModels/DatabaseBaseModel/DatabaseBaseModel";
 import CustomFieldType from "../../../Types/CustomField/CustomFieldType";
+import {
+  CustomFieldDropdownOption,
+  parseCustomFieldDropdownOptions,
+} from "../../../Types/CustomField/CustomFieldDropdownOption";
 import { JSONObject } from "../../../Types/JSON";
 import React, { ReactElement } from "react";
 
@@ -51,27 +56,17 @@ export const CustomFieldsColumnKey: string = "customFields";
 
 export type ParseDropdownOptionsFunction = (
   value: string | undefined | null,
-) => Array<string>;
+) => Array<CustomFieldDropdownOption>;
 
 /*
- * Dropdown options are stored as one option per line, the same format the
- * settings page writes.
+ * Kept as an exported wrapper for callers and tests that historically used
+ * this module's parser. The shared parser understands both legacy newline
+ * values and the colored JSON representation.
  */
 export const parseDropdownOptions: ParseDropdownOptionsFunction = (
   value: string | undefined | null,
-): Array<string> => {
-  if (typeof value !== "string" || !value) {
-    return [];
-  }
-
-  return value
-    .split("\n")
-    .map((line: string) => {
-      return line.trim();
-    })
-    .filter((line: string) => {
-      return line.length > 0;
-    });
+): Array<CustomFieldDropdownOption> => {
+  return parseCustomFieldDropdownOptions(value);
 };
 
 export type GetCustomFieldDefinitionsFunction = (
@@ -151,26 +146,19 @@ export const getCustomFieldValue: GetCustomFieldValueFunction = (
   return (customFields as JSONObject)[name];
 };
 
-type BadgeFunction = (data: { label: string; key: string }) => ReactElement;
+type BadgeFunction = (data: {
+  label: string;
+  key: string;
+  color?: string | undefined;
+}) => ReactElement;
 
 const badge: BadgeFunction = (data: {
   label: string;
   key: string;
+  color?: string | undefined;
 }): ReactElement => {
   return (
-    <span
-      key={data.key}
-      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>
-      {data.label}
-    </span>
+    <DropdownValueBadge key={data.key} label={data.label} color={data.color} />
   );
 };
 
@@ -235,17 +223,38 @@ export const renderCustomFieldValue: RenderCustomFieldValueFunction = (data: {
       return empty;
     }
 
+    const configuredOptions: Array<CustomFieldDropdownOption> =
+      parseDropdownOptions(definition.dropdownOptions);
+
     return (
       <div className="flex flex-wrap gap-1.5">
         {labels.map((label: string, index: number) => {
-          return badge({ label, key: `${label}-${index}` });
+          const option: CustomFieldDropdownOption | undefined =
+            configuredOptions.find(
+              (configuredOption: CustomFieldDropdownOption) => {
+                return configuredOption.value === label;
+              },
+            );
+
+          return badge({
+            label,
+            key: `${label}-${index}`,
+            color: option?.color,
+          });
         })}
       </div>
     );
   }
 
   if (definition.customFieldType === CustomFieldType.Dropdown) {
-    return badge({ label: String(value), key: String(value) });
+    const label: string = String(value);
+    const option: CustomFieldDropdownOption | undefined = parseDropdownOptions(
+      definition.dropdownOptions,
+    ).find((configuredOption: CustomFieldDropdownOption) => {
+      return configuredOption.value === label;
+    });
+
+    return badge({ label, key: label, color: option?.color });
   }
 
   if (Array.isArray(value)) {