fix proposal form when requiring workflow steps

charmClient/hooks/proposals.ts

@@ -124,7 +124,7 @@ export function useCreateProposalRewards(proposalId: MaybeString) {
   return usePOST<undefined, ProposalWithUsersAndRubric>(`/api/proposals/${proposalId}/rewards`);
 }
 
-export function useUpdateProposalFormFields({ proposalId }: { proposalId: string }) {
+export function useUpdateProposalFormFields({ proposalId }: { proposalId: MaybeString }) {
   return usePUT<{ formFields: FormFieldInput[] }, FormFieldInput[]>(`/api/proposals/${proposalId}/form`);
 }
 

components/[pageId]/DocumentPage/DocumentPage.tsx

@@ -20,9 +20,10 @@
 import { useAppDispatch, useAppSelector } from 'components/common/DatabaseEditor/store/hooks';
 import { makeSelectSortedViews } from 'components/common/DatabaseEditor/store/views';
 import { FormFieldAnswers } from 'components/common/form/FormFieldAnswers';
-import { FormFieldsEditor } from 'components/common/form/FormFieldsEditor';
+import { ControlledFormFieldsEditor } from 'components/common/form/FormFieldsEditor';
 import LoadingComponent from 'components/common/LoadingComponent';
 import type { useProposalFormAnswers } from 'components/proposals/hooks/useProposalFormAnswers';
+import type { useProposalFormFieldsEditor } from 'components/proposals/hooks/useProposalFormFieldsEditor';
 import { ProposalEvaluations } from 'components/proposals/ProposalPage/components/ProposalEvaluations/ProposalEvaluations';
 import { ProposalStickyFooter } from 'components/proposals/ProposalPage/components/ProposalStickyFooter/ProposalStickyFooter';
 import { RewardEvaluations } from 'components/rewards/components/RewardEvaluations/RewardEvaluations';
@@ -62,7 +63,10 @@
   () => import('components/[pageId]/DocumentPage/components/RewardProperties').then((r) => r.RewardProperties),
   { ssr: false }
 );
-export type ProposalProps = ReturnType<typeof useProposal> & ReturnType<typeof useProposalFormAnswers>;
+export type ProposalProps = ReturnType<typeof useProposal> & {
+  proposalAnswersProps: ReturnType<typeof useProposalFormAnswers>;
+  proposalFormFieldsProps: ReturnType<typeof useProposalFormFieldsEditor>;
+};
 
 export type DocumentPageProps = {
   page: PageWithContent;
@@ -93,15 +97,8 @@
   onChangeWorkflow,
   onChangeRewardSettings,
   onChangeSelectedCredentialTemplates,
-  refreshProposalFormAnswers,
-  projectForm,
-  control,
-  formFields,
-  getFieldState,
-  onSave,
-  applyProject,
-  applyProjectMembers,
-  isLoadingAnswers
+  proposalAnswersProps,
+  proposalFormFieldsProps
 }: DocumentPageProps) {
   const { user } = useUser();
   const { router } = useCharmRouter();
@@ -201,7 +198,7 @@
         }
       }
     },
     [router.query, showCard]
   );
 
   function onConnectionEvent(event: ConnectionEvent) {
@@ -223,7 +220,7 @@
         dispatch(blockLoad({ blockId: page.parentId as string }));
       }
     }
   }, [page.id]);
 
   // reset error and sidebar state whenever page id changes
   useEffect(() => {
@@ -249,7 +246,7 @@
         printRef
       });
     }
   }, [printRef, _printRef]);
 
   const containerWidthRef = useRef<HTMLDivElement>(null);
   const { width: containerWidth = 0 } = useResizeObserver({ ref: containerWidthRef });
@@ -262,7 +259,7 @@
   const proposalAuthors = proposal ? [proposal.createdBy, ...proposal.authors.map((author) => author.userId)] : [];
   return (
     <Box id='file-drop-container' display='flex' flexDirection='column' height='100%'>
-      <FormProvider {...projectForm}>
+      <FormProvider {...proposalAnswersProps.projectForm}>
         <Box
           ref={printRef}
           className={`document-print-container ${fontClassName} drag-area-container`}
@@ -394,7 +391,7 @@
                   onChangeEvaluation={onChangeEvaluation}
                   onChangeTemplate={onChangeTemplate}
                   refreshProposal={refreshProposal}
-                  refreshProposalFormAnswers={refreshProposalFormAnswers}
+                  refreshProposalFormAnswers={proposalAnswersProps.refreshProposalFormAnswers}
                   onChangeWorkflow={onChangeWorkflow}
                   onChangeSelectedCredentialTemplates={onChangeSelectedCredentialTemplates}
                 />
@@ -458,15 +455,13 @@
                 </CardPropertiesWrapper>
                 {proposal && proposal.formId ? (
                   page.type === 'proposal_template' ? (
-                    <FormFieldsEditor
-                      readOnly={(!isAdmin && (!user || !proposalAuthors.includes(user.id))) || !!proposal?.archived}
-                      proposalId={proposal.id}
+                    <ControlledFormFieldsEditor
+                      {...proposalFormFieldsProps}
                       evaluations={proposal.evaluations}
-                      expandFieldsByDefault={proposal.status === 'draft'}
-                      formFields={proposal.form?.formFields ?? []}
+                      readOnly={(!isAdmin && (!user || !proposalAuthors.includes(user.id))) || !!proposal?.archived}
                     />
                   ) : (
-                    <LoadingComponent isLoading={isLoadingAnswers}>
+                    <LoadingComponent isLoading={proposalAnswersProps.isLoadingAnswers}>
                       <FormFieldAnswers
                         milestoneProps={{
                           containerWidth,
@@ -494,7 +489,7 @@
                                 })
                               });
                             }
-                            refreshProposalFormAnswers();
+                            proposalAnswersProps.refreshProposalFormAnswers();
                           },
                           onDelete: (draftId: string) => {
                             onChangeRewardSettings({
@@ -504,21 +499,16 @@
                             });
                           }
                         }}
-                        control={control}
+                        {...proposalAnswersProps}
                         disabled={!proposal.permissions.edit}
                         enableComments={proposal.permissions.comment}
-                        formFields={formFields}
-                        getFieldState={getFieldState}
-                        onSave={onSave}
                         pageId={page.id}
                         isAuthor={proposalAuthors.includes(user?.id || '')}
                         threads={threads}
                         // This is required to reinstate the form field state after the proposal is published, necessary to show the correct project id
                         key={proposal?.status === 'draft' ? 'draft' : 'published'}
                         projectId={proposal.projectId}
                         proposalId={proposal.id}
-                        applyProject={applyProject}
-                        applyProjectMembers={applyProjectMembers}
                       />
                     </LoadingComponent>
                   )
@@ -571,7 +561,8 @@
           <ProposalStickyFooter
             page={page}
             proposal={proposal}
-            formAnswersControl={control}
+            formAnswersControl={proposalAnswersProps.control}
+            formFields={proposalFormFieldsProps.formFields}
             isStructuredProposal={isStructuredProposal}
           />
         )}

components/[pageId]/DocumentPage/DocumentPageWithSidebars.tsx

@@ -3,6 +3,7 @@
 
 import type { PageSidebarView } from 'components/[pageId]/DocumentPage/hooks/usePageSidebar';
 import { useProposalFormAnswers } from 'components/proposals/hooks/useProposalFormAnswers';
+import { useProposalFormFieldsEditor } from 'components/proposals/hooks/useProposalFormFieldsEditor';
 import { useCharmEditor } from 'hooks/useCharmEditor';
 import { useCharmRouter } from 'hooks/useCharmRouter';
 import { useMdScreen } from 'hooks/useMediaScreens';
@@ -52,6 +53,12 @@
   const proposalAnswersProps = useProposalFormAnswers({
     proposal
   });
+  const proposalFormFieldsProps = useProposalFormFieldsEditor({
+    proposalId,
+    formFields: proposal?.form?.formFields || undefined,
+    readOnly: props.readOnly ?? false,
+    expandFieldsByDefault: proposal?.status === 'draft'
+  });
 
   const { onChangeRewardWorkflow, reward, updateReward, refreshReward } = useReward({
     rewardId
@@ -73,7 +80,7 @@
     if (threadsPageId !== page.id) {
       closeSidebar();
     }
   }, [page.id, threadsPageId]);
 
   // show page sidebar by default if there are comments or votes
   useEffect(() => {
@@ -99,7 +106,7 @@
         return setActiveView('comments');
       }
     }
   }, [isLoadingThreads, page.id, threadsPageId]);
 
   // having `internalSidebarView` allows us to have the sidebar open by default, because usePageSidebar() does not allow us to do this currently
   const [defaultSidebarView, setDefaultView] = useState<PageSidebarView | null>(
@@ -114,15 +121,16 @@
       // clear sidebar so we can show left sidebar
       setActiveView(null);
     };
   }, []);
 
   return (
     <DocumentColumnLayout data-test='document-page'>
       <DocumentColumn>
         <DocumentPage
           {...props}
-          {...proposalAnswersProps}
           {...proposalProps}
+          proposalAnswersProps={proposalAnswersProps}
+          proposalFormFieldsProps={proposalFormFieldsProps}
           setEditorState={setEditorState}
           setSidebarView={setActiveView}
           sidebarView={internalSidebarView}

components/common/PageDialog/PageDialog.tsx

@@ -14,6 +14,7 @@
 import { Button } from 'components/common/Button';
 import Dialog from 'components/common/DatabaseEditor/components/dialog';
 import { useProposalFormAnswers } from 'components/proposals/hooks/useProposalFormAnswers';
+import { useProposalFormFieldsEditor } from 'components/proposals/hooks/useProposalFormFieldsEditor';
 import { useCharmEditor } from 'hooks/useCharmEditor';
 import { useCurrentPage } from 'hooks/useCurrentPage';
 import { useCurrentSpace } from 'hooks/useCurrentSpace';
@@ -51,6 +52,12 @@
   const proposalAnswersProps = useProposalFormAnswers({
     proposal: proposalProps.proposal
   });
+  const proposalFormFieldsProps = useProposalFormFieldsEditor({
+    proposalId: page?.proposalId,
+    formFields: proposalProps.proposal?.form?.formFields || undefined,
+    readOnly: props.readOnly ?? false,
+    expandFieldsByDefault: proposalProps.proposal?.status === 'draft'
+  });
 
   const pagePermissions = page?.permissionFlags || new AvailablePagePermissions().full;
   const fullPageUrl = page?.path ? `/${page?.path}` : null;
@@ -72,7 +79,7 @@
     if (contentType) {
       popupState.open();
     }
   }, [!!contentType]);
 
   useEffect(() => {
     if (page?.id && space) {
@@ -91,7 +98,7 @@
         });
       }
     }
   }, [page?.id, space?.customDomain]);
 
   function close() {
     popupState.close();
@@ -102,7 +109,7 @@
     if (contentType === null && popupState.isOpen) {
       close();
     }
   }, [contentType, popupState.isOpen]);
 
   useEffect(() => {
     if (page?.id) {
@@ -189,7 +196,8 @@
           savePage={savePage}
           readOnly={readOnlyPage}
           {...proposalProps}
-          {...proposalAnswersProps}
+          proposalAnswersProps={proposalAnswersProps}
+          proposalFormFieldsProps={proposalFormFieldsProps}
         />
       )}
     </Dialog>

components/common/form/FormField.tsx

@@ -104,6 +104,7 @@ function ExpandedFormField({
   const { space } = useCurrentSpace();
 
   const formFieldType = formField.type;
+
   const filteredFormFieldTypes = useMemo(() => {
     if (!formFieldTypeFrequencyCount) {
       return formFieldTypes.filter((_formFieldType) => {
@@ -284,13 +285,14 @@ function ExpandedFormField({
 
       {evaluations.length > 0 && (
         <FieldWrapper label='Workflow step'>
-          <Select<number | null>
+          <Select<string | null>
             data-test='form-field-dependency-select'
             displayEmpty
-            value={formField.dependsOnStepIndex}
-            onChange={(e, value) => {
+            // use a string instead of number, MUI shows the number 0 as selected when the value is null for some reason
+            value={typeof formField.dependsOnStepIndex === 'number' ? `${formField.dependsOnStepIndex}` : null}
+            onChange={(e) => {
               updateFormField({
-                dependsOnStepIndex: e.target.value as number,
+                dependsOnStepIndex: parseInt(e.target.value!),
                 id: formField.id
               });
             }}
@@ -299,7 +301,7 @@ function ExpandedFormField({
             }}
             variant='outlined'
             IconComponent={
-              formField.dependsOnStepIndex
+              formField.dependsOnStepIndex !== null
                 ? // eslint-disable-next-line react/no-unstable-nested-components
                   () => (
                     <IconButton
@@ -326,12 +328,16 @@ function ExpandedFormField({
                   </Typography>
                 );
               }
-              return evaluations[value]?.title;
+              return evaluations[parseInt(value)]?.title;
             }}
           >
             {evaluations.map((evaluation, index) => {
               return (
-                <MenuItem data-test={`form-field-dependency-option-${evaluation.id}`} key={evaluation.id} value={index}>
+                <MenuItem
+                  data-test={`form-field-dependency-option-${evaluation.id}`}
+                  key={evaluation.id}
+                  value={`${index}`}
+                >
                   <Stack flexDirection='row' gap={1} alignItems='center'>
                     {index + 1}. {evaluation.title}
                   </Stack>

components/common/form/FormFieldsEditor.tsx

@@ -2,68 +2,23 @@ import type { FormFieldType } from '@charmverse/core/prisma-client';
 import AddIcon from '@mui/icons-material/Add';
 import { Stack } from '@mui/material';
 import type { SelectOptionType, FormFieldInput } from '@root/lib/proposals/forms/interfaces';
-import debounce from 'lodash/debounce';
-import { useRef, useEffect, useState, useMemo } from 'react';
+import { useRef, useEffect } from 'react';
 import { v4 } from 'uuid';
 
-import { useUpdateProposalFormFields } from 'charmClient/hooks/proposals';
 import { emptyDocument } from 'lib/prosemirror/constants';
 
 import { Button } from '../Button';
 
 import { FormField } from './FormField';
 
-export function FormFieldsEditor({
-  proposalId,
-  evaluations,
-  expandFieldsByDefault,
-  formFields: initialFormFields,
-  readOnly
-}: {
-  proposalId: string;
-  evaluations: { id: string; title: string }[];
-  expandFieldsByDefault?: boolean;
+export type ControlledFormFieldsEditorProps = {
   formFields: FormFieldInput[];
-  readOnly?: boolean;
-}) {
-  const [formFields, setFormFields] = useState([...initialFormFields]);
-  const [collapsedFieldIds, setCollapsedFieldIds] = useState<string[]>(
-    expandFieldsByDefault ? [] : formFields.map((field) => field.id)
-  );
-  const { trigger } = useUpdateProposalFormFields({ proposalId });
-  const debouncedUpdate = useMemo(() => {
-    return debounce(trigger, 200);
-  }, [trigger]);
-
-  async function updateFormFields(_formFields: FormFieldInput[]) {
-    if (readOnly) {
-      return;
-    }
-    setFormFields(_formFields);
-    try {
-      await debouncedUpdate({ formFields: _formFields });
-    } catch (error) {
-      // dont show error modal, the UI should show red borders now instead
-    }
-  }
-
-  return (
-    <ControlledFormFieldsEditor
-      collapsedFieldIds={collapsedFieldIds}
-      formFields={formFields}
-      setFormFields={updateFormFields}
-      evaluations={evaluations}
-      toggleCollapse={(fieldId) => {
-        if (collapsedFieldIds.includes(fieldId)) {
-          setCollapsedFieldIds(collapsedFieldIds.filter((id) => id !== fieldId));
-        } else {
-          setCollapsedFieldIds([...collapsedFieldIds, fieldId]);
-        }
-      }}
-      readOnly={readOnly}
-    />
-  );
-}
+  setFormFields: (formFields: FormFieldInput[]) => void;
+  collapsedFieldIds: string[];
+  toggleCollapse: (fieldId: string) => void;
+  evaluations: { id: string; title: string }[];
+  readOnly: boolean;
+};
 
 export function ControlledFormFieldsEditor({
   formFields,
@@ -72,14 +27,7 @@ export function ControlledFormFieldsEditor({
   toggleCollapse,
   evaluations,
   readOnly
-}: {
-  formFields: FormFieldInput[];
-  setFormFields: (updatedFormFields: FormFieldInput[]) => void;
-  collapsedFieldIds: string[];
-  toggleCollapse: (fieldId: string) => void;
-  evaluations: { id: string; title: string }[];
-  readOnly?: boolean;
-}) {
+}: ControlledFormFieldsEditorProps) {
   // Using a ref to keep the formFields state updated, since it becomes stale inside the functions
   const formFieldsRef = useRef(formFields);
   const lastInsertedIndexRef = useRef<number | undefined>(undefined);

components/proposals/ProposalPage/components/ProposalStickyFooter/ProposalStickyFooter.tsx

@@ -1,6 +1,6 @@
 import type { PageType } from '@charmverse/core/prisma';
 import { Box } from '@mui/material';
-import type { FormFieldValue } from '@root/lib/proposals/forms/interfaces';
+import type { FormFieldValue, FormFieldInput, TypedFormField } from '@root/lib/proposals/forms/interfaces';
 import type { Control } from 'react-hook-form';
 import { useFormContext, useFormState, useWatch } from 'react-hook-form';
 
@@ -18,11 +18,13 @@ import type { ProposalWithUsersAndRubric } from 'lib/proposals/interfaces';
 export function ProposalStickyFooter({
   proposal,
   formAnswersControl,
+  formFields: allFormFields,
   page,
   isStructuredProposal
 }: {
   proposal: ProposalWithUsersAndRubric;
   formAnswersControl: Control<Record<string, FormFieldValue>, any>;
+  formFields?: FormFieldInput[];
   page: { title: string; hasContent?: boolean; sourceTemplateId: string | null; type: PageType };
   isStructuredProposal: boolean;
 }) {
@@ -49,9 +51,11 @@ export function ProposalStickyFooter({
   const projectProfileField = proposal?.form?.formFields?.find((field) => field.type === 'project_profile');
   const formFields =
     page.type === 'proposal_template'
-      ? proposal.form?.formFields
-      : proposal.form?.formFields?.filter(
-          (field) => !field.isHiddenByDependency && (field.type === 'project_profile' || field.type === 'milestone')
+      ? allFormFields
+      : allFormFields?.filter(
+          (field) =>
+            !(field as TypedFormField).isHiddenByDependency &&
+            (field.type === 'project_profile' || field.type === 'milestone')
         );
   const projectProfileAnswer = projectProfileField ? answerFormValues[projectProfileField.id] : null;