@oneuptime/common 11.7.1 → 11.7.3

package/Types/Workspace/NotificationRules/NotificationRuleCondition.ts

@@ -9,7 +9,7 @@ import ScheduledMaintenanceState from "../../../Models/DatabaseModels/ScheduledM
 import { DropdownOption } from "../../../UI/Components/Dropdown/Dropdown";
 import DropdownUtil from "../../../UI/Utils/Dropdown";
 import MonitorType from "../../Monitor/MonitorType";
-import WorkspaceType from "../WorkspaceType";
+import WorkspaceType, { getWorkspaceTypeDisplayName } from "../WorkspaceType";
 import NotificationRuleEventType from "./EventType";
 import IncidentNotificationRule from "./NotificationRuleTypes/IncidentNotificationRule";
 
@@ -108,32 +108,47 @@ export class NotificationRuleConditionUtil {
       eventType === NotificationRuleEventType.IncidentEpisode ||
       eventType === NotificationRuleEventType.ScheduledMaintenance
     ) {
-      // either create slack channel or select existing one should be active.
+      // either create a channel, post to an existing channel, or post to a chat.
+
+      const workspaceDisplayName: string =
+        getWorkspaceTypeDisplayName(workspaceType);
 
       if (
         !notificationRule.shouldCreateNewChannel &&
-        !notificationRule.shouldPostToExistingChannel
+        !notificationRule.shouldPostToExistingChannel &&
+        !notificationRule.shouldPostToExistingChat
       ) {
-        return (
-          "Please select either create slack channel or post to existing " +
-          workspaceType +
-          " channel"
-        );
+        return workspaceType === WorkspaceType.MicrosoftTeams
+          ? `Please select a destination: create a ${workspaceDisplayName} channel, post to an existing ${workspaceDisplayName} channel, or post to an existing ${workspaceDisplayName} chat`
+          : `Please select a destination: create a ${workspaceDisplayName} channel or post to an existing ${workspaceDisplayName} channel`;
       }
 
       if (notificationRule.shouldPostToExistingChannel) {
         if (!notificationRule.existingChannelNames?.trim()) {
-          return "Existing " + workspaceType + " channel name is required";
+          return (
+            "Existing " + workspaceDisplayName + " channel name is required"
+          );
         }
       }
 
       if (notificationRule.shouldCreateNewChannel) {
         if (!notificationRule.newChannelTemplateName?.trim()) {
-          return "New " + workspaceType + " channel name is required";
+          return "New " + workspaceDisplayName + " channel name is required";
         }
       }
     }
 
+    if (notificationRule.shouldPostToExistingChat) {
+      if (
+        !notificationRule.existingChatIds ||
+        notificationRule.existingChatIds.length === 0
+      ) {
+        const workspaceDisplayName: string =
+          getWorkspaceTypeDisplayName(workspaceType);
+        return `Please select at least one ${workspaceDisplayName} chat to post to. If no chats are listed, add the OneUptime app to a chat in ${workspaceDisplayName} first.`;
+      }
+    }
+
     return null;
   }
 

package/Types/Workspace/WorkspaceMessagePayload.ts

@@ -106,4 +106,5 @@ export default interface WorkspaceMessagePayload {
   messageBlocks: Array<WorkspaceMessageBlock>; // Message to add to blocks.
   workspaceType: WorkspaceType;
   teamId?: string | undefined; // Team ID for Microsoft Teams
+  chatIds?: Array<string> | undefined; // Microsoft Teams chat ids (group / personal chats) to send message to.
 }

package/UI/Components/BulkUpdate/BulkUpdateForm.tsx

@@ -67,6 +67,21 @@ export interface ComponentProps<T extends GenericObject> {
   onActionStart?: (() => void) | undefined;
   onActionEnd?: (() => void) | undefined;
   itemToString?: ((item: T) => string) | undefined;
+  /*
+   * Selecting everything is a multi-request fetch that can fail. Surfacing it
+   * here - next to the button the user pressed - keeps the message alive; the
+   * table body's own error is wiped by the next refresh.
+   */
+  errorMessage?: string | undefined;
+  isSelectingAllItems?: boolean | undefined;
+  /*
+   * Set when the selection hit the per-selection ceiling and there are more
+   * matching rows than were selected. `totalMatchingItemsCount` is how many
+   * rows actually matched, so the warning can name real numbers instead of
+   * inferring truncation from the selected count.
+   */
+  isSelectionTruncated?: boolean | undefined;
+  totalMatchingItemsCount?: number | undefined;
 }
 
 const isDangerStyle: (style: ButtonStyleType) => boolean = (
@@ -317,9 +332,16 @@ const BulkUpdateForm: <T extends GenericObject>(
     menuChildren.push(renderMenuItem(button, safeButtons.length + index));
   });
 
-  const showLimitWarning: boolean =
-    props.isAllItemsSelected &&
-    props.selectedItems.length === LIMIT_PER_PROJECT;
+  /*
+   * Driven by what the fetch actually reported rather than by
+   * `selectedItems.length === LIMIT_PER_PROJECT`, which both cried wolf on a
+   * project holding exactly the ceiling and stayed silent whenever a partial
+   * selection came back one row short of it.
+   */
+  const showLimitWarning: boolean = Boolean(props.isSelectionTruncated);
+
+  const totalMatchingItemsCount: number =
+    props.totalMatchingItemsCount || props.selectedItems.length;
 
   return (
     <div>
@@ -345,13 +367,33 @@ const BulkUpdateForm: <T extends GenericObject>(
               {!props.isAllItemsSelected && (
                 <button
                   type="button"
+                  disabled={props.isSelectingAllItems}
                   onClick={() => {
+                    if (props.isSelectingAllItems) {
+                      // the fetch is paged, so it must not be re-entrant.
+                      return;
+                    }
                     props.onSelectAllClick();
                   }}
-                  className="inline-flex items-center gap-1.5 rounded-lg border border-gray-300 bg-white px-3 py-1.5 text-sm font-medium text-gray-700 shadow-sm hover:bg-indigo-50 hover:border-indigo-300 hover:text-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition-all duration-150 cursor-pointer select-none"
+                  className={`inline-flex items-center gap-1.5 rounded-lg border border-gray-300 bg-white px-3 py-1.5 text-sm font-medium text-gray-700 shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition-all duration-150 select-none ${
+                    props.isSelectingAllItems
+                      ? "opacity-50 cursor-not-allowed"
+                      : "cursor-pointer hover:bg-indigo-50 hover:border-indigo-300 hover:text-indigo-700"
+                  }`}
                 >
-                  <Icon icon={IconProp.CheckCircle} className="h-3.5 w-3.5" />
-                  <span>Select All {props.pluralLabel}</span>
+                  <Icon
+                    icon={
+                      props.isSelectingAllItems
+                        ? IconProp.Spinner
+                        : IconProp.CheckCircle
+                    }
+                    className="h-3.5 w-3.5"
+                  />
+                  <span>
+                    {props.isSelectingAllItems
+                      ? `Selecting All ${props.pluralLabel}...`
+                      : `Select All ${props.pluralLabel}`}
+                  </span>
                 </button>
               )}
 
@@ -393,8 +435,21 @@ const BulkUpdateForm: <T extends GenericObject>(
 
           {showLimitWarning && (
             <div className="mt-2 text-xs text-gray-500">
-              You can only select {LIMIT_PER_PROJECT} {props.pluralLabel} at a
-              time. This is for performance reasons.
+              Selected {props.selectedItems.length.toLocaleString()} of{" "}
+              {totalMatchingItemsCount.toLocaleString()} matching{" "}
+              {props.pluralLabel}. You can only select{" "}
+              {LIMIT_PER_PROJECT.toLocaleString()} {props.pluralLabel} at a
+              time, for performance reasons, so bulk actions will apply to the
+              selected {props.selectedItems.length.toLocaleString()} only.
+            </div>
+          )}
+
+          {props.errorMessage && (
+            <div
+              role="alert"
+              className="mt-2 rounded-lg bg-red-50 p-3 text-sm text-red-800"
+            >
+              {props.errorMessage}
             </div>
           )}
         </div>

package/UI/Components/CodeEditor/CodeEditor.tsx

@@ -1,4 +1,5 @@
 import Editor from "@monaco-editor/react";
+import configureMonacoLoader from "./MonacoLoader";
 import CodeType from "../../../Types/Code/CodeType";
 import MarkdownUtil from "../../Utils/Markdown";
 import { Theme, useTheme } from "../../Utils/Theme";
@@ -10,6 +11,8 @@ import React, {
   useState,
 } from "react";
 
+configureMonacoLoader();
+
 export interface ComponentProps {
   initialValue?: undefined | string;
   onClick?: undefined | (() => void);

package/UI/Components/CodeEditor/MonacoLoader.ts

@@ -0,0 +1,36 @@
+import { loader } from "@monaco-editor/react";
+
+/**
+ * Points Monaco at the copy of its runtime that ships with the app.
+ *
+ * @monaco-editor/loader otherwise fetches it from cdn.jsdelivr.net at runtime,
+ * which never resolves on an air-gapped install and leaves every code editor
+ * stuck on "Loading...". The path is baked in by the build, which is the only
+ * place that knows where this service is mounted.
+ *
+ * The path has to be absolute. Monaco loads its language services in a worker
+ * spun up from a blob: URL, and a blob worker has no base to resolve a
+ * root-relative path against - it fetches "/dashboard/assets/monaco/vs/..." and
+ * throws "Failed to parse URL". The editor still renders, so the only visible
+ * symptom is that JSON/TypeScript validation and IntelliSense quietly stop
+ * working. The CDN default never hit this because it was already absolute.
+ *
+ * The monaco-editor version in Common/package.json is pinned exactly, because
+ * the loader resolves init() with whatever the AMD module `vs/editor/editor.main`
+ * exports and that shape is not stable across releases - 0.53 and 0.54 nest the
+ * API under `exports.m`, which leaves `monaco.editor` undefined and makes every
+ * editor throw instead of mount. MonacoRuntime.test.ts guards the pin.
+ */
+export default function configureMonacoLoader(): void {
+  const assetPath: string | undefined = process.env["MONACO_ASSET_PATH"];
+
+  if (!assetPath) {
+    return;
+  }
+
+  loader.config({
+    paths: {
+      vs: new URL(assetPath, window.location.origin).href,
+    },
+  });
+}

package/UI/Components/Forms/ModelForm.tsx

@@ -641,27 +641,50 @@ const ModelForm: <TBaseModel extends BaseModel>(
     return fields;
   };
 
+  /*
+   * Keyed on the id (as a string - ObjectID identity changes every render)
+   * so a form that mounts before its id is known still fetches once it
+   * arrives. It used to run only on mount, which left an Update form showing
+   * blank defaults: submitting that silently wrote empty values - and false
+   * for every Toggle, since BasicForm defaults untouched toggles to false -
+   * over the real record.
+   */
   useAsyncEffect(async () => {
-    if (
-      props.modelIdToEdit &&
-      props.formType === FormType.Update &&
-      !props.doNotFetchExistingModel
-    ) {
-      // get item.
-      setLoading(true);
-      setIsFetching(true);
-      setError("");
-      try {
-        await fetchItem();
-      } catch (err) {
-        setError(API.getFriendlyMessage(err));
-        props.onError?.(API.getFriendlyMessage(err));
-      }
+    if (props.formType !== FormType.Update || props.doNotFetchExistingModel) {
+      return;
+    }
+
+    if (!props.modelIdToEdit) {
+      /*
+       * Without an id there is nothing to prefill and nothing to update, so
+       * say so rather than rendering an empty form that looks editable.
+       *
+       * Deliberately not props.onError: ModelFormModal unmounts the form on
+       * that, and this state is recoverable - the effect re-runs and clears
+       * the message as soon as the id arrives.
+       */
+      setError(
+        `Cannot edit this ${(
+          model.singularName || "item"
+        ).toLowerCase()} yet because it is still loading. Please try again in a moment.`,
+      );
+      return;
+    }
 
-      setLoading(false);
-      setIsFetching(false);
+    // get item.
+    setLoading(true);
+    setIsFetching(true);
+    setError("");
+    try {
+      await fetchItem();
+    } catch (err) {
+      setError(API.getFriendlyMessage(err));
+      props.onError?.(API.getFriendlyMessage(err));
     }
-  }, []);
+
+    setLoading(false);
+    setIsFetching(false);
+  }, [props.modelIdToEdit?.toString()]);
 
   type GetMiscDataPropsFunction = (
     values: FormValues<JSONObject>,

package/UI/Components/MasterPage/MasterPage.tsx

@@ -27,6 +27,70 @@ const MasterPage: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
   const [isOnline, setIsOnline] = React.useState(true);
+  const topSectionRef: React.RefObject<HTMLDivElement> =
+    React.useRef<HTMLDivElement>(null);
+
+  /*
+   * Publish the sticky top section's height as --app-header-height so anything
+   * that sticks underneath it (the side menu, for example) can offset itself by
+   * the real header instead of guessing and ending up tucked behind it. The
+   * height is not a constant — it changes when the navbar is hidden, when the
+   * header wraps on narrow viewports and when top alerts appear — so keep it in
+   * sync rather than measuring once.
+   */
+  React.useLayoutEffect(() => {
+    const setHeaderHeight: (height: number) => void = (
+      height: number,
+    ): void => {
+      document.documentElement.style.setProperty(
+        "--app-header-height",
+        `${height}px`,
+      );
+    };
+
+    const element: HTMLDivElement | null = topSectionRef.current;
+
+    if (!element || props.makeTopSectionUnstick) {
+      // Nothing is overlaying the content, so no offset is needed.
+      setHeaderHeight(0);
+      return undefined;
+    }
+
+    const measure: () => void = (): void => {
+      setHeaderHeight(element.offsetHeight);
+    };
+
+    measure();
+
+    /*
+     * ResizeObserver is missing in jsdom and in older browsers, so fall back to
+     * resize events there — less precise, but the header only really changes
+     * height when the viewport does.
+     */
+    if (typeof ResizeObserver === "undefined") {
+      window.addEventListener("resize", measure);
+
+      return () => {
+        window.removeEventListener("resize", measure);
+        document.documentElement.style.removeProperty("--app-header-height");
+      };
+    }
+
+    const observer: ResizeObserver = new ResizeObserver(measure);
+    observer.observe(element);
+
+    return () => {
+      observer.disconnect();
+      document.documentElement.style.removeProperty("--app-header-height");
+    };
+  }, [
+    props.makeTopSectionUnstick,
+    props.hideHeader,
+    props.isLoading,
+    props.error,
+    props.disableMainContentWrapper,
+    isOnline,
+  ]);
 
   if (props.isLoading) {
     return (
@@ -62,6 +126,7 @@ const MasterPage: FunctionComponent<ComponentProps> = (
             </a>
           )}
           <div
+            ref={topSectionRef}
             className={props.makeTopSectionUnstick ? "" : "sticky top-0 z-10"}
           >
             <TopSection

package/UI/Components/ModelDetail/CardModelDetail.tsx

@@ -12,6 +12,8 @@ import Fields from "../Forms/Types/Fields";
 import { FormStep } from "../Forms/Types/FormStep";
 import { ModalWidth } from "../Modal/Modal";
 import ModelFormModal from "../ModelFormModal/ModelFormModal";
+import { ToastType } from "../Toast/Toast";
+import { ShowToastNotification } from "../Toast/ToastInit";
 import ModelDetail, { ComponentProps as ModeDetailProps } from "./ModelDetail";
 import BaseModel from "../../../Models/DatabaseModels/DatabaseBaseModel/DatabaseBaseModel";
 import IconProp from "../../../Types/Icon/IconProp";
@@ -165,6 +167,16 @@ const CardModelDetail: <TBaseModel extends BaseModel>(
           onSuccess={(item: TBaseModel) => {
             setShowModal(false);
             setRefresher(!refresher);
+            /*
+             * The modal just disappears otherwise, which reads as "nothing
+             * happened" - especially on cards that do not display every field
+             * the edit form exposes.
+             */
+            ShowToastNotification({
+              title: "Changes saved",
+              description: `${model.singularName || "Item"} updated successfully.`,
+              type: ToastType.SUCCESS,
+            });
             if (props.onSaveSuccess) {
               props.onSaveSuccess(item);
             }
@@ -180,7 +192,17 @@ const CardModelDetail: <TBaseModel extends BaseModel>(
             steps: props.formSteps || [],
             createOrUpdateApiUrl: props.createOrUpdateApiUrl,
           }}
-          modelIdToEdit={item?.id || undefined}
+          /*
+           * Prefer the id the caller already handed us. Deriving it purely
+           * from the loaded item meant that opening the modal before (or
+           * without) a successful detail fetch produced an Update form with
+           * no id: ModelForm silently skipped its fetch, rendered defaults,
+           * and BasicForm coerced every untouched Toggle to false - so
+           * saving quietly wrote blank values over the real record.
+           */
+          modelIdToEdit={
+            props.modelDetailProps.modelId || item?.id || undefined
+          }
         />
       ) : (
         <></>

package/UI/Components/ModelDetail/ModelDetail.tsx

@@ -51,15 +51,55 @@ const ModelDetail: <TBaseModel extends BaseModel>(
     JSONObject | undefined
   >(undefined);
 
+  type HasPermissionToReadFieldFunction = (fieldName: string) => boolean;
+
+  /*
+   * The server rejects the WHOLE get-item request when the select names a
+   * single column the caller cannot read (SelectPermission.checkSelectPermission
+   * throws NotAuthorizedException), which blanks the entire card instead of
+   * hiding one row. setDetailFields() below already drops unreadable fields
+   * from the render, so the fetch has to drop them too - the same thing
+   * BaseModelTable does for its selectMoreFields.
+   */
+  const hasPermissionToReadField: HasPermissionToReadFieldFunction = (
+    fieldName: string,
+  ): boolean => {
+    if (User.isMasterAdmin()) {
+      return true;
+    }
+
+    const accessControl: Dictionary<ColumnAccessControl> =
+      new props.modelType().getColumnAccessControlForAllColumns() || {};
+
+    const fieldPermissions: Array<Permission> =
+      accessControl[fieldName]?.read || [];
+
+    return PermissionHelper.doesPermissionsIntersect(
+      PermissionUtil.getAllPermissions(),
+      fieldPermissions,
+    );
+  };
+
   type GetSelectFields = () => Select<TBaseModel>;
 
   const getSelectFields: GetSelectFields = (): Select<TBaseModel> => {
     const select: Select<TBaseModel> = {};
+
+    /*
+     * _id is never a declared field on most cards, but CardModelDetail needs
+     * it to know which record its edit modal is updating. It is exempt from
+     * select permission checks server-side, so it is always safe to ask for.
+     */
+    (select as Dictionary<boolean>)["_id"] = true;
+
     for (const field of props.fields) {
       if (!field.field) {
         continue;
       }
       for (const key of Object.keys(field.field)) {
+        if (!hasPermissionToReadField(key)) {
+          continue;
+        }
         select[key as keyof TBaseModel] = true;
       }
     }
@@ -70,7 +110,8 @@ const ModelDetail: <TBaseModel extends BaseModel>(
         typeof field === "string" &&
         field &&
         props.selectMoreFields &&
-        (props.selectMoreFields as Select<TBaseModel>)[keyofField]
+        (props.selectMoreFields as Select<TBaseModel>)[keyofField] &&
+        hasPermissionToReadField(field)
       ) {
         select[keyofField] = props.selectMoreFields[keyofField] as JSONObject;
       }
@@ -91,6 +132,10 @@ const ModelDetail: <TBaseModel extends BaseModel>(
           continue;
         }
         for (const key of Object.keys(field.field)) {
+          if (!hasPermissionToReadField(key)) {
+            continue;
+          }
+
           if (model.isFileColumn(key)) {
             (relationSelect as JSONObject)[key] = {
               file: true,