Grafana UI: Card API refactor (#29034)

* Refactor API

* Fix types

* Cleanup

* Remove useMemo

* Update actions

* Update story

* Align secondary actions

* Replace snapshot tests

* Update docs

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

Co-authored-by: kay delaney <45561153+kaydelaney@users.noreply.github.com>

* Allow overriding child props

* Fix types and remove alpha tags

Co-authored-by: kay delaney <45561153+kaydelaney@users.noreply.github.com>

public/app/features/alerting/AlertRuleItem.test.tsx

@@ -1,11 +1,7 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render, screen, fireEvent } from '@testing-library/react';
 import AlertRuleItem, { Props } from './AlertRuleItem';
 
-jest.mock('react-redux', () => ({
-  connect: () => (params: any) => params,
-}));
-
 const setup = (propOverrides?: object) => {
   const props: Props = {
     rule: {
@@ -26,13 +22,20 @@ const setup = (propOverrides?: object) => {
 
   Object.assign(props, propOverrides);
 
-  return shallow(<AlertRuleItem {...props} />);
+  return render(<AlertRuleItem {...props} />);
 };
 
-describe('Render', () => {
+describe('AlertRuleItem', () => {
   it('should render component', () => {
-    const wrapper = setup();
+    const mockToggle = jest.fn();
+    setup({ onTogglePause: mockToggle });
 
-    expect(wrapper).toMatchSnapshot();
+    expect(screen.getByText('Some rule')).toBeInTheDocument();
+    expect(screen.getByText('state text')).toBeInTheDocument();
+    expect(screen.getByText('Pause')).toBeInTheDocument();
+    expect(screen.getByText('Edit alert')).toBeInTheDocument();
+
+    fireEvent.click(screen.getByText('Pause'));
+    expect(mockToggle).toHaveBeenCalled();
   });
 });

public/app/features/alerting/AlertRuleItem.tsx

@@ -31,21 +31,20 @@ const AlertRuleItem = ({ rule, search, onTogglePause }: Props) => {
         width: 100%;
       `}
     >
-      <Card
-        heading={<a href={ruleUrl}>{renderText(rule.name)}</a>}
-        image={
+      <Card heading={<a href={ruleUrl}>{renderText(rule.name)}</a>}>
+        <Card.Figure>
           <Icon size="xl" name={rule.stateIcon as IconName} className={`alert-rule-item__icon ${rule.stateClass}`} />
-        }
-        metadata={[
+        </Card.Figure>
+        <Card.Meta>
           <span key="state">
             <span key="text" className={`${rule.stateClass}`}>
               {renderText(rule.stateText)}{' '}
             </span>
             for {rule.stateAge}
-          </span>,
-          rule.info ? renderText(rule.info) : null,
-        ]}
-        actions={[
+          </span>
+          {rule.info ? renderText(rule.info) : null}
+        </Card.Meta>
+        <Card.Actions>
           <Button
             key="play"
             variant="secondary"
@@ -53,12 +52,12 @@ const AlertRuleItem = ({ rule, search, onTogglePause }: Props) => {
             onClick={onTogglePause}
           >
             {rule.state === 'paused' ? 'Resume' : 'Pause'}
-          </Button>,
+          </Button>
           <LinkButton key="edit" variant="secondary" href={ruleUrl} icon="cog">
             Edit alert
-          </LinkButton>,
-        ]}
-      />
+          </LinkButton>
+        </Card.Actions>
+      </Card>
     </li>
   );
 };

public/app/features/alerting/__snapshots__/AlertRuleItem.test.tsx.snap

@@ -1,73 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Render should render component 1`] = `
-<li
-  className="css-1aih96i"
->
-  <Component
-    actions={
-      Array [
-        <Button
-          icon="pause"
-          onClick={[MockFunction]}
-          variant="secondary"
-        >
-          Pause
-        </Button>,
-        <LinkButton
-          href="https://something.something.darkside?editPanel=1&tab=alert"
-          icon="cog"
-          variant="secondary"
-        >
-          Edit alert
-        </LinkButton>,
-      ]
-    }
-    heading={
-      <a
-        href="https://something.something.darkside?editPanel=1&tab=alert"
-      >
-        <Highlighter
-          highlightClassName="highlight-search-match"
-          searchWords={
-            Array [
-              "",
-            ]
-          }
-          textToHighlight="Some rule"
-        />
-      </a>
-    }
-    image={
-      <Icon
-        className="alert-rule-item__icon state class"
-        name="icon"
-        size="xl"
-      />
-    }
-    metadata={
-      Array [
-        <span>
-          <span
-            className="state class"
-          >
-            <Highlighter
-              highlightClassName="highlight-search-match"
-              searchWords={
-                Array [
-                  "",
-                ]
-              }
-              textToHighlight="state text"
-            />
-             
-          </span>
-          for 
-          age
-        </span>,
-        null,
-      ]
-    }
-  />
-</li>
-`;