fix: initialize bool parameter state from config by beep-boopp · Pull Request #92 · inspektor-gadget/headlamp-plugin

beep-boopp · 2026-04-07T14:36:55Z

bool.tsx never called config.get() to restore its initial value,
causing pre-checked boolean parameters to always render unchecked after
a re-mount. Fixes #91.

Caught while writing unit tests in #23.

What changed

Switched bool.tsx to a controlled component — replaced defaultChecked with
checked={checked} backed by useState initialized from config.get?.().
State is the source of truth after mount, handleChange keeps config in sync
via config.set. Also bundled pre-existing lint fixes (gadgetGrid.tsx unused
imports, wasm.js added to eslintIgnore) to unblock CI.

Testing done

Added a regression test renders checkbox as checked when config.get returns "true"
to bool.test.tsx. All 4 tests passing locally:

Copilot

Pull request overview

Fixes boolean gadget parameter UI state restoration by initializing the checkbox’s initial checked state from persisted config, aligning behavior with other parameter components and adding a regression test for the remount scenario (Issue #91).

Changes:

Initialize Checkbox state from config.get() via defaultChecked in src/gadgets/params/bool.tsx.
Add unit test coverage validating that config.get() returning "true" renders the checkbox checked.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File	Description
src/gadgets/params/bool.tsx	Initializes checkbox initial state from `config.get()` to preserve persisted checked state across remounts.
src/gadgets/params/bool.test.tsx	Adds a regression test verifying the checkbox is initially checked when `config.get()` returns `"true"`.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-04-08T12:25:54Z

+import { vi } from 'vitest';
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';


This test imports @testing-library/jest-dom, which is the Jest entrypoint. Since this repo uses Vitest (and doesn’t have Jest/@types/jest in the lockfile), prefer the Vitest-specific entry (@testing-library/jest-dom/vitest) or move it into the shared Vitest setup to ensure matcher runtime + TypeScript typings work reliably under npm run tsc/CI.

Suggested change

import '@testing-library/jest-dom';

import '@testing-library/jest-dom/vitest';

beep-boopp · 2026-04-08T12:44:33Z

@illume Sorry about the lint here, should’ve caught that from #23.
Also, bool.test.tsx overlaps a bit with #23 since that’s where the full param test suite lives. Whichever merges first, the other will just need a small rebase on this file, happy to take care of that.
Thanks

Copilot

Pull request overview

Copilot reviewed 2 out of 2 changed files in this pull request and generated 4 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-04-12T12:09:39Z

    <Box display="flex" flexDirection="row" gap={2}>
      <FormControlLabel
-        control={<Checkbox onChange={handleChange} />}
+        control={<Checkbox defaultChecked={config.get?.() === 'true'} onChange={handleChange} />}


defaultChecked makes this an uncontrolled checkbox that only reads config.get() on initial mount; if the config value changes while the component stays mounted (e.g., external reset / param sync), the UI won’t update. If config is intended to be the source of truth, consider switching to a controlled checked prop backed by component state initialized from config.get() (and updated in onChange).

Hii @beep-boopp any comments on this??

Copilot · 2026-04-12T12:09:40Z

@@ -0,0 +1,56 @@
+/// <reference types="vitest" />
+import '@testing-library/jest-dom/vitest';
+import { fireEvent,render, screen } from '@testing-library/react';


Prefer @testing-library/user-event over fireEvent for user interactions (clicking checkboxes), since it more closely matches real browser behavior and reduces false positives. If you keep fireEvent, at least ensure the import formatting is consistent (space after commas) to match typical style.

Copilot · 2026-04-12T12:09:40Z

+  test('calls config.set with "true" when checked', () => {
+    render(<CheckboxFilter param={mockParam} config={mockConfig} />);
+
+    fireEvent.click(screen.getByRole('checkbox'));


Prefer @testing-library/user-event over fireEvent for user interactions (clicking checkboxes), since it more closely matches real browser behavior and reduces false positives. If you keep fireEvent, at least ensure the import formatting is consistent (space after commas) to match typical style.

Copilot · 2026-04-12T12:09:40Z

+    fireEvent.click(checkbox); // check
+    fireEvent.click(checkbox); // uncheck


Prefer @testing-library/user-event over fireEvent for user interactions (clicking checkboxes), since it more closely matches real browser behavior and reduces false positives. If you keep fireEvent, at least ensure the import formatting is consistent (space after commas) to match typical style.

Hii @beep-boopp should we use @testing-library/user-event as mentioned here

Signed-off-by: Prajwal <percy38621@gmail.com>

beep-boopp · 2026-04-12T13:18:40Z

All linting, formatting, and Vitest imports resolved. Ready for review

beep-boopp · 2026-04-13T12:42:37Z

Hey @ashu8912
Good catch by Copilot. defaultChecked is uncontrolled, React ignores it after mount, so re renders wouldn't reflect updated config. Switched to controlled checked backed by useState initialized from config.get?.().
Quick heads-up:

On tests: holding off on the userEvent swap here to avoid mixed styles across param tests. Will migrate all 7 test files cleanly in #23 instead.
On CI: bundled a few minor lint fixes (unused imports in gadgetGrid.tsx, added wasm.js to eslintIgnore since it's generated code). No logic changed.
I hope this works and is good to merge.

Copilot

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

beep-boopp force-pushed the fix/bool-initial-state branch from 553911c to 1b36b86 Compare April 7, 2026 14:40

illume requested a review from Copilot April 8, 2026 12:21

Copilot started reviewing on behalf of illume April 8, 2026 12:22 View session

Copilot AI reviewed Apr 8, 2026

View reviewed changes

beep-boopp force-pushed the fix/bool-initial-state branch 2 times, most recently from b3bb549 to ccf887f Compare April 8, 2026 12:53

beep-boopp requested a review from Copilot April 12, 2026 12:07

Copilot started reviewing on behalf of beep-boopp April 12, 2026 12:08 View session

Copilot AI reviewed Apr 12, 2026

View reviewed changes

beep-boopp mentioned this pull request Apr 12, 2026

test: add unit coverage for all gadget parameter components #23

Open

fix: initialize bool parameter state from config

db51dde

Signed-off-by: Prajwal <percy38621@gmail.com>

beep-boopp force-pushed the fix/bool-initial-state branch from ccf887f to db51dde Compare April 12, 2026 13:16

fix: switch to controlled state and resolve pre-existing lint errors

fc28d20

Merge branch 'main' into fix/bool-initial-state

d8483c3

beep-boopp requested a review from Copilot April 14, 2026 07:15

Copilot started reviewing on behalf of beep-boopp April 14, 2026 07:15 View session

Copilot AI reviewed Apr 14, 2026

View reviewed changes

Comment thread src/gadgets/params/bool.tsx

Comment thread src/gadgets/params/bool.tsx

	import '@testing-library/jest-dom';
	import '@testing-library/jest-dom/vitest';

		fireEvent.click(checkbox); // check
		fireEvent.click(checkbox); // uncheck

Uh oh!

Conversation

beep-boopp commented Apr 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What changed

Testing done

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Apr 8, 2026

Choose a reason for hiding this comment

Uh oh!

beep-boopp commented Apr 8, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Apr 12, 2026

Choose a reason for hiding this comment

Uh oh!

ashu8912 Apr 13, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 12, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 12, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 12, 2026

Choose a reason for hiding this comment

Uh oh!

ashu8912 Apr 13, 2026

Choose a reason for hiding this comment

Uh oh!

beep-boopp commented Apr 12, 2026

Uh oh!

beep-boopp commented Apr 13, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

beep-boopp commented Apr 7, 2026 •

edited

Loading