@oneuptime/common 10.2.17 → 10.2.20

package/Types/Permission.ts

@@ -367,6 +367,18 @@ enum Permission {
   EditScheduledMaintenanceTemplateOwnerTeam = "EditScheduledMaintenanceTemplateOwnerTeam",
   ReadScheduledMaintenanceTemplateOwnerTeam = "ReadScheduledMaintenanceTemplateOwnerTeam",
 
+  // Scheduled Maintenance Owner Rule Permissions
+  CreateScheduledMaintenanceOwnerRule = "CreateScheduledMaintenanceOwnerRule",
+  DeleteScheduledMaintenanceOwnerRule = "DeleteScheduledMaintenanceOwnerRule",
+  EditScheduledMaintenanceOwnerRule = "EditScheduledMaintenanceOwnerRule",
+  ReadScheduledMaintenanceOwnerRule = "ReadScheduledMaintenanceOwnerRule",
+
+  // Scheduled Maintenance Label Rule Permissions
+  CreateScheduledMaintenanceLabelRule = "CreateScheduledMaintenanceLabelRule",
+  DeleteScheduledMaintenanceLabelRule = "DeleteScheduledMaintenanceLabelRule",
+  EditScheduledMaintenanceLabelRule = "EditScheduledMaintenanceLabelRule",
+  ReadScheduledMaintenanceLabelRule = "ReadScheduledMaintenanceLabelRule",
+
   CreateStatusPageOwnerTeam = "CreateStatusPageOwnerTeam",
   DeleteStatusPageOwnerTeam = "DeleteStatusPageOwnerTeam",
   EditStatusPageOwnerTeam = "EditStatusPageOwnerTeam",
@@ -7844,6 +7856,90 @@ export class PermissionHelper {
         group: PermissionGroup.ScheduledMaintenance,
       },
 
+      // Scheduled Maintenance Owner Rule Permissions
+      {
+        permission: Permission.CreateScheduledMaintenanceOwnerRule,
+        title: "Create Scheduled Maintenance Owner Rule",
+        description:
+          "This permission can create Scheduled Maintenance Owner Rules in this project.",
+        isAssignableToTenant: true,
+        isAccessControlPermission: false,
+        isRolePermission: false,
+        group: PermissionGroup.ScheduledMaintenance,
+      },
+      {
+        permission: Permission.DeleteScheduledMaintenanceOwnerRule,
+        title: "Delete Scheduled Maintenance Owner Rule",
+        description:
+          "This permission can delete Scheduled Maintenance Owner Rules of this project.",
+        isAssignableToTenant: true,
+        isAccessControlPermission: false,
+        isRolePermission: false,
+        group: PermissionGroup.ScheduledMaintenance,
+      },
+      {
+        permission: Permission.EditScheduledMaintenanceOwnerRule,
+        title: "Edit Scheduled Maintenance Owner Rule",
+        description:
+          "This permission can edit Scheduled Maintenance Owner Rules of this project.",
+        isAssignableToTenant: true,
+        isAccessControlPermission: false,
+        isRolePermission: false,
+        group: PermissionGroup.ScheduledMaintenance,
+      },
+      {
+        permission: Permission.ReadScheduledMaintenanceOwnerRule,
+        title: "Read Scheduled Maintenance Owner Rule",
+        description:
+          "This permission can read Scheduled Maintenance Owner Rules of this project.",
+        isAssignableToTenant: true,
+        isAccessControlPermission: false,
+        isRolePermission: false,
+        group: PermissionGroup.ScheduledMaintenance,
+      },
+
+      // Scheduled Maintenance Label Rule Permissions
+      {
+        permission: Permission.CreateScheduledMaintenanceLabelRule,
+        title: "Create Scheduled Maintenance Label Rule",
+        description:
+          "This permission can create Scheduled Maintenance Label Rules in this project.",
+        isAssignableToTenant: true,
+        isAccessControlPermission: false,
+        isRolePermission: false,
+        group: PermissionGroup.ScheduledMaintenance,
+      },
+      {
+        permission: Permission.DeleteScheduledMaintenanceLabelRule,
+        title: "Delete Scheduled Maintenance Label Rule",
+        description:
+          "This permission can delete Scheduled Maintenance Label Rules of this project.",
+        isAssignableToTenant: true,
+        isAccessControlPermission: false,
+        isRolePermission: false,
+        group: PermissionGroup.ScheduledMaintenance,
+      },
+      {
+        permission: Permission.EditScheduledMaintenanceLabelRule,
+        title: "Edit Scheduled Maintenance Label Rule",
+        description:
+          "This permission can edit Scheduled Maintenance Label Rules of this project.",
+        isAssignableToTenant: true,
+        isAccessControlPermission: false,
+        isRolePermission: false,
+        group: PermissionGroup.ScheduledMaintenance,
+      },
+      {
+        permission: Permission.ReadScheduledMaintenanceLabelRule,
+        title: "Read Scheduled Maintenance Label Rule",
+        description:
+          "This permission can read Scheduled Maintenance Label Rules of this project.",
+        isAssignableToTenant: true,
+        isAccessControlPermission: false,
+        isRolePermission: false,
+        group: PermissionGroup.ScheduledMaintenance,
+      },
+
       // Alert Episode Permissions
       {
         permission: Permission.CreateAlertEpisode,

package/UI/Components/AlertBanner/AlertBanner.tsx

@@ -1,3 +1,4 @@
+import useTranslateValue from "../../Utils/Translation";
 import React, { FunctionComponent, ReactElement } from "react";
 
 export enum AlertBannerType {
@@ -44,6 +45,8 @@ const bannerStyles: Record<
 const AlertBanner: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
+  const { translateString } = useTranslateValue();
+  const translatedTitle: string = translateString(props.title) ?? props.title;
   const styles: { container: string; dot: string; title: string } =
     bannerStyles[props.type];
 
@@ -56,7 +59,7 @@ const AlertBanner: FunctionComponent<ComponentProps> = (
         <div className="flex items-center gap-3">
           <span className={`inline-flex h-3 w-3 rounded-full ${styles.dot}`} />
           <span className={`text-lg font-semibold ${styles.title}`}>
-            {props.title}
+            {translatedTitle}
           </span>
         </div>
         {props.rightElement && <div>{props.rightElement}</div>}

package/UI/Components/Alerts/Alert.tsx

@@ -1,6 +1,7 @@
 import Icon from "../Icon/Icon";
 import Color from "../../../Types/Color";
 import IconProp from "../../../Types/Icon/IconProp";
+import useTranslateValue from "../../Utils/Translation";
 import React, { FunctionComponent, ReactElement } from "react";
 
 export enum AlertType {
@@ -35,6 +36,16 @@ export interface ComponentProps {
 const Alert: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
+  const { translateString, translateValue } = useTranslateValue();
+  const translatedStrongTitle: string | undefined = translateString(
+    props.strongTitle,
+  );
+  const translatedTitle: string | ReactElement | undefined = translateValue(
+    props.title,
+  );
+  const translatedTextOnRight: string | undefined = translateString(
+    props.textOnRight,
+  );
   const type: AlertType = props.type || AlertType.INFO;
 
   const typeClassNames: {
@@ -122,12 +133,12 @@ const Alert: FunctionComponent<ComponentProps> = (
           >
             <div>
               <span className="font-medium">
-                {props.strongTitle}{" "}
-                {props.title && props.strongTitle ? "- " : ""}
+                {translatedStrongTitle}{" "}
+                {translatedTitle && translatedStrongTitle ? "- " : ""}
               </span>
-              {props.title}
+              {translatedTitle}
             </div>
-            {props.textOnRight && <div>{props.textOnRight}</div>}
+            {translatedTextOnRight && <div>{translatedTextOnRight}</div>}
           </div>
           {props.onClose && (
             <p className="alert-close mt-3 text-sm md:mt-0 md:ml-6">

package/UI/Components/Button/DropdownButton.tsx

@@ -1,3 +1,4 @@
+import useTranslateValue from "../../Utils/Translation";
 import React, { ReactElement, useState } from "react";
 
 interface DropdownOption {
@@ -22,6 +23,7 @@ const DropdownButton: React.FC<DropdownButtonProps> = ({
   dropdownOptions,
   onButtonClick,
 }: ComponentProps): ReactElement => {
+  const { translateString } = useTranslateValue();
   const [isOpen, setIsOpen] = useState(false);
 
   const toggleDropdown: VoidFunction = () => {
@@ -35,7 +37,7 @@ const DropdownButton: React.FC<DropdownButtonProps> = ({
         className="relative inline-flex items-center rounded-l-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"
         onClick={onButtonClick}
       >
-        {title}
+        {translateString(title) ?? title}
       </button>
       <div className="relative -ml-px block">
         <button
@@ -78,7 +80,7 @@ const DropdownButton: React.FC<DropdownButtonProps> = ({
                     role="menuitem"
                     onClick={option.onClick}
                   >
-                    {option.label}
+                    {translateString(option.label) ?? option.label}
                   </a>
                 );
               })}

package/UI/Components/Detail/Detail.tsx

@@ -1,5 +1,6 @@
 import AlignItem from "../../Types/AlignItem";
 import { Logger } from "../../Utils/Logger";
+import useTranslateValue from "../../Utils/Translation";
 import CodeBlock from "../CodeBlock/CodeBlock";
 import ColorViewer from "../ColorViewer/ColorViewer";
 import CopyableButton from "../CopyableButton/CopyableButton";
@@ -42,6 +43,7 @@ type DetailFunction = <T extends GenericObject>(
 const Detail: DetailFunction = <T extends GenericObject>(
   props: ComponentProps<T>,
 ): ReactElement => {
+  const { translateString } = useTranslateValue();
   // Track mobile view for responsive behavior
   const [isMobile, setIsMobile] = useState<boolean>(false);
 
@@ -83,7 +85,9 @@ const Detail: DetailFunction = <T extends GenericObject>(
   ): ReactElement => {
     if (!options) {
       return (
-        <span className="text-gray-400 italic text-sm">No options found</span>
+        <span className="text-gray-400 italic text-sm">
+          {translateString("No options found") ?? "No options found"}
+        </span>
       );
     }
 

package/UI/Components/Detail/FieldLabel.tsx

@@ -1,5 +1,6 @@
 import Link from "../Link/Link";
 import { DetailSideLink } from "./Field";
+import useTranslateValue from "../../Utils/Translation";
 import React, { FunctionComponent, ReactElement } from "react";
 
 export enum Size {
@@ -20,26 +21,33 @@ export interface ComponentProps {
 const FieldLabelElement: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
+  const { translateString, translateValue } = useTranslateValue();
+  const translatedTitle: string | undefined = translateString(props.title);
+  const translatedDescription: string | ReactElement | undefined =
+    translateValue(props.description);
+  const translatedSideLinkText: string | undefined = translateString(
+    props.sideLink?.text,
+  );
   const isCardStyle: boolean = props.isCardStyle || false;
 
   return (
     <div className="space-y-1">
-      {props.title && (
+      {translatedTitle && (
         <label
           className={`${props.size || "text-xs"} font-semibold uppercase tracking-widest ${
             isCardStyle ? "text-gray-500" : "text-gray-500"
           } flex items-center gap-2`}
         >
           <span className={`${props.alignClassName} flex items-center gap-1.5`}>
-            {props.title}
+            {translatedTitle}
             <span className="w-1 h-1 rounded-full bg-gray-300"></span>
           </span>
-          {props.sideLink && props.sideLink?.text && props.sideLink?.url && (
+          {props.sideLink && translatedSideLinkText && props.sideLink?.url && (
             <Link
               to={props.sideLink?.url}
               className="inline-flex items-center gap-1 text-indigo-500 hover:text-indigo-600 transition-all duration-200 font-medium normal-case tracking-normal text-xs hover:underline underline-offset-2"
             >
-              {props.sideLink?.text}
+              {translatedSideLinkText}
               <svg
                 className="w-3 h-3"
                 fill="none"
@@ -57,11 +65,11 @@ const FieldLabelElement: FunctionComponent<ComponentProps> = (
           )}
         </label>
       )}
-      {props.description && (
+      {translatedDescription && (
         <p
           className={`${props.alignClassName} text-xs text-gray-400 leading-relaxed mt-0.5`}
         >
-          {props.description}
+          {translatedDescription}
         </p>
       )}
     </div>

package/UI/Components/Detail/PlaceholderText.tsx

@@ -1,3 +1,4 @@
+import useTranslateValue from "../../Utils/Translation";
 import React, { FunctionComponent, ReactElement } from "react";
 
 export interface ComponentProps {
@@ -7,6 +8,8 @@ export interface ComponentProps {
 const PlaceholderText: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
+  const { translateString } = useTranslateValue();
+  const translatedText: string = translateString(props.text) ?? props.text;
   return (
     <span className="inline-flex items-center gap-1.5 text-gray-400 italic text-sm select-none px-2 py-0.5 rounded-md bg-gray-50 border border-dashed border-gray-200">
       <svg
@@ -22,7 +25,7 @@ const PlaceholderText: FunctionComponent<ComponentProps> = (
           d="M20 12H4"
         />
       </svg>
-      {props.text}
+      {translatedText}
     </span>
   );
 };

package/UI/Components/Dropdown/Dropdown.tsx

@@ -1,4 +1,5 @@
 import ObjectID from "../../../Types/ObjectID";
+import useTranslateValue from "../../Utils/Translation";
 import React, {
   FunctionComponent,
   ReactElement,
@@ -63,6 +64,12 @@ export interface ComponentProps {
 const Dropdown: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
+  const { translateString } = useTranslateValue();
+  const tx: (value: string | undefined) => string | undefined = (
+    value: string | undefined,
+  ): string | undefined => {
+    return translateString(value);
+  };
   const uniqueId: string = useId();
   const errorId: string = `dropdown-error-${uniqueId}`;
 
@@ -459,7 +466,7 @@ const Dropdown: FunctionComponent<ComponentProps> = (
           <div className="flex items-center gap-2">
             {renderOptionColorIndicator(option.color)}
             <span className="text-sm font-medium text-gray-900">
-              {option.label}
+              {tx(option.label) ?? option.label}
             </span>
           </div>
           {renderAssociatedLabels(
@@ -476,11 +483,13 @@ const Dropdown: FunctionComponent<ComponentProps> = (
         <div className="flex items-center gap-2">
           {renderOptionColorIndicator(option.color)}
           <span className="text-sm font-medium text-gray-900">
-            {option.label}
+            {tx(option.label) ?? option.label}
           </span>
         </div>
         {option.description ? (
-          <span className="text-xs text-gray-500">{option.description}</span>
+          <span className="text-xs text-gray-500">
+            {tx(option.description) ?? option.description}
+          </span>
         ) : null}
         {renderAssociatedLabels(visibleLabels, meta.context, hiddenLabelCount)}
       </div>
@@ -707,7 +716,7 @@ const Dropdown: FunctionComponent<ComponentProps> = (
         menuPosition="fixed"
         isClearable={true}
         isSearchable={true}
-        placeholder={props.placeholder}
+        placeholder={tx(props.placeholder) ?? props.placeholder}
         options={props.options as any}
         onChange={(option: any | null) => {
           if (option) {

package/UI/Components/ErrorMessage/ErrorMessage.tsx

@@ -1,3 +1,4 @@
+import useTranslateValue from "../../Utils/Translation";
 import React, { FunctionComponent, ReactElement } from "react";
 
 export interface ComponentProps {
@@ -8,9 +9,15 @@ export interface ComponentProps {
 const ErrorMessage: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
+  const { translateValue, translateString } = useTranslateValue();
+  const translatedMessage: string | ReactElement | undefined =
+    typeof props.message === "string"
+      ? (translateValue(props.message) as string | ReactElement | undefined) ??
+        props.message
+      : props.message;
   return (
     <div className="text-center my-10 text-gray-500 text-sm">
-      {props.message}
+      {translatedMessage}
       {props.onRefreshClick ? (
         <div
           role={"refresh-button"}
@@ -21,7 +28,7 @@ const ErrorMessage: FunctionComponent<ComponentProps> = (
           }}
           className="underline cursor-pointer hover:text-gray-700 mt-3"
         >
-          Refresh?
+          {translateString("Refresh?") ?? "Refresh?"}
         </div>
       ) : (
         <></>

package/UI/Components/Filters/FilterViewer.tsx

@@ -34,6 +34,7 @@ import OneUptimeDate from "../../../Types/Date";
 import Dictionary from "../../../Types/Dictionary";
 import GenericObject from "../../../Types/GenericObject";
 import IconProp from "../../../Types/Icon/IconProp";
+import useTranslateValue from "../../Utils/Translation";
 import React, { ReactElement, useEffect, useState } from "react";
 
 export interface ComponentProps<T extends GenericObject> {
@@ -61,6 +62,12 @@ type FilterComponentFunction = <T extends GenericObject>(
 const FilterComponent: FilterComponentFunction = <T extends GenericObject>(
   props: ComponentProps<T>,
 ): ReactElement => {
+  const { translateString } = useTranslateValue();
+  const tx: (value: string | undefined) => string = (
+    value: string | undefined,
+  ): string => {
+    return translateString(value) ?? value ?? "";
+  };
   const [tempFilterDataForModal, setTempFilterDataForModal] = useState<
     FilterData<T>
   >({});
@@ -207,9 +214,10 @@ const FilterComponent: FilterComponentFunction = <T extends GenericObject>(
     if (data.filter.type === FieldType.Boolean) {
       filterText = (
         <span>
-          <span className="font-medium">{data.filter.title}</span> is{" "}
+          <span className="font-medium">{tx(data.filter.title)}</span>{" "}
+          {tx("is")}{" "}
           <span className="font-medium">
-            {data.filterData[data.filter.key] ? "Yes" : "No"}
+            {data.filterData[data.filter.key] ? tx("Yes") : tx("No")}
           </span>
         </span>
       );
@@ -238,8 +246,8 @@ const FilterComponent: FilterComponentFunction = <T extends GenericObject>(
       ): ReactElement => {
         return (
           <span>
-            <span className="font-medium">{data.filter.title}</span> {verb}{" "}
-            <span className="font-medium">{display}</span>
+            <span className="font-medium">{tx(data.filter.title)}</span>{" "}
+            {tx(verb)} <span className="font-medium">{display}</span>
           </span>
         );
       };
@@ -247,15 +255,16 @@ const FilterComponent: FilterComponentFunction = <T extends GenericObject>(
       if (value instanceof IsNull) {
         return (
           <span>
-            <span className="font-medium">{data.filter.title}</span> is empty
+            <span className="font-medium">{tx(data.filter.title)}</span>{" "}
+            {tx("is empty")}
           </span>
         );
       }
       if (value instanceof NotNull) {
         return (
           <span>
-            <span className="font-medium">{data.filter.title}</span> is not
-            empty
+            <span className="font-medium">{tx(data.filter.title)}</span>{" "}
+            {tx("is not empty")}
           </span>
         );
       }
@@ -328,8 +337,8 @@ const FilterComponent: FilterComponentFunction = <T extends GenericObject>(
       ): ReactElement => {
         return (
           <span>
-            <span className="font-medium">{data.filter.title}</span> {verb}{" "}
-            <span className="font-medium">{display}</span>
+            <span className="font-medium">{tx(data.filter.title)}</span>{" "}
+            {tx(verb)} <span className="font-medium">{display}</span>
           </span>
         );
       };
@@ -337,15 +346,16 @@ const FilterComponent: FilterComponentFunction = <T extends GenericObject>(
       if (value instanceof IsNull) {
         return (
           <span>
-            <span className="font-medium">{data.filter.title}</span> is empty
+            <span className="font-medium">{tx(data.filter.title)}</span>{" "}
+            {tx("is empty")}
           </span>
         );
       }
       if (value instanceof NotNull) {
         return (
           <span>
-            <span className="font-medium">{data.filter.title}</span> is not
-            empty
+            <span className="font-medium">{tx(data.filter.title)}</span>{" "}
+            {tx("is not empty")}
           </span>
         );
       }
@@ -409,8 +419,8 @@ const FilterComponent: FilterComponentFunction = <T extends GenericObject>(
 
       return (
         <span className="inline-flex items-center space-x-1">
-          <span className="font-medium">{data.filter.title}</span>
-          <span>{isPlural ? "are" : "is"}</span>
+          <span className="font-medium">{tx(data.filter.title)}</span>
+          <span>{isPlural ? tx("are") : tx("is")}</span>
           <span className="font-medium">{formatJson(json)}</span>
         </span>
       );
@@ -428,15 +438,16 @@ const FilterComponent: FilterComponentFunction = <T extends GenericObject>(
       if (rawValue instanceof IsNull) {
         return (
           <span>
-            <span className="font-medium">{data.filter.title}</span> is empty
+            <span className="font-medium">{tx(data.filter.title)}</span>{" "}
+            {tx("is empty")}
           </span>
         );
       }
       if (rawValue instanceof NotNull) {
         return (
           <span>
-            <span className="font-medium">{data.filter.title}</span> is not
-            empty
+            <span className="font-medium">{tx(data.filter.title)}</span>{" "}
+            {tx("is not empty")}
           </span>
         );
       }
@@ -484,19 +495,18 @@ const FilterComponent: FilterComponentFunction = <T extends GenericObject>(
       const isMoreItems: boolean = items.length > 1;
       let joiner: string;
       if (matchMode === "all") {
-        joiner = " has all of: ";
+        joiner = tx("has all of:");
       } else if (matchMode === "none") {
-        joiner = " has none of: ";
+        joiner = tx("has none of:");
       } else if (isMoreItems) {
-        joiner = " is any of: ";
+        joiner = tx("is any of:");
       } else {
-        joiner = " is ";
+        joiner = tx("is");
       }
 
       return (
         <span>
-          <span className="font-medium">{data.filter.title}</span>
-          {joiner}
+          <span className="font-medium">{tx(data.filter.title)}</span> {joiner}{" "}
           <span className="font-medium">{entityNames}</span>
         </span>
       );
@@ -525,7 +535,8 @@ const FilterComponent: FilterComponentFunction = <T extends GenericObject>(
               <div className="flex items-center gap-2 text-sm text-gray-700">
                 <Icon icon={IconProp.Filter} size={SizeProp.Smaller} />
                 <span className="font-semibold">
-                  Showing {props.pluralLabel || "results"} that match
+                  {tx("Showing")} {props.pluralLabel || tx("results")}{" "}
+                  {tx("that match")}
                 </span>
               </div>
             </div>
@@ -549,7 +560,7 @@ const FilterComponent: FilterComponentFunction = <T extends GenericObject>(
                 className="font-medium text-gray-900"
                 icon={IconProp.Filter}
                 onClick={props.onFilterModalOpen}
-                title="Edit Filters"
+                title={tx("Edit Filters")}
                 iconSize={SizeProp.Smaller}
                 buttonStyle={ButtonStyleType.SECONDARY_LINK}
               />
@@ -562,7 +573,7 @@ const FilterComponent: FilterComponentFunction = <T extends GenericObject>(
                 }}
                 className="font-medium text-gray-900"
                 icon={IconProp.Close}
-                title="Clear Filters"
+                title={tx("Clear Filters")}
                 buttonStyle={ButtonStyleType.SECONDARY_LINK}
               />
             </div>
@@ -574,11 +585,11 @@ const FilterComponent: FilterComponentFunction = <T extends GenericObject>(
         <Modal
           modalWidth={ModalWidth.Large}
           isLoading={props.isModalLoading}
-          title={`Filter ${props.pluralLabel || props.singularLabel || "results"}`}
-          description={`Narrow down ${
-            props.pluralLabel || "results"
-          } by one or more criteria below.`}
-          submitButtonText={`Apply Filters`}
+          title={`${tx("Filter")} ${props.pluralLabel || props.singularLabel || tx("results")}`}
+          description={`${tx("Narrow down")} ${
+            props.pluralLabel || tx("results")
+          } ${tx("by one or more criteria below.")}`}
+          submitButtonText={tx("Apply Filters")}
           onClose={() => {
             props.onFilterModalClose?.();
           }}

package/UI/Components/Filters/FiltersForm.tsx

@@ -3,6 +3,7 @@ import ComponentLoader from "../ComponentLoader/ComponentLoader";
 import ErrorMessage from "../ErrorMessage/ErrorMessage";
 import FieldType from "../Types/FieldType";
 import IconProp from "../../../Types/Icon/IconProp";
+import useTranslateValue from "../../Utils/Translation";
 import BooleanFilter from "./BooleanFilter";
 import DateFilter from "./DateFilter";
 import DropdownFilter from "./DropdownFilter";
@@ -53,6 +54,12 @@ type FiltersFormFunction = <T extends GenericObject>(
 const FiltersForm: FiltersFormFunction = <T extends GenericObject>(
   props: ComponentProps<T>,
 ): ReactElement => {
+  const { translateString } = useTranslateValue();
+  const tx: (value: string | undefined) => string = (
+    value: string | undefined,
+  ): string => {
+    return translateString(value) ?? value ?? "";
+  };
   if (!props.showFilter) {
     return <></>;
   }
@@ -127,7 +134,7 @@ const FiltersForm: FiltersFormFunction = <T extends GenericObject>(
                 }`}
               >
                 <label className="text-sm font-medium text-gray-700 truncate">
-                  {filter.title}
+                  {tx(filter.title)}
                 </label>
               </div>
 
@@ -196,8 +203,8 @@ const FiltersForm: FiltersFormFunction = <T extends GenericObject>(
                       return clearFilter(filter.key as keyof T);
                     }}
                     className="p-1.5 rounded-md text-gray-400 hover:text-gray-700 hover:bg-gray-100 transition-colors"
-                    aria-label={`Clear ${filter.title} filter`}
-                    title={`Clear ${filter.title}`}
+                    aria-label={`${tx("Clear")} ${tx(filter.title)} ${tx("filter")}`}
+                    title={`${tx("Clear")} ${tx(filter.title)}`}
                   >
                     <svg
                       xmlns="http://www.w3.org/2000/svg"
@@ -240,9 +247,9 @@ const FiltersForm: FiltersFormFunction = <T extends GenericObject>(
           buttonSize={ButtonSize.Small}
           buttonStyle={ButtonStyleType.SECONDARY_LINK}
           icon={showMoreFilters ? IconProp.ChevronUp : IconProp.ChevronDown}
-          title={
-            showMoreFilters ? "Hide Advanced Filters" : "Show Advanced Filters"
-          }
+          title={tx(
+            showMoreFilters ? "Hide Advanced Filters" : "Show Advanced Filters",
+          )}
           onClick={() => {
             setShowMoreFilters((currentValue: boolean) => {
               const newValue: boolean = !currentValue;