feat(app): dynamic Techdocs addons

[dzemanov]

Description

This change adds support for dynamically loading Techdocs Addons. It creates a wrapper for techdocs-module-addons-contrib which contains techdocs extensions:

• LightBox
• ReportIssue
• TextSize
• ExpandableNavigation

A plugin can export a Techdocs extension like:

export const TextSize = techdocsModuleAddonsContribPlugin.provide(
  createTechDocsAddonExtension({
    name: 'TextSize',
    location: TechDocsAddonLocations.Settings,
    component: TextSizeAddon,
  }),
);

Use new configuration option:

frontend:
  backstage.plugin-techdocs-module-addons-contrib:
    techdocsAddons:
      - importName: TextSize

Which issue(s) does this PR fix

• Fixes RHIDP-5499

PR acceptance criteria

Please make sure that the following steps are complete:

• GitHub Actions are completed and successful
• Unit Tests are updated and passing
• E2E Tests are updated and passing
• Documentation is updated if necessary (requirement for new features)
• Add a screenshot if the change is UX/UI related

How to test changes / Special notes to the reviewer

You can add to app-config.yaml this config:

  backstage.plugin-techdocs-module-addons-contrib:
    techdocsFieldExtensions:
      - importName: TextSize
      - importName: LightBox
      - importName: ReportIssue
      - importName: ExpandableNavigation

2025-01-24.12-39-47.mp4

[openshift-ci]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by:
Once this PR has been reviewed and has the lgtm label, please assign gustavolira for approval. For more information see the Code Review Process.

The full list of commands accepted by this bot can be found here.

Needs approval from an approver in each of these files:

• OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[github-actions]

The image is available at:

• quay.io/rhdh-community/rhdh:pr-2238 or
• quay.io/rhdh-community/rhdh:pr-2238-ebd44916

[github-actions]

The image is available at:

• quay.io/rhdh-community/rhdh:pr-2238 or
• quay.io/rhdh-community/rhdh:pr-2238-699a3b78

[github-actions]

The image is available at:

• quay.io/rhdh-community/rhdh:pr-2238 or
• quay.io/rhdh-community/rhdh:pr-2238-983ffe8f

[dzemanov]

/cc @gashcrumb can you take a look if this approach is alright? There is a bug with ReportIssue and maybe ExpandableNavigation but otherwise addons should work correctly. TextSize addon adds settings at the docs top which can change the size of text, LightBox enables to view pictures in overlay.

[dzemanov]

ReportIssue bug is fixed.
Not sure if I can use importName for the filtering for TechDocs dynamic components or is there something better / safer to use.

[github-actions]

The image is available at:

• quay.io/rhdh-community/rhdh:pr-2238 or
• quay.io/rhdh-community/rhdh:pr-2238-c3117d13

[openshift-ci]

@dzemanov: The following test failed, say /retest to rerun all failed tests or /retest-required to rerun all mandatory failed tests:

Test name	Commit	Details	Required	Rerun command
ci/prow/e2e-tests	f1fbe71	link	true	/test e2e-tests

Full PR test history. Your PR dashboard.

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository. I understand the commands that are listed here.