From 7f6f9fbce98d1b3f431d76428388d6d3d879e1eb Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Fri, 4 Jun 2021 10:06:24 -0400
Subject: [PATCH] Grafana-UI: Allow Card consumers to override disabled prop
 for action (#34664) (#35249)

(cherry picked from commit 8afb15296a244a397ace7b9959ddb11d11cac90a)

Co-authored-by: Giordano Ricci <me@giordanoricci.com>
---
 .../src/components/Card/Card.test.tsx         | 64 +++++++++++++++++++
 .../grafana-ui/src/components/Card/Card.tsx   |  4 +-
 2 files changed, 66 insertions(+), 2 deletions(-)

diff --git a/packages/grafana-ui/src/components/Card/Card.test.tsx b/packages/grafana-ui/src/components/Card/Card.test.tsx
index 16325de6c28..1ceca474bce 100644
--- a/packages/grafana-ui/src/components/Card/Card.test.tsx
+++ b/packages/grafana-ui/src/components/Card/Card.test.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import { render, screen, fireEvent } from '@testing-library/react';
 import { Card } from './Card';
+import { Button } from '../Button';
+import { IconButton } from '../IconButton/IconButton';
 
 describe('Card', () => {
   it('should execute callback when clicked', () => {
@@ -9,4 +11,66 @@ describe('Card', () => {
     fireEvent.click(screen.getByText('Test Heading'));
     expect(callback).toBeCalledTimes(1);
   });
+
+  describe('Card Actions', () => {
+    it('Children should be disabled or enabled according to Card disabled prop', () => {
+      const { rerender } = render(
+        <Card heading="Test Heading">
+          <Card.Actions>
+            <Button>Click Me</Button>
+          </Card.Actions>
+          <Card.SecondaryActions>
+            <IconButton name="trash-alt" aria-label="Delete" />
+          </Card.SecondaryActions>
+        </Card>
+      );
+
+      expect(screen.getByRole('button', { name: 'Click Me' })).not.toBeDisabled();
+      expect(screen.getByRole('button', { name: 'Delete' })).not.toBeDisabled();
+
+      rerender(
+        <Card heading="Test Heading" disabled>
+          <Card.Actions>
+            <Button>Click Me</Button>
+          </Card.Actions>
+          <Card.SecondaryActions>
+            <IconButton name="trash-alt" aria-label="Delete" />
+          </Card.SecondaryActions>
+        </Card>
+      );
+
+      expect(screen.getByRole('button', { name: 'Click Me' })).toBeDisabled();
+      expect(screen.getByRole('button', { name: 'Delete' })).toBeDisabled();
+    });
+
+    it('Children should be independently enabled or disabled if explicitly set', () => {
+      const { rerender } = render(
+        <Card heading="Test Heading">
+          <Card.Actions>
+            <Button disabled>Click Me</Button>
+          </Card.Actions>
+          <Card.SecondaryActions>
+            <IconButton name="trash-alt" aria-label="Delete" disabled />
+          </Card.SecondaryActions>
+        </Card>
+      );
+
+      expect(screen.getByRole('button', { name: 'Click Me' })).toBeDisabled();
+      expect(screen.getByRole('button', { name: 'Delete' })).toBeDisabled();
+
+      rerender(
+        <Card heading="Test Heading" disabled>
+          <Card.Actions>
+            <Button disabled={false}>Click Me</Button>
+          </Card.Actions>
+          <Card.SecondaryActions>
+            <IconButton name="trash-alt" aria-label="Delete" disabled={false} />
+          </Card.SecondaryActions>
+        </Card>
+      );
+
+      expect(screen.getByRole('button', { name: 'Click Me' })).not.toBeDisabled();
+      expect(screen.getByRole('button', { name: 'Delete' })).not.toBeDisabled();
+    });
+  });
 });
diff --git a/packages/grafana-ui/src/components/Card/Card.tsx b/packages/grafana-ui/src/components/Card/Card.tsx
index 0ba92fea8be..a147c8559cf 100644
--- a/packages/grafana-ui/src/components/Card/Card.tsx
+++ b/packages/grafana-ui/src/components/Card/Card.tsx
@@ -252,8 +252,8 @@ const BaseActions: FC<ActionsProps> = ({ children, styles, disabled, variant })
   return (
     <div className={css}>
       {Array.isArray(children)
-        ? React.Children.map(children, (child) => cloneElement(child, { disabled }))
-        : cloneElement(children, { disabled })}
+        ? React.Children.map(children, (child) => cloneElement(child, { disabled, ...child.props }))
+        : cloneElement(children, { disabled, ...children.props })}
     </div>
   );
 };