@oneuptime/common 14.0.1 → 14.0.3

package/UI/Components/ModelTable/BaseModelTable.tsx

@@ -208,6 +208,31 @@ export interface BulkActionProps<T extends BaseModel | AnalyticsBaseModel> {
    * cannot be undone - it cannot know what else goes with it.
    */
   deleteConfirmationWarning?: string | undefined;
+  /**
+   * The word the default bulk Delete uses instead of "Delete", for a table
+   * whose rows are relationships rather than things - "Unlink" on a table of
+   * links, say. When set, the menu item, the confirmation's title and its
+   * sentence all use it ("Unlink 3 Alerts", "Are you sure you want to unlink
+   * 3 alerts?"), and the sentence no longer claims the action cannot be
+   * undone: removing a relationship is undone by adding it again. It is still
+   * the table's delete action - it deletes the selected rows, is gated on the
+   * model's delete permission, and stops a second Delete being added.
+   */
+  deleteVerb?: string | undefined;
+  /* The menu icon to go with deleteVerb. Defaults to the trash can. */
+  deleteIcon?: IconProp | undefined;
+}
+
+/**
+ * What the per-row Delete confirmation says, when the table's own sentence
+ * ("Are you sure you want to delete ...?") is not the whole story - removing a
+ * team membership, say, where the row being deleted is not a thing but a
+ * relationship, and deleting the last one takes the user out of the project.
+ */
+export interface DeleteConfirmation {
+  title?: string | undefined;
+  description: string | ReactElement;
+  submitButtonText?: string | undefined;
 }
 
 export interface BaseTableProps<
@@ -280,6 +305,14 @@ export interface BaseTableProps<
   onItemDeleted?: ((item: TBaseModel) => void) | undefined;
   onBeforeEdit?: ((item: TBaseModel) => Promise<TBaseModel>) | undefined;
   onBeforeDelete?: ((item: TBaseModel) => Promise<TBaseModel>) | undefined;
+  /*
+   * Supplies the per-row Delete confirmation's wording for the row that was
+   * clicked. Runs after onBeforeDelete and before the dialog opens, so it may
+   * fetch; if it throws, the dialog does not open and the row shows the error.
+   */
+  getDeleteConfirmation?:
+    | ((item: TBaseModel) => Promise<DeleteConfirmation>)
+    | undefined;
   onBeforeView?: ((item: TBaseModel) => Promise<TBaseModel>) | undefined;
   sortBy?: keyof TBaseModel | undefined;
   sortOrder?: SortOrder | undefined;
@@ -507,6 +540,25 @@ const getItemLabel: GetItemLabelFunction = (item: unknown): string => {
   return "";
 };
 
+type GetDeleteLabelFunction = (
+  singularName: string | undefined,
+  modelSingularName: string | null | undefined,
+) => string;
+
+/*
+ * What the Delete dialog calls a row when it cannot name it. A table may pass a
+ * blank singularName to keep its create button down to a bare verb - the
+ * user's Teams tab passes " " so its button reads "Invite" - and read verbatim
+ * that turned the dialog into "Are you sure you want to delete this  ?". A
+ * blank name is no name, so it falls through to the model's own.
+ */
+const getDeleteLabel: GetDeleteLabelFunction = (
+  singularName: string | undefined,
+  modelSingularName: string | null | undefined,
+): string => {
+  return singularName?.trim() || modelSingularName?.trim() || "Item";
+};
+
 const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
   props: ComponentProps<TBaseModel>,
 ) => ReactElement = <TBaseModel extends BaseModel | AnalyticsBaseModel>(
@@ -523,6 +575,29 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
 
   const model: TBaseModel = new props.modelType();
 
+  /*
+   * The header's create button, "<verb> <noun>". Translating the two words
+   * separately reads the verb out of context - "Link" comes back as the noun
+   * in many languages, and word order differs - so the whole phrase is looked
+   * up first ("Link Alert") and the word-by-word join is only the fallback
+   * for a phrase with no entry of its own. In English both are the same.
+   */
+  const getCreateButtonTitle: () => string = (): string => {
+    const verb: string = props.createVerb || "Create";
+    const noun: string = props.singularName || model.singularName || "";
+
+    if (noun) {
+      const phrase: string = `${verb} ${noun}`;
+      const translatedPhrase: string = tx(phrase);
+
+      if (translatedPhrase && translatedPhrase !== phrase) {
+        return translatedPhrase;
+      }
+    }
+
+    return `${tx(verb)} ${tx(noun)}`;
+  };
+
   /*
    * How a create / update / delete affordance should be rendered for this
    * viewer. A user without the permission used to simply not see the button,
@@ -547,8 +622,18 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
   const getActionGate: GetActionGateFunction = (
     action: ModelAction,
   ): ActionGate => {
+    /*
+     * A table that calls its delete "Unlink" must not say the locked button
+     * would delete the row's noun ("permission to delete this Alert"). Keyed
+     * on deleteVerb alone: deleteButtonText is also set by tables such as
+     * "Remove from Project", which keep the default "delete" sentence.
+     */
     const result: PermissionGateResult = PermissionGate.check(model, action, {
       singularName: props.singularName || model.singularName || undefined,
+      verb:
+        action === ModelAction.Delete
+          ? props.bulkActions?.deleteVerb?.trim() || undefined
+          : undefined,
     });
 
     if (result.isAllowed) {
@@ -1221,6 +1306,9 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
     useState<TBaseModel | null>(null);
   const [currentDeleteableItem, setCurrentDeleteableItem] =
     useState<TBaseModel | null>(null);
+  // The caller's wording for the open Delete dialog; null means the default.
+  const [deleteConfirmation, setDeleteConfirmation] =
+    useState<DeleteConfirmation | null>(null);
 
   /*
    * A page size that came in on the URL wins over the viewer's own stored
@@ -2404,9 +2492,7 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
       showAs !== ShowAs.OrderedStatesList
     ) {
       headerbuttons.push({
-        title: `${tx(props.createVerb || "Create")} ${tx(
-          props.singularName || model.singularName || "",
-        )}`,
+        title: getCreateButtonTitle(),
         buttonStyle: ButtonStyleType.NORMAL,
         buttonSize: ButtonSize.Normal,
         className: "",
@@ -2866,10 +2952,16 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
 
       const deleteGate: ActionGate = getActionGate(ModelAction.Delete);
 
+      /* The row action wears the same icon as the bulk one it stands for. */
+      const rowDeleteIcon: IconProp =
+        (props.bulkActions?.deleteVerb?.trim() &&
+          props.bulkActions?.deleteIcon) ||
+        IconProp.Trash;
+
       if (props.isDeleteable && deleteGate.show) {
         actionsSchema.push({
           title: tx(props.deleteButtonText || "Delete"),
-          icon: IconProp.Trash,
+          icon: rowDeleteIcon,
           buttonStyleType: ButtonStyleType.DANGER_OUTLINE,
           disabled: deleteGate.disabled,
           tooltip: deleteGate.tooltip,
@@ -2883,6 +2975,11 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
                 item = await props.onBeforeDelete(item);
               }
 
+              setDeleteConfirmation(
+                props.getDeleteConfirmation
+                  ? await props.getDeleteConfirmation(item)
+                  : null,
+              );
               setShowDeleteConfirmModal(true);
               setCurrentDeleteableItem(item);
               onCompleteAction();
@@ -2961,28 +3058,43 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
 
   const getDeleteBulkAction: GetDeleteBulkActionFunction =
     (): BulkActionButtonSchema<TBaseModel> => {
+      /*
+       * A table that names its own verb ("Unlink") removes relationships, not
+       * things, so its sentence drops "This action cannot be undone" - that
+       * would say the opposite of the warning it usually appends.
+       */
+      const deleteVerb: string | undefined =
+        props.bulkActions?.deleteVerb?.trim() || undefined;
+
+      type GetItemLabelFunction = (items: Array<TBaseModel>) => string;
+
+      const getItemLabel: GetItemLabelFunction = (
+        items: Array<TBaseModel>,
+      ): string => {
+        return items.length === 1
+          ? props.singularName || model.singularName || "item"
+          : props.pluralName || model.pluralName || "items";
+      };
+
       return {
-        title: "Delete",
+        title: deleteVerb || "Delete",
         buttonStyleType: ButtonStyleType.DANGER,
-        icon: IconProp.Trash,
+        icon: (deleteVerb && props.bulkActions?.deleteIcon) || IconProp.Trash,
         confirmMessage: (items: Array<TBaseModel>) => {
-          const itemLabel: string =
-            items.length === 1
-              ? props.singularName || model.singularName || "item"
-              : props.pluralName || model.pluralName || "items";
+          const itemLabel: string = getItemLabel(items);
 
           const warning: string = props.bulkActions?.deleteConfirmationWarning
             ? ` ${props.bulkActions.deleteConfirmationWarning}`
             : "";
 
+          if (deleteVerb) {
+            return `Are you sure you want to ${deleteVerb.toLowerCase()} ${items.length} ${itemLabel.toLowerCase()}?${warning}`;
+          }
+
           return `Are you sure you want to delete ${items.length} ${itemLabel}? This action cannot be undone.${warning}`;
         },
         confirmTitle: (items: Array<TBaseModel>) => {
-          const itemLabel: string =
-            items.length === 1
-              ? props.singularName || model.singularName || "item"
-              : props.pluralName || model.pluralName || "items";
-          return `Delete ${items.length} ${itemLabel}`;
+          return `${deleteVerb || "Delete"} ${items.length} ${getItemLabel(items)}`;
         },
         confirmButtonStyleType: ButtonStyleType.DANGER,
         onClick: async ({
@@ -3160,7 +3272,19 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
            * Table derives the row checkboxes from this array being non-empty,
            * so injecting a locked Delete into an otherwise empty array would
            * grow a selection column onto tables that have never had one.
+           *
+           * A page's own button counts as the delete action when it carries
+           * the title the default one would have: "Delete", or the table's
+           * deleteVerb.
            */
+          const deleteActionTitles: Array<string> = ["Delete"];
+          const bulkDeleteVerb: string | undefined =
+            props.bulkActions?.deleteVerb?.trim() || undefined;
+
+          if (bulkDeleteVerb) {
+            deleteActionTitles.push(bulkDeleteVerb);
+          }
+
           const alreadyHasDeleteAction: boolean = sourceButtons.some(
             (
               action:
@@ -3174,8 +3298,9 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
                 typeof action === "object" &&
                 action !== null &&
                 "title" in action &&
-                (action as BulkActionButtonSchema<TBaseModel>).title ===
-                  "Delete"
+                deleteActionTitles.includes(
+                  (action as BulkActionButtonSchema<TBaseModel>).title,
+                )
               ) {
                 return true;
               }
@@ -4691,23 +4816,28 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
 
       {showDeleteConfirmModal && (
         <ConfirmModal
-          title={`Delete ${props.singularName || model.singularName}`}
-          description={((): string => {
-            const label: string = (
-              props.singularName ||
-              model.singularName ||
-              "item"
-            ).toLowerCase();
-            const name: string = getItemLabel(currentDeleteableItem);
-
-            return `Are you sure you want to delete ${
-              name ? `"${name}"` : `this ${label}`
-            }? This action cannot be undone.`;
-          })()}
+          title={
+            deleteConfirmation?.title ||
+            `Delete ${getDeleteLabel(props.singularName, model.singularName)}`
+          }
+          description={
+            deleteConfirmation?.description ||
+            ((): string => {
+              const label: string = getDeleteLabel(
+                props.singularName,
+                model.singularName,
+              ).toLowerCase();
+              const name: string = getItemLabel(currentDeleteableItem);
+
+              return `Are you sure you want to delete ${
+                name ? `"${name}"` : `this ${label}`
+              }? This action cannot be undone.`;
+            })()
+          }
           onClose={() => {
             setShowDeleteConfirmModal(false);
           }}
-          submitButtonText={"Delete"}
+          submitButtonText={deleteConfirmation?.submitButtonText || "Delete"}
           onSubmit={async () => {
             if (currentDeleteableItem && currentDeleteableItem["_id"]) {
               await deleteItem(currentDeleteableItem);

package/UI/Components/ModelTable/Column.ts

@@ -63,6 +63,11 @@ export default interface Columns<
   colSpan?: number | undefined;
   disableSort?: boolean;
   description?: string | undefined;
+  /*
+   * What the column's values mean, in an (i) beside the header (see the
+   * Table Column of the same name). Spread through to the table as is.
+   */
+  headerTooltip?: string | undefined;
   type: FieldType;
   tooltipText?: ((item: TEntity) => string) | undefined;
   actionButtons?: Array<ActionButton>;

package/UI/Components/MonitorGraphs/Uptime.tsx

@@ -45,6 +45,12 @@ export interface ComponentProps {
   uptimeBuckets?: Array<UptimeDayBucket> | undefined;
   /* Statuses by id, so a bucket's durations can be given a name and colour. */
   monitorStatuses?: Array<MonitorStatus> | undefined;
+  /*
+   * The zone uptimeBuckets were cut in, so the bars are drawn on the same
+   * day boundaries. The browser's own zone when absent, which is only right
+   * when the buckets were asked for in the browser's zone (the dashboard).
+   */
+  uptimeTimezone?: string | undefined;
   defaultBarColor: Color;
   incidents?: Array<UptimeBarTooltipIncident> | undefined;
   onBarClick?: (
@@ -118,6 +124,11 @@ const MonitorUptimeGraph: FunctionComponent<ComponentProps> = (
               seconds: duration.seconds,
               color: status?.color || props.defaultBarColor,
               isDowntime: downtimeIds.includes(statusId),
+              /*
+               * So a day painted from this bucket alone takes the colour of
+               * its worst status, as a day painted from timeline rows does.
+               */
+              priority: status?.priority ?? undefined,
             };
           },
         ),
@@ -149,6 +160,7 @@ const MonitorUptimeGraph: FunctionComponent<ComponentProps> = (
       endDate={props.endDate}
       events={events}
       dayReadings={dayReadings}
+      timezone={props.uptimeTimezone}
       defaultBarColor={props.defaultBarColor}
       height={props.height}
       barColorRules={barColorRules}

package/UI/Components/MonitorGraphs/UptimeBarDayModal.tsx

@@ -1,6 +1,7 @@
 import Modal, { ModalWidth } from "../Modal/Modal";
 import UptimeDaySummary, { StatusDuration } from "../Graphs/UptimeDaySummary";
 import OneUptimeDate from "../../../Types/Date";
+import DayUptimeGraphUtil from "../../../Utils/Uptime/DayUptimeGraphUtil";
 import UptimeBarTooltipIncident from "../../../Types/Monitor/UptimeBarTooltipIncident";
 import UptimeHistoryLabels, {
   DefaultUptimeHistoryLabels,
@@ -22,6 +23,11 @@ export interface ComponentProps {
   statusDurations?: Array<StatusDuration> | undefined;
   /* Defaults to English. The status page passes translated strings. */
   labels?: UptimeHistoryLabels | undefined;
+  /*
+   * The zone the day was drawn in, so the dialog names the same day as the
+   * bar that opened it. The browser's own zone when absent.
+   */
+  timezone?: string | undefined;
 }
 
 /*
@@ -36,8 +42,10 @@ export interface ComponentProps {
 const UptimeBarDayModal: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
-  const dateStr: string =
-    OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(props.date, true);
+  const dateStr: string = DayUptimeGraphUtil.formatDayLabel({
+    date: props.date,
+    timezone: props.timezone,
+  });
 
   const labels: UptimeHistoryLabels =
     props.labels || DefaultUptimeHistoryLabels;

package/UI/Components/Page/ModelPage.tsx

@@ -25,6 +25,13 @@ export interface ComponentProps<TBaseModel extends BaseModel> {
   modelId: ObjectID;
   modelNameField: string;
   modelAPI?: typeof ModelAPI | undefined;
+  /*
+   * Bump to read the header again for the same model, after an edit to its
+   * name or labels, say. The page below stays mounted while it reloads, and a
+   * refresh that fails keeps the header already on screen rather than
+   * replacing the whole page with an error.
+   */
+  refreshToken?: number | undefined;
 }
 
 /*
@@ -54,6 +61,42 @@ const ModelPage: <TBaseModel extends BaseModel>(
     null,
   );
 
+  /*
+   * Mirrors loadedHeader, so a read that finishes can see what is on screen
+   * now rather than what was on screen when the read started.
+   */
+  const loadedHeaderRef: MutableRefObject<LoadedModelHeader | null> =
+    useRef<LoadedModelHeader | null>(null);
+
+  type ShowHeaderFunction = (header: LoadedModelHeader) => void;
+
+  const showHeader: ShowHeaderFunction = (header: LoadedModelHeader): void => {
+    loadedHeaderRef.current = header;
+    setLoadedHeader(header);
+  };
+
+  type IsShowingHeaderForFunction = (modelId: string) => boolean;
+
+  /*
+   * Whether a failed read of this model is a refresh of a header already on
+   * screen, which it must then leave alone. A refresh that fails - a network
+   * blip, a timeout - would otherwise replace the title, the labels and the
+   * whole page below them with an error, for a model the reader could see a
+   * moment ago. Only a header that loaded without an error counts, so a page
+   * showing an error still recovers on the next refresh.
+   */
+  const isShowingHeaderFor: IsShowingHeaderForFunction = (
+    modelId: string,
+  ): boolean => {
+    const headerOnScreen: LoadedModelHeader | null = loadedHeaderRef.current;
+
+    return (
+      headerOnScreen !== null &&
+      headerOnScreen.modelId === modelId &&
+      !headerOnScreen.error
+    );
+  };
+
   /*
    * Bumped by every fetch, when the model changes and on unmount. A response
    * only lands while no newer fetch has started, so a slow read of the model
@@ -146,12 +189,25 @@ const ModelPage: <TBaseModel extends BaseModel>(
       return;
     }
 
-    setLoadedHeader(header);
+    if (header.error && isShowingHeaderFor(requestedModelId)) {
+      return;
+    }
+
+    showHeader(header);
   };
 
+  /*
+   * A refreshToken bump reads the same model again. The header keeps its id
+   * stamp while it does, so the page below is never unmounted by a refresh;
+   * only a different id takes the page back to the loader.
+   */
   useEffect(() => {
     fetchItem(props.modelId).catch((err: Error) => {
-      setLoadedHeader({
+      if (isShowingHeaderFor(modelIdString)) {
+        return;
+      }
+
+      showHeader({
         modelId: modelIdString,
         title: props.title,
         labels: [],
@@ -162,7 +218,7 @@ const ModelPage: <TBaseModel extends BaseModel>(
     return () => {
       latestRequestRef.current++;
     };
-  }, [modelIdString]);
+  }, [modelIdString, props.refreshToken]);
 
   /*
    * Decided at render time, not in an effect: the very first render for a

package/UI/Components/Table/TableHeader.tsx

@@ -10,6 +10,7 @@ import { VoidFunction } from "../../../Types/FunctionTypes";
 import GenericObject from "../../../Types/GenericObject";
 import IconProp from "../../../Types/Icon/IconProp";
 import useTranslateValue from "../../Utils/Translation";
+import InfoTooltip from "../Tooltip/InfoTooltip";
 import React, { ReactElement, useEffect, useState } from "react";
 
 export interface ComponentProps<T extends GenericObject> {
@@ -157,10 +158,21 @@ const TableHeader: TableHeaderFunction = <T extends GenericObject>(
               </>
             );
 
+            /*
+             * A header's name is computed from its content, and the (i)
+             * button's "About <title>" would join it - every cell in the
+             * column would be announced as "Last seen About Last seen". The
+             * column is named by its title alone; the (i) keeps its own name.
+             */
+            const headerLabel: string | undefined = column.headerTooltip?.trim()
+              ? translateString(column.title) ?? column.title
+              : undefined;
+
             return (
               <th
                 key={i}
                 scope="col"
+                aria-label={headerLabel}
                 aria-sort={ariaSort}
                 className="text-left text-sm font-semibold text-gray-900"
               >
@@ -172,7 +184,27 @@ const TableHeader: TableHeaderFunction = <T extends GenericObject>(
                  * padding moves onto the button so the clickable area is the
                  * whole cell, exactly as before.
                  */}
-                {canSort ? (
+                {/*
+                 * A header tooltip is its own button, and a button may not
+                 * sit inside the sort button - so for those columns the sort
+                 * button shrinks to its content and the (i) follows it.
+                 */}
+                {canSort && column.headerTooltip?.trim() ? (
+                  <div className="flex w-full items-center">
+                    <button
+                      type="button"
+                      onClick={sortColumn}
+                      className="flex py-3 pl-6 pr-1 cursor-pointer text-left font-semibold text-gray-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-indigo-500"
+                    >
+                      {headerContent}
+                    </button>
+                    <InfoTooltip
+                      label={translateString(column.title) ?? column.title}
+                      text={column.headerTooltip}
+                      className="mr-6 font-normal"
+                    />
+                  </div>
+                ) : canSort ? (
                   <button
                     type="button"
                     onClick={sortColumn}
@@ -181,7 +213,20 @@ const TableHeader: TableHeaderFunction = <T extends GenericObject>(
                     {headerContent}
                   </button>
                 ) : (
-                  <div className={contentClassName}>{headerContent}</div>
+                  <div
+                    className={
+                      column.headerTooltip?.trim()
+                        ? `${contentClassName} items-center`
+                        : contentClassName
+                    }
+                  >
+                    {headerContent}
+                    <InfoTooltip
+                      label={translateString(column.title) ?? column.title}
+                      text={column.headerTooltip}
+                      className="ml-1 font-normal"
+                    />
+                  </div>
                 )}
               </th>
             );

package/UI/Components/Table/Types/Column.ts

@@ -8,6 +8,13 @@ export default interface Column<T extends GenericObject> {
   // Stable identity carried over from the ModelTable column, if it had one.
   id?: string | undefined;
   description?: string | undefined;
+  /*
+   * What the column's values mean, in an (i) tooltip beside the header - for
+   * a metric column whose title is jargon ("p95", "Restarts"). Separate from
+   * `description`, which ModelTable fills from the database column for other
+   * purposes and which is never shown in the header.
+   */
+  headerTooltip?: string | undefined;
   disableSort?: boolean | undefined;
   tooltipText?: ((item: T) => string) | undefined;
   type: FieldType;