@oneuptime/common 12.0.12 → 12.0.14

package/UI/Components/Toast/Toast.tsx

@@ -1,4 +1,10 @@
-import React, { FunctionComponent, ReactElement, useState } from "react";
+import React, {
+  FunctionComponent,
+  ReactElement,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
 import Icon from "../Icon/Icon";
 import IconProp from "../../../Types/Icon/IconProp";
 import useTranslateValue from "../../Utils/Translation";
@@ -17,14 +23,78 @@ export interface ComponentProps {
   onClose?: undefined | (() => void);
   type?: undefined | ToastType;
   icon?: IconProp | undefined;
-  index?: undefined | number;
 }
 
+/* How long the exit fade runs before the toast actually unmounts. */
+const EXIT_DURATION_IN_MS: number = 150;
+
 const Component: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
   const { translateString } = useTranslateValue();
   const [show, setShow] = useState<boolean>(true);
+
+  /*
+   * The toast is mounted in its closed state (faded, nudged down) and flipped
+   * open one frame later so the browser has something to transition from —
+   * the same pattern Modal uses for its entrance.
+   */
+  const [hasEntered, setHasEntered] = useState<boolean>(false);
+
+  /*
+   * Dismissal fades the card out first and only unmounts (and notifies the
+   * owner) once the fade has finished, so the toast never blinks away.
+   */
+  const [isLeaving, setIsLeaving] = useState<boolean>(false);
+
+  useEffect(() => {
+    const open: () => void = (): void => {
+      setHasEntered(true);
+    };
+
+    const frame: number = requestAnimationFrame(open);
+
+    /*
+     * A hidden or throttled tab never runs an animation frame; the timer
+     * skips the transition rather than leaving the toast at zero opacity.
+     */
+    const fallbackTimer: ReturnType<typeof setTimeout> = setTimeout(open, 80);
+
+    return () => {
+      cancelAnimationFrame(frame);
+      clearTimeout(fallbackTimer);
+    };
+  }, []);
+
+  /*
+   * The latest onClose lives in a ref so the exit effect can depend on
+   * isLeaving alone. Owners may recreate onClose every render, and a dep on
+   * it would restart the unmount timer whenever a sibling toast re-renders
+   * the stack mid-exit — leaving an invisible pointer-events-auto card
+   * intercepting clicks past its original deadline.
+   */
+  const onCloseRef: React.MutableRefObject<(() => void) | undefined> = useRef<
+    (() => void) | undefined
+  >(props.onClose);
+  onCloseRef.current = props.onClose;
+
+  useEffect(() => {
+    if (!isLeaving) {
+      return undefined;
+    }
+
+    const exitTimer: ReturnType<typeof setTimeout> = setTimeout(() => {
+      setShow(false);
+      if (onCloseRef.current) {
+        onCloseRef.current();
+      }
+    }, EXIT_DURATION_IN_MS);
+
+    return () => {
+      clearTimeout(exitTimer);
+    };
+  }, [isLeaving]);
+
   let typeCssClass: string = "text-gray-400";
   let iconType: IconProp = IconProp.Info;
 
@@ -53,65 +123,60 @@ const Component: FunctionComponent<ComponentProps> = (
     iconType = props.icon;
   }
 
-  let top: number = 0;
+  /*
+   * Settled state carries no transform class at all — leaving a translate on
+   * the card would make it the containing block for position:fixed
+   * descendants (the Modal invariant).
+   */
+  let motionClassName: string = "translate-y-2 opacity-0";
 
-  if (props.index) {
-    top = props.index * 16; // move the second item lower than the first one. 16 is the height of the toast.
+  if (isLeaving) {
+    motionClassName = "opacity-0";
+  } else if (hasEntered) {
+    motionClassName = "opacity-100";
   }
 
   if (show) {
     return (
       <div
         data-testid="toast"
-        aria-live="assertive"
-        className={`pointer-events-none fixed z-40 top-${top} left-0 right-0  flex items-end px-4 py-6 sm:items-start sm:p-6`}
+        className={`pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5 transition duration-150 ease-out motion-reduce:transition-none ${motionClassName}`}
       >
-        <div className="flex w-full flex-col items-center space-y-4 sm:items-end">
-          <div className="pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5">
-            <div className="p-4">
-              <div className="flex items-start">
-                <div className="flex-shrink-0">
-                  <Icon
-                    className={`h-6 w-6 ${typeCssClass}`}
-                    data-testid="toast-icon"
-                    icon={iconType}
-                  />
-                </div>
-                <div className="ml-3 w-0 flex-1 pt-0.5">
-                  <p
-                    data-testid="title"
-                    className="text-sm font-medium text-gray-900"
-                  >
-                    {translateString(props.title)}
-                  </p>
-                  <p
-                    data-testid="description"
-                    className="mt-1 text-sm text-gray-500"
-                  >
-                    {translateString(props.description)}
-                  </p>
-                  {/* <div className="mt-3 flex space-x-7">
-                    <button type="button" className="rounded-md bg-white text-sm font-medium text-indigo-600 hover:text-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">Undo</button>
-                    <button type="button" className="rounded-md bg-white text-sm font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">Dismiss</button>
-                  </div> */}
-                </div>
-                <div className="ml-4 flex flex-shrink-0">
-                  <button
-                    onClick={() => {
-                      setShow(false);
-                      if (props.onClose) {
-                        props.onClose();
-                      }
-                    }}
-                    data-testid="close-button"
-                    type="button"
-                    className="inline-flex rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
-                  >
-                    <span className="sr-only">Close</span>
-                    <Icon className={`h-5 w-5`} icon={IconProp.Close} />
-                  </button>
-                </div>
-              </div>
+        <div className="p-4">
+          <div className="flex items-start">
+            <div className="flex-shrink-0">
+              <Icon
+                className={`h-6 w-6 ${typeCssClass}`}
+                data-testid="toast-icon"
+                icon={iconType}
+              />
+            </div>
+            <div className="ml-3 w-0 flex-1 pt-0.5">
+              <p
+                data-testid="title"
+                className="text-sm font-medium text-gray-900"
+              >
+                {translateString(props.title)}
+              </p>
+              <p
+                data-testid="description"
+                className="mt-1 text-sm text-gray-500"
+              >
+                {translateString(props.description)}
+              </p>
+            </div>
+            <div className="ml-4 flex flex-shrink-0">
+              <button
+                onClick={() => {
+                  setIsLeaving(true);
+                }}
+                data-testid="close-button"
+                type="button"
+                className="inline-flex rounded-md bg-white text-gray-400 transition-colors duration-150 ease-out hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+              >
+                <span className="sr-only">Close</span>
+                <Icon className={`h-5 w-5`} icon={IconProp.Close} />
+              </button>
             </div>
           </div>
         </div>

package/UI/Components/Toast/ToastInit.tsx

@@ -1,4 +1,9 @@
-import React, { FunctionComponent, ReactElement, useEffect } from "react";
+import React, {
+  FunctionComponent,
+  ReactElement,
+  useEffect,
+  useRef,
+} from "react";
 import Toast, { ComponentProps as ToastComponentProps } from "./Toast";
 import GlobalEvents from "../../Utils/GlobalEvents";
 
@@ -10,21 +15,60 @@ export const ShowToastNotification: ShowToastNotificationFunction = (
   GlobalEvents.dispatchEvent("toast", toast as any);
 };
 
+/*
+ * Each queued toast gets a stable id so removals key correctly — keying by
+ * array index would re-key (and so re-mount and re-animate) every toast below
+ * the one that was dismissed.
+ */
+interface ToastEntry {
+  id: number;
+  toast: ToastComponentProps;
+  /*
+   * Built once at dispatch and stable for the toast's lifetime: recreating
+   * onClose per render would hand every Toast a fresh prop on each stack
+   * re-render, which used to restart the exit-unmount timer of any toast
+   * mid-fade.
+   */
+  onClose: () => void;
+}
+
 const ToastLayout: FunctionComponent = (): ReactElement => {
-  const [currentToasts, setCurrentToasts] = React.useState<
-    ToastComponentProps[]
-  >([]);
+  const [currentToasts, setCurrentToasts] = React.useState<Array<ToastEntry>>(
+    [],
+  );
+  const nextToastIdRef: React.MutableRefObject<number> = useRef<number>(0);
 
-  type AddToastNotificationFunction = (event: CustomEvent) => void;
+  useEffect(() => {
+    const addToastNotification: (event: CustomEvent) => void = (
+      event: CustomEvent,
+    ): void => {
+      const toast: ToastComponentProps = event.detail;
+      const id: number = nextToastIdRef.current;
+      nextToastIdRef.current += 1;
 
-  const addToastNotification: AddToastNotificationFunction = (
-    event: CustomEvent,
-  ): void => {
-    const toast: ToastComponentProps = event.detail;
-    setCurrentToasts([...currentToasts, toast]);
-  };
+      // setCurrentToasts is stable, so this closure never goes stale.
+      const onClose: () => void = (): void => {
+        if (toast.onClose) {
+          toast.onClose();
+        }
+
+        setCurrentToasts((toasts: Array<ToastEntry>) => {
+          return toasts.filter((candidate: ToastEntry) => {
+            return candidate.id !== id;
+          });
+        });
+      };
+
+      /*
+       * Functional update: this listener is registered once, so reading
+       * currentToasts from its closure would always see the mount-time empty
+       * array and every new toast would clobber the ones before it.
+       */
+      setCurrentToasts((toasts: Array<ToastEntry>) => {
+        return [...toasts, { id, toast, onClose }];
+      });
+    };
 
-  useEffect(() => {
     GlobalEvents.addEventListener("toast", addToastNotification);
 
     return () => {
@@ -32,27 +76,33 @@ const ToastLayout: FunctionComponent = (): ReactElement => {
     };
   }, []);
 
+  /*
+   * ONE fixed container for every toast. Each toast used to render its own
+   * fixed strip at top-0 (the index prop that offset them was never passed),
+   * so stacked toasts painted on top of each other. A single region stacking
+   * cards with flex-col gap makes the order self-evident and keeps the
+   * z-index ladder in exactly one place (Toast z-40, under Modal z-50).
+   */
   return (
-    <div>
-      {currentToasts.map((toast: ToastComponentProps, index: number) => {
-        return (
-          <Toast
-            key={index}
-            title={toast.title}
-            description={toast.description}
-            type={toast.type}
-            onClose={() => {
-              if (toast.onClose) {
-                toast.onClose();
-              }
-
-              const newToasts: Array<ToastComponentProps> = [...currentToasts];
-              newToasts.splice(index, 1);
-              setCurrentToasts(newToasts);
-            }}
-          />
-        );
-      })}
+    <div
+      data-testid="toast-region"
+      aria-live="assertive"
+      className="pointer-events-none fixed z-40 top-0 left-0 right-0 flex items-end px-4 py-6 sm:items-start sm:p-6"
+    >
+      <div className="flex w-full flex-col items-center gap-4 sm:items-end">
+        {currentToasts.map((entry: ToastEntry) => {
+          return (
+            <Toast
+              key={entry.id}
+              title={entry.toast.title}
+              description={entry.toast.description}
+              type={entry.toast.type}
+              icon={entry.toast.icon}
+              onClose={entry.onClose}
+            />
+          );
+        })}
+      </div>
     </div>
   );
 };

package/UI/Styles/Theme.css

@@ -127,6 +127,7 @@ html.dark [class~="!bg-white"] {
 
 html.dark :is(
     [class~="bg-white/60"],
+    [class~="bg-white/70"],
     [class~="bg-white/80"],
     [class~="bg-white/90"],
     [class~="bg-white/95"]
@@ -204,6 +205,14 @@ html.dark [class~="bg-gray-900/5"] {
   background-color: rgb(148 163 184 / 12%);
 }
 
+/*
+ * Overlay scrims built from a mid-gray: literal gray-500 at 25% paints a LIGHT
+ * veil over a dark page, so the command palette backdrop deepens instead.
+ */
+html.dark [class~="bg-gray-500/25"] {
+  background-color: rgb(2 6 23 / 55%);
+}
+
 /* State variants that otherwise flash back to literal light Tailwind colors. */
 html.dark :is(
     [class~="hover:bg-gray-50"],
@@ -1340,3 +1349,34 @@ html.dark :fullscreen,
 html.dark ::backdrop {
   background-color: var(--ou-background-primary);
 }
+
+/*
+ * Motion. Tailwind here is the Play-CDN runtime configured inline per app, so
+ * a new animate-* utility name would silently generate nothing unless its
+ * keyframes were duplicated into every EJS config. Plain CSS in this one
+ * shared stylesheet sidesteps that entirely.
+ *
+ * ou-animate-pop-in exists for surfaces that MOUNT already open (react-select
+ * portals its menu fully formed), where a transition has no closed state to
+ * start from. It is an animation, so it ends by reverting to the element's
+ * own style — no transform lingers to become a containing block for
+ * position:fixed descendants. Surfaces that control their own mount use the
+ * Modal hasEntered transition pattern instead.
+ */
+@keyframes ou-pop-in {
+  from {
+    opacity: 0;
+    transform: scale(0.98);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .ou-animate-pop-in {
+    animation: ou-pop-in 120ms ease-out;
+  }
+}

package/UI/Utils/ModelAPI/ModelAPI.ts

@@ -347,19 +347,29 @@ export default class ModelAPI {
       !requestOptions.isMultiTenantRequest ||
       Object.keys(requestOptions).length === 0
     ) {
-      const project: Project | null = ProjectUtil.getCurrentProject();
-
-      if (project && project.id) {
-        headers["tenantid"] = project.id.toString();
+      /*
+       * Read the tenant id via getCurrentProjectId() first - a plain string
+       * read off the URL/SessionStorage/LocalStorage id keys. This is what
+       * makes requests work in the SSO-login window where the project ID is
+       * already available in URL/SessionStorage but the full project data
+       * hasn't been fetched yet, and it avoids hydrating the entire Project
+       * model from LocalStorage on every single request just for the id.
+       */
+      const projectId: ObjectID | null = ProjectUtil.getCurrentProjectId();
+
+      if (projectId) {
+        headers["tenantid"] = projectId.toString();
       } else {
         /*
-         * Fallback to getCurrentProjectId() when full project data is not yet loaded
-         * This can happen after SSO login when the project ID is available in URL/SessionStorage
-         * but the full project data hasn't been fetched yet
+         * Fallback to the stored project. getCurrentProject() resolves its id
+         * through getCurrentProjectId() too, so this only matters if that
+         * resolution ever diverges - kept to preserve the historical fallback
+         * chain.
          */
-        const projectId: ObjectID | null = ProjectUtil.getCurrentProjectId();
-        if (projectId) {
-          headers["tenantid"] = projectId.toString();
+        const project: Project | null = ProjectUtil.getCurrentProject();
+
+        if (project && project.id) {
+          headers["tenantid"] = project.id.toString();
         }
       }
     }

package/UI/Utils/ModelListCache.ts

@@ -0,0 +1,188 @@
+import ListResult from "../../Types/BaseDatabase/ListResult";
+import Query from "../../Types/BaseDatabase/Query";
+import Select from "../../Types/BaseDatabase/Select";
+import Sort from "../../Types/BaseDatabase/Sort";
+import Dictionary from "../../Types/Dictionary";
+import { JSONObject } from "../../Types/JSON";
+import JSONFunctions from "../../Types/JSONFunctions";
+import ObjectID from "../../Types/ObjectID";
+import BaseModel from "../../Models/DatabaseModels/DatabaseBaseModel/DatabaseBaseModel";
+import ModelAPI, { RequestOptions } from "./ModelAPI/ModelAPI";
+
+/*
+ * A tiny read-through cache for reference-data lists (incident states, alert
+ * states, custom-field definitions, ...): tables that hold a handful of rows
+ * per project and change approximately never, yet are fetched independently by
+ * every component that needs them - the Home view alone used to request the
+ * IncidentState list three times.
+ *
+ * Modeled on GlobalConfigUtil (./GlobalConfig.ts): a module-level cache plus
+ * in-flight promise dedup, so concurrent callers share one request and
+ * callers within the TTL share one response. Entries are keyed by the model's
+ * table name, the project id and the serialized query/select/sort/paging, so
+ * different projects and different shapes of the same list never collide.
+ *
+ * Callers share the returned ListResult (and the model instances inside it) -
+ * treat it as read-only and copy before mutating.
+ *
+ * Invalidation: the key carries the project id, so a project switch can never
+ * be served another project's rows even before anything is invalidated; the
+ * 60-second TTL bounds staleness after someone edits the underlying rows in
+ * settings. Screens that edit reference data and need to see the change
+ * immediately should call invalidate(modelType) on success.
+ */
+
+const TTL_IN_MS: number = 60 * 1000;
+
+interface CacheEntry {
+  tableName: string;
+  expiresAt: number;
+  result: ListResult<BaseModel>;
+}
+
+interface InFlightEntry {
+  tableName: string;
+  promise: Promise<ListResult<BaseModel>>;
+}
+
+export default class ModelListCache {
+  private static cache: Dictionary<CacheEntry> = {};
+  private static inFlight: Dictionary<InFlightEntry> = {};
+
+  public static async getList<TBaseModel extends BaseModel>(data: {
+    modelType: { new (): TBaseModel };
+    query: Query<TBaseModel>;
+    limit: number;
+    skip: number;
+    select: Select<TBaseModel>;
+    sort: Sort<TBaseModel>;
+    projectId?: ObjectID | null | undefined;
+    requestOptions?: RequestOptions | undefined;
+  }): Promise<ListResult<TBaseModel>> {
+    const tableName: string = new data.modelType().tableName || "";
+    const key: string = ModelListCache.buildKey({
+      tableName: tableName,
+      projectId: data.projectId,
+      query: data.query,
+      select: data.select,
+      sort: data.sort,
+      skip: data.skip,
+      limit: data.limit,
+      requestOptions: data.requestOptions,
+    });
+
+    const cached: CacheEntry | undefined = ModelListCache.cache[key];
+
+    if (cached) {
+      if (cached.expiresAt > Date.now()) {
+        return cached.result as ListResult<TBaseModel>;
+      }
+
+      delete ModelListCache.cache[key];
+    }
+
+    const existing: InFlightEntry | undefined = ModelListCache.inFlight[key];
+
+    if (existing) {
+      return existing.promise as Promise<ListResult<TBaseModel>>;
+    }
+
+    const promise: Promise<ListResult<TBaseModel>> =
+      ModelAPI.getList<TBaseModel>({
+        modelType: data.modelType,
+        query: data.query,
+        limit: data.limit,
+        skip: data.skip,
+        select: data.select,
+        sort: data.sort,
+        ...(data.requestOptions ? { requestOptions: data.requestOptions } : {}),
+      });
+
+    const entry: InFlightEntry = {
+      tableName: tableName,
+      promise: promise as Promise<ListResult<BaseModel>>,
+    };
+
+    ModelListCache.inFlight[key] = entry;
+
+    try {
+      const result: ListResult<TBaseModel> = await promise;
+
+      /*
+       * Only cache while this request is still the current one for its key -
+       * an invalidate() that ran mid-flight must not have its effect undone
+       * by a stale response landing afterwards. (Failures are never cached:
+       * the next caller simply issues a fresh request.)
+       */
+      if (ModelListCache.inFlight[key] === entry) {
+        ModelListCache.cache[key] = {
+          tableName: tableName,
+          expiresAt: Date.now() + TTL_IN_MS,
+          result: result as ListResult<BaseModel>,
+        };
+      }
+
+      return result;
+    } finally {
+      if (ModelListCache.inFlight[key] === entry) {
+        delete ModelListCache.inFlight[key];
+      }
+    }
+  }
+
+  // Drop every entry for one model type, or everything when none is given.
+  public static invalidate(modelType?: { new (): BaseModel }): void {
+    if (!modelType) {
+      ModelListCache.invalidateAll();
+      return;
+    }
+
+    const tableName: string = new modelType().tableName || "";
+
+    for (const key of Object.keys(ModelListCache.cache)) {
+      if (ModelListCache.cache[key]?.tableName === tableName) {
+        delete ModelListCache.cache[key];
+      }
+    }
+
+    for (const key of Object.keys(ModelListCache.inFlight)) {
+      if (ModelListCache.inFlight[key]?.tableName === tableName) {
+        delete ModelListCache.inFlight[key];
+      }
+    }
+  }
+
+  // Call on project switch (and logout): the next reads refetch everything.
+  public static invalidateAll(): void {
+    ModelListCache.cache = {};
+    ModelListCache.inFlight = {};
+  }
+
+  private static buildKey(data: {
+    tableName: string;
+    projectId?: ObjectID | null | undefined;
+    query: Query<BaseModel>;
+    select: Select<BaseModel>;
+    sort: Sort<BaseModel>;
+    skip: number;
+    limit: number;
+    requestOptions?: RequestOptions | undefined;
+  }): string {
+    /*
+     * JSONFunctions.serialize is the same serialization ModelAPI sends over
+     * the wire, so two requests get one key exactly when the server would see
+     * the same request body. Key order inside the literals is stable because
+     * call sites are static object literals.
+     */
+    return JSON.stringify({
+      tableName: data.tableName,
+      projectId: data.projectId?.toString() || "",
+      query: JSONFunctions.serialize(data.query as JSONObject),
+      select: JSONFunctions.serialize(data.select as JSONObject),
+      sort: JSONFunctions.serialize(data.sort as JSONObject),
+      skip: data.skip,
+      limit: data.limit,
+      url: data.requestOptions?.overrideRequestUrl?.toString() || "",
+    });
+  }
+}

package/UI/Utils/Project.ts

@@ -10,6 +10,7 @@ import Project from "../../Models/DatabaseModels/Project";
 import SubscriptionStatus, {
   SubscriptionStatusUtil,
 } from "../../Types/Billing/SubscriptionStatus";
+import ModelListCache from "./ModelListCache";
 import Navigation from "./Navigation";
 import SessionStorage from "./SessionStorage";
 import Telemetry from "./Telemetry/Telemetry";
@@ -278,12 +279,37 @@ export default class ProjectUtil {
   public static setCurrentProject(project: JSONObject | Project): void {
     const currentProjectId: string | undefined =
       project._id?.toString() || this.getCurrentProjectId()?.toString();
+
+    /*
+     * What this tab was showing BEFORE this call, read straight off session
+     * storage (not getCurrentProjectId(), whose URL fallback may already
+     * carry the NEW project mid-switch) so it can be compared after the
+     * overwrite below.
+     */
+    const previousProjectId: string | undefined = this.toProjectId(
+      SessionStorage.getItem(CURRENT_PROJECT_ID_STORAGE_KEY),
+    )?.toString();
+
     if (project instanceof Project) {
       project = BaseModel.toJSON(project, Project);
     }
     LocalStorage.setItem(`project_${currentProjectId}`, project);
     SessionStorage.setItem(CURRENT_PROJECT_ID_STORAGE_KEY, currentProjectId);
 
+    /*
+     * Cached reference lists (incident/alert states, custom fields...) are
+     * keyed by project id, so a switch could never serve another project's
+     * rows — invalidation just guarantees fresh reads and frees the old
+     * entries now that project selection can happen without a full page
+     * reload. Only on an actual CHANGE though: setCurrentProject also runs
+     * on every boot, in the same commit as the Header/Home mounts whose
+     * reference-list requests are already in flight, and wiping the cache
+     * then would discard its very first fill.
+     */
+    if (previousProjectId !== currentProjectId) {
+      ModelListCache.invalidateAll();
+    }
+
     // Remember this project for the next time the user opens the dashboard.
     this.setLastAccessedProjectId(currentProjectId);
 
@@ -303,6 +329,9 @@ export default class ProjectUtil {
 
     SessionStorage.removeItem(CURRENT_PROJECT_ID_STORAGE_KEY);
 
+    // Project-scoped cached reference lists must not outlive the project.
+    ModelListCache.invalidateAll();
+
     /*
      * The project is gone (or the user is leaving it), so it must not be
      * reopened the next time the dashboard loads.