FEAT Add target visibility controls to frontend - #2516
Behnam (behnam-o) wants to merge 3 commits into
Conversation
Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com> Copilot-Session: e393c5a2-d6ed-4bcb-abd7-f7194e6e5638
a9500a7 to
972cfc3
Compare
Behnam (behnam-o)
changed the title
Behnam (behnam-o)
changed the title
Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com> Copilot-Session: e393c5a2-d6ed-4bcb-abd7-f7194e6e5638
Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com> Copilot-Session: e393c5a2-d6ed-4bcb-abd7-f7194e6e5638
|
Can you include a screenshot? |
|
Would be nice if we could configure which ones are hidden/shown via config. If I understand correctly this will just make them hidden/visible for me, but not for others (?) |
| checked={showHiddenTargets && hiddenTargetCount > 0} | ||
| disabled={hiddenTargetCount === 0} | ||
| label={`Show hidden targets (${hiddenTargetCount})`} | ||
| onChange={(_, data) => setShowHiddenTargets(data.checked === true)} |
There was a problem hiding this comment.
After hiding A, checking Show hidden targets, and clicking Show for A, this checkbox looks unchecked and disabled, but showHiddenTargets is still true. Hiding B then leaves B visible and checks the checkbox again without the user selecting it.
Could we reset showHiddenTargets when the last hidden target is restored, so the checkbox and filtering behavior stay consistent?
| wordBreak: 'break-word', | ||
| }, | ||
| hiddenRow: { | ||
| backgroundColor: tokens.colorNeutralBackground2, |
There was a problem hiding this comment.
Could we avoid applying opacity to the entire row? When hidden rows are revealed, they still contain enabled Set Active and Show buttons. In the light theme, this reduces the Set Active text contrast to about 2.83:1, below the 4.5:1 required for normal-size text.
A different row background or a Hidden badge would distinguish these rows without fading their text and controls.
| const setTargetHidden = (target: TargetInstance, hidden: boolean): void => { | ||
| const nextHiddenTargetRegistryNames = new Set(hiddenTargetRegistryNames) | ||
| if (hidden) { | ||
| nextHiddenTargetRegistryNames.add(target.target_registry_name) | ||
| } else { | ||
| nextHiddenTargetRegistryNames.delete(target.target_registry_name) | ||
| } | ||
| setHiddenTargetRegistryNames(nextHiddenTargetRegistryNames) | ||
| persistHiddenTargetRegistryNames(nextHiddenTargetRegistryNames) |
There was a problem hiding this comment.
This can overwrite another tab's saved visibility choices. Open two tabs, hide A in the first, then hide B in the second. Each table reads storage only on mount, so the second tab writes [B], discarding A. A becomes visible again after reloading.
Could we apply each toggle to the latest stored set rather than the stale component copy, and listen for storage events to keep other open tabs in sync?
3 participants
Description
Target tables can become cluttered with targets a user does not currently need. Add browser-persisted per-target hide controls and a Show hidden targets toggle.