IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Search: Move checkbox outside of item card (#65540)

Browse Source 
* Move checkbox outside of SeachItem

* Add li element
This commit is contained in:
Tobias Skarhed 2023-03-31 08:49:03 +02:00 committed by GitHub
parent 92965578b3
commit 7b4a222fbf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 37 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/app/features/search/components/SearchCheckbox.tsx
View File

@ -13,9 +13,7 @@ interface Props {
export const SearchCheckbox = memo(
({ onClick, className, checked = false, editable = false, 'aria-label': ariaLabel }: Props) => {
return editable ? (
<div onClick={onClick} className={className}>
<Checkbox value={checked} aria-label={ariaLabel} />
</div>
<Checkbox onClick={onClick} className={className} value={checked} aria-label={ariaLabel} />
) : null;
}
);

70
public/app/features/search/components/SearchItem.tsx
View File

@ -48,7 +48,6 @@ export const SearchItem = ({ item, isSelected, editable, onToggleChecked, onTagS
const handleCheckboxClick = useCallback(
(ev: React.MouseEvent) => {
ev.stopPropagation();
ev.preventDefault();
if (onToggleChecked) {
onToggleChecked(item);
@ -68,38 +67,38 @@ export const SearchItem = ({ item, isSelected, editable, onToggleChecked, onTagS
);
return (
<Card
data-testid={selectors.dashboardItem(item.title)}
href={item.url}
style={{ minHeight: SEARCH_ITEM_HEIGHT }}
className={styles.container}
onClick={onClickItem}
>
<Card.Heading>{item.title}</Card.Heading>
<li className={styles.cardContainer}>
<SearchCheckbox
aria-label="Select dashboard"
editable={editable}
checked={isSelected}
onClick={handleCheckboxClick}
/>
<Card.Figure align={'center'} className={styles.checkbox}>
<SearchCheckbox
aria-label="Select dashboard"
editable={editable}
checked={isSelected}
onClick={handleCheckboxClick}
/>
</Card.Figure>
<Card
className={styles.card}
data-testid={selectors.dashboardItem(item.title)}
href={item.url}
style={{ minHeight: SEARCH_ITEM_HEIGHT }}
onClick={onClickItem}
>
<Card.Heading>{item.title}</Card.Heading>
<Card.Meta separator={''}>
<span className={styles.metaContainer}>{description}</span>
<Card.Meta separator={''}>
<span className={styles.metaContainer}>{description}</span>
{item.sortMetaName && (
<span className={styles.metaContainer}>
<Icon name={getIconFromMeta(item.sortMetaName)} />
{item.sortMeta} {item.sortMetaName}
</span>
)}
</Card.Meta>
<Card.Tags>
<TagList tags={item.tags ?? []} onClick={tagSelected} getAriaLabel={(tag) => `Filter by tag "${tag}"`} />
</Card.Tags>
</Card>
{item.sortMetaName && (
<span className={styles.metaContainer}>
<Icon name={getIconFromMeta(item.sortMetaName)} />
{item.sortMeta} {item.sortMetaName}
</span>
)}
</Card.Meta>
<Card.Tags>
<TagList tags={item.tags ?? []} onClick={tagSelected} getAriaLabel={(tag) => `Filter by tag "${tag}"`} />
</Card.Tags>
</Card>
</li>
);
};
@ -116,9 +115,15 @@ function kindName(kind: DashboardViewItem['kind']) {
const getStyles = (theme: GrafanaTheme2) => {
return {
container: css`
cardContainer: css`
display: flex;
list-style: none;
align-items: center;
margin-bottom: ${theme.spacing(0.75)};
`,
card: css`
padding: ${theme.spacing(1)} ${theme.spacing(2)};
margin-bottom: 0;
`,
metaContainer: css`
display: flex;
@ -129,8 +134,5 @@ const getStyles = (theme: GrafanaTheme2) => {
margin-right: ${theme.spacing(0.5)};
}
`,
checkbox: css`
margin-right: 0;
`,
};
};