Card: Defend against conditional action buttons (#35204)

* 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

packages/grafana-ui/src/components/Card/Card.test.tsx

@@ -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();
+    });
   });
 });

packages/grafana-ui/src/components/Card/Card.tsx

@@ -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>
   );
 };

public/app/features/playlist/PlaylistPage.tsx

@@ -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>
               )}