POC: Render config editor using json-render from config JSON schema

[Copilot]

Explores whether the existing config JSON schema can drive UI rendering via vercel-labs/json-render. Answer: yes. This PR implements a working proof-of-concept.

Approach

The config JSON schema uses discriminated unions (anyOf/allOf) for auth types and license plans. The POC walks this schema structure at runtime to extract field metadata, then renders via json-render's Renderer with Grafana UI components.

• src/jsonrender/catalog.ts — Component catalog (8 form primitives: RadioGroup, TextInput, SecretInput, SecretTextArea, etc.) with Zod-typed props
• src/jsonrender/registry.tsx — Maps catalog → Grafana UI implementations (ConfigSection, RadioButtonGroup, Input, SecretInput, etc.), wired with useBoundProp for two-way binding
• src/jsonrender/configEditorSpec.ts — Reads pkg/schema/config.json to extract discriminator values, field descriptions, and radio options; builds a json-render Spec with $bindState bindings and $state-based conditional visibility
• src/views/ConfigEditorJsonRender.tsx — Bridges json-render's controlled StateStore ↔ Grafana's onOptionsChange
• src/module.ts — Swaps in the new editor

Key details

Schema-driven conditional visibility replaces hand-coded {selectedAuthType === 'github-app' && (...)} blocks:

// Fields auto-show/hide based on schema discriminators
'app-id': {
  type: 'TextInput',
  props: { label: appIdDesc, value: { $bindState: '/appId' } },
  visible: { $state: '/selectedAuthType', eq: 'github-app' },
},

Field labels and descriptions are extracted from the JSON schema rather than hard-coded:

const ghAppVariant = authVariantsArr.find(
  (v) => propsOf(v)['selectedAuthType']?.const === 'github-app'
);
const appIdDesc = propsOf(ghAppVariant)['appId']?.description ?? 'App ID';

Limitations

• The original editor's informational <Collapse> section (access token setup instructions) and SecureSocksProxySettings are not included — this is a structural POC, not a drop-in replacement
• Visual verification requires a running Grafana instance; functional correctness is covered by 5 new tests

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• ofcncog2cu-dsn.algolia.net
  • Triggering command: /opt/hostedtoolcache/node/24.14.0/x64/bin/node /opt/hostedtoolcache/node/24.14.0/x64/bin/node /home/REDACTED/work/github-datasource/github-datasource/.yarn/releases/yarn-4.12.0.cjs add @json-render/core @json-render/react (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.