Add AI Assisted Translation to Engagement Column and Detail Page

src/components/BooleanProperty/BooleanProperty.tsx

@@ -1,6 +1,6 @@
 import { Chip, ChipProps, Skeleton } from '@mui/material';
+import { styled } from '@mui/material/styles';
 import { ReactElement } from 'react';
-import { makeStyles } from 'tss-react/mui';
 import { Except, SetRequired } from 'type-fest';
 import { SecuredProp } from '~/common';
 import { Redacted } from '../Redacted';
@@ -11,13 +11,11 @@ export interface BooleanPropertyProps extends SetRequired<ChipProps, 'label'> {
   wrap?: (node: ReactElement) => ReactElement;
 }
 
-const useStyles = makeStyles()(({ palette, shape }) => ({
-  root: {
-    background: palette.info.main,
-    color: palette.info.contrastText,
-    borderRadius: shape.borderRadius,
-    height: 26,
-  },
+const StyledChip = styled(Chip)(({ theme }) => ({
+  background: theme.palette.info.main,
+  color: theme.palette.info.contrastText,
+  borderRadius: theme.shape.borderRadius,
+  height: 26,
 }));
 
 export const BooleanProperty = ({
@@ -26,9 +24,7 @@ export const BooleanProperty = ({
   wrap,
   ...rest
 }: BooleanPropertyProps) => {
-  const { classes } = useStyles();
-
-  const chip = <Chip {...rest} className={classes.root} />;
+  const chip = <StyledChip {...rest} />;
 
   const out = !data ? (
     <Skeleton>{chip}</Skeleton>

src/components/EngagementDataGrid/EngagementColumns.tsx

@@ -104,6 +104,17 @@ export const EngagementColumns: Array<GridColDef<Engagement>> = [
         : null,
     filterable: false,
   },
+  {
+    headerName: 'AI Assist',
+    description: 'Is using AI assistance in translation?',
+    field: 'usingAIAssistedTranslation',
+    ...booleanColumn(),
+    valueGetter: (_, row) =>
+      row.__typename === 'LanguageEngagement'
+        ? row.usingAIAssistedTranslation.value
+        : null,
+    filterable: false,
+  },
   {
     headerName: 'Type',
     field: 'project.type',

src/components/EngagementDataGrid/engagementDataGridRow.graphql

@@ -51,6 +51,7 @@ fragment engagementDataGridRow on Engagement {
     milestoneReached {
       value
     }
+    ...aiAssistedTranslation
     language {
       value {
         id

src/components/Grid/booleanColumn.tsx

@@ -1,3 +1,4 @@
+import { Check as CheckIcon, Close as CloseIcon } from '@mui/icons-material';
 import { GridColDef } from '@mui/x-data-grid';
 import { GridFilterInputBoolean } from './GridFilterInputBoolean';
 
@@ -21,4 +22,10 @@ export const booleanColumn = () =>
         InputComponent: GridFilterInputBoolean,
       },
     ],
+    renderCell: ({ value }) =>
+      value ? (
+        <CheckIcon color="success" />
+      ) : value === false ? (
+        <CloseIcon color="error" />
+      ) : null,
   } satisfies Partial<GridColDef>);

src/components/form/EnumField.tsx

@@ -158,9 +158,9 @@ export const EnumField = <
     (): Set<T> | T | null =>
       multiple
         ? new Set(input.value as readonly T[])
-        : ((input.value || defaultValue) as T | null),
+        : ((input.value ?? defaultValue) as T | null),
     // eslint-disable-next-line react-hooks/exhaustive-deps,@typescript-eslint/no-unnecessary-condition
-    [input.value ? sortBy(many(input.value ?? '')).join('') : undefined]
+    [input.value != null ? sortBy(many(input.value ?? '')).join('') : undefined]
   );
 
   const isChecked = useCallback(
@@ -169,7 +169,7 @@ export const EnumField = <
         const current = value as Set<T>;
         return optionVal ? current.has(optionVal) : current.size === 0;
       }
-      if (!optionVal || optionVal === (defaultValue as T | null)) {
+      if (optionVal == null || optionVal === (defaultValue as T | null)) {
         return value === defaultValue;
       }
       return value === optionVal;
@@ -179,7 +179,7 @@ export const EnumField = <
 
   const onOptionChange = useCallback(
     (optionVal: T | undefined, checked: boolean) => {
-      if (!optionVal) {
+      if (optionVal == null) {
         onChange(defaultValue);
         return;
       }

src/components/form/TriStateBooleanField.tsx

@@ -0,0 +1,17 @@
+import { EnumField, EnumFieldProps } from './EnumField';
+
+export type TriStateBooleanProps = Omit<
+  EnumFieldProps<string, false>,
+  'children' | 'options'
+> & {
+  options?: Array<boolean | null>;
+  getLabel?: (v: boolean | null) => string;
+};
+
+export const TriStateBooleanField = (props: TriStateBooleanProps) => (
+  <EnumField
+    options={[true, false, null] as any}
+    getLabel={(v: any) => (v ? 'Yes' : v === false ? 'No' : 'Unknown')}
+    {...props}
+  />
+);

src/components/form/index.ts

@@ -9,6 +9,7 @@ export * from './DateField';
 export * from './Dropzone';
 export * from './EmailField';
 export * from './EnumField';
+export * from './TriStateBooleanField';
 export * from './FieldGroup';
 export * from './FormattedTextField';
 export * from './NumberField';

src/scenes/Engagement/EditEngagement/EditEngagementDialog.tsx

@@ -30,6 +30,7 @@ import {
   SecuredField,
   SubmitError,
   TextField,
+  TriStateBooleanField,
 } from '../../../components/form';
 import { AutocompleteField } from '../../../components/form/AutocompleteField';
 import {
@@ -62,6 +63,7 @@ export type EditableEngagementField = ExtractStrict<
   | 'lukePartnership'
   | 'paratextRegistryId'
   | 'openToInvestorVisit'
+  | 'usingAIAssistedTranslation'
 >;
 
 interface EngagementFieldProps {
@@ -153,6 +155,9 @@ const fieldMapping: Record<
   paratextRegistryId: ({ props }) => (
     <TextField {...props} label="Paratext Registry ID" />
   ),
+  usingAIAssistedTranslation: ({ props }) => (
+    <TriStateBooleanField {...props} label="AI Assisted Translation" />
+  ),
 };
 
 interface EngagementFormValues {
@@ -222,6 +227,8 @@ export const EditEngagementDialog = ({
             firstScripture: engagement.firstScripture.value,
             paratextRegistryId: engagement.paratextRegistryId.value,
             openToInvestorVisit: engagement.openToInvestorVisit.value,
+            usingAIAssistedTranslation:
+              engagement.usingAIAssistedTranslation.value,
           }
         : {
             methodologies: engagement.methodologies.value,

src/scenes/Engagement/LanguageEngagement/AIAssistedTranslation/AIAssistedTranslation.graphql

@@ -0,0 +1,8 @@
+fragment aiAssistedTranslation on LanguageEngagement {
+  ...Id
+  usingAIAssistedTranslation {
+    canRead
+    canEdit
+    value
+  }
+}

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

@@ -99,6 +99,7 @@ export const LanguageEngagementHeader = ({
                       'firstScripture',
                       'lukePartnership',
                       'openToInvestorVisit',
+                      'usingAIAssistedTranslation',
                     ])
                   }
                 >
@@ -162,6 +163,13 @@ export const LanguageEngagementHeader = ({
             empty="Enter Paratext Registry ID"
           />
         </Grid>
+        <BooleanProperty
+          label="AI Assisted Translation"
+          redacted="You do not have permission to view whether this engagement is using AI assistance"
+          data={engagement.usingAIAssistedTranslation}
+          wrap={(node) => <Grid item>{node}</Grid>}
+          sx={{ backgroundColor: 'warning.main' }}
+        />
         <BooleanProperty
           label="First Scripture"
           redacted="You do not have permission to view whether this engagement is the first scripture for this language"

src/scenes/Engagement/LanguageEngagement/LanguageEngagementDetail.graphql

@@ -6,6 +6,7 @@ fragment LanguageEngagementDetail on LanguageEngagement {
   ...LanguageEngagementDatesForm
   ...EngagementDescription
   ...engagementMilestoneReached
+  ...aiAssistedTranslation
   ceremony {
     ...CeremonyCard
   }