fix: break out line break icon from HyperJsonMenu (#1120)

Closes HDX-2266
Closes https://github.com/hyperdxio/hyperdx/issues/1105

<img width="578" height="281" alt="image" src="https://github.com/user-attachments/assets/c9dc6d20-e52d-4924-897d-647cc25e542a" />
This commit is contained in:
Aaron Knudtson 2025-08-29 16:14:30 -04:00 committed by GitHub
parent 8568580127
commit 784014b67c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 60 additions and 59 deletions

View file

@ -0,0 +1,5 @@
---
"@hyperdx/app": patch
---
fix: broke out line break icon from HyperJsonMenu

View file

@ -12,6 +12,7 @@ import {
Menu,
Paper,
Text,
UnstyledButton,
} from '@mantine/core';
import { useDebouncedValue } from '@mantine/hooks';
import { notifications } from '@mantine/notifications';
@ -60,65 +61,60 @@ function HyperJsonMenu() {
const [jsonOptions, setJsonOptions] = useAtom(viewerOptionsAtom);
return (
<Menu width={240} withinPortal={false}>
<Menu.Target>
<ActionIcon size="md" variant="filled" color="gray">
<i className="bi bi-gear" />
</ActionIcon>
</Menu.Target>
<Menu.Dropdown>
<Menu.Label lh={1} py={6}>
Properties view options
</Menu.Label>
<Menu.Item
onClick={() =>
setJsonOptions({
...jsonOptions,
normallyExpanded: !jsonOptions.normallyExpanded,
})
}
lh="1"
py={8}
rightSection={
jsonOptions.normallyExpanded ? (
<i className="ps-2 bi bi-check2" />
) : null
}
>
Expand all properties
</Menu.Item>
<Menu.Item
onClick={() =>
setJsonOptions({
...jsonOptions,
lineWrap: !jsonOptions.lineWrap,
})
}
lh="1"
py={8}
rightSection={
jsonOptions.lineWrap ? <i className="ps-2 bi bi-check2" /> : null
}
>
Preserve line breaks
</Menu.Item>
<Menu.Item
lh="1"
py={8}
rightSection={
jsonOptions.tabulate ? <i className="ps-2 bi bi-check2" /> : null
}
onClick={() =>
setJsonOptions({
...jsonOptions,
tabulate: !jsonOptions.tabulate,
})
}
>
Tabulate
</Menu.Item>
</Menu.Dropdown>
</Menu>
<Group>
<UnstyledButton
color="gray.0"
onClick={() =>
setJsonOptions({ ...jsonOptions, lineWrap: !jsonOptions.lineWrap })
}
>
<i className="bi bi-text-wrap" />
</UnstyledButton>
<Menu width={240} withinPortal={false}>
<Menu.Target>
<UnstyledButton>
<i className="bi bi-gear" />
</UnstyledButton>
</Menu.Target>
<Menu.Dropdown>
<Menu.Label lh={1} py={6}>
Properties view options
</Menu.Label>
<Menu.Item
onClick={() =>
setJsonOptions({
...jsonOptions,
normallyExpanded: !jsonOptions.normallyExpanded,
})
}
lh="1"
py={8}
rightSection={
jsonOptions.normallyExpanded ? (
<i className="ps-2 bi bi-check2" />
) : null
}
>
Expand all properties
</Menu.Item>
<Menu.Item
lh="1"
py={8}
rightSection={
jsonOptions.tabulate ? <i className="ps-2 bi bi-check2" /> : null
}
onClick={() =>
setJsonOptions({
...jsonOptions,
tabulate: !jsonOptions.tabulate,
})
}
>
Tabulate
</Menu.Item>
</Menu.Dropdown>
</Menu>
</Group>
);
}