@oneuptime/common 14.0.12 → 14.0.14

package/UI/Components/CommandPalette/PaletteRow.tsx

@@ -76,6 +76,11 @@ export interface PaletteRowItem {
   description?: string | undefined;
   icon?: IconProp | undefined;
   iconColor?: string | undefined;
+  /**
+   * Where the item lives ("Project Settings", "Advanced"). Shown under the
+   * title in place of the description.
+   */
+  breadcrumb?: Array<string> | undefined;
   shortcut?: Array<KeyboardShortcutKey> | undefined;
 }
 
@@ -152,10 +157,37 @@ const PaletteRow: FunctionComponent<ComponentProps> = (
         <p className="truncate text-sm font-medium text-gray-900">
           {highlightMatch(item.title, props.query)}
         </p>
-        {item.description && (
-          <p className="truncate text-xs text-gray-500">
-            {highlightMatch(item.description, props.query)}
+        {item.breadcrumb && item.breadcrumb.length > 0 ? (
+          <p
+            data-testid={`command-palette-option-${item.id}-breadcrumb`}
+            className="truncate text-xs text-gray-500"
+          >
+            {item.breadcrumb.map((crumb: string, index: number) => {
+              return (
+                <React.Fragment key={index}>
+                  {index > 0 && (
+                    <>
+                      {/*
+                       * The arrow is drawn for the eye; a screen reader
+                       * hears a comma between the names instead.
+                       */}
+                      <span aria-hidden="true" className="px-1 text-gray-400">
+                        ›
+                      </span>
+                      <span className="sr-only">, </span>
+                    </>
+                  )}
+                  {highlightMatch(crumb, props.query)}
+                </React.Fragment>
+              );
+            })}
           </p>
+        ) : (
+          item.description && (
+            <p className="truncate text-xs text-gray-500">
+              {highlightMatch(item.description, props.query)}
+            </p>
+          )
         )}
       </div>
       {item.shortcut && item.shortcut.length > 0 && (

package/UI/Components/CommandPalette/Types.ts

@@ -16,8 +16,44 @@ export interface PaletteCommand {
   iconColor?: string | undefined;
   /** Section the command is grouped under when browsing (e.g. "Essentials"). */
   category: string;
-  /** Extra match terms the user might type that are not in the title. */
+  /**
+   * Other names for the command that are not in its title ("pager" for
+   * On-Call, "delete project" for the Danger Zone). Matched like a weaker
+   * title.
+   */
   keywords?: Array<string> | undefined;
+  /**
+   * The title itself in other words, matched exactly as the title is: the
+   * English title behind a translated one, so "api keys" still opens
+   * "API-Schlüssel" first in German. Never shown.
+   */
+  titleAliases?: Array<string> | undefined;
+  /**
+   * Where the command lives, outermost first: ["Project Settings",
+   * "Advanced"] for API Keys. Shown under the title instead of the
+   * description, so two pages that are both called "Custom Fields" can be
+   * told apart, and searched as context: "incident custom fields" finds the
+   * Incidents one. A command with a breadcrumb is not searched by its
+   * category.
+   */
+  breadcrumb?: Array<string> | undefined;
+  /**
+   * More words for the breadcrumb that are searched but never shown, such as
+   * the English names behind a translated breadcrumb.
+   */
+  breadcrumbKeywords?: Array<string> | undefined;
+  /**
+   * Offered only to someone searching. Browsing lists the catalog without
+   * it (it would be hundreds of rows), but it can still show under Recent.
+   */
+  isSearchOnly?: boolean | undefined;
+  /**
+   * Breaks a tie between two commands that match a search equally well:
+   * the higher goes first (0 when left out). The Dashboard puts its products
+   * above its pages, and pages above actions and quick links, so "pager"
+   * opens On-Call Duty, then On-Call Policies.
+   */
+  searchPriority?: number | undefined;
   /** Optional shortcut hint rendered as keycaps on the row. */
   shortcut?: Array<KeyboardShortcutKey> | undefined;
   onSelect: () => void;

package/UI/Components/CopyTextButton/CopyTextButton.tsx

@@ -6,6 +6,7 @@ import React, {
 } from "react";
 import Icon from "../Icon/Icon";
 import IconProp from "../../../Types/Icon/IconProp";
+import useTranslateValue from "../../Utils/Translation";
 
 export interface ComponentProps {
   textToBeCopied: string;
@@ -25,7 +26,10 @@ const CopyTextButton: FunctionComponent<ComponentProps> = (
 
   const size: "xs" | "sm" | "md" = props.size || "xs";
   const variant: "ghost" | "soft" | "solid" = props.variant || "ghost";
-  const label: string = props.label || "Copy";
+  const { translateString } = useTranslateValue();
+  const label: string =
+    translateString(props.label || "Copy") || props.label || "Copy";
+  const title: string | undefined = translateString(props.title);
   const copiedLabel: string = props.copiedLabel || "Copied!";
 
   const handleCopy: MouseEventHandler<HTMLButtonElement> = async (
@@ -85,8 +89,8 @@ const CopyTextButton: FunctionComponent<ComponentProps> = (
           handleCopy(e as unknown as React.MouseEvent<HTMLButtonElement>);
         }
       }}
-      title={props.title || label}
-      aria-label={props.title || label}
+      title={title || label}
+      aria-label={title || label}
     >
       {/* Icon */}
       <span aria-hidden="true" className="flex items-center justify-center">

package/UI/Components/CopyableButton/CopyableButton.tsx

@@ -1,6 +1,8 @@
 import Icon, { SizeProp, ThickProp } from "../Icon/Icon";
 import Tooltip from "../Tooltip/Tooltip";
 import IconProp from "../../../Types/Icon/IconProp";
+import { Translator } from "../../Utils/TranslateTemplate";
+import useTranslator from "../../Utils/UseTranslator";
 import React, { FunctionComponent, ReactElement, useState } from "react";
 
 export interface ComponentProps {
@@ -10,6 +12,7 @@ export interface ComponentProps {
 const CopyableButton: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
+  const translator: Translator = useTranslator();
   const [copiedToClipboard, setCopyToClipboard] = useState<boolean>(false);
 
   const refreshCopyToClipboardState: VoidFunction = (): void => {
@@ -42,14 +45,14 @@ const CopyableButton: FunctionComponent<ComponentProps> = (
       onKeyDown={handleKeyDown}
       role="button"
       tabIndex={0}
-      aria-label={
-        copiedToClipboard ? "Copied to clipboard" : "Copy to clipboard"
-      }
+      aria-label={translator.translateText(
+        copiedToClipboard ? "Copied to clipboard" : "Copy to clipboard",
+      )}
       aria-live="polite"
     >
       {" "}
       {copiedToClipboard ? (
-        "Copied to Clipboard"
+        translator.translateText("Copied to Clipboard")
       ) : (
         <Tooltip text="Copy to Clipboard">
           <Icon

package/UI/Components/CustomFields/CustomFieldsDetail.tsx

@@ -37,6 +37,11 @@ import { JSONObject } from "../../../Types/JSON";
 import ObjectID from "../../../Types/ObjectID";
 import React, { FunctionComponent, ReactElement, useState } from "react";
 import useAsyncEffect from "use-async-effect";
+import {
+  translateNamedAction,
+  Translator,
+} from "../../Utils/TranslateTemplate";
+import useTranslator from "../../Utils/UseTranslator";
 
 export interface ComponentProps {
   title: string;
@@ -87,6 +92,7 @@ export interface ComponentProps {
 const CustomFieldsDetail: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
+  const translator: Translator = useTranslator();
   const [schemaList, setSchemaList] = useState<Array<BaseModel>>([]);
   /*
    * Read failures and write failures are kept apart because hideIfEmpty
@@ -427,6 +433,12 @@ const CustomFieldsDetail: FunctionComponent<ComponentProps> = (
         {!isLoading && !loadError && schemaList.length > 0 && model && (
           <Detail
             id={props.name}
+            /*
+             * The values of the record's custom fields, keyed by the names
+             * people gave them: one called "createdAt" is theirs to read as
+             * that, not the record's own creation time for the ID line.
+             */
+            showRecordLine={false}
             item={getDisplayValues()}
             fields={schemaList.map((schemaItem: BaseModel) => {
               const isDropdown: boolean =
@@ -456,7 +468,10 @@ const CustomFieldsDetail: FunctionComponent<ComponentProps> = (
 
         {showModelForm && (
           <BasicFormModal
-            title={"Edit " + new props.modelType().singularName}
+            title={translateNamedAction(translator, {
+              template: "Edit {{itemName}}",
+              itemName: new props.modelType().singularName || "",
+            })}
             onClose={() => {
               return setShowModelForm(false);
             }}

package/UI/Components/CustomFields/DropdownOptionsInput.tsx

@@ -16,6 +16,8 @@ import React, {
   useRef,
   useState,
 } from "react";
+import { Translator } from "../../Utils/TranslateTemplate";
+import useTranslator from "../../Utils/UseTranslator";
 
 export interface ComponentProps {
   initialValue?: string | undefined;
@@ -32,6 +34,7 @@ interface EditableDropdownOption extends CustomFieldDropdownOption {
 const DropdownOptionsInput: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
+  const translator: Translator = useTranslator();
   const nextIdRef: MutableRefObject<number> = useRef<number>(0);
 
   const createEditableOption: (
@@ -165,13 +168,20 @@ const DropdownOptionsInput: FunctionComponent<ComponentProps> = (
                   id={`dropdown-option-value-${option.id}-label`}
                   className="sr-only"
                 >
-                  Dropdown option {index + 1}
+                  {translator.translateTemplate("Dropdown option {{number}}", {
+                    number: index + 1,
+                  })}
                 </span>
                 <Input
                   value={option.value}
                   dataTestId={`dropdown-option-value-${index}`}
                   ariaLabelledby={`dropdown-option-value-${option.id}-label`}
-                  placeholder={props.placeholder || `Option ${index + 1}`}
+                  placeholder={
+                    translator.translateText(props.placeholder) ||
+                    translator.translateTemplate("Option {{number}}", {
+                      number: index + 1,
+                    })
+                  }
                   onChange={(newValue: string) => {
                     updateAt(option.id, { value: newValue });
                   }}
@@ -188,7 +198,16 @@ const DropdownOptionsInput: FunctionComponent<ComponentProps> = (
                   id={`dropdown-option-color-${option.id}-label`}
                   className="sr-only"
                 >
-                  Color for {option.value || `option ${index + 1}`}
+                  {option.value
+                    ? translator.translateTemplate("Color for {{option}}", {
+                        option: option.value,
+                      })
+                    : translator.translateTemplate(
+                        "Color for option {{number}}",
+                        {
+                          number: index + 1,
+                        },
+                      )}
                 </span>
                 <ColorPicker
                   dataTestId={`dropdown-option-color-${index}`}

package/UI/Components/CustomFields/MapFromCustomFieldInput.tsx

@@ -1,5 +1,9 @@
 import API from "../../Utils/API/API";
 import ModelAPI, { ListResult } from "../../Utils/ModelAPI/ModelAPI";
+import useTranslateValue from "../../Utils/Translation";
+import { translatableTerm, Translator } from "../../Utils/TranslateTemplate";
+import useTranslator from "../../Utils/UseTranslator";
+import TranslatedSentence from "../TranslatedSentence/TranslatedSentence";
 import ComponentLoader from "../ComponentLoader/ComponentLoader";
 import Dropdown, { DropdownOption, DropdownValue } from "../Dropdown/Dropdown";
 import ErrorMessage from "../ErrorMessage/ErrorMessage";
@@ -35,6 +39,12 @@ import React, {
  * or deleted — is still shown, flagged. The mapping has quietly stopped
  * resolving at that point, and the settings page is the only place anyone
  * would find out.
+ *
+ * A NEW mapped field turns this around (offerEveryType): the field does not
+ * have a type yet, it takes the type - and a dropdown's options - of the
+ * field it copies. So every field of the source is offered, each with its
+ * type under its name, and the one picked says which type the new field
+ * will be.
  */
 
 export interface ComponentProps {
@@ -45,11 +55,34 @@ export interface ComponentProps {
   sourceTitle: string;
   /** The type this field holds; only same-typed sources can be mapped. */
   targetFieldType?: CustomFieldType | undefined;
+  /*
+   * For a field that is being created as a copy: offer every field of the
+   * source, whatever its type, because the new field takes the type of the
+   * one picked. targetFieldType is then ignored.
+   */
+  offerEveryType?: boolean | undefined;
+  /*
+   * A type's name as the settings pages name it ("Dropdown (single
+   * select)"), in English - it is translated here. Shown under each field
+   * when every type is offered, and for the picked one.
+   */
+  describeFieldType?:
+    | ((type: CustomFieldType | undefined) => string | undefined)
+    | undefined;
+  // The picker's placeholder, translated here.
+  placeholder?: string | undefined;
+  /*
+   * What to say when every type is offered and the source has no custom
+   * fields at all, translated here.
+   */
+  noSourceFieldsMessage?: string | undefined;
   initialValue?: string | undefined;
   onChange?: ((value: string) => void) | undefined;
   onBlur?: (() => void) | undefined;
   error?: string | undefined;
   tabIndex?: number | undefined;
+  // The form field's label, which names the picker.
+  ariaLabelledby?: string | undefined;
 }
 
 interface SourceField {
@@ -60,6 +93,8 @@ interface SourceField {
 const MapFromCustomFieldInput: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
+  const { translateString } = useTranslateValue();
+  const translator: Translator = useTranslator();
   const [sourceFields, setSourceFields] = useState<Array<SourceField>>([]);
   const [isLoading, setIsLoading] = useState<boolean>(true);
   const [loadError, setLoadError] = useState<string>("");
@@ -137,6 +172,11 @@ const MapFromCustomFieldInput: FunctionComponent<ComponentProps> = (
         return false;
       }
 
+      // A new field takes the type of the one it copies: any will do.
+      if (props.offerEveryType) {
+        return true;
+      }
+
       /*
        * With no type chosen yet there is nothing to be compatible with, so
        * offer nothing rather than a list that will be rejected on save.
@@ -148,7 +188,18 @@ const MapFromCustomFieldInput: FunctionComponent<ComponentProps> = (
       return field.customFieldType === props.targetFieldType;
     })
     .map((field: SourceField): DropdownOption => {
-      return { label: field.name, value: field.name };
+      const option: DropdownOption = { label: field.name, value: field.name };
+
+      const typeLabel: string | undefined = props.offerEveryType
+        ? props.describeFieldType?.(field.customFieldType)
+        : undefined;
+
+      // The Dropdown translates an option's description itself.
+      if (typeLabel) {
+        option.description = typeLabel;
+      }
+
+      return option;
     });
 
   const isSelectedValueOffered: boolean = options.some(
@@ -159,7 +210,13 @@ const MapFromCustomFieldInput: FunctionComponent<ComponentProps> = (
 
   if (selectedValue && !isSelectedValueOffered) {
     options.unshift({
-      label: `${selectedValue} (no longer available on ${props.sourceTitle})`,
+      label: translator.translateTemplate(
+        "{{value}} (no longer available on {{source}})",
+        {
+          value: String(selectedValue),
+          source: translatableTerm(props.sourceTitle),
+        },
+      ),
       value: selectedValue,
     });
   }
@@ -172,7 +229,21 @@ const MapFromCustomFieldInput: FunctionComponent<ComponentProps> = (
     return <ErrorMessage message={loadError} />;
   }
 
-  if (!props.targetFieldType) {
+  if (props.offerEveryType && options.length === 0) {
+    return (
+      <ErrorMessage
+        message={
+          props.noSourceFieldsMessage ||
+          translator.translateTemplate(
+            "No {{source}} custom field exists in this project yet. Create one first.",
+            { source: translatableTerm(props.sourceTitle) },
+          )
+        }
+      />
+    );
+  }
+
+  if (!props.offerEveryType && !props.targetFieldType) {
     return (
       <ErrorMessage message="Choose a field type above before picking the field to map from." />
     );
@@ -181,35 +252,76 @@ const MapFromCustomFieldInput: FunctionComponent<ComponentProps> = (
   if (options.length === 0) {
     return (
       <ErrorMessage
-        message={`No ${props.sourceTitle} custom field of this type exists in this project. Create one first, or choose a different field type.`}
+        message={translator.translateTemplate(
+          "No {{source}} custom field of this type exists in this project. Create one first, or choose a different field type.",
+          { source: translatableTerm(props.sourceTitle) },
+        )}
       />
     );
   }
 
+  /*
+   * The type the new field will have: the picked field's. Said under the
+   * picker, because the menu's line under each name is gone once one is
+   * picked.
+   */
+  const selectedField: SourceField | undefined = props.offerEveryType
+    ? sourceFields.find((field: SourceField) => {
+        return field.name === selectedValue;
+      })
+    : undefined;
+
+  const selectedTypeLabel: string | undefined = selectedField
+    ? props.describeFieldType?.(selectedField.customFieldType)
+    : undefined;
+
+  const placeholder: string =
+    props.placeholder || `Select a ${props.sourceTitle} custom field`;
+
   return (
-    <Dropdown
-      options={options}
-      value={options.find((option: DropdownOption) => {
-        return option.value === selectedValue;
-      })}
-      tabIndex={props.tabIndex}
-      error={props.error}
-      placeholder={`Select a ${props.sourceTitle} custom field`}
-      onBlur={() => {
-        if (props.onBlur) {
-          props.onBlur();
-        }
-      }}
-      onChange={(value: DropdownValue | Array<DropdownValue> | null) => {
-        const nextValue: string = value ? value.toString() : "";
+    <div>
+      <Dropdown
+        options={options}
+        value={options.find((option: DropdownOption) => {
+          return option.value === selectedValue;
+        })}
+        tabIndex={props.tabIndex}
+        error={props.error}
+        placeholder={placeholder}
+        ariaLabelledby={props.ariaLabelledby}
+        onBlur={() => {
+          if (props.onBlur) {
+            props.onBlur();
+          }
+        }}
+        onChange={(value: DropdownValue | Array<DropdownValue> | null) => {
+          const nextValue: string = value ? value.toString() : "";
 
-        setSelectedValue(nextValue);
+          setSelectedValue(nextValue);
 
-        if (props.onChange) {
-          props.onChange(nextValue);
-        }
-      }}
-    />
+          if (props.onChange) {
+            props.onChange(nextValue);
+          }
+        }}
+      />
+      {selectedTypeLabel && (
+        <p
+          className="mt-2 text-sm text-gray-500"
+          data-testid="map-from-selected-field-type"
+        >
+          <TranslatedSentence
+            template="Field Type: {{type}}"
+            slots={{
+              type: (
+                <span className="font-medium text-gray-700">
+                  {translateString(selectedTypeLabel) ?? selectedTypeLabel}
+                </span>
+              ),
+            }}
+          />
+        </p>
+      )}
+    </div>
   );
 };
 

package/UI/Components/Dashboard/DashboardVariableControl.tsx

@@ -5,6 +5,8 @@ import React, {
   useRef,
   useState,
 } from "react";
+import { Translator } from "../../Utils/TranslateTemplate";
+import useTranslator from "../../Utils/UseTranslator";
 import DashboardVariable, {
   DashboardVariableType,
   DashboardVariableOption,
@@ -50,6 +52,7 @@ const MultiSelectPopover: FunctionComponent<{
   unavailableLabel?: string | undefined;
   onChange: (next: Array<string>) => void;
 }): ReactElement => {
+  const translator: Translator = useTranslator();
   const [open, setOpen] = useState<boolean>(false);
   const wrapRef: React.RefObject<HTMLDivElement> = useRef<HTMLDivElement>(null);
 
@@ -112,7 +115,12 @@ const MultiSelectPopover: FunctionComponent<{
       {open && (
         <div className="absolute z-30 mt-1 right-0 w-56 max-h-72 overflow-auto rounded-md border border-gray-200 bg-white shadow-lg py-1">
           <div className="flex items-center justify-between px-3 py-1.5 border-b border-gray-100 text-[11px] text-gray-500">
-            <span>{selected.length} selected</span>
+            <span>
+              {translator.translatePlural(
+                { one: "{{count}} selected", other: "{{count}} selected" },
+                selected.length,
+              )}
+            </span>
             <button
               type="button"
               className="text-blue-600 hover:underline disabled:text-gray-300"
@@ -121,17 +129,25 @@ const MultiSelectPopover: FunctionComponent<{
                 onChange([]);
               }}
             >
-              Clear
+              {translator.translateText("Clear")}
             </button>
           </div>
           {maxSelections !== undefined && selected.length >= maxSelections && (
             <p className="px-3 py-1 text-xs text-gray-500">
-              Choose up to {maxSelections} labels.
+              {translator.translatePlural(
+                {
+                  one: "Choose up to {{count}} label.",
+                  other: "Choose up to {{count}} labels.",
+                },
+                maxSelections,
+              )}
             </p>
           )}
           {options.length === 0 ? (
             <div className="px-3 py-2 text-xs text-gray-400">
-              {isLoading ? "Loading options…" : "No options available"}
+              {translator.translateText(
+                isLoading ? "Loading options…" : "No options available",
+              )}
             </div>
           ) : (
             options.map((option: DashboardVariableOption) => {
@@ -168,6 +184,7 @@ const MultiSelectPopover: FunctionComponent<{
 const DashboardVariableControl: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
+  const translator: Translator = useTranslator();
   const { variable } = props;
   const isTelemetryAttribute: boolean =
     variable.type === DashboardVariableType.TelemetryAttribute;
@@ -258,11 +275,15 @@ const DashboardVariableControl: FunctionComponent<ComponentProps> = (
           }}
         >
           <option value="">
-            {props.isLoadingOptions ? "Loading…" : "All"}
+            {translator.translateText(
+              props.isLoadingOptions ? "Loading…" : "All",
+            )}
           </option>
           {isUnavailableSelection && (
             <option value={selectedValue}>
-              {isProjectLabel ? "Unavailable label" : selectedValue}
+              {isProjectLabel
+                ? translator.translateText("Unavailable label")
+                : selectedValue}
             </option>
           )}
           {options.map((option: DashboardVariableOption) => {