Loki flake: make delays configurable independently (metabase#50806)

* Add delay helper

* Remove delays in storybook

* Use skippable delay in ListField and SingleSelectListField

* Use skippable delay in ExplicitSize

* Remove waitTimeContext in storybook

* Remove waitTimeContext altogether

* Add documentation to delay

* Remove all context references in ExplicitSize

* Update flaky snapshots

.storybook/preview.tsx

@@ -3,6 +3,10 @@ import { ThemeProvider } from "metabase/ui";
 
 const isEmbeddingSDK = process.env.IS_EMBEDDING_SDK === "true";
 
+// @ts-expect-error: See metabase/lib/delay
+// This will skip the skippable delays in stories
+window.METABASE_REMOVE_DELAYS = true;
+
 if (!isEmbeddingSDK) {
   require("metabase/css/core/index.css");
   require("metabase/css/vendor.css");

frontend/src/metabase/components/ExplicitSize/ExplicitSize.tsx

@@ -10,12 +10,12 @@ import React, { Component } from "react";
 import ReactDOM from "react-dom";
 import _ from "underscore";
 
-import { waitTimeContext } from "metabase/context/wait-time";
 import CS from "metabase/css/core/index.css";
 import { isCypressActive } from "metabase/env";
+import { delay } from "metabase/lib/delay";
 import resizeObserver from "metabase/lib/resize-observer";
 
-const WAIT_TIME = 300;
+const WAIT_TIME = delay(300);
 
 const REFRESH_MODE = {
   throttle: (fn: () => void) => _.throttle(fn, WAIT_TIME),
@@ -59,8 +59,6 @@ function ExplicitSize<T>({
     const displayName = ComposedComponent.displayName || ComposedComponent.name;
 
     class WrappedComponent extends Component<T & InnerProps> {
-      static contextType = waitTimeContext;
-
       static displayName = `ExplicitSize[${displayName}]`;
 
       state: SizeState = {
@@ -78,11 +76,11 @@ function ExplicitSize<T>({
 
       _updateSize: () => void;
 
-      constructor(props: T & InnerProps, context: unknown) {
-        super(props, context);
+      constructor(props: T & InnerProps) {
+        super(props);
 
         this._printMediaQuery = window.matchMedia && window.matchMedia("print");
-        if (this.context === 0) {
+        if (WAIT_TIME === 0) {
           this._refreshMode = "none";
         } else {
           this._refreshMode =

frontend/src/metabase/components/ListField/ListField.tsx

@@ -8,6 +8,7 @@ import LoadingSpinner from "metabase/components/LoadingSpinner";
 import type { InputProps } from "metabase/core/components/Input";
 import Input from "metabase/core/components/Input";
 import { useDebouncedValue } from "metabase/hooks/use-debounced-value";
+import { delay } from "metabase/lib/delay";
 import { Checkbox, Flex } from "metabase/ui";
 import type { RowValue } from "metabase-types/api";
 
@@ -20,7 +21,7 @@ import {
 import type { ListFieldProps, Option } from "./types";
 import { isValidOptionItem } from "./utils";
 
-const DEBOUNCE_FILTER_TIME = 100;
+const DEBOUNCE_FILTER_TIME = delay(100);
 
 function createOptionsFromValuesWithoutOptions(
   values: RowValue[],

frontend/src/metabase/components/SingleSelectListField/SingleSelectListField.tsx

@@ -8,6 +8,7 @@ import LoadingSpinner from "metabase/components/LoadingSpinner";
 import type { InputProps } from "metabase/core/components/Input";
 import Input from "metabase/core/components/Input";
 import { useDebouncedValue } from "metabase/hooks/use-debounced-value";
+import { delay } from "metabase/lib/delay";
 import { Flex } from "metabase/ui";
 import type { RowValue } from "metabase-types/api";
 
@@ -21,7 +22,7 @@ import {
 import type { Option, SingleSelectListFieldProps } from "./types";
 import { isValidOptionItem } from "./utils";
 
-const DEBOUNCE_FILTER_TIME = 100;
+const DEBOUNCE_FILTER_TIME = delay(100);
 
 function createOptionsFromValuesWithoutOptions(
   values: RowValue[],

frontend/src/metabase/lib/delay.ts

@@ -0,0 +1,20 @@
+declare global {
+  interface Window {
+    // Set REMOVE_DELAYS to true in environments where we want to remove them.
+    // For example, in Storybook we want to remove delays to make Loki tests more
+    // predictable.
+    METABASE_REMOVE_DELAYS?: boolean;
+  }
+}
+
+/**
+ * Wrap any delay with this helper to make it skippable in
+ * certain environments.
+ */
+export function delay(ms: number): number {
+  if (typeof window !== "undefined" && window.METABASE_REMOVE_DELAYS) {
+    return 0;
+  }
+
+  return ms;
+}

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

@@ -9,7 +9,6 @@ import { getStore } from "__support__/entities-store";
 import { createMockMetadata } from "__support__/metadata";
 import { getNextId } from "__support__/utils";
 import { NumberColumn, StringColumn } from "__support__/visualizations";
-import { waitTimeContext } from "metabase/context/wait-time";
 import { getDashboardUiParameters } from "metabase/parameters/utils/dashboards";
 import { publicReducers } from "metabase/reducers-public";
 import TABLE_RAW_SERIES from "metabase/visualizations/components/TableSimple/stories-data/table-simple-orders-with-people.json";
@@ -43,7 +42,6 @@ export default {
   component: PublicOrEmbeddedDashboardView,
   decorators: [
     ReduxDecorator,
-    FasterExplicitSizeUpdateDecorator,
     WaitForResizeToStopDecorator,
     MockIsEmbeddingDecorator,
   ],
@@ -109,18 +107,9 @@ function ReduxDecorator(Story: StoryFn, context: StoryContext) {
   );
 }
 
-function FasterExplicitSizeUpdateDecorator(Story: StoryFn) {
-  return (
-    <waitTimeContext.Provider value={0}>
-      <Story />
-    </waitTimeContext.Provider>
-  );
-}
-
 /**
  * This is an arbitrary number, it should be big enough to pass CI tests.
- * This value works together with FasterExplicitSizeUpdateDecorator which
- * make sure we finish resizing any ExplicitSize components the fastest.
+ * This works because we set delays for ExplicitSize to 0 in storybook.
  */
 const TIME_UNTIL_ALL_ELEMENTS_STOP_RESIZING = 1500;
 function WaitForResizeToStopDecorator(Story: StoryFn) {

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

@@ -9,7 +9,6 @@ import { getNextId } from "__support__/utils";
 import { NumberColumn, StringColumn } from "__support__/visualizations";
 import PopoverWithTrigger from "metabase/components/PopoverWithTrigger";
 import TippyPopoverWithTrigger from "metabase/components/PopoverWithTrigger/TippyPopoverWithTrigger";
-import { waitTimeContext } from "metabase/context/wait-time";
 import LegacyTooltip from "metabase/core/components/Tooltip";
 import { publicReducers } from "metabase/reducers-public";
 import { Box, Card, Popover, Text, Tooltip } from "metabase/ui";
@@ -42,7 +41,6 @@ export default {
   component: PublicOrEmbeddedDashboardView,
   decorators: [
     ReduxDecorator,
-    FasterExplicitSizeUpdateDecorator,
     WaitForResizeToStopDecorator,
     MockIsEmbeddingDecorator,
   ],
@@ -59,18 +57,9 @@ function ReduxDecorator(Story: StoryFn) {
   );
 }
 
-function FasterExplicitSizeUpdateDecorator(Story: StoryFn) {
-  return (
-    <waitTimeContext.Provider value={0}>
-      <Story />
-    </waitTimeContext.Provider>
-  );
-}
-
 /**
  * This is an arbitrary number, it should be big enough to pass CI tests.
- * This value works together with FasterExplicitSizeUpdateDecorator which
- * make sure we finish resizing any ExplicitSize components the fastest.
+ * This works because we set delays for ExplicitSize to 0 in storybook.
  */
 const TIME_UNTIL_ALL_ELEMENTS_STOP_RESIZING = 1000;
 function WaitForResizeToStopDecorator(Story: StoryFn) {

frontend/src/metabase/public/containers/PublicOrEmbeddedQuestion/PublicOrEmbeddedQuestionView.stories.tsx

@@ -13,7 +13,6 @@ import {
   NumberColumn,
   StringColumn,
 } from "__support__/visualizations";
-import { waitTimeContext } from "metabase/context/wait-time";
 import { publicReducers } from "metabase/reducers-public";
 import { Box } from "metabase/ui";
 import { registerVisualization } from "metabase/visualizations";
@@ -43,7 +42,6 @@ export default {
   component: PublicOrEmbeddedQuestionView,
   decorators: [
     ReduxDecorator,
-    FasterExplicitSizeUpdateDecorator,
     WaitForResizeToStopDecorator,
     MockIsEmbeddingDecorator,
   ],
@@ -60,18 +58,9 @@ function ReduxDecorator(Story: StoryFn) {
   );
 }
 
-function FasterExplicitSizeUpdateDecorator(Story: StoryFn) {
-  return (
-    <waitTimeContext.Provider value={0}>
-      <Story />
-    </waitTimeContext.Provider>
-  );
-}
-
 /**
  * This is an arbitrary number, it should be big enough to pass CI tests.
- * This value works together with FasterExplicitSizeUpdateDecorator which
- * make sure we finish resizing any ExplicitSize components the fastest.
+ * This works because we set delays for ExplicitSize to 0 in storybook.
  */
 const TIME_UNTIL_ALL_ELEMENTS_STOP_RESIZING = 1000;
 function WaitForResizeToStopDecorator(Story: StoryFn) {