feat(config): Add custom docs and feature flag

[Jayclifford345]

This PR adds a new tab to the configuration page called custom docs. This will lay the ground work for allowing customers to eventually add their own docs to the plugin. For now it acts as a development tool so we can add test repos with interactive tutorials and bypass adding them to the recommender.

I have added this feature under a feature flag which is enabled by default when you deploy locally using npm run server. Otherwise, the feature will be blocked by default.

To test:

1. Head to: https://docsplugin2.grafana-dev.net/plugins/grafana-grafanadocsplugin-app?page=custom-docs-config
2. Open developer console
3. type: window.features.enable('custom_docs');
4. Refresh the page, but do not close the tab, as this will remove your session.

Set up a custom docs repo. My recommendation for testing is just to use: https://github.com/grafana/interactive-tutorials

[github-actions]

Bundle Size Changes

Hello! 👋 This comment was generated by a Github Action to help you and reviewers understand the impact of your PR on frontend bundle sizes.

Whenever this PR is updated, this comment will update to reflect the latest changes.

EntryPoint	Size	% Diff
module	26.12 KB (+3.64 KB)	+16.18%

Files	Total bundle size	% Diff
60 → 63	2.45 MB (+19.86 KB)	+0.80%

View detailed bundle information

Added

Name	Size	% Diff
644.js?_cache=6fbdcaf5ad2a5be62863	389.59 KB (+389.59 KB)	-
117.js?_cache=cf15cc6a4014bbfb859f	9.88 KB (+9.88 KB)	-
847.js?_cache=8b26370accf0f5be4c39	7.68 KB (+7.68 KB)	-
23.js?_cache=01821323d733d2e526cf	7.47 KB (+7.47 KB)	-
293.js?_cache=c2ebfe91d3f5554ca14d	3.87 KB (+3.87 KB)	-
364.js?_cache=dfd859f4d6a1e44c1ec0	2.46 KB (+2.46 KB)	-

Removed

Name	Size	% Diff
644.js?_cache=73f537a1c41bc7f89834	0 Bytes (-387.91 KB)	-100.00%
117.js?_cache=ed92590c53cd1d3e4d24	0 Bytes (-9.5 KB)	-100.00%
847.js?_cache=0ab88077a949b5652611	0 Bytes (-7.31 KB)	-100.00%

Bigger

Name	Size	% Diff
module.js	26.12 KB (+3.64 KB)	+16.18%

Smaller

No assets were smaller

View module information

Added

Name	Size	% Diff
./components/AppConfig/CustomDocsConfig.tsx	12.22 KB (+12.22 KB)	-
./utils/github-url.utils.ts	11.71 KB (+11.71 KB)	-
./utils/feature-flag.service.ts	4.72 KB (+4.72 KB)	-
./utils/custom-docs-fetcher.ts	4.22 KB (+4.22 KB)	-
./utils/recommendation-matching.utils.ts	3.41 KB (+3.41 KB)	-
./bootstrap.ts	2.57 KB (+2.57 KB)	-

Removed

No modules were removed

Bigger

Name	Size	% Diff
./components/testIds.ts	3.17 KB (+1.84 KB)	+139.03%
./utils/utils.plugin.ts	6.11 KB (+1.53 KB)	+33.33%
./module.tsx	4.24 KB (+1.04 KB)	+32.51%
./components/App/App.tsx	3.08 KB (+932 Bytes)	+41.96%
./styles/context-panel.styles.ts	23.07 KB (+911 Bytes)	+4.01%
./components/docs-panel/context-panel.tsx	17.8 KB (+653 Bytes)	+3.72%
./constants.ts	9.91 KB (+288 Bytes)	+2.92%

Smaller

Name	Size	% Diff
./utils/docs-retrieval/content-fetcher.ts	26.6 KB (-790 Bytes)	-2.82%
./utils/context/context.service.ts	46.48 KB (-467 Bytes)	-0.97%

[jdbaldry]

Thinking about this implementation a bit and stepping back.

I don't believe we think this is how custom user provided docs will work so this is really just to provide alternative recommendations in the recommender.

Would it be easier to just configure the recommender URL so you can just run a recommender with whatever configuration you like and have it recommend documentation in the way it would in production?

[Jayclifford345]

Would it be easier to just configure the recommender URL so you can just run a recommender with whatever configuration you like and have it recommend documentation in the way it would in production?

hmm this means you would have to host a second recommender somewhere that grafana cloud has access to. we could have a dev recommender that people could use for testing but then we would need another build workflow to make sure those changes are deployed. In this case we are just using the same simplfied logic as the static links recommender uses within the plugin which i think is easier overall. I think asking OSS and customers to host their own recommender will just be somthing else they need to support. where as this feels more like our git integration where you just select the repos you want to include

[github-actions]

Playwright test results

Image Name	Version	Result	Report
grafana-dev	12.2.0-258070	✅
grafana-enterprise	12.1.1	✅

⚠️ To make Playwright reports for failed tests publicly accessible on GitHub Pages, set the upload-report input to true in your CI workflow. For more details, refer to the Developer Portal documentation.