@oneuptime/common 13.0.7 → 14.0.0

package/UI/Components/EditionLabel/LicenseManager.ts

@@ -0,0 +1,119 @@
+import { JSONObject } from "../../../Types/JSON";
+import { ComponentType, ReactElement, ReactNode } from "react";
+
+/*
+ * The contract between the edition dialog (EditionLabel) and the Enterprise
+ * license management UI.
+ *
+ * EditionLabel only READS the license: it asks GET /global-config/license and
+ * shows what the answer says - the edition pill, the status, grace and trial
+ * notices, the version card. Everything that CHANGES the license lives in the
+ * Enterprise Edition (ee/AdminDashboard/License, under ee/LICENSE), because
+ * the routes it calls exist only in the Enterprise server: activating it with
+ * a key or an offline token, refreshing it from oneuptime.com, replacing it,
+ * and the seat usage and instance tables a master admin manages it by.
+ *
+ * The Dashboard and the Admin Dashboard hand that UI to EditionLabel as their
+ * LicenseManager plugin (src/Enterprise/EnterprisePlugins.ts). The Community
+ * stubs have none, and the login page passes none: there the dialog shows
+ * the license status only, and nobody is told to manage the license from it.
+ *
+ * The manager wraps the dialog rather than filling one spot inside it. Its
+ * sections land in three places in the dialog body (messages at the top, seat
+ * usage after the version card, the activation input near the bottom) and it
+ * drives the dialog's footer buttons, so EditionLabel gives it renderDialog
+ * and the manager calls it with those parts. It stays mounted while the
+ * dialog is closed, so what an admin typed and which input they chose
+ * survive closing and reopening the dialog.
+ *
+ * Types only: nothing here ships any license management code.
+ */
+
+/*
+ * How close the installation is to its licensed seats. "breached" also
+ * covers an enforced limit that is exactly full: new users are already
+ * refused there.
+ */
+export type SeatTone = "healthy" | "approaching" | "breached";
+
+// What EditionLabel knows about the license, read-only.
+export interface LicenseSnapshot {
+  /*
+   * The body of the last GET /global-config/license that succeeded, or null
+   * before the first one and after one that failed. A new object on every
+   * successful load, so a manager can tell that the license was (re)loaded.
+   */
+  payload: JSONObject | null;
+  isLoading: boolean;
+  // Why the last load failed; "" when it did not.
+  loadError: string;
+  /*
+   * A master admin, in a dialog that has a license manager. The server
+   * accepts license writes from a master admin only, so nobody else is
+   * offered them.
+   */
+  canManageLicense: boolean;
+  licenseValid: boolean;
+  // Enterprise Edition with no license yet, inside its first-run trial.
+  isUnlicensedTrial: boolean;
+  // A real license (not the trial) is valid and loaded: show what it covers.
+  showLicenseDetails: boolean;
+  // "" when the server did not say.
+  companyName: string;
+  // The stored license key; "" when there is none or the caller may not see it.
+  licenseKey: string;
+  userLimit: number | null;
+  // What oneuptime.com last counted across every instance on the license.
+  currentUserCount: number | null;
+  /*
+   * The seat figure everything is measured against: the live, enforced count
+   * when this installation enforces its seat limit, else currentUserCount.
+   */
+  effectiveUserCount: number | null;
+  isSeatLimitEnforced: boolean;
+  canAddMoreUsers: boolean;
+  seatTone: SeatTone;
+  // The percent of licensed seats in use, as the admin reads it (may exceed 100).
+  seatUsageDisplayPercent: number | null;
+  currentVersion: string;
+  latestVersion: string;
+  // currentVersion is a real release number that can be compared.
+  hasComparableVersion: boolean;
+}
+
+// What a manager adds to the dialog. Every part is optional.
+export interface LicenseManagerDialogParts {
+  // Top of the body: the outcome of the last license action.
+  messages?: ReactNode | undefined;
+  // After the version card: seat usage and the instances on the license.
+  usage?: ReactNode | undefined;
+  // Near the bottom of the body: the license key or offline token input.
+  activation?: ReactNode | undefined;
+  // The dialog's primary button, when the manager offers one.
+  submitButtonText?: string | undefined;
+  onSubmit?: (() => void) | undefined;
+  isSubmitting?: boolean | undefined;
+  disableSubmitButton?: boolean | undefined;
+  // Left of the footer: actions on a license that is already in place.
+  leftFooterElement?: ReactElement | undefined;
+}
+
+export interface LicenseManagerProps {
+  license: LicenseSnapshot;
+  isDialogOpen: boolean;
+  // Asks GET /global-config/license again; the pill and the dialog follow.
+  reloadLicense: () => Promise<void>;
+  /*
+   * Applies the seat fields (isSeatLimitEnforced, seatsInUse, canAddMoreUsers)
+   * a license write answers with, the same way the GET's are applied.
+   */
+  applySeatEnforcement: (payload: JSONObject) => void;
+  // Renders the dialog (nothing while it is closed) with the manager's parts.
+  renderDialog: (parts: LicenseManagerDialogParts) => ReactElement;
+}
+
+/*
+ * Must render renderDialog's result, and must not be React.lazy: it is
+ * mounted with the edition pill on every page, and the dialog is inside it.
+ */
+export type LicenseManagerComponent = ComponentType<LicenseManagerProps>;

package/UI/Components/EventItem/EventItem.tsx

@@ -58,6 +58,11 @@ export interface ComponentProps {
   eventSecondDescription: string;
   labels?: Array<EventItemLabel> | undefined;
   eventAttachments?: Array<TimelineAttachment> | undefined;
+  /*
+   * Handed to every EventAttachmentList this item renders: the event's own
+   * attachments and each timeline note's. See EventAttachmentList.
+   */
+  attachmentRefreshSession?: (() => Promise<boolean>) | undefined;
 }
 
 const EventItem: FunctionComponent<ComponentProps> = (
@@ -116,7 +121,10 @@ const EventItem: FunctionComponent<ComponentProps> = (
         )}
 
         {props.eventAttachments && props.eventAttachments.length > 0 && (
-          <EventAttachmentList attachments={props.eventAttachments} />
+          <EventAttachmentList
+            attachments={props.eventAttachments}
+            refreshSession={props.attachmentRefreshSession}
+          />
         )}
 
         {props.eventSecondDescription && (
@@ -320,6 +328,9 @@ const EventItem: FunctionComponent<ComponentProps> = (
                                 item.attachments.length > 0 && (
                                   <EventAttachmentList
                                     attachments={item.attachments}
+                                    refreshSession={
+                                      props.attachmentRefreshSession
+                                    }
                                     variant="inline"
                                     showHeader={false}
                                     showCount={false}

package/UI/Components/Forms/BasicForm.tsx

@@ -11,6 +11,7 @@ import {
   DropdownValue,
 } from "../Dropdown/Dropdown";
 import ErrorMessage from "../ErrorMessage/ErrorMessage";
+import CollapsibleFormSection from "./CollapsibleFormSection";
 import FormField from "./Fields/FormField";
 import FormSummary from "./FormSummary";
 import Steps from "./Steps/Steps";
@@ -222,6 +223,7 @@ const BasicForm: ForwardRefExoticComponent<any> = forwardRef(
 
     const [errors, setErrors] = useState<Dictionary<string>>({});
     const [touched, setTouched] = useState<Dictionary<boolean>>({});
+    const [validationAttempt, setValidationAttempt] = useState<number>(0);
 
     useEffect(() => {
       setFormSteps(getVisibleFormSteps());
@@ -402,6 +404,9 @@ const BasicForm: ForwardRefExoticComponent<any> = forwardRef(
     const submitForm: () => void = (): void => {
       // check for any boolean values and if they don't exist in values - mark them as false.
 
+      setValidationAttempt((attempt: number) => {
+        return attempt + 1;
+      });
       setAllTouched();
 
       const validationErrors: Dictionary<string> = validate(
@@ -592,41 +597,16 @@ const BasicForm: ForwardRefExoticComponent<any> = forwardRef(
           field.fieldType === FormFieldSchemaType.MultiSelectDropdown &&
           (values as any)[fieldName]
         ) {
-          const flatDropdownOptions: Array<DropdownOption> =
-            field.dropdownOptions?.flatMap(
-              (item: DropdownOption | DropdownOptionGroup) => {
-                if (
-                  "options" in item &&
-                  Array.isArray((item as DropdownOptionGroup).options)
-                ) {
-                  return (item as DropdownOptionGroup).options;
-                }
-                return [item as DropdownOption];
-              },
-            ) || [];
-
-          const dropdownOptions: Array<DropdownOption> =
-            flatDropdownOptions.filter((option: DropdownOption) => {
-              let valueToCompare: Array<DropdownValue> = [
-                ...(values as any)[fieldName],
-              ];
-
-              valueToCompare = valueToCompare.map((item: DropdownValue) => {
-                if ((item as any) instanceof ObjectID) {
-                  return item.toString();
-                }
-
-                return item;
-              });
-
-              return valueToCompare.includes(option.value);
-            });
-
-          (values as any)[fieldName] = dropdownOptions.map(
-            (option: DropdownOption) => {
-              return option.value;
-            },
-          );
+          /*
+           * Options can be loaded lazily for a later step or omit entities the
+           * user cannot browse. Preserve every stored selection just as a single
+           * dropdown does; an option list is not an authorization to clear IDs.
+           */
+          (values as any)[fieldName] = (
+            (values as any)[fieldName] as Array<DropdownValue | ObjectID>
+          ).map((value: DropdownValue | ObjectID): DropdownValue => {
+            return value instanceof ObjectID ? value.toString() : value;
+          });
         }
 
         // if the field is still null but has a default value then... have the default initial value
@@ -742,102 +722,147 @@ const BasicForm: ForwardRefExoticComponent<any> = forwardRef(
                     const activeColumns: number =
                       currentStep?.columns || props.showAsColumns || 1;
                     const fullRowSpan: string = `md:col-span-${activeColumns}`;
+                    const visibleFields: Fields<T> = formFields.filter(
+                      (field: Field<T>): boolean => {
+                        return (
+                          (!currentFormStepId ||
+                            field.stepId === currentFormStepId) &&
+                          (!field.showIf ||
+                            field.showIf(refCurrentValue.current))
+                        );
+                      },
+                    );
+                    const fieldGroups: Array<Fields<T>> = [];
+
+                    for (const field of visibleFields) {
+                      const previousGroup: Fields<T> | undefined =
+                        fieldGroups[fieldGroups.length - 1];
+                      if (
+                        field.collapsibleSection &&
+                        previousGroup?.[0]?.collapsibleSection?.id ===
+                          field.collapsibleSection.id
+                      ) {
+                        previousGroup.push(field);
+                      } else {
+                        fieldGroups.push([field]);
+                      }
+                    }
+
+                    const renderField: (
+                      field: Field<T>,
+                      index: number,
+                    ) => ReactElement = (
+                      field: Field<T>,
+                      index: number,
+                    ): ReactElement => {
+                      const fieldName: string = getFieldName(field);
+                      return (
+                        <Fragment key={fieldName}>
+                          {field.sectionTitle && (
+                            <div
+                              className={`${fullRowSpan} mt-4 pt-5 first:mt-0 first:pt-0 border-t first:border-t-0 border-gray-200`}
+                            >
+                              <h3 className="text-base font-semibold text-gray-900">
+                                {translateString(field.sectionTitle) ??
+                                  field.sectionTitle}
+                              </h3>
+                              {field.sectionDescription && (
+                                <p className="mt-1 text-sm text-gray-500">
+                                  {typeof field.sectionDescription === "string"
+                                    ? translateString(
+                                        field.sectionDescription,
+                                      ) ?? field.sectionDescription
+                                    : field.sectionDescription}
+                                </p>
+                              )}
+                            </div>
+                          )}
+                          <div
+                            className={
+                              field.spanFullRow ? fullRowSpan : undefined
+                            }
+                          >
+                            <FormField<T>
+                              field={field}
+                              fieldName={fieldName}
+                              index={index}
+                              error={errors[fieldName] || ""}
+                              touched={touched[fieldName] || false}
+                              isDisabled={
+                                isLoading ||
+                                (isDropdownOptionsLoading &&
+                                  isDropdownField(field)) ||
+                                false
+                              }
+                              currentValues={refCurrentValue.current}
+                              setFieldValue={setFieldValue}
+                              setFieldTouched={setFieldTouched}
+                              submitForm={submitForm}
+                              disableAutofocus={props.disableAutofocus || false}
+                              setFormValues={(values: FormValues<T>) => {
+                                refCurrentValue.current = values;
+                                setCurrentValue(refCurrentValue.current);
+                              }}
+                            />
+                            {field.footerElement}
+                            {field.getFooterElement &&
+                              field.getFooterElement(
+                                refCurrentValue.current,
+                                touched[fieldName]
+                                  ? errors[fieldName] || undefined
+                                  : undefined,
+                              )}
+                          </div>
+                        </Fragment>
+                      );
+                    };
+                    let fieldIndex: number = 0;
+
                     return (
                       <div
                         className={`grid md:grid-cols-${activeColumns} grid-cols-1 gap-x-4 gap-y-3`}
                       >
-                        {formFields &&
-                          formFields
-                            .filter((field: Field<T>) => {
-                              if (currentFormStepId) {
-                                return field.stepId === currentFormStepId;
+                        {fieldGroups.map((group: Fields<T>): ReactElement => {
+                          const firstField: Field<T> = group[0]!;
+                          const fields: Array<ReactElement> = group.map(
+                            (field: Field<T>): ReactElement => {
+                              return renderField(field, fieldIndex++);
+                            },
+                          );
+
+                          if (!firstField.collapsibleSection) {
+                            return fields[0]!;
+                          }
+
+                          return (
+                            <CollapsibleFormSection
+                              key={`${firstField.collapsibleSection.id}-${getFieldName(firstField)}`}
+                              title={firstField.collapsibleSection.title}
+                              description={
+                                firstField.collapsibleSection.description
                               }
-
-                              return true;
-                            })
-                            .filter((field: Field<T>) => {
-                              const currentValues: FormValues<T> =
-                                refCurrentValue.current;
-                              if (
-                                field.showIf &&
-                                !field.showIf(currentValues)
-                              ) {
-                                return false;
-                              }
-
-                              return true;
-                            })
-                            .map((field: Field<T>, i: number) => {
-                              const fieldName: string = getFieldName(field);
-                              return (
-                                <Fragment key={fieldName}>
-                                  {field.sectionTitle && (
-                                    <div
-                                      className={`${fullRowSpan} mt-4 pt-5 first:mt-0 first:pt-0 border-t first:border-t-0 border-gray-200`}
-                                    >
-                                      <h3 className="text-base font-semibold text-gray-900">
-                                        {translateString(field.sectionTitle) ??
-                                          field.sectionTitle}
-                                      </h3>
-                                      {field.sectionDescription && (
-                                        <p className="mt-1 text-sm text-gray-500">
-                                          {typeof field.sectionDescription ===
-                                          "string"
-                                            ? translateString(
-                                                field.sectionDescription,
-                                              ) ?? field.sectionDescription
-                                            : field.sectionDescription}
-                                        </p>
-                                      )}
-                                    </div>
-                                  )}
-                                  <div
-                                    className={
-                                      field.spanFullRow
-                                        ? fullRowSpan
-                                        : undefined
-                                    }
-                                  >
-                                    <FormField<T>
-                                      field={field}
-                                      fieldName={fieldName}
-                                      index={i}
-                                      error={errors[fieldName] || ""}
-                                      touched={touched[fieldName] || false}
-                                      isDisabled={
-                                        isLoading ||
-                                        (isDropdownOptionsLoading &&
-                                          isDropdownField(field)) ||
-                                        false
-                                      }
-                                      currentValues={refCurrentValue.current}
-                                      setFieldValue={setFieldValue}
-                                      setFieldTouched={setFieldTouched}
-                                      submitForm={submitForm}
-                                      disableAutofocus={
-                                        props.disableAutofocus || false
-                                      }
-                                      setFormValues={(
-                                        values: FormValues<T>,
-                                      ) => {
-                                        refCurrentValue.current = values;
-                                        setCurrentValue(
-                                          refCurrentValue.current,
-                                        );
-                                      }}
-                                    />
-                                    {field.footerElement}
-                                    {field.getFooterElement &&
-                                      field.getFooterElement(
-                                        refCurrentValue.current,
-                                        touched[fieldName]
-                                          ? errors[fieldName] || undefined
-                                          : undefined,
-                                      )}
-                                  </div>
-                                </Fragment>
-                              );
-                            })}
+                              isConfigured={firstField.collapsibleSection.isConfigured(
+                                refCurrentValue.current,
+                              )}
+                              hasError={group.some(
+                                (field: Field<T>): boolean => {
+                                  const fieldName: string = getFieldName(field);
+                                  return Boolean(
+                                    touched[fieldName] && errors[fieldName],
+                                  );
+                                },
+                              )}
+                              validationAttempt={validationAttempt}
+                              className={fullRowSpan}
+                            >
+                              <div
+                                className={`grid md:grid-cols-${activeColumns} grid-cols-1 gap-x-4 gap-y-3`}
+                              >
+                                {fields}
+                              </div>
+                            </CollapsibleFormSection>
+                          );
+                        })}
 
                         {/* If Summary, show Model detail  */}
 

package/UI/Components/Forms/CollapsibleFormSection.tsx

@@ -0,0 +1,63 @@
+import useTranslateValue from "../../Utils/Translation";
+import CollapsibleSection from "../CollapsibleSection/CollapsibleSection";
+import React, {
+  FunctionComponent,
+  ReactElement,
+  useEffect,
+  useState,
+} from "react";
+
+export interface ComponentProps {
+  title: string;
+  description?: string | undefined;
+  isConfigured: boolean;
+  hasError: boolean;
+  validationAttempt: number;
+  className: string;
+  children: ReactElement;
+}
+
+const CollapsibleFormSection: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  const { translateString } = useTranslateValue();
+  const [isCollapsed, setIsCollapsed] = useState<boolean>(!props.isConfigured);
+
+  useEffect(() => {
+    // Field defaults can arrive after the form has loaded its field definitions.
+    if (props.isConfigured) {
+      setIsCollapsed(false);
+    }
+  }, [props.isConfigured]);
+
+  useEffect(() => {
+    if (props.hasError) {
+      setIsCollapsed(false);
+    }
+  }, [props.hasError, props.validationAttempt]);
+
+  return (
+    <CollapsibleSection
+      title={translateString(props.title) ?? props.title}
+      description={
+        props.description
+          ? translateString(props.description) ?? props.description
+          : undefined
+      }
+      variant="bordered"
+      className={props.className}
+      isCollapsed={isCollapsed}
+      onToggle={setIsCollapsed}
+      badge={
+        props.isConfigured
+          ? translateString("Configured") ?? "Configured"
+          : undefined
+      }
+    >
+      {/* Keep editors mounted without leaving collapsed controls focusable. */}
+      <div hidden={isCollapsed}>{props.children}</div>
+    </CollapsibleSection>
+  );
+};
+
+export default CollapsibleFormSection;

package/UI/Components/Forms/Fields/FormField.tsx

@@ -354,6 +354,13 @@ const FormField: <T extends GenericObject>(
           : (props.field.defaultValue as boolean)) || false;
     }
 
+    const storedInputValue: unknown =
+      props.currentValues?.[props.fieldName as keyof FormValues<T>];
+    const inputInitialValue: unknown =
+      storedInputValue === undefined
+        ? props.field.defaultValue
+        : storedInputValue;
+
     return (
       <div className="sm:col-span-4 mt-0 mb-2" key={props.fieldName}>
         {/*** Do not display label on checkbox because checkbox can display its own label */}
@@ -964,10 +971,9 @@ const FormField: <T extends GenericObject>(
                 props.setFieldTouched(props.fieldName, true);
               }}
               initialValue={
-                props.currentValues &&
-                (props.currentValues as any)[props.fieldName]
-                  ? (props.currentValues as any)[props.fieldName]
-                  : props.field.defaultValue || ""
+                inputInitialValue instanceof Date
+                  ? inputInitialValue
+                  : String(inputInitialValue ?? "")
               }
               placeholder={translatedPlaceholder || ""}
             />

package/UI/Components/Forms/FormSummary.tsx

@@ -209,6 +209,13 @@ const FormSummary: <T extends GenericObject>(
                 description: field.description || "",
                 getElement: (field.getSummaryElement ||
                   defaultSummaryElement) as any,
+                /*
+                 * A dropdown's form value is only the chosen ID. The options
+                 * ModelForm already fetched are what turn it back into a
+                 * name — without them a single select prints nothing and a
+                 * multi select prints raw IDs.
+                 */
+                dropdownOptions: field.dropdownOptions,
                 sideLink: field.sideLink,
                 key: (Object.keys(field.field || {})[0]?.toString() ||
                   "") as keyof T,

package/UI/Components/Forms/Types/Field.ts

@@ -44,6 +44,13 @@ export interface CategoryCheckboxProps {
   options: Array<CategoryCheckboxOption>;
 }
 
+export interface FormFieldCollapsibleSection<TEntity> {
+  id: string;
+  title: string;
+  description?: string | undefined;
+  isConfigured: (values: FormValues<TEntity>) => boolean;
+}
+
 export default interface Field<TEntity> {
   name?: string; // form field name, should be unique in thr form. If not provided, the field will be auto generated.
   title?: string;
@@ -178,4 +185,7 @@ export default interface Field<TEntity> {
    */
   sectionTitle?: string | undefined;
   sectionDescription?: string | ReactElement | undefined;
+
+  // Consecutive visible fields with the same id share one collapsible section.
+  collapsibleSection?: FormFieldCollapsibleSection<TEntity> | undefined;
 }