feature/dep315: Modified app layout, added new landing components, refactored landing components, other misc fixes. (#2891)

* feature/dep315: Modified app layout, added new landing components, refactored landing components, other misc fixes.

* feature/dep315: Fixed indentation in changelog.

* feature/dep315: Refactored filters and got them working, switched landing area to context data, updated landing design, other small fixes.

* feature/dep315: Fixed api linting errors, fixed failing web unit test.

* feature/dep315: Fixed outdated import in authoring subscribe section.

* feature/dep315: Sonar cube optimizations and removal of console.log() instances.

Author: jareth-whitney

CHANGELOG.MD

@@ -1,3 +1,19 @@
+## Jul 7, 2026
+
+- **Feature** Integrated new landing hero section and introduction [🎟️ DEP-315](https://citz-gdx.atlassian.net/browse/DEP-315)
+  - Refactored existing landing code for structural simplicity
+  - Created a reusable container/section block that can be reused anywhere
+  - Added params to URL for future filter updating (can be decoupled easily if not desired)
+  - Implemented UX designs (mobile and desktop)
+  - Removed app's square box that appears at bigger viewports
+  - Ensured that other layouts were not negatively affected by change (admin, admin landing preview, admin engagement preview)
+    - Added constrained option for internal header component as an optional boolean prop
+- Fixed: Engagement preview was looking for route loader address that didn't exist
+- Fixed: Slug was not being populated with SuggestedEngagementAttachment, so Suggested Engagement links were not working
+- Fixed: Small typo in security response headers of API
+- Fixed: Console error for authoring section details tabs, selection/list mismatch
+- Enhanced: Notification banner now supports multiple lines for mobile (or long messages, if needed in the future)
+
 ## June 23, 2026
 
 - **Feature** Imported CHEFS components into DEP [🎟️ DEP-275](https://citz-gdx.atlassian.net/browse/DEP-275)

api/src/api/__init__.py

@@ -57,9 +57,9 @@ def _deprecated_print(*args, **kwargs):
 csp = (
     secure.ContentSecurityPolicy()
     .default_src("'self'")
-    .script_src("'self' 'unsafe-inline'")
-    .style_src("'self' 'unsafe-inline'")
-    .img_src("'self' data:")
+    .script_src("'self'", "'unsafe-inline'")
+    .style_src("'self'", "'unsafe-inline'")
+    .img_src("'self'", "'data:'")
     .object_src("'self'")
     .connect_src("'self'")
 )

api/src/api/models/engagement.py

@@ -296,9 +296,18 @@ def _filter_by_engagement_status(query, search_options):
             status_filter.append(
                 and_(
                     Engagement.status_id == Status.Published.value,
-                    Engagement.start_date <= datetime.now()
+                    Engagement.start_date <= datetime.now(),
+                    Engagement.end_date > datetime.now()
                 )
             )
+        if EngagementDisplayStatus.Closed.value in statuses:
+            status_filter.append(
+                and_(
+                    Engagement.status_id == Status.Closed.value,
+                    Engagement.end_date < datetime.now()
+                )
+            )
+
         if EngagementDisplayStatus.Unpublished.value in statuses:
             status_filter.append(Engagement.status_id ==
                                  Status.Unpublished.value)

api/src/api/schemas/suggested_engagement.py

@@ -70,6 +70,7 @@ class SuggestedEngagementAttachment(Schema):
     is_internal = fields.Bool(data_key='is_internal')
     consent_message = fields.Str(data_key='consent_message')
     sponsor_name = fields.Str(data_key='sponsor_name')
+    slug = fields.Str(data_key='slug')
 
     def get_banner_url(self, obj):
         """Return the object storage URL for the banner image."""

web/src/DocumentTitle.tsx

@@ -39,7 +39,6 @@ const DocumentTitle = () => {
         const resolveTitle = async () => {
             const crumbs = await getResolvedCrumbs(matches);
             if (cancelled) return;
-            console.log('Resolved crumbs for title:', crumbs);
             const filteredCrumbs = crumbs
                 // Exclude crumbs that are marked as index pages UNLESS they are the current page
                 .filter((crumb, index) => (crumb?.title ?? crumb?.name) && (index == 0 || !crumb?.isIndex))

web/src/components/appLayouts/PublicLayout.tsx

@@ -30,18 +30,16 @@ export const PublicLayout = () => {
         >
             <Box
                 sx={{
-                    maxWidth: '1926px',
-                    margin: '0 auto',
                     background: colors.surface.white,
                 }}
             >
                 <DocumentTitle />
                 <PageViewTracker />
                 <Notification />
                 <NotificationModal />
-                {isAuthenticated ? <InternalHeader showSideNav={false} /> : <PublicHeader />}
+                {isAuthenticated ? <InternalHeader constrained showSideNav={false} /> : <PublicHeader />}
                 <ScrollToTop />
-                <Box component="main" sx={isAuthenticated ? { marginTop: { xs: '3.5em', md: '6.5em' } } : undefined}>
+                <Box component="main" sx={{ marginTop: isAuthenticated ? '3.375em' : 0 }}>
                     <Outlet />
                 </Box>
                 <FeedbackModal />

web/src/components/engagement/admin/create/authoring/AuthoringDetails.tsx

@@ -566,7 +566,7 @@ const AuthoringDetails = () => {
             </AuthoringFormContainer>
 
             {/* Tab instructions */}
-            {currentTab && (
+            {currentTab && authoringDetailsTabs?.length > 0 && (
                 <TabContext value={currentTab}>
                     <AuthoringFormContainer rowSpacing="2rem" pt="0.5rem" isHydrating={isHydrating}>
                         {tabsEnabled && (

web/src/components/engagement/admin/create/authoring/AuthoringFeedback.tsx

@@ -14,10 +14,10 @@ import { getEditorStateFromRaw } from 'components/common/RichTextEditor/utils';
 import ConfirmModal from 'components/common/Modals/ConfirmModal';
 import { EngagementStatus } from 'constants/engagementStatus';
 import { AuthoringFormContainer, AuthoringFormSection } from './AuthoringFormLayout';
-import { tryParse } from './utils';
 import { getEngagementTranslationByCode } from 'services/engagementService';
 import { useAuthoringPageHydration } from './useAuthoringPageHydration';
 import { AppConfig } from 'config';
+import { tryParse } from 'helper';
 
 type SelectOption = { label: string; value: number };
 
@@ -56,7 +56,7 @@ const AuthoringFeedback = () => {
             ...defaultValuesObject,
             form_source: pageName,
             id: Number(loadedEngagement.id),
-            status_id: Number(loadedEngagement.id),
+            status_id: Number(loadedEngagement.status_id),
             feedback_heading: feedbackHeading || '',
             feedback_body: tryParse(feedbackBody) ? getEditorStateFromRaw(feedbackBody) || '' : '',
             selected_survey_id: loadedEngagement.surveys?.find(

web/src/components/engagement/admin/create/authoring/AuthoringSubscribe.tsx

@@ -10,10 +10,10 @@ import { useOutletContext, useParams } from 'react-router';
 import { defaultValuesObject, EngagementUpdateData } from './AuthoringContext';
 import { AuthoringFormContainer, AuthoringFormSection } from './AuthoringFormLayout';
 import { AuthoringTemplateOutletContext } from './types';
-import { tryParse } from './utils';
 import { getEngagementTranslationByCode } from 'services/engagementService';
 import { useAuthoringPageHydration } from './useAuthoringPageHydration';
 import { AppConfig } from 'config';
+import { tryParse } from 'helper';
 
 type SubscribeAuthoringData = EngagementUpdateData & {
     subscribe_section_heading: string;

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

@@ -13,10 +13,10 @@ import WidgetPicker from '../widgets';
 import { WidgetLocation } from 'models/widget';
 import { getEditorStateFromRaw } from 'components/common/RichTextEditor/utils';
 import { AuthoringFormContainer, AuthoringFormSection } from './AuthoringFormLayout';
-import { tryParse } from './utils';
 import { getEngagementTranslationByCode } from 'services/engagementService';
 import { useAuthoringPageHydration } from './useAuthoringPageHydration';
 import { AppConfig } from 'config';
+import { tryParse } from 'helper';
 
 const AuthoringSummary = () => {
     const { setDefaultValues, fetcher, pageName }: AuthoringTemplateOutletContext = useOutletContext(); // Access the form functions and values from the authoring template.