New core plugin for dynamic content rendering

[ruanyl]

Description

This PR introduced a new mechanism for rendering dynamic pages for different purpose.

Find more details about this PR from this RFC #7228

Issues Resolved

Screenshot

Testing the changes

Changelog

• feat: introduced an new plugin contentManagement for dynamic content rendering

Check List

• All tests pass
  • yarn test:jest
  • yarn test:jest_integration
• New functionality includes testing.
• New functionality has been documented.
• Update CHANGELOG.md
• Commits are signed per the DCO using --signoff

[github-actions]

❌ Empty Changelog Section

The Changelog section in your PR description is empty. Please add a valid changelog entry or entries. If you did add a changelog entry, check to make sure that it was not accidentally included inside the comment block in the Changelog section.

[codecov]

Codecov Report

Attention: Patch coverage is 79.09836% with 51 lines in your changes missing coverage. Please review.

Project coverage is 67.67%. Comparing base (6f28170) to head (53d31da).

Files	Patch %	Lines
src/plugins/content_management/public/plugin.ts	0.00%	12 Missing ⚠️
...tent_management/public/components/section_input.ts	86.76%	3 Missing and 6 partials ⚠️
...nt_management/public/components/section_render.tsx	84.37%	2 Missing and 3 partials ⚠️
...s/content_management/content_management_service.ts	80.76%	3 Missing and 2 partials ⚠️
...agement/public/services/content_management/page.ts	80.00%	1 Missing and 4 partials ⚠️
...blic/components/card_container/card_embeddable.tsx	66.66%	1 Missing and 3 partials ⚠️
...ublic/components/card_container/card_container.tsx	72.72%	1 Missing and 2 partials ⚠️
...nt/public/components/custom_content_embeddable.tsx	72.72%	1 Missing and 2 partials ⚠️
src/plugins/content_management/public/app.tsx	50.00%	1 Missing ⚠️
src/plugins/content_management/public/index.ts	50.00%	1 Missing ⚠️
... and 3 more

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #7201      +/-   ##
==========================================
+ Coverage   67.53%   67.67%   +0.14%     
==========================================
  Files        3504     3516      +12     
  Lines       69407    69544     +137     
  Branches    11324    11349      +25     
==========================================
+ Hits        46872    47067     +195     
+ Misses      19775    19692      -83     
- Partials     2760     2785      +25     

Flag	Coverage Δ
Linux_1	33.15% <25.00%> (-0.01%)	⬇️
Linux_2	55.46% <ø> (ø)
Linux_3	43.31% <80.63%> (+0.25%)	⬆️
Linux_4	34.69% <12.29%> (-0.08%)	⬇️
Windows_1	33.17% <25.00%> (-0.01%)	⬇️
Windows_2	55.41% <ø> (ø)
Windows_3	43.32% <80.63%> (+0.25%)	⬆️
Windows_4	34.69% <12.29%> (-0.08%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[github-actions]

❌ Empty Changelog Section

The Changelog section in your PR description is empty. Please add a valid changelog entry or entries. If you did add a changelog entry, check to make sure that it was not accidentally included inside the comment block in the Changelog section.

[github-actions]

❌ Empty Changelog Section

The Changelog section in your PR description is empty. Please add a valid changelog entry or entries. If you did add a changelog entry, check to make sure that it was not accidentally included inside the comment block in the Changelog section.

[ashwin-pc]

Overall no major concerns. Really good use of embeddable to simplify page building. One key callout from your original design that you missed here is the use of enums to remove the guess work from the content providers guessing the page section they want to contribute content to. i.e.

Create an enum for the content areas where the page is registered. e.g. in a file like src/plugins/home/public/content_areas.ts we could define

export const HOME_CONTENT_AREAS = {
  GET_STARTED: `${HOME_PAGE_ID}/get_started`,
  SERVICE_CARDS: `${HOME_PAGE_ID}/service_cards`,
  SOME_DASHBOARD: `${HOME_PAGE_ID}/some_dashboard`,
} as const;

export type HomeContentArea = typeof HOME_CONTENT_AREAS[keyof typeof HOME_CONTENT_AREAS];

Then make the content provider interface generic

export interface ContentProvider<T extends string = string> {
  id: string;
  getTargetArea: () => T;
  getContent: () => Content;
}

and the registration function too

registerContentProvider: <T extends string = string>(provider: ContentProvider<T>) => void;

Then when a plugin registers content, it can just use this to correctly register content to the correct area:

import { HOME_CONTENT_AREAS, HomeContentArea } from '../content_areas';

contentManagement.registerContentProvider<HomeContentArea>({
  id: 'home_get_start_1',
  getTargetArea: () => HOME_CONTENT_AREAS.GET_STARTED,
  getContent: () => ({
    // ... content definition
  }),
});

[ashwin-pc]

Cant this be in the setup method?

[ruanyl]

At setup phase, the page and the sections will be registered, so at start phase, when register contents, the page and sections can be found. But essential, we could make it so that when registering contents, it doesn't rely on the existence of page and sections. I may leave as it is util there is a need to register content at setup phase.

[ashwin-pc]

Ideally all setup should happen together. That's the benefit of the content management system. We can't move APIs around in a minor release. If we introduce it in the start phase, we can't move it to the setup phase until 3.0.

[ashwin-pc]

is this the default language?

[ruanyl]

This is the Todo part, actually this should be hooked up with the query input component on the page, but right now, there isn't a design for this, this is in the plan to improve in the future when requirement becomes clear

[ashwin-pc]

Whats an example of a card section?

[ruanyl]

Checked that the failed cypress in discover_table.spec.js is unrelated to this PR, merging now.