@oneuptime/common 14.0.12 → 14.0.13

package/UI/Components/TimePicker/TimePicker.tsx

@@ -6,6 +6,8 @@ import React, {
   useRef,
   useState,
 } from "react";
+import { Translator } from "../../Utils/TranslateTemplate";
+import useTranslator from "../../Utils/UseTranslator";
 import OneUptimeDate from "../../../Types/Date";
 import Icon from "../Icon/Icon";
 import IconProp from "../../../Types/Icon/IconProp";
@@ -55,6 +57,7 @@ const toDate: (v?: string | Date) => Date | undefined = (
 const TimePicker: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
+  const translator: Translator = useTranslator();
   // Start with project-level preference (works on server), then update to browser preference on mount
   const [userPrefers12h, setUserPrefers12h] = useState<boolean>(
     OneUptimeDate.getUserPrefers12HourFormat(),
@@ -165,7 +168,7 @@ const TimePicker: FunctionComponent<ComponentProps> = (
           " mt-2"
         }
         role="group"
-        aria-label="Time input"
+        aria-label={translator.translateText("Time input")}
         aria-labelledby={props.ariaLabelledby}
         aria-disabled={props.disabled ? true : undefined}
         aria-describedby={props.error ? "timepicker-error" : undefined}
@@ -188,13 +191,15 @@ const TimePicker: FunctionComponent<ComponentProps> = (
           autoFocus={props.autoFocus}
           tabIndex={props.tabIndex}
           spellCheck={false}
-          placeholder={props.placeholder || (userPrefers12h ? "hh" : "HH")}
+          placeholder={translator.translateText(
+            props.placeholder || (userPrefers12h ? "hh" : "HH"),
+          )}
           className={
             inputClass +
             " rounded-l-md pl-1 focus:ring-0 focus-visible:outline-none"
           }
           readOnly={true}
-          aria-label="Hours"
+          aria-label={translator.translateText("Hours")}
           aria-invalid={props.error ? true : undefined}
           value={display.hours}
           onFocus={props.onFocus}
@@ -212,13 +217,13 @@ const TimePicker: FunctionComponent<ComponentProps> = (
           inputMode="numeric"
           pattern="[0-9]*"
           spellCheck={false}
-          placeholder="mm"
+          placeholder={translator.translateText("mm")}
           className={
             inputClass +
             " rounded-r-md pr-2 focus:ring-0 focus-visible:outline-none"
           }
           readOnly={true}
-          aria-label="Minutes"
+          aria-label={translator.translateText("Minutes")}
           aria-invalid={props.error ? true : undefined}
           value={display.minutes}
           onBlur={() => {
@@ -234,7 +239,7 @@ const TimePicker: FunctionComponent<ComponentProps> = (
             <div
               className="flex items-center gap-1"
               role="group"
-              aria-label="AM or PM"
+              aria-label={translator.translateText("AM or PM")}
             >
               <button
                 type="button"
@@ -246,10 +251,12 @@ const TimePicker: FunctionComponent<ComponentProps> = (
                 }
                 disabled={!clickable}
                 aria-pressed={!display.isPM}
-                aria-label="Open time selector for AM/PM"
+                aria-label={translator.translateText(
+                  "Open time selector for AM/PM",
+                )}
                 onClick={openModal}
               >
-                AM
+                {translator.translateText("AM")}
               </button>
               <button
                 type="button"
@@ -261,10 +268,12 @@ const TimePicker: FunctionComponent<ComponentProps> = (
                 }
                 disabled={!clickable}
                 aria-pressed={display.isPM}
-                aria-label="Open time selector for AM/PM"
+                aria-label={translator.translateText(
+                  "Open time selector for AM/PM",
+                )}
                 onClick={openModal}
               >
-                PM
+                {translator.translateText("PM")}
               </button>
             </div>
           </div>
@@ -304,7 +313,7 @@ const TimePicker: FunctionComponent<ComponentProps> = (
               <div className="flex flex-col items-center">
                 <button
                   type="button"
-                  aria-label="Increase hours"
+                  aria-label={translator.translateText("Increase hours")}
                   className="p-2 rounded hover:bg-gray-50"
                   onClick={() => {
                     return setTempHours24((h: number): number => {
@@ -318,7 +327,7 @@ const TimePicker: FunctionComponent<ComponentProps> = (
                   type="text"
                   inputMode="numeric"
                   pattern="[0-9]*"
-                  aria-label="Hours"
+                  aria-label={translator.translateText("Hours")}
                   className="w-20 text-center text-3xl font-semibold py-2 rounded border border-gray-200 focus:ring-2 focus:ring-indigo-500"
                   value={
                     userPrefers12h
@@ -342,7 +351,7 @@ const TimePicker: FunctionComponent<ComponentProps> = (
                 />
                 <button
                   type="button"
-                  aria-label="Decrease hours"
+                  aria-label={translator.translateText("Decrease hours")}
                   className="p-2 rounded hover:bg-gray-50"
                   onClick={(): void => {
                     return setTempHours24((h: number): number => {
@@ -360,7 +369,7 @@ const TimePicker: FunctionComponent<ComponentProps> = (
               <div className="flex flex-col items-center">
                 <button
                   type="button"
-                  aria-label="Increase minutes"
+                  aria-label={translator.translateText("Increase minutes")}
                   className="p-2 rounded hover:bg-gray-50"
                   onClick={(): void => {
                     let m: number = tempMinutes + 1;
@@ -379,7 +388,7 @@ const TimePicker: FunctionComponent<ComponentProps> = (
                   type="text"
                   inputMode="numeric"
                   pattern="[0-9]*"
-                  aria-label="Minutes"
+                  aria-label={translator.translateText("Minutes")}
                   className="w-20 text-center text-3xl font-semibold py-2 rounded border border-gray-200 focus:ring-2 focus:ring-indigo-500"
                   value={pad2(tempMinutes)}
                   onChange={(e: React.ChangeEvent<HTMLInputElement>): void => {
@@ -390,7 +399,7 @@ const TimePicker: FunctionComponent<ComponentProps> = (
                 />
                 <button
                   type="button"
-                  aria-label="Decrease minutes"
+                  aria-label={translator.translateText("Decrease minutes")}
                   className="p-2 rounded hover:bg-gray-50"
                   onClick={(): void => {
                     let m: number = tempMinutes - 1;
@@ -420,7 +429,7 @@ const TimePicker: FunctionComponent<ComponentProps> = (
                       }
                     }}
                   >
-                    AM
+                    {translator.translateText("AM")}
                   </button>
                   <button
                     type="button"
@@ -432,7 +441,7 @@ const TimePicker: FunctionComponent<ComponentProps> = (
                       }
                     }}
                   >
-                    PM
+                    {translator.translateText("PM")}
                   </button>
                 </div>
               )}
@@ -440,7 +449,9 @@ const TimePicker: FunctionComponent<ComponentProps> = (
 
             {/* Quick minutes */}
             <div className="mt-6">
-              <div className="text-sm text-gray-500 mb-2">Quick minutes</div>
+              <div className="text-sm text-gray-500 mb-2">
+                {translator.translateText("Quick minutes")}
+              </div>
               <div className="grid grid-cols-6 gap-2">
                 {[0, 5, 10, 15, 30, 45].map((m: number) => {
                   return (
@@ -459,7 +470,12 @@ const TimePicker: FunctionComponent<ComponentProps> = (
               </div>
             </div>
             <div className="mt-8 text-sm text-gray-500">
-              This time is in your {timezoneLabel} timezone.
+              {translator.translateTemplate(
+                "This time is in your {{timezone}} timezone.",
+                {
+                  timezone: timezoneLabel,
+                },
+              )}
             </div>
           </div>
         </Modal>

package/UI/Components/Toggle/Toggle.tsx

@@ -54,34 +54,45 @@ export interface ComponentProps {
 }
 
 /*
- * The track is the button itself. Every part of a switch has to be visible
- * to be usable (WCAG 1.4.11: 3:1 against what is next to it):
+ * The switch is drawn the way the rest of OneUptime draws its controls: a
+ * filled pill with a white knob that slides across it, no outline.
  *
- *   Off - a white track with a gray-500 outline and a gray-500 knob on the
- *         left. The outline is what says "this is a switch" on a white form
- *         (4.8:1). The old off state, a gray-200 pill with a white knob, was
- *         1.2:1 against the page and 1.2:1 between knob and track, so on a
- *         white modal it all but disappeared.
- *   On  - filled with the brand indigo, a white knob on the right carrying a
- *         tick, so "on" is told by shape as well as by colour.
+ *   Off - a gray-300 track, the grey every input, dropdown and checkbox in
+ *         the product has for its edge, with the white knob on the left.
+ *   On  - the brand indigo-600 of every primary button, the knob on the
+ *         right.
+ *
+ * The knob is the same white disc in both states, with the small shadow
+ * that sets it off the track; only its side changes. Which side it is on,
+ * and a track that goes from light grey to dark indigo (4.3:1 between the
+ * two), tell the states apart without telling them by hue alone.
+ *
+ * The outlined design before this one (a white track with a gray-500
+ * outline and a gray-500 dot that grew into a disc with a tick) did not
+ * look like anything else in the product. The pale gray-200 track before
+ * that one all but disappeared on a white form; gray-300 is the one step
+ * darker that keeps the classic look.
  *
  * The dark theme recolours these through the [data-ou-toggle-*] rules in
- * Common/UI/Styles/Theme.css: indigo-600 is under 3:1 on a dark card. Keep
+ * Common/UI/Styles/Theme.css: indigo-600 is under 3:1 on a dark card, and
+ * the theme's own gray-300 would be as light as the "on" indigo there. Keep
  * every colour class here a literal string, so that sheet and the suites
  * holding it to these classes can see it.
  */
 export const TOGGLE_TRACK_BASE_CLASS: string =
-  "relative inline-flex h-6 w-11 flex-shrink-0 items-center rounded-full border-2 transition-colors duration-200 ease-in-out motion-reduce:transition-none focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-600 focus-visible:ring-offset-2";
+  "relative inline-flex h-6 w-11 flex-shrink-0 items-center rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out motion-reduce:transition-none focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2";
 
-export const TOGGLE_TRACK_OFF_CLASS: string = "border-gray-500 bg-white";
+export const TOGGLE_TRACK_OFF_CLASS: string = "bg-gray-300";
 
-export const TOGGLE_TRACK_ON_CLASS: string = "border-indigo-600 bg-indigo-600";
+export const TOGGLE_TRACK_ON_CLASS: string = "bg-indigo-600";
 
-// Hover only where a press would do something.
-export const TOGGLE_TRACK_OFF_HOVER_CLASS: string = "hover:border-gray-700";
+/*
+ * Hover only where a press would do something, one shade deeper in each
+ * state - on, the same indigo-700 a primary button deepens to.
+ */
+export const TOGGLE_TRACK_OFF_HOVER_CLASS: string = "hover:bg-gray-400";
 
-export const TOGGLE_TRACK_ON_HOVER_CLASS: string =
-  "hover:border-indigo-700 hover:bg-indigo-700";
+export const TOGGLE_TRACK_ON_HOVER_CLASS: string = "hover:bg-indigo-700";
 
 export const TOGGLE_TRACK_ENABLED_CLASS: string = "cursor-pointer";
 
@@ -93,20 +104,20 @@ export const TOGGLE_TRACK_DISABLED_CLASS: string =
   "cursor-not-allowed opacity-50";
 
 /*
- * The knob grows from a 14px dot to a 20px disc as it slides across, so the
- * state is told by size and position for anyone who cannot tell the colours
- * apart.
+ * 20px, filling the track's height inside its 2px clear border.
+ *
+ * Both clear borders are for Windows High Contrast (forced colours), which
+ * paints every background the page colour and drops shadows, but draws a
+ * transparent border in the text colour: the track keeps its outline there
+ * and the knob a ring of its own, so which side it is on still shows. With
+ * no border on the knob, on and off looked the same in that mode.
  */
 export const TOGGLE_KNOB_BASE_CLASS: string =
-  "pointer-events-none inline-flex transform items-center justify-center rounded-full transition-all duration-200 ease-in-out motion-reduce:transition-none";
+  "pointer-events-none inline-block h-5 w-5 rounded-full border border-transparent bg-white shadow transition duration-200 ease-in-out motion-reduce:transition-none";
 
-export const TOGGLE_KNOB_OFF_CLASS: string =
-  "h-3.5 w-3.5 translate-x-[3px] bg-gray-500";
+export const TOGGLE_KNOB_OFF_CLASS: string = "translate-x-0";
 
-export const TOGGLE_KNOB_ON_CLASS: string =
-  "h-5 w-5 translate-x-5 bg-white shadow";
-
-export const TOGGLE_CHECK_CLASS: string = "h-3 w-3 text-indigo-600";
+export const TOGGLE_KNOB_ON_CLASS: string = "translate-x-5";
 
 export interface ToggleClassNames {
   track: string;
@@ -284,24 +295,7 @@ const Toggle: FunctionComponent<ComponentProps> = (
             aria-hidden="true"
             className={classNames.knob}
             data-ou-toggle-knob=""
-          >
-            {isChecked ? (
-              <svg
-                className={TOGGLE_CHECK_CLASS}
-                viewBox="0 0 12 12"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth={2}
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                data-ou-toggle-check=""
-              >
-                <path d="M2.5 6.5 4.75 8.75 9.5 3.75" />
-              </svg>
-            ) : (
-              <></>
-            )}
-          </span>
+          />
         </button>
         {hasTitle || hasDescription || tooltip ? (
           <div className="min-w-0 flex-1">

package/UI/Components/Tooltip/InfoTooltip.tsx

@@ -2,6 +2,8 @@ import React, { FunctionComponent, ReactElement } from "react";
 import IconProp from "../../../Types/Icon/IconProp";
 import Icon from "../Icon/Icon";
 import Tooltip from "./Tooltip";
+import { translatableTerm, Translator } from "../../Utils/TranslateTemplate";
+import useTranslator from "../../Utils/UseTranslator";
 
 /*
  * A small (i) beside a label that explains it on hover or keyboard focus -
@@ -36,6 +38,7 @@ export interface ComponentProps {
 const InfoTooltip: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
+  const translator: Translator = useTranslator();
   const text: string = (props.text || "").trim();
 
   if (!text) {
@@ -46,7 +49,9 @@ const InfoTooltip: FunctionComponent<ComponentProps> = (
     <Tooltip text={text} lazy={true}>
       <button
         type="button"
-        aria-label={`About ${props.label}`}
+        aria-label={translator.translateTemplate("About {{label}}", {
+          label: translatableTerm(props.label),
+        })}
         data-testid={props.dataTestId}
         className={`inline-flex flex-shrink-0 items-center justify-center rounded-full text-gray-400 hover:text-gray-600 focus:outline-none focus-visible:text-gray-600 focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-1 ${
           props.className || ""

package/UI/Components/Tooltip/Tooltip.tsx

@@ -8,6 +8,7 @@ import React, {
 import "tippy.js/dist/tippy.css";
 import "tippy.js/themes/light-border.css";
 import "tippy.js/animations/shift-away-subtle.css";
+import useTranslateValue from "../../Utils/Translation";
 
 export interface ComponentProps {
   text?: string | undefined;
@@ -38,6 +39,8 @@ interface PopupProps extends ComponentProps {
 const TooltipPopup: FunctionComponent<PopupProps> = (
   props: PopupProps,
 ): ReactElement => {
+  const { translateString } = useTranslateValue();
+
   if (!props.text && !props.richContent) {
     return props.children;
   }
@@ -45,7 +48,7 @@ const TooltipPopup: FunctionComponent<PopupProps> = (
   const tooltipContent: ReactElement = props.richContent ? (
     props.richContent
   ) : (
-    <span>{props.text}</span>
+    <span>{translateString(props.text) ?? props.text}</span>
   );
 
   const isRich: boolean = Boolean(props.richContent);

package/UI/Components/TranslatedSentence/TranslatedSentence.tsx

@@ -0,0 +1,76 @@
+import {
+  getSentenceParts,
+  PluralTemplate,
+  SentencePart,
+  TemplateValues,
+  Translator,
+} from "../../Utils/TranslateTemplate";
+import useTranslator from "../../Utils/UseTranslator";
+import React, {
+  Fragment,
+  FunctionComponent,
+  ReactElement,
+  ReactNode,
+} from "react";
+
+/*
+ * A whole sentence in the reader's language with some of its values drawn as
+ * elements - "{{field}} contains {{value}}" with the field and the value in
+ * bold. Gluing translated fragments around the elements instead ("Status" +
+ * t("contains") + "api") reads each word out of context and keeps English
+ * word order in every language; here the locale moves {{field}} and {{value}}
+ * wherever its grammar puts them.
+ *
+ * The slots are drawn exactly as given and never go through translation. A
+ * translation that lost a slot or repeated one falls back to the English
+ * sentence, so nothing the reader needs is dropped.
+ */
+
+export interface ComponentProps {
+  // English template (the translation key), or a count-dependent one.
+  template: string | PluralTemplate;
+  // Picks the form of a PluralTemplate; fills its {{count}}.
+  count?: number | undefined;
+  // Placeholder name -> what to draw there.
+  slots: Record<string, ReactNode>;
+  // Values for the other placeholders (text, numbers, translatableTerm()).
+  values?: TemplateValues | undefined;
+  /*
+   * Draws the text between the slots. By default it is plain text; a flex
+   * row, which drops the spaces at the ends of loose text, can wrap each
+   * piece in an element of its own instead.
+   */
+  renderText?: ((text: string) => ReactNode) | undefined;
+}
+
+const TranslatedSentence: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  const translator: Translator = useTranslator();
+
+  const parts: Array<SentencePart> = getSentenceParts({
+    translator: translator,
+    template: props.template,
+    slots: Object.keys(props.slots),
+    values: props.values,
+    count: props.count,
+  });
+
+  return (
+    <>
+      {parts.map((part: SentencePart, index: number): ReactElement => {
+        return (
+          <Fragment key={index}>
+            {part.kind === "slot"
+              ? props.slots[part.slot]
+              : props.renderText
+                ? props.renderText(part.text)
+                : part.text}
+          </Fragment>
+        );
+      })}
+    </>
+  );
+};
+
+export default TranslatedSentence;

package/UI/Components/Workflow/ArgumentsForm.tsx

@@ -59,6 +59,13 @@ import React, {
   useRef,
   useState,
 } from "react";
+import {
+  translatableTerm,
+  translateText,
+  Translator,
+  translationKey,
+} from "../../Utils/TranslateTemplate";
+import useTranslator from "../../Utils/UseTranslator";
 
 export interface ComponentProps {
   component: NodeDataProp;
@@ -94,14 +101,31 @@ const SINGLE_FIELD_KINDS: Partial<
   [ArgumentControl.DateTime]: ValueSingleFieldKind.DateTime,
 };
 
-type DescribeArgumentFunction = (arg: Argument) => string;
+type DescribeArgumentFunction = (
+  translator: Translator,
+  arg: Argument,
+) => string;
+
+// "Required. Where the email is sent." - the step's own words after the first.
+export const REQUIRED_ARGUMENT_HELP: string = translationKey(
+  "Required. {{description}}",
+);
+export const OPTIONAL_ARGUMENT_HELP: string = translationKey(
+  "Optional. {{description}}",
+);
 
 /*
  * A setting's help: whether it is required, then what it is for. Under the
  * label for most settings, and under a switch's name beside it.
  */
-const describeArgument: DescribeArgumentFunction = (arg: Argument): string => {
-  return `${arg.required ? "Required" : "Optional"}. ${arg.description}`;
+const describeArgument: DescribeArgumentFunction = (
+  translator: Translator,
+  arg: Argument,
+): string => {
+  return translator.translateTemplate(
+    arg.required ? REQUIRED_ARGUMENT_HELP : OPTIONAL_ARGUMENT_HELP,
+    { description: translatableTerm(arg.description) },
+  );
 };
 
 type ValidateTypedValueFunction = (
@@ -130,12 +154,14 @@ export const validateTypedValue: ValidateTypedValueFunction = (
     try {
       URL.fromString(value.trim());
     } catch (err: unknown) {
-      return err instanceof Exception ? err.getMessage() : "URL is not valid.";
+      return err instanceof Exception
+        ? err.getMessage()
+        : (translateText("URL is not valid.") as string);
     }
   }
 
   if (type === ComponentInputType.Email && !Email.isValid(value.trim())) {
-    return "Email is not valid.";
+    return translateText("Email is not valid.") as string;
   }
 
   return null;
@@ -144,6 +170,7 @@ export const validateTypedValue: ValidateTypedValueFunction = (
 const ArgumentsForm: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
+  const translator: Translator = useTranslator();
   const formRef: React.MutableRefObject<FormProps<
     FormValues<JSONObject>
   > | null> = useRef<FormProps<FormValues<JSONObject>> | null>(null);
@@ -546,7 +573,9 @@ const ArgumentsForm: FunctionComponent<ComponentProps> = (
             <ValueSingleField
               kind={singleKind}
               title={isSwitch ? arg.name : undefined}
-              description={isSwitch ? describeArgument(arg) : undefined}
+              description={
+                isSwitch ? describeArgument(translator, arg) : undefined
+              }
               value={
                 singleKind === ValueSingleFieldKind.Boolean
                   ? component.arguments?.[arg.id]
@@ -607,7 +636,13 @@ const ArgumentsForm: FunctionComponent<ComponentProps> = (
                     onChange={row.onChange}
                     multiline={false}
                     placeholder={row.placeholder}
-                    ariaLabel={`${arg.name} value ${row.rowIndex + 1}`}
+                    ariaLabel={translator.translateTemplate(
+                      "{{name}} value {{number}}",
+                      {
+                        name: translatableTerm(arg.name),
+                        number: row.rowIndex + 1,
+                      },
+                    )}
                     dataTestId={`workflow-argument-${arg.id}-value-${row.rowIndex}`}
                   />
                 );
@@ -800,7 +835,7 @@ const ArgumentsForm: FunctionComponent<ComponentProps> = (
                           return showAdvanced;
                         }
                       : undefined,
-                    description: describeArgument(arg),
+                    description: describeArgument(translator, arg),
                     field: {
                       [arg.id]: true,
                     },
@@ -844,10 +879,14 @@ const ArgumentsForm: FunctionComponent<ComponentProps> = (
               }}
             >
               {showAdvanced
-                ? "Hide advanced settings"
-                : `Show ${collapsibleAdvancedArguments.length} advanced setting${
-                    collapsibleAdvancedArguments.length === 1 ? "" : "s"
-                  }`}
+                ? translator.translateText("Hide advanced settings")
+                : translator.translatePlural(
+                    {
+                      one: "Show {{count}} advanced setting",
+                      other: "Show {{count}} advanced settings",
+                    },
+                    collapsibleAdvancedArguments.length,
+                  )}
             </button>
           </div>
         )}