@oneuptime/common 14.0.12 → 14.0.13

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) => {

package/UI/Components/Date/CustomTimeRangeModal.tsx

@@ -4,6 +4,7 @@ import OneUptimeDate from "../../../Types/Date";
 import Dictionary from "../../../Types/Dictionary";
 import IconProp from "../../../Types/Icon/IconProp";
 import useTranslateValue from "../../Utils/Translation";
+import { translationKey } from "../../Utils/TranslateTemplate";
 import Icon from "../Icon/Icon";
 import Input, { InputType } from "../Input/Input";
 import Modal, { ModalWidth } from "../Modal/Modal";
@@ -13,8 +14,9 @@ import Modal, { ModalWidth } from "../Modal/Modal";
  * locale key with the zone as a placeholder: glued onto the English text, the
  * zone made every rendered string unique, so it never matched a translation.
  */
-export const TIMEZONE_NOTE_TEMPLATE: string =
-  "Times are shown in {{abbreviation}}.";
+export const TIMEZONE_NOTE_TEMPLATE: string = translationKey(
+  "Times are shown in {{abbreviation}}.",
+);
 
 export interface ComponentProps {
   /*
@@ -59,15 +61,17 @@ export function getCustomTimeRangeError(
   endDate: Date | null,
 ): CustomTimeRangeValidationError {
   if (!startDate) {
-    return "Pick a start date and time.";
+    return translationKey("Pick a start date and time.");
   }
 
   if (!endDate) {
-    return "Pick an end date and time.";
+    return translationKey("Pick an end date and time.");
   }
 
   if (!OneUptimeDate.isAfter(endDate, startDate)) {
-    return "The end must be after the start. Adjust either end of the range.";
+    return translationKey(
+      "The end must be after the start. Adjust either end of the range.",
+    );
   }
 
   return "";
@@ -176,7 +180,7 @@ const CustomTimeRangeModal: FunctionComponent<ComponentProps> = (
       <div data-testid="custom-time-range-modal" className="space-y-5">
         <div>
           <div className="text-xs font-semibold uppercase tracking-wide text-gray-400">
-            Quick fill
+            {translateString("Quick fill")}
           </div>
           <div className="mt-2 flex flex-wrap gap-2">
             {QUICK_FILL_OPTIONS.map((option: QuickFillOption) => {
@@ -196,7 +200,7 @@ const CustomTimeRangeModal: FunctionComponent<ComponentProps> = (
                       : "border-gray-200 bg-white text-gray-600 hover:border-gray-300 hover:bg-gray-50"
                   }`}
                 >
-                  {option.label}
+                  {translateString(option.label)}
                 </button>
               );
             })}
@@ -213,7 +217,7 @@ const CustomTimeRangeModal: FunctionComponent<ComponentProps> = (
                 icon={IconProp.Calendar}
                 className="h-4 w-4 text-gray-400"
               />
-              From
+              {translateString("From")}
             </label>
             <Input
               id={startFieldId}
@@ -237,7 +241,7 @@ const CustomTimeRangeModal: FunctionComponent<ComponentProps> = (
                 icon={IconProp.Calendar}
                 className="h-4 w-4 text-gray-400"
               />
-              To
+              {translateString("To")}
             </label>
             <Input
               id={endFieldId}
@@ -259,13 +263,13 @@ const CustomTimeRangeModal: FunctionComponent<ComponentProps> = (
             className="rounded-lg border border-gray-200 bg-white p-3"
           >
             <div className="flex items-center justify-between text-sm">
-              <span className="text-gray-500">From</span>
+              <span className="text-gray-500">{translateString("From")}</span>
               <span className="font-medium text-gray-900">
                 {formatDateTime(startDate!)}
               </span>
             </div>
             <div className="mt-2 flex items-center justify-between text-sm">
-              <span className="text-gray-500">To</span>
+              <span className="text-gray-500">{translateString("To")}</span>
               <span className="font-medium text-gray-900">
                 {formatDateTime(endDate!)}
               </span>
@@ -273,7 +277,7 @@ const CustomTimeRangeModal: FunctionComponent<ComponentProps> = (
             <div className="mt-2 flex items-center justify-between border-t border-gray-100 pt-2 text-sm">
               <span className="flex items-center gap-1.5 text-gray-500">
                 <Icon icon={IconProp.Clock} className="h-3.5 w-3.5" />
-                Duration
+                {translateString("Duration")}
               </span>
               <span className="font-medium text-gray-900">{durationText}</span>
             </div>
@@ -288,7 +292,7 @@ const CustomTimeRangeModal: FunctionComponent<ComponentProps> = (
               icon={IconProp.ErrorSolid}
               className="mt-0.5 h-4 w-4 shrink-0 text-red-500"
             />
-            <span>{error}</span>
+            <span>{translateString(error)}</span>
           </div>
         )}
 

package/UI/Components/Date/RangeStartAndEndDateEdit.tsx

@@ -10,6 +10,10 @@ import TimeRange from "../../../Types/Time/TimeRange";
 import OneUptimeDate from "../../../Types/Date";
 import Icon from "../Icon/Icon";
 import IconProp from "../../../Types/Icon/IconProp";
+import { getTimeRangeLabel } from "./TimeRangePickerDropdown";
+import TranslatedSentence from "../TranslatedSentence/TranslatedSentence";
+import { Translator } from "../../Utils/TranslateTemplate";
+import useTranslator from "../../Utils/UseTranslator";
 
 export interface ComponentProps {
   value?: RangeStartAndEndDateTime | undefined;
@@ -44,6 +48,7 @@ const QUICK_RANGES: Array<TimeRange> = [
 const RangeStartAndEndDateEdit: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
+  const translator: Translator = useTranslator();
   const selectedRange: TimeRange =
     props.value?.range || TimeRange.PAST_ONE_HOUR;
   const isCustom: boolean = selectedRange === TimeRange.CUSTOM;
@@ -121,10 +126,10 @@ const RangeStartAndEndDateEdit: FunctionComponent<ComponentProps> = (
       <div
         className="md:w-52 md:shrink-0 md:pr-4 md:max-h-96 md:overflow-y-auto"
         role="radiogroup"
-        aria-label="Time range"
+        aria-label={translator.translateText("Time range")}
       >
         <div className="px-1 pb-2 text-xs font-semibold uppercase tracking-wide text-gray-400">
-          Quick ranges
+          {translator.translateText("Quick ranges")}
         </div>
         <div className="grid grid-cols-2 gap-1 md:grid-cols-1">
           {QUICK_RANGES.map((range: TimeRange) => {
@@ -145,7 +150,7 @@ const RangeStartAndEndDateEdit: FunctionComponent<ComponentProps> = (
                     : "text-gray-700 hover:bg-gray-100"
                 }`}
               >
-                {range}
+                {translator.translateText(getTimeRangeLabel(range))}
               </button>
             );
           })}
@@ -163,7 +168,7 @@ const RangeStartAndEndDateEdit: FunctionComponent<ComponentProps> = (
             }`}
           >
             <Icon icon={IconProp.Calendar} className="h-4 w-4" />
-            Custom range
+            {translator.translateText("Custom range")}
           </button>
         </div>
       </div>
@@ -173,10 +178,12 @@ const RangeStartAndEndDateEdit: FunctionComponent<ComponentProps> = (
         {isCustom ? (
           <div>
             <div className="text-sm font-medium text-gray-900">
-              Custom range
+              {translator.translateText("Custom range")}
             </div>
             <div className="mt-0.5 text-xs text-gray-500">
-              Pick the exact start and end date &amp; time.
+              {translator.translateText(
+                "Pick the exact start and end date & time.",
+              )}
             </div>
             <StartAndEndDate
               type={StartAndEndDateType.DateTime}
@@ -195,11 +202,16 @@ const RangeStartAndEndDateEdit: FunctionComponent<ComponentProps> = (
               <div className="mt-2 flex items-center gap-1.5 text-xs text-gray-500">
                 <Icon icon={IconProp.Clock} className="h-3.5 w-3.5" />
                 <span>
-                  Showing{" "}
-                  <span className="font-medium text-gray-700">
-                    {customDuration}
-                  </span>{" "}
-                  of data.
+                  <TranslatedSentence
+                    template="Showing {{duration}} of data."
+                    slots={{
+                      duration: (
+                        <span className="font-medium text-gray-700">
+                          {customDuration}
+                        </span>
+                      ),
+                    }}
+                  />
                 </span>
               </div>
             ) : (
@@ -209,27 +221,35 @@ const RangeStartAndEndDateEdit: FunctionComponent<ComponentProps> = (
         ) : (
           <div>
             <div className="text-sm font-medium text-gray-900">
-              {selectedRange}
+              {translator.translateText(getTimeRangeLabel(selectedRange))}
             </div>
             <div className="mt-0.5 text-xs text-gray-500">
-              Relative to now &mdash; updates every time the dashboard loads.
+              {translator.translateText(
+                "Relative to now — updates every time the dashboard loads.",
+              )}
             </div>
             <div className="mt-3 space-y-2 rounded-md border border-gray-200 bg-gray-50 p-3">
               <div className="flex items-center justify-between text-sm">
-                <span className="text-gray-500">From</span>
+                <span className="text-gray-500">
+                  {translator.translateText("From")}
+                </span>
                 <span className="font-medium text-gray-900">
                   {formatDateTime(resolvedRange.startValue)}
                 </span>
               </div>
               <div className="flex items-center justify-between text-sm">
-                <span className="text-gray-500">To</span>
+                <span className="text-gray-500">
+                  {translator.translateText("To")}
+                </span>
                 <span className="font-medium text-gray-900">
                   {formatDateTime(resolvedRange.endValue)}
                 </span>
               </div>
               {previewDuration ? (
                 <div className="flex items-center justify-between border-t border-gray-200 pt-2 text-sm">
-                  <span className="text-gray-500">Duration</span>
+                  <span className="text-gray-500">
+                    {translator.translateText("Duration")}
+                  </span>
                   <span className="font-medium text-gray-900">
                     {previewDuration}
                   </span>

package/UI/Components/Date/RangeStartAndEndDateView.tsx

@@ -8,6 +8,9 @@ import Icon from "../Icon/Icon";
 import Tooltip from "../Tooltip/Tooltip";
 import RangeStartAndEndDateEdit from "./RangeStartAndEndDateEdit";
 import Modal, { ModalWidth } from "../Modal/Modal";
+import { getTimeRangeLabel } from "./TimeRangePickerDropdown";
+import { Translator } from "../../Utils/TranslateTemplate";
+import useTranslator from "../../Utils/UseTranslator";
 
 export interface ComponentProps {
   dashboardStartAndEndDate: RangeStartAndEndDateTime;
@@ -17,6 +20,7 @@ export interface ComponentProps {
 const DashboardStartAndEndDateView: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
+  const translator: Translator = useTranslator();
   const [tempStartAndEndDate, setTempStartAndEndDate] =
     useState<RangeStartAndEndDateTime | null>(null);
   const [showTimeSelectModal, setShowTimeSelectModal] =
@@ -80,7 +84,11 @@ const DashboardStartAndEndDateView: FunctionComponent<ComponentProps> = (
       )}`;
     }
 
-    return props.dashboardStartAndEndDate.range;
+    return (
+      translator.translateText(
+        getTimeRangeLabel(props.dashboardStartAndEndDate.range),
+      ) || props.dashboardStartAndEndDate.range
+    );
   };
 
   const getContent: GetReactElementFunction = (): ReactElement => {

package/UI/Components/Date/StartAndEndDate.tsx

@@ -2,6 +2,8 @@ import Button, { ButtonSize, ButtonStyleType } from "../Button/Button";
 import Input, { InputType } from "../Input/Input";
 import InBetween from "../../../Types/BaseDatabase/InBetween";
 import OneUptimeDate from "../../../Types/Date";
+import { Translator } from "../../Utils/TranslateTemplate";
+import useTranslator from "../../Utils/UseTranslator";
 import React, { ReactElement, useEffect } from "react";
 
 export enum StartAndEndDateType {
@@ -21,6 +23,7 @@ type DateFilterFunction = (props: ComponentProps) => ReactElement;
 const StartAndEndDate: DateFilterFunction = (
   props: ComponentProps,
 ): ReactElement => {
+  const translator: Translator = useTranslator();
   const [startDateError, setStartDateError] = React.useState<string>("");
   const [endDateError, setEndDateError] = React.useState<string>("");
 
@@ -128,7 +131,9 @@ const StartAndEndDate: DateFilterFunction = (
       <div>
         <div className="flex flex-col md:flex-row md:space-x-3 space-y-3 md:space-y-0 mt-1">
           <div className="w-full md:w-1/2">
-            <div className="text-xs text-gray-500">From:</div>
+            <div className="text-xs text-gray-500">
+              {translator.translateText("From:")}
+            </div>
             <div>
               <Input
                 error={startDateError}
@@ -165,7 +170,9 @@ const StartAndEndDate: DateFilterFunction = (
             </div>
           </div>
           <div className="w-full md:w-1/2">
-            <div className="text-xs text-gray-500">To:</div>
+            <div className="text-xs text-gray-500">
+              {translator.translateText("To:")}
+            </div>
             <div>
               <Input
                 error={endDateError}