Validate before closing modal and saving item

keystonejs · Nov 9, 2022 · d2124b8 · d2124b8
1 parent 66f28a2
commit d2124b8
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 8 deletions.
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/form-from-preview.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/form-from-preview.tsx
@@ -21,7 +21,7 @@ import {
 } from './api';
 import { previewPropsToValue, setValueToPreviewProps } from './get-value';
 import { createGetPreviewProps } from './preview-props';
-import { assertNever } from './utils';
+import { assertNever, clientSideValidateProp } from './utils';
 
 type DefaultFieldProps<Key> = GenericPreviewProps<
   Extract<ComponentSchema, { kind: Key }>,
@@ -206,13 +206,13 @@ const OrderableItemInForm = memo(function OrderableItemInForm(
   }
 ) {
   const [modalState, setModalState] = useState<
-    { state: 'open'; value: unknown } | { state: 'closed' }
+    { state: 'open'; value: unknown; forceValidation: boolean } | { state: 'closed' }
   >({ state: 'closed' });
   const onModalChange = useCallback(
     (cb: (value: unknown) => unknown) => {
       setModalState(state => {
         if (state.state === 'open') {
-          return { state: 'open', value: cb(state.value) };
+          return { state: 'open', forceValidation: state.forceValidation, value: cb(state.value) };
         }
         return state;
       });
@@ -229,7 +229,11 @@ const OrderableItemInForm = memo(function OrderableItemInForm(
           <Button
             weight="none"
             onClick={() => {
-              setModalState({ state: 'open', value: previewPropsToValue(props) });
+              setModalState({
+                state: 'open',
+                value: previewPropsToValue(props),
+                forceValidation: false,
+              });
             }}
             css={{ flexGrow: 1, justifyContent: 'start' }}
           >
@@ -245,10 +249,13 @@ const OrderableItemInForm = memo(function OrderableItemInForm(
             actions={{
               confirm: {
                 action: () => {
-                  if (modalState.state === 'open') {
-                    setValueToPreviewProps(modalState.value, props);
-                    setModalState({ state: 'closed' });
+                  if (modalState.state !== 'open') return;
+                  if (!clientSideValidateProp(props.schema, modalState.value)) {
+                    setModalState(state => ({ ...state, forceValidation: true }));
+                    return;
                   }
+                  setValueToPreviewProps(modalState.value, props);
+                  setModalState({ state: 'closed' });
                 },
                 label: 'Done',
               },

diff --git a/packages/fields-document/src/structure-views.tsx b/packages/fields-document/src/structure-views.tsx
@@ -14,7 +14,7 @@ import {
 import { useEffect, useMemo, useRef } from 'react';
 import { getInitialPropsValue } from './DocumentEditor/component-blocks/initial-values';
 import { ComponentSchemaForGraphQL } from './DocumentEditor/component-blocks/api';
-import { assertNever } from './DocumentEditor/component-blocks/utils';
+import { assertNever, clientSideValidateProp } from './DocumentEditor/component-blocks/utils';
 import { FormValueContentFromPreviewProps } from './DocumentEditor/component-blocks/form-from-preview';
 import { createGetPreviewProps } from './DocumentEditor/component-blocks/preview-props';
 
@@ -77,6 +77,7 @@ export const controller = (
     graphqlSelection: `${config.path} { json(hydrateRelationships: true) }`,
     schema: config.customViews.schema,
     defaultValue: { kind: 'create', value: getInitialPropsValue(config.customViews.schema) },
+    validate: value => clientSideValidateProp(config.customViews.schema, value.value),
     deserialize: data => {
       return {
         kind: 'update',