From 164d36c57f390776f2331a3da723d2a75dbc47d0 Mon Sep 17 00:00:00 2001 From: Nathaniel Caza Date: Mon, 12 Feb 2024 14:59:20 -0600 Subject: [PATCH 1/3] add handleExpFlags helper --- .storybook/preview.ts | 7 +++-- ...uleOnCallNotificationsListDest.stories.tsx | 3 +- .../selection/DestinationField.stories.tsx | 6 +--- .../DestinationInputDirect.stories.tsx | 3 +- .../DestinationSearchSelect.stories.tsx | 3 +- web/src/app/storybook/graphql.ts | 28 +++++++++++++------ .../UserContactMethodFormDest.stories.tsx | 3 +- web/src/app/util/DestinationChip.stories.tsx | 5 ---- .../app/util/DestinationInputChip.stories.tsx | 3 +- web/src/app/util/TelTextField.stories.tsx | 4 +-- 10 files changed, 38 insertions(+), 27 deletions(-) diff --git a/.storybook/preview.ts b/.storybook/preview.ts index efad841cd4..43877e54f1 100644 --- a/.storybook/preview.ts +++ b/.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], diff --git a/web/src/app/schedules/on-call-notifications/ScheduleOnCallNotificationsListDest.stories.tsx b/web/src/app/schedules/on-call-notifications/ScheduleOnCallNotificationsListDest.stories.tsx index 7d75374c0e..b21e34b182 100644 --- a/web/src/app/schedules/on-call-notifications/ScheduleOnCallNotificationsListDest.stories.tsx +++ b/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: diff --git a/web/src/app/selection/DestinationField.stories.tsx b/web/src/app/selection/DestinationField.stories.tsx index ffe3b5f92c..865556759b 100644 --- a/web/src/app/selection/DestinationField.stories.tsx +++ b/web/src/app/selection/DestinationField.stories.tsx @@ -16,11 +16,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 => { diff --git a/web/src/app/selection/DestinationInputDirect.stories.tsx b/web/src/app/selection/DestinationInputDirect.stories.tsx index 3a2c47dc19..aa66bc74e3 100644 --- a/web/src/app/selection/DestinationInputDirect.stories.tsx +++ b/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: { diff --git a/web/src/app/selection/DestinationSearchSelect.stories.tsx b/web/src/app/selection/DestinationSearchSelect.stories.tsx index 411dd424ff..4f14683aa2 100644 --- a/web/src/app/selection/DestinationSearchSelect.stories.tsx +++ b/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({ diff --git a/web/src/app/storybook/graphql.ts b/web/src/app/storybook/graphql.ts index abdf68b40a..e53097e00f 100644 --- a/web/src/app/storybook/graphql.ts +++ b/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) diff --git a/web/src/app/users/UserContactMethodFormDest.stories.tsx b/web/src/app/users/UserContactMethodFormDest.stories.tsx index c5b5b7e8ab..1f453f57b1 100644 --- a/web/src/app/users/UserContactMethodFormDest.stories.tsx +++ b/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: { diff --git a/web/src/app/util/DestinationChip.stories.tsx b/web/src/app/util/DestinationChip.stories.tsx index a157413ad3..5efd71bbb4 100644 --- a/web/src/app/util/DestinationChip.stories.tsx +++ b/web/src/app/util/DestinationChip.stories.tsx @@ -26,11 +26,6 @@ const meta = { options: [() => null, undefined], }, }, - parameters: { - msw: { - handlers: [handleDefaultConfig], - }, - }, } satisfies Meta export default meta diff --git a/web/src/app/util/DestinationInputChip.stories.tsx b/web/src/app/util/DestinationInputChip.stories.tsx index 77278c4f2f..0759b6eace 100644 --- a/web/src/app/util/DestinationInputChip.stories.tsx +++ b/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: { diff --git a/web/src/app/util/TelTextField.stories.tsx b/web/src/app/util/TelTextField.stories.tsx index 068dc2a9cc..811def6f63 100644 --- a/web/src/app/util/TelTextField.stories.tsx +++ b/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: { From bec41bd06c86f9733fce729cbe6f69f7ce9fd63b Mon Sep 17 00:00:00 2001 From: Nathaniel Caza Date: Mon, 12 Feb 2024 14:59:53 -0600 Subject: [PATCH 2/3] cache exp flag response --- web/src/app/util/useExpFlag.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/src/app/util/useExpFlag.ts b/web/src/app/util/useExpFlag.ts index e71994d18a..bf02488bd1 100644 --- a/web/src/app/util/useExpFlag.ts +++ b/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 = data?.experimentalFlags ?? [] From 91c72954d105f1bf4dbb5d9e235d39317ca45a2b Mon Sep 17 00:00:00 2001 From: Nathaniel Caza Date: Mon, 12 Feb 2024 15:00:27 -0600 Subject: [PATCH 3/3] remove unused imports --- web/src/app/selection/DestinationField.stories.tsx | 1 - web/src/app/util/DestinationChip.stories.tsx | 1 - 2 files changed, 2 deletions(-) diff --git a/web/src/app/selection/DestinationField.stories.tsx b/web/src/app/selection/DestinationField.stories.tsx index 865556759b..bf7d2c3676 100644 --- a/web/src/app/selection/DestinationField.stories.tsx +++ b/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' diff --git a/web/src/app/util/DestinationChip.stories.tsx b/web/src/app/util/DestinationChip.stories.tsx index 5efd71bbb4..de7696364a 100644 --- a/web/src/app/util/DestinationChip.stories.tsx +++ b/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',