Create Rev79 Id input fields for Projects and Engagements (#1776)

API PR: SeedCompany/cord-api-v3#3666

This adds a "uses Rev79" checkbox to the Project edit for Momentum
Projects. If true, a Rev79 project id and engagement community id input
will be rendered.

Author: rdonigian

src/scenes/Engagement/EditEngagement/EditEngagementDialog.tsx

@@ -63,6 +63,7 @@ export type EditableEngagementField = ExtractStrict<
   | 'firstScripture'
   | 'lukePartnership'
   | 'paratextRegistryId'
+  | 'rev79CommunityId'
   | 'openToInvestorVisit'
   | 'usingAIAssistedTranslation'
   | 'marketable'
@@ -158,6 +159,9 @@ const fieldMapping: Record<
   paratextRegistryId: ({ props }) => (
     <TextField {...props} label="Paratext ID" />
   ),
+  rev79CommunityId: ({ props }) => (
+    <TextField {...props} label="Rev79 Community ID" />
+  ),
   usingAIAssistedTranslation: ({ props }) => (
     <EnumField
       label="AI Assisted Translation"
@@ -223,6 +227,7 @@ export const EditEngagementDialog = ({
             lukePartnership: engagement.lukePartnership.value,
             firstScripture: engagement.firstScripture.value,
             paratextRegistryId: engagement.paratextRegistryId.value,
+            rev79CommunityId: engagement.rev79CommunityId.value,
             openToInvestorVisit: engagement.openToInvestorVisit.value,
             usingAIAssistedTranslation:
               engagement.usingAIAssistedTranslation.value,

src/scenes/Engagement/LanguageEngagement/Header/LanguageEngagementHeader.graphql

@@ -41,6 +41,18 @@ fragment LanguageEngagementHeader on LanguageEngagement {
     canEdit
     value
   }
+  parent {
+    usesRev79 {
+      value
+    }
+  }
+  ... on LanguageEngagement {
+    rev79CommunityId {
+      canRead
+      canEdit
+      value
+    }
+  }
   ...EditEngagement
   ...EngagementToDelete
 }

src/scenes/Engagement/LanguageEngagement/Header/LanguageEngagementHeader.tsx

@@ -54,6 +54,7 @@ export const LanguageEngagementHeader = ({
   const language = engagement.language.value;
   const langName = language?.name.value ?? language?.displayName.value;
   const ptRegistryId = engagement.paratextRegistryId;
+  const rev79CommunityId = engagement.rev79CommunityId;
   const editable = canEditAny(engagement);
 
   return (
@@ -172,6 +173,20 @@ export const LanguageEngagementHeader = ({
             empty="Enter Paratext ID"
           />
         </Grid>
+        {engagement.parent.usesRev79.value && (
+          <Grid item>
+            <DataButton
+              onClick={() => show(['rev79CommunityId'])}
+              secured={rev79CommunityId}
+              redacted="You do not have permission to view Rev79 Community ID"
+              children={
+                rev79CommunityId.value &&
+                `Rev79 Community ID: ${rev79CommunityId.value}`
+              }
+              empty="Enter Rev79 Community ID"
+            />
+          </Grid>
+        )}
         <Grid item>
           <AIAssistanceChip
             aiAssistance={engagement.usingAIAssistedTranslation}

src/scenes/Engagement/LanguageEngagement/LanguageEngagementDetail.graphql

@@ -11,6 +11,12 @@ fragment LanguageEngagementDetail on LanguageEngagement {
   ceremony {
     ...CeremonyCard
   }
+  parent {
+    ...Id
+    name {
+      value
+    }
+  }
   products {
     # grab first page of products with engagement
     # if we'd rather wait until after engagement is loaded to start fetching this

src/scenes/Projects/Overview/ProjectOverview.graphql

@@ -95,7 +95,16 @@ fragment ProjectOverview on Project {
   workflowEvents {
     ...projectWorkflowEvent
   }
-
+  usesRev79 {
+    canRead
+    canEdit
+    value
+  }
+  rev79ProjectId {
+    canRead
+    canEdit
+    value
+  }
   # We're including this in order to update the engagement status
   # when the project step changes.
   engagements {

src/scenes/Projects/Overview/ProjectOverview.tsx

@@ -54,7 +54,7 @@ import { CreateLanguageEngagement } from '../../Engagement/LanguageEngagement/Cr
 import { DeleteProject } from '../Delete';
 import { useProjectCurrentDirectory, useUploadProjectFiles } from '../Files';
 import { ProjectListQueryVariables } from '../List/ProjectList.graphql';
-import { EditableProjectField, UpdateProjectDialog } from '../Update';
+import { ProjectFieldName, UpdateProjectDialog } from '../Update';
 import { ProjectWorkflowDialog } from '../Update/ProjectWorkflowDialog';
 import { useProjectId } from '../useProjectId';
 import { WorkflowEventsDrawer, WorkflowEventsIcon } from '../WorkflowEvents';
@@ -123,7 +123,7 @@ export const ProjectOverview = () => {
   const [workflowDrawerState, openWorkflowEvents] = useDialog();
 
   const [editState, editField, fieldsBeingEdited] =
-    useDialog<Many<EditableProjectField>>();
+    useDialog<Many<ProjectFieldName>>();
   const [workflowState, openWorkflow, workflowProject] =
     useDialog<ProjectOverviewFragment>();
 
@@ -233,7 +233,9 @@ export const ProjectOverview = () => {
               <Tooltip title="Edit Project Name">
                 <IconButton
                   aria-label="edit project name"
-                  onClick={() => editField(['name', 'departmentId'])}
+                  onClick={() =>
+                    editField(['name', 'departmentId', 'usesRev79'])
+                  }
                   loading={!project}
                 >
                   <Edit />
@@ -437,6 +439,19 @@ export const ProjectOverview = () => {
                 onClick={() => editField(['marketingLocation'])}
               />
             </Grid>
+            {project?.usesRev79.value === true && (
+              <Grid item>
+                <DataButton
+                  label="Rev79 Project ID"
+                  empty="None"
+                  loading={!project}
+                  secured={project.rev79ProjectId}
+                  redacted="You do not have permission to view Rev79 project ID"
+                  children={() => project.rev79ProjectId.value}
+                  onClick={() => editField('rev79ProjectId')}
+                />
+              </Grid>
+            )}
           </Grid>
 
           <Grid container spacing={1} alignItems="center">

src/scenes/Projects/Update/UpdateProjectDialog.tsx

@@ -14,11 +14,13 @@ import {
   DisplayLocationFragment,
   ExtractStrict,
 } from '~/common';
+import { Link } from '~/components/Routing';
 import {
   DialogForm,
   DialogFormProps,
 } from '../../../components/Dialog/DialogForm';
 import {
+  CheckboxField,
   DateField,
   EnumField,
   SecuredField,
@@ -28,7 +30,6 @@ import {
 import { LocationField } from '../../../components/form/Lookup';
 import { FieldRegionField } from '../../../components/form/Lookup/FieldRegion';
 import { FormattedDate } from '../../../components/Formatters';
-import { Link } from '../../../components/Routing';
 import {
   updateEngagementDateRanges,
   updatePartnershipsDateRanges,
@@ -47,7 +48,9 @@ export type EditableProjectField = ExtractStrict<
   | 'primaryLocation'
   | 'sensitivity'
   | 'marketingLocation'
+  | 'rev79ProjectId'
 >;
+export type ProjectFieldName = EditableProjectField | 'usesRev79';
 
 interface ProjectFieldProps {
   props: {
@@ -57,7 +60,7 @@ interface ProjectFieldProps {
 }
 
 const fieldMapping: Record<
-  EditableProjectField,
+  ProjectFieldName,
   ComponentType<ProjectFieldProps>
 > = {
   name: ({ props }) => <TextField {...props} label="Project Name" />,
@@ -82,6 +85,16 @@ const fieldMapping: Record<
   marketingLocation: ({ props }) => (
     <LocationField {...props} label="Marketing Location" />
   ),
+  rev79ProjectId: ({ props }) => (
+    <TextField {...props} label="Rev79 Project ID" />
+  ),
+  usesRev79: ({ project }) => (
+    <CheckboxField
+      name="usesRev79"
+      label="Uses Rev79"
+      disabled={!project.usesRev79.canEdit}
+    />
+  ),
   departmentId: ({ props, project }) => {
     // deviate from canEdit=false standard UX, since this is tacked onto name edit
     if (!project.departmentId.canEdit) return null;
@@ -94,6 +107,7 @@ type UpdateProjectFormValues = Merge<
   {
     primaryLocation?: DisplayLocationFragment | null;
     fieldRegion?: DisplayFieldRegionFragment | null;
+    usesRev79?: boolean;
     marketingLocation?: DisplayLocationFragment | null;
   }
 >;
@@ -103,7 +117,7 @@ type UpdateProjectDialogProps = Except<
   'onSubmit' | 'initialValues'
 > & {
   project: ProjectOverviewFragment;
-  editFields?: Many<EditableProjectField>;
+  editFields?: Many<ProjectFieldName>;
   planChangeId?: string;
 };
 
@@ -112,8 +126,8 @@ export const UpdateProjectDialog = ({
   editFields: editFieldsProp,
   ...props
 }: UpdateProjectDialogProps) => {
-  const editFields = useMemo(
-    () => many(editFieldsProp ?? []),
+  const displayFieldsArray = useMemo(
+    () => many(editFieldsProp ?? []) as ProjectFieldName[],
     [editFieldsProp]
   );
 
@@ -130,15 +144,17 @@ export const UpdateProjectDialog = ({
       sensitivity: project.sensitivity,
       marketingLocation: project.marketingLocation.value,
       departmentId: project.departmentId.value,
+      ...(project.__typename === 'MomentumTranslationProject' && {
+        rev79ProjectId: project.rev79ProjectId.value,
+        usesRev79: Boolean(project.usesRev79.value),
+      }),
     };
 
     // Filter out irrelevant initial values so they don't get added to the mutation
-    const filteredInitialValuesFields = pick(
-      fullInitialValuesFields,
-      editFields.flatMap((field) =>
-        field === 'mouRange' ? ['mouStart', 'mouEnd'] : field
-      )
+    const keys = displayFieldsArray.flatMap((field) =>
+      field === 'mouRange' ? ['mouStart', 'mouEnd'] : field
     );
+    const filteredInitialValuesFields = pick(fullInitialValuesFields, keys);
 
     return {
       id: project.id,
@@ -154,8 +170,11 @@ export const UpdateProjectDialog = ({
     project.sensitivity,
     project.marketingLocation.value,
     project.id,
-    project.departmentId,
-    editFields,
+    project.departmentId.value,
+    project.__typename,
+    project.usesRev79.value,
+    project.rev79ProjectId.value,
+    displayFieldsArray,
   ]);
 
   return (
@@ -165,7 +184,9 @@ export const UpdateProjectDialog = ({
       submitLabel="Save"
       {...props}
       // Only simple properties are changeset aware, relationships are not.
-      changesetAware={editFields.every((field) => !field.endsWith('Id'))}
+      changesetAware={displayFieldsArray.every(
+        (field) => !field.endsWith('Id')
+      )}
       initialValues={initialValues}
       validate={(values) => {
         const start = values.mouStart;
@@ -182,18 +203,28 @@ export const UpdateProjectDialog = ({
       }}
       onSubmit={async (data, form) => {
         const { dirtyFields } = form.getState();
+        const {
+          primaryLocation,
+          fieldRegion,
+          marketingLocation,
+          ...inputData
+        } = data;
+
         await updateProject({
           variables: {
             input: {
-              ...data,
+              ...inputData,
               primaryLocation: dirtyFields.primaryLocation
-                ? data.primaryLocation?.id ?? null
+                ? primaryLocation?.id ?? null
                 : undefined,
               fieldRegion: dirtyFields.fieldRegion
-                ? data.fieldRegion?.id ?? null
+                ? fieldRegion?.id ?? null
                 : undefined,
               marketingLocation: dirtyFields.marketingLocation
-                ? data.marketingLocation?.id ?? null
+                ? marketingLocation?.id ?? null
+                : undefined,
+              usesRev79: dirtyFields.usesRev79
+                ? inputData.usesRev79
                 : undefined,
               changeset: project.changeset?.id,
             },
@@ -284,11 +315,14 @@ export const UpdateProjectDialog = ({
       }}
     >
       <SubmitError />
-      {editFields.map((name) => {
+      {displayFieldsArray.map((name) => {
         const Field = fieldMapping[name];
         if (name === 'sensitivity') {
           return <Field props={{ name }} project={project} key={name} />;
         }
+        if (name === 'usesRev79') {
+          return <Field props={{ name }} project={project} key={name} />;
+        }
         return (
           <SecuredField obj={project} name={name} key={name}>
             {(props) => <Field props={props} project={project} />}