@oneuptime/common 10.0.80 → 10.0.83

package/Types/BaseDatabase/AggregationType.ts

@@ -4,6 +4,41 @@ enum AggregationType {
   Sum = "Sum",
   Avg = "Avg",
   Count = "Count",
+  /*
+   * Percentile aggregations. For Metric (the only model that carries
+   * histogram bucket data), MetricService overrides the aggregate path to
+   * fan out histogram buckets into weighted samples and use
+   * quantileExactWeighted, so a P95 of an `http.server.request.duration`
+   * histogram returns the bucket-derived 95th percentile rather than the
+   * 95th percentile of the per-row `sum`. For other models (Span, Log,
+   * etc.) the StatementGenerator falls back to ClickHouse's `quantile(p)`
+   * over the raw column, which is the right thing for scalar columns.
+   */
+  P50 = "P50",
+  P90 = "P90",
+  P95 = "P95",
+  P99 = "P99",
 }
 
 export default AggregationType;
+
+export const PercentileAggregationLevels: Record<string, number> = {
+  [AggregationType.P50]: 0.5,
+  [AggregationType.P90]: 0.9,
+  [AggregationType.P95]: 0.95,
+  [AggregationType.P99]: 0.99,
+};
+
+export function isPercentileAggregation(type: AggregationType): boolean {
+  return Object.prototype.hasOwnProperty.call(
+    PercentileAggregationLevels,
+    type,
+  );
+}
+
+export function getPercentileLevel(type: AggregationType): number | null {
+  if (!isPercentileAggregation(type)) {
+    return null;
+  }
+  return PercentileAggregationLevels[type] ?? null;
+}

package/Types/Monitor/IncomingMonitor/IncomingMonitorRequest.ts

@@ -14,4 +14,5 @@ export default interface IncomingMonitorRequest {
   onlyCheckForIncomingRequestReceivedAt?: boolean | undefined;
   checkedAt: Date;
   evaluationSummary?: MonitorEvaluationSummary | undefined;
+  receivedViaProbeId?: ObjectID | undefined;
 }

package/UI/Components/Banner/Banner.tsx

@@ -1,6 +1,7 @@
 import Link from "../Link/Link";
 import Route from "../../../Types/API/Route";
 import URL from "../../../Types/API/URL";
+import useTranslateValue from "../../Utils/Translation";
 import React, { FunctionComponent, ReactElement } from "react";
 import { GetReactElementFunction } from "../../Types/FunctionTypes";
 
@@ -15,10 +16,14 @@ export interface ComponentProps {
 const Banner: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
+  const { translateString } = useTranslateValue();
+  const translatedTitle: string = translateString(props.title) || props.title;
+  const translatedDescription: string =
+    translateString(props.description) || props.description;
   const getContent: GetReactElementFunction = (): ReactElement => {
     return (
       <>
-        <strong className="font-semibold">{props.title}</strong>
+        <strong className="font-semibold">{translatedTitle}</strong>
         <svg
           viewBox="0 0 2 2"
           className="mx-2 inline h-0.5 w-0.5 fill-current"
@@ -26,7 +31,7 @@ const Banner: FunctionComponent<ComponentProps> = (
         >
           <circle cx="1" cy="1" r="1" />
         </svg>
-        {props.description}&nbsp;
+        {translatedDescription}&nbsp;
         <span aria-hidden="true">&rarr;</span>
       </>
     );

package/UI/Components/Breadcrumbs/Breadcrumbs.tsx

@@ -4,6 +4,7 @@ import Route from "../../../Types/API/Route";
 import URL from "../../../Types/API/URL";
 import IconProp from "../../../Types/Icon/IconProp";
 import Link from "../../../Types/Link";
+import useTranslateValue from "../../Utils/Translation";
 import React, { FunctionComponent, ReactElement } from "react";
 
 interface ComponentProps {
@@ -13,12 +14,15 @@ interface ComponentProps {
 const Breadcrumbs: FunctionComponent<ComponentProps> = ({
   links,
 }: ComponentProps): ReactElement => {
+  const { translateString } = useTranslateValue();
   return (
     <nav className="flex hidden md:block" aria-label="Breadcrumb">
       <ol role="list" className="flex items-center space-x-1">
         {links &&
           links.length > 0 &&
           links.map((link: Link, i: number) => {
+            const translatedTitle: string =
+              translateString(link.title) || link.title;
             return (
               <li className="breadcrumb-item" key={i}>
                 {i === 0 && (
@@ -28,7 +32,7 @@ const Breadcrumbs: FunctionComponent<ComponentProps> = ({
                       className="text-gray-400 hover:text-gray-500 -mt-1"
                     >
                       <span className="text-sm font-medium text-gray-500 hover:text-gray-700 -mt-1">
-                        {link.title}
+                        {translatedTitle}
                       </span>
                     </UILink>
                   </div>
@@ -48,7 +52,7 @@ const Breadcrumbs: FunctionComponent<ComponentProps> = ({
                       }
                       className="ml-1 text-sm font-medium text-gray-500 hover:text-gray-700 -mt-1"
                     >
-                      {link.title}
+                      {translatedTitle}
                     </UILink>
                   </div>
                 )}

package/UI/Components/Button/Button.tsx

@@ -3,6 +3,7 @@ import Icon, { SizeProp } from "../Icon/Icon";
 import ShortcutKey from "../ShortcutKey/ShortcutKey";
 import ButtonType from "./ButtonTypes";
 import IconProp from "../../../Types/Icon/IconProp";
+import useTranslateValue from "../../Utils/Translation";
 import React, { FunctionComponent, ReactElement, useEffect } from "react";
 import Tooltip from "../Tooltip/Tooltip";
 import { GetReactElementFunction } from "../../Types/FunctionTypes";
@@ -86,6 +87,9 @@ const Button: FunctionComponent<ComponentProps> = ({
   ariaHaspopup,
   ariaControls,
 }: ComponentProps): ReactElement => {
+  const { translateString } = useTranslateValue();
+  const translatedTitle: string | undefined = translateString(title);
+  const translatedTooltip: string | undefined = translateString(tooltip);
   useEffect(() => {
     // componentDidMount
     if (shortcutKey) {
@@ -254,7 +258,7 @@ const Button: FunctionComponent<ComponentProps> = ({
     ariaLabel ||
     (buttonStyle === ButtonStyleType.ICON ||
     buttonStyle === ButtonStyleType.ICON_LIGHT
-      ? title || tooltip
+      ? translatedTitle || translatedTooltip
       : undefined);
 
   const getButton: GetReactElementFunction = (): ReactElement => {
@@ -289,7 +293,9 @@ const Button: FunctionComponent<ComponentProps> = ({
           />
         )}
 
-        {title && buttonStyle !== ButtonStyleType.ICON ? title : ``}
+        {translatedTitle && buttonStyle !== ButtonStyleType.ICON
+          ? translatedTitle
+          : ``}
 
         {shortcutKey && (
           <div className="ml-2">
@@ -302,8 +308,8 @@ const Button: FunctionComponent<ComponentProps> = ({
     );
   };
 
-  if (tooltip) {
-    return <Tooltip text={tooltip}>{getButton()}</Tooltip>;
+  if (translatedTooltip) {
+    return <Tooltip text={translatedTooltip}>{getButton()}</Tooltip>;
   }
   return getButton();
 };

package/UI/Components/Card/Card.tsx

@@ -1,6 +1,7 @@
 import Button, { ButtonSize, ButtonStyleType } from "../Button/Button";
 import ShortcutKey from "../ShortcutKey/ShortcutKey";
 import IconProp from "../../../Types/Icon/IconProp";
+import useTranslateValue from "../../Utils/Translation";
 import React, { FunctionComponent, ReactElement } from "react";
 
 export interface CardButtonSchema {
@@ -28,8 +29,14 @@ export interface ComponentProps {
 const Card: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
+  const { translateValue } = useTranslateValue();
   const noRightElementsOrButtons: boolean =
     !props.rightElement && (!props.buttons || props.buttons.length === 0);
+  const translatedTitle: string | ReactElement | undefined = translateValue(
+    props.title,
+  );
+  const translatedDescription: string | ReactElement | undefined =
+    translateValue(props.description);
 
   return (
     <React.Fragment>
@@ -40,21 +47,21 @@ const Card: FunctionComponent<ComponentProps> = (
               <div
                 className={`${noRightElementsOrButtons ? "w-full" : "flex-1 min-w-0"}`}
               >
-                {props.title && (
+                {translatedTitle && (
                   <h2
                     data-testid="card-details-heading"
                     id="card-details-heading"
                     className="text-lg font-semibold leading-6 text-gray-900"
                   >
-                    {props.title}
+                    {translatedTitle}
                   </h2>
                 )}
-                {props.description && (
+                {translatedDescription && (
                   <p
                     data-testid="card-description"
                     className="mt-1.5 text-sm text-gray-500 w-full hidden md:block leading-relaxed"
                   >
-                    {props.description}
+                    {translatedDescription}
                   </p>
                 )}
               </div>

package/UI/Components/EmptyState/EmptyState.tsx

@@ -1,5 +1,6 @@
 import Icon from "../Icon/Icon";
 import IconProp from "../../../Types/Icon/IconProp";
+import useTranslateValue from "../../Utils/Translation";
 import React, { FunctionComponent, ReactElement } from "react";
 
 export interface ComponentProps {
@@ -15,6 +16,7 @@ export interface ComponentProps {
 const EmptyState: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
+  const { translateValue } = useTranslateValue();
   return (
     <React.Fragment>
       <div
@@ -34,9 +36,11 @@ const EmptyState: FunctionComponent<ComponentProps> = (
           )}
 
           <h3 className="mt-2 text-sm font-medium text-gray-900">
-            {props.title}
+            {translateValue(props.title)}
           </h3>
-          <p className="mt-1 text-sm text-gray-500">{props.description}</p>
+          <p className="mt-1 text-sm text-gray-500">
+            {translateValue(props.description)}
+          </p>
           {props.footer && <div className="mt-6">{props.footer}</div>}
         </div>
       </div>

package/UI/Components/EventItem/EventItem.tsx

@@ -11,6 +11,7 @@ import Color from "../../../Types/Color";
 import OneUptimeDate from "../../../Types/Date";
 import IconProp from "../../../Types/Icon/IconProp";
 import React, { FunctionComponent, ReactElement } from "react";
+import { useTranslation } from "react-i18next";
 
 export enum TimelineItemType {
   StateChange = "StateChange",
@@ -61,6 +62,7 @@ export interface ComponentProps {
 const EventItem: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
+  const { t } = useTranslation();
   return (
     <div className="mt-5 mb-5 bg-white shadow rounded-xl border-gray-100 p-5">
       <div>
@@ -156,7 +158,7 @@ const EventItem: FunctionComponent<ComponentProps> = (
           <div key={0}>
             <div className="flex flex-wrap gap-y-4 space-x-1 active-event-box-body-reesources">
               <div className="text-sm text-gray-400 mr-3 mt-1">
-                Affected resources
+                {t("eventItem.affectedResources")}
               </div>
               {props.eventResourcesAffected?.map((item: string, i: number) => {
                 return (
@@ -222,7 +224,7 @@ const EventItem: FunctionComponent<ComponentProps> = (
                                 <span className="font-medium text-gray-900 mr-1">
                                   {props.eventType}
                                 </span>
-                                state changed to
+                                {t("eventItem.stateChangedTo")}
                               </span>
                               <span className="mr-1">
                                 <Pill
@@ -294,11 +296,13 @@ const EventItem: FunctionComponent<ComponentProps> = (
                                 >
                                   {item.title
                                     ? item.title
-                                    : `Update to this ${props.eventType}`}
+                                    : t("eventItem.updateTo", {
+                                        eventType: props.eventType,
+                                      })}
                                 </span>
                               </div>
                               <p className="mt-0.5 text-sm text-gray-500">
-                                posted on{" "}
+                                {t("eventItem.postedOn")}{" "}
                                 {OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(
                                   item.date,
                                 )}
@@ -345,7 +349,7 @@ const EventItem: FunctionComponent<ComponentProps> = (
                 className="cursor-pointer text-gray-400 hover:text-gray-500 text-sm"
                 to={props.eventViewRoute}
               >
-                <>View {props.eventType}</>
+                <>{t("eventItem.view", { eventType: props.eventType })}</>
               </Link>
             </span>
           ) : (

package/UI/Components/Modal/ConfirmModal.tsx

@@ -1,5 +1,6 @@
 import { ButtonStyleType } from "../Button/Button";
 import Modal from "./Modal";
+import useTranslateValue from "../../Utils/Translation";
 import React, { FunctionComponent, ReactElement } from "react";
 
 export interface ComponentProps {
@@ -19,6 +20,9 @@ export interface ComponentProps {
 const ConfirmModal: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
+  const { translateValue } = useTranslateValue();
+  const translatedDescription: string | ReactElement | undefined =
+    translateValue(props.description);
   return (
     <Modal
       title={props.title}
@@ -46,7 +50,7 @@ const ConfirmModal: FunctionComponent<ComponentProps> = (
         data-testid="confirm-modal-description"
         className="text-gray-500 mt-5 text-sm whitespace-pre-wrap break-words max-h-96 overflow-y-auto pr-1"
       >
-        {props.description}
+        {translatedDescription}
       </div>
     </Modal>
   );

package/UI/Components/Modal/Modal.tsx

@@ -6,6 +6,7 @@ import ModalBody from "./ModalBody";
 import ModalFooter from "./ModalFooter";
 import { VeryLightGray } from "../../../Types/BrandColors";
 import IconProp from "../../../Types/Icon/IconProp";
+import useTranslateValue from "../../Utils/Translation";
 import React, {
   FunctionComponent,
   ReactElement,
@@ -43,6 +44,17 @@ export interface ComponentProps {
 const Modal: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
+  const { translateString } = useTranslateValue();
+  const translatedTitle: string = translateString(props.title) || props.title;
+  const translatedDescription: string | undefined = translateString(
+    props.description,
+  );
+  const translatedSubmitButtonText: string | undefined = translateString(
+    props.submitButtonText,
+  );
+  const translatedCloseButtonText: string | undefined = translateString(
+    props.closeButtonText,
+  );
   const modalRef: React.RefObject<HTMLDivElement> =
     useRef<HTMLDivElement>(null);
 
@@ -162,15 +174,15 @@ const Modal: FunctionComponent<ComponentProps> = (
                       }`}
                       id="modal-title"
                     >
-                      {props.title}
+                      {translatedTitle}
                     </h3>
-                    {props.description && (
+                    {translatedDescription && (
                       <p
                         id="modal-description"
                         data-testid="modal-description"
                         className="text-sm leading-6 text-gray-500 mt-2"
                       >
-                        {props.description}
+                        {translatedDescription}
                       </p>
                     )}
                   </div>
@@ -214,10 +226,14 @@ const Modal: FunctionComponent<ComponentProps> = (
                   : ButtonStyleType.NORMAL
               }
               submitButtonText={
-                props.submitButtonText ? props.submitButtonText : "Save"
+                translatedSubmitButtonText
+                  ? translatedSubmitButtonText
+                  : translateString("Save") || "Save"
               }
               closeButtonText={
-                props.closeButtonText ? props.closeButtonText : "Cancel"
+                translatedCloseButtonText
+                  ? translatedCloseButtonText
+                  : translateString("Cancel") || "Cancel"
               }
               onSubmit={props.onSubmit}
               onClose={props.onClose ? props.onClose : undefined}

package/UI/Components/ModelTable/BaseModelTable.tsx

@@ -4,6 +4,7 @@ import { API_DOCS_URL, BILLING_ENABLED, getAllEnvVars } from "../../Config";
 import { GetReactElementFunction } from "../../Types/FunctionTypes";
 import SelectEntityField from "../../Types/SelectEntityField";
 import API from "../../Utils/API/API";
+import useTranslateValue from "../../Utils/Translation";
 
 import Query from "../../../Types/BaseDatabase/Query";
 import GroupBy from "../../../Types/BaseDatabase/GroupBy";
@@ -266,6 +267,7 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
 ) => ReactElement = <TBaseModel extends BaseModel | AnalyticsBaseModel>(
   props: ComponentProps<TBaseModel>,
 ): ReactElement => {
+  const { translateValue } = useTranslateValue();
   const [tableView, setTableView] = useState<TableView | null>(null);
 
   const matchBulkSelectedItemByField: keyof TBaseModel =
@@ -1917,6 +1919,10 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
   const getCardTitle: GetCardTitleFunction = (
     title: ReactElement | string,
   ): ReactElement => {
+    const renderedTitle: ReactElement | string =
+      typeof title === "string"
+        ? (translateValue(title) as ReactElement | string | undefined) ?? title
+        : title;
     const plan: PlanType | null = ProjectUtil.getCurrentPlan();
 
     let showPlan: boolean = Boolean(
@@ -1950,7 +1956,7 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
 
     return (
       <span>
-        {title}
+        {renderedTitle}
         {showPlan && (
           <span
             style={{

package/UI/Components/Navbar/NavBar.tsx

@@ -301,12 +301,15 @@ const Navbar: FunctionComponent<ComponentProps> = (
     });
   });
 
-  // Find Home item from navItems
+  /*
+   * Find Home item from navItems. Match by id so this keeps working when the
+   * title is translated to a non-English language.
+   */
   const homeItem: NavItem | undefined = props.items.find((item: NavItem) => {
-    return item.title === "Home";
+    return item.id === "home-nav-bar-item";
   });
   const otherNavItems: NavItem[] = props.items.filter((item: NavItem) => {
-    return item.title !== "Home";
+    return item.id !== "home-nav-bar-item";
   });
 
   return (

package/UI/Components/Page/Page.tsx

@@ -5,6 +5,7 @@ import PageLoader from "../Loader/PageLoader";
 import LabelElement from "../Label/Label";
 import Link from "../../../Types/Link";
 import LabelModel from "../../../Models/DatabaseModels/Label";
+import useTranslateValue from "../../Utils/Translation";
 import React, { FunctionComponent, ReactElement, useEffect } from "react";
 
 export interface ComponentProps {
@@ -22,6 +23,9 @@ export interface ComponentProps {
 const Page: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
+  const { translateString } = useTranslateValue();
+  const translatedTitle: string | undefined = translateString(props.title);
+
   useEffect(() => {
     if (props.breadcrumbLinks && props.breadcrumbLinks.length > 0) {
       Analytics.capture(
@@ -60,7 +64,7 @@ const Page: FunctionComponent<ComponentProps> = (
               <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between sm:flex-wrap sm:gap-4">
                 <div className="flex flex-col gap-1 min-w-0">
                   <h1 className="text-xl font-semibold leading-7 text-gray-900 sm:text-xl sm:tracking-tight sm:truncate">
-                    {props.title}
+                    {translatedTitle}
                   </h1>
                 </div>
                 {props.headerRight && (
@@ -71,7 +75,7 @@ const Page: FunctionComponent<ComponentProps> = (
                 {props.labels && props.labels.length > 0 && (
                   <div className="hidden sm:flex sm:flex-wrap sm:items-center sm:justify-end sm:gap-3">
                     <span className="text-xs font-semibold uppercase tracking-wide text-gray-500 whitespace-nowrap">
-                      Labels
+                      {translateString("Labels") || "Labels"}
                     </span>
                     <div className="flex flex-wrap items-center gap-2 justify-end">
                       {props.labels

package/UI/Components/SideMenu/SideMenu.tsx

@@ -8,6 +8,7 @@ import Icon from "../Icon/Icon";
 import IconProp from "../../../Types/Icon/IconProp";
 import useComponentOutsideClick from "../../Types/UseComponentOutsideClick";
 import Navigation from "../../Utils/Navigation";
+import useTranslateValue from "../../Utils/Translation";
 import SideMenuItem from "./SideMenuItem";
 import SideMenuSection from "./SideMenuSection";
 import CountModelSideMenuItem from "./CountModelSideMenuItem";
@@ -53,6 +54,7 @@ export interface ComponentProps {
 }
 
 const SideMenu: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
+  const { translateString } = useTranslateValue();
   const [isMobile, setIsMobile] = useState<boolean>(false);
   const [isMobileMenuVisible, setIsMobileMenuVisible] =
     useState<boolean>(false);
@@ -148,10 +150,16 @@ const SideMenu: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
     itemTitle?: string;
     icon?: IconProp;
   } = findActiveMenuItem();
+  const translatedSectionTitle: string | undefined = translateString(
+    activeItem.sectionTitle,
+  );
+  const translatedItemTitle: string | undefined = translateString(
+    activeItem.itemTitle,
+  );
   const displayText: string =
-    activeItem.sectionTitle && activeItem.itemTitle
-      ? `${activeItem.sectionTitle} / ${activeItem.itemTitle}`
-      : activeItem.itemTitle || "Navigation";
+    translatedSectionTitle && translatedItemTitle
+      ? `${translatedSectionTitle} / ${translatedItemTitle}`
+      : translatedItemTitle || translateString("Navigation") || "Navigation";
 
   // Re-run active item detection when location changes
   useEffect(() => {
@@ -309,8 +317,10 @@ const SideMenu: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
           aria-expanded={isMobileMenuVisible}
           aria-label={
             isMobileMenuVisible
-              ? "Close navigation menu"
-              : "Open navigation menu"
+              ? translateString("Close navigation menu") ||
+                "Close navigation menu"
+              : translateString("Open navigation menu") ||
+                "Open navigation menu"
           }
           data-testid="mobile-sidemenu-toggle"
         >
@@ -321,7 +331,9 @@ const SideMenu: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
               </div>
             )}
             <div className="min-w-0">
-              <p className="text-xs text-gray-400 font-medium">Navigate to</p>
+              <p className="text-xs text-gray-400 font-medium">
+                {translateString("Navigate to")}
+              </p>
               <h3 className="text-sm font-semibold text-gray-900 truncate">
                 {displayText}
               </h3>

package/UI/Components/SideMenu/SideMenuItem.tsx

@@ -1,4 +1,5 @@
 import Navigation from "../../Utils/Navigation";
+import useTranslateValue from "../../Utils/Translation";
 import Badge, { BadgeType } from "../Badge/Badge";
 import Icon from "../Icon/Icon";
 import UILink from "../Link/Link";
@@ -21,10 +22,16 @@ export interface ComponentProps {
 const SideMenuItem: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ) => {
+  const { translateString } = useTranslateValue();
   const isActive: boolean = Navigation.isOnThisPage(props.link.to);
   const isSubItemActive: boolean = props.subItemLink
     ? Navigation.isOnThisPage(props.subItemLink.to)
     : false;
+  const translatedTitle: string =
+    translateString(props.link.title) || props.link.title;
+  const translatedSubItemTitle: string | undefined = props.subItemLink
+    ? translateString(props.subItemLink.title) || props.subItemLink.title
+    : undefined;
 
   return (
     <>
@@ -84,7 +91,7 @@ const SideMenuItem: FunctionComponent<ComponentProps> = (
               ${isActive ? "font-semibold" : ""}
             `}
           >
-            {props.link.title}
+            {translatedTitle}
           </span>
         </div>
 
@@ -160,7 +167,7 @@ const SideMenuItem: FunctionComponent<ComponentProps> = (
                 }
               `}
             />
-            <span className="truncate">{props.subItemLink.title}</span>
+            <span className="truncate">{translatedSubItemTitle}</span>
           </div>
         </UILink>
       )}

package/UI/Components/SideMenu/SideMenuSection.tsx

@@ -1,4 +1,5 @@
 import Icon from "../Icon/Icon";
+import useTranslateValue from "../../Utils/Translation";
 import IconProp from "../../../Types/Icon/IconProp";
 import React, { FunctionComponent, ReactElement, useState } from "react";
 
@@ -13,9 +14,11 @@ export interface ComponentProps {
 const SideMenuSection: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ) => {
+  const { translateString } = useTranslateValue();
   const [isCollapsed, setIsCollapsed] = useState<boolean>(
     props.defaultCollapsed || false,
   );
+  const translatedTitle: string = translateString(props.title) || props.title;
 
   const isCollapsible: boolean = props.collapsible ?? true;
 
@@ -41,7 +44,7 @@ const SideMenuSection: FunctionComponent<ComponentProps> = (
             <Icon icon={props.icon} className="h-4 w-4 text-gray-400" />
           )}
           <h6 className="text-xs font-semibold uppercase tracking-wider text-gray-500">
-            {props.title}
+            {translatedTitle}
           </h6>
         </div>
         {isCollapsible && (