users: use generic destinations for user CM create dialog component (#…

…3664)

* add user CM create and edit dialogs using destinations

* fix storybook rendering

* add missing fields for status updates

* fix edit dialog stories render

* start adding validation

* normalize ValidateDestination errors

* revert type change

* pass validation errors

* cleanup error messages

* remove conflict query for now

* remove exp flag stub

* update exp flag handler

* fix dest type err

* update unit test

* update create dialog story tests

* use full name

* revert edit dialog changes for this PR

* standardize error codes

* reorganize

* cleanup errors on other components

* remove special case for dest type err

* fix error split

* cleanup imports

* rename/simplify split helper

* update form

* update test

* fix type issue

* add pre-check for name when using dest

* fix error rendering and story

* update list stories

* user conflict out of scope for this PR

---------

Co-authored-by: Nathaniel Caza <mastercactapus@gmail.com>

graphql2/graphqlapp/contactmethod.go

@@ -139,6 +139,11 @@ func (m *Mutation) CreateUserContactMethod(ctx context.Context, input graphql2.C
 	cfg := config.FromContext(ctx)
 
 	if input.Dest != nil {
+		err := validate.IDName("input.name", input.Name)
+		if err != nil {
+			addInputError(ctx, err)
+			return nil, nil
+		}
 		if ok, err := (*App)(m).ValidateDestination(ctx, "input.dest", input.Dest); !ok {
 			return nil, err
 		}

graphql2/graphqlapp/destinationvalidation.go

@@ -56,6 +56,24 @@ func addDestFieldError(ctx context.Context, parentField, fieldID string, err err
 	return nil
 }
 
+func addInputError(ctx context.Context, err error) {
+	field := err.(validation.FieldError).Field()
+
+	p := graphql.GetPath(ctx)
+	parentParts := strings.Split(field, ".")
+	for _, part := range parentParts {
+		p = append(p, ast.PathName(part))
+	}
+
+	graphql.AddError(ctx, &gqlerror.Error{
+		Message: errReason(err),
+		Path:    p,
+		Extensions: map[string]interface{}{
+			"code": graphql2.ErrorCodeInvalidInputValue,
+		},
+	})
+}
+
 // ValidateDestination will validate a destination input.
 //
 // In the future this will be a call to the plugin system.

package.json

@@ -48,17 +48,17 @@
     "@mui/system": "5.15.6",
     "@mui/x-data-grid": "6.19.3",
     "@playwright/test": "1.41.2",
-    "@storybook/addon-essentials": "7.6.13",
-    "@storybook/addon-interactions": "7.6.13",
-    "@storybook/addon-links": "7.6.13",
-    "@storybook/addons": "7.6.13",
-    "@storybook/blocks": "7.6.13",
-    "@storybook/preview-api": "7.6.13",
-    "@storybook/react": "7.6.13",
-    "@storybook/react-vite": "7.6.13",
-    "@storybook/test": "7.6.13",
+    "@storybook/addon-essentials": "7.6.17",
+    "@storybook/addon-interactions": "7.6.17",
+    "@storybook/addon-links": "7.6.17",
+    "@storybook/addons": "7.6.17",
+    "@storybook/blocks": "7.6.17",
+    "@storybook/preview-api": "7.6.17",
+    "@storybook/react": "7.6.17",
+    "@storybook/react-vite": "7.6.17",
+    "@storybook/test": "7.6.17",
     "@storybook/test-runner": "0.16.0",
-    "@storybook/types": "7.6.13",
+    "@storybook/types": "7.6.17",
     "@types/chance": "1.1.4",
     "@types/diff": "5.0.8",
     "@types/glob": "8.1.0",
@@ -133,7 +133,7 @@
     "remark-breaks": "4.0.0",
     "remark-gfm": "4.0.0",
     "semver": "7.6.0",
-    "storybook": "7.6.13",
+    "storybook": "7.6.17",
     "storybook-addon-mock": "4.3.0",
     "stylelint": "16.2.1",
     "stylelint-config-standard": "34.0.0",

web/src/app/dialogs/FormDialog.jsx

@@ -62,6 +62,7 @@ function FormDialog(props) {
     onBack,
     fullHeight,
     disableBackdropClose,
+    disablePortal,
     ...dialogProps
   } = props
 
@@ -178,6 +179,7 @@ function FormDialog(props) {
   const fs = fullScreen || (!isWideScreen && !confirm)
   return (
     <Dialog
+      disablePortal={disablePortal}
       classes={classesProp}
       fullScreen={fs}
       maxWidth={maxWidth}
@@ -233,6 +235,8 @@ FormDialog.propTypes = {
   confirm: p.bool,
   maxWidth: p.string,
 
+  disablePortal: p.bool, // disable the portal behavior of the dialog
+
   // overrides any of the main action button titles with this specific text
   primaryActionLabel: p.string,
 

web/src/app/forms/FormField.jsx

@@ -167,6 +167,15 @@ export function FormField(props) {
 
     return null
   }
+  if (props.select) {
+    fieldProps.SelectProps = {
+      ...fieldProps.SelectProps,
+      MenuProps: {
+        ...fieldProps.SelectProps?.MenuProps,
+        disablePortal: props.disablePortal,
+      },
+    }
+  }
 
   if (render) return render(fieldProps)
   return (
@@ -301,4 +310,5 @@ FormField.propTypes = {
   clientSideFilter: p.bool,
   disableCloseOnSelect: p.bool,
   optionsLimit: p.number,
+  disablePortal: p.bool,
 }

web/src/app/storybook/defaultDestTypes.ts

@@ -3,7 +3,7 @@ import { DestinationTypeInfo } from '../../schema'
 export const destTypes: DestinationTypeInfo[] = [
   {
     type: 'single-field',
-    name: 'Single Field Destination Type',
+    name: 'Single Field',
     enabled: true,
     disabledMessage: 'Single field destination type must be configured.',
     userDisclaimer: '',
@@ -31,7 +31,7 @@ export const destTypes: DestinationTypeInfo[] = [
   },
   {
     type: 'triple-field',
-    name: 'Multi Field Destination Type',
+    name: 'Multi Field',
     enabled: true,
     disabledMessage: 'Multi field destination type must be configured.',
     userDisclaimer: '',
@@ -111,7 +111,7 @@ export const destTypes: DestinationTypeInfo[] = [
   },
   {
     type: 'supports-status',
-    name: 'Single Field Destination Type',
+    name: 'Single With Status',
     enabled: true,
     disabledMessage: 'Single field destination type must be configured.',
     userDisclaimer: '',
@@ -139,7 +139,7 @@ export const destTypes: DestinationTypeInfo[] = [
   },
   {
     type: 'required-status',
-    name: 'Single Field Destination Type',
+    name: 'Single With Required Status',
     enabled: true,
     disabledMessage: 'Single field destination type must be configured.',
     userDisclaimer: '',

web/src/app/users/UserContactMethodCreateDialog.tsx

@@ -8,6 +8,8 @@ import { useConfigValue } from '../util/RequireConfig'
 import { Dialog, DialogTitle, DialogActions, Button } from '@mui/material'
 import DialogContentError from '../dialogs/components/DialogContentError'
 import { ContactMethodType } from '../../schema'
+import { useExpFlag } from '../util/useExpFlag'
+import UserContactMethodCreateDialogDest from './UserContactMethodCreateDialogDest'
 
 type Value = {
   name: string
@@ -36,12 +38,16 @@ const userConflictQuery = gql`
 
 const noSuspense = { suspense: false }
 
-export default function UserContactMethodCreateDialog(props: {
+type UserContactMethodCreateDialogProps = {
   userID: string
   onClose: (contactMethodID?: string) => void
   title?: string
   subtitle?: string
-}): React.ReactNode {
+}
+
+function UserContactMethodCreateDialog(
+  props: UserContactMethodCreateDialogProps,
+): React.ReactNode {
   const [allowSV, allowE, allowW, allowS] = useConfigValue(
     'Twilio.Enable',
     'SMTP.Enable',
@@ -154,3 +160,15 @@ export default function UserContactMethodCreateDialog(props: {
     />
   )
 }
+
+export default function UserContactMethodCreateDialogSwitch(
+  props: UserContactMethodCreateDialogProps,
+): React.ReactNode {
+  const isDestTypesSet = useExpFlag('dest-types')
+
+  if (isDestTypesSet) {
+    return <UserContactMethodCreateDialogDest {...props} />
+  }
+
+  return <UserContactMethodCreateDialog {...props} />
+}