storybook: add exp flags helper

.storybook/preview.ts

@@ -1,7 +1,10 @@
 import type { Preview } from '@storybook/react'
 import DefaultDecorator from '../web/src/app/storybook/decorators'
 import { initialize, mswLoader } from 'msw-storybook-addon'
-import { handleDefaultConfig } from '../web/src/app/storybook/graphql'
+import {
+  handleDefaultConfig,
+  handleExpFlags,
+} from '../web/src/app/storybook/graphql'
 
 initialize({
   onUnhandledRequest: 'bypass',
@@ -17,7 +20,7 @@ const preview: Preview = {
       },
     },
     msw: {
-      handlers: [handleDefaultConfig],
+      handlers: [handleDefaultConfig, handleExpFlags()],
     },
   },
   decorators: [DefaultDecorator],

web/src/app/schedules/on-call-notifications/ScheduleOnCallNotificationsListDest.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react'
 import ScheduleOnCallNotificationsListDest from './ScheduleOnCallNotificationsListDest'
-import { handleDefaultConfig } from '../../storybook/graphql'
+import { handleDefaultConfig, handleExpFlags } from '../../storybook/graphql'
 import { HttpResponse, graphql } from 'msw'
 
 const emptyScheduleID = '00000000-0000-0000-0000-000000000000'
@@ -15,6 +15,7 @@ const meta = {
     msw: {
       handlers: [
         handleDefaultConfig,
+        handleExpFlags('dest-types'),
         graphql.query('ScheduleNotifications', ({ variables }) => {
           switch (variables.scheduleID) {
             case emptyScheduleID:

web/src/app/selection/DestinationField.stories.tsx

@@ -2,7 +2,6 @@ import React from 'react'
 import type { Meta, StoryObj } from '@storybook/react'
 import DestinationField from './DestinationField'
 import { expect, within } from '@storybook/test'
-import { handleDefaultConfig } from '../storybook/graphql'
 import { useArgs } from '@storybook/preview-api'
 import { FieldValueInput } from '../../schema'
 
@@ -16,11 +15,7 @@ const meta = {
       options: ['single-field', 'triple-field', 'disabled-destination'],
     },
   },
-  parameters: {
-    msw: {
-      handlers: [handleDefaultConfig],
-    },
-  },
+
   render: function Component(args) {
     const [, setArgs] = useArgs()
     const onChange = (newValue: FieldValueInput[]): void => {

web/src/app/selection/DestinationInputDirect.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import type { Meta, StoryObj } from '@storybook/react'
 import DestinationInputDirect from './DestinationInputDirect'
 import { expect, within, userEvent } from '@storybook/test'
-import { handleDefaultConfig } from '../storybook/graphql'
+import { handleDefaultConfig, handleExpFlags } from '../storybook/graphql'
 import { HttpResponse, graphql } from 'msw'
 import { useArgs } from '@storybook/preview-api'
 
@@ -21,6 +21,7 @@ const meta = {
     msw: {
       handlers: [
         handleDefaultConfig,
+        handleExpFlags('dest-types'),
         graphql.query('ValidateDestination', ({ variables: vars }) => {
           return HttpResponse.json({
             data: {

web/src/app/selection/DestinationSearchSelect.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import type { Meta, StoryObj } from '@storybook/react'
 import DestinationSearchSelect from './DestinationSearchSelect'
 import { expect, userEvent, within } from '@storybook/test'
-import { handleDefaultConfig } from '../storybook/graphql'
+import { handleDefaultConfig, handleExpFlags } from '../storybook/graphql'
 import { HttpResponse, graphql } from 'msw'
 import { useArgs } from '@storybook/preview-api'
 import { FieldValueConnection } from '../../schema'
@@ -30,6 +30,7 @@ const meta = {
     msw: {
       handlers: [
         handleDefaultConfig,
+        handleExpFlags('dest-types'),
         graphql.query('DestinationFieldSearch', ({ variables: vars }) => {
           if (vars.input.search === 'query-error') {
             return HttpResponse.json({

web/src/app/storybook/graphql.ts

@@ -25,14 +25,6 @@ export type RequireConfigDoc = {
   destinationTypes: DestinationTypeInfo[]
 }
 
-export function handleConfig(doc: RequireConfigDoc): GraphQLHandler {
-  return graphql.query('RequireConfig', () => {
-    return HttpResponse.json({
-      data: doc,
-    })
-  })
-}
-
 export const defaultConfig: RequireConfigDoc = {
   user: {
     id: '00000000-0000-0000-0000-000000000000',
@@ -63,4 +55,24 @@ export const defaultConfig: RequireConfigDoc = {
   destinationTypes: destTypes,
 }
 
+export function handleExpFlags(...flags: string[]): GraphQLHandler {
+  return graphql.query('useExpFlag', () => {
+    return HttpResponse.json({
+      data: {
+        experimentalFlags: flags,
+      },
+    })
+  })
+}
+
+export function handleConfig(
+  doc: RequireConfigDoc = defaultConfig,
+): GraphQLHandler {
+  return graphql.query('RequireConfig', () => {
+    return HttpResponse.json({
+      data: doc,
+    })
+  })
+}
+
 export const handleDefaultConfig = handleConfig(defaultConfig)

web/src/app/users/UserContactMethodFormDest.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import type { Meta, StoryObj } from '@storybook/react'
 import UserContactMethodFormDest, { Value } from './UserContactMethodFormDest'
 import { expect, within, userEvent, waitFor } from '@storybook/test'
-import { handleDefaultConfig } from '../storybook/graphql'
+import { handleDefaultConfig, handleExpFlags } from '../storybook/graphql'
 import { useArgs } from '@storybook/preview-api'
 import { HttpResponse, graphql } from 'msw'
 
@@ -14,6 +14,7 @@ const meta = {
     msw: {
       handlers: [
         handleDefaultConfig,
+        handleExpFlags('dest-types'),
         graphql.query('ValidateDestination', ({ variables: vars }) => {
           return HttpResponse.json({
             data: {

web/src/app/util/DestinationChip.stories.tsx

@@ -2,7 +2,6 @@ import React from 'react'
 import type { Meta, StoryObj } from '@storybook/react'
 import DestinationChip from './DestinationChip'
 import { expect, within } from '@storybook/test'
-import { handleDefaultConfig } from '../storybook/graphql'
 
 const meta = {
   title: 'util/DestinationChip',
@@ -26,11 +25,6 @@ const meta = {
       options: [() => null, undefined],
     },
   },
-  parameters: {
-    msw: {
-      handlers: [handleDefaultConfig],
-    },
-  },
 } satisfies Meta<typeof DestinationChip>
 
 export default meta

web/src/app/util/DestinationInputChip.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import type { Meta, StoryObj } from '@storybook/react'
 import DestinationInputChip from './DestinationInputChip'
 import { expect, userEvent, within } from '@storybook/test'
-import { handleDefaultConfig } from '../storybook/graphql'
+import { handleDefaultConfig, handleExpFlags } from '../storybook/graphql'
 import { HttpResponse, graphql } from 'msw'
 
 const meta = {
@@ -16,6 +16,7 @@ const meta = {
     msw: {
       handlers: [
         handleDefaultConfig,
+        handleExpFlags('dest-types'),
         graphql.query('DestDisplayInfo', () => {
           return HttpResponse.json({
             data: {

web/src/app/util/TelTextField.stories.tsx

@@ -5,7 +5,7 @@ import { HttpResponse, graphql } from 'msw'
 import { expect, within } from '@storybook/test'
 import { useArgs } from '@storybook/preview-api'
 
-import { handleDefaultConfig } from '../storybook/graphql'
+import { handleDefaultConfig, handleExpFlags } from '../storybook/graphql'
 
 const meta = {
   title: 'util/TelTextField',
@@ -32,7 +32,7 @@ const meta = {
     msw: {
       handlers: [
         handleDefaultConfig,
-
+        handleExpFlags('dest-types'),
         graphql.query('PhoneNumberValidate', ({ variables: vars }) => {
           return HttpResponse.json({
             data: {

web/src/app/util/useExpFlag.ts

@@ -10,7 +10,7 @@ const query = gql`
 // useExpFlag is a hook that returns a boolean indicating whether the
 // given experimental flag is enabled.
 export function useExpFlag(expFlag: ExpFlag): boolean {
-  const [{ data }] = useQuery({ query })
+  const [{ data }] = useQuery({ query, requestPolicy: 'cache-first' })
 
   const flags: Array<ExpFlag> = data?.experimentalFlags ?? []