diff --git a/src/scenes/Products/Detail/ProductDetail.graphql b/src/scenes/Products/Detail/ProductDetail.graphql index 5886cb7d36..49d983d886 100644 --- a/src/scenes/Products/Detail/ProductDetail.graphql +++ b/src/scenes/Products/Detail/ProductDetail.graphql @@ -24,6 +24,9 @@ fragment ProductDetail on Product { describeCompletion { value } + placeholderDescription { + value + } engagement { ...EngagementBreadcrumb partnershipsProducingMediums { diff --git a/src/scenes/Products/Detail/ProductDetailHeader.tsx b/src/scenes/Products/Detail/ProductDetailHeader.tsx index 77a82cb477..0d3c5ac485 100644 --- a/src/scenes/Products/Detail/ProductDetailHeader.tsx +++ b/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 && ( + + )} diff --git a/src/scenes/Products/Edit/EditProduct.tsx b/src/scenes/Products/Edit/EditProduct.tsx index 185c48e6fb..03cadcba73 100644 --- a/src/scenes/Products/Edit/EditProduct.tsx +++ b/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, diff --git a/src/scenes/Products/ProductForm/PlaceholderDescriptionSection.tsx b/src/scenes/Products/ProductForm/PlaceholderDescriptionSection.tsx new file mode 100644 index 0000000000..88b27e8e22 --- /dev/null +++ b/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 ( + <>} + > + + + ); +}; diff --git a/src/scenes/Products/ProductForm/ProductForm.graphql b/src/scenes/Products/ProductForm/ProductForm.graphql index a58581776f..caa90a1fe7 100644 --- a/src/scenes/Products/ProductForm/ProductForm.graphql +++ b/src/scenes/Products/ProductForm/ProductForm.graphql @@ -42,6 +42,11 @@ fragment ProductForm on Product { canEdit value } + placeholderDescription { + canRead + canEdit + value + } ... on DirectScriptureProduct { unspecifiedScripture { canRead diff --git a/src/scenes/Products/ProductForm/ProductFormFields.tsx b/src/scenes/Products/ProductForm/ProductFormFields.tsx index 34f596a7c2..3c9e4afbb4 100644 --- a/src/scenes/Products/ProductForm/ProductFormFields.tsx +++ b/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 & { const sections: ReadonlyArray> = [ GoalsSection, ProductSection, + PlaceholderDescriptionSection, OtherProductSection, ScriptureReferencesSection, MediumsSection, diff --git a/src/scenes/ProgressReports/Detail/ProgressReportDetail.graphql b/src/scenes/ProgressReports/Detail/ProgressReportDetail.graphql index f8ef737f38..87f9affb9b 100644 --- a/src/scenes/ProgressReports/Detail/ProgressReportDetail.graphql +++ b/src/scenes/ProgressReports/Detail/ProgressReportDetail.graphql @@ -66,4 +66,7 @@ fragment ProductInfoForProgressReport on Product { } } } + placeholderDescription { + value + } }