@oneuptime/common 11.7.0 → 11.7.2

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/Fields/FormField.tsx

@@ -291,9 +291,19 @@ const FormField: <T extends GenericObject>(
         fieldDescription = "";
       }
 
-      fieldDescription +=
-        " This is in your local timezone - " +
-        OneUptimeDate.getCurrentTimezoneString();
+      /*
+       * Name the zone in full. The abbreviation on its own ("EDT") is not
+       * enough to tell whether the field is following the timezone picked in
+       * User Settings or the one the browser reports.
+       */
+      fieldDescription = (
+        fieldDescription +
+        " This is in your timezone - " +
+        OneUptimeDate.getCurrentTimezoneString() +
+        " (" +
+        OneUptimeDate.getCurrentTimezone().toString() +
+        ")."
+      ).trim();
     }
 
     type GetFieldDescriptionFunction = () => ReactElement | string;

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/Input/Input.tsx

@@ -174,7 +174,12 @@ const Input: FunctionComponent<ComponentProps> = (
                 props.type === InputType.DATETIME_LOCAL) &&
               value
             ) {
-              const date: Date = OneUptimeDate.fromString(value);
+              /*
+               * The input hands back a bare wall-clock with no offset. Resolve
+               * it in the user's configured timezone rather than letting the
+               * browser assume its own zone.
+               */
+              const date: Date = OneUptimeDate.fromDateTimeLocalString(value);
               const dateString: string = OneUptimeDate.toString(date);
               setValue(dateString);
               if (props.onChange) {

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,