@oneuptime/common 14.0.11 → 14.0.12

package/UI/Components/DeleteConfirmation/TypeToConfirmDelete.tsx

@@ -0,0 +1,90 @@
+import Input from "../Input/Input";
+import {
+  TemplateAround,
+  translateTemplateAround,
+} from "../../Utils/TranslateTemplate";
+import React, { FunctionComponent, ReactElement, useId } from "react";
+
+/*
+ * "Type Acme Production to confirm." - for the few deletes that take
+ * everything with them.
+ *
+ * Naming the record is enough for nearly every delete in the product: the
+ * user reads which one it is and confirms. Deleting a project is different in
+ * kind. It removes every monitor, incident, status page, on-call schedule and
+ * byte of telemetry in it, for every member, and nothing brings it back - and
+ * the dialog that does it looks exactly like the one that deletes a label. So
+ * there the Delete button stays locked until the project's name has been
+ * typed, which can only be done by reading it.
+ */
+
+export const TYPE_TO_CONFIRM_TEMPLATE: string = "Type {{name}} to confirm.";
+
+/*
+ * Whether what was typed is the name. Surrounding spaces are forgiven - they
+ * are invisible, and pasting often brings one along - but nothing else is: the
+ * point is that the user read this name.
+ */
+export const isTypedNameConfirmed: (data: {
+  typed: string;
+  name: string;
+}) => boolean = (data: { typed: string; name: string }): boolean => {
+  const name: string = data.name.trim();
+
+  return name.length > 0 && data.typed.trim() === name;
+};
+
+export interface ComponentProps {
+  // What has to be typed: the record's full name, never a shortened one.
+  name: string;
+  value: string;
+  onChange: (value: string) => void;
+  // Enter in the box, once it matches - the same as pressing Delete.
+  onConfirm?: (() => void) | undefined;
+}
+
+const TypeToConfirmDelete: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  const inputId: string = `type-to-confirm-${useId().replace(/:/g, "")}`;
+
+  const around: TemplateAround = translateTemplateAround(
+    TYPE_TO_CONFIRM_TEMPLATE,
+    "name",
+  );
+
+  return (
+    <div data-testid="delete-confirmation-type-to-confirm">
+      <label htmlFor={inputId} className="block text-sm text-gray-700">
+        {around.before}
+        <strong
+          data-testid="delete-confirmation-type-to-confirm-name"
+          className="select-all break-words font-semibold text-gray-900"
+        >
+          {props.name}
+        </strong>
+        {around.after}
+      </label>
+      <Input
+        id={inputId}
+        value={props.value}
+        dataTestId="delete-confirmation-type-to-confirm-input"
+        autoComplete="off"
+        disableSpellCheck={true}
+        onChange={(value: string) => {
+          props.onChange(value);
+        }}
+        onEnterPress={() => {
+          if (
+            props.onConfirm &&
+            isTypedNameConfirmed({ typed: props.value, name: props.name })
+          ) {
+            props.onConfirm();
+          }
+        }}
+      />
+    </div>
+  );
+};
+
+export default TypeToConfirmDelete;

package/UI/Components/Dictionary/Dictionary.tsx

@@ -51,6 +51,20 @@ export interface ComponentProps {
    * compatibility with simple key/value forms.
    */
   enableOperators?: boolean | undefined;
+  /*
+   * Draws the value box of a Text row in place of the default text input -
+   * the workflow builder puts its value picker there, so a header can be set
+   * from an earlier step or a variable. Rows with an operator that takes a
+   * list keep the list control.
+   */
+  renderTextValueInput?:
+    | ((args: {
+        value: string;
+        onChange: (value: string) => void;
+        placeholder?: string | undefined;
+        rowIndex: number;
+      }) => ReactElement)
+    | undefined;
 }
 
 interface Item {
@@ -458,7 +472,23 @@ const DictionaryForm: FunctionComponent<ComponentProps> = (
                   )}
                 {!hideValueInput &&
                   item.type === ValueType.Text &&
-                  !operatorOption.expectsMultiValue && (
+                  !operatorOption.expectsMultiValue &&
+                  props.renderTextValueInput &&
+                  props.renderTextValueInput({
+                    value: item.value.toString(),
+                    placeholder: props.valuePlaceholder,
+                    rowIndex: index,
+                    onChange: (value: string) => {
+                      const newData: Array<Item> = [...data];
+                      newData[index]!.value = value;
+                      setData(newData);
+                      onDataChange(newData);
+                    },
+                  })}
+                {!hideValueInput &&
+                  item.type === ValueType.Text &&
+                  !operatorOption.expectsMultiValue &&
+                  !props.renderTextValueInput && (
                     <AutocompleteTextInput
                       value={item.value.toString()}
                       placeholder={

package/UI/Components/Dropdown/DropdownValueBadge.tsx

@@ -1,5 +1,11 @@
 import Color from "../../../Types/Color";
-import React, { CSSProperties, FunctionComponent, ReactElement } from "react";
+import React, { FunctionComponent, ReactElement } from "react";
+import {
+  getPillColors,
+  getPillDotStyle,
+  getPillToneStyle,
+  PillColors,
+} from "../Pill/PillColors";
 
 export interface ComponentProps {
   label: string;
@@ -28,30 +34,32 @@ const DropdownValueBadge: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
   const color: Color | undefined = getColor(props.color);
-  const style: CSSProperties | undefined = color
-    ? {
-        backgroundColor: color.toString(),
-        borderColor: color.toString(),
-        color: Color.shouldUseDarkText(color) ? "#111827" : "#f9fafb",
-      }
+  /*
+   * A coloured value is painted the way a Pill is (PillColors.ts): a dot in
+   * the exact colour, a pale wash and ring of it, and text in a shade of it
+   * that reads - in both themes, through Theme.css's [data-ou-pill] rules.
+   */
+  const colors: PillColors | undefined = color
+    ? getPillColors(color)
     : undefined;
 
   return (
     <span
       data-dropdown-value-badge="true"
       data-dropdown-value-color={color?.toString()}
+      data-ou-pill={colors ? "" : undefined}
       className={`inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium ${
-        color
-          ? "border border-solid"
+        colors
+          ? ""
           : "bg-indigo-50 text-indigo-700 ring-1 ring-inset ring-indigo-700/10"
       }`}
-      style={style}
+      style={colors ? getPillToneStyle(colors) : undefined}
     >
       <span
         aria-hidden="true"
-        className={`h-1.5 w-1.5 rounded-full ${
-          color ? "bg-current" : "bg-indigo-500"
-        }`}
+        data-ou-pill-dot={colors ? "" : undefined}
+        className={`h-1.5 w-1.5 rounded-full ${colors ? "" : "bg-indigo-500"}`}
+        style={colors ? getPillDotStyle(colors) : undefined}
       ></span>
       {props.label}
     </span>

package/UI/Components/EditionLabel/EditionLabel.tsx

@@ -1525,9 +1525,14 @@ const EditionLabel: FunctionComponent<ComponentProps> = (
                         {configError}
                       </p>
                       <div className="mt-3">
+                        {/*
+                         * A retry, not a destructive action: the red panel
+                         * already says something went wrong, and a filled red
+                         * button would compete with the dialog's own action.
+                         */}
                         <Button
                           title="Try again"
-                          buttonStyle={ButtonStyleType.DANGER}
+                          buttonStyle={ButtonStyleType.NORMAL}
                           onClick={handleRetryFetch}
                           isLoading={isConfigLoading}
                           className="!mt-0 md:!ml-0"

package/UI/Components/Error/PageError.tsx

@@ -23,7 +23,7 @@ const PageError: FunctionComponent<ComponentProps> = (
       onSubmit={() => {
         Navigation.reload();
       }}
-      submitButtonStyleType={ButtonStyleType.NORMAL}
+      submitButtonStyleType={ButtonStyleType.PRIMARY}
       submitButtonText="Reload Page"
     >
       <p className="text-sm text-gray-500">{message}</p>

package/UI/Components/EventItem/EventItem.tsx

@@ -170,17 +170,7 @@ const EventItem: FunctionComponent<ComponentProps> = (
                 {t("eventItem.affectedResources")}
               </div>
               {props.eventResourcesAffected?.map((item: string, i: number) => {
-                return (
-                  <Pill
-                    key={i}
-                    text={item}
-                    color={VeryLightGray}
-                    style={{
-                      backgroundColor: "var(--ou-surface-tertiary, #f3f4f6)",
-                      color: "var(--ou-text-subtle, #9ca3af)",
-                    }}
-                  />
-                );
+                return <Pill key={i} text={item} color={VeryLightGray} />;
               })}
             </div>
           </div>

package/UI/Components/FormModal/BasicFormModal.tsx

@@ -37,6 +37,21 @@ const BasicFormModal: <T extends GenericObject>(
   const [isLoading, setIsLoading] = useState<boolean>(Boolean(props.isLoading));
   const formRef: any = useRef<any>(null);
 
+  /*
+   * A stepped form's button moves on until the last step, and says so: it
+   * read the action ("Change State", "Add Subscribers") on every step while
+   * it only went to the next one. Like ModelFormModal, a stepped dialog is
+   * also widened to fit the step list beside the fields.
+   */
+  const hasSteps: boolean = Boolean(
+    props.formProps.steps && props.formProps.steps.length > 0,
+  );
+
+  const [isOnLastFormStep, setIsOnLastFormStep] = useState<boolean>(true);
+
+  const submitButtonText: string | undefined =
+    hasSteps && !isOnLastFormStep ? "Next" : props.submitButtonText;
+
   useEffect(() => {
     setIsLoading(Boolean(props.isLoading));
   }, [props.isLoading]);
@@ -44,6 +59,10 @@ const BasicFormModal: <T extends GenericObject>(
   return (
     <Modal
       {...props}
+      submitButtonText={submitButtonText}
+      modalWidth={
+        props.modalWidth ?? (hasSteps ? ModalWidth.Medium : undefined)
+      }
       submitButtonType={ButtonType.Submit}
       isLoading={isLoading}
       onSubmit={() => {
@@ -64,6 +83,10 @@ const BasicFormModal: <T extends GenericObject>(
               props.title,
             )}
             hideSubmitButton={true}
+            onIsLastFormStep={(isLastFormStep: boolean) => {
+              setIsOnLastFormStep(isLastFormStep);
+              props.formProps.onIsLastFormStep?.(isLastFormStep);
+            }}
             ref={formRef}
             onLoadingChange={(isFormLoading: boolean) => {
               setIsLoading(isFormLoading);

package/UI/Components/Forms/BasicForm.tsx

@@ -63,6 +63,23 @@ export interface FormSummaryConfig {
   defaultStepName?: string | undefined;
 }
 
+/*
+ * What a form's ref offers beyond Formik's shape. A dialog that owns the
+ * buttons (hideSubmitButton) drives the form through it.
+ */
+export interface BasicFormHandle {
+  setFieldTouched: (fieldName: string, value: boolean) => void;
+  setFieldValue: (fieldName: string, value: JSONValue) => void;
+  // Validates the current step, then moves on - or submits on the last step.
+  submitForm: () => void;
+  /*
+   * Validates every step and submits from wherever the user is. A field
+   * that fails sends the user to the first step it is on, with its error
+   * showing. On a form without steps it is submitForm.
+   */
+  submitAllSteps: () => void;
+}
+
 export interface BaseComponentProps<T> {
   submitButtonStyleType?: ButtonStyleType | undefined;
   initialValues?: FormValues<T> | undefined;
@@ -94,6 +111,14 @@ export interface BaseComponentProps<T> {
   onFormValidationErrorChanged?: ((hasError: boolean) => void) | undefined;
   showSubmitButtonOnlyIfSomethingChanged?: boolean | undefined;
   summary?: FormSummaryConfig | undefined;
+  /*
+   * Every step can be opened from the step list, not only the ones already
+   * walked through. For a form whose steps are all filled in already - an
+   * edit form - so a change on the third step does not mean clicking Next
+   * twice to reach it. Pair it with submitAllSteps, which validates the
+   * steps the user skipped.
+   */
+  allowAnyStepNavigation?: boolean | undefined;
 }
 
 export interface ComponentProps<T extends GenericObject>
@@ -264,11 +289,12 @@ const BasicForm: ForwardRefExoticComponent<any> = forwardRef(
       validate(currentValue);
     }, [currentValue]);
 
-    useImperativeHandle(ref, () => {
+    useImperativeHandle(ref, (): BasicFormHandle => {
       return {
         setFieldTouched,
         setFieldValue,
         submitForm,
+        submitAllSteps,
       };
     }, [
       currentValue,
@@ -401,6 +427,88 @@ const BasicForm: ForwardRefExoticComponent<any> = forwardRef(
       }
     };
 
+    /*
+     * Hands the form's values to onSubmit, normalised for the API. Called once
+     * every step that is going to be validated has been.
+     */
+    const submitValues: () => void = (): void => {
+      const values: FormValues<T> = refCurrentValue.current;
+
+      for (const field of formFields) {
+        if (field.fieldType === FormFieldSchemaType.Toggle) {
+          const fieldName: string = field.name!;
+          if (!(values as any)[fieldName]) {
+            (values as any)[fieldName] = false;
+          }
+        }
+
+        if (field.fieldType === FormFieldSchemaType.Email) {
+          const fieldName: string = field.name!;
+          if ((values as any)[fieldName]) {
+            (values as any)[fieldName] = ((values as any)[fieldName] as string)
+              .toString()
+              .toLowerCase();
+          }
+        }
+
+        if (field.fieldType === FormFieldSchemaType.MultiSelectDropdown) {
+          const fieldName: string = field.name!;
+
+          if (
+            (values as any)[fieldName] &&
+            (values as any)[fieldName].length > 0 &&
+            (values as any)[fieldName][0]["value"]
+          ) {
+            (values as any)[fieldName] = (
+              (values as any)[fieldName] as Array<DropdownOption>
+            ).map((item: DropdownOption) => {
+              return item.value;
+            });
+          }
+        }
+
+        if (field.fieldType === FormFieldSchemaType.Dropdown) {
+          const fieldName: string = field.name!;
+          if (
+            (values as any)[fieldName] &&
+            (values as any)[fieldName]["value"]
+          ) {
+            (values as any)[fieldName] = (values as any)[fieldName]["value"];
+          }
+        }
+
+        if (field.fieldType === FormFieldSchemaType.Password) {
+          const fieldName: string = field.name!;
+          if (
+            (values as any)[fieldName] &&
+            typeof (values as any)[fieldName] === Typeof.String
+          ) {
+            (values as any)[fieldName] = new HashedString(
+              (values as any)[fieldName],
+              false,
+            );
+          }
+        }
+      }
+
+      const analyticsName: string | undefined = FormAnalyticsName.resolve(
+        props.name,
+      );
+
+      /*
+       * Unnamed forms are embedded sub-forms (filter builders, argument
+       * editors) rather than conversions. Skip them instead of reporting an
+       * event named after a missing prop.
+       */
+      if (analyticsName) {
+        UiAnalytics.capture("FORM SUBMIT: " + analyticsName);
+      }
+
+      props.onSubmit(values, () => {
+        setDidSomethingChange(false);
+      });
+    };
+
     const submitForm: () => void = (): void => {
       // check for any boolean values and if they don't exist in values - mark them as false.
 
@@ -430,83 +538,7 @@ const BasicForm: ForwardRefExoticComponent<any> = forwardRef(
           (steps[steps.length - 1] as FormStep<T>).id === currentFormStepId) ||
         currentFormStepId === null
       ) {
-        const values: FormValues<T> = refCurrentValue.current;
-
-        for (const field of formFields) {
-          if (field.fieldType === FormFieldSchemaType.Toggle) {
-            const fieldName: string = field.name!;
-            if (!(values as any)[fieldName]) {
-              (values as any)[fieldName] = false;
-            }
-          }
-
-          if (field.fieldType === FormFieldSchemaType.Email) {
-            const fieldName: string = field.name!;
-            if ((values as any)[fieldName]) {
-              (values as any)[fieldName] = (
-                (values as any)[fieldName] as string
-              )
-                .toString()
-                .toLowerCase();
-            }
-          }
-
-          if (field.fieldType === FormFieldSchemaType.MultiSelectDropdown) {
-            const fieldName: string = field.name!;
-
-            if (
-              (values as any)[fieldName] &&
-              (values as any)[fieldName].length > 0 &&
-              (values as any)[fieldName][0]["value"]
-            ) {
-              (values as any)[fieldName] = (
-                (values as any)[fieldName] as Array<DropdownOption>
-              ).map((item: DropdownOption) => {
-                return item.value;
-              });
-            }
-          }
-
-          if (field.fieldType === FormFieldSchemaType.Dropdown) {
-            const fieldName: string = field.name!;
-            if (
-              (values as any)[fieldName] &&
-              (values as any)[fieldName]["value"]
-            ) {
-              (values as any)[fieldName] = (values as any)[fieldName]["value"];
-            }
-          }
-
-          if (field.fieldType === FormFieldSchemaType.Password) {
-            const fieldName: string = field.name!;
-            if (
-              (values as any)[fieldName] &&
-              typeof (values as any)[fieldName] === Typeof.String
-            ) {
-              (values as any)[fieldName] = new HashedString(
-                (values as any)[fieldName],
-                false,
-              );
-            }
-          }
-        }
-
-        const analyticsName: string | undefined = FormAnalyticsName.resolve(
-          props.name,
-        );
-
-        /*
-         * Unnamed forms are embedded sub-forms (filter builders, argument
-         * editors) rather than conversions. Skip them instead of reporting an
-         * event named after a missing prop.
-         */
-        if (analyticsName) {
-          UiAnalytics.capture("FORM SUBMIT: " + analyticsName);
-        }
-
-        props.onSubmit(values, () => {
-          setDidSomethingChange(false);
-        });
+        submitValues();
       } else if (steps && steps.length > 0) {
         const currentStepIndex: number = steps.findIndex(
           (step: FormStep<T>) => {
@@ -520,6 +552,83 @@ const BasicForm: ForwardRefExoticComponent<any> = forwardRef(
       }
     };
 
+    const submitAllSteps: () => void = (): void => {
+      const steps: Array<FormStep<T>> | undefined = getVisibleFormSteps();
+
+      if (!steps || steps.length === 0 || currentFormStepId === null) {
+        submitForm();
+        return;
+      }
+
+      setValidationAttempt((attempt: number) => {
+        return attempt + 1;
+      });
+
+      /*
+       * Every field on a step the user can reach - a step hidden by its
+       * showIf is not one, and neither are its fields - validated as if it
+       * were the step on screen.
+       */
+      const fieldsOnVisibleSteps: Fields<T> = formFields.filter(
+        (field: Field<T>): boolean => {
+          return steps.some((step: FormStep<T>): boolean => {
+            return step.id === field.stepId;
+          });
+        },
+      );
+
+      const validationErrors: Dictionary<string> = Validation.validate({
+        values: refCurrentValue.current,
+        formFields: fieldsOnVisibleSteps,
+        currentFormStepId: null,
+        onValidate: props.onValidate || undefined,
+      });
+
+      if (props.onFormValidationErrorChanged) {
+        props.onFormValidationErrorChanged(
+          Object.keys(validationErrors).length !== 0,
+        );
+      }
+
+      isSubmitting.current = true;
+
+      const failingFieldNames: Array<string> = Object.keys(validationErrors);
+
+      if (failingFieldNames.length === 0) {
+        submitValues();
+        return;
+      }
+
+      // Show every failing field's error, on whichever step it is.
+      const touchedFields: Dictionary<boolean> = {};
+
+      for (const fieldName of failingFieldNames) {
+        touchedFields[fieldName] = true;
+      }
+
+      setTouched({ ...touched, ...touchedFields });
+      setErrors(validationErrors);
+
+      // And go to the first step that has one, unless the user is on it.
+      const firstStepWithAnError: FormStep<T> | undefined = steps.find(
+        (step: FormStep<T>): boolean => {
+          return fieldsOnVisibleSteps.some((field: Field<T>): boolean => {
+            return (
+              field.stepId === step.id &&
+              failingFieldNames.includes(getFieldName(field))
+            );
+          });
+        },
+      );
+
+      if (
+        firstStepWithAnError &&
+        firstStepWithAnError.id !== currentFormStepId
+      ) {
+        setCurrentFormStepId(firstStepWithAnError.id);
+      }
+    };
+
     useEffect(() => {
       if (isSubmitting.current) {
         return;
@@ -681,6 +790,7 @@ const BasicForm: ForwardRefExoticComponent<any> = forwardRef(
                     currentFormStepId={currentFormStepId}
                     steps={formSteps}
                     formValues={refCurrentValue.current}
+                    allowAnyStep={props.allowAnyStepNavigation || false}
                     onClick={(step: FormStep<T>) => {
                       setCurrentFormStepId(step.id);
                     }}

package/UI/Components/Forms/BasicModelForm.tsx

@@ -55,6 +55,7 @@ export interface ComponentProps<TBaseModel extends BaseModel> {
   initialValues?: FormValues<TBaseModel> | undefined;
   summary?: FormSummaryConfig | undefined;
   values?: FormValues<TBaseModel> | undefined;
+  allowAnyStepNavigation?: boolean | undefined;
 }
 
 const BasicModelForm: <TBaseModel extends BaseModel>(
@@ -132,6 +133,7 @@ const BasicModelForm: <TBaseModel extends BaseModel>(
       hideSubmitButton={props.hideSubmitButton}
       ref={props.formRef}
       summary={props.summary}
+      allowAnyStepNavigation={props.allowAnyStepNavigation}
     ></BasicForm>
   );
 };