@oneuptime/common 14.0.13 → 14.0.14

package/UI/Components/Forms/Utils/SteppedFormFooter.ts

@@ -0,0 +1,151 @@
+import { ButtonStyleType } from "../../Button/Button";
+import type { ModalSecondaryButton } from "../../Modal/Modal";
+
+/*
+ * A stepped form's footer: a plain Next on every step but the last, and the
+ * form's action - its one primary button - on the last step only.
+ *
+ * "In multi-step form. Please dont have the primary save button on any step
+ * except the last. For example, do not show Declare Incident on the first
+ * step, it should always be on the last step. Next button should never be
+ * primary color as well. Can you please do this for all multistep forms in
+ * the project?" - the maintainer, 2026-10-04.
+ *
+ * That replaced two earlier rules on purpose, so neither should come back:
+ * create wizards that offered their action as soon as every step left was
+ * optional (Forms/Utils/FinishFromAnyStep, #4282), and stepped edit dialogs
+ * that saved from any step (#4192). With either, the primary button said
+ * "done" on a step that was not the end of the form, and a form that walked
+ * with a primary Next gave every step the colour that should mean "this
+ * commits". Now the primary colour appears once, on the button that does.
+ *
+ * What stays from those rules:
+ * - The action checks every step, not only the one on screen
+ *   (BasicFormHandle.submitAllSteps): a step with a problem is opened, with
+ *   its error showing. An edit form's step list still opens any step, so
+ *   reaching the action from the first step is one click on the last one.
+ * - Next never submits (BasicFormHandle.goToNextStep), and pressing Enter in
+ *   a field on a step that is not the last walks on too.
+ * - There is still no Back button on a stepped form (b61a6b656d).
+ */
+
+export const NEXT_BUTTON_TEXT: string = "Next";
+
+/*
+ * Next walks on and commits nothing, so it is never primary: it is drawn
+ * plain, like Cancel, on every step it shows on.
+ */
+export const NEXT_BUTTON_STYLE: ButtonStyleType = ButtonStyleType.NORMAL;
+
+// Next in a dialog's footer (Modal's secondaryButton).
+export const MODAL_NEXT_BUTTON_TEST_ID: string = "modal-footer-next-button";
+
+// Next under a form that draws its own buttons (a page's form).
+export const FORM_NEXT_BUTTON_TEST_ID: string = "form-next-button";
+
+/*
+ * What a stepped form's footer offers on the step on screen.
+ */
+export interface SteppedFormFooter {
+  /*
+   * The form's action ("Declare Incident", "Save Changes"), its one primary
+   * button: on the last step, and on a form without steps.
+   */
+  showActionButton: boolean;
+  // A plain Next: on every step but the last.
+  showNextButton: boolean;
+}
+
+export type GetSteppedFormFooterFunction = (data: {
+  hasSteps: boolean;
+  isOnLastStep: boolean;
+}) => SteppedFormFooter;
+
+export const getSteppedFormFooter: GetSteppedFormFooterFunction = (data: {
+  hasSteps: boolean;
+  isOnLastStep: boolean;
+}): SteppedFormFooter => {
+  if (!data.hasSteps || data.isOnLastStep) {
+    return {
+      showActionButton: true,
+      showNextButton: false,
+    };
+  }
+
+  return {
+    showActionButton: false,
+    showNextButton: true,
+  };
+};
+
+/*
+ * The footer of a dialog (Modal) that hosts a stepped form, as the props the
+ * dialog takes: its submit button is the form's action and is drawn on the
+ * last step only; on the other steps the footer has a plain Next instead.
+ * Every dialog that draws the buttons of a stepped form - ModelFormModal,
+ * BasicFormModal, and the few hosts that draw their own - builds its footer
+ * here, so the rule holds in one place (PrimaryActionLastStepGuard).
+ */
+export interface SteppedModalFooter {
+  // Modal's onSubmit: undefined leaves the submit button out.
+  onSubmit: (() => void) | undefined;
+  // Modal's secondaryButton: the plain Next, or nothing.
+  secondaryButton: ModalSecondaryButton | undefined;
+}
+
+export type GetSteppedModalFooterFunction = (data: {
+  hasSteps: boolean;
+  isOnLastStep: boolean;
+  /*
+   * The form's action, offered on the last step: BasicFormHandle's
+   * submitAllSteps, which checks every step and opens the first one with a
+   * problem. Undefined while there is nothing to do it with yet.
+   */
+  onAction: (() => void) | undefined;
+  /*
+   * Walks on from the step on screen: BasicFormHandle's goToNextStep, which
+   * checks the step and never submits. Undefined while the step has no way
+   * on yet (nothing picked to go on with).
+   */
+  onNext: (() => void) | undefined;
+  /*
+   * What Next says, when the step names its way on - "Use this template".
+   * It is a Next all the same, and drawn as plainly.
+   */
+  nextButtonText?: string | undefined;
+  nextButtonDataTestId?: string | undefined;
+  // Next waits for something on the step (a file to read, say).
+  isNextButtonDisabled?: boolean | undefined;
+}) => SteppedModalFooter;
+
+export const getSteppedModalFooter: GetSteppedModalFooterFunction = (data: {
+  hasSteps: boolean;
+  isOnLastStep: boolean;
+  onAction: (() => void) | undefined;
+  onNext: (() => void) | undefined;
+  nextButtonText?: string | undefined;
+  nextButtonDataTestId?: string | undefined;
+  isNextButtonDisabled?: boolean | undefined;
+}): SteppedModalFooter => {
+  const footer: SteppedFormFooter = getSteppedFormFooter({
+    hasSteps: data.hasSteps,
+    isOnLastStep: data.isOnLastStep,
+  });
+
+  const onNext: (() => void) | undefined = data.onNext;
+
+  return {
+    onSubmit: footer.showActionButton ? data.onAction : undefined,
+    secondaryButton:
+      footer.showNextButton && onNext
+        ? {
+            title: data.nextButtonText || NEXT_BUTTON_TEXT,
+            dataTestId: data.nextButtonDataTestId || MODAL_NEXT_BUTTON_TEST_ID,
+            disabled: data.isNextButtonDisabled || undefined,
+            onClick: () => {
+              onNext();
+            },
+          }
+        : undefined,
+  };
+};

package/UI/Components/Forms/Utils/UniqueName.ts

@@ -0,0 +1,81 @@
+/*
+ * A NAME THE FORM FILLS IN THAT NOTHING ELSE IN THE PROJECT HAS YET.
+ *
+ * Some forms name the new record for whoever creates it: a dashboard made
+ * from a template is called after the template ("Kubernetes Dashboard",
+ * Pages/Dashboards), a key made from a setup guide after the guide
+ * ("Kubernetes key", Components/Telemetry/IngestionKeyForm). Such a name
+ * must not be one the project already has: where the column is unique in
+ * the project (@UniqueColumnBy("projectId"), as a dashboard's name is) the
+ * server would refuse it, and anywhere else two records of one name cannot
+ * be told apart in a list or a picker. So the form fills in the wanted name
+ * while nothing has it, and otherwise the first of "<name> 2",
+ * "<name> 3", ... that nothing has.
+ *
+ * Names are compared the way the server's unique check compares them
+ * (DatabaseService.checkUniqueColumnBy with QueryHelper.findWithSameText):
+ * without case or surrounding spaces. This only spares the creator a
+ * refusal - the server's check still decides. A name taken between the
+ * lookup and the save (two people creating the same thing at once), or by
+ * a record the creator is not allowed to see, is refused with the server's
+ * own message, in the form, where the name can be changed.
+ */
+
+export type NormalizeNameFunction = (name: string) => string;
+
+// How two names are told apart: not by case, nor by spaces around them.
+export const normalizeNameForComparison: NormalizeNameFunction = (
+  name: string,
+): string => {
+  return name.trim().toLowerCase();
+};
+
+export type GetUniqueNameFunction = (data: {
+  // The name wanted: "Kubernetes Dashboard".
+  name: string;
+  /*
+   * The names already taken - the ones the lookup could see. Anything that
+   * is not text, or is blank, is passed over.
+   */
+  existingNames: Iterable<string | null | undefined>;
+}) => string;
+
+/**
+ * The wanted name while nothing has it, else the first of "name 2",
+ * "name 3", ... that nothing has. A blank name is handed back as it is:
+ * there is nothing to number.
+ */
+export const getUniqueName: GetUniqueNameFunction = (data: {
+  name: string;
+  existingNames: Iterable<string | null | undefined>;
+}): string => {
+  const name: string = data.name.trim();
+
+  if (name.length === 0) {
+    return data.name;
+  }
+
+  const taken: Set<string> = new Set<string>();
+
+  for (const existing of data.existingNames) {
+    if (typeof existing === "string" && existing.trim().length > 0) {
+      taken.add(normalizeNameForComparison(existing));
+    }
+  }
+
+  if (!taken.has(normalizeNameForComparison(name))) {
+    return name;
+  }
+
+  // One more than there are names is always enough.
+  for (let number: number = 2; number <= taken.size + 2; number++) {
+    const candidate: string = `${name} ${number}`;
+
+    if (!taken.has(normalizeNameForComparison(candidate))) {
+      return candidate;
+    }
+  }
+
+  // Unreachable (see the loop bound); kept so the function always returns.
+  return `${name} ${taken.size + 2}`;
+};

package/UI/Components/LabelRule/ImportLabelRulesModal.tsx

@@ -16,6 +16,10 @@ import PermissionGate, {
 import ProjectUtil from "../../Utils/Project";
 import Alert, { AlertType } from "../Alerts/Alert";
 import Button, { ButtonStyleType } from "../Button/Button";
+import {
+  SteppedModalFooter,
+  getSteppedModalFooter,
+} from "../Forms/Utils/SteppedFormFooter";
 import Modal, { ModalWidth } from "../Modal/Modal";
 import ProgressBar from "../ProgressBar/ProgressBar";
 import React, { ReactElement, useRef, useState } from "react";
@@ -422,6 +426,22 @@ const ImportLabelRulesModal: <TBaseModel extends BaseModel>(
     );
   }
 
+  /*
+   * The file, then the preview, where Import is: Validate and preview only
+   * walks on to the preview, so it is drawn plain - the import's one primary
+   * button is on its last step (Forms/Utils/SteppedFormFooter).
+   */
+  const uploadFooter: SteppedModalFooter = getSteppedModalFooter({
+    hasSteps: true,
+    isOnLastStep: false,
+    onAction: undefined,
+    onNext: () => {
+      void validate();
+    },
+    nextButtonText: "Validate and preview",
+    isNextButtonDisabled: !fileText.trim() || isValidating || isReadingFile,
+  });
+
   return (
     <Modal
       title={translateNamedAction(translator, {
@@ -431,10 +451,9 @@ const ImportLabelRulesModal: <TBaseModel extends BaseModel>(
       description="Upload or paste a label rule JSON export. Review the validated rules before creating them in this project."
       modalWidth={ModalWidth.Large}
       onClose={isValidating ? undefined : props.onClose}
-      onSubmit={validate}
-      submitButtonText="Validate and preview"
+      onSubmit={uploadFooter.onSubmit}
+      secondaryButton={uploadFooter.secondaryButton}
       isLoading={isValidating}
-      disableSubmitButton={!fileText.trim() || isValidating || isReadingFile}
       error={error || undefined}
     >
       <div className="space-y-5 py-4">

package/UI/Components/MemberRoleAssignment/MemberRoleAssignment.tsx

@@ -420,11 +420,12 @@ const MemberRoleAssignment: FunctionComponent<ComponentProps> = (
                                 {translator.translateText("Primary")}
                               </span>
                             )}
-                            {role.canAssignMultipleUsers && (
-                              <span className="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-700">
-                                {translator.translateText("Multiple")}
-                              </span>
-                            )}
+                            {/*
+                             * No "Multiple" tag: a role that takes several
+                             * people says so by its Add More button, as the
+                             * role picker on every form does by keeping its
+                             * picker.
+                             */}
                           </div>
                           <p className="text-xs text-gray-500 mt-0.5">
                             {translator.translatePlural(

package/UI/Components/Modal/ModalFooter.tsx

@@ -21,7 +21,16 @@ export interface ComponentProps {
 const ModalFooter: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
-  if (!props.onClose && !props.onSubmit && !props.leftFooterElement) {
+  /*
+   * A stepped form's footer on a step that is not the last has no submit
+   * button - only its Next, the secondary button - so that counts too.
+   */
+  if (
+    !props.onClose &&
+    !props.onSubmit &&
+    !props.leftFooterElement &&
+    !props.secondaryButton
+  ) {
     return <></>;
   }
 

package/UI/Components/ModelDetail/CardModelDetail.tsx

@@ -9,7 +9,7 @@ import Card, {
   CardButtonSchema,
   ComponentProps as CardProps,
 } from "../Card/Card";
-import { FormType } from "../Forms/ModelForm";
+import { FormType, ModelFormOnBeforeUpdate } from "../Forms/ModelForm";
 import Fields from "../Forms/Types/Fields";
 import { FormStep } from "../Forms/Types/FormStep";
 import { ModalWidth } from "../Modal/Modal";
@@ -24,7 +24,13 @@ import {
   Translator,
 } from "../../Utils/TranslateTemplate";
 import useTranslator from "../../Utils/UseTranslator";
-import React, { ReactElement, useEffect, useRef, useState } from "react";
+import React, {
+  ReactElement,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 
 export interface ComponentProps<TBaseModel extends BaseModel> {
   cardProps: CardProps;
@@ -41,6 +47,13 @@ export interface ComponentProps<TBaseModel extends BaseModel> {
   editModalDescription?: undefined | string;
   formSteps?: undefined | Array<FormStep<TBaseModel>>;
   formFields?: undefined | Fields<TBaseModel>;
+  /*
+   * Called with the model the Edit dialog is about to save, the misc data
+   * and every value the form holds (ModelForm's onBeforeUpdate): what it
+   * returns is what is saved. The incident's Affected Resources card leaves
+   * out a monitor status when no monitor is left to put in it.
+   */
+  onBeforeUpdate?: ModelFormOnBeforeUpdate<TBaseModel> | undefined;
   className?: string | undefined;
   name: string;
   modelAPI?: typeof ModelAPI | undefined;
@@ -58,9 +71,6 @@ const CardModelDetail: <TBaseModel extends BaseModel>(
   props: ComponentProps<TBaseModel>,
 ): ReactElement => {
   const translator: Translator = useTranslator();
-  const [cardButtons, setCardButtons] = useState<
-    Array<CardButtonSchema | ReactElement>
-  >([]);
   const [showModel, setShowModal] = useState<boolean>(false);
   const [item, setItem] = useState<TBaseModel | null>(null);
   const [refresher, setRefresher] = useState<boolean>(false);
@@ -95,7 +105,16 @@ const CardModelDetail: <TBaseModel extends BaseModel>(
     setRefresher(!refresher);
   }, [props.refresher]);
 
-  useEffect(() => {
+  /*
+   * The header's buttons: the card's own (documentation, demo, Edit), then
+   * the page's. Worked out while rendering rather than kept in state, so a
+   * page button that comes and goes - Apply Template on the postmortem,
+   * shown once the project's templates have loaded and there is one - is
+   * drawn as soon as the page hands it over. Kept in state and refreshed
+   * only by the refresher, a button the page added after the first paint
+   * stayed missing until something else changed.
+   */
+  const cardButtons: Array<CardButtonSchema | ReactElement> = useMemo(() => {
     /*
      * This used to look at project permissions only, so a permission granted
      * globally did not count, and it read the raw updateRecordPermissions
@@ -172,16 +191,21 @@ const CardModelDetail: <TBaseModel extends BaseModel>(
       cardButtons = cardButtons.concat(...props.cardProps.buttons);
     }
 
-    setCardButtons(cardButtons);
+    return cardButtons;
     /*
      * props.refresher is the card's existing "something changed, look again"
      * signal. The permission snapshot arrives on an API response header, so a
-     * one-shot read at mount could permanently show the wrong state.
+     * one-shot read at mount could permanently show the wrong state. A page
+     * usually writes its buttons as a literal, so they are new on every
+     * render of the page, which looks again too.
      */
   }, [
     props.refresher,
     props.isEditable,
     props.editButtonText,
+    props.documentationLink,
+    props.videoLink,
+    props.cardProps.buttons,
     translator.language,
   ]);
 
@@ -213,6 +237,7 @@ const CardModelDetail: <TBaseModel extends BaseModel>(
             setShowModal(false);
           }}
           submitButtonText={`Save Changes`}
+          onBeforeUpdate={props.onBeforeUpdate}
           onSuccess={(item: TBaseModel) => {
             setShowModal(false);
             setRefresher(!refresher);

package/UI/Components/ModelFormModal/ModelFormModal.tsx

@@ -12,11 +12,15 @@ import ModelForm, {
 import FormValues from "../Forms/Types/FormValues";
 import FormAnalyticsName from "../Forms/Utils/FormAnalyticsName";
 import {
-  NEXT_BUTTON_TEXT,
-  SteppedFormFooter,
-  getSteppedFormFooter,
-} from "../Forms/Utils/FinishFromAnyStep";
+  SteppedModalFooter,
+  getSteppedModalFooter,
+} from "../Forms/Utils/SteppedFormFooter";
 import { getFormModalWidth } from "../Forms/Utils/FormModalWidth";
+import {
+  OpenFormSections,
+  OpenFormSectionsContext,
+  useOpenFormSections,
+} from "../Forms/Utils/OpenFormSections";
 import Modal, { ModalWidth } from "../Modal/Modal";
 import BaseModel from "../../../Models/DatabaseModels/DatabaseBaseModel/DatabaseBaseModel";
 import ObjectID from "../../../Types/ObjectID";
@@ -54,35 +58,21 @@ const ModelFormModal: <TBaseModel extends BaseModel>(
   );
 
   /*
-   * A stepped EDIT form keeps its save button on every step. Every step of
-   * an edit form is filled in already, so there is nothing to walk through
-   * first - and a wizard whose only button read "Next" lost edits: someone
-   * changed a field on the first step, saw no Save, closed the dialog and
-   * the change was gone (dbb2f8920b took the Probe form's steps away for
-   * exactly that). So the submit button saves from wherever the user is,
-   * after validating every step; a plain Next walks on; and the step list
-   * opens any step, not only the ones already passed.
+   * A stepped form, create or edit, walks with a plain Next and offers its
+   * action - Create, Save Changes - on the last step only, as its one
+   * primary button (Forms/Utils/SteppedFormFooter.ts). The action checks
+   * every step first and opens the first one with a problem.
    *
-   * A create form offers its action as soon as every step left is optional
-   * (Forms/Utils/FinishFromAnyStep.ts) - until then its button reads Next -
-   * with the same plain Next beside it. Its step list still opens only the
-   * steps already passed.
+   * An edit form's step list opens any step, not only the ones already
+   * passed: every step of an edit form is filled in already, so a change on
+   * the first step is saved by clicking the last step in the list and Save
+   * Changes there - not by walking every step in between.
    */
   const isEditFormWithSteps: boolean =
     hasSteps && props.formProps.formType === FormType.Update;
 
-  const [isOnLastFormStep, setIsOnLastFormStep] = useState<boolean>(true);
-
-  const [canFinishFromCurrentStep, setCanFinishFromCurrentStep] =
-    useState<boolean>(false);
-
-  const footer: SteppedFormFooter = getSteppedFormFooter({
-    hasSteps: hasSteps,
-    isOnLastStep: isOnLastFormStep,
-    canFinishFromCurrentStep: canFinishFromCurrentStep,
-    savesFromAnyStep: isEditFormWithSteps,
-    actionText: props.submitButtonText || "Save",
-  });
+  // Starts on Next: the form reports where it is once its first step opens.
+  const [isOnLastFormStep, setIsOnLastFormStep] = useState<boolean>(!hasSteps);
 
   /*
    * Made on every render and used when the caller passes no ref of its own.
@@ -99,55 +89,54 @@ const ModelFormModal: <TBaseModel extends BaseModel>(
 
   const [error, setError] = useState<string>("");
 
+  const footer: SteppedModalFooter = getSteppedModalFooter({
+    hasSteps: hasSteps,
+    isOnLastStep: isOnLastFormStep,
+    onAction: () => {
+      (formRef.current as unknown as BasicFormHandle | null)?.submitAllSteps();
+    },
+    onNext: () => {
+      (formRef.current as unknown as BasicFormHandle | null)?.goToNextStep();
+    },
+  });
+
+  // Which folded sections are open: an editor in one widens the dialog.
+  const openFormSections: OpenFormSections = useOpenFormSections();
+
   let modalWidth: ModalWidth = props.modalWidth || ModalWidth.Normal;
 
   if (hasSteps) {
     modalWidth = props.modalWidth || ModalWidth.Medium;
   }
 
-  // A form with a Markdown editor opens wide, its toolbar on one line.
+  /*
+   * A form with a Markdown editor opens wide, its toolbar on one line - or
+   * grows wide when a folded section with one is opened.
+   */
   modalWidth =
     getFormModalWidth({
       fields: props.formProps.fields,
       width: modalWidth,
+      openSectionIds: openFormSections.openSectionIds,
     }) ?? modalWidth;
 
   return (
     <Modal
       {...props}
-      submitButtonText={footer.primaryButtonText}
+      submitButtonText={props.submitButtonText || "Save"}
       modalWidth={modalWidth}
       submitButtonType={ButtonType.Submit}
       isLoading={isFormLoading}
       description={props.description}
       disableSubmitButton={isFormLoading}
-      onSubmit={async () => {
-        if (footer.primaryButtonSubmitsAllSteps) {
-          (
-            formRef.current as unknown as BasicFormHandle | null
-          )?.submitAllSteps();
-          return;
-        }
-
-        await formRef.current?.submitForm();
-      }}
-      secondaryButton={
-        footer.showNextButton
-          ? {
-              title: NEXT_BUTTON_TEXT,
-              dataTestId: "modal-footer-next-button",
-              onClick: () => {
-                (
-                  formRef.current as unknown as BasicFormHandle | null
-                )?.goToNextStep();
-              },
-            }
-          : undefined
-      }
+      onSubmit={footer.onSubmit}
+      secondaryButton={footer.secondaryButton}
       error={error}
     >
       {!error ? (
-        <>
+        <OpenFormSectionsContext.Provider
+          value={openFormSections.reportSectionOpen}
+        >
           <ModelForm<TBaseModel>
             {...props.formProps}
             name={FormAnalyticsName.resolve(
@@ -160,9 +149,6 @@ const ModelFormModal: <TBaseModel extends BaseModel>(
             onIsLastFormStep={(isLastFormStep: boolean) => {
               setIsOnLastFormStep(isLastFormStep);
             }}
-            onCanFinishFromCurrentStep={(canFinish: boolean) => {
-              setCanFinishFromCurrentStep(canFinish);
-            }}
             allowAnyStepNavigation={isEditFormWithSteps}
             modelIdToEdit={props.modelIdToEdit}
             hideSubmitButton={true}
@@ -186,7 +172,7 @@ const ModelFormModal: <TBaseModel extends BaseModel>(
           />
 
           {props.footer}
-        </>
+        </OpenFormSectionsContext.Provider>
       ) : (
         <></>
       )}