Fix: Bookmarks - make expanding not move everything up; remember expanded / collapsed state (#96945)

* fix: expanding bookmarks not move everything up

* chore: delete unused code

* Update public/app/features/trails/DataTrailBookmarks.tsx

Co-authored-by: Nick Richmond <5732000+NWRichmond@users.noreply.github.com>

* fix: remove type assertion to fix betterer

---------

Co-authored-by: Nick Richmond <5732000+NWRichmond@users.noreply.github.com>
This commit is contained in:
Kat Yang 2024-12-02 10:58:07 -05:00 committed by GitHub
parent 6be6c87c7c
commit 1dffd3e554
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 10 additions and 3 deletions

View File

@ -1,5 +1,5 @@
import { css } from '@emotion/css'; import { css } from '@emotion/css';
import { useState } from 'react'; import { useState, useEffect } from 'react';
import { GrafanaTheme2 } from '@grafana/data'; import { GrafanaTheme2 } from '@grafana/data';
import { IconButton, useStyles2 } from '@grafana/ui'; import { IconButton, useStyles2 } from '@grafana/ui';
@ -14,9 +14,16 @@ type Props = {
}; };
export function DataTrailsBookmarks({ onSelect, onDelete }: Props) { export function DataTrailsBookmarks({ onSelect, onDelete }: Props) {
const [toggleBookmark, setToggleBookmark] = useState(false); const [toggleBookmark, setToggleBookmark] = useState(() => {
const savedState = localStorage.getItem('toggleBookmark');
return savedState ? JSON.parse(savedState) : false;
});
const styles = useStyles2(getStyles); const styles = useStyles2(getStyles);
useEffect(() => {
localStorage.setItem('toggleBookmark', JSON.stringify(toggleBookmark));
}, [toggleBookmark]);
if (getTrailStore().bookmarks.length === 0) { if (getTrailStore().bookmarks.length === 0) {
return null; return null;
} }

View File

@ -103,8 +103,8 @@ function getStyles(theme: GrafanaTheme2) {
return { return {
container: css({ container: css({
display: 'flex', display: 'flex',
justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
marginTop: '84px',
flexDirection: 'column', flexDirection: 'column',
height: '100%', height: '100%',
boxSizing: 'border-box', // Ensure padding doesn't cause overflow boxSizing: 'border-box', // Ensure padding doesn't cause overflow