IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-11-29 12:14:08 -06:00
Code Issues Packages Projects Releases Wiki Activity

Card: Defend against conditional action buttons (#35204)

Browse Source 
* fix(card): defend against invalid elements types passed to BaseActions

* test(card): add test to support conditional buttons being passed in

* fix(playlistpage): remove disabled prop from LinkButton for editors

* chore(playlistpage): remove title from edit button
This commit is contained in:
Jack Westbrook 2021-06-04 14:38:29 +02:00 committed by GitHub
parent de3bcb6071
commit c13f247a94
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 23 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
packages/grafana-ui/src/components/Card/Card.test.tsx
View File

@ -72,5 +72,23 @@ describe('Card', () => {
expect(screen.getByRole('button', { name: 'Click Me' })).not.toBeDisabled();
expect(screen.getByRole('button', { name: 'Delete' })).not.toBeDisabled();
});
it('Children should be conditional', () => {
const shouldNotRender = false;
render(
<Card heading="Test Heading">
<Card.Actions>
<Button>Click Me</Button>
{shouldNotRender && <Button>Delete</Button>}
</Card.Actions>
<Card.SecondaryActions>
{shouldNotRender && <IconButton name="trash-alt" aria-label="Delete" disabled={false} />}
</Card.SecondaryActions>
</Card>
);
expect(screen.getByRole('button', { name: 'Click Me' })).not.toBeDisabled();
expect(screen.queryByRole('button', { name: 'Delete' })).not.toBeInTheDocument();
});
});
});

8
packages/grafana-ui/src/components/Card/Card.tsx
View File

@ -243,7 +243,7 @@ const Meta: FC<ChildProps & { separator?: string }> = memo(({ children, styles,
Meta.displayName = 'Meta';
interface ActionsProps extends ChildProps {
children: JSX.Element | JSX.Element[];
children?: React.ReactNode;
variant?: 'primary' | 'secondary';
}
@ -251,9 +251,9 @@ const BaseActions: FC<ActionsProps> = ({ children, styles, disabled, variant })
const css = variant === 'primary' ? styles?.actions : styles?.secondaryActions;
return (
<div className={css}>
{Array.isArray(children)
? React.Children.map(children, (child) => cloneElement(child, { disabled, ...child.props }))
: cloneElement(children, { disabled, ...children.props })}
{React.Children.map(children, (child) => {
return React.isValidElement(child) ? cloneElement(child, { disabled, ...child.props }) : null;
})}
</div>
);
};

9
public/app/features/playlist/PlaylistPage.tsx
View File

@ -51,14 +51,7 @@ export const PlaylistPage: FC<Props> = ({ navModel }) => {
Start playlist
</Button>
{contextSrv.isEditor && (
<LinkButton
key="edit"
variant="secondary"
href={`/playlists/edit/${playlist.id}`}
icon="cog"
disabled
title="Feature temporarily disabled"
>
<LinkButton key="edit" variant="secondary" href={`/playlists/edit/${playlist.id}`} icon="cog">
Edit playlist
</LinkButton>
)}