@oneuptime/common 14.0.11 → 14.0.12

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

@@ -394,13 +394,32 @@ const FormField: <T extends GenericObject>(
         ? props.field.defaultValue
         : storedInputValue;
 
+    /*
+     * A checkbox and a switch draw their own label, beside the control: the
+     * title names it and pressing the title flips it. A switch drawn under a
+     * label and a paragraph of help read as a stray control at the bottom of
+     * the paragraph, a long way from the word that said what it was for.
+     * Neither says "(Optional)" either: on or off, a switch always has an
+     * answer, so there is nothing to leave out.
+     */
+    /*
+     * A custom element can say it does the same: a workflow step's switch,
+     * which can also take a value from an earlier step.
+     */
+    const customElementDrawsOwnLabel: boolean =
+      props.field.fieldType === FormFieldSchemaType.CustomComponent &&
+      Boolean(props.field.customElementDrawsOwnLabel);
+
+    const drawsOwnLabel: boolean =
+      props.field.fieldType === FormFieldSchemaType.Checkbox ||
+      props.field.fieldType === FormFieldSchemaType.Toggle ||
+      customElementDrawsOwnLabel;
+
     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 */}
-
         {props.field.showHorizontalRuleAbove && <HorizontalRule />}
 
-        {props.field.fieldType !== FormFieldSchemaType.Checkbox && (
+        {!drawsOwnLabel && (
           <FieldLabelElement
             title={props.field.title || ""}
             id={fieldLabelId}
@@ -413,7 +432,19 @@ const FormField: <T extends GenericObject>(
           />
         )}
 
-        <div className="mt-2">
+        {/*
+         * The gap is the one between a label and its control. A switch's
+         * label is beside it, so its row starts where a label would, level
+         * with the label of the field next to it in a two-column form.
+         */}
+        <div
+          className={
+            props.field.fieldType === FormFieldSchemaType.Toggle ||
+            customElementDrawsOwnLabel
+              ? ""
+              : "mt-2"
+          }
+        >
           {/* Time Picker */}
           {props.field.fieldType === FormFieldSchemaType.Time && (
             <TimePicker
@@ -637,6 +668,24 @@ const FormField: <T extends GenericObject>(
             />
           )}
 
+          {/*
+           * The key/value editor draws no error of its own, so a Dictionary
+           * field that failed validation used to stop the form with nothing
+           * on screen to say why - an OAuth 2.0 variable's reserved
+           * additional parameter left Create doing nothing at all.
+           */}
+          {props.field.fieldType === FormFieldSchemaType.Dictionary &&
+            props.touched &&
+            props.error && (
+              <p
+                data-testid="error-message"
+                className="mt-1 text-sm text-red-400"
+                role="alert"
+              >
+                {props.error}
+              </p>
+            )}
+
           {props.field.fieldType ===
             FormFieldSchemaType.OptionChooserButton && (
             <RadioButtons
@@ -693,6 +742,7 @@ const FormField: <T extends GenericObject>(
               tabIndex={0}
               dataTestId={props.field.dataTestId}
               disableSpellCheck={props.field.disableSpellCheck}
+              autoGrow={props.field.autoGrow}
               onChange={async (value: string) => {
                 onChange(value);
                 props.setFieldValue(props.fieldName, value);
@@ -721,6 +771,7 @@ const FormField: <T extends GenericObject>(
                * read that way, so the editor's own check has to agree.
                */
               allowJSON5={props.field.allowJSON5}
+              toolbarActions={props.field.codeEditorToolbarActions}
               tabIndex={0}
               dataTestId={props.field.dataTestId}
               onChange={async (value: string) => {
@@ -820,6 +871,10 @@ const FormField: <T extends GenericObject>(
                   : "",
 
               placeholder: translatedPlaceholder || "",
+
+              ariaLabelledby: customElementDrawsOwnLabel
+                ? undefined
+                : fieldLabelId,
             })}
 
           {(props.field.fieldType === FormFieldSchemaType.HTML ||
@@ -838,6 +893,7 @@ const FormField: <T extends GenericObject>(
                 props.setFieldTouched(props.fieldName, true);
               }}
               dataTestId={props.field.dataTestId}
+              toolbarActions={props.field.codeEditorToolbarActions}
               type={codeType}
               initialValue={
                 props.currentValues &&
@@ -909,8 +965,17 @@ const FormField: <T extends GenericObject>(
 
           {props.field.fieldType === FormFieldSchemaType.Toggle && (
             <Toggle
-              ariaLabelledby={fieldLabelId}
+              id={fieldId}
+              title={
+                translateString(props.field.title) ?? props.field.title ?? ""
+              }
+              description={translateValue(props.field.description) || ""}
               error={props.touched && props.error ? props.error : undefined}
+              /*
+               * As every other input here: refused while the form saves,
+               * and wherever the field itself is switched off.
+               */
+              disabled={props.isDisabled || props.field.disabled}
               onChange={async (value: boolean) => {
                 onChange(value);
                 props.setFieldValue(props.fieldName, value);

package/UI/Components/Forms/ModelForm.tsx

@@ -149,6 +149,8 @@ export interface ComponentProps<TBaseModel extends BaseModel> {
   modelAPI?: typeof ModelAPI | undefined;
   summary?: FormSummaryConfig | undefined;
   values?: FormValues<TBaseModel> | undefined;
+  // Any step can be opened from the step list (see BasicForm).
+  allowAnyStepNavigation?: boolean | undefined;
 }
 
 const ModelForm: <TBaseModel extends BaseModel>(
@@ -913,6 +915,11 @@ const ModelForm: <TBaseModel extends BaseModel>(
     const result: JSONObject = {};
 
     for (const field of fields) {
+      // A form-only field drives the form; nothing of it is sent.
+      if (field.formOnly) {
+        continue;
+      }
+
       if (field.overrideFieldKey && values[field.overrideFieldKey]) {
         result[field.overrideFieldKey] =
           (values[field.overrideFieldKey] as JSONObject) || null;
@@ -1243,6 +1250,7 @@ const ModelForm: <TBaseModel extends BaseModel>(
             | undefined
         }
         summary={props.summary}
+        allowAnyStepNavigation={props.allowAnyStepNavigation}
       ></BasicModelForm>
     </div>
   );

package/UI/Components/Forms/Steps/Step.tsx

@@ -1,11 +1,17 @@
 import { FormStep, FormStepState } from "../Types/FormStep";
 import GenericObject from "../../../../Types/GenericObject";
+import useTranslateValue from "../../../Utils/Translation";
 import React, { ReactElement } from "react";
 
 export interface ComponentProps<T> {
   step: FormStep<T>;
   onClick: (step: FormStep<T>) => void;
   state: FormStepState;
+  /*
+   * Whether pressing the step opens it. A completed step always can be; a
+   * step not reached yet only on a form that allows any step.
+   */
+  isClickable?: boolean | undefined;
 }
 
 const Step: <T extends GenericObject>(
@@ -13,15 +19,28 @@ const Step: <T extends GenericObject>(
 ) => ReactElement = <T extends GenericObject>(
   props: ComponentProps<T>,
 ): ReactElement => {
+  const { translateString } = useTranslateValue();
+
+  /*
+   * Looked up the same way as the "Step 2 of 3" title narrow screens show
+   * in place of this list, so the two never name a step differently.
+   */
+  const title: string = translateString(props.step.title) ?? props.step.title;
+
+  const isClickable: boolean =
+    props.isClickable ?? props.state === FormStepState.COMPLETED;
+
   return (
     <li
       onClick={() => {
-        if (props.state === FormStepState.COMPLETED) {
+        if (isClickable && props.state !== FormStepState.ACTIVE) {
           props.onClick(props.step);
         }
       }}
       className={`${
-        props.state === FormStepState.COMPLETED ? "cursor-pointer" : ""
+        isClickable && props.state !== FormStepState.ACTIVE
+          ? "cursor-pointer"
+          : ""
       }`}
     >
       {props.state === FormStepState.COMPLETED && (
@@ -42,7 +61,7 @@ const Step: <T extends GenericObject>(
               </svg>
             </span>
             <span className="ml-3 text-sm font-medium text-gray-500 group-hover:text-gray-900">
-              {props.step.title}
+              {title}
             </span>
           </span>
         </div>
@@ -58,7 +77,7 @@ const Step: <T extends GenericObject>(
             <span className="relative block h-2 w-2 rounded-full bg-indigo-600"></span>
           </span>
           <span className="ml-3 text-sm font-medium text-indigo-600">
-            {props.step.title}
+            {title}
           </span>
         </div>
       )}
@@ -72,8 +91,12 @@ const Step: <T extends GenericObject>(
             >
               <div className="h-2 w-2 rounded-full bg-gray-300"></div>
             </div>
-            <p className="ml-3 text-sm font-medium text-gray-500 w-max">
-              {props.step.title}
+            <p
+              className={`ml-3 text-sm font-medium text-gray-500 w-max ${
+                isClickable ? "group-hover:text-gray-900" : ""
+              }`}
+            >
+              {title}
             </p>
           </div>
         </div>

package/UI/Components/Forms/Steps/Steps.tsx

@@ -9,6 +9,11 @@ export interface ComponentProps<T> {
   onClick: (step: FormStep<T>) => void;
   currentFormStepId: string;
   formValues: FormValues<T>;
+  /*
+   * Steps not reached yet can be opened too, not only the ones walked
+   * through. Set on a form whose steps are all filled in already.
+   */
+  allowAnyStep?: boolean | undefined;
 }
 
 const Steps: <T extends GenericObject>(
@@ -50,6 +55,11 @@ const Steps: <T extends GenericObject>(
                 state={state}
                 step={step}
                 key={index}
+                isClickable={
+                  state === FormStepState.COMPLETED ||
+                  (state === FormStepState.INACTIVE &&
+                    Boolean(props.allowAnyStep))
+                }
                 onClick={(step: FormStep<T>) => {
                   props.onClick(step);
                 }}

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

@@ -16,7 +16,8 @@ import { DatabaseBaseModelType } from "../../../../Models/DatabaseModels/Databas
 import Route from "../../../../Types/API/Route";
 import URL from "../../../../Types/API/URL";
 import MimeType from "../../../../Types/File/MimeType";
-import { ReactElement } from "react";
+import type { CodeEditorActions } from "../../CodeEditor/CodeEditor";
+import { ReactElement, ReactNode } from "react";
 
 export enum FormFieldStyleType {
   Default = "Default",
@@ -37,6 +38,11 @@ export interface CustomElementProps {
   onBlur?: () => void;
   initialValue?: any;
   placeholder?: string | undefined;
+  /*
+   * The id of the field's label, so a custom control can be named by it the
+   * way a native input is by <label for>.
+   */
+  ariaLabelledby?: string | undefined;
 }
 
 export interface CategoryCheckboxProps {
@@ -122,6 +128,13 @@ export default interface Field<TEntity> {
    * been read back perfectly well.
    */
   allowJSON5?: boolean | undefined;
+  /*
+   * For a JSON, HTML, CSS or JavaScript field: more buttons for its code
+   * editor's toolbar, such as the workflow builder's "Insert value".
+   */
+  codeEditorToolbarActions?:
+    | ((editor: CodeEditorActions) => ReactNode)
+    | undefined;
   onChange?:
     | ((
         value: any,
@@ -148,6 +161,14 @@ export default interface Field<TEntity> {
     values: FormValues<TEntity>,
     props: CustomElementProps,
   ) => ReactElement | undefined; // custom element to render instead of the elements in the form.
+  /*
+   * The custom element draws the field's title and help itself, the way a
+   * switch field does - beside its control rather than above it. FormField
+   * leaves out the label it would draw over the element, and the gap under
+   * that label, and hands the element no ariaLabelledby to a label that is
+   * not there.
+   */
+  customElementDrawsOwnLabel?: boolean | undefined;
   categoryCheckboxProps?: CategoryCheckboxProps | undefined; // props for the category checkbox component. If fieldType is CategoryCheckbox, this prop is required.
   dataTestId?: string | undefined;
   autoComplete?: string | undefined;
@@ -157,6 +178,17 @@ export default interface Field<TEntity> {
   doNotShowWhenEditing?: boolean | undefined;
   doNotShowWhenCreating?: boolean | undefined;
 
+  /*
+   * The field only drives the form: it fills in, or edits a part of,
+   * fields that are saved, and its own value is never sent. ModelForm
+   * leaves it out of the request's misc data, where the value of a field
+   * with an overrideFieldKey otherwise goes. Examples: the identity
+   * provider picker that fills in an OAuth 2.0 variable's token URL, and
+   * the Destination step that edits a part of a workspace notification
+   * rule.
+   */
+  formOnly?: boolean | undefined;
+
   //
   jsonKeysForDictionary?: Array<string> | undefined;
   isLoadingDictionaryKeys?: boolean | undefined;
@@ -173,6 +205,14 @@ export default interface Field<TEntity> {
    */
   disableSpellCheck?: boolean | undefined;
 
+  /*
+   * For a LongText field: start a few lines tall and grow with what is typed,
+   * up to a limit where it scrolls, rather than sitting at a fixed six lines.
+   * Suits values that are usually a line or two but sometimes run to
+   * paragraphs, such as a workflow step's message or prompt.
+   */
+  autoGrow?: boolean | undefined;
+
   /*
    * For a Markdown field: whether its editor uploads pasted, dropped and
    * picked images. Default: true. Uploading needs a signed-in user, so a

package/UI/Components/Forms/Validation.ts

@@ -523,10 +523,24 @@ export default class Validation {
             errors[name] = resultCustomValidation;
           }
         }
-      } else if (field.required) {
-        errors[name] = translateValidationMessage("{{field}} is required.", {
-          field: field.title || field.name || "",
-        });
+      } else {
+        /*
+         * A field nobody has filled in yet. Its `required` can depend on the
+         * other answers, so it is asked here the same way as for a field that
+         * holds a value - this branch used to treat any `required` function
+         * as true. That made the OAuth 2.0 variable's client secret, which is
+         * optional for a public client on the Refresh Token grant, required
+         * for everybody who had not typed into it.
+         */
+        const resultRequired: string | null = this.validateRequired(
+          args.values,
+          undefined,
+          field,
+        );
+
+        if (resultRequired) {
+          errors[name] = resultRequired;
+        }
       }
     }
 

package/UI/Components/Icon/Icon.tsx

@@ -1782,11 +1782,12 @@ const Icon: FunctionComponent<ComponentProps> = ({
       />,
     );
   } else if (icon === IconProp.Eye) {
+    // The outline and the pupil: the outline alone is an empty almond.
     return getSvgWrapper(
       <path
         strokeLinecap="round"
         strokeLinejoin="round"
-        d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z"
+        d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178ZM15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
       />,
     );
   } else if (icon === IconProp.FaceFrown) {
@@ -2378,11 +2379,15 @@ const Icon: FunctionComponent<ComponentProps> = ({
       />,
     );
   } else if (icon === IconProp.StopCircle) {
+    /*
+     * The circle and the square inside it. With the circle alone this drew
+     * an empty ring, which reads as an unticked radio button, not as "stop".
+     */
     return getSvgWrapper(
       <path
         strokeLinecap="round"
         strokeLinejoin="round"
-        d="M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
+        d="M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0ZM9 9.563C9 9.252 9.252 9 9.563 9h4.874c.311 0 .563.252.563.563v4.874c0 .311-.252.563-.563.563H9.564A.562.562 0 0 1 9 14.437V9.564Z"
       />,
     );
   } else if (icon === IconProp.Sun) {

package/UI/Components/Label/Label.tsx

@@ -3,7 +3,6 @@ import LabelModel from "../../../Models/DatabaseModels/Label";
 import Pill, { ComponentProps as PillProps, PillSize } from "../Pill/Pill";
 import { Gray500 } from "../../../Types/BrandColors";
 import Color from "../../../Types/Color";
-import IconProp from "../../../Types/Icon/IconProp";
 
 export interface ComponentProps {
   label: LabelModel;
@@ -37,7 +36,6 @@ const LabelElement: FunctionComponent<ComponentProps> = (
     size: props.size,
     isMinimal: props.isMinimal,
     tooltip: label.description || undefined,
-    icon: IconProp.EmptyCircle,
   };
 
   if (props.style) {

package/UI/Components/LabelRule/ImportLabelRulesModal.tsx

@@ -167,9 +167,8 @@ const ImportLabelRulesModal: <TBaseModel extends BaseModel>(
       <Modal
         title="Import complete"
         modalWidth={ModalWidth.Large}
-        onSubmit={props.onClose}
         onClose={props.onClose}
-        submitButtonText="Close"
+        closeButtonText="Close"
       >
         <div className="space-y-4 py-4">
           <Alert

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

@@ -47,6 +47,7 @@ import ruby from "react-syntax-highlighter/dist/esm/languages/prism/ruby";
 import php from "react-syntax-highlighter/dist/esm/languages/prism/php";
 import graphql from "react-syntax-highlighter/dist/esm/languages/prism/graphql";
 import http from "react-syntax-highlighter/dist/esm/languages/prism/http";
+import hcl from "react-syntax-highlighter/dist/esm/languages/prism/hcl";
 
 SyntaxHighlighter.registerLanguage("javascript", javascript);
 SyntaxHighlighter.registerLanguage("js", javascript);
@@ -79,6 +80,10 @@ SyntaxHighlighter.registerLanguage("ruby", ruby);
 SyntaxHighlighter.registerLanguage("php", php);
 SyntaxHighlighter.registerLanguage("graphql", graphql);
 SyntaxHighlighter.registerLanguage("http", http);
+// Terraform configuration (the Developer > Terraform pages).
+SyntaxHighlighter.registerLanguage("hcl", hcl);
+SyntaxHighlighter.registerLanguage("terraform", hcl);
+SyntaxHighlighter.registerLanguage("tf", hcl);
 import DOMPurify from "dompurify";
 import SessionAwareImage from "./SessionAwareImage";
 import OneUptimeDate from "../../../Types/Date";
@@ -321,6 +326,9 @@ const langDisplayNames: Record<string, string> = {
   php: "PHP",
   graphql: "GraphQL",
   http: "HTTP",
+  hcl: "HCL",
+  terraform: "Terraform",
+  tf: "Terraform",
   markdown: "Markdown",
   md: "Markdown",
 };

package/UI/Components/Modal/ConfirmModal.tsx

@@ -6,9 +6,20 @@ import React, { FunctionComponent, ReactElement } from "react";
 export interface ComponentProps {
   title: string;
   description: string | ReactElement;
+  /*
+   * Gives the dialog a way out: the footer's Cancel button, the header's X and
+   * the Escape key. Without it the dialog is a notice - its one button is the
+   * only way out - and that button is drawn plain unless submitButtonType says
+   * otherwise.
+   */
   onClose?: undefined | (() => void);
   submitButtonText?: undefined | string;
   onSubmit: () => void;
+  /*
+   * Defaults to PRIMARY when there is a Cancel (the submit is the action the
+   * dialog asks about) and to NORMAL when there is not (the submit only
+   * acknowledges). Pass DANGER for an action that destroys something.
+   */
   submitButtonType?: undefined | ButtonStyleType;
   closeButtonType?: undefined | ButtonStyleType;
   closeButtonText?: undefined | string;
@@ -19,12 +30,38 @@ export interface ComponentProps {
   children?: ReactElement | undefined;
 }
 
+/*
+ * The style a ConfirmModal's submit button gets when the caller does not say.
+ *
+ * A dialog has one primary button, and it is the thing the dialog exists to
+ * do. With a Cancel beside it, the submit is that thing ("Run this step",
+ * "Archive") and is PRIMARY. Without one, the dialog is a notice ("Code sent",
+ * "Something went wrong") and its single button only closes it, which is no
+ * more an action than Cancel is - so it is drawn the way Cancel and Close are.
+ */
+export const getDefaultConfirmSubmitButtonType: (
+  hasCancel: boolean,
+) => ButtonStyleType = (hasCancel: boolean): ButtonStyleType => {
+  return hasCancel ? ButtonStyleType.PRIMARY : ButtonStyleType.NORMAL;
+};
+
 const ConfirmModal: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
   const { translateValue } = useTranslateValue();
   const translatedDescription: string | ReactElement | undefined =
     translateValue(props.description);
+
+  /*
+   * Compared with undefined, not by truthiness: ButtonStyleType.PRIMARY is the
+   * enum's first member, 0, so `props.submitButtonType ? ... : default` read an
+   * explicit PRIMARY as "not given".
+   */
+  const submitButtonType: ButtonStyleType =
+    props.submitButtonType !== undefined
+      ? props.submitButtonType
+      : getDefaultConfirmSubmitButtonType(Boolean(props.onClose));
+
   return (
     <Modal
       title={props.title}
@@ -35,17 +72,11 @@ const ConfirmModal: FunctionComponent<ComponentProps> = (
         props.submitButtonText ? props.submitButtonText : "Confirm"
       }
       closeButtonText={props.closeButtonText ? props.closeButtonText : "Cancel"}
-      closeButtonStyleType={
-        props.closeButtonType ? props.closeButtonType : ButtonStyleType.NORMAL
-      }
+      closeButtonStyleType={props.closeButtonType ?? ButtonStyleType.NORMAL}
       disableSubmitButton={
         props.disableSubmitButton ? props.disableSubmitButton : false
       }
-      submitButtonStyleType={
-        props.submitButtonType
-          ? props.submitButtonType
-          : ButtonStyleType.PRIMARY
-      }
+      submitButtonStyleType={submitButtonType}
       error={props.error}
     >
       {/*