@oneuptime/common 14.0.12 → 14.0.13

package/Types/Workspace/NotificationRules/NotificationRuleCondition.ts

@@ -1,5 +1,6 @@
 import AlertSeverity from "../../../Models/DatabaseModels/AlertSeverity";
 import AlertState from "../../../Models/DatabaseModels/AlertState";
+import BaseModel from "../../../Models/DatabaseModels/DatabaseBaseModel/DatabaseBaseModel";
 import IncidentSeverity from "../../../Models/DatabaseModels/IncidentSeverity";
 import IncidentState from "../../../Models/DatabaseModels/IncidentState";
 import Label from "../../../Models/DatabaseModels/Label";
@@ -233,6 +234,11 @@ export class NotificationRuleConditionUtil {
     }
   }
 
+  /*
+   * What a condition's value dropdown offers. States, severities, monitor
+   * statuses and labels come with their colours (when the rows were fetched
+   * with them), as they do in every other picker.
+   */
   public static getDropdownOptionsByCheckOn(data: {
     alertSeverities: Array<AlertSeverity>;
     alertStates: Array<AlertState>;
@@ -244,71 +250,51 @@ export class NotificationRuleConditionUtil {
     monitors: Array<Monitor>;
     checkOn: NotificationRuleConditionCheckOn;
   }): Array<DropdownOption> {
+    type ToOptionsFunction = (rows: Array<BaseModel>) => Array<DropdownOption>;
+
+    const toOptions: ToOptionsFunction = (
+      rows: Array<BaseModel>,
+    ): Array<DropdownOption> => {
+      return DropdownUtil.getDropdownOptionsFromEntityArray({
+        array: rows,
+        labelField: "name",
+        valueField: "_id",
+      });
+    };
+
     if (
       data.checkOn === NotificationRuleConditionCheckOn.IncidentEpisodeSeverity
     ) {
-      return data.incidentSeverities.map((severity: IncidentSeverity) => {
-        return {
-          value: severity.id!.toString(),
-          label: severity.name || "",
-        };
-      });
+      return toOptions(data.incidentSeverities);
     }
 
     if (
       data.checkOn === NotificationRuleConditionCheckOn.AlertSeverity ||
       data.checkOn === NotificationRuleConditionCheckOn.AlertEpisodeSeverity
     ) {
-      return data.alertSeverities.map((severity: AlertSeverity) => {
-        return {
-          value: severity.id!.toString(),
-          label: severity.name || "",
-        };
-      });
+      return toOptions(data.alertSeverities);
     }
 
     if (data.checkOn === NotificationRuleConditionCheckOn.IncidentSeverity) {
-      return data.incidentSeverities.map((severity: IncidentSeverity) => {
-        return {
-          value: severity.id!.toString(),
-          label: severity.name || "",
-        };
-      });
+      return toOptions(data.incidentSeverities);
     }
 
     if (data.checkOn === NotificationRuleConditionCheckOn.MonitorStatus) {
-      return data.monitorStatus.map((status: MonitorStatus) => {
-        return {
-          value: status.id!.toString(),
-          label: status.name || "",
-        };
-      });
+      return toOptions(data.monitorStatus);
     }
 
     if (
       data.checkOn === NotificationRuleConditionCheckOn.IncidentState ||
       data.checkOn === NotificationRuleConditionCheckOn.IncidentEpisodeState
     ) {
-      return data.incidentStates.map((state: IncidentState) => {
-        return {
-          value: state.id!.toString(),
-          label: state.name || "",
-        };
-      });
+      return toOptions(data.incidentStates);
     }
 
     if (
       data.checkOn ===
       NotificationRuleConditionCheckOn.ScheduledMaintenanceState
     ) {
-      return data.scheduledMaintenanceStates.map(
-        (state: ScheduledMaintenanceState) => {
-          return {
-            value: state.id!.toString(),
-            label: state.name || "",
-          };
-        },
-      );
+      return toOptions(data.scheduledMaintenanceStates);
     }
 
     if (
@@ -321,21 +307,11 @@ export class NotificationRuleConditionUtil {
         NotificationRuleConditionCheckOn.ScheduledMaintenanceLabels ||
       data.checkOn === NotificationRuleConditionCheckOn.OnCallDutyPolicyLabels
     ) {
-      return data.labels.map((label: Label) => {
-        return {
-          value: label.id!.toString(),
-          label: label.name || "",
-        };
-      });
+      return toOptions(data.labels);
     }
 
     if (data.checkOn === NotificationRuleConditionCheckOn.Monitors) {
-      return data.monitors.map((monitor: Monitor) => {
-        return {
-          value: monitor.id!.toString(),
-          label: monitor.name || "",
-        };
-      });
+      return toOptions(data.monitors);
     }
 
     // alert states (also used for alert episodes)
@@ -343,12 +319,7 @@ export class NotificationRuleConditionUtil {
       data.checkOn === NotificationRuleConditionCheckOn.AlertState ||
       data.checkOn === NotificationRuleConditionCheckOn.AlertEpisodeState
     ) {
-      return data.alertStates.map((state: AlertState) => {
-        return {
-          value: state.id!.toString(),
-          label: state.name || "",
-        };
-      });
+      return toOptions(data.alertStates);
     }
 
     // if monitor type

package/UI/Components/404.tsx

@@ -4,6 +4,8 @@ import Button, { ButtonStyleType } from "./Button/Button";
 import Route from "../../Types/API/Route";
 import URL from "../../Types/API/URL";
 import Email from "../../Types/Email";
+import { Translator } from "../Utils/TranslateTemplate";
+import useTranslator from "../Utils/UseTranslator";
 import React, { FunctionComponent, ReactElement } from "react";
 
 export interface ComponentProps {
@@ -14,6 +16,8 @@ export interface ComponentProps {
 const NotFound: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
+  const translator: Translator = useTranslator();
+
   return (
     <div className="mx-auto max-w-full sm:px-6 lg:px-8 rounded-lg">
       <div className="min-h-full py-16 px-6 sm:py-24 md:grid md:place-items-center lg:px-8">
@@ -25,10 +29,12 @@ const NotFound: FunctionComponent<ComponentProps> = (
             <div className="sm:ml-6">
               <div className="sm:border-l sm:border-gray-200 sm:pl-6">
                 <h1 className="text-4xl  tracking-tight text-gray-900 sm:text-5xl">
-                  Page not found
+                  {translator.translateText("Page not found")}
                 </h1>
                 <p className="mt-1 text-base text-gray-500">
-                  Please check the URL in the address bar and try again.
+                  {translator.translateText(
+                    "Please check the URL in the address bar and try again.",
+                  )}
                 </p>
               </div>
               <div className="mt-10 flex space-x-3 sm:border-l sm:border-transparent sm:pl-6">

package/UI/Components/AI/GenerateFromAIModal.tsx

@@ -4,6 +4,8 @@ import React, {
   useState,
   useEffect,
 } from "react";
+import { Translator } from "../../Utils/TranslateTemplate";
+import useTranslator from "../../Utils/UseTranslator";
 import Modal, { ModalWidth } from "../Modal/Modal";
 import AILoader from "./AILoader";
 import Alert, { AlertType } from "../Alerts/Alert";
@@ -35,6 +37,7 @@ export interface GenerateAIRequestData {
 const GenerateFromAIModal: FunctionComponent<GenerateFromAIModalProps> = (
   props: GenerateFromAIModalProps,
 ): ReactElement => {
+  const translator: Translator = useTranslator();
   const [isGenerating, setIsGenerating] = useState<boolean>(false);
   const [error, setError] = useState<string>("");
   const [selectedTemplateId, setSelectedTemplateId] = useState<string>(
@@ -129,7 +132,7 @@ const GenerateFromAIModal: FunctionComponent<GenerateFromAIModalProps> = (
             {/* Template Selection */}
             <div>
               <label className="block text-sm font-medium text-gray-700 mb-1">
-                Select Template
+                {translator.translateText("Select Template")}
               </label>
               <Dropdown
                 options={templateOptions}
@@ -144,8 +147,9 @@ const GenerateFromAIModal: FunctionComponent<GenerateFromAIModalProps> = (
                 placeholder="Select a template..."
               />
               <p className="mt-1 text-xs text-gray-500">
-                Choose a template to guide the AI generation. You can edit it
-                below before generating.
+                {translator.translateText(
+                  "Choose a template to guide the AI generation. You can edit it below before generating.",
+                )}
               </p>
             </div>
 
@@ -153,11 +157,12 @@ const GenerateFromAIModal: FunctionComponent<GenerateFromAIModalProps> = (
             {selectedTemplateId && (
               <div>
                 <label className="block text-sm font-medium text-gray-700 mb-1">
-                  Template Preview
+                  {translator.translateText("Template Preview")}
                 </label>
                 <p className="text-xs text-gray-500 mb-2">
-                  Edit the template below. AI will fill in the sections with
-                  incident data.
+                  {translator.translateText(
+                    "Edit the template below. AI will fill in the sections with incident data.",
+                  )}
                 </p>
                 <div className="">
                   <MarkdownEditor

package/UI/Components/AIAgent/AIAgent.tsx

@@ -6,6 +6,8 @@ import URL from "../../../Types/API/URL";
 import IconProp from "../../../Types/Icon/IconProp";
 import { JSONObject } from "../../../Types/JSON";
 import AIAgent from "../../../Models/DatabaseModels/AIAgent";
+import { Translator } from "../../Utils/TranslateTemplate";
+import useTranslator from "../../Utils/UseTranslator";
 import React, { FunctionComponent, ReactElement } from "react";
 
 export interface ComponentProps {
@@ -16,6 +18,7 @@ export interface ComponentProps {
 const AIAgentElement: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
+  const translator: Translator = useTranslator();
   let aiAgent: JSONObject | null | undefined = null;
 
   if (props.aiAgent instanceof AIAgent) {
@@ -28,7 +31,7 @@ const AIAgentElement: FunctionComponent<ComponentProps> = (
     return (
       <div className="flex">
         <div className="bold" data-testid="ai-agent-not-found">
-          No AI agent found.
+          {translator.translateText("No AI agent found.")}
         </div>
       </div>
     );
@@ -44,7 +47,10 @@ const AIAgentElement: FunctionComponent<ComponentProps> = (
             imageUrl={URL.fromString(FILE_URL.toString()).addRoute(
               "/image/" + props.aiAgent?.iconFileId.toString(),
             )}
-            alt={aiAgent["name"]?.toString() || "AI Agent"}
+            alt={
+              aiAgent["name"]?.toString() ||
+              translator.translateText("AI Agent")
+            }
           />
         )}
         {!props.aiAgent?.iconFileId && (

package/UI/Components/ActionButton/ActionButtonSchema.ts

@@ -25,7 +25,15 @@ export enum ActionButtonPlacement {
 
 interface ActionButtonSchema<T extends GenericObject> {
   title: string;
-  icon?: undefined | IconProp;
+  /*
+   * Required. Whichever action a row does not show as its button goes in
+   * the ⋯ menu, and every item there has an icon, so a menu never mixes
+   * items with icons and items without ("Show ID" sat as a bare label above
+   * a red "Delete" with its bin). Which actions end up in the menu is only
+   * decided per row, so every action carries one. The row's own button is a
+   * label (see RowActions).
+   */
+  icon: IconProp;
   buttonStyleType: ButtonStyleType;
   isLoading?: boolean | undefined;
   isVisible?: (item: T) => boolean | undefined;
@@ -37,6 +45,14 @@ interface ActionButtonSchema<T extends GenericObject> {
    */
   disabled?: boolean | undefined;
   tooltip?: string | undefined;
+  /*
+   * An action that is locked for some rows only - Delete on a built-in state
+   * that can be renamed but never deleted, say: why it is locked for this
+   * row, or undefined when it is not. The row keeps the action, locked, with
+   * the reason as its tooltip. A lock from `disabled` (the viewer's
+   * permissions) comes first.
+   */
+  getDisabledReason?: ((item: T) => string | undefined) | undefined;
   placement?: ActionButtonPlacement | undefined;
   onClick: (
     item: T,

package/UI/Components/ActionButton/RowActions.tsx

@@ -1,5 +1,7 @@
 import ActionButtonSchema from "./ActionButtonSchema";
 import splitActionButtons, {
+  ActionButtonLock,
+  getActionButtonLock,
   IndexedActionButton,
   isDestructiveActionButton,
   SplitActionButtonsResult,
@@ -16,9 +18,9 @@ import useTranslateValue from "../../Utils/Translation";
 import React, { ReactElement, useRef, useState } from "react";
 
 /*
- * The actions of one row - a table row, a list card, a state in an ordered
- * list: one button, and a ⋯ menu holding everything else. SplitActionButtons
- * decides which action is which; this only draws the result.
+ * The actions of one row - a table row, a list card: one button, and a ⋯ menu
+ * holding everything else. SplitActionButtons decides which action is which,
+ * and whether it is locked on this row; this only draws the result.
  */
 
 export interface ComponentProps<T extends GenericObject> {
@@ -88,6 +90,10 @@ const RowActions: RowActionsFunction = <T extends GenericObject>(
       isMobile: props.isMobile,
     });
 
+  const primaryLock: ActionButtonLock | null = primary
+    ? getActionButtonLock(primary.button, props.item)
+    : null;
+
   if (!primary && moreMenu.length === 0 && !error) {
     return <></>;
   }
@@ -99,7 +105,7 @@ const RowActions: RowActionsFunction = <T extends GenericObject>(
   ): void => {
     const { button, index } = entry;
 
-    if (button.disabled || !button.onClick) {
+    if (getActionButtonLock(button, props.item).isDisabled || !button.onClick) {
       return;
     }
 
@@ -117,12 +123,6 @@ const RowActions: RowActionsFunction = <T extends GenericObject>(
     );
   };
 
-  const hasMenuIcons: boolean = moreMenu.some(
-    (entry: IndexedActionButton<T>) => {
-      return Boolean(entry.button.icon);
-    },
-  );
-
   const menuItems: Array<ReactElement> = [];
 
   moreMenu.forEach((entry: IndexedActionButton<T>, position: number) => {
@@ -141,15 +141,24 @@ const RowActions: RowActionsFunction = <T extends GenericObject>(
     const title: string =
       translateString(entry.button.title) || entry.button.title;
 
+    const lock: ActionButtonLock = getActionButtonLock(
+      entry.button,
+      props.item,
+    );
+
+    /*
+     * Every action has an icon (ActionButtonSchema requires one), and the
+     * menu always draws it: a list of items is read down its column of
+     * icons, and an item without one looked like a missing one.
+     */
     menuItems.push(
       <MoreMenuItem
         key={`action-${entry.index}`}
         text={title}
         icon={entry.button.icon}
-        isIconSpaceReserved={hasMenuIcons}
         isDestructive={isDestructive}
-        isDisabled={entry.button.disabled}
-        tooltip={translateString(entry.button.tooltip)}
+        isDisabled={lock.isDisabled}
+        tooltip={translateString(lock.tooltip)}
         onClick={() => {
           runAction(entry);
         }}
@@ -185,19 +194,25 @@ const RowActions: RowActionsFunction = <T extends GenericObject>(
       {primary && (
         /*
          * Button is w-full below md. Its own content-sized box keeps it the
-         * size of its label on every surface - a Table card, a List card and a
-         * centred ordered-states item alike - instead of stretching whenever
-         * the row's container happens to be a block.
+         * size of its label on every surface - a Table card and a List card
+         * alike - instead of stretching whenever the row's container happens
+         * to be a block.
+         *
+         * The row's button is its label alone. Every action has an icon for
+         * the ⋯ menu, where a list of items is read down its icons; one
+         * button beside the menu is read by its label, and its icon on every
+         * row of a table would only repeat that label 25 times in a column.
+         * It also keeps the row's button the same on every table - View and
+         * Edit never drew one, a few custom actions did.
          */
         <div className="shrink-0">
           <Button
             buttonSize={ButtonSize.Small}
             title={primary.button.title}
-            icon={primary.button.icon}
             buttonStyle={getRowButtonStyle(primary.button.buttonStyleType)}
             isLoading={loadingActionIndexes.current[primary.index]}
-            disabled={primary.button.disabled}
-            tooltip={primary.button.tooltip}
+            disabled={primaryLock?.isDisabled}
+            tooltip={primaryLock?.tooltip}
             onClick={() => {
               runAction(primary);
             }}

package/UI/Components/ActionButton/SplitActionButtons.ts

@@ -21,8 +21,8 @@ import GenericObject from "../../../Types/GenericObject";
  *  4. A lone destructive action. With nothing else on the row, hiding "Delete"
  *     behind a menu of one would only add a click.
  *
- * Within 2 and 3, an action this viewer can use beats one that is locked for
- * them. A read-only member should not find the row's one button disabled while
+ * Within 2 and 3, an action this viewer can use on this row beats one that is
+ * locked for them (or for the row). A read-only member should not find the row's one button disabled while
  * the thing they are allowed to do is tucked away in the menu; the locked
  * action still sits in the menu, explaining itself. A locked action is only the
  * button when nothing on the row is usable.
@@ -72,6 +72,39 @@ export const isDestructiveActionButton: <T extends GenericObject>(
   return DESTRUCTIVE_STYLES.includes(button.buttonStyleType);
 };
 
+export interface ActionButtonLock {
+  isDisabled: boolean;
+  tooltip: string | undefined;
+}
+
+/*
+ * Whether an action is locked on this row, and what its tooltip says: locked
+ * for the viewer (`disabled`, with the action's own tooltip), else locked for
+ * this row (`getDisabledReason`, whose reason becomes the tooltip), else
+ * usable with its usual tooltip.
+ */
+export const getActionButtonLock: <T extends GenericObject>(
+  button: ActionButtonSchema<T>,
+  item: T,
+) => ActionButtonLock = <T extends GenericObject>(
+  button: ActionButtonSchema<T>,
+  item: T,
+): ActionButtonLock => {
+  if (button.disabled) {
+    return { isDisabled: true, tooltip: button.tooltip };
+  }
+
+  const reason: string | undefined = button.getDisabledReason
+    ? button.getDisabledReason(item)
+    : undefined;
+
+  if (reason) {
+    return { isDisabled: true, tooltip: reason };
+  }
+
+  return { isDisabled: false, tooltip: button.tooltip };
+};
+
 export const isActionButtonVisible: <T extends GenericObject>(
   button: ActionButtonSchema<T>,
   item: T,
@@ -126,7 +159,7 @@ const splitActionButtons: SplitActionButtonsFunction = <
 
   const usableCandidates: Array<IndexedActionButton<T>> =
     nonDestructiveCandidates.filter((entry: IndexedActionButton<T>) => {
-      return !entry.button.disabled;
+      return !getActionButtonLock(entry.button, options.item).isDisabled;
     });
 
   type FindCallToActionFunction = (

package/UI/Components/ActionCard/ActionCard.tsx

@@ -2,6 +2,8 @@ import { ButtonStyleType } from "../Button/Button";
 import Card from "../Card/Card";
 import ConfirmModal from "../Modal/ConfirmModal";
 import IconProp from "../../../Types/Icon/IconProp";
+import { translatableTerm, Translator } from "../../Utils/TranslateTemplate";
+import useTranslator from "../../Utils/UseTranslator";
 import React, { ReactElement, useState } from "react";
 
 export interface ConfirmAction {
@@ -27,6 +29,7 @@ const DESTRUCTIVE_ACTION_STYLES: Array<ButtonStyleType> = [
 const ActionCard: (props: ComponentProps) => ReactElement = (
   props: ComponentProps,
 ): ReactElement => {
+  const translator: Translator = useTranslator();
   const [currentAction, setCurrentAction] = useState<ConfirmAction | undefined>(
     undefined,
   );
@@ -55,8 +58,17 @@ const ActionCard: (props: ComponentProps) => ReactElement = (
 
       {currentAction ? (
         <ConfirmModal
-          description={`Are you sure you want to ${currentAction.actionName}?`}
-          title={`Confirm ${currentAction.actionName}`}
+          description={translator.translateTemplate(
+            "Are you sure you want to {{action}}?",
+            {
+              action: translatableTerm(currentAction.actionName, {
+                inSentence: true,
+              }),
+            },
+          )}
+          title={translator.translateTemplate("Confirm {{action}}", {
+            action: translatableTerm(currentAction.actionName),
+          })}
           onSubmit={() => {
             currentAction.onConfirmAction();
             setCurrentAction(undefined);

package/UI/Components/AdvancedPageSection/AdvancedPageSection.tsx

@@ -0,0 +1,82 @@
+import CollapsibleSection from "../CollapsibleSection/CollapsibleSection";
+import { ADVANCED_FORM_SECTION_TITLE } from "../Forms/Utils/AdvancedFormSection";
+import { Translator } from "../../Utils/TranslateTemplate";
+import useTranslator from "../../Utils/UseTranslator";
+import React, { FunctionComponent, ReactElement } from "react";
+
+/*
+ * "Advanced" on a page: the cards most people never need, folded under one
+ * header so the page shows what matters first. The page-level twin of a
+ * form's Advanced section (Forms/Utils/AdvancedFormSection), and it behaves
+ * the same way:
+ *
+ *   - it starts folded, every time the page opens;
+ *   - its description says what is in it, folded or open, so a reader
+ *     looking for block permissions finds them without opening every fold;
+ *   - while folded it says "Configured" on its header when something in it
+ *     is set (the page says when: an API key with block permissions), so
+ *     folding never hides that a setting is in force;
+ *   - the cards in it stay mounted while it is folded, so they load once and
+ *     can report what they hold (which is how a page learns "Configured"),
+ *     but nothing in a folded section can be tabbed to or read out.
+ *
+ * Put it after the cards people use and before Delete:
+ *
+ *   <AdvancedPageSection
+ *     description="..."
+ *     isConfigured={hasBlockPermissions}
+ *   >
+ *     <BlockPermissionsTable ... />
+ *   </AdvancedPageSection>
+ */
+
+export interface ComponentProps {
+  /*
+   * What is in it, in one line under the title: shown while it is folded
+   * too, so nobody has to open it to find out.
+   */
+  description?: string | undefined;
+  // Whether anything in it is set: the folded header then says "Configured".
+  isConfigured?: boolean | undefined;
+  children: ReactElement | Array<ReactElement>;
+  dataTestId?: string | undefined;
+}
+
+export const ADVANCED_PAGE_SECTION_TEST_ID: string = "advanced-page-section";
+
+const AdvancedPageSection: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  const translator: Translator = useTranslator();
+
+  return (
+    <div
+      className="mb-5"
+      data-testid={props.dataTestId || ADVANCED_PAGE_SECTION_TEST_ID}
+    >
+      <CollapsibleSection
+        title={ADVANCED_FORM_SECTION_TITLE}
+        description={props.description}
+        collapsedDescription={props.description}
+        variant="card"
+        defaultCollapsed={true}
+        badge={
+          props.isConfigured
+            ? translator.translateText("Configured")
+            : undefined
+        }
+      >
+        {/*
+         * A card keeps a margin under it for the next card on the page.
+         * In here the section's padding frames the cards, so their own
+         * margins go, and the gap between two cards is set once.
+         */}
+        <div className="space-y-5 [&_[data-testid=card]]:mb-0">
+          {props.children}
+        </div>
+      </CollapsibleSection>
+    </div>
+  );
+};
+
+export default AdvancedPageSection;

package/UI/Components/AttachmentList/EventAttachmentList.tsx

@@ -1,4 +1,6 @@
 import { handleAuthenticatedLinkClick } from "../../Utils/OpenAuthenticatedUrl";
+import { Translator, translationKey } from "../../Utils/TranslateTemplate";
+import useTranslator from "../../Utils/UseTranslator";
 import React, { FunctionComponent, ReactElement } from "react";
 
 export interface EventAttachment {
@@ -47,6 +49,7 @@ const AttachmentCard: FunctionComponent<AttachmentCardProps> = (
   props: AttachmentCardProps,
 ): ReactElement => {
   const { attachment, refreshSession } = props;
+  const translator: Translator = useTranslator();
   const extensionLabel: string | null = getAttachmentExtensionLabel(
     attachment.name,
   );
@@ -74,7 +77,7 @@ const AttachmentCard: FunctionComponent<AttachmentCardProps> = (
         <span className="flex items-center gap-3 min-w-0">
           <span className="flex flex-col min-w-0">
             <span className="text-sm font-medium text-gray-900 truncate">
-              {attachment.name || "Attachment"}
+              {attachment.name || translator.translateText("Attachment")}
             </span>
             {extensionLabel && (
               <span className="text-[11px] font-semibold uppercase tracking-wide text-gray-400">
@@ -85,7 +88,7 @@ const AttachmentCard: FunctionComponent<AttachmentCardProps> = (
         </span>
 
         <span className="flex flex-shrink-0 items-center text-gray-500 text-xs font-semibold uppercase tracking-wide">
-          Download
+          {translator.translateText("Download")}
         </span>
       </a>
     </li>
@@ -95,9 +98,10 @@ const AttachmentCard: FunctionComponent<AttachmentCardProps> = (
 const EventAttachmentList: FunctionComponent<EventAttachmentListProps> = (
   props: EventAttachmentListProps,
 ): ReactElement | null => {
+  const translator: Translator = useTranslator();
   const {
     attachments,
-    title = "Attachments",
+    title = translationKey("Attachments"),
     variant = "section",
     showHeader = true,
     showCount = true,
@@ -133,7 +137,7 @@ const EventAttachmentList: FunctionComponent<EventAttachmentListProps> = (
     >
       {showHeader && (
         <div className="flex items-center justify-between text-xs font-semibold uppercase tracking-wide text-gray-500">
-          <span>{title}</span>
+          <span>{translator.translateText(title)}</span>
           {showCount && (
             <span className="rounded-full bg-white px-2 py-0.5 text-[11px] font-semibold text-gray-600">
               {attachments.length}

package/UI/Components/AttributesJSON/AttributesJSONPreferences.ts

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useState } from "react";
+import { translationKey } from "../../Utils/TranslateTemplate";
 import {
   ATTRIBUTES_JSON_FORMATS,
   AttributesJSONFormat,
@@ -163,13 +164,13 @@ export function useAttributesView(): [
 export const ATTRIBUTES_JSON_FORMAT_LABELS: Readonly<
   Record<AttributesJSONFormat, string>
 > = {
-  flat: "Flat",
-  nested: "Nested",
+  flat: translationKey("Flat"),
+  nested: translationKey("Nested"),
 };
 
 export const ATTRIBUTES_JSON_FORMAT_DESCRIPTIONS: Readonly<
   Record<AttributesJSONFormat, string>
 > = {
-  flat: "Dotted keys, exactly as recorded",
-  nested: "Dots expanded into objects",
+  flat: translationKey("Dotted keys, exactly as recorded"),
+  nested: translationKey("Dots expanded into objects"),
 };