foreman-tasks 12.2.4 → 13.1.0

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

@@ -1,76 +1,40 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import {
+  ClipboardCopy,
+  ExpandableSection,
+  ExpandableSectionToggle,
+  Flex,
+  FlexItem,
   Grid,
   GridItem,
   Progress,
   ProgressVariant,
-  Icon,
+  Split,
+  SplitItem,
+  Text,
+  TextVariants,
 } from '@patternfly/react-core';
-import {
-  CheckCircleIcon,
-  ExclamationCircleIcon,
-  ExclamationTriangleIcon,
-  QuestionCircleIcon,
-} from '@patternfly/react-icons';
-import { translate as __ } from 'foremanReact/common/I18n';
+import capitalize from 'lodash/capitalize';
+import { translate as __, sprintf } from 'foremanReact/common/I18n';
 import RelativeDateTime from 'foremanReact/components/common/dates/RelativeDateTime';
 
-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();
-};
+import { taskResultIconEl } from '../../common/taskResultIcon';
+import {
+  formatTaskDuration,
+  isDelayed,
+  parseUsernameLinkHref,
+} from './TaskHelper';
 
-const resultIconEl = (state, result) => {
-  if (state !== 'stopped')
-    return (
-      <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 formatResultLabel = result => {
+  if (!result || typeof result !== 'string') {
+    return __('N/A');
   }
+
+  return capitalize(result);
 };
 
-const progressVariantForResult = result => {
+const progressVariant = result => {
   switch (result) {
     case 'error':
       return ProgressVariant.danger;
@@ -83,140 +47,234 @@ const progressVariantForResult = result => {
   }
 };
 
+const MetadataField = ({ title, value, className, labelOuiaId, span }) => (
+  <GridItem
+    {...(span ? { span } : { xl: 2, lg: 4, md: 6, sm: 12 })}
+    className={className}
+  >
+    <Flex
+      direction={{ default: 'column' }}
+      spaceItems={{ default: 'spaceItemsXs' }}
+    >
+      <FlexItem>
+        <Text ouiaId={labelOuiaId} component={TextVariants.small}>
+          {title}
+        </Text>
+      </FlexItem>
+      <FlexItem>{value}</FlexItem>
+    </Flex>
+  </GridItem>
+);
+
+MetadataField.propTypes = {
+  title: PropTypes.node.isRequired,
+  value: PropTypes.node.isRequired,
+  className: PropTypes.string,
+  labelOuiaId: PropTypes.string.isRequired,
+  span: PropTypes.number,
+};
+
+MetadataField.defaultProps = {
+  className: undefined,
+  span: undefined,
+};
+
+const copyableText = text =>
+  text ? (
+    <ClipboardCopy
+      variant="inline-compact"
+      hoverTip={__('Copy')}
+      clickTip={__('Copied')}
+    >
+      {text}
+    </ClipboardCopy>
+  ) : (
+    __('N/A')
+  );
+
 const TaskInfo = props => {
   const {
     action,
     endedAt,
+    externalId,
+    id,
+    label,
     result,
     startAt,
-    startBefore,
     startedAt,
+    startBefore,
     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 [isExpanded, setIsExpanded] = useState(false);
+  const baseId = id || 'task-info';
+  const contentId = `${baseId}-more-details-content`;
+  const toggleId = `${baseId}-more-details-toggle`;
+
+  const usernameHref = parseUsernameLinkHref(usernamePath)?.startsWith('/')
+    ? parseUsernameLinkHref(usernamePath)
+    : null;
+  const triggeredBy = usernameHref ? (
+    <a href={usernameHref}>{username}</a>
+  ) : (
+    username || ''
+  );
 
-  const progVariant = progressVariantForResult(result);
+  const progVariant = progressVariant(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>
+    <Grid className="task-details-overview" hasGutter>
+      <MetadataField
+        labelOuiaId="task-info-metadata-result-label"
+        title={__('Result')}
+        value={
+          <>
+            {taskResultIconEl(state, result)}
+            <span> {formatResultLabel(result)}</span>
+          </>
+        }
+      />
+      <MetadataField
+        labelOuiaId="task-info-metadata-state-label"
+        title={__('State')}
+        value={capitalize(state) || __('N/A')}
+      />
+      <MetadataField
+        labelOuiaId="task-info-metadata-started-at-label"
+        title={__('Started at')}
+        value={<RelativeDateTime defaultValue={__('N/A')} date={startedAt} />}
+      />
+      <MetadataField
+        labelOuiaId="task-info-metadata-duration-label"
+        title={__('Duration')}
+        value={formatTaskDuration(startedAt, endedAt, state)}
+      />
+      <MetadataField
+        labelOuiaId="task-info-metadata-triggered-by-label"
+        title={__('Triggered by')}
+        value={triggeredBy}
+      />
+      <MetadataField
+        labelOuiaId="task-info-metadata-id-label"
+        title={__('Id')}
+        value={copyableText(id)}
+      />
+
+      <GridItem span={12}>
+        <ExpandableSectionToggle
+          toggleId={toggleId}
+          contentId={contentId}
+          isExpanded={isExpanded}
+          onToggle={setIsExpanded}
+        >
+          {isExpanded ? __('Show less details') : __('Show more details')}
+        </ExpandableSectionToggle>
       </GridItem>
+
       <GridItem span={12}>
-        <Progress
-          value={progress}
-          max={100}
-          aria-label={`${progress}% ${__('Complete')}`}
-          measureLocation="outside"
-          {...(progVariant ? { variant: progVariant } : {})}
-        />
+        <ExpandableSection
+          isExpanded={isExpanded}
+          isDetached
+          toggleId={toggleId}
+          contentId={contentId}
+        >
+          <Grid hasGutter>
+            <MetadataField
+              labelOuiaId="task-info-metadata-execution-type-label"
+              title={__('Execution type')}
+              value={__(isDelayed(props) ? 'Delayed' : 'Immediate')}
+            />
+            <MetadataField
+              labelOuiaId="task-info-metadata-label-field-label"
+              title={__('Label')}
+              value={label || action || __('N/A')}
+              className="details-name"
+            />
+            <MetadataField
+              labelOuiaId="task-info-metadata-start-at-label"
+              title={__('Start at')}
+              value={
+                <Flex direction={{ default: 'column' }}>
+                  <FlexItem>
+                    <RelativeDateTime defaultValue={__('N/A')} date={startAt} />
+                  </FlexItem>
+                  {startBefore && (
+                    <FlexItem>
+                      <span>({__('before')} </span>
+                      <RelativeDateTime
+                        defaultValue={__('N/A')}
+                        date={startBefore}
+                      />
+                      <span>)</span>
+                    </FlexItem>
+                  )}
+                </Flex>
+              }
+            />
+            <MetadataField
+              labelOuiaId="task-info-metadata-ended-at-label"
+              title={__('Ended at')}
+              value={
+                <RelativeDateTime defaultValue={__('N/A')} date={endedAt} />
+              }
+            />
+            <MetadataField
+              labelOuiaId="task-info-metadata-external-id-label"
+              title={__('External Id')}
+              value={copyableText(externalId)}
+            />
+            {help && (
+              <MetadataField
+                labelOuiaId="task-info-metadata-help-text-label"
+                title={__('Troubleshooting')}
+                span={12}
+                value={<p dangerouslySetInnerHTML={{ __html: help }} />}
+              />
+            )}
+          </Grid>
+        </ExpandableSection>
       </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 && (
+
+      {state !== 'stopped' && (
         <GridItem span={12}>
-          <b>{__('Errors:')}</b>
-          <pre>{errors}</pre>
+          <Flex
+            direction={{ default: 'column' }}
+            spaceItems={{ default: 'spaceItemsXs' }}
+          >
+            <FlexItem>
+              <Split hasGutter>
+                <SplitItem isFilled>
+                  <Text
+                    component={TextVariants.p}
+                    ouiaId="task-info-running-state-summary"
+                  >
+                    {capitalize(state)}
+                  </Text>
+                </SplitItem>
+                <SplitItem>
+                  <Text
+                    component={TextVariants.p}
+                    ouiaId="task-info-running-progress-complete-text"
+                  >
+                    {sprintf(__('%s%% Complete'), progress)}
+                  </Text>
+                </SplitItem>
+              </Split>
+            </FlexItem>
+            <FlexItem>
+              <Progress
+                value={progress}
+                max={100}
+                aria-label={sprintf(__('%s%% Complete'), progress)}
+                measureLocation="outside"
+                {...(progVariant ? { variant: progVariant } : {})}
+              />
+            </FlexItem>
+          </Flex>
         </GridItem>
       )}
     </Grid>
@@ -226,33 +284,35 @@ const TaskInfo = props => {
 TaskInfo.propTypes = {
   action: PropTypes.string,
   endedAt: PropTypes.string,
+  externalId: PropTypes.string,
+  id: PropTypes.string,
+  label: PropTypes.string,
   result: PropTypes.string,
   startAt: PropTypes.string,
   startBefore: PropTypes.string,
   startedAt: PropTypes.string,
   state: PropTypes.string,
   help: PropTypes.string,
-  errors: PropTypes.array,
   progress: PropTypes.number,
   username: PropTypes.string,
   usernamePath: PropTypes.string,
-  output: PropTypes.oneOfType([PropTypes.string, PropTypes.shape({})]),
 };
 
 TaskInfo.defaultProps = {
   action: '',
   endedAt: '',
+  externalId: '',
+  id: '',
+  label: '',
   result: 'error',
   startAt: '',
   startBefore: '',
   startedAt: '',
   state: '',
   help: '',
-  errors: [],
   progress: 0,
   username: '',
   usernamePath: '',
-  output: '',
 };
 
 export default TaskInfo;

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

@@ -27,12 +27,7 @@ export const TaskSkeleton = () => {
         </React.Fragment>
       ))}
       <GridItem span={12} className="pf-v5-u-pb-lg" />
-      <GridItem span={6}>
-        <div className="progress-description">
-          <Skeleton />
-        </div>
-      </GridItem>
-      <GridItem span={6} className="progress-label-top-right">
+      <GridItem span={12}>
         <Skeleton />
       </GridItem>
       <GridItem span={12}>

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

@@ -1,46 +1,38 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
-import { STATUS } from 'foremanReact/constants';
 
 import Task from '../Task';
 
+jest.mock('foremanReact/components/common/dates/RelativeDateTime', () => {
+  const RelativeDateTime = ({ date, defaultValue }) => (
+    <span>{date || defaultValue}</span>
+  );
+
+  return RelativeDateTime;
+});
+
 describe('Task', () => {
-  it('renders task controls from TaskButtons with minimal props', () => {
-    render(
-      <Task
-        id="test"
-        taskReloadStart={jest.fn()}
-        taskProgressToggle={jest.fn()}
-      />
-    );
-    expect(
-      screen.getByRole('button', { name: /start auto-reloading/i })
-    ).toBeInTheDocument();
-  });
+  it('renders task overview metadata via TaskInfo', async () => {
+    render(<Task id="test" action="Refresh hosts" />);
 
-  it('renders parent task and sub tasks links when provided', () => {
-    render(
-      <Task
-        id="test"
-        state="paused"
-        hasSubTasks
-        dynflowEnableConsole
-        parentTask="parent-id"
-        taskReload
-        canEdit
-        status={STATUS.RESOLVED}
-        taskProgressToggle={jest.fn()}
-        taskReloadStart={jest.fn()}
-      />
-    );
-    expect(screen.getByRole('link', { name: /parent task/i })).toHaveAttribute(
-      'href',
-      '/foreman_tasks/tasks/parent-id'
-    );
-    expect(screen.getByRole('link', { name: /sub tasks/i })).toHaveAttribute(
-      'href',
-      '/foreman_tasks/tasks/test/sub_tasks'
+    expect(screen.getByText('Result')).toBeInTheDocument();
+    expect(screen.getByText('State')).toBeInTheDocument();
+    expect(screen.getByText('test')).toBeInTheDocument();
+
+    await userEvent.click(
+      screen.getByRole('button', { name: /show more details/i })
     );
+
+    expect(screen.getByText('Refresh hosts')).toBeInTheDocument();
+    expect(screen.getByText('Label')).toBeInTheDocument();
+    expect(screen.getByText('Execution type')).toBeInTheDocument();
+    expect(
+      screen.queryByRole('button', { name: /cancel/i })
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByRole('button', { name: /^task actions$/i })
+    ).not.toBeInTheDocument();
   });
 });