foreman-tasks 12.1.1 → 12.2.2

data/webpack/ForemanTasks/Components/TaskDetails/Components/__tests__/TaskInfo.test.js

@@ -1,59 +1,50 @@
-import { testComponentSnapshotsWithFixtures } from '@theforeman/test';
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
 
-import TaskInfo from '../TaskInfo';
+jest.mock('foremanReact/components/common/dates/RelativeDateTime', () => {
+  const RelativeDateTime = ({ date, defaultValue }) => (
+    <span>{date || defaultValue}</span>
+  );
+  return RelativeDateTime;
+});
 
-const fixtures = {
-  'render without Props': { id: 'test' },
-  'render with Props': {
-    id: 'test',
-    startAt: '2019-06-17 16:04:09 +0300',
-    label: 'Actions::Katello::EventQueue::Monitor',
-    pending: true,
-    action: 'Monitor Event Queue',
-    username: 'admin',
-    startedAt: '2019-06-17 16:04:09 +0300',
-    endedAt: null,
-    state: 'paused',
-    result: 'error',
-    progress: 0.5,
-    input: {
-      locale: 'en',
-      current_request_id: null,
-      current_timezone: 'Asia/Jerusalem',
-      current_user_id: 4,
-      current_organization_id: null,
-      current_location_id: null,
-    },
-    output: {},
-    humanized: {
-      action: 'Monitor Event Queue',
-      input: '',
-      output: '',
-      errors: [
-        'Action Actions::Katello::EventQueue::Monitor is already active',
-      ],
-    },
-    cli_example: null,
-    executionPlan: {
-      state: 'paused',
-      cancellable: false,
-    },
-    help:
-      "A paused task represents a process that has not finished properly. Any task in paused state can lead to potential inconsistency and needs to be resolved.\nThe recommended approach is to investigate the error messages below and in 'errors' tab, address the primary cause of the issue and resume the task.",
-    hasSubTasks: false,
-    locks: [
-      {
-        name: 'task_owner',
-        exclusive: false,
-        resource_type: 'User',
-        resource_id: 4,
-      },
-    ],
-    username_path: '<a href="/users/4-admin/edit">admin</a>',
-  },
-};
+import TaskInfo from '../TaskInfo';
 
 describe('TaskInfo', () => {
-  describe('rendering', () =>
-    testComponentSnapshotsWithFixtures(TaskInfo, fixtures));
+  it('renders default metadata labels when given minimal props', () => {
+    render(<TaskInfo id="test" />);
+    expect(screen.getByText(/name:/i)).toBeInTheDocument();
+    expect(screen.getByText(/start at:/i)).toBeInTheDocument();
+    expect(screen.getByText(/result:/i)).toBeInTheDocument();
+  });
+
+  it('renders task fields and troubleshooting when full props are provided', () => {
+    render(
+      <TaskInfo
+        id="test"
+        startAt="2019-06-17 16:04:09 +0300"
+        label="Actions::Katello::EventQueue::Monitor"
+        action="Monitor Event Queue"
+        username="admin"
+        startedAt="2019-06-17 16:04:09 +0300"
+        endedAt={null}
+        state="paused"
+        result="error"
+        progress={0.5}
+        help={
+          "A paused task represents a process that has not finished properly. Any task in paused state can lead to potential inconsistency and needs to be resolved.\nThe recommended approach is to investigate the error messages below and in 'errors' tab, address the primary cause of the issue and resume the task."
+        }
+        output={{}}
+        usernamePath=""
+      />
+    );
+    expect(screen.getByText('Monitor Event Queue')).toBeInTheDocument();
+    expect(screen.getByText(/troubleshooting/i)).toBeInTheDocument();
+    expect(
+      screen.getByText(/a paused task represents a process/i)
+    ).toBeInTheDocument();
+    expect(screen.getByText(/^paused$/)).toBeInTheDocument();
+    expect(screen.getByText(/^error$/)).toBeInTheDocument();
+  });
 });

data/webpack/ForemanTasks/Components/TaskDetails/TaskDetails.js

@@ -1,6 +1,6 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import { Tab, Tabs } from 'patternfly-react';
+import { Tabs, Tab, TabTitleText } from '@patternfly/react-core';
 import { translate as __, sprintf } from 'foremanReact/common/I18n';
 import { STATUS } from 'foremanReact/constants';
 import MessageBox from 'foremanReact/components/common/MessageBox';
@@ -31,6 +31,7 @@ const TaskDetails = ({
 }) => {
   const id = getTaskID();
   const { taskReload, status, isLoading } = props;
+  const [activeTabKey, setActiveTabKey] = useState(1);
 
   useEffect(() => {
     taskReloadStart(id);
@@ -58,27 +59,42 @@ const TaskDetails = ({
   }
   const resumable = executionPlan ? executionPlan.state === 'paused' : false;
   const cancellable = executionPlan ? executionPlan.cancellable : false;
+  const lockRecords = locks.concat(links);
+
+  const taskComponentProps = {
+    ...props,
+    cancellable,
+    resumable,
+    id,
+    status,
+    taskProgressToggle,
+    taskReloadStart,
+  };
+
   return (
     <div className="task-details-react well">
-      <Tabs defaultActiveKey={1} animation={false} id="task-details-tabs">
-        <Tab eventKey={1} title={__('Task')}>
-          {isLoading ? (
-            <TaskSkeleton />
-          ) : (
-            <Task
-              {...{
-                ...props,
-                cancellable,
-                resumable,
-                id,
-                status,
-                taskProgressToggle,
-                taskReloadStart,
-              }}
-            />
-          )}
+      <Tabs
+        id="task-details-tabs"
+        ouiaId="task-details-tabs"
+        activeKey={activeTabKey}
+        onSelect={(_event, tabKey) => setActiveTabKey(tabKey)}
+        mountOnEnter
+      >
+        <Tab
+          eventKey={1}
+          title={<TabTitleText>{__('Task')}</TabTitleText>}
+          aria-label={__('Task')}
+          ouiaId="task-details-tab-task"
+        >
+          {isLoading ? <TaskSkeleton /> : <Task {...taskComponentProps} />}
         </Tab>
-        <Tab eventKey={2} disabled={isLoading} title={__('Running Steps')}>
+        <Tab
+          eventKey={2}
+          title={<TabTitleText>{__('Running Steps')}</TabTitleText>}
+          isDisabled={isLoading}
+          aria-label={__('Running Steps')}
+          ouiaId="task-details-tab-running-steps"
+        >
           <RunningSteps
             runningSteps={runningSteps}
             id={id}
@@ -87,16 +103,40 @@ const TaskDetails = ({
             taskReloadStart={taskReloadStart}
           />
         </Tab>
-        <Tab eventKey={3} disabled={isLoading} title={__('Errors')}>
+        <Tab
+          eventKey={3}
+          title={<TabTitleText>{__('Errors')}</TabTitleText>}
+          isDisabled={isLoading}
+          aria-label={__('Errors')}
+          ouiaId="task-details-tab-errors"
+        >
           <Errors executionPlan={executionPlan} failedSteps={failedSteps} />
         </Tab>
-        <Tab eventKey={4} disabled={isLoading} title={__('Locks')}>
-          <Locks locks={locks.concat(links)} />
+        <Tab
+          eventKey={4}
+          title={<TabTitleText>{__('Locks')}</TabTitleText>}
+          isDisabled={isLoading}
+          aria-label={__('Locks')}
+          ouiaId="task-details-tab-locks"
+        >
+          <Locks locks={lockRecords} />
         </Tab>
-        <Tab eventKey={5} disabled={isLoading} title={__('Dependencies')}>
+        <Tab
+          eventKey={5}
+          title={<TabTitleText>{__('Dependencies')}</TabTitleText>}
+          isDisabled={isLoading}
+          aria-label={__('Dependencies')}
+          ouiaId="task-details-tab-dependencies"
+        >
           <Dependencies dependsOn={dependsOn} blocks={blocks} />
         </Tab>
-        <Tab eventKey={6} disabled={isLoading} title={__('Raw')}>
+        <Tab
+          eventKey={6}
+          title={<TabTitleText>{__('Raw')}</TabTitleText>}
+          isDisabled={isLoading}
+          aria-label={__('Raw')}
+          ouiaId="task-details-tab-raw"
+        >
           <Raw
             id={id}
             label={props.label}

data/webpack/ForemanTasks/Components/TaskDetails/__tests__/TaskDetails.test.js

@@ -1,24 +1,48 @@
-import { testComponentSnapshotsWithFixtures } from '@theforeman/test';
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
 
 import TaskDetails from '../TaskDetails';
 import { minProps } from './TaskDetails.fixtures';
 
-const fixtures = {
-  'render with loading Props': { ...minProps, isLoading: true },
-  'render with error Props': {
-    ...minProps,
-    status: 'ERROR',
-    APIerror: { message: 'some-error' },
-  },
-  'render with min Props': minProps,
-};
-
 delete window.location;
 window.location = new URL(
   'https://foreman.com/foreman_tasks/tasks/a15dd820-32f1-4ced-9ab7-c0fab8234c47/'
 );
 
 describe('TaskDetails', () => {
-  describe('rendering', () =>
-    testComponentSnapshotsWithFixtures(TaskDetails, fixtures));
+  it('shows error message when status is ERROR', () => {
+    render(
+      <TaskDetails
+        {...minProps}
+        status="ERROR"
+        APIerror={{ message: 'some-error' }}
+      />
+    );
+    expect(
+      screen.getByText(/could not receive data: some-error/i)
+    ).toBeInTheDocument();
+  });
+
+  it('shows skeleton while loading on the Task tab', () => {
+    const { container } = render(<TaskDetails {...minProps} isLoading />);
+    expect(
+      container.querySelector('.react-loading-skeleton')
+    ).toBeInTheDocument();
+  });
+
+  it('renders six tabs with expected labels', () => {
+    render(<TaskDetails {...minProps} />);
+    expect(document.getElementById('task-details-tabs')).toBeInTheDocument();
+    expect(screen.getByRole('tab', { name: /^task$/i })).toBeInTheDocument();
+    expect(
+      screen.getByRole('tab', { name: /running steps/i })
+    ).toBeInTheDocument();
+    expect(screen.getByRole('tab', { name: /errors/i })).toBeInTheDocument();
+    expect(screen.getByRole('tab', { name: /locks/i })).toBeInTheDocument();
+    expect(
+      screen.getByRole('tab', { name: /dependencies/i })
+    ).toBeInTheDocument();
+    expect(screen.getByRole('tab', { name: /raw/i })).toBeInTheDocument();
+  });
 });

data/webpack/ForemanTasks/Components/TaskDetails/__tests__/TaskDetailsActions.test.js

@@ -1,9 +1,12 @@
-import { testActionSnapshotWithFixtures } from '@theforeman/test';
 import {
   taskReloadStop,
   taskReloadStart,
   cancelStep,
 } from '../TaskDetailsActions';
+import {
+  FOREMAN_TASK_DETAILS,
+  TASK_STEP_CANCEL,
+} from '../TaskDetailsConstants';
 
 jest.mock('foremanReact/components/ToastsList', () => ({
   addToast: toast => ({
@@ -14,11 +17,53 @@ jest.mock('foremanReact/components/ToastsList', () => ({
   }),
 }));
 
-const fixtures = {
-  'should start reload': () => taskReloadStart(1),
-  'should stop reload': () => taskReloadStop(),
-  'should cancelStep': () => cancelStep('task-id', 'step-id'),
-};
+describe('TaskDetails - Actions', () => {
+  it('should stop reload', () => {
+    expect(taskReloadStop()).toEqual({
+      type: 'STOP_INTERVAL',
+      key: FOREMAN_TASK_DETAILS,
+    });
+  });
+
+  it('should start reload', () => {
+    const dispatch = jest.fn();
+    taskReloadStart(1)(dispatch);
+
+    expect(dispatch).toHaveBeenCalledTimes(1);
+    const [action] = dispatch.mock.calls[0];
+    expect(action.type).toBe('API_GET');
+    expect(action.interval).toBe(5000);
+    expect(action.payload.key).toBe(FOREMAN_TASK_DETAILS);
+    expect(action.payload.url).toBe(
+      '/foreman_tasks/api/tasks/1/details?include_permissions'
+    );
+    expect(action.payload.handleSuccess).toEqual(expect.any(Function));
+    expect(action.payload.handleError).toEqual(expect.any(Function));
+  });
+
+  it('should cancelStep', async () => {
+    const dispatch = jest.fn();
+    await cancelStep('task-id', 'step-id')(dispatch);
+
+    expect(dispatch).toHaveBeenCalledTimes(2);
+
+    expect(dispatch.mock.calls[0][0]).toEqual({
+      type: 'TOASTS_ADD',
+      payload: {
+        message: {
+          message: 'Trying to cancel step step-id',
+          type: 'info',
+        },
+      },
+    });
 
-describe('TaskDetails - Actions', () =>
-  testActionSnapshotWithFixtures(fixtures));
+    const postAction = dispatch.mock.calls[1][0];
+    expect(postAction.type).toBe('API_POST');
+    expect(postAction.payload.key).toBe(TASK_STEP_CANCEL);
+    expect(postAction.payload.url).toBe(
+      '/foreman_tasks/tasks/task-id/cancel_step?step_id=step-id'
+    );
+    expect(postAction.payload.handleSuccess).toEqual(expect.any(Function));
+    expect(postAction.payload.handleError).toEqual(expect.any(Function));
+  });
+});

data/webpack/ForemanTasks/Components/TasksDashboard/Components/TasksCardsGrid/Components/PausedTasksCard/PausedTasksCard.test.js

@@ -1,11 +1,57 @@
-import { testComponentSnapshotsWithFixtures } from '@theforeman/test';
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import { TASKS_DONUT_CHART_FOCUSED_ON_OPTIONS } from '../TasksDonutChart/TasksDonutChartConstants';
 
 import PausedTasksCard from './PausedTasksCard';
 
-const fixtures = {
-  'render with minimal props': {},
-  'render with some props': { some: 'prop' },
-};
+jest.mock('../TasksDonutChart/TasksDonutChart', () => {
+  const React = require('react');
+  const Stub = props => (
+    <div
+      data-testid="tasks-donut-chart-stub"
+      data-last={props.last}
+      data-older={props.older}
+      data-focused-on={props.focusedOn}
+    />
+  );
+  Stub.displayName = 'TasksDonutChart';
+  return Stub;
+});
+
+describe('PausedTasksCard', () => {
+  it('renders Paused title, card id, and chart area', () => {
+    render(<PausedTasksCard />);
+    expect(screen.getByText('Paused')).toBeInTheDocument();
+    expect(document.getElementById('paused-tasks-card')).toBeInTheDocument();
+    const chart = screen.getByTestId('tasks-donut-chart-stub');
+    expect(chart).toHaveAttribute('data-last', '0');
+    expect(chart).toHaveAttribute('data-older', '0');
+    expect(chart).toHaveAttribute(
+      'data-focused-on',
+      TASKS_DONUT_CHART_FOCUSED_ON_OPTIONS.NORMAL
+    );
+  });
+
+  it('forwards extra props to the underlying donut card', () => {
+    const updateQuery = jest.fn();
+    render(
+      <PausedTasksCard
+        updateQuery={updateQuery}
+        data={{ last: 1, older: 2 }}
+        query={{ state: 'paused' }}
+      />
+    );
+    const chart = screen.getByTestId('tasks-donut-chart-stub');
+    expect(chart).toHaveAttribute('data-last', '1');
+    expect(chart).toHaveAttribute('data-older', '2');
+    expect(chart).toHaveAttribute(
+      'data-focused-on',
+      TASKS_DONUT_CHART_FOCUSED_ON_OPTIONS.TOTAL
+    );
 
-describe('PausedTasksCard', () =>
-  testComponentSnapshotsWithFixtures(PausedTasksCard, fixtures));
+    fireEvent.click(screen.getByText('Paused'));
+    expect(updateQuery).toHaveBeenCalledWith({ state: 'paused' });
+  });
+});

data/webpack/ForemanTasks/Components/TasksDashboard/Components/TasksCardsGrid/Components/RunningTasksCard/RunningTasksCard.test.js

@@ -1,11 +1,57 @@
-import { testComponentSnapshotsWithFixtures } from '@theforeman/test';
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import { TASKS_DONUT_CHART_FOCUSED_ON_OPTIONS } from '../TasksDonutChart/TasksDonutChartConstants';
 
 import RunningTasksCard from './RunningTasksCard';
 
-const fixtures = {
-  'render with minimal props': {},
-  'render with some props': { some: 'prop' },
-};
+jest.mock('../TasksDonutChart/TasksDonutChart', () => {
+  const React = require('react');
+  const Stub = props => (
+    <div
+      data-testid="tasks-donut-chart-stub"
+      data-last={props.last}
+      data-older={props.older}
+      data-focused-on={props.focusedOn}
+    />
+  );
+  Stub.displayName = 'TasksDonutChart';
+  return Stub;
+});
+
+describe('RunningTasksCard', () => {
+  it('renders Running title, card id, and chart area', () => {
+    render(<RunningTasksCard />);
+    expect(screen.getByText('Running')).toBeInTheDocument();
+    expect(document.getElementById('running-tasks-card')).toBeInTheDocument();
+    const chart = screen.getByTestId('tasks-donut-chart-stub');
+    expect(chart).toHaveAttribute('data-last', '0');
+    expect(chart).toHaveAttribute('data-older', '0');
+    expect(chart).toHaveAttribute(
+      'data-focused-on',
+      TASKS_DONUT_CHART_FOCUSED_ON_OPTIONS.NORMAL
+    );
+  });
+
+  it('forwards extra props to the underlying donut card', () => {
+    const updateQuery = jest.fn();
+    render(
+      <RunningTasksCard
+        updateQuery={updateQuery}
+        data={{ last: 2, older: 4 }}
+        query={{ state: 'running' }}
+      />
+    );
+    const chart = screen.getByTestId('tasks-donut-chart-stub');
+    expect(chart).toHaveAttribute('data-last', '2');
+    expect(chart).toHaveAttribute('data-older', '4');
+    expect(chart).toHaveAttribute(
+      'data-focused-on',
+      TASKS_DONUT_CHART_FOCUSED_ON_OPTIONS.TOTAL
+    );
 
-describe('RunningTasksCard', () =>
-  testComponentSnapshotsWithFixtures(RunningTasksCard, fixtures));
+    fireEvent.click(screen.getByText('Running'));
+    expect(updateQuery).toHaveBeenCalledWith({ state: 'running' });
+  });
+});

data/webpack/ForemanTasks/Components/TasksDashboard/Components/TasksCardsGrid/Components/ScheduledTasksCard/ScheduledTasksCard.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Card } from 'patternfly-react';
+import { Card, CardTitle, CardBody } from '@patternfly/react-core';
 import classNames from 'classnames';
 import { noop } from 'foremanReact/common/helpers';
 import { translate as __ } from 'foremanReact/common/I18n';
@@ -32,14 +32,15 @@ const ScheduledTasksCard = ({
       )}
       {...props}
       id="scheduled-tasks-card"
+      ouiaId="scheduled-tasks-card"
     >
-      <Card.Title onClick={onClick}>{__('Scheduled')}</Card.Title>
-      <Card.Body>
+      <CardTitle onClick={onClick}>{__('Scheduled')}</CardTitle>
+      <CardBody>
         <div className="scheduled-data" onClick={onClick}>
           {data}
           <p>{__('Total')}</p>
         </div>
-      </Card.Body>
+      </CardBody>
     </Card>
   );
 };

data/webpack/ForemanTasks/Components/TasksDashboard/Components/TasksCardsGrid/Components/ScheduledTasksCard/ScheduledTasksCard.test.js

@@ -1,18 +1,48 @@
-import { testComponentSnapshotsWithFixtures } from '@theforeman/test';
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
 
 import { TASKS_DASHBOARD_AVAILABLE_QUERY_STATES } from '../../../../TasksDashboardConstants';
 import ScheduledTasksCard from './ScheduledTasksCard';
 
-const fixtures = {
-  'render with minimal props': {},
-  'render with props': {
-    data: 3,
-    className: 'some-class',
-  },
-  'render selected': {
-    query: { state: TASKS_DASHBOARD_AVAILABLE_QUERY_STATES.SCHEDULED },
-  },
-};
-
-describe('ScheduledTasksCard', () =>
-  testComponentSnapshotsWithFixtures(ScheduledTasksCard, fixtures));
+const { SCHEDULED } = TASKS_DASHBOARD_AVAILABLE_QUERY_STATES;
+
+describe('ScheduledTasksCard', () => {
+  it('renders scheduled count, labels, and card structure', () => {
+    render(<ScheduledTasksCard data={3} />);
+    expect(screen.getByText('Scheduled')).toBeInTheDocument();
+    expect(screen.getByText('Total')).toBeInTheDocument();
+    expect(document.getElementById('scheduled-tasks-card')).toBeInTheDocument();
+    expect(document.querySelector('.scheduled-data')?.textContent).toContain(
+      '3'
+    );
+  });
+
+  it('merges optional className onto the card', () => {
+    const { container } = render(
+      <ScheduledTasksCard className="extra-scheduled-class" />
+    );
+    expect(container.querySelector('.extra-scheduled-class')).toBeInTheDocument();
+  });
+
+  it('marks the card selected when query state is scheduled', () => {
+    const { container } = render(
+      <ScheduledTasksCard query={{ state: SCHEDULED }} />
+    );
+    expect(container.querySelector('#scheduled-tasks-card')).toHaveClass(
+      'selected-tasks-card'
+    );
+  });
+
+  it('calls updateQuery with scheduled state when title or data area is clicked', () => {
+    const updateQuery = jest.fn();
+    render(<ScheduledTasksCard updateQuery={updateQuery} />);
+
+    fireEvent.click(screen.getByText('Scheduled'));
+    expect(updateQuery).toHaveBeenCalledWith({ state: SCHEDULED });
+
+    updateQuery.mockClear();
+    fireEvent.click(document.querySelector('.scheduled-data'));
+    expect(updateQuery).toHaveBeenCalledWith({ state: SCHEDULED });
+  });
+});

data/webpack/ForemanTasks/Components/TasksDashboard/Components/TasksCardsGrid/Components/StoppedTasksCard/StoppedTasksCard.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Card } from 'patternfly-react';
+import { Card, CardTitle, CardBody } from '@patternfly/react-core';
 import classNames from 'classnames';
 import { noop } from 'foremanReact/common/helpers';
 import { translate as __ } from 'foremanReact/common/I18n';
@@ -38,11 +38,12 @@ const StoppedTasksCard = ({
       )}
       {...props}
       id="stopped-tasks-card"
+      ouiaId="stopped-tasks-card"
     >
-      <Card.Title onClick={() => updateQuery({ state: STOPPED })}>
+      <CardTitle onClick={() => updateQuery({ state: STOPPED })}>
         {__('Stopped')}
-      </Card.Title>
-      <Card.Body>
+      </CardTitle>
+      <CardBody>
         <React.Fragment>
           <StoppedTable
             data={data.results}
@@ -56,7 +57,7 @@ const StoppedTasksCard = ({
             query={query}
           />
         </React.Fragment>
-      </Card.Body>
+      </CardBody>
     </Card>
   );
 };

data/webpack/ForemanTasks/Components/TasksDashboard/Components/TasksCardsGrid/Components/TasksDonutCard/TasksDonutCard.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { Card } from 'patternfly-react';
+import { Card, CardTitle, CardBody } from '@patternfly/react-core';
 import { noop } from 'foremanReact/common/helpers';
 
 import {
@@ -42,9 +42,10 @@ const TasksDonutCard = ({
         'not-focused': focusedOn === TASKS_DONUT_CHART_FOCUSED_ON_OPTIONS.NONE,
       })}
       {...props}
+      ouiaId="tasks-donut-card"
     >
-      <Card.Title onClick={onTotalClick}>{title}</Card.Title>
-      <Card.Body>
+      <CardTitle onClick={onTotalClick}>{title}</CardTitle>
+      <CardBody className="card-pf-body">
         <TasksDonutChart
           last={data.last}
           older={data.older}
@@ -66,7 +67,7 @@ const TasksDonutCard = ({
             })
           }
         />
-      </Card.Body>
+      </CardBody>
     </Card>
   );
 };