From f03ab2f3c09856a20797582e73c4d48f410309d6 Mon Sep 17 00:00:00 2001 From: Bryce Gilhome Date: Wed, 17 Jul 2024 14:03:40 +1000 Subject: [PATCH 1/3] Add 'from library' paragraph mapping. --- .../mapping/components.ts | 2 ++ .../from-library/from-library-mapping.ts | 29 +++++++++++++++++++ 2 files changed, 31 insertions(+) create mode 100644 packages/ripple-tide-landing-page/mapping/components/from-library/from-library-mapping.ts diff --git a/packages/ripple-tide-landing-page/mapping/components.ts b/packages/ripple-tide-landing-page/mapping/components.ts index f4de3299b9..a444d20681 100644 --- a/packages/ripple-tide-landing-page/mapping/components.ts +++ b/packages/ripple-tide-landing-page/mapping/components.ts @@ -1,4 +1,5 @@ import basicTextMapping from './components/basic-text/basic-text-mapping' +import fromLibraryMapping from './components/from-library/from-library-mapping' import accordionMapping from './components/accordion/accordion-mapping' import promoCardMapping from './components/promo-card/promo-card-mapping' import navigationCardMapping from './components/navigation-card/navigation-card-mapping' @@ -19,6 +20,7 @@ import openFormsMapping from './components/openforms/openforms-mapping' export default { 'paragraph--basic_text': basicTextMapping, + 'paragraph--from_library': fromLibraryMapping, 'paragraph--accordion': accordionMapping, 'paragraph--promotion_card': promoCardMapping, 'paragraph--navigation_card': navigationCardMapping, diff --git a/packages/ripple-tide-landing-page/mapping/components/from-library/from-library-mapping.ts b/packages/ripple-tide-landing-page/mapping/components/from-library/from-library-mapping.ts new file mode 100644 index 0000000000..f664c55c92 --- /dev/null +++ b/packages/ripple-tide-landing-page/mapping/components/from-library/from-library-mapping.ts @@ -0,0 +1,29 @@ +import { TideDynamicPageComponent } from '@dpc-sdp/ripple-tide-api/types' +import componentMappings from '../../components' + +export interface ITideFromLibrary { + id: string | null +} + +export const fromLibraryMapping = async ( + field, + page, + tidePageApi +): TideDynamicPageComponent => { + const paragraph = field?.field_reusable_paragraph?.paragraphs; + if (paragraph) { + return componentMappings[paragraph.type].mapping(paragraph, page, tidePageApi) + } + + console.error(`No mapping found for paragraphs library item ${id}`) +} + +export const fromLibraryIncludes = [ + 'field_landing_page_component.field_reusable_paragraph.paragraphs' +] + +export default { + includes: fromLibraryIncludes, + mapping: fromLibraryMapping, + contentTypes: ['landing_page'] +} From fd141d02cc11cf4742f990cc5da5c5798087c58a Mon Sep 17 00:00:00 2001 From: Bryce Gilhome Date: Thu, 18 Jul 2024 12:55:28 +1000 Subject: [PATCH 2/3] For any components with 'includes', handle the case where they might be nested in a reusable paragraph ('from_library' paragraph type). --- .../ripple-tide-landing-page/mapping/components.ts | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/packages/ripple-tide-landing-page/mapping/components.ts b/packages/ripple-tide-landing-page/mapping/components.ts index a444d20681..390688300b 100644 --- a/packages/ripple-tide-landing-page/mapping/components.ts +++ b/packages/ripple-tide-landing-page/mapping/components.ts @@ -18,7 +18,7 @@ import dataTableMapping from './components/data-table/data-table-mapping' import compactCardsMapping from './components/compact-cards/compact-cards-mapping' import openFormsMapping from './components/openforms/openforms-mapping' -export default { +const mappings = { 'paragraph--basic_text': basicTextMapping, 'paragraph--from_library': fromLibraryMapping, 'paragraph--accordion': accordionMapping, @@ -39,3 +39,12 @@ export default { 'paragraph--compact_card_collection': compactCardsMapping, 'paragraph--form_embed_openforms': openFormsMapping } + +// Handle reusable paragraphs in any includes so they load the referenced items. +Object.keys(mappings).forEach(k => { + if (k !== 'paragraph--from_library' && mappings[k].includes.length > 0) { + mappings[k].includes = mappings[k].includes.concat(mappings[k].includes.map(k => k.replace('field_landing_page_component.','field_landing_page_component.field_reusable_paragraph.paragraphs.'))) + } +}) + +export default mappings From 61a5655d3b9bafbf99c2126e874779987ecc7504 Mon Sep 17 00:00:00 2001 From: Jason Smith Date: Thu, 5 Sep 2024 15:01:32 +1000 Subject: [PATCH 3/3] refactor(@dpc-sdp/ripple-tide-landing-page): :recycle: add whitelist for reusable paragraph types --- .../mapping/components.ts | 26 ++++++++++++---- .../from-library/from-library-mapping.ts | 30 +++++++++++-------- packages/ripple-tide-landing-page/types.ts | 15 ++++++++++ 3 files changed, 53 insertions(+), 18 deletions(-) diff --git a/packages/ripple-tide-landing-page/mapping/components.ts b/packages/ripple-tide-landing-page/mapping/components.ts index 390688300b..0d50767aeb 100644 --- a/packages/ripple-tide-landing-page/mapping/components.ts +++ b/packages/ripple-tide-landing-page/mapping/components.ts @@ -1,3 +1,5 @@ +import { reusableParagraphTypes } from '../types' + import basicTextMapping from './components/basic-text/basic-text-mapping' import fromLibraryMapping from './components/from-library/from-library-mapping' import accordionMapping from './components/accordion/accordion-mapping' @@ -18,7 +20,13 @@ import dataTableMapping from './components/data-table/data-table-mapping' import compactCardsMapping from './components/compact-cards/compact-cards-mapping' import openFormsMapping from './components/openforms/openforms-mapping' -const mappings = { +const mappings: { + [key: string]: { + includes: string[] + mapping: Function + contentTypes: string[] + } +} = { 'paragraph--basic_text': basicTextMapping, 'paragraph--from_library': fromLibraryMapping, 'paragraph--accordion': accordionMapping, @@ -40,10 +48,18 @@ const mappings = { 'paragraph--form_embed_openforms': openFormsMapping } -// Handle reusable paragraphs in any includes so they load the referenced items. -Object.keys(mappings).forEach(k => { - if (k !== 'paragraph--from_library' && mappings[k].includes.length > 0) { - mappings[k].includes = mappings[k].includes.concat(mappings[k].includes.map(k => k.replace('field_landing_page_component.','field_landing_page_component.field_reusable_paragraph.paragraphs.'))) +// Add reusable include on whitelisted paragraph types +reusableParagraphTypes.forEach((k) => { + if (mappings[k].includes.length > 0) { + mappings[k].includes = [ + ...mappings[k].includes, + ...mappings[k].includes.map((j) => + j.replace( + 'field_landing_page_component.', + 'field_landing_page_component.field_reusable_paragraph.paragraphs.' + ) + ) + ] } }) diff --git a/packages/ripple-tide-landing-page/mapping/components/from-library/from-library-mapping.ts b/packages/ripple-tide-landing-page/mapping/components/from-library/from-library-mapping.ts index f664c55c92..49edea6ce8 100644 --- a/packages/ripple-tide-landing-page/mapping/components/from-library/from-library-mapping.ts +++ b/packages/ripple-tide-landing-page/mapping/components/from-library/from-library-mapping.ts @@ -1,26 +1,30 @@ import { TideDynamicPageComponent } from '@dpc-sdp/ripple-tide-api/types' import componentMappings from '../../components' +import { reusableParagraphTypes } from '../../../types' -export interface ITideFromLibrary { +interface TideFromLibrary { id: string | null + type: string } -export const fromLibraryMapping = async ( - field, - page, - tidePageApi -): TideDynamicPageComponent => { - const paragraph = field?.field_reusable_paragraph?.paragraphs; - if (paragraph) { - return componentMappings[paragraph.type].mapping(paragraph, page, tidePageApi) +export const fromLibraryMapping = ( + field: { field_reusable_paragraph: { paragraphs: TideFromLibrary } }, + page: any, + tidePageApi: any +): TideDynamicPageComponent => { + const paragraph = field?.field_reusable_paragraph?.paragraphs + if (paragraph && reusableParagraphTypes.includes(paragraph.type)) { + return componentMappings[paragraph.type].mapping( + paragraph, + page, + tidePageApi + ) } - console.error(`No mapping found for paragraphs library item ${id}`) + console.error(`No mapping found for paragraphs library item ${field?.id}`) } -export const fromLibraryIncludes = [ - 'field_landing_page_component.field_reusable_paragraph.paragraphs' -] +export const fromLibraryIncludes = [] export default { includes: fromLibraryIncludes, diff --git a/packages/ripple-tide-landing-page/types.ts b/packages/ripple-tide-landing-page/types.ts index 367f4cc562..7c4eb8b71c 100644 --- a/packages/ripple-tide-landing-page/types.ts +++ b/packages/ripple-tide-landing-page/types.ts @@ -28,3 +28,18 @@ export interface TideLandingPagePage extends TidePageBase { * @description Background body colour */ } + +// Whitelist reusable paragraph types +export const reusableParagraphTypes = [ + 'paragraph--basic_text', + 'paragraph--from_library', + 'paragraph--accordion', + 'paragraph--promotion_card', + 'paragraph--navigation_card', + 'paragraph--statistics_grid', + 'paragraph--timelines', + 'paragraph--call_to_action', + 'paragraph--card_carousel', + 'paragraph--complex_image', + 'paragraph--data_table' +]