@oneuptime/common 14.0.13 → 14.0.14

package/UI/Components/Navbar/NavBarMenuModal.tsx

@@ -130,13 +130,14 @@ const writeRecentRoute: (routeString: string) => void = (
 export interface ComponentProps {
   items: MoreMenuItem[];
   /*
-   * The categories the menu opens on. Every other category starts folded to
-   * one line until the user opens it (click, or Enter on its row); search
-   * ignores folding, and the category holding the current page opens by
-   * itself. Leave it unset to show every category open. See
-   * NavBarMenuCatalog.ts for the rules.
+   * The categories that are always open: the menu opens on them and they
+   * never fold, so they sit under a plain heading, like Recent. Every other
+   * category starts folded to one line until the user opens it (click, or
+   * Enter on its row); search ignores folding, and the category holding the
+   * current page opens by itself. Leave it unset to show every category
+   * open, with nothing to fold. See NavBarMenuCatalog.ts for the rules.
    */
-  categoriesOpenByDefault?: Array<string> | undefined;
+  categoriesAlwaysOpen?: Array<string> | undefined;
   footer?:
     | {
         title: string;
@@ -239,7 +240,7 @@ const NavBarMenuModal: FunctionComponent<ComponentProps> = (
 
   const folds: CategoryFolds = useCategoryFolds(
     props.items,
-    props.categoriesOpenByDefault,
+    props.categoriesAlwaysOpen,
   );
 
   /*
@@ -304,8 +305,10 @@ const NavBarMenuModal: FunctionComponent<ComponentProps> = (
    * order, so arrow keys, the cursor and the cell refs stay in step: the
    * heading row of a category that folds, then the products shown under it.
    *
-   * A category folds only while idle. Search ignores folding: every match is
-   * shown under a plain heading, and the cursor moves over products alone.
+   * A category folds only while idle, and never one the menu keeps open
+   * (the Dashboard's Essentials): that one has a plain heading, which the
+   * cursor does not stop on. Search ignores folding: every match is shown
+   * under a plain heading, and the cursor moves over products alone.
    */
   const rawGroups: Array<RawGroup> = [];
   if (!isSearching && recentItems.length > 0) {
@@ -323,7 +326,7 @@ const NavBarMenuModal: FunctionComponent<ComponentProps> = (
   const groups: Array<MenuGroup> = rawGroups.map(
     (group: RawGroup): MenuGroup => {
       const canFold: boolean =
-        folds.isEnabled && !isSearching && !group.isRecent;
+        !isSearching && !group.isRecent && folds.canFold(group.title);
       const isOpen: boolean = !canFold || folds.isOpen(group.title);
       let toggle: CategoryEntry | undefined = undefined;
 
@@ -757,9 +760,10 @@ const NavBarMenuModal: FunctionComponent<ComponentProps> = (
                         />
                       ) : (
                         /*
-                         * In a menu that folds, a plain heading (Recent, or a
-                         * category while searching) lines its text up with
-                         * the heading rows around it.
+                         * In a menu that folds, a plain heading (Recent, a
+                         * category the menu keeps open, or any category
+                         * while searching) lines its text up with the
+                         * heading rows around it.
                          */
                         <div
                           className={`mb-2.5 flex items-center gap-1.5 ${

package/UI/Components/Navbar/NavBarMobileMenu.tsx

@@ -14,8 +14,8 @@ export interface ComponentProps {
   items: Array<NavItem>;
   // The products, from the same catalog as the desktop products menu.
   moreMenuItems: Array<MoreMenuItem>;
-  // See NavBar's moreMenuCategoriesOpenByDefault.
-  categoriesOpenByDefault?: Array<string> | undefined;
+  // See NavBar's moreMenuCategoriesAlwaysOpen.
+  categoriesAlwaysOpen?: Array<string> | undefined;
   // The right-hand entry (User Settings), listed last.
   rightElement?: NavItem | undefined;
   // Following a link closes the menu.
@@ -30,12 +30,13 @@ const slug: (title: string) => string = (title: string): string => {
  * The rows of the phone menu: Home, the products, then User Settings.
  *
  * On a phone there is no products dialog: the menu toggle lists everything.
- * A menu that names the categories it opens on (the Dashboard) groups the
- * products the way the desktop products menu does, with the same folding: the
- * categories it opens on are listed, every other one is a single row that
- * opens on a tap, and the category holding the current page opens by itself.
- * The choices are the same ones the desktop menu remembers. Without that
- * list, the products are listed one after another, as before.
+ * A menu that names the categories it always shows open (the Dashboard's
+ * Essentials) groups the products the way the desktop products menu does,
+ * with the same folding: those categories are listed under a plain heading
+ * that never folds, every other one is a single row that opens on a tap, and
+ * the category holding the current page opens by itself. The choices are the
+ * same ones the desktop menu remembers. Without that list, the products are
+ * listed one after another, as before.
  *
  * It mounts when the menu opens, so each opening starts from the remembered
  * choices and the page the user is on now.
@@ -45,7 +46,7 @@ const NavBarMobileMenu: FunctionComponent<ComponentProps> = (
 ): ReactElement => {
   const folds: CategoryFolds = useCategoryFolds(
     props.moreMenuItems,
-    props.categoriesOpenByDefault,
+    props.categoriesAlwaysOpen,
   );
   const idPrefix: string = `navbar-mobile-${useId()}`;
 
@@ -103,20 +104,36 @@ const NavBarMobileMenu: FunctionComponent<ComponentProps> = (
                 aria-labelledby={headingId}
                 className="block w-full pt-1"
               >
-                <NavBarCategoryToggle
-                  title={category.title}
-                  itemTitles={category.items.map(
-                    (item: MoreMenuItem): string => {
-                      return item.title;
-                    },
-                  )}
-                  isOpen={isOpen}
-                  onToggle={() => {
-                    folds.toggle(category.title);
-                  }}
-                  controlsId={bodyId}
-                  headingId={headingId}
-                />
+                {folds.canFold(category.title) ? (
+                  <NavBarCategoryToggle
+                    title={category.title}
+                    itemTitles={category.items.map(
+                      (item: MoreMenuItem): string => {
+                        return item.title;
+                      },
+                    )}
+                    isOpen={isOpen}
+                    onToggle={() => {
+                      folds.toggle(category.title);
+                    }}
+                    controlsId={bodyId}
+                    headingId={headingId}
+                  />
+                ) : (
+                  /*
+                   * A category that is always open (Essentials) has nothing
+                   * to fold: a plain heading, the same size as the lines
+                   * that fold, so the names line up.
+                   */
+                  <div className="flex min-w-0 items-center border border-transparent px-2 py-2">
+                    <h3
+                      id={headingId}
+                      className="text-[11px] font-semibold uppercase leading-4 tracking-[0.1em] text-gray-500"
+                    >
+                      {category.title}
+                    </h3>
+                  </div>
+                )}
                 {isOpen && (
                   <div id={bodyId} className="mt-1 space-y-1">
                     {category.items.map(productRow)}

package/UI/Components/Page/ModelHeaderEvents.ts

@@ -0,0 +1,75 @@
+import BaseModel from "../../../Models/DatabaseModels/DatabaseBaseModel/DatabaseBaseModel";
+import ObjectID from "../../../Types/ObjectID";
+import GlobalEvents from "../../Utils/GlobalEvents";
+
+/*
+ * A record's page header - "Host - web-01", with the record's labels beside
+ * it - is read once by the layout's ModelPage, which stays mounted while the
+ * tabs below it change. A tab that renames the record or changes its labels
+ * (the details card on a resource's Settings page) announces it here, and
+ * ModelPage reads its header again, so the header never keeps the old name
+ * until a reload.
+ *
+ * Keyed on the table name and the id, so saving one record never reloads
+ * another's header.
+ */
+export const MODEL_HEADER_CHANGED_EVENT: string = "MODEL_HEADER_CHANGED";
+
+export interface ModelHeaderChanged {
+  tableName: string;
+  modelId: string;
+}
+
+type ModelType = { new (): BaseModel };
+
+const getTableName: (modelType: ModelType) => string = (
+  modelType: ModelType,
+): string => {
+  return new modelType().tableName || "";
+};
+
+export const announceModelHeaderChanged: (data: {
+  modelType: ModelType;
+  modelId: ObjectID;
+}) => void = (data: { modelType: ModelType; modelId: ObjectID }): void => {
+  const changed: ModelHeaderChanged = {
+    tableName: getTableName(data.modelType),
+    modelId: data.modelId.toString(),
+  };
+
+  GlobalEvents.dispatchEvent(MODEL_HEADER_CHANGED_EVENT, { ...changed });
+};
+
+/*
+ * Calls onChanged whenever the header of this one record is announced as
+ * changed. Returns the unsubscribe.
+ */
+export const subscribeToModelHeaderChanged: (data: {
+  modelType: ModelType;
+  modelId: ObjectID;
+  onChanged: () => void;
+}) => () => void = (data: {
+  modelType: ModelType;
+  modelId: ObjectID;
+  onChanged: () => void;
+}): (() => void) => {
+  const tableName: string = getTableName(data.modelType);
+  const modelId: string = data.modelId.toString();
+
+  const listener: (event: CustomEvent) => void = (event: CustomEvent): void => {
+    const changed: Partial<ModelHeaderChanged> =
+      (event.detail as Partial<ModelHeaderChanged>) || {};
+
+    if (changed.tableName !== tableName || changed.modelId !== modelId) {
+      return;
+    }
+
+    data.onChanged();
+  };
+
+  GlobalEvents.addEventListener(MODEL_HEADER_CHANGED_EVENT, listener);
+
+  return (): void => {
+    GlobalEvents.removeEventListener(MODEL_HEADER_CHANGED_EVENT, listener);
+  };
+};

package/UI/Components/Page/ModelPage.tsx

@@ -1,6 +1,7 @@
 import API from "../../Utils/API/API";
 import ModelAPI from "../../Utils/ModelAPI/ModelAPI";
 import Page from "./Page";
+import { subscribeToModelHeaderChanged } from "./ModelHeaderEvents";
 import { translatableTerm, Translator } from "../../Utils/TranslateTemplate";
 import useTranslator from "../../Utils/UseTranslator";
 import BaseModel from "../../../Models/DatabaseModels/DatabaseBaseModel/DatabaseBaseModel";
@@ -64,6 +65,25 @@ const ModelPage: <TBaseModel extends BaseModel>(
     null,
   );
 
+  /*
+   * Bumped when a tab below saves this record's name or labels
+   * (ModelHeaderEvents) - a refresh like a refreshToken bump, for the
+   * layouts that do not pass one.
+   */
+  const [headerChangeCount, setHeaderChangeCount] = useState<number>(0);
+
+  useEffect(() => {
+    return subscribeToModelHeaderChanged({
+      modelType: props.modelType,
+      modelId: props.modelId,
+      onChanged: (): void => {
+        setHeaderChangeCount((count: number): number => {
+          return count + 1;
+        });
+      },
+    });
+  }, [modelIdString]);
+
   /*
    * Mirrors loadedHeader, so a read that finishes can see what is on screen
    * now rather than what was on screen when the read started.
@@ -224,7 +244,7 @@ const ModelPage: <TBaseModel extends BaseModel>(
     return () => {
       latestRequestRef.current++;
     };
-  }, [modelIdString, props.refreshToken]);
+  }, [modelIdString, props.refreshToken, headerChangeCount]);
 
   /*
    * Decided at render time, not in an effect: the very first render for a

package/UI/Components/Page/Page.tsx

@@ -6,7 +6,49 @@ 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";
+import React, {
+  FunctionComponent,
+  ReactElement,
+  useContext,
+  useEffect,
+  useState,
+} from "react";
+
+/*
+ * A page drawn inside a Page can put its own trail where the Page's
+ * breadcrumbs are. A layout's Page knows only the address: Project >
+ * Incidents > Declare New Incident. The create page inside it knows it was
+ * opened from a monitor's Incidents tab, once it has looked the monitor up,
+ * and its trail goes back through that tab (Dashboard
+ * Components/CreateFromRecord). usePageBreadcrumbLinks hands that trail up
+ * to the nearest Page, and takes it back when the page inside goes; null
+ * leaves the Page's own breadcrumbs.
+ */
+export type SetPageBreadcrumbLinks = (links: Array<Link> | null) => void;
+
+export const PageBreadcrumbsContext: React.Context<SetPageBreadcrumbLinks | null> =
+  React.createContext<SetPageBreadcrumbLinks | null>(null);
+
+export const usePageBreadcrumbLinks: (links: Array<Link> | null) => void = (
+  links: Array<Link> | null,
+): void => {
+  const setLinks: SetPageBreadcrumbLinks | null = useContext(
+    PageBreadcrumbsContext,
+  );
+
+  useEffect(() => {
+    // Outside a Page there is nowhere to draw it.
+    if (!setLinks) {
+      return;
+    }
+
+    setLinks(links);
+
+    return () => {
+      setLinks(null);
+    };
+  }, [setLinks, links]);
+};
 
 export interface ComponentProps {
   title?: string | undefined;
@@ -35,11 +77,18 @@ const Page: FunctionComponent<ComponentProps> = (
     props.description,
   );
 
+  // A trail the page inside handed up (usePageBreadcrumbLinks), while it has one.
+  const [innerBreadcrumbLinks, setInnerBreadcrumbLinks] =
+    useState<Array<Link> | null>(null);
+
+  const breadcrumbLinks: Array<Link> | undefined =
+    innerBreadcrumbLinks || props.breadcrumbLinks;
+
   useEffect(() => {
-    if (props.breadcrumbLinks && props.breadcrumbLinks.length > 0) {
+    if (breadcrumbLinks && breadcrumbLinks.length > 0) {
       Analytics.capture(
         "Page View: " +
-          props.breadcrumbLinks
+          breadcrumbLinks
             .map((link: Link) => {
               return link.title;
             })
@@ -47,7 +96,7 @@ const Page: FunctionComponent<ComponentProps> = (
             .toString() || "",
       );
     }
-  }, [props.breadcrumbLinks]);
+  }, [breadcrumbLinks]);
 
   /*
    * Give each page a unique, descriptive document title (WCAG 2.4.2 Page
@@ -58,8 +107,8 @@ const Page: FunctionComponent<ComponentProps> = (
    */
   useEffect(() => {
     const breadcrumbTitle: string | undefined =
-      props.breadcrumbLinks && props.breadcrumbLinks.length > 0
-        ? props.breadcrumbLinks
+      breadcrumbLinks && breadcrumbLinks.length > 0
+        ? breadcrumbLinks
             .map((link: Link) => {
               return translateString(link.title);
             })
@@ -74,24 +123,30 @@ const Page: FunctionComponent<ComponentProps> = (
     if (pageTitle) {
       document.title = `OneUptime | ${pageTitle}`;
     }
-  }, [translatedTitle, props.breadcrumbLinks]);
+  }, [translatedTitle, breadcrumbLinks]);
 
   if (props.error) {
     return <ErrorMessage message={props.error} />;
   }
 
+  // What the page holds, able to hand its own trail up to this Page.
+  const children: ReactElement = (
+    <PageBreadcrumbsContext.Provider value={setInnerBreadcrumbLinks}>
+      {props.children}
+    </PageBreadcrumbsContext.Provider>
+  );
+
   return (
     <div
       className={
         props.className || "mb-auto max-w-full px-4 sm:px-6 lg:px-8 mt-5 h-max"
       }
     >
-      {((props.breadcrumbLinks && props.breadcrumbLinks.length > 0) ||
-        props.title) && (
+      {((breadcrumbLinks && breadcrumbLinks.length > 0) || props.title) && (
         <div className="mb-5">
-          {props.breadcrumbLinks && props.breadcrumbLinks.length > 0 && (
+          {breadcrumbLinks && breadcrumbLinks.length > 0 && (
             <div className="mt-2">
-              <Breadcrumbs links={props.breadcrumbLinks} />
+              <Breadcrumbs links={breadcrumbLinks} />
             </div>
           )}
           {props.title && (
@@ -150,7 +205,7 @@ const Page: FunctionComponent<ComponentProps> = (
             {props.sideMenu}
 
             {!props.isLoading && (
-              <div className="space-y-6 flex-1 min-w-0">{props.children}</div>
+              <div className="space-y-6 flex-1 min-w-0">{children}</div>
             )}
             {props.isLoading && (
               <div className="flex-1 min-w-0">
@@ -161,7 +216,7 @@ const Page: FunctionComponent<ComponentProps> = (
         </div>
       )}
 
-      {!props.sideMenu && !props.isLoading && props.children}
+      {!props.sideMenu && !props.isLoading && children}
       {!props.sideMenu && props.isLoading && <PageLoader isVisible={true} />}
     </div>
   );