@oneuptime/common 14.0.12 → 14.0.13

package/UI/Components/BulkUpdate/BulkUpdateForm.tsx

@@ -13,8 +13,40 @@ import { Green, Red } from "../../../Types/BrandColors";
 import { LIMIT_PER_PROJECT } from "../../../Types/Database/LimitMax";
 import GenericObject from "../../../Types/GenericObject";
 import IconProp from "../../../Types/Icon/IconProp";
+import {
+  PluralTemplate,
+  TranslatableTerm,
+  translatableTerm,
+  Translator,
+} from "../../Utils/TranslateTemplate";
+import useTranslator from "../../Utils/UseTranslator";
 import React, { ReactElement } from "react";
 
+/*
+ * The bulk-action bar's sentences. The labels are the table's English nouns,
+ * translated with the sentence; the count picks the language's plural form.
+ */
+export const BULK_SELECTED_COUNT: PluralTemplate = {
+  one: "{{count}} {{itemName}} Selected",
+  other: "{{count}} {{itemsName}} Selected",
+};
+
+export const BULK_SUCCEEDED_COUNT: PluralTemplate = {
+  one: "{{count}} {{itemName}} succeeded",
+  other: "{{count}} {{itemsName}} succeeded",
+};
+
+export const BULK_FAILED_COUNT: PluralTemplate = {
+  one: "{{count}} {{itemName}} failed",
+  other: "{{count}} {{itemsName}} failed",
+};
+
+export const BULK_SELECTION_LIMIT: PluralTemplate = {
+  one: "Selected {{selected}} of {{count}} matching {{itemName}}. You can only select {{limit}} {{itemsName}} at a time, for performance reasons, so bulk actions will apply to the selected {{selected}} only.",
+  other:
+    "Selected {{selected}} of {{count}} matching {{itemsName}}. You can only select {{limit}} {{itemsName}} at a time, for performance reasons, so bulk actions will apply to the selected {{selected}} only.",
+};
+
 export interface BulkActionFailed<T extends GenericObject> {
   failedMessage: string | ReactElement;
   item: T;
@@ -43,7 +75,11 @@ export interface BulkActionOnClickProps<T extends GenericObject> {
 
 export interface BulkActionButtonSchema<T extends GenericObject> {
   title: string;
-  icon?: undefined | IconProp;
+  /*
+   * Required: every item in the Bulk Actions menu has an icon, as every item
+   * in a row's ⋯ menu does (see ActionButtonSchema).
+   */
+  icon: IconProp;
   buttonStyleType: ButtonStyleType;
   isLoading?: boolean | undefined;
   isVisible?: (items: Array<T>) => boolean | undefined;
@@ -106,6 +142,14 @@ const BulkUpdateForm: <T extends GenericObject>(
 ) => ReactElement = <T extends GenericObject>(
   props: ComponentProps<T>,
 ): ReactElement => {
+  const translator: Translator = useTranslator();
+  // The bar writes the table's labels as given: "2 Monitors succeeded".
+  const itemTerm: TranslatableTerm = translatableTerm(props.singularLabel);
+  const itemsTerm: TranslatableTerm = translatableTerm(props.pluralLabel);
+  const tx: (text: string) => string = (text: string): string => {
+    return translator.translateText(text) || text;
+  };
+
   const [confirmModalProps, setConfirmModalProps] =
     React.useState<ConfirmModalProps | null>(null);
 
@@ -176,7 +220,7 @@ const BulkUpdateForm: <T extends GenericObject>(
       setConfirmModalProps({
         title: button.confirmTitle
           ? button.confirmTitle(props.selectedItems)
-          : "Confirm",
+          : tx("Confirm"),
         description: button.confirmMessage(props.selectedItems),
         children: button.confirmDetails?.(props.selectedItems),
         submitButtonType: button.confirmButtonStyleType,
@@ -235,8 +279,9 @@ const BulkUpdateForm: <T extends GenericObject>(
       return (
         <div className="space-y-4">
           <p className="text-sm text-gray-500">
-            Please wait while the bulk action is being performed. This may take
-            a moment.
+            {tx(
+              "Please wait while the bulk action is being performed. This may take a moment.",
+            )}
           </p>
           <ProgressBar
             count={
@@ -266,11 +311,15 @@ const BulkUpdateForm: <T extends GenericObject>(
                   color={Green}
                 />
                 <div className="ml-2 text-sm font-medium text-green-800">
-                  {progressInfo.successItems.length}{" "}
-                  {progressInfo.successItems.length === 1
-                    ? props.singularLabel
-                    : props.pluralLabel}{" "}
-                  succeeded
+                  {translator.translatePlural(
+                    BULK_SUCCEEDED_COUNT,
+                    progressInfo.successItems.length,
+                    {
+                      count: String(progressInfo.successItems.length),
+                      itemName: itemTerm,
+                      itemsName: itemsTerm,
+                    },
+                  )}
                 </div>
               </div>
             )}
@@ -282,11 +331,15 @@ const BulkUpdateForm: <T extends GenericObject>(
                   color={Red}
                 />
                 <div className="ml-2 text-sm font-medium text-red-800">
-                  {progressInfo.failed.length}{" "}
-                  {progressInfo.failed.length === 1
-                    ? props.singularLabel
-                    : props.pluralLabel}{" "}
-                  failed
+                  {translator.translatePlural(
+                    BULK_FAILED_COUNT,
+                    progressInfo.failed.length,
+                    {
+                      count: String(progressInfo.failed.length),
+                      itemName: itemTerm,
+                      itemsName: itemsTerm,
+                    },
+                  )}
                 </div>
               </div>
             )}
@@ -364,16 +417,20 @@ const BulkUpdateForm: <T extends GenericObject>(
                   className="h-4 w-4 text-indigo-600"
                 />
                 <span>
-                  {props.selectedItems.length}{" "}
                   {/*
                    * The singular when there is one of them. The badge is the
                    * one sentence in this bar that is always on screen, and
                    * "1 resources Selected" reads as a bug in the count.
                    */}
-                  {props.selectedItems.length === 1
-                    ? props.singularLabel
-                    : props.pluralLabel}{" "}
-                  Selected
+                  {translator.translatePlural(
+                    BULK_SELECTED_COUNT,
+                    props.selectedItems.length,
+                    {
+                      count: String(props.selectedItems.length),
+                      itemName: itemTerm,
+                      itemsName: itemsTerm,
+                    },
+                  )}
                 </span>
               </div>
 
@@ -407,9 +464,12 @@ const BulkUpdateForm: <T extends GenericObject>(
                     className="h-3.5 w-3.5"
                   />
                   <span>
-                    {props.isSelectingAllItems
-                      ? `Selecting All ${props.pluralLabel}...`
-                      : `Select All ${props.pluralLabel}`}
+                    {translator.translateTemplate(
+                      props.isSelectingAllItems
+                        ? "Selecting All {{itemsName}}..."
+                        : "Select All {{itemsName}}",
+                      { itemsName: itemsTerm },
+                    )}
                   </span>
                 </button>
               )}
@@ -423,7 +483,7 @@ const BulkUpdateForm: <T extends GenericObject>(
                 className="inline-flex items-center gap-1.5 rounded-lg border border-gray-300 bg-white px-3 py-1.5 text-sm font-medium text-gray-700 shadow-sm hover:bg-red-50 hover:border-red-300 hover:text-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 transition-all duration-150 cursor-pointer select-none"
               >
                 <Icon icon={IconProp.Close} className="h-3.5 w-3.5" />
-                <span>Clear Selection</span>
+                <span>{tx("Clear Selection")}</span>
               </button>
             </div>
 
@@ -436,7 +496,7 @@ const BulkUpdateForm: <T extends GenericObject>(
                         icon={IconProp.Bolt}
                         className="h-4 w-4 text-gray-500"
                       />
-                      <span>Bulk Actions</span>
+                      <span>{tx("Bulk Actions")}</span>
                       <Icon
                         icon={IconProp.ChevronDown}
                         className="h-3.5 w-3.5 text-gray-400 ml-0.5"
@@ -452,12 +512,16 @@ const BulkUpdateForm: <T extends GenericObject>(
 
           {showLimitWarning && (
             <div className="mt-2 text-xs text-gray-500">
-              Selected {props.selectedItems.length.toLocaleString()} of{" "}
-              {totalMatchingItemsCount.toLocaleString()} matching{" "}
-              {props.pluralLabel}. You can only select{" "}
-              {LIMIT_PER_PROJECT.toLocaleString()} {props.pluralLabel} at a
-              time, for performance reasons, so bulk actions will apply to the
-              selected {props.selectedItems.length.toLocaleString()} only.
+              {translator.translatePlural(
+                BULK_SELECTION_LIMIT,
+                totalMatchingItemsCount,
+                {
+                  selected: translator.formatNumber(props.selectedItems.length),
+                  limit: translator.formatNumber(LIMIT_PER_PROJECT),
+                  itemName: itemTerm,
+                  itemsName: itemsTerm,
+                },
+              )}
             </div>
           )}
 

package/UI/Components/Button/Button.tsx

@@ -283,7 +283,7 @@ const Button: FunctionComponent<ComponentProps> = ({
 
   // For icon-only buttons, use title as aria-label for accessibility
   const computedAriaLabel: string | undefined =
-    ariaLabel ||
+    translateString(ariaLabel) ||
     (buttonStyle === ButtonStyleType.ICON ||
     buttonStyle === ButtonStyleType.ICON_LIGHT
       ? translatedTitle || translatedTooltip

package/UI/Components/Button/DropdownButton.tsx

@@ -48,7 +48,7 @@ const DropdownButton: React.FC<DropdownButtonProps> = ({
           aria-haspopup="true"
           onClick={toggleDropdown}
         >
-          <span className="sr-only">Open options</span>
+          <span className="sr-only">{translateString("Open options")}</span>
           <svg
             className="size-5"
             viewBox="0 0 20 20"

package/UI/Components/CSVFileUpload/CSVFileUpload.tsx

@@ -8,6 +8,9 @@ import React, {
   useRef,
   useState,
 } from "react";
+import { Translator } from "../../Utils/TranslateTemplate";
+import useTranslator from "../../Utils/UseTranslator";
+import TranslatedSentence from "../TranslatedSentence/TranslatedSentence";
 
 export interface CSVColumn {
   key: string;
@@ -90,6 +93,7 @@ const parseCSV: ParseCSVFunction = (text: string): Array<Array<string>> => {
 const CSVFileUpload: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
+  const translator: Translator = useTranslator();
   const [error, setError] = useState<string>("");
   const [parsedRows, setParsedRows] = useState<Array<CSVRow>>([]);
   const [fileName, setFileName] = useState<string>("");
@@ -160,7 +164,10 @@ const CSVFileUpload: FunctionComponent<ComponentProps> = (
           columnMap.set(index, col);
         } else if (col.required) {
           setError(
-            `Required column "${col.title}" not found in CSV headers. Found: ${headerRow.join(", ")}`,
+            translator.translateTemplate(
+              'Required column "{{column}}" not found in CSV headers. Found: {{found}}',
+              { column: col.title, found: headerRow.join(", ") },
+            ),
           );
           return;
         }
@@ -180,7 +187,12 @@ const CSVFileUpload: FunctionComponent<ComponentProps> = (
 
           if (col.required && !value) {
             hasRequiredFields = false;
-            errors.push(`Row ${i}: missing required field "${col.title}"`);
+            errors.push(
+              translator.translateTemplate(
+                'Row {{row}}: missing required field "{{column}}"',
+                { row: i, column: col.title },
+              ),
+            );
           }
         }
 
@@ -190,10 +202,29 @@ const CSVFileUpload: FunctionComponent<ComponentProps> = (
       }
 
       if (dataRows.length === 0) {
+        const firstErrors: string = errors.slice(0, 3).join(". ");
+
         setError(
-          errors.length > 0
-            ? `No valid rows found. ${errors.slice(0, 3).join(". ")}${errors.length > 3 ? ` and ${errors.length - 3} more errors.` : ""}`
-            : "No valid data rows found in the CSV file.",
+          errors.length > 3
+            ? translator.translatePlural(
+                {
+                  one: "No valid rows found. {{errors}} and {{count}} more error.",
+                  other:
+                    "No valid rows found. {{errors}} and {{count}} more errors.",
+                },
+                errors.length - 3,
+                { errors: firstErrors },
+              )
+            : errors.length > 0
+              ? translator.translateTemplate(
+                  "No valid rows found. {{errors}}",
+                  {
+                    errors: firstErrors,
+                  },
+                )
+              : translator.translateText(
+                  "No valid data rows found in the CSV file.",
+                ) || "",
         );
         return;
       }
@@ -201,7 +232,19 @@ const CSVFileUpload: FunctionComponent<ComponentProps> = (
       if (errors.length > 0 && dataRows.length > 0) {
         // Some rows were skipped but we have valid data
         setError(
-          `${errors.length} row(s) skipped due to missing required fields. ${dataRows.length} valid row(s) found.`,
+          `${translator.translatePlural(
+            {
+              one: "{{count}} row skipped due to missing required fields.",
+              other: "{{count}} rows skipped due to missing required fields.",
+            },
+            errors.length,
+          )} ${translator.translatePlural(
+            {
+              one: "{{count}} valid row found.",
+              other: "{{count}} valid rows found.",
+            },
+            dataRows.length,
+          )}`,
         );
       }
 
@@ -222,7 +265,9 @@ const CSVFileUpload: FunctionComponent<ComponentProps> = (
   return (
     <div className="space-y-4 w-full">
       {props.description && (
-        <p className="text-sm text-gray-500">{props.description}</p>
+        <p className="text-sm text-gray-500">
+          {translator.translateText(props.description)}
+        </p>
       )}
 
       {/* Template download */}
@@ -238,7 +283,7 @@ const CSVFileUpload: FunctionComponent<ComponentProps> = (
       {/* Column info */}
       <div className="rounded-lg border border-gray-200 bg-gray-50 p-3">
         <p className="text-xs font-medium text-gray-700 mb-2">
-          Expected columns:
+          {translator.translateText("Expected columns:")}
         </p>
         <div className="flex flex-wrap gap-2">
           {props.columns.map((col: CSVColumn) => {
@@ -250,9 +295,9 @@ const CSVFileUpload: FunctionComponent<ComponentProps> = (
                     ? "bg-indigo-100 text-indigo-700"
                     : "bg-gray-200 text-gray-600"
                 }`}
-                title={col.description}
+                title={translator.translateText(col.description)}
               >
-                {col.title}
+                {translator.translateText(col.title)}
                 {col.required && <span className="ml-1 text-red-500">*</span>}
               </span>
             );
@@ -270,12 +315,20 @@ const CSVFileUpload: FunctionComponent<ComponentProps> = (
         <div className="flex flex-col items-center space-y-2 text-center">
           <Icon icon={IconProp.File} className="h-10 w-10 text-gray-400" />
           <div className="text-sm text-gray-600">
-            <span className="font-medium text-indigo-600">
-              Click to upload CSV
-            </span>{" "}
-            or drag and drop
+            <TranslatedSentence
+              template="{{upload}} or drag and drop"
+              slots={{
+                upload: (
+                  <span className="font-medium text-indigo-600">
+                    {translator.translateText("Click to upload CSV")}
+                  </span>
+                ),
+              }}
+            />
           </div>
-          <p className="text-xs text-gray-500">CSV files only</p>
+          <p className="text-xs text-gray-500">
+            {translator.translateText("CSV files only")}
+          </p>
           <input
             ref={fileInputRef}
             type="file"
@@ -295,7 +348,14 @@ const CSVFileUpload: FunctionComponent<ComponentProps> = (
             color={new Color("#16a34a")}
           />
           <div className="ml-2 text-sm font-medium text-green-800">
-            {fileName} - {parsedRows.length} row(s) ready to import
+            {translator.translatePlural(
+              {
+                one: "{{fileName}} - {{count}} row ready to import",
+                other: "{{fileName}} - {{count}} rows ready to import",
+              },
+              parsedRows.length,
+              { fileName: fileName },
+            )}
           </div>
         </div>
       )}
@@ -303,7 +363,9 @@ const CSVFileUpload: FunctionComponent<ComponentProps> = (
       {/* Error */}
       {error && (
         <div className="rounded-lg bg-red-50 p-3">
-          <p className="text-sm text-red-700">{error}</p>
+          <p className="text-sm text-red-700">
+            {translator.translateText(error)}
+          </p>
         </div>
       )}
 
@@ -311,8 +373,14 @@ const CSVFileUpload: FunctionComponent<ComponentProps> = (
       {parsedRows.length > 0 && (
         <div className="rounded-lg border border-gray-200 overflow-hidden">
           <div className="bg-gray-50 px-4 py-2 text-xs font-medium text-gray-700">
-            Preview (first {Math.min(parsedRows.length, 5)} of{" "}
-            {parsedRows.length} rows)
+            {translator.translatePlural(
+              {
+                one: "Preview (first {{shown}} of {{count}} row)",
+                other: "Preview (first {{shown}} of {{count}} rows)",
+              },
+              parsedRows.length,
+              { shown: Math.min(parsedRows.length, 5) },
+            )}
           </div>
           <div className="overflow-x-auto">
             <table className="min-w-full divide-y divide-gray-200">
@@ -324,7 +392,7 @@ const CSVFileUpload: FunctionComponent<ComponentProps> = (
                         key={col.key}
                         className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase"
                       >
-                        {col.title}
+                        {translator.translateText(col.title)}
                       </th>
                     );
                   })}

package/UI/Components/Captcha/Captcha.tsx

@@ -1,4 +1,6 @@
 import HCaptcha from "@hcaptcha/react-hcaptcha";
+import { Translator } from "../../Utils/TranslateTemplate";
+import useTranslator from "../../Utils/UseTranslator";
 import React from "react";
 
 export interface CaptchaProps {
@@ -18,6 +20,7 @@ const Captcha: React.FC<CaptchaProps> = ({
   onBlur,
   className,
 }: CaptchaProps): JSX.Element => {
+  const translator: Translator = useTranslator();
   const captchaRef: React.MutableRefObject<HCaptcha | null> =
     React.useRef<HCaptcha | null>(null);
   const onTokenChangeRef: React.MutableRefObject<
@@ -43,7 +46,7 @@ const Captcha: React.FC<CaptchaProps> = ({
   if (!siteKey) {
     return (
       <div className={className || "text-center text-sm text-red-500"}>
-        Captcha is not configured.
+        {translator.translateText("Captcha is not configured.")}
       </div>
     );
   }

package/UI/Components/Card/CardMoreMenu.tsx

@@ -0,0 +1,30 @@
+import IconProp from "../../../Types/Icon/IconProp";
+import MoreMenu from "../MoreMenu/MoreMenu";
+import React, { FunctionComponent, ReactElement } from "react";
+
+export interface ComponentProps {
+  children: Array<ReactElement>;
+}
+
+/*
+ * The ⋯ More button at the end of a card's header, and the menu it opens.
+ * A card shows its main action as a button and keeps everything else in
+ * here: a table's Refresh, Filter and Columns, a feed's sort order, its
+ * event type filter and Refresh. "The idea is to have as few buttons as
+ * possible visible to the user."
+ *
+ * Every card header's ⋯ is this one component - an outlined button with three
+ * dots, named "More options" - so a table's and a feed's are the same button,
+ * and stay so.
+ */
+const CardMoreMenu: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  return (
+    <MoreMenu menuIcon={IconProp.EllipsisHorizontal} text="">
+      {props.children}
+    </MoreMenu>
+  );
+};
+
+export default CardMoreMenu;

package/UI/Components/CardSelect/CardSelect.tsx

@@ -7,6 +7,8 @@ import React, {
   useRef,
   useState,
 } from "react";
+import { Translator } from "../../Utils/TranslateTemplate";
+import useTranslator from "../../Utils/UseTranslator";
 
 export interface CardSelectOption {
   value: string;
@@ -45,6 +47,12 @@ export interface ComponentProps {
   ariaLabelledby?: string | undefined;
   // Force single-column (1 item per row). Default: responsive 1/2/3 grid.
   singleColumn?: boolean | undefined;
+  /*
+   * At most this many cards side by side; three when left out. A short
+   * choice inside a dialog reads better as two wide columns than as three
+   * narrow ones whose titles wrap.
+   */
+  maxColumns?: 2 | 3 | undefined;
   /*
    * Opt in to the search box. Off by default so a picker with a handful of
    * cards is not given a search box it does not need, and so existing callers
@@ -269,6 +277,7 @@ const CardSelect: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
   const [search, setSearch] = useState<string>("");
+  const translator: Translator = useTranslator();
   const searchInputRef: React.RefObject<HTMLInputElement> =
     useRef<HTMLInputElement>(null);
   const containerRef: React.RefObject<HTMLDivElement> =
@@ -414,7 +423,9 @@ const CardSelect: FunctionComponent<ComponentProps> = (
 
   const gridClassName: string = props.singleColumn
     ? "grid grid-cols-1 gap-4"
-    : "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3";
+    : props.maxColumns === 2
+      ? "grid grid-cols-1 gap-4 sm:grid-cols-2"
+      : "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3";
 
   /*
    * The cards on screen, in the order they are rendered. A search reorders
@@ -568,14 +579,14 @@ const CardSelect: FunctionComponent<ComponentProps> = (
                 isSelected ? "text-gray-900" : "text-gray-900"
               }`}
             >
-              {option.title}
+              {translator.translateText(option.title)}
             </span>
             <span
               className={`mt-1 block text-sm ${
                 isSelected ? "text-gray-600" : "text-gray-500"
               }`}
             >
-              {option.description}
+              {translator.translateText(option.description)}
             </span>
           </div>
           {isSelected && (
@@ -605,9 +616,13 @@ const CardSelect: FunctionComponent<ComponentProps> = (
               ref={searchInputRef}
               type="text"
               value={search}
-              placeholder={props.searchPlaceholder || "Search"}
+              placeholder={translator.translateText(
+                props.searchPlaceholder || "Search",
+              )}
               autoComplete="off"
-              aria-label={props.searchPlaceholder || "Search"}
+              aria-label={translator.translateText(
+                props.searchPlaceholder || "Search",
+              )}
               data-testid="card-select-search"
               className="block w-full border-0 bg-transparent p-0 text-sm text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-0"
               onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
@@ -646,7 +661,7 @@ const CardSelect: FunctionComponent<ComponentProps> = (
             {search.length > 0 && (
               <button
                 type="button"
-                aria-label="Clear search"
+                aria-label={translator.translateText("Clear search")}
                 data-testid="card-select-search-clear"
                 className="flex flex-shrink-0 items-center text-gray-400 hover:text-gray-600"
                 onClick={() => {
@@ -664,10 +679,23 @@ const CardSelect: FunctionComponent<ComponentProps> = (
             role="status"
           >
             {isSearching
-              ? isShowingClosestMatches
-                ? `Showing ${searchResults.length} closest of ${totalOptionCount}`
-                : `Showing ${searchResults.length} of ${totalOptionCount}`
-              : `${totalOptionCount} to choose from. Search by name, category, or what you want to watch.`}
+              ? translator.translateTemplate(
+                  isShowingClosestMatches
+                    ? "Showing {{shown}} closest of {{total}}"
+                    : "Showing {{shown}} of {{total}}",
+                  {
+                    shown: translator.formatNumber(searchResults.length),
+                    total: translator.formatNumber(totalOptionCount),
+                  },
+                )
+              : translator.translatePlural(
+                  {
+                    one: "{{count}} to choose from. Search by name, category, or what you want to watch.",
+                    other:
+                      "{{count}} to choose from. Search by name, category, or what you want to watch.",
+                  },
+                  totalOptionCount,
+                )}
           </p>
         </div>
       )}
@@ -675,7 +703,7 @@ const CardSelect: FunctionComponent<ComponentProps> = (
       <div
         ref={containerRef}
         role="radiogroup"
-        aria-label="Select an option"
+        aria-label={translator.translateText("Select an option")}
         aria-labelledby={props.ariaLabelledby}
       >
         {isSearching && isShowingClosestMatches && (
@@ -683,7 +711,9 @@ const CardSelect: FunctionComponent<ComponentProps> = (
             className="mb-4 text-sm text-gray-500"
             data-testid="card-select-closest-matches"
           >
-            Nothing matches every word you typed. Closest matches:
+            {translator.translateText(
+              "Nothing matches every word you typed. Closest matches:",
+            )}
           </p>
         )}
 
@@ -701,10 +731,14 @@ const CardSelect: FunctionComponent<ComponentProps> = (
             data-testid="card-select-no-results"
           >
             <p className="text-sm font-medium text-gray-900">
-              Nothing matches every word you typed.
+              {translator.translateText(
+                "Nothing matches every word you typed.",
+              )}
             </p>
             <p className="mt-1 text-sm text-gray-500">
-              Try fewer words, or a protocol or product name.
+              {translator.translateText(
+                "Try fewer words, or a protocol or product name.",
+              )}
             </p>
             <button
               type="button"
@@ -714,7 +748,7 @@ const CardSelect: FunctionComponent<ComponentProps> = (
                 searchInputRef.current?.focus();
               }}
             >
-              Clear search
+              {translator.translateText("Clear search")}
             </button>
           </div>
         )}
@@ -738,7 +772,7 @@ const CardSelect: FunctionComponent<ComponentProps> = (
                     </div>
                     <div className="relative flex justify-start">
                       <span className="bg-white pr-3 text-xs font-semibold uppercase tracking-wider text-gray-400">
-                        {group.label}
+                        {translator.translateText(group.label)}
                       </span>
                     </div>
                   </div>
@@ -766,7 +800,7 @@ const CardSelect: FunctionComponent<ComponentProps> = (
                       className="h-4 w-4 flex-shrink-0 text-gray-400"
                     />
                     <span className="text-xs font-semibold uppercase tracking-wider text-gray-500">
-                      {group.label}
+                      {translator.translateText(group.label)}
                     </span>
                     <span className="rounded-full bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-500">
                       {group.options.length}