@oneuptime/common 13.0.6 → 13.0.8

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;
 }

package/UI/Components/KeyboardShortcut/Screenshots/README.md

@@ -3,7 +3,7 @@
 The dashboard's global keyboard layer — the shortcuts dialog
 (`../KeyboardShortcutsModal.tsx`) and the two places it is reachable by mouse.
 Rendered from the real components against the dashboard's own Tailwind build
-and `Common/UI/Styles/Theme.css`.
+and `packages/Common/UI/Styles/Theme.css`.
 
 | File                                     | Shows                                                                                                                    |
 | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ |

package/UI/Components/Markdown.tsx/MarkdownViewer.tsx

@@ -79,6 +79,7 @@ SyntaxHighlighter.registerLanguage("php", php);
 SyntaxHighlighter.registerLanguage("graphql", graphql);
 SyntaxHighlighter.registerLanguage("http", http);
 import DOMPurify from "dompurify";
+import SessionAwareImage from "./SessionAwareImage";
 import OneUptimeDate from "../../../Types/Date";
 import { Theme, useTheme } from "../../Utils/Theme";
 import {
@@ -598,7 +599,7 @@ const MarkdownViewer: FunctionComponent<ComponentProps> = (
           ) : null;
         }
         return (
-          <img
+          <SessionAwareImage
             className="max-w-full h-auto rounded-md border border-gray-200 my-3"
             loading="lazy"
             alt={alt}

package/UI/Components/Markdown.tsx/SessionAwareImage.tsx

@@ -0,0 +1,122 @@
+import UserUtil from "../../Utils/User";
+import React, {
+  FunctionComponent,
+  ReactElement,
+  SyntheticEvent,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+
+/*
+ * Private inline images (pasted into notes, postmortems, runbooks) are served
+ * from this route, and only to a request that carries a session.
+ */
+export const PRIVATE_IMAGE_ROUTE_SEGMENT: string = "/image/access-token/";
+
+export const isPrivateImageUrl: (src: unknown) => boolean = (
+  src: unknown,
+): boolean => {
+  return typeof src === "string" && src.includes(PRIVATE_IMAGE_ROUTE_SEGMENT);
+};
+
+export const withCacheBuster: (src: string, value: string) => string = (
+  src: string,
+  value: string,
+): string => {
+  return `${src}${src.includes("?") ? "&" : "?"}sessionRetry=${encodeURIComponent(value)}`;
+};
+
+export type RefreshSessionFunction = () => Promise<boolean>;
+
+/*
+ * Which session an image may refresh is the app's decision, not this
+ * component's: the same markdown renders on status pages and public
+ * dashboards, where a failed dashboard refresh would log the reader out and
+ * send them to the dashboard's login page - and on a status page served from
+ * the OneUptime host that shares the dashboard's storage, "signed in" in local
+ * storage does not tell the two apart. So nothing is refreshed unless the app
+ * has registered its refresh here (the Dashboard and Admin Dashboard do, at
+ * startup) or the caller passes one.
+ */
+let appRefreshSession: RefreshSessionFunction | null = null;
+
+export const enablePrivateImageSessionRefresh: (
+  refreshSession: RefreshSessionFunction | null,
+) => void = (refreshSession: RefreshSessionFunction | null): void => {
+  appRefreshSession = refreshSession;
+};
+
+export interface ComponentProps
+  extends React.ImgHTMLAttributes<HTMLImageElement> {
+  refreshSession?: RefreshSessionFunction | undefined;
+  isSignedIn?: (() => boolean) | undefined;
+}
+
+/*
+ * An <img> cannot refresh an expired session the way a request through the API
+ * class does: once the access-token cookie lapses, a private image comes back
+ * 404 and stays broken until something else happens to refresh the session.
+ * So on the first failure of a private image, refresh once and load it again -
+ * where the app has opted in (see enablePrivateImageSessionRefresh) and the
+ * user is signed in.
+ */
+const SessionAwareImage: FunctionComponent<ComponentProps> = ({
+  refreshSession,
+  isSignedIn,
+  onError,
+  src,
+  ...imageProps
+}: ComponentProps): ReactElement => {
+  const [currentSrc, setCurrentSrc] = useState<string | undefined>(src);
+  const hasRetriedRef: React.MutableRefObject<boolean> = useRef(false);
+
+  // A new source is a new image, with its own one retry.
+  useEffect(() => {
+    setCurrentSrc(src);
+    hasRetriedRef.current = false;
+  }, [src]);
+
+  const handleError: (event: SyntheticEvent<HTMLImageElement>) => void =
+    useCallback(
+      (event: SyntheticEvent<HTMLImageElement>): void => {
+        const signedIn: boolean = isSignedIn
+          ? isSignedIn()
+          : UserUtil.isLoggedIn();
+
+        const refresh: RefreshSessionFunction | null =
+          refreshSession || appRefreshSession;
+
+        if (
+          !refresh ||
+          hasRetriedRef.current ||
+          !isPrivateImageUrl(src) ||
+          !signedIn
+        ) {
+          onError?.(event);
+          return;
+        }
+
+        hasRetriedRef.current = true;
+
+        void refresh()
+          .then((refreshed: boolean) => {
+            if (refreshed && typeof src === "string") {
+              setCurrentSrc(withCacheBuster(src, Date.now().toString()));
+              return;
+            }
+
+            onError?.(event);
+          })
+          .catch(() => {
+            onError?.(event);
+          });
+      },
+      [src, onError, refreshSession, isSignedIn],
+    );
+
+  return <img {...imageProps} src={currentSrc} onError={handleError} />;
+};
+
+export default SessionAwareImage;

package/UI/Components/ModelTable/BaseModelTable.tsx

@@ -323,6 +323,18 @@ export interface BaseTableProps<
 
   onFilterApplied?: ((isFilterApplied: boolean) => void) | undefined;
 
+  /**
+   * Called with the query the rows are fetched with - the caller's `query`,
+   * the column filters and the search box, merged exactly as the list request
+   * merges them - on mount and whenever that set of matching rows changes.
+   *
+   * For a surface that summarizes the same rows the table lists (a volume
+   * chart above it, say): reading the filters any other way would let the
+   * summary and the list quietly disagree about what "these events" means.
+   * Sort and page are not part of it; they re-order the same matching set.
+   */
+  onQueryChange?: ((query: Query<TBaseModel>) => void) | undefined;
+
   formSummary?: FormSummaryConfig | undefined;
 
   onAdvancedFiltersToggle?:
@@ -2029,6 +2041,27 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
     clearBulkSelectionState();
   }, [effectiveQueryKey]);
 
+  type BuildEffectiveQueryFunction = () => Query<TBaseModel>;
+
+  // The one merge the list request and `onQueryChange` both read.
+  const buildEffectiveQuery: BuildEffectiveQueryFunction =
+    (): Query<TBaseModel> => {
+      return {
+        ...props.query,
+        ...query,
+        ...buildSearchQueryFragment(),
+      };
+    };
+
+  /*
+   * Keyed on effectiveQueryKey rather than on the query object, which is a
+   * fresh literal every render: a caller that stores what it is handed here
+   * re-renders, and must not be handed the same query again for it.
+   */
+  useEffect(() => {
+    props.onQueryChange?.(buildEffectiveQuery());
+  }, [effectiveQueryKey]);
+
   const fetchItems: PromiseVoidFunction = async (): Promise<void> => {
     setError("");
     setIsLoading(true);
@@ -2047,11 +2080,7 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
         modelType: props.modelType as
           | DatabaseBaseModelType
           | AnalyticsBaseModelType,
-        query: {
-          ...props.query,
-          ...query,
-          ...buildSearchQueryFragment(),
-        },
+        query: buildEffectiveQuery(),
         groupBy: {
           ...props.groupBy,
         },
@@ -2546,6 +2575,14 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
   const hasPermissionToReadField: HasPermissionToReadFieldFunction = (
     field: keyof TBaseModel,
   ): boolean => {
+    /*
+     * Secondary fields use this check when building the request, so they need
+     * the same master-admin access as the visible columns that render them.
+     */
+    if (User.isMasterAdmin()) {
+      return true;
+    }
+
     const accessControl: Dictionary<ColumnAccessControl> =
       model.getColumnAccessControlForAllColumns();