foreman-tasks 12.1.1 → 12.2.2

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

@@ -1,208 +1,227 @@
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import { Grid, Row, Col, ProgressBar } from 'patternfly-react';
+import {
+  Grid,
+  GridItem,
+  Progress,
+  ProgressVariant,
+  Icon,
+} from '@patternfly/react-core';
+import {
+  CheckCircleIcon,
+  ExclamationCircleIcon,
+  ExclamationTriangleIcon,
+  QuestionCircleIcon,
+} from '@patternfly/react-icons';
 import { translate as __ } from 'foremanReact/common/I18n';
 import RelativeDateTime from 'foremanReact/components/common/dates/RelativeDateTime';
 
-class TaskInfo extends Component {
-  isDelayed = () => {
-    const startAt = new Date(this.props.startAt);
-    const startedAt = new Date(this.props.startedAt);
-    startAt.setMilliseconds(0);
-    startedAt.setMilliseconds(0);
-    return startAt.getTime() !== startedAt.getTime();
-  };
-  resultIcon = () => {
-    if (this.props.state !== 'stopped') return 'task-status pficon-help';
-    const { result } = this.props;
-    let icon;
-    switch (result) {
-      case 'success':
-        icon = 'pficon-ok';
-        break;
-      case 'error':
-        icon = 'pficon-error-circle-o';
-        break;
-      case 'warning':
-        icon = 'pficon-ok status-warn';
-        break;
-      default:
-        icon = 'pficon-help';
-        break;
-    }
-    return `task-status ${icon}`;
-  };
-
-  progressBarType = () => {
-    const { result } = this.props;
-    switch (result) {
-      case 'error':
-        return 'danger';
-      case 'success':
-        return 'success';
-      case 'warning':
-        return 'warning';
-      default:
-        return null;
-    }
-  };
-
-  render() {
-    const {
-      action,
-      endedAt,
-      result,
-      startAt,
-      startBefore,
-      startedAt,
-      state,
-      help,
-      output,
-      errors,
-      progress,
-      username,
-      usernamePath,
-    } = this.props;
+const isDelayed = ({ startAt, startedAt }) => {
+  if (
+    startAt == null ||
+    startedAt == null ||
+    startAt === '' ||
+    startedAt === ''
+  ) {
+    return false;
+  }
+  const a = new Date(startAt);
+  const b = new Date(startedAt);
+  if (Number.isNaN(a.getTime()) || Number.isNaN(b.getTime())) {
+    return false;
+  }
+  a.setMilliseconds(0);
+  b.setMilliseconds(0);
+  return a.getTime() !== b.getTime();
+};
 
-    const details = [
-      [
-        {
-          title: 'Name',
-          value: action || __('N/A'),
-          className: 'details-name',
-        },
-        {
-          title: 'Start at',
-          value: <RelativeDateTime defaultValue={__('N/A')} date={startAt} />,
-        },
-      ],
-      [
-        {
-          title: 'Result',
-          value: (
-            <React.Fragment>
-              <i className={this.resultIcon()} />
-              <span> {result}</span>
-            </React.Fragment>
-          ),
-        },
-        {
-          title: 'Started at',
-          value: <RelativeDateTime defaultValue={__('N/A')} date={startedAt} />,
-        },
-      ],
-      [
-        {
-          title: 'Triggered by',
-          value: (usernamePath || '').includes('href') ? (
-            <a href={usernamePath.split('"')[1]}>{username}</a>
-          ) : (
-            username || ''
-          ),
-        },
-        {
-          title: 'Ended at',
-          value: <RelativeDateTime defaultValue={__('N/A')} date={endedAt} />,
-        },
-      ],
-      [
-        {
-          title: 'Execution type',
-          value: __(this.isDelayed() ? 'Delayed' : 'Immediate'),
-        },
-        {
-          title: 'Start before',
-          value: startBefore ? (
-            <RelativeDateTime defaultValue={__('N/A')} date={startBefore} />
-          ) : (
-            '-'
-          ),
-        },
-      ],
-    ];
+const resultIconEl = (state, result) => {
+  if (state !== 'stopped')
     return (
-      <Grid>
-        <br />
-        {details.map((items, key) => (
-          <Row key={key}>
-            <Col md={2} sm={6}>
-              <span className="list-group-item-heading">
-                {__(items[0].title)}:
-              </span>
-            </Col>
-            <Col md={5} sm={6} className={items[0].className}>
-              <span>{items[0].value}</span>
-            </Col>
-            <Col md={2} sm={6}>
-              <span className="list-group-item-heading">
-                {__(items[1].title)}:
-              </span>
-            </Col>
-            <Col md={3} sm={6} className={items[1].className}>
-              {items[1].value}
-            </Col>
-          </Row>
-        ))}
-        <br />
-        <Row>
-          <Col xs={6}>
-            <div className="progress-description">
-              <span className="list-group-item-heading">{__('State')}: </span>
-              {state}
-            </div>
-          </Col>
-          <Col xs={3} xsOffset={3} className="progress-label-top-right">
-            <span>{`${progress}% ${__('Complete')}`}</span>
-          </Col>
-          <Col xs={12}>
-            <ProgressBar
-              now={progress}
-              bsStyle={this.progressBarType()}
-              striped
-            />
-          </Col>
-        </Row>
-        <br />
-        {help && (
-          <Row>
-            <Col xs={12}>
-              <p>
-                <span>
-                  <b>{__('Troubleshooting')}</b>
-                </span>
-              </p>
-              <p dangerouslySetInnerHTML={{ __html: help }} />
-            </Col>
-          </Row>
-        )}
-        {output && output.length > 0 && (
-          <Row>
-            <Col xs={12}>
-              <p>
-                <span>
-                  <b>{__('Output:')}</b>
-                </span>
-              </p>
-              <pre>{output}</pre>
-            </Col>
-          </Row>
-        )}
-        {errors && errors.length > 0 && (
-          <Row>
-            <Col xs={12}>
-              <div>
-                <span>
-                  <b>{__('Errors:')}</b>
-                </span>
-              </div>
-              <pre>{errors}</pre>
-            </Col>
-          </Row>
-        )}
-      </Grid>
+      <Icon>
+        <QuestionCircleIcon />
+      </Icon>
     );
+  switch (result) {
+    case 'success':
+      return (
+        <Icon status="success">
+          <CheckCircleIcon />
+        </Icon>
+      );
+    case 'error':
+      return (
+        <Icon status="danger">
+          <ExclamationCircleIcon />
+        </Icon>
+      );
+    case 'warning':
+      return (
+        <Icon status="warning">
+          <ExclamationTriangleIcon />
+        </Icon>
+      );
+    default:
+      return (
+        <Icon>
+          <QuestionCircleIcon />
+        </Icon>
+      );
+  }
+};
+
+const progressVariantForResult = result => {
+  switch (result) {
+    case 'error':
+      return ProgressVariant.danger;
+    case 'success':
+      return ProgressVariant.success;
+    case 'warning':
+      return ProgressVariant.warning;
+    default:
+      return undefined;
   }
-}
+};
+
+const TaskInfo = props => {
+  const {
+    action,
+    endedAt,
+    result,
+    startAt,
+    startBefore,
+    startedAt,
+    state,
+    help,
+    output,
+    errors,
+    progress,
+    username,
+    usernamePath,
+  } = props;
+
+  const details = [
+    [
+      {
+        title: 'Name',
+        value: action || __('N/A'),
+        className: 'details-name',
+      },
+      {
+        title: 'Start at',
+        value: <RelativeDateTime defaultValue={__('N/A')} date={startAt} />,
+      },
+    ],
+    [
+      {
+        title: 'Result',
+        value: (
+          <span>
+            {resultIconEl(state, result)} {result}
+          </span>
+        ),
+      },
+      {
+        title: 'Started at',
+        value: <RelativeDateTime defaultValue={__('N/A')} date={startedAt} />,
+      },
+    ],
+    [
+      {
+        title: 'Triggered by',
+        value: (usernamePath || '').includes('href') ? (
+          <a href={usernamePath.split('"')[1]}>{username}</a>
+        ) : (
+          username || ''
+        ),
+      },
+      {
+        title: 'Ended at',
+        value: <RelativeDateTime defaultValue={__('N/A')} date={endedAt} />,
+      },
+    ],
+    [
+      {
+        title: 'Execution type',
+        value: __(isDelayed(props) ? 'Delayed' : 'Immediate'),
+      },
+      {
+        title: 'Start before',
+        value: startBefore ? (
+          <RelativeDateTime defaultValue={__('N/A')} date={startBefore} />
+        ) : (
+          '-'
+        ),
+      },
+    ],
+  ];
+
+  const progVariant = progressVariantForResult(result);
+
+  return (
+    <Grid>
+      <GridItem span={12} className="pf-v5-u-pb-lg" />
+      {details.map((items, key) => (
+        <React.Fragment key={key}>
+          <GridItem md={2} sm={6}>
+            <span className="list-group-item-heading">
+              {__(items[0].title)}:
+            </span>
+          </GridItem>
+          <GridItem md={5} sm={6} className={items[0].className}>
+            <span>{items[0].value}</span>
+          </GridItem>
+          <GridItem md={2} sm={6}>
+            <span className="list-group-item-heading">
+              {__(items[1].title)}:
+            </span>
+          </GridItem>
+          <GridItem md={3} sm={6} className={items[1].className}>
+            {items[1].value}
+          </GridItem>
+        </React.Fragment>
+      ))}
+      <GridItem span={12} className="pf-v5-u-pb-lg" />
+      <GridItem span={6}>
+        <div className="progress-description">
+          <span className="list-group-item-heading">{__('State')}: </span>
+          {state}
+        </div>
+      </GridItem>
+      <GridItem span={6} className="progress-label-top-right">
+        <span>{`${progress}% ${__('Complete')}`}</span>
+      </GridItem>
+      <GridItem span={12}>
+        <Progress
+          value={progress}
+          max={100}
+          aria-label={`${progress}% ${__('Complete')}`}
+          measureLocation="outside"
+          {...(progVariant ? { variant: progVariant } : {})}
+        />
+      </GridItem>
+      <GridItem span={12} className="pf-v5-u-pb-lg" />
+      {help && (
+        <GridItem span={12}>
+          <b>{__('Troubleshooting')}</b>
+          <p dangerouslySetInnerHTML={{ __html: help }} />
+        </GridItem>
+      )}
+      {output && output.length > 0 && (
+        <GridItem span={12}>
+          <b>{__('Output:')}</b>
+          <pre>{output}</pre>
+        </GridItem>
+      )}
+      {errors && errors.length > 0 && (
+        <GridItem span={12}>
+          <b>{__('Errors:')}</b>
+          <pre>{errors}</pre>
+        </GridItem>
+      )}
+    </Grid>
+  );
+};
 
 TaskInfo.propTypes = {
   action: PropTypes.string,
@@ -217,10 +236,7 @@ TaskInfo.propTypes = {
   progress: PropTypes.number,
   username: PropTypes.string,
   usernamePath: PropTypes.string,
-  output: PropTypes.PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.shape({}),
-  ]),
+  output: PropTypes.oneOfType([PropTypes.string, PropTypes.shape({})]),
 };
 
 TaskInfo.defaultProps = {

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

@@ -1,48 +1,44 @@
 import React from 'react';
 import Skeleton from 'react-loading-skeleton';
-import { Grid, Row, Col } from 'patternfly-react';
+import { Grid, GridItem } from '@patternfly/react-core';
 
 export const TaskSkeleton = () => {
-  const details = [1, 2, 3, 4, 5, 6];
+  const details = [1, 2, 3, 4];
   return (
-    <Grid>
-      <br />
-      <Row>
-        <Col>
-          <Skeleton />
-        </Col>
-      </Row>
-      {details.map((items, key) => (
-        <Row key={key}>
-          <Col md={2} sm={6}>
+    <Grid hasGutter>
+      <GridItem span={12} className="pf-v5-u-pb-lg" />
+      <GridItem span={12}>
+        <Skeleton />
+      </GridItem>
+      {details.map(key => (
+        <React.Fragment key={key}>
+          <GridItem md={2} sm={6}>
             <Skeleton />
-          </Col>
-          <Col md={5} sm={6}>
+          </GridItem>
+          <GridItem md={5} sm={6}>
             <Skeleton />
-          </Col>
-          <Col md={2} sm={6}>
+          </GridItem>
+          <GridItem md={2} sm={6}>
             <Skeleton />
-          </Col>
-          <Col md={3} sm={6}>
+          </GridItem>
+          <GridItem md={3} sm={6}>
             <Skeleton />
-          </Col>
-        </Row>
+          </GridItem>
+        </React.Fragment>
       ))}
-      <br />
-      <Row>
-        <Col xs={6}>
-          <div className="progress-description">
-            <Skeleton />
-          </div>
-        </Col>
-        <Col xs={3} xsOffset={3} className="progress-label-top-right">
-          <Skeleton />
-        </Col>
-        <Col xs={12}>
+      <GridItem span={12} className="pf-v5-u-pb-lg" />
+      <GridItem span={6}>
+        <div className="progress-description">
           <Skeleton />
-        </Col>
-      </Row>
-      <br />
+        </div>
+      </GridItem>
+      <GridItem span={6} className="progress-label-top-right">
+        <Skeleton />
+      </GridItem>
+      <GridItem span={12}>
+        <Skeleton />
+      </GridItem>
+      <GridItem span={12} className="pf-v5-u-pb-lg" />
     </Grid>
   );
 };

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

@@ -1,17 +1,25 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { render, screen, within } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
 import Dependencies from '../Dependencies';
 
 describe('Dependencies', () => {
-  it('should render with no dependencies', () => {
-    const wrapper = mount(<Dependencies dependsOn={[]} blocks={[]} />);
-    expect(wrapper.find('Alert')).toHaveLength(1);
-    expect(wrapper.find('DependencyTable')).toHaveLength(2);
-    expect(wrapper.find('Table')).toHaveLength(0);
-    expect(wrapper.text()).toContain('None');
+  it('renders both sections with empty placeholders when there are no tasks', () => {
+    render(<Dependencies dependsOn={[]} blocks={[]} />);
+
+    expect(
+      screen.getByRole('heading', { name: /task depends on/i })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('heading', { name: /task blocks/i })
+    ).toBeInTheDocument();
+
+    expect(screen.getAllByText(/^none$/i)).toHaveLength(2);
+    expect(screen.queryByRole('grid')).not.toBeInTheDocument();
   });
 
-  it('should render with depends_on dependencies', () => {
+  it('renders depends-on tasks in the first grid', () => {
     const dependsOn = [
       {
         id: '123',
@@ -28,16 +36,39 @@ describe('Dependencies', () => {
         result: 'pending',
       },
     ];
-    const wrapper = mount(<Dependencies dependsOn={dependsOn} blocks={[]} />);
-    expect(wrapper.find('Table')).toHaveLength(1);
-    expect(wrapper.find('Tbody').find('Tr')).toHaveLength(2);
-    expect(wrapper.text()).toContain('Foo Bar Action');
-    expect(wrapper.text()).toContain('Baz Qux Action');
-    expect(wrapper.text()).toContain('stopped');
-    expect(wrapper.text()).toContain('success');
+
+    render(<Dependencies dependsOn={dependsOn} blocks={[]} />);
+
+    const dependsGrid = screen.getByRole('grid', {
+      name: /task depends on/i,
+    });
+    expect(screen.queryAllByRole('grid')).toHaveLength(1);
+
+    expect(
+      within(dependsGrid).getByRole('columnheader', { name: /^name$/i })
+    ).toBeInTheDocument();
+
+    const bodyRows = within(dependsGrid)
+      .getAllByRole('row')
+      .slice(1);
+    expect(bodyRows).toHaveLength(2);
+
+    expect(
+      screen.getByRole('link', { name: 'Foo Bar Action' })
+    ).toHaveAttribute('href', '/foreman_tasks/tasks/123');
+    expect(
+      screen.getByRole('link', { name: 'Baz Qux Action' })
+    ).toHaveAttribute('href', '/foreman_tasks/tasks/456');
+
+    expect(within(dependsGrid).getByText('Stopped')).toBeInTheDocument();
+    expect(within(dependsGrid).getByText('Success')).toBeInTheDocument();
+    expect(within(dependsGrid).getByText('Running')).toBeInTheDocument();
+    expect(within(dependsGrid).getByText('Pending')).toBeInTheDocument();
+
+    expect(screen.getAllByText(/^none$/i)).toHaveLength(1);
   });
 
-  it('should render with blocks dependencies', () => {
+  it('renders blocks in the second grid', () => {
     const blocks = [
       {
         id: '789',
@@ -47,15 +78,28 @@ describe('Dependencies', () => {
         result: 'warning',
       },
     ];
-    const wrapper = mount(<Dependencies dependsOn={[]} blocks={blocks} />);
-    expect(wrapper.find('Table')).toHaveLength(1);
-    expect(wrapper.find('Tbody').find('Tr')).toHaveLength(1);
-    expect(wrapper.text()).toContain('Test Action');
-    expect(wrapper.text()).toContain('paused');
-    expect(wrapper.text()).toContain('warning');
+
+    render(<Dependencies dependsOn={[]} blocks={blocks} />);
+
+    const blocksGrid = screen.getByRole('grid', { name: /task blocks/i });
+    expect(screen.queryAllByRole('grid')).toHaveLength(1);
+
+    const bodyRows = within(blocksGrid)
+      .getAllByRole('row')
+      .slice(1);
+    expect(bodyRows).toHaveLength(1);
+
+    expect(screen.getByRole('link', { name: 'Test Action' })).toHaveAttribute(
+      'href',
+      '/foreman_tasks/tasks/789'
+    );
+    expect(within(blocksGrid).getByText('Paused')).toBeInTheDocument();
+    expect(within(blocksGrid).getByText('Warning')).toBeInTheDocument();
+
+    expect(screen.getAllByText(/^none$/i)).toHaveLength(1);
   });
 
-  it('should render with both dependency types', () => {
+  it('renders both grids when dependsOn and blocks are present', () => {
     const dependsOn = [
       {
         id: '123',
@@ -81,12 +125,29 @@ describe('Dependencies', () => {
         result: 'error',
       },
     ];
-    const wrapper = mount(
-      <Dependencies dependsOn={dependsOn} blocks={blocks} />
+
+    render(<Dependencies dependsOn={dependsOn} blocks={blocks} />);
+
+    expect(
+      screen.getByRole('grid', { name: /task depends on/i })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('grid', { name: /task blocks/i })
+    ).toBeInTheDocument();
+
+    expect(screen.getByRole('link', { name: 'Foo Action' })).toHaveAttribute(
+      'href',
+      '/foreman_tasks/tasks/123'
+    );
+    expect(screen.getByRole('link', { name: 'Bar Action' })).toHaveAttribute(
+      'href',
+      '/foreman_tasks/tasks/456'
     );
-    expect(wrapper.find('Table')).toHaveLength(2);
-    expect(wrapper.text()).toContain('Foo Action');
-    expect(wrapper.text()).toContain('Bar Action');
-    expect(wrapper.text()).toContain('Baz Action');
+    expect(screen.getByRole('link', { name: 'Baz Action' })).toHaveAttribute(
+      'href',
+      '/foreman_tasks/tasks/789'
+    );
+
+    expect(screen.queryByText(/^none$/i)).not.toBeInTheDocument();
   });
 });