Add product placeholder field

src/scenes/Products/Detail/ProductDetail.graphql

@@ -24,6 +24,9 @@ fragment ProductDetail on Product {
   describeCompletion {
     value
   }
+  placeholderDescription {
+    value
+  }
   engagement {
     ...EngagementBreadcrumb
     partnershipsProducingMediums {

src/scenes/Products/Detail/ProductDetailHeader.tsx

@@ -5,7 +5,7 @@ import {
   Tooltip,
   Typography,
 } from '@material-ui/core';
-import { Edit } from '@material-ui/icons';
+import { CropFreeOutlined, Edit } from '@material-ui/icons';
 import { Skeleton } from '@material-ui/lab';
 import React from 'react';
 import { Helmet } from 'react-helmet-async';
@@ -17,10 +17,13 @@ import { Redacted } from '../../../components/Redacted';
 import { Link } from '../../../components/Routing';
 import { ProductDetailFragment as Product } from './ProductDetail.generated';
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles((theme) => ({
   nameRedacted: {
     width: '50%',
   },
+  placeholderIcon: {
+    marginLeft: theme.spacing(1),
+  },
 }));
 
 export const ProductDetailHeader = ({ product }: { product?: Product }) => {
@@ -29,6 +32,7 @@ export const ProductDetailHeader = ({ product }: { product?: Product }) => {
   const language = product?.engagement.language.value;
   const langName = language?.name.value ?? language?.displayName.value;
   const project = product?.engagement.project;
+  const placeholderDescription = product?.placeholderDescription.value;
 
   return (
     <>
@@ -54,6 +58,9 @@ export const ProductDetailHeader = ({ product }: { product?: Product }) => {
                 width="100%"
               />
             )}
+            {placeholderDescription && (
+              <CropFreeOutlined className={classes.placeholderIcon} />
+            )}
           </Typography>
         </Grid>
         <Grid item>

src/scenes/Products/Edit/EditProduct.tsx

@@ -133,6 +133,7 @@ export const EditProduct = () => {
             }
           : undefined,
         title: '',
+        placeholderDescription: product.placeholderDescription.value,
         ...(product.__typename === 'DirectScriptureProduct'
           ? {
               productType: product.__typename,

src/scenes/Products/ProductForm/PlaceholderDescriptionSection.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { TextField } from '../../../components/form';
+import { DefaultAccordion } from './DefaultAccordion';
+import { SectionProps } from './ProductFormFields';
+
+export const PlaceholderDescriptionSection = ({
+  accordionState,
+}: SectionProps) => {
+  return (
+    <DefaultAccordion
+      name="placeholderDescription"
+      {...accordionState}
+      title="Placeholder Description"
+      renderCollapsed={() => <></>}
+    >
+      <TextField
+        name="placeholderDescription"
+        label="Placeholder"
+        placeholder="Enter placeholder description"
+      />
+    </DefaultAccordion>
+  );
+};

src/scenes/Products/ProductForm/ProductForm.graphql

@@ -42,6 +42,11 @@ fragment ProductForm on Product {
     canEdit
     value
   }
+  placeholderDescription {
+    canRead
+    canEdit
+    value
+  }
   ... on DirectScriptureProduct {
     unspecifiedScripture {
       canRead

src/scenes/Products/ProductForm/ProductFormFields.tsx

@@ -9,6 +9,7 @@ import { MethodologySection } from './MethodologySection';
 import { OtherProductSection } from './OtherProductSection';
 import { PartnershipProducingMediumsSection } from './PartnershipProducingMediumsSection';
 import { EditPartnershipsProducingMediumsInfoFragment } from './PartnershipsProducingMediums.generated';
+import { PlaceholderDescriptionSection } from './PlaceholderDescriptionSection';
 import { ProductFormValues } from './ProductForm';
 import {
   ProductForm_DerivativeScriptureProduct_Fragment as DerivativeScriptureProduct,
@@ -46,6 +47,7 @@ export type SectionProps = FormProps<ProductFormValues> & {
 const sections: ReadonlyArray<ComponentType<SectionProps>> = [
   GoalsSection,
   ProductSection,
+  PlaceholderDescriptionSection,
   OtherProductSection,
   ScriptureReferencesSection,
   MediumsSection,

src/scenes/ProgressReports/Detail/ProgressReportDetail.graphql

@@ -66,4 +66,7 @@ fragment ProductInfoForProgressReport on Product {
       }
     }
   }
+  placeholderDescription {
+    value
+  }
 }