@oneuptime/common 12.0.30 → 12.0.32

package/UI/Components/ModelTable/BaseModelTable.tsx

@@ -32,6 +32,7 @@ import {
   BulkActionOnClickProps,
 } from "../BulkUpdate/BulkUpdateForm";
 import Button, { ButtonSize, ButtonStyleType } from "../Button/Button";
+import CopyTextButton from "../CopyTextButton/CopyTextButton";
 import MoreMenu from "../MoreMenu/MoreMenu";
 import MoreMenuItem from "../MoreMenu/MoreMenuItem";
 import Card, {
@@ -200,6 +201,13 @@ export enum ModalTableBulkDefaultActions {
 export interface BulkActionProps<T extends BaseModel | AnalyticsBaseModel> {
   buttons: Array<BulkActionButtonSchema<T> | ModalTableBulkDefaultActions>;
   matchBulkSelectedItemByField?: keyof T | undefined; // which field to use to match selected items. For exmaple this could be '_id'
+  /**
+   * Appended to the bulk Delete confirmation, for a surface where deleting the
+   * selected rows also removes records the user did not select, or where a
+   * reversible alternative exists. The default sentence only says the deletion
+   * cannot be undone - it cannot know what else goes with it.
+   */
+  deleteConfirmationWarning?: string | undefined;
 }
 
 export interface BaseTableProps<
@@ -418,6 +426,72 @@ export enum ModalType {
   Edit,
 }
 
+/*
+ * The fields a row is worth naming itself by, in the order a human would pick
+ * one. `title` is not decoration here: incidents, alerts and scheduled
+ * maintenance key on `title` rather than `name`, and those are exactly the
+ * tables where deleting the row next to the one you meant hurts most.
+ *
+ * Only the fields the table already selected are present on the row, so this
+ * reads whatever is there and gives up quietly rather than guessing.
+ */
+const ITEM_LABEL_FIELDS: Array<string> = [
+  "name",
+  "title",
+  "slug",
+  "email",
+  "username",
+  "domain",
+];
+
+type ReadLabelFieldFunction = (value: unknown) => string;
+
+/*
+ * Some of these fields arrive as objects with a meaningful toString - Name,
+ * Email, ObjectID all define one. Anything that does not is skipped rather
+ * than rendered as "[object Object]".
+ */
+const readLabelField: ReadLabelFieldFunction = (value: unknown): string => {
+  if (typeof value === "string") {
+    return value.trim();
+  }
+
+  if (value === null || value === undefined) {
+    return "";
+  }
+
+  const text: string = String(value);
+
+  return text === "[object Object]" ? "" : text.trim();
+};
+
+type GetItemLabelFunction = (item: unknown) => string;
+
+/*
+ * Every per-row Delete in the product opened the same dialog: "Are you sure
+ * you want to delete this monitor?" - a sentence equally true of the row that
+ * was clicked and of the twenty either side of it. That is precisely the
+ * moment a user wants to be told which one, and the one moment the dialog
+ * would not say.
+ */
+const getItemLabel: GetItemLabelFunction = (item: unknown): string => {
+  if (!item || typeof item !== "object") {
+    return "";
+  }
+
+  const record: Record<string, unknown> = item as Record<string, unknown>;
+
+  for (const field of ITEM_LABEL_FIELDS) {
+    const label: string = readLabelField(record[field]);
+
+    if (label) {
+      return label;
+    }
+  }
+
+  return "";
+};
+
 const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
   props: ComponentProps<TBaseModel>,
 ) => ReactElement = <TBaseModel extends BaseModel | AnalyticsBaseModel>(
@@ -2856,7 +2930,12 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
             items.length === 1
               ? props.singularName || model.singularName || "item"
               : props.pluralName || model.pluralName || "items";
-          return `Are you sure you want to delete ${items.length} ${itemLabel}? This action cannot be undone.`;
+
+          const warning: string = props.bulkActions?.deleteConfirmationWarning
+            ? ` ${props.bulkActions.deleteConfirmationWarning}`
+            : "";
+
+          return `Are you sure you want to delete ${items.length} ${itemLabel}? This action cannot be undone.${warning}`;
         },
         confirmTitle: (items: Array<TBaseModel>) => {
           const itemLabel: string =
@@ -2879,26 +2958,41 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
           const failedItems: Array<BulkActionFailed<TBaseModel>> = [];
 
           for (let i: number = 0; i < items.length; i++) {
-            try {
-              const item: TBaseModel = items[i]!;
-              // remove items from inProgressItems
-              inProgressItems.splice(inProgressItems.indexOf(item), 1);
+            const item: TBaseModel = items[i]!;
+
+            // remove items from inProgressItems
+            inProgressItems.splice(inProgressItems.indexOf(item), 1);
 
+            try {
               await props.callbacks.deleteItem(item);
               successItems.push(item);
-
-              onProgressInfo({
-                inProgressItems: inProgressItems,
-                successItems: successItems,
-                failed: failedItems,
-                totalItems: items,
-              });
             } catch (err) {
               failedItems.push({
-                item: items[i]!,
+                item: item,
                 failedMessage: API.getFriendlyMessage(err),
               });
             }
+
+            /*
+             * Reported after a failure as well as after a success. This used to
+             * sit inside the `try`, so a row that failed moved neither the
+             * progress bar nor the failure list until some later row succeeded
+             * - and a run whose trailing rows all failed (or one where every
+             * row failed, which is what a permission or constraint problem
+             * looks like) ended with the modal still showing the counts from
+             * before them. Deleting hundreds of rows at once is exactly where
+             * partial failure is expected, so it has to be visible.
+             *
+             * Copies, not the live arrays: the progress info goes into React
+             * state, and pushing into the same array reference leaves the
+             * previous render's snapshot mutated underneath it.
+             */
+            onProgressInfo({
+              inProgressItems: [...inProgressItems],
+              successItems: [...successItems],
+              failed: [...failedItems],
+              totalItems: items,
+            });
           }
 
           onBulkActionEnd();
@@ -2921,6 +3015,54 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
     return isSearchActive() ? false : isLoading;
   };
 
+  type HasFilterAppliedFunction = (
+    dataToCheck: FilterData<TBaseModel>,
+  ) => boolean;
+
+  /*
+   * Lifted out of the onFilterChanged callback below, which is where this test
+   * used to live inline. Two definitions of "a filter is applied" in one
+   * component is exactly the kind of thing that drifts apart.
+   */
+  const hasFilterApplied: HasFilterAppliedFunction = (
+    dataToCheck: FilterData<TBaseModel>,
+  ): boolean => {
+    for (const key in dataToCheck) {
+      if (dataToCheck[key]) {
+        return true;
+      }
+    }
+
+    return false;
+  };
+
+  type GetNoItemsMessageFunction = () => string | ReactElement;
+
+  /*
+   * An empty table has two quite different causes and used to have one
+   * sentence for both. A monitors table with nothing in it said "No monitor"
+   * - ungrammatical, and worse, it said the same thing after a search that
+   * matched nothing, so a typo in the search box looked exactly like an empty
+   * project. A caller's own noItemsMessage is deliberately overridden while a
+   * search or filter is active: those are usually "create your first X"
+   * panels, and offering one to someone whose search just missed is wrong.
+   */
+  const getNoItemsMessage: GetNoItemsMessageFunction = ():
+    | string
+    | ReactElement => {
+    const plural: string = (
+      props.pluralName ||
+      model.pluralName ||
+      "items"
+    ).toLocaleLowerCase();
+
+    if (isSearchActive() || hasFilterApplied(filterData)) {
+      return `${tx("No")} ${plural} ${tx("match your search or filters.")}`;
+    }
+
+    return props.noItemsMessage || `${tx("No")} ${plural} ${tx("yet.")}`;
+  };
+
   const getTable: GetReactElementFunction = (): ReactElement => {
     return (
       <Table
@@ -2929,17 +3071,8 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
           setTableView(null);
 
           // check if there's anything in the filter data and update the isFilterApplied prop.
-          let isFilterApplied: boolean = false;
-
-          for (const key in filterData) {
-            if (filterData[key]) {
-              isFilterApplied = true;
-              break;
-            }
-          }
-
           if (props.onFilterApplied) {
-            props.onFilterApplied(isFilterApplied);
+            props.onFilterApplied(hasFilterApplied(filterData));
           }
         }}
         filterData={filterData}
@@ -3010,9 +3143,17 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
             },
           );
 
+          /*
+           * On a table that already offers bulk actions the gate decides on
+           * its own, because there is no selection column left to grow: the
+           * row checkboxes are already there. That covers the locked case, and
+           * it also covers a master admin - allowed everything by the gate, but
+           * holding no project permission for `userCanDelete` to find, so the
+           * Delete they are entitled to used to be missing from a menu whose
+           * every other action worked (issue #3559).
+           */
           const canAutoInjectDelete: boolean =
-            userCanDelete ||
-            (bulkDeleteGate.disabled && sourceButtons.length > 0);
+            userCanDelete || (bulkDeleteGate.show && sourceButtons.length > 0);
 
           if (canAutoInjectDelete && !alreadyHasDeleteAction) {
             sourceButtons.push(ModalTableBulkDefaultActions.Delete);
@@ -3127,9 +3268,8 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
         matchBulkSelectedItemByField={matchBulkSelectedItemByField || "_id"}
         bulkItemToString={(item: TBaseModel) => {
           const label: string = props.singularName || item.singularName || "";
-          const name: string =
-            (item as unknown as Record<string, unknown>)["name"]?.toString() ||
-            "";
+          // Same deriver the delete confirmation uses, so the two cannot drift.
+          const name: string = getItemLabel(item);
           if (name) {
             return label ? `${label}: ${name}` : name;
           }
@@ -3200,7 +3340,7 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
 
           setItemsOnPage(newItemsOnPage);
         }}
-        noItemsMessage={props.noItemsMessage || ""}
+        noItemsMessage={getNoItemsMessage()}
         onRefreshClick={async () => {
           await fetchItems();
         }}
@@ -3256,7 +3396,7 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
         shouldAddItemInTheEnd={
           props.orderedStatesListProps.shouldAddItemInTheEnd
         }
-        noItemsMessage={props.noItemsMessage || ""}
+        noItemsMessage={getNoItemsMessage()}
         onRefreshClick={async () => {
           await fetchItems();
         }}
@@ -3343,7 +3483,7 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
 
           setItemsOnPage(newItemsOnPage);
         }}
-        noItemsMessage={props.noItemsMessage || ""}
+        noItemsMessage={getNoItemsMessage()}
         onRefreshClick={async () => {
           await fetchItems();
         }}
@@ -4498,11 +4638,18 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
       {showDeleteConfirmModal && (
         <ConfirmModal
           title={`Delete ${props.singularName || model.singularName}`}
-          description={`Are you sure you want to delete this ${(
-            props.singularName ||
-            model.singularName ||
-            "item"
-          )?.toLowerCase()}?`}
+          description={((): string => {
+            const label: string = (
+              props.singularName ||
+              model.singularName ||
+              "item"
+            ).toLowerCase();
+            const name: string = getItemLabel(currentDeleteableItem);
+
+            return `Are you sure you want to delete ${
+              name ? `"${name}"` : `this ${label}`
+            }? This action cannot be undone.`;
+          })()}
           onClose={() => {
             setShowDeleteConfirmModal(false);
           }}
@@ -4535,10 +4682,24 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
           description={
             <div>
               <span>
-                ID of this {props.singularName || model.singularName || ""}:{" "}
-                {viewId}
+                ID of this {props.singularName || model.singularName || ""}:
               </span>
-              <br />
+              {/*
+               * Handing over the id is the entire point of this dialog, and it
+               * used to be inline prose the user had to select by hand - an
+               * awkward drag over a 36-character UUID, and easy to clip a
+               * character. It gets its own row and a copy button now.
+               */}
+              <div className="mt-2 flex items-center gap-2 rounded-md border border-gray-200 bg-gray-50 px-3 py-2">
+                <code className="flex-1 break-all font-mono text-xs text-gray-800">
+                  {viewId}
+                </code>
+                <CopyTextButton
+                  textToBeCopied={viewId || ""}
+                  size="sm"
+                  title="Copy ID to clipboard"
+                />
+              </div>
               <br />
 
               <span>

package/UI/Components/Navbar/NavBar.tsx

@@ -66,11 +66,11 @@ export interface ComponentProps {
     link: URL;
   };
   /*
-   * When true, the document-level Cmd/Ctrl+K shortcut that toggles the
-   * products menu is not registered — for apps where another surface (e.g. a
-   * command palette) owns that shortcut. The menu itself stays fully usable
-   * via its trigger button. Defaults to false: existing consumers keep the
-   * shortcut.
+   * When true, Cmd/Ctrl+K never opens or toggles the products menu — for apps
+   * where another surface (e.g. a command palette) owns that shortcut. The
+   * menu itself stays usable via its trigger button; if it is already open,
+   * the owner's chord dismisses it without consuming the event. Defaults to
+   * false so existing consumers keep the products shortcut.
    */
   disableCommandKShortcut?: boolean | undefined;
   className?: string;
@@ -85,6 +85,22 @@ export interface ComponentProps {
 const MOBILE_MENU_BOTTOM_GAP_IN_PX: number = 16;
 const MOBILE_MENU_MIN_HEIGHT_IN_PX: number = 160;
 
+/*
+ * Keep the products-menu shortcut and the dashboard command palette on the
+ * same definition of Cmd/Ctrl+K. In particular, modified chords such as
+ * Cmd+Shift+K must be left alone for the browser or another feature.
+ */
+const isCommandKShortcut: (event: KeyboardEvent) => boolean = (
+  event: KeyboardEvent,
+): boolean => {
+  return (
+    (event.metaKey || event.ctrlKey) &&
+    !event.shiftKey &&
+    !event.altKey &&
+    event.key.toLowerCase() === "k"
+  );
+};
+
 const Navbar: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
@@ -96,6 +112,9 @@ const Navbar: FunctionComponent<ComponentProps> = (
   const [mobileMenuMaxHeight, setMobileMenuMaxHeight] = useState<
     number | undefined
   >(undefined);
+  const hasMoreMenu: boolean = Boolean(
+    !props.children && props.moreMenuItems && props.moreMenuItems.length > 0,
+  );
 
   // Use the existing outside click hook for mobile menu
   const {
@@ -173,27 +192,56 @@ const Navbar: FunctionComponent<ComponentProps> = (
 
   // Open/close the products menu with Cmd/Ctrl + K from anywhere.
   useEffect(() => {
-    if (props.disableCommandKShortcut) {
-      // Another surface (e.g. a command palette) owns Cmd/Ctrl+K.
+    if (props.disableCommandKShortcut || !hasMoreMenu) {
+      // Another surface owns Cmd/Ctrl+K, or there is no products menu to open.
       return;
     }
 
     const handleGlobalKeyDown: (event: KeyboardEvent) => void = (
       event: KeyboardEvent,
     ): void => {
-      if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
-        event.preventDefault();
-        setIsMoreMenuVisible((visible: boolean) => {
-          return !visible;
-        });
+      if (!isCommandKShortcut(event) || event.defaultPrevented) {
+        return;
       }
+
+      event.preventDefault();
+      setIsMoreMenuVisible((visible: boolean) => {
+        return !visible;
+      });
     };
 
     document.addEventListener("keydown", handleGlobalKeyDown);
     return () => {
       document.removeEventListener("keydown", handleGlobalKeyDown);
     };
-  }, [props.disableCommandKShortcut]);
+  }, [hasMoreMenu, props.disableCommandKShortcut]);
+
+  /*
+   * When the dashboard has surrendered Cmd/Ctrl+K to its command palette, an
+   * already-open products modal must get out of the way before the palette
+   * opens. This close-only listener deliberately does not prevent or stop the
+   * event: the real shortcut owner still needs to receive the same keydown.
+   * It also ignores defaultPrevented so the result is deterministic regardless
+   * of which document listener React registered first.
+   */
+  useEffect(() => {
+    if (!props.disableCommandKShortcut || !hasMoreMenu || !isMoreMenuVisible) {
+      return;
+    }
+
+    const closeProductsOnCommandK: (event: KeyboardEvent) => void = (
+      event: KeyboardEvent,
+    ): void => {
+      if (isCommandKShortcut(event)) {
+        setIsMoreMenuVisible(false);
+      }
+    };
+
+    document.addEventListener("keydown", closeProductsOnCommandK);
+    return () => {
+      document.removeEventListener("keydown", closeProductsOnCommandK);
+    };
+  }, [hasMoreMenu, isMoreMenuVisible, props.disableCommandKShortcut]);
 
   // More menu open/close.
   const openMoreMenu: () => void = (): void => {
@@ -488,6 +536,7 @@ const Navbar: FunctionComponent<ComponentProps> = (
             footer={props.moreMenuFooter}
             searchPlaceholder={props.moreMenuSearchPlaceholder}
             noResultsText={props.moreMenuNoResultsText}
+            showCommandKShortcutHint={!props.disableCommandKShortcut}
             keyboardHint={props.moreMenuKeyboardHint}
             recentLabel={props.moreMenuRecentLabel}
             onClose={closeMoreMenu}

package/UI/Components/Navbar/NavBarMenuModal.tsx

@@ -129,6 +129,11 @@ export interface ComponentProps {
     | undefined;
   searchPlaceholder?: string | undefined;
   noResultsText?: string | undefined;
+  /*
+   * Defaults to visible for direct/legacy consumers. Dashboard hides it when
+   * its command palette owns Cmd/Ctrl+K instead of this products menu.
+   */
+  showCommandKShortcutHint?: boolean | undefined;
   keyboardHint?: string | undefined;
   recentLabel?: string | undefined;
   onClose: () => void;
@@ -502,14 +507,14 @@ const NavBarMenuModal: FunctionComponent<ComponentProps> = (
                 >
                   <Icon icon={IconProp.Close} className="h-4 w-4" />
                 </button>
-              ) : (
+              ) : props.showCommandKShortcutHint !== false ? (
                 /* OS-appropriate hint: ⌘ K on a Mac, Ctrl K elsewhere. */
                 <KeyboardShortcut
                   keys={[KeyboardKey.Mod, "K"]}
                   size={KeyboardShortcutSize.Small}
                   className="hidden sm:inline-flex"
                 />
-              )}
+              ) : null}
             </div>
 
             {/* Body */}

package/UI/Components/SideMenu/CountModelSideMenuItem.tsx

@@ -21,6 +21,7 @@ export const REFRESH_SIDEBAR_COUNT_EVENT: string = "REFRESH_SIDEBAR_COUNTS";
 
 export interface ComponentProps<TBaseModel extends BaseModel> {
   link: Link;
+  activeRoute?: Link["to"] | undefined;
   modelType?: { new (): TBaseModel } | undefined;
   badgeType?: BadgeType | undefined;
   countQuery?: Query<TBaseModel> | undefined;
@@ -136,6 +137,7 @@ const CountModelSideMenuItem: <TBaseModel extends BaseModel>(
   return (
     <SideMenuItem
       link={props.link}
+      activeRoute={props.activeRoute}
       badge={!isLoading && !error ? count : undefined}
       badgeType={props.badgeType}
       icon={props.icon}

package/UI/Components/SideMenu/SideMenu.tsx

@@ -20,6 +20,8 @@ import { RequestOptions } from "../../Utils/ModelAPI/ModelAPI";
 
 export interface SideMenuItemProps {
   link: Link;
+  // Use a different route for selection when the link target also changes query state.
+  activeRoute?: Link["to"] | undefined;
   showAlert?: boolean;
   showWarning?: boolean;
   badge?: number;
@@ -106,7 +108,7 @@ const SideMenu: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
     if (props.sections) {
       for (const section of props.sections) {
         for (const item of section.items) {
-          if (Navigation.isOnThisPage(item.link.to)) {
+          if (Navigation.isOnThisPage(item.activeRoute || item.link.to)) {
             const result: {
               sectionTitle: string;
               itemTitle: string;
@@ -127,7 +129,7 @@ const SideMenu: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
     // Check direct items
     if (props.items) {
       for (const item of props.items) {
-        if (Navigation.isOnThisPage(item.link.to)) {
+        if (Navigation.isOnThisPage(item.activeRoute || item.link.to)) {
           const result: {
             itemTitle: string;
             icon?: IconProp;
@@ -184,9 +186,13 @@ const SideMenu: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
             icon?: IconProp;
             defaultCollapsed?: boolean;
             collapsible?: boolean;
+            isActive: boolean;
           } = {
             key: `section-${sectionIndex}`,
             title: section.title,
+            isActive: section.items.some((item: SideMenuItemProps): boolean => {
+              return Navigation.isOnThisPage(item.activeRoute || item.link.to);
+            }),
           };
 
           if (section.icon) {
@@ -209,6 +215,7 @@ const SideMenu: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
                       <CountModelSideMenuItem
                         key={`section-${sectionIndex}-count-item-${itemIndex}`}
                         link={item.link}
+                        activeRoute={item.activeRoute}
                         badgeType={item.badgeType}
                         modelType={item.modelType as any}
                         countQuery={item.countQuery as any}
@@ -225,6 +232,7 @@ const SideMenu: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
                     <SideMenuItem
                       key={`section-${sectionIndex}-item-${itemIndex}`}
                       link={item.link}
+                      activeRoute={item.activeRoute}
                       showAlert={item.showAlert}
                       showWarning={item.showWarning}
                       badge={item.badge}
@@ -252,6 +260,7 @@ const SideMenu: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
             <CountModelSideMenuItem
               key={`count-item-${itemIndex}`}
               link={item.link}
+              activeRoute={item.activeRoute}
               badgeType={item.badgeType}
               modelType={item.modelType as any}
               countQuery={item.countQuery as any}
@@ -267,6 +276,7 @@ const SideMenu: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
             <SideMenuItem
               key={`item-${itemIndex}`}
               link={item.link}
+              activeRoute={item.activeRoute}
               showAlert={item.showAlert}
               showWarning={item.showWarning}
               badge={item.badge}

package/UI/Components/SideMenu/SideMenuItem.tsx

@@ -9,6 +9,7 @@ import React, { FunctionComponent } from "react";
 
 export interface ComponentProps {
   link: Link;
+  activeRoute?: Link["to"] | undefined;
   showAlert?: undefined | boolean;
   showWarning?: undefined | boolean;
   badge?: undefined | number;
@@ -23,7 +24,9 @@ const SideMenuItem: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ) => {
   const { translateString } = useTranslateValue();
-  const isActive: boolean = Navigation.isOnThisPage(props.link.to);
+  const isActive: boolean = Navigation.isOnThisPage(
+    props.activeRoute || props.link.to,
+  );
   const isSubItemActive: boolean = props.subItemLink
     ? Navigation.isOnThisPage(props.subItemLink.to)
     : false;

package/UI/Components/SideMenu/SideMenuSection.tsx

@@ -1,7 +1,12 @@
 import Icon from "../Icon/Icon";
 import useTranslateValue from "../../Utils/Translation";
 import IconProp from "../../../Types/Icon/IconProp";
-import React, { FunctionComponent, ReactElement, useState } from "react";
+import React, {
+  FunctionComponent,
+  ReactElement,
+  useEffect,
+  useState,
+} from "react";
 
 export interface ComponentProps {
   title: string;
@@ -9,6 +14,7 @@ export interface ComponentProps {
   defaultCollapsed?: boolean;
   collapsible?: boolean;
   icon?: IconProp;
+  isActive?: boolean;
 }
 
 const SideMenuSection: FunctionComponent<ComponentProps> = (
@@ -16,12 +22,18 @@ const SideMenuSection: FunctionComponent<ComponentProps> = (
 ) => {
   const { translateString } = useTranslateValue();
   const [isCollapsed, setIsCollapsed] = useState<boolean>(
-    props.defaultCollapsed || false,
+    Boolean(props.defaultCollapsed && !props.isActive),
   );
   const translatedTitle: string = translateString(props.title) || props.title;
 
   const isCollapsible: boolean = props.collapsible ?? true;
 
+  useEffect(() => {
+    if (props.isActive) {
+      setIsCollapsed(false);
+    }
+  }, [props.isActive]);
+
   const handleToggle: () => void = (): void => {
     if (isCollapsible) {
       setIsCollapsed(!isCollapsed);