@oneuptime/common 12.0.9 → 12.0.11

package/UI/Components/LogsViewer/components/SavedViewsDropdown.tsx

@@ -6,6 +6,13 @@ export interface SavedViewsDropdownProps {
   savedViews: Array<LogsSavedViewOption>;
   selectedSavedViewId?: string | null | undefined;
   onSelect: (viewId: string) => void;
+  /*
+   * Deselect the active view and return the explorer to its unfiltered
+   * default. Without this the checkmark is a one-way door: a view can be
+   * applied but never taken off. Hosts that cannot express "no view" simply
+   * omit it, and both clear affordances below disappear with it.
+   */
+  onClear?: (() => void) | undefined;
   onCreate?: (() => void) | undefined;
   onEdit?: ((viewId: string) => void) | undefined;
   onDelete?: ((viewId: string) => void) | undefined;
@@ -27,6 +34,17 @@ const SavedViewsDropdown: FunctionComponent<SavedViewsDropdownProps> = (
     },
   );
 
+  /*
+   * Clearing is only offered once a view is actually applied — an inert
+   * "Clear view" row sitting above an unfiltered explorer says nothing.
+   */
+  const canClear: boolean = Boolean(props.onClear && selectedView);
+
+  const clearSelection: () => void = (): void => {
+    props.onClear?.();
+    setIsComponentVisible(false);
+  };
+
   return (
     <div className="relative" ref={ref}>
       <button
@@ -48,6 +66,31 @@ const SavedViewsDropdown: FunctionComponent<SavedViewsDropdownProps> = (
 
       {isComponentVisible && (
         <div className="absolute left-0 z-20 mt-2 w-72 rounded-lg border border-gray-200 bg-white shadow-xl">
+          {/*
+           * Explicit way back to the unfiltered explorer. Clicking the
+           * applied view also clears it, but that is only discoverable once
+           * you try it — this row says so out loud.
+           */}
+          {canClear && (
+            <div className="border-b border-gray-100 py-1">
+              <button
+                type="button"
+                className="flex w-full items-center gap-2 px-3 py-1.5 text-left transition-colors hover:bg-gray-50"
+                onClick={clearSelection}
+              >
+                <span
+                  className="w-4 shrink-0 text-center text-xs text-gray-400"
+                  aria-hidden="true"
+                >
+                  ✕
+                </span>
+                <span className="truncate text-sm text-gray-600">
+                  Clear view
+                </span>
+              </button>
+            </div>
+          )}
+
           {/* View list */}
           <div className="max-h-72 overflow-y-auto py-1">
             {props.savedViews.length === 0 && (
@@ -69,13 +112,35 @@ const SavedViewsDropdown: FunctionComponent<SavedViewsDropdownProps> = (
                   <button
                     type="button"
                     className="flex min-w-0 flex-1 items-center gap-2 text-left"
+                    /*
+                     * Spelled out so the row announces as its own name: the
+                     * ✓ is aria-hidden, and the "default" tag reads as a word
+                     * rather than a bare token appended to the view name.
+                     */
+                    aria-label={
+                      view.isDefault ? `${view.name} (default)` : view.name
+                    }
+                    /*
+                     * The checkmark reads as a checkbox, so the row behaves
+                     * like one: clicking the applied view takes it off again
+                     * instead of silently re-applying what is already on.
+                     */
+                    aria-pressed={isSelected}
                     onClick={() => {
+                      if (isSelected && props.onClear) {
+                        clearSelection();
+                        return;
+                      }
+
                       props.onSelect(view.id);
                       setIsComponentVisible(false);
                     }}
                   >
                     {/* Checkmark for selected */}
-                    <span className="w-4 shrink-0 text-center text-xs">
+                    <span
+                      className="w-4 shrink-0 text-center text-xs"
+                      aria-hidden="true"
+                    >
                       {isSelected ? (
                         <span className="text-indigo-600">✓</span>
                       ) : (

package/UI/Components/ModelTable/CustomFieldColumns.tsx

@@ -5,6 +5,7 @@ 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 OneUptimeDate from "../../../Types/Date";
 import { CustomFieldDefinition } from "../../../Types/CustomField/CustomFieldDefinition";
 import {
   CustomFieldDropdownOption,
@@ -200,6 +201,60 @@ export const renderCustomFieldValue: RenderCustomFieldValueFunction = (data: {
     );
   }
 
+  if (
+    definition.customFieldType === CustomFieldType.Date ||
+    definition.customFieldType === CustomFieldType.DateTime
+  ) {
+    /*
+     * Stored as ISO-8601 (the shared date Input normalises every entry through
+     * OneUptimeDate.toString()), which is unreadable in a cell, so it is shown
+     * in the viewer's own timezone — the same rendering Detail gives a date
+     * field, so the list and the item page agree.
+     */
+    const isDateOnly: boolean =
+      definition.customFieldType === CustomFieldType.Date;
+    const raw: string = String(value);
+
+    /*
+     * Validity is decided here rather than by inspecting what the formatter
+     * returned, because the formatter never reports failure: OneUptimeDate
+     * .fromString swallows moment's parse error and falls back to `new
+     * Date(str)`, so junk becomes an Invalid Date and moment renders it as the
+     * literal, truthy string "Invalid date" (and "Invalid date UTC" for the
+     * DateTime variant). A `formatted || raw` fallback therefore never fires.
+     *
+     * Showing the raw text instead matters because the value is not
+     * necessarily one this UI wrote — a project can PUT anything into the
+     * `customFields` bag over the API, and may well have been storing dates as
+     * free text before this field became a date. "Invalid date" hides which
+     * value is wrong; the value itself is the thing that lets someone fix it.
+     */
+    let parsed: Date | null = null;
+
+    try {
+      parsed = OneUptimeDate.fromString(raw);
+    } catch {
+      parsed = null;
+    }
+
+    if (!parsed || isNaN(parsed.getTime())) {
+      return <span>{raw}</span>;
+    }
+
+    try {
+      return (
+        <span>
+          {OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(
+            parsed,
+            isDateOnly,
+          )}
+        </span>
+      );
+    } catch {
+      return <span>{raw}</span>;
+    }
+  }
+
   if (definition.customFieldType === CustomFieldType.MultiSelectDropdown) {
     /*
      * Tolerant on the way out: an older single-select value that was later