Add general configuration in report builder

the-deep · Sep 20, 2023 · 9895e34 · 9895e34
1 parent f4122f2
commit 9895e34
Show file tree

Hide file tree

Showing 11 changed files with 369 additions and 32 deletions.
diff --git a/app/components/report/ReportBuilder/MetadataEdit/index.tsx b/app/components/report/ReportBuilder/MetadataEdit/index.tsx
@@ -3,10 +3,14 @@ import { _cs } from '@togglecorp/fujs';
 import {
     Checkbox,
     TextInput,
+    NumberInput,
+    ExpandableContainer,
+    Heading,
 } from '@the-deep/deep-ui';
 import {
     type EntriesAsList,
     type Error,
+    useFormObject,
     getErrorObject,
     getErrorString,
 } from '@togglecorp/toggle-form';
@@ -17,7 +21,14 @@ import NewOrganizationMultiSelectInput, {
 
 import {
     type PartialFormType,
+    type TextContentStyleFormType,
+    type BodyStyleConfig,
+    type ImageContentStyleFormType,
+    type HeadingContentStyleFormType,
+    type ConfigType,
 } from '../../schema';
+import TextElementsStylesEdit from '../ReportContainer/TextElementsStylesEdit';
+import ContainerStylesEdit from '../ReportContainer/ContainerStylesEdit';
 import styles from './styles.css';
 
 interface Props {
@@ -45,6 +56,28 @@ function MetadataEdit(props: Props) {
 
     const error = getErrorObject(riskyError);
 
+    const onConfigChange = useFormObject<
+        'configuration', ConfigType
+    >('configuration', setFieldValue, {});
+
+    const handleBodyStyleChange = useFormObject<
+        'bodyStyle', BodyStyleConfig
+    >('bodyStyle', onConfigChange, {});
+
+    const handleTextContentStyleChange = useFormObject<
+        'textContentStyle', TextContentStyleFormType
+    >('textContentStyle', onConfigChange, {});
+
+    const handleImageContentStyleChange = useFormObject<
+        'imageContentStyle', ImageContentStyleFormType
+    >('imageContentStyle', onConfigChange, {});
+
+    const handleHeadingContentStyleChange = useFormObject<
+        'headingContentStyle', HeadingContentStyleFormType
+    >('headingContentStyle', onConfigChange, {});
+
+    const configurationError = getErrorObject(error?.configuration);
+
     return (
         <div className={_cs(className, styles.metadataEdit)}>
             <TextInput
@@ -92,6 +125,91 @@ function MetadataEdit(props: Props) {
                 // error={error?.isPublic}
                 disabled={disabled}
             />
+            <ContainerStylesEdit
+                name="containerStyle"
+                value={value?.configuration?.containerStyle}
+                error={configurationError?.containerStyle}
+                onChange={onConfigChange}
+            />
+            <ExpandableContainer
+                heading="Body"
+                headingSize="small"
+                spacing="compact"
+                contentClassName={styles.expandedBody}
+                withoutBorder
+            >
+                <NumberInput
+                    label="Gap"
+                    value={value?.configuration?.bodyStyle?.gap}
+                    error={getErrorObject(configurationError?.bodyStyle)?.gap}
+                    name="gap"
+                    onChange={handleBodyStyleChange}
+                />
+            </ExpandableContainer>
+            <ExpandableContainer
+                heading="Text"
+                headingSize="small"
+                spacing="compact"
+                contentClassName={styles.expandedBody}
+                withoutBorder
+            >
+                <TextElementsStylesEdit
+                    name="content"
+                    value={value?.configuration?.textContentStyle?.content}
+                    onChange={handleTextContentStyleChange}
+                    error={getErrorObject(configurationError?.textContentStyle)?.content}
+                />
+            </ExpandableContainer>
+            <ExpandableContainer
+                heading="Image"
+                headingSize="small"
+                spacing="compact"
+                contentClassName={styles.expandedBody}
+                withoutBorder
+            >
+                <TextElementsStylesEdit
+                    name="caption"
+                    value={value?.configuration?.imageContentStyle?.caption}
+                    onChange={handleImageContentStyleChange}
+                    error={getErrorObject(configurationError?.imageContentStyle)?.caption}
+                />
+            </ExpandableContainer>
+            <ExpandableContainer
+                heading="Heading"
+                headingSize="small"
+                spacing="compact"
+                contentClassName={styles.expandedBody}
+                withoutBorder
+            >
+                <Heading size="extraSmall">H1</Heading>
+                <TextElementsStylesEdit
+                    name="h1"
+                    value={value?.configuration?.headingContentStyle?.h1}
+                    onChange={handleHeadingContentStyleChange}
+                    error={getErrorObject(configurationError?.headingContentStyle)?.h1}
+                />
+                <Heading size="extraSmall">H2</Heading>
+                <TextElementsStylesEdit
+                    name="h2"
+                    value={value?.configuration?.headingContentStyle?.h2}
+                    onChange={handleHeadingContentStyleChange}
+                    error={getErrorObject(configurationError?.headingContentStyle)?.h2}
+                />
+                <Heading size="extraSmall">H3</Heading>
+                <TextElementsStylesEdit
+                    name="h3"
+                    value={value?.configuration?.headingContentStyle?.h3}
+                    onChange={handleHeadingContentStyleChange}
+                    error={getErrorObject(configurationError?.headingContentStyle)?.h3}
+                />
+                <Heading size="extraSmall">H4</Heading>
+                <TextElementsStylesEdit
+                    name="h4"
+                    value={value?.configuration?.headingContentStyle?.h4}
+                    onChange={handleHeadingContentStyleChange}
+                    error={getErrorObject(configurationError?.headingContentStyle)?.h4}
+                />
+            </ExpandableContainer>
         </div>
     );
 }

diff --git a/app/components/report/ReportBuilder/MetadataEdit/styles.css b/app/components/report/ReportBuilder/MetadataEdit/styles.css
@@ -2,4 +2,10 @@
     display: flex;
     flex-direction: column;
     gap: var(--dui-spacing-medium);
+
+    .expanded-body {
+        display: flex;
+        flex-direction: column;
+        gap: var(--dui-spacing-medium);
+    }
 }
diff --git a/app/components/report/ReportBuilder/ReportContainer/Content/index.tsx b/app/components/report/ReportBuilder/ReportContainer/Content/index.tsx
@@ -12,7 +12,10 @@ import {
     AnalysisReportContainerContentConfigurationType,
 } from '#generated/types';
 
-import { ContentDataType } from '../../../schema';
+import {
+    type ContentDataType,
+    type ConfigType,
+} from '../../../schema';
 import {
     resolveTextStyle,
     type ContentDataFileMap,
@@ -24,13 +27,15 @@ interface Props {
     contentType: AnalysisReportContainerContentTypeEnum;
     contentData: ContentDataType[] | undefined;
     configuration: AnalysisReportContainerContentConfigurationType | undefined;
+    generalConfiguration: ConfigType | undefined;
     contentDataToFileMap: ContentDataFileMap | undefined;
 }
 
 function Content(props: Props) {
     const {
         contentType,
         configuration: configurationFromProps = {},
+        generalConfiguration,
         contentData,
         contentDataToFileMap,
     } = props;
@@ -53,7 +58,10 @@ function Content(props: Props) {
                         styles.heading,
                         styles.headingFour,
                     )}
-                    style={resolveTextStyle(style?.content)}
+                    style={resolveTextStyle(
+                        style?.content,
+                        generalConfiguration?.headingContentStyle?.h4,
+                    )}
                 >
                     {content ?? 'Title goes here'}
                 </h4>
@@ -66,7 +74,10 @@ function Content(props: Props) {
                         styles.heading,
                         styles.headingThree,
                     )}
-                    style={resolveTextStyle(style?.content)}
+                    style={resolveTextStyle(
+                        style?.content,
+                        generalConfiguration?.headingContentStyle?.h3,
+                    )}
                 >
                     {content ?? 'Title goes here'}
                 </h3>
@@ -79,7 +90,10 @@ function Content(props: Props) {
                         styles.heading,
                         styles.headingTwo,
                     )}
-                    style={resolveTextStyle(style?.content)}
+                    style={resolveTextStyle(
+                        style?.content,
+                        generalConfiguration?.headingContentStyle?.h2,
+                    )}
                 >
                     {content ?? 'Title goes here'}
                 </h2>
@@ -91,7 +105,10 @@ function Content(props: Props) {
                     styles.heading,
                     styles.headingOne,
                 )}
-                style={resolveTextStyle(style?.content)}
+                style={resolveTextStyle(
+                    style?.content,
+                    generalConfiguration?.headingContentStyle?.h1,
+                )}
             >
                 {content ?? 'Title goes here'}
             </h1>
@@ -108,7 +125,10 @@ function Content(props: Props) {
 
         return (
             <div
-                style={resolveTextStyle(style?.content)}
+                style={resolveTextStyle(
+                    style?.content,
+                    generalConfiguration?.textContentStyle?.content,
+                )}
             >
                 <ReactMarkdown className={styles.markdown}>
                     {content ?? 'Content goes here'}
@@ -137,19 +157,34 @@ function Content(props: Props) {
     if (contentType === 'IMAGE') {
         const {
             image: {
+                caption,
                 altText,
+                style,
             } = {},
         } = configuration;
 
         const imageContentData = contentData?.[0];
 
         if (imageContentData && contentDataToFileMap) {
             return (
-                <img
-                    className={styles.image}
-                    src={contentDataToFileMap[imageContentData.clientId]?.url ?? ''}
-                    alt={altText ?? ''}
-                />
+                <div className={styles.imageContainer}>
+                    <img
+                        className={styles.image}
+                        src={contentDataToFileMap[imageContentData.clientId]?.url ?? ''}
+                        alt={altText ?? ''}
+                    />
+                    {caption && (
+                        <div
+                            className={styles.caption}
+                            style={resolveTextStyle(
+                                style?.caption,
+                                generalConfiguration?.imageContentStyle?.caption,
+                            )}
+                        >
+                            {caption}
+                        </div>
+                    )}
+                </div>
             );
         }
     }

diff --git a/app/components/report/ReportBuilder/ReportContainer/Content/styles.css b/app/components/report/ReportBuilder/ReportContainer/Content/styles.css
@@ -30,8 +30,21 @@
     height: 100%;
 }
 
-.image {
-    width: 100%;
+.image-container {
+    display: flex;
+    flex-direction: column;
     height: 100%;
-    object-fit: contain;
+    gap: var(--dui-spacing-extra-small);
+
+    .image {
+        flex-grow: 1;
+        width: 100%;
+        max-height: 100%;
+        object-fit: contain;
+    }
+
+    .caption {
+        flex-shrink: 0;
+        text-align: center;
+    }
 }
diff --git a/app/components/report/ReportBuilder/ReportContainer/index.tsx b/app/components/report/ReportBuilder/ReportContainer/index.tsx
@@ -46,6 +46,7 @@ import {
     type ReportContainerType,
     type ContentDataType,
     type ContainerStyleFormType,
+    type ConfigType,
 } from '../../schema';
 
 import ContentAddModal from './ContentAddModal';
@@ -83,6 +84,7 @@ export interface Props {
     error: Error<ReportContainerType> | undefined;
     contentType: AnalysisReportContainerContentTypeEnum | undefined;
     configuration: ContentConfigType | undefined;
+    generalConfiguration: ConfigType | undefined;
     setFieldValue: ((...entries: EntriesAsList<PartialFormType>) => void);
     contentDataToFileMap: ContentDataFileMap | undefined;
     style: ContainerStyleFormType | undefined;
@@ -114,6 +116,7 @@ function ReportContainer(props: Props) {
         contentDataToFileMap,
         setContentDataToFileMap,
         disabled,
+        generalConfiguration,
         isBeingEdited,
         onContentEditChange,
         leftContentRef,
@@ -342,7 +345,7 @@ function ReportContainer(props: Props) {
 
     const isErrored = analyzeErrors(error);
 
-    const containerStyles = resolveContainerStyle(style);
+    const containerStyles = resolveContainerStyle(style, generalConfiguration?.containerStyle);
 
     const heading = useMemo(() => {
         if (contentType !== 'HEADING') {
@@ -442,6 +445,7 @@ function ReportContainer(props: Props) {
                 <Content
                     contentType={contentType}
                     configuration={configuration}
+                    generalConfiguration={generalConfiguration}
                     contentData={contentData}
                     contentDataToFileMap={contentDataToFileMap}
                 />

diff --git a/app/components/report/ReportBuilder/ReportContainer/styles.css b/app/components/report/ReportBuilder/ReportContainer/styles.css
@@ -79,7 +79,7 @@
     */
 
     &:hover {
-        border-color: var(--dui-color-accent);
+        border-color: var(--dui-color-accent)!important;
 
         /*
         .mask {
-Original file line number
+Diff line change
@@ Expand Up / @@ -79,7 +79,7 @@ @@
         */
         &:hover {
-            border-color: var(--dui-color-accent);
+            border-color: var(--dui-color-accent)!important;
             /*
             .mask {
@@ Expand Down @@