[ENHANCEMENT] Add HTTP header forwarding policy fields + upgrade TypeScript to v7 + upgrade RHF and Zod

[Gladorme]

Description

Adding editor for adding or removing header in datasource.
Aligning lib deps with perses/spec :

• TypeScript v7
• Zod v4
• Upgrading React Hook Form too in order to work correctly with Zod v4

Screenshots

Checklist

• Pull request has a descriptive title and context useful to a reviewer.
• Pull request title follows the [<catalog_entry>] <commit message> naming convention using one of the
  following catalog_entry values: FEATURE, ENHANCEMENT, BUGFIX, BREAKINGCHANGE, DOC,IGNORE.
• All commits have DCO signoffs.

UI Changes

• Changes that impact the UI include screenshots and/or screencasts of the relevant changes.
• Code follows the UI guidelines.
• E2E tests are stable and unlikely to be flaky.
  See e2e docs for more details. Common issues include:
  • Is the data inconsistent? You need to mock API requests.
  • Does the time change? You need to use consistent time values or mock time utilities.
  • Does it have loading states? You need to wait for loading to complete.

[Copilot]

🟡 Changes recommended

The runtime advertises beta.5 while beta.7 is installed, potentially breaking federation sharing.

Once you've addressed the issues Copilot identified, you can request another Copilot review.

Pull request overview

Adds HTTP header-forwarding policy controls and upgrades TypeScript, Zod, React Hook Form, and Perses spec dependencies.

Changes:

• Adds mutually exclusive allow/drop header editors.
• Migrates schemas and validation to Zod 4.
• Updates dependencies and TypeScript 7 compatibility.

File summaries

File	Description
plugin-system/src/schema/panel.ts	Updates Zod schema typings.
plugin-system/src/remote/PluginRuntime.tsx	Updates shared dependencies; advertised spec version remains inconsistent.
plugin-system/src/context/ValidationProvider.tsx	Migrates validation types to Zod 4.
plugin-system/src/components/HTTPSettingsEditor/HTTPSettingsEditor.tsx	Integrates header-policy controls; focused tests are requested.
plugin-system/src/components/HTTPSettingsEditor/HTTPHeaderPolicyEditor.tsx	Implements allow/drop controls; interaction tests are requested.
plugin-system/package.json	Upgrades spec, Zod, and form dependencies.
package.json	Upgrades TypeScript.
package-lock.json	Records dependency resolution updates.
dashboards/package.json	Aligns form and spec dependencies.
components/src/TimeRangeSelector/TimeRangeSelector.tsx	Simplifies autocomplete value typing.
components/src/theme/types/fonts.d.ts	Declares font CSS modules.
components/package.json	Updates the Perses spec dependency.
client/src/schema/user.ts	Updates user schema typings.
client/src/schema/rolebinding.ts	Updates role-binding schema typings.
client/src/schema/role.ts	Updates role schema typings.
client/src/schema/datasource.ts	Updates datasource schema typings.
client/package.json	Upgrades Zod and Perses spec.

Review details

Suppressed comments (2)

plugin-system/src/components/HTTPSettingsEditor/HTTPHeaderPolicyEditor.tsx:74

• The new header-policy behavior is untested even though this editor already has comprehensive interaction tests. Please add focused cases for adding/removing both policy lists and for the mutual-exclusion/read-only behavior so regressions in the controlled Autocomplete state are caught.

  const hasConflict = Boolean(value.allowHeaders?.length && value.dropHeaders?.length);
  const handleChange = useCallback(
    (_: unknown, headers: string[]): void => {
      const nextHeaders = headers.map((header) => header.trim()).filter(Boolean);
      onChange({ ...value, [name]: nextHeaders.length > 0 ? nextHeaders : undefined });

plugin-system/src/components/HTTPSettingsEditor/HTTPSettingsEditor.tsx:415

• The new public header-policy behavior has no focused tests, although HTTPSettingsEditor.test.tsx extensively covers the existing request-header editor. Add cases that verify allow/drop values are emitted, clearing removes the field, the opposite policy is disabled, existing proxy fields are preserved, and readonly mode prevents edits.

          {value.proxy && (
            <HTTPHeaderPolicyEditor
              value={value.proxy.spec}
              isReadonly={isReadonly}
              onChange={handleHeaderPolicyChange}
            />

• Files reviewed: 15/17 changed files
• Comments generated: 1
• Review effort level: Balanced

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.