feature/deseng671: Made small revisions as per PR comments. Removed t…

…est WidgetPicker component from authoring tab, due to unit tests failing.

met-web/src/components/engagement/admin/create/authoring/AuthoringBottomNav.tsx

@@ -144,15 +144,18 @@ const LanguageSelector = ({
     const handleSelectChange = (event: SelectChangeEvent<string>) => {
         const newLanguageCode = event.target.value;
         if (isDirty && !isSubmitting)
-            // todo: Replace this message with our stylized modal message.
-            window.confirm(
-                `Are you sure you want to switch to ${
-                    getLanguageValue(newLanguageCode, languages) || 'another language'
-                }? You have unsaved changes for the ${
-                    getLanguageValue(currentLanguage, languages) || 'current'
-                } language.`,
-            );
-        setCurrentLanguage(newLanguageCode);
+            if (
+                window.confirm(
+                    `Are you sure you want to switch to ${
+                        getLanguageValue(newLanguageCode, languages) || 'another language'
+                    }? You have unsaved changes for the ${
+                        getLanguageValue(currentLanguage, languages) || 'current'
+                    } language.`,
+                )
+            ) {
+                // todo: Replace this message with our stylized modal message.
+                setCurrentLanguage(newLanguageCode);
+            }
     };
     return (
         <Select

met-web/src/components/engagement/admin/create/authoring/AuthoringContext.tsx

@@ -24,7 +24,7 @@ export interface EngagementUpdateData {
     request_type: string;
     text_content: string;
     json_content: string;
-    editor_state: EditorState;
+    summary_editor_state: EditorState;
 }
 
 export const defaultValuesObject = {
@@ -47,7 +47,7 @@ export const defaultValuesObject = {
     request_type: '',
     text_content: '',
     json_content: '{ blocks: [], entityMap: {} }',
-    editor_state: EditorState.createEmpty(),
+    summary_editor_state: EditorState.createEmpty(),
 };
 
 export const AuthoringContext = () => {

met-web/src/components/engagement/admin/create/authoring/AuthoringSummary.tsx

@@ -28,22 +28,18 @@ const AuthoringSummary = () => {
     // Check if the form has succeeded or failed after a submit, and issue a message to the user.
     const dispatch = useAppDispatch();
     useEffect(() => {
-        if ('success' === fetcher.data) {
+        if ('success' === fetcher.data || 'failure' === fetcher.data) {
+            const responseText =
+                'success' === fetcher.data ? 'Engagement saved successfully.' : 'Unable to save engagement.';
+            const responseSeverity = 'success' === fetcher.data ? 'success' : 'error';
             dispatch(
                 openNotification({
-                    severity: 'success',
-                    text: 'Engagement saved successfully.',
-                }),
-            );
-        } else if ('failure' === fetcher.data) {
-            dispatch(
-                openNotification({
-                    severity: 'error',
-                    text: 'Unable to save engagement.',
+                    severity: responseSeverity,
+                    text: responseText,
                 }),
             );
+            fetcher.data = undefined;
         }
-        fetcher.data = undefined;
     }, [fetcher.data]);
 
     const { content } = useRouteLoaderData('authoring-loader') as {
@@ -58,15 +54,15 @@ const AuthoringSummary = () => {
             setValue('content_id', Number(content[0].id));
             setValue('title', content[0].title);
             setValue('text_content', content[0].text_content);
+            // Make sure it's valid JSON.
             if (tryParse(content[0].json_content)) {
-                // Make sure it's valid JSON.
                 setValue('json_content', content[0].json_content);
             }
             setDefaultValues(getValues()); // Update default values so that our loaded values are default.
         });
     }, [content]);
 
-    //Define the styles
+    // Define the styles
     const metBigLabelStyles = {
         fontSize: '1.05rem',
         marginBottom: '0.7rem',
@@ -126,7 +122,7 @@ const AuthoringSummary = () => {
         return newEditorState;
     };
 
-    // Determines whether a string is JSON parseable.
+    // Determines whether a string is JSON parseable and returns the JSON if it is.
     const tryParse = (json: string) => {
         try {
             const object = JSON.parse(json);
@@ -174,31 +170,28 @@ const AuthoringSummary = () => {
             </Grid>
 
             <Grid sx={{ ...formItemContainerStyles, backgroundColor: colors.surface.blue[10] }} item>
-                <label htmlFor="editor_state">
+                <label htmlFor="summary_editor_state">
                     <MetBigLabel style={metBigLabelStyles} role="document" tab-index="0">
                         Body Copy
                         <span style={{ fontWeight: 'normal' }}> (Required)</span>
                     </MetBigLabel>
                     <FormDescriptionText style={formDescriptionTextStyles}>
-                        Your section heading should be descriptive, short and succinct.
+                        Body copy for the summary section of your engagement should provide a short overview of what
+                        your engagement is about and describe what you are asking your audience to do.
                     </FormDescriptionText>
                     <Suspense>
                         <Await resolve={content}>
                             {(content) => (
                                 <Controller
                                     control={control}
-                                    name="editor_state"
+                                    name="summary_editor_state"
                                     rules={{ required: true }}
                                     render={({ field }) => {
                                         return (
                                             <RichTextArea
-                                                ariaLabel="Body Copy: Your section heading should be descriptive, short and succinct."
+                                                ariaLabel="Body Copy: Body copy for the summary section of your engagement should provide a short overview of what your engagement is about and describe what you are asking your audience to do."
                                                 spellCheck
-                                                initialContentState={
-                                                    tryParse(content[0].json_content)
-                                                        ? JSON.parse(content[0].json_content)
-                                                        : ''
-                                                }
+                                                initialContentState={tryParse(content[0].json_content) || ''}
                                                 onEditorStateChange={(value) => {
                                                     field.onChange(handleEditorChange(value));
                                                 }}

met-web/src/components/engagement/admin/create/authoring/AuthoringTemplate.tsx

@@ -19,6 +19,7 @@ import { SystemMessage } from 'components/common/Layout/SystemMessage';
 import { getEditorStateFromRaw } from 'components/common/RichTextEditor/utils';
 import { When } from 'react-if';
 import WidgetPicker from '../widgets';
+import { WidgetLocation } from 'models/widget';
 
 export const StatusLabel = ({ text, completed }: StatusLabelProps) => {
     const statusLabelStyle = {
@@ -208,7 +209,7 @@ const AuthoringTemplate = () => {
 
             <When condition={'summary' === slug}>
                 <Grid container sx={{ maxWidth: '700px', mt: '1rem' }} direction="column">
-                    <WidgetPicker location={1} />
+                    <WidgetPicker location={WidgetLocation.Summary} />
                 </Grid>
             </When>
         </ResponsiveContainer>

met-web/src/components/engagement/admin/view/AuthoringTab.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { AuthoringValue, AuthoringButtonProps, StatusCircleProps } from './types';
-import { BodyText, Header2 } from 'components/common/Typography';
+import { Header2 } from 'components/common/Typography';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faArrowRightLong } from '@fortawesome/pro-light-svg-icons';
 import { faCheck } from '@fortawesome/pro-solid-svg-icons';
@@ -10,9 +10,6 @@ import { Unless, When } from 'react-if';
 import { Grid } from '@mui/material';
 import { colors } from 'styles/Theme';
 import { Link } from 'components/common/Navigation';
-import { WidgetLocation } from 'models/widget';
-import WidgetPicker from '../create/widgets';
-import { OutlineBox } from 'components/common/Layout';
 import { getDefaultAuthoringTabValues } from './AuthoringTabElements';
 
 export const StatusCircle = (props: StatusCircleProps) => {
@@ -179,14 +176,6 @@ export const AuthoringTab = () => {
                     ))}
                 </Grid>
             </Grid>
-            <Grid item>
-                <BodyText mb={1} bold>
-                    Widget Configuration (temporary location)
-                </BodyText>
-                <OutlineBox>
-                    <WidgetPicker location={WidgetLocation.engagementAuthoring} />
-                </OutlineBox>
-            </Grid>
         </Grid>
     );
 };