Add workflow step dependency to form questions (#5143)

* add workflow step dependency to form questions

* update

* remove log

* fix types

__e2e__/proposals/proposalPassedReadonly.spec.ts

@@ -91,7 +91,8 @@ test.beforeAll(async () => {
         fieldConfig: {},
         options: [],
         index: 0,
-        private: false
+        private: false,
+        dependsOnStepIndex: null
       },
       {
         type: 'milestone',
@@ -102,7 +103,8 @@ test.beforeAll(async () => {
         required: false,
         id: uuid(),
         index: 0,
-        private: false
+        private: false,
+        dependsOnStepIndex: null
       }
     ]
   }).then(({ proposal }) => proposal.id);

__integration-tests__/server/pages/api/proposals/[id]/index.spec.ts

@@ -1,12 +1,12 @@
 import type { Space, User } from '@charmverse/core/prisma';
 import { prisma } from '@charmverse/core/prisma-client';
 import { testUtilsCredentials, testUtilsMembers, testUtilsProposals, testUtilsUser } from '@charmverse/core/test';
+import { createForm } from '@root/lib/proposals/forms/createForm';
+import type { FormFieldInput } from '@root/lib/proposals/forms/interfaces';
 import _isEqual from 'lodash/isEqual';
 import request from 'supertest';
 import { v4 as uuid } from 'uuid';
 
-import { createForm } from 'lib/forms/createForm';
-import type { FormFieldInput } from 'lib/forms/interfaces';
 import type { ProposalWithUsersAndRubric } from 'lib/proposals/interfaces';
 import type { UpdateProposalRequest } from 'lib/proposals/updateProposal';
 import { baseUrl, loginUser } from 'testing/mockApiCall';
@@ -82,7 +82,8 @@ describe('GET /api/proposals/[id] - Get proposal', () => {
         options: [],
         private: false,
         required: true,
-        fieldConfig: null
+        fieldConfig: null,
+        dependsOnStepIndex: null
       }
     ];
     const formId = await createForm(fieldsInput);

charmClient/hooks/proposals.ts

@@ -1,11 +1,11 @@
 import type { ListProposalsRequest } from '@charmverse/core/proposals';
+import type { FieldAnswerInput, FormFieldInput } from '@root/lib/proposals/forms/interfaces';
 import type { GetProposalsReviewersResponse } from '@root/lib/proposals/getProposalsReviewers';
 import type { GetUserProposalsResponse } from '@root/lib/proposals/getUserProposals';
 
 import { useCurrentSpace } from 'hooks/useCurrentSpace';
 import type { EASAttestationFromApi } from 'lib/credentials/external/getOnchainCredentials';
 import type { IssuableProposalCredentialContent } from 'lib/credentials/findIssuableProposalCredentials';
-import type { FieldAnswerInput, FormFieldInput } from 'lib/forms/interfaces';
 import type {
   ProposalBlockInput,
   ProposalBlockUpdateInput,

components/[pageId]/DocumentPage/DocumentPage.tsx

@@ -22,7 +22,7 @@ import { makeSelectSortedViews } from 'components/common/DatabaseEditor/store/vi
 import { FormFieldAnswers } from 'components/common/form/FormFieldAnswers';
 import { FormFieldsEditor } from 'components/common/form/FormFieldsEditor';
 import LoadingComponent from 'components/common/LoadingComponent';
-import { useProposalFormAnswers } from 'components/proposals/hooks/useProposalFormAnswers';
+import type { useProposalFormAnswers } from 'components/proposals/hooks/useProposalFormAnswers';
 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';
@@ -53,7 +53,7 @@ import { ProposalNotesBanner } from './components/ProposalNotesBanner';
 import { ProposalProperties } from './components/ProposalProperties';
 import { SyncedPageBanner } from './components/SyncedPageBanner';
 import type { IPageSidebarContext } from './hooks/usePageSidebar';
-import { useProposal } from './hooks/useProposal';
+import type { useProposal } from './hooks/useProposal';
 import { useReward } from './hooks/useReward';
 
 export const defaultPageTop = 56; // we need to add some room for the announcement banner and other banners
@@ -62,6 +62,8 @@ const RewardProperties = dynamic(
   () => import('components/[pageId]/DocumentPage/components/RewardProperties').then((r) => r.RewardProperties),
   { ssr: false }
 );
+export type ProposalProps = ReturnType<typeof useProposal> & ReturnType<typeof useProposalFormAnswers>;
+
 export type DocumentPageProps = {
   page: PageWithContent;
   savePage: (p: Partial<Page>) => void;
@@ -72,7 +74,7 @@ export type DocumentPageProps = {
   setSidebarView?: IPageSidebarContext['setActiveView'];
   showCard?: (cardId: string | null) => void;
   showParentChip?: boolean;
-};
+} & ProposalProps;
 
 function DocumentPageComponent({
   insideModal = false,
@@ -83,7 +85,23 @@ function DocumentPageComponent({
   sidebarView,
   setSidebarView,
   showCard,
-  showParentChip
+  showParentChip,
+  proposal,
+  refreshProposal,
+  onChangeEvaluation,
+  onChangeTemplate,
+  onChangeWorkflow,
+  onChangeRewardSettings,
+  onChangeSelectedCredentialTemplates,
+  refreshProposalFormAnswers,
+  projectForm,
+  control,
+  formFields,
+  getFieldState,
+  onSave,
+  applyProject,
+  applyProjectMembers,
+  isLoadingAnswers
 }: DocumentPageProps) {
   const { user } = useUser();
   const { router } = useCharmRouter();
@@ -99,33 +117,6 @@ function DocumentPageComponent({
   const proposalId = page.proposalId;
   const rewardId = page.bountyId;
   const { updateURLQuery, navigateToSpacePath } = useCharmRouter();
-
-  const {
-    proposal,
-    refreshProposal,
-    onChangeEvaluation,
-    onChangeTemplate,
-    onChangeWorkflow,
-    onChangeRewardSettings,
-    onChangeSelectedCredentialTemplates
-  } = useProposal({
-    proposalId
-  });
-
-  const {
-    control,
-    formFields,
-    getFieldState,
-    applyProject,
-    applyProjectMembers,
-    isLoadingAnswers,
-    projectForm,
-    onSave,
-    refreshProposalFormAnswers
-  } = useProposalFormAnswers({
-    proposal
-  });
-
   const { onChangeRewardWorkflow, reward, updateReward, refreshReward } = useReward({
     rewardId
   });
@@ -403,6 +394,7 @@ function DocumentPageComponent({
                   onChangeEvaluation={onChangeEvaluation}
                   onChangeTemplate={onChangeTemplate}
                   refreshProposal={refreshProposal}
+                  refreshProposalFormAnswers={refreshProposalFormAnswers}
                   onChangeWorkflow={onChangeWorkflow}
                   onChangeSelectedCredentialTemplates={onChangeSelectedCredentialTemplates}
                 />
@@ -469,6 +461,7 @@ function DocumentPageComponent({
                     <FormFieldsEditor
                       readOnly={(!isAdmin && (!user || !proposalAuthors.includes(user.id))) || !!proposal?.archived}
                       proposalId={proposal.id}
+                      evaluations={proposal.evaluations}
                       expandFieldsByDefault={proposal.status === 'draft'}
                       formFields={proposal.form?.formFields ?? []}
                     />

components/[pageId]/DocumentPage/DocumentPageWithSidebars.tsx

@@ -2,6 +2,7 @@ import type { EditorState } from 'prosemirror-state';
 import { memo, useEffect, useState } from 'react';
 
 import type { PageSidebarView } from 'components/[pageId]/DocumentPage/hooks/usePageSidebar';
+import { useProposalFormAnswers } from 'components/proposals/hooks/useProposalFormAnswers';
 import { useCharmEditor } from 'hooks/useCharmEditor';
 import { useCharmRouter } from 'hooks/useCharmRouter';
 import { useMdScreen } from 'hooks/useMediaScreens';
@@ -12,13 +13,13 @@ import { DocumentColumn, DocumentColumnLayout } from './components/DocumentColum
 import { PageSidebar } from './components/Sidebar/PageSidebar';
 import { ProposalSidebar } from './components/Sidebar/ProposalSidebar';
 import { RewardSidebar } from './components/Sidebar/RewardSidebar';
-import type { DocumentPageProps } from './DocumentPage';
+import type { DocumentPageProps, ProposalProps } from './DocumentPage';
 import { DocumentPage } from './DocumentPage';
 import { usePageSidebar } from './hooks/usePageSidebar';
 import { useProposal } from './hooks/useProposal';
 import { useReward } from './hooks/useReward';
 
-type DocumentPageWithSidebarsProps = DocumentPageProps & {
+type DocumentPageWithSidebarsProps = Omit<DocumentPageProps, keyof ProposalProps> & {
   readOnly?: boolean;
   insideModal?: boolean;
   refreshPage?: VoidFunction;
@@ -35,6 +36,9 @@ function DocumentPageWithSidebarsComponent(props: DocumentPageWithSidebarsProps)
   const proposalId = page.proposalId;
   const rewardId = page.bountyId;
 
+  const proposalProps = useProposal({
+    proposalId
+  });
   const {
     proposal,
     refreshProposal,
@@ -43,8 +47,10 @@ function DocumentPageWithSidebarsComponent(props: DocumentPageWithSidebarsProps)
     onChangeWorkflow,
     onChangeRewardSettings,
     onChangeSelectedCredentialTemplates
-  } = useProposal({
-    proposalId
+  } = proposalProps;
+
+  const proposalAnswersProps = useProposalFormAnswers({
+    proposal
   });
 
   const { onChangeRewardWorkflow, reward, updateReward, refreshReward } = useReward({
@@ -115,6 +121,8 @@ function DocumentPageWithSidebarsComponent(props: DocumentPageWithSidebarsProps)
       <DocumentColumn>
         <DocumentPage
           {...props}
+          {...proposalAnswersProps}
+          {...proposalProps}
           setEditorState={setEditorState}
           setSidebarView={setActiveView}
           sidebarView={internalSidebarView}
@@ -160,6 +168,7 @@ function DocumentPageWithSidebarsComponent(props: DocumentPageWithSidebarsProps)
           onChangeWorkflow={onChangeWorkflow}
           onChangeRewardSettings={onChangeRewardSettings}
           onChangeSelectedCredentialTemplates={onChangeSelectedCredentialTemplates}
+          refreshProposalFormAnswers={proposalAnswersProps.refreshProposalFormAnswers}
         />
       )}
       {(page.type === 'bounty' || page.type === 'bounty_template') && reward && (

components/[pageId]/DocumentPage/components/Sidebar/components/CommentsSidebar.tsx

@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 import MessageOutlinedIcon from '@mui/icons-material/MessageOutlined';
 import type { SelectProps } from '@mui/material';
 import { Box, InputLabel, List, MenuItem, Select, Typography } from '@mui/material';
-import type { SelectOptionType } from '@root/lib/forms/interfaces';
+import type { SelectOptionType } from '@root/lib/proposals/forms/interfaces';
 import { useRouter } from 'next/router';
 import type { ReactNode } from 'react';
 import React, { memo, useLayoutEffect, useMemo, useState } from 'react';

components/_app/components/UserOnboardingDialog.tsx

@@ -2,6 +2,7 @@ import { log } from '@charmverse/core/log';
 import type { Space } from '@charmverse/core/prisma-client';
 import { Alert } from '@mui/material';
 import type { LoggedInUser } from '@root/lib/profile/getUser';
+import type { FormFieldValue } from '@root/lib/proposals/forms/interfaces';
 import { usePopupState } from 'material-ui-popup-state/hooks';
 import { useEffect, useState } from 'react';
 
@@ -24,7 +25,6 @@ import { useCurrentSpace } from 'hooks/useCurrentSpace';
 import { useMembers } from 'hooks/useMembers';
 import { usePreventReload } from 'hooks/usePreventReload';
 import { useUser } from 'hooks/useUser';
-import type { FormFieldValue } from 'lib/forms/interfaces';
 
 import type { OnboardingStep } from '../hooks/useOnboarding';
 import { useOnboarding } from '../hooks/useOnboarding';

components/common/CharmEditor/components/file/File.tsx

@@ -1,9 +1,9 @@
 import UploadFileIcon from '@mui/icons-material/UploadFile';
 import { Box, Typography } from '@mui/material';
+import type { UploadedFileInfo } from '@root/lib/proposals/forms/interfaces';
 
 import Link from 'components/common/Link';
 import MultiTabs from 'components/common/MultiTabs';
-import type { UploadedFileInfo } from 'lib/forms/interfaces';
 import { replaceS3Domain } from 'lib/utils/url';
 
 import { BlockNodeContainer } from '../common/BlockNodeContainer';

components/common/DatabaseEditor/components/properties/OptimismProjectLink.tsx

@@ -1,10 +1,10 @@
 import styled from '@emotion/styled';
 import LaunchIcon from '@mui/icons-material/Launch';
 import { Stack } from '@mui/material';
+import type { OpProjectFieldValue } from '@root/lib/proposals/forms/interfaces';
 
 import { StyledTypography } from 'components/common/CharmEditor/components/nestedPage/components/NestedPage';
 import Link from 'components/common/Link';
-import type { OpProjectFieldValue } from 'lib/forms/interfaces';
 
 const Typography = styled(StyledTypography)`
   overflow: hidden;

components/common/DatabaseEditor/components/properties/TagSelect/TagSelect.tsx

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 import { Stack } from '@mui/material';
-import type { SelectOptionType } from '@root/lib/forms/interfaces';
+import type { SelectOptionType } from '@root/lib/proposals/forms/interfaces';
 import type { ReactNode } from 'react';
 import { useCallback, useMemo, useState } from 'react';
 

components/common/DatabaseEditor/components/properties/TagSelect/mappers.ts

@@ -1,4 +1,4 @@
-import type { SelectOptionType } from '@root/lib/forms/interfaces';
+import type { SelectOptionType } from '@root/lib/proposals/forms/interfaces';
 
 import type { IPropertyOption } from 'lib/databases/board';
 

components/common/DatabaseEditor/components/propertyValueElement.tsx

@@ -3,6 +3,7 @@ import type { ApplicationStatus, ProposalSystemRole } from '@charmverse/core/pri
 import PersonIcon from '@mui/icons-material/Person';
 import { Box, Stack } from '@mui/material';
 import Tooltip from '@mui/material/Tooltip';
+import type { OpProjectFieldValue } from '@root/lib/proposals/forms/interfaces';
 import clsx from 'clsx';
 import { useRouter } from 'next/router';
 import type { ReactElement, ReactNode } from 'react';
@@ -34,7 +35,6 @@ import {
   PROPOSAL_STEP_LABELS,
   proposalStatusColors
 } from 'lib/databases/proposalDbProperties';
-import type { OpProjectFieldValue } from 'lib/forms/interfaces';
 import { PROPOSAL_STATUS_BLOCK_ID, PROPOSAL_STEP_BLOCK_ID } from 'lib/proposals/blocks/constants';
 import type { ProposalReviewerProperty } from 'lib/proposals/blocks/interfaces';
 import { getProposalEvaluationStatus } from 'lib/proposals/getProposalEvaluationStatus';

components/common/PageDialog/PageDialog.tsx

@@ -4,15 +4,16 @@ import type { Page } from '@charmverse/core/prisma';
 import OpenInFullIcon from '@mui/icons-material/OpenInFull';
 import { Box } from '@mui/material';
 import { usePopupState } from 'material-ui-popup-state/hooks';
-import { useRouter } from 'next/router';
 import { useCallback, useEffect, useRef } from 'react';
 
 import charmClient from 'charmClient/charmClient';
 import { trackPageView } from 'charmClient/hooks/track';
 import { DocumentPage } from 'components/[pageId]/DocumentPage/DocumentPage';
 import { DocumentPageProviders } from 'components/[pageId]/DocumentPage/DocumentPageProviders';
+import { useProposal } from 'components/[pageId]/DocumentPage/hooks/useProposal';
 import { Button } from 'components/common/Button';
 import Dialog from 'components/common/DatabaseEditor/components/dialog';
+import { useProposalFormAnswers } from 'components/proposals/hooks/useProposalFormAnswers';
 import { useCharmEditor } from 'hooks/useCharmEditor';
 import { useCurrentPage } from 'hooks/useCurrentPage';
 import { useCurrentSpace } from 'hooks/useCurrentSpace';
@@ -36,13 +37,21 @@ function PageDialogBase(props: Props) {
 
   const mounted = useRef(false);
   const popupState = usePopupState({ variant: 'popover', popupId: 'page-dialog' });
-  const router = useRouter();
   const { space } = useCurrentSpace();
   const { setCurrentPageId } = useCurrentPage();
   const { editMode, resetPageProps, setPageProps } = useCharmEditor();
 
   const { updatePage } = usePages();
   const { page } = usePage({ pageIdOrPath: pageId });
+
+  const proposalProps = useProposal({
+    proposalId: page?.proposalId
+  });
+
+  const proposalAnswersProps = useProposalFormAnswers({
+    proposal: proposalProps.proposal
+  });
+
   const pagePermissions = page?.permissionFlags || new AvailablePagePermissions().full;
   const fullPageUrl = page?.path ? `/${page?.path}` : null;
 
@@ -179,6 +188,8 @@ function PageDialogBase(props: Props) {
           page={page}
           savePage={savePage}
           readOnly={readOnlyPage}
+          {...proposalProps}
+          {...proposalAnswersProps}
         />
       )}
     </Dialog>

components/common/ProjectForm/components/Optimism/OptimismProjectSelector.tsx

@@ -1,12 +1,12 @@
 import { ListItemText, MenuItem, Select, Typography } from '@mui/material';
+import type { OpProjectFieldValue } from '@root/lib/proposals/forms/interfaces';
 import { useState } from 'react';
 
 import { useCreateOptimismProject, useGetOpProject, useGetOpProjects } from 'charmClient/hooks/optimism';
 import { FieldWrapper } from 'components/common/form/fields/FieldWrapper';
 import type { ControlFieldProps, FieldProps } from 'components/common/form/interfaces';
 import { WarpcastLogin } from 'components/login/components/WarpcastLogin';
 import { useUser } from 'hooks/useUser';
-import type { OpProjectFieldValue } from 'lib/forms/interfaces';
 import type { FormValues } from 'lib/optimism/projectSchema';
 import { fancyTrim } from 'lib/utils/strings';
 

components/common/ProjectForm/components/ProjectField/ProjectFieldAnswer.tsx

@@ -1,13 +1,13 @@
 import MuiAddIcon from '@mui/icons-material/Add';
 import { Box, Divider, MenuItem, Select, Stack, Typography } from '@mui/material';
+import type { ProjectFieldValue, FormFieldValue } from '@root/lib/proposals/forms/interfaces';
 import { debounce } from 'lodash';
 import { useMemo } from 'react';
 import type { UseFormGetFieldState } from 'react-hook-form';
 
 import { useCreateProject, useGetProjects } from 'charmClient/hooks/projects';
 import { useUpdateProposal } from 'charmClient/hooks/proposals';
 import { useUser } from 'hooks/useUser';
-import type { ProjectFieldValue, FormFieldValue } from 'lib/forms/interfaces';
 import type { ProjectAndMembersFieldConfig } from 'lib/projects/formField';
 import { getDefaultProjectValues } from 'lib/projects/getDefaultProjectValues';
 import type { ProjectWithMembers } from 'lib/projects/interfaces';