selection: add DestinationField component and tests

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

@@ -0,0 +1,153 @@
+import React from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+import DestinationField from './DestinationField'
+import { expect } from '@storybook/jest'
+import { within } from '@storybook/testing-library'
+import { handleDefaultConfig } from '../storybook/graphql'
+import { useArgs } from '@storybook/preview-api'
+import { FieldValueInput } from '../../schema'
+
+const meta = {
+  title: 'util/DestinationField',
+  component: DestinationField,
+  tags: ['autodocs'],
+  argTypes: {
+    destType: {
+      control: 'select',
+      options: ['single-field', 'triple-field', 'disabled-destination'],
+    },
+  },
+  parameters: {
+    msw: {
+      handlers: [handleDefaultConfig],
+    },
+  },
+  render: function Component(args) {
+    const [, setArgs] = useArgs()
+    const onChange = (newValue: FieldValueInput[]): void => {
+      if (args.onChange) args.onChange(newValue)
+      setArgs({ value: newValue })
+    }
+    return <DestinationField {...args} onChange={onChange} />
+  },
+} satisfies Meta<typeof DestinationField>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const SingleField: Story = {
+  args: {
+    destType: 'single-field',
+    value: [
+      {
+        fieldID: 'phone-number',
+        value: '',
+      },
+    ],
+    disabled: false,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+
+    // ensure information renders correctly
+    await expect(canvas.getByLabelText('Phone Number')).toBeVisible()
+    await expect(
+      canvas.getByText(
+        'Include country code e.g. +1 (USA), +91 (India), +44 (UK)',
+      ),
+    ).toBeVisible()
+    await expect(canvas.getByText('+')).toBeVisible()
+    await expect(canvas.getByPlaceholderText('11235550123')).toBeVisible()
+  },
+}
+
+export const MultiField: Story = {
+  args: {
+    destType: 'triple-field',
+    value: [
+      {
+        fieldID: 'first-field',
+        value: '',
+      },
+      {
+        fieldID: 'second-field',
+        value: 'test@example.com',
+      },
+      {
+        fieldID: 'third-field',
+        value: '',
+      },
+    ],
+    disabled: false,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+
+    // ensure information for phone number renders correctly
+    await expect(canvas.getByLabelText('First Item')).toBeVisible()
+    await expect(canvas.getByText('Some hint text')).toBeVisible()
+    await expect(canvas.getByText('+')).toBeVisible()
+    await expect(canvas.getByPlaceholderText('11235550123')).toBeVisible()
+
+    // ensure information for email renders correctly
+    await expect(
+      canvas.getByPlaceholderText('foobar@example.com'),
+    ).toBeVisible()
+    await expect(canvas.getByLabelText('Second Item')).toBeVisible()
+
+    // ensure information for slack renders correctly
+    await expect(canvas.getByPlaceholderText('slack user ID')).toBeVisible()
+    await expect(canvas.getByLabelText('Third Item')).toBeVisible()
+  },
+}
+
+export const DisabledField: Story = {
+  args: {
+    destType: 'disabled-destination',
+    value: [
+      {
+        fieldID: 'disabled',
+        value: '',
+      },
+    ],
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+
+    // ensure information renders correctly
+    await expect(
+      canvas.getByPlaceholderText('This field is disabled.'),
+    ).toBeVisible()
+  },
+}
+
+export const FieldError: Story = {
+  args: {
+    destType: 'triple-field',
+    value: [
+      {
+        fieldID: 'first-field',
+        value: '',
+      },
+      {
+        fieldID: 'second-field',
+        value: 'test@example.com',
+      },
+      {
+        fieldID: 'third-field',
+        value: '',
+      },
+    ],
+    disabled: false,
+    destFieldErrors: [
+      {
+        fieldID: 'third-field',
+        message: 'This is an error message (third)',
+      },
+      {
+        fieldID: 'first-field',
+        message: 'This is an error message (first)',
+      },
+    ],
+  },
+}

web/src/app/selection/DestinationField.tsx

@@ -0,0 +1,86 @@
+import React from 'react'
+import { DestinationType, FieldValueInput } from '../../schema'
+import DestinationInputDirect from './DestinationInputDirect'
+import { useDestinationType } from '../util/RequireConfig'
+import DestinationSearchSelect from './DestinationSearchSelect'
+import { Grid } from '@mui/material'
+
+export type DestinationFieldProps = {
+  value: FieldValueInput[]
+  onChange?: (value: FieldValueInput[]) => void
+  destType: DestinationType
+
+  disabled?: boolean
+
+  destFieldErrors?: DestFieldError[]
+}
+
+export interface DestFieldError {
+  fieldID: string
+  message: string
+}
+
+export default function DestinationField(
+  props: DestinationFieldProps,
+): React.ReactNode {
+  const dest = useDestinationType(props.destType)
+
+  return (
+    <Grid container spacing={2}>
+      {dest.requiredFields.map((field) => {
+        const fieldValue =
+          (props.value || []).find((v) => v.fieldID === field.fieldID)?.value ||
+          ''
+
+        function handleChange(newValue: string): void {
+          if (!props.onChange) return
+
+          const newValues = (props.value || [])
+            .filter((v) => v.fieldID !== field.fieldID)
+            .concat({
+              fieldID: field.fieldID,
+              value: newValue,
+            })
+
+          props.onChange(newValues)
+        }
+
+        const fieldErrMsg =
+          props.destFieldErrors?.find((err) => err.fieldID === field.fieldID)
+            ?.message || ''
+
+        if (field.isSearchSelectable)
+          return (
+            <Grid key={field.fieldID} item xs={12} sm={12} md={12}>
+              <DestinationSearchSelect
+                {...field}
+                value={fieldValue}
+                destType={props.destType}
+                disabled={props.disabled || !dest.enabled}
+                onChange={(val) => handleChange(val)}
+                error={!!fieldErrMsg}
+                hint={fieldErrMsg || field.hint}
+                hintURL={fieldErrMsg ? '' : field.hintURL}
+              />
+            </Grid>
+          )
+
+        return (
+          <Grid key={field.fieldID} item xs={12} sm={12} md={12}>
+            <DestinationInputDirect
+              {...field}
+              value={fieldValue}
+              destType={props.destType}
+              disabled={props.disabled || !dest.enabled}
+              onChange={(e) => handleChange(e.target.value)}
+              error={!!fieldErrMsg}
+              hint={fieldErrMsg || field.hint}
+              hintURL={fieldErrMsg ? '' : field.hintURL}
+            />
+          </Grid>
+        )
+      })}
+    </Grid>
+  )
+  return
+}

web/src/app/selection/DestinationInputDirect.tsx

@@ -30,6 +30,7 @@ export type DestinationInputDirectProps = DestinationFieldConfig & {
   destType: DestinationType
 
   disabled?: boolean
+  error?: boolean
 }
 
 /**
@@ -132,6 +133,7 @@ export default function DestinationInputDirect(
       }
       onChange={handleChange}
       value={trimPrefix(props.value, props.prefix)}
+      error={props.error}
     />
   )
 }

web/src/app/storybook/defaultDestTypes.ts

@@ -0,0 +1,106 @@
+import { DestinationTypeInfo } from '../../schema'
+
+export const destTypes: DestinationTypeInfo[] = [
+  {
+    type: 'single-field',
+    name: 'Single Field Destination Type',
+    enabled: true,
+    disabledMessage: 'Single field destination type must be configured.',
+    userDisclaimer: '',
+    isContactMethod: true,
+    isEPTarget: false,
+    isSchedOnCallNotify: false,
+    iconURL: '',
+    iconAltText: '',
+    requiredFields: [
+      {
+        fieldID: 'phone-number',
+        labelSingular: 'Phone Number',
+        labelPlural: 'Phone Numbers',
+        hint: 'Include country code e.g. +1 (USA), +91 (India), +44 (UK)',
+        hintURL: '',
+        placeholderText: '11235550123',
+        prefix: '+',
+        inputType: 'tel',
+        isSearchSelectable: false,
+        supportsValidation: true,
+      },
+    ],
+  },
+  {
+    type: 'triple-field',
+    name: 'Multi Field Destination Type',
+    enabled: true,
+    disabledMessage: 'Multi field destination type must be configured.',
+    userDisclaimer: '',
+    isContactMethod: true,
+    isEPTarget: false,
+    isSchedOnCallNotify: false,
+    iconURL: '',
+    iconAltText: '',
+    requiredFields: [
+      {
+        fieldID: 'first-field',
+        labelSingular: 'First Item',
+        labelPlural: 'First Items',
+        hint: 'Some hint text',
+        hintURL: '',
+        placeholderText: '11235550123',
+        prefix: '+',
+        inputType: 'tel',
+        isSearchSelectable: false,
+        supportsValidation: true,
+      },
+      {
+        fieldID: 'second-field',
+        labelSingular: 'Second Item',
+        labelPlural: 'Second Items',
+        hint: '',
+        hintURL: '',
+        placeholderText: 'foobar@example.com',
+        prefix: '',
+        inputType: 'email',
+        isSearchSelectable: false,
+        supportsValidation: true,
+      },
+      {
+        fieldID: 'third-field',
+        labelSingular: 'Third Item',
+        labelPlural: 'Third Items',
+        hint: '',
+        hintURL: '',
+        placeholderText: 'slack user ID',
+        prefix: '',
+        inputType: 'string',
+        isSearchSelectable: false,
+        supportsValidation: true,
+      },
+    ],
+  },
+  {
+    type: 'disabled-destination',
+    name: 'This is disabled',
+    enabled: false,
+    disabledMessage: 'This field is disabled.',
+    userDisclaimer: '',
+    isContactMethod: true,
+    isEPTarget: true,
+    isSchedOnCallNotify: true,
+    iconURL: '',
+    iconAltText: '',
+    requiredFields: [
+      {
+        fieldID: 'disabled',
+        labelSingular: '',
+        labelPlural: '',
+        hint: '',
+        hintURL: '',
+        placeholderText: 'This field is disabled.',
+        prefix: '',
+        inputType: 'url',
+        isSearchSelectable: false,
+        supportsValidation: false,
+      },
+    ],
+  },
+]

web/src/app/storybook/graphql.ts

@@ -2,9 +2,11 @@ import { GraphQLHandler, HttpResponse, graphql } from 'msw'
 import {
   ConfigID,
   ConfigType,
+  DestinationTypeInfo,
   IntegrationKeyTypeInfo,
   UserRole,
 } from '../../schema'
+import { destTypes } from './defaultDestTypes'
 
 export type ConfigItem = {
   id: ConfigID
@@ -20,6 +22,7 @@ export type RequireConfigDoc = {
   }
   config: ConfigItem[]
   integrationKeyTypes: IntegrationKeyTypeInfo[]
+  destinationTypes: DestinationTypeInfo[]
 }
 
 export function handleConfig(doc: RequireConfigDoc): GraphQLHandler {
@@ -57,6 +60,7 @@ export const defaultConfig: RequireConfigDoc = {
       enabled: false,
     },
   ],
+  destinationTypes: destTypes,
 }
 
 export const handleDefaultConfig = handleConfig(defaultConfig)