Skip unused addons and font loads in Loki screenshot runs (#83068)

.storybook/main.ts

@@ -61,6 +61,15 @@ const config: StorybookConfig = {
   build: {
     test: {
       disableTreeShaking: false,
+      // Setting this replaces the addons --test disables by default,
+      // so the first three repeat Storybook's defaults.
+      disabledAddons: [
+        "@storybook/addon-docs",
+        "@storybook/addon-essentials/docs",
+        "@storybook/addon-coverage",
+        "@storybook/addon-a11y",
+        "@storybook/addon-interactions",
+      ],
     },
   },
   typescript: {

.storybook/preview.tsx

@@ -49,16 +49,17 @@ if (
   document.head.appendChild(fontFaceStyle);
 }
 
-// Force every registered font to load before the story renders. This ensures we
+const PRELOADED_FONT_FAMILIES = ["Lato", "JetBrains Mono"];
-// use same fonts for tests every time, instead of using generic fallback
+
-// family like `sans-serif` which might resolve to different specific fonts (depending
+// Load the app's text and monospace fonts before the story renders,
-// on what available on current machine) which might have different metrics, in turn
+// so code that measures text, like the table's column autosize, gets the same metrics on every machine.
-// producing inconsistent behavior in code relying on measuring text (e.g., column
-// autosize in table visualization). Awaiting all loads here makes measurements
-// deterministic across platforms.
 const fontsReady = async () => {
   const loads: Promise<unknown>[] = [];
-  document.fonts.forEach((face) => loads.push(face.load()));
+  document.fonts.forEach((face) => {
+    if (PRELOADED_FONT_FAMILIES.includes(face.family)) {
+      loads.push(face.load());
+    }
+  });
   await Promise.all(loads);
 };
 

frontend/src/metabase/public/containers/PublicOrEmbeddedDashboard/PublicOrEmbeddedDashboardView-filters.stories.tsx

@@ -20,6 +20,7 @@ import {
 } from "metabase/dashboard/context/mock-context";
 import { MetabaseReduxProvider } from "metabase/redux";
 import { stableStringify } from "metabase/utils/objects";
+import { checkNotNull } from "metabase/utils/types";
 import { BarChart } from "metabase/visualizations/visualizations/BarChart";
 import { Table } from "metabase/visualizations/visualizations/Table/Table";
 import TABLE_RAW_SERIES from "metabase/visualizations/visualizations/Table/stories-data/orders-with-people.json";
@@ -398,25 +399,19 @@ const createDefaultArgs = ({
 };
 
 function getLastPopover() {
-  // Unjustified type cast. FIXME
+  return within(getLastPopoverElement());
-  const lastPopover = Array.from(
-    document.documentElement.querySelectorAll(
-      '[data-element-id="mantine-popover"]',
-    ),
-  ).at(-1) as HTMLElement;
-
-  return within(lastPopover);
 }
 
 function getLastPopoverElement() {
-  // Unjustified type cast. FIXME
+  const popovers = document.documentElement.querySelectorAll<HTMLElement>(
-  const lastPopover = Array.from(
+    '[data-element-id="mantine-popover"]',
-    document.documentElement.querySelectorAll(
+  );
-      '[data-element-id="mantine-popover"]',
+  // Mantine renders an input's options dropdown as a hidden popover when there are no options.
-    ),
+  const lastPopover = Array.from(popovers)
-  ).at(-1) as HTMLElement;
+    .filter((popover) => popover.checkVisibility())
+    .at(-1);
 
-  return lastPopover;
+  return checkNotNull(lastPopover);
 }
 
 export const LightThemeText = {