foreman-tasks 12.2.4 → 13.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 23f5d844abe59e29a92b15f62c0770e4c3c1b577a1315232c422d976fa77a07e
-  data.tar.gz: 5d6316649f6cb75894b966301e5d8abefa579d472ddb33052d06e9d32210b869
+  metadata.gz: 9fa716da28a9b6bf38240aa02e47f9ab4a4ab6ba82f98c5d26f7d6066f3149e4
+  data.tar.gz: eb7ec125870236abf803a65c132b042fd4360f4de5d7d9a5b2bc718ba8672235
 SHA512:
-  metadata.gz: 7b16c2a1cd40296f38805bddb2a96879ed09d4288e7dc03c8061ba6b561333c96f9e9aa213b583349bce844580b85cc24833ca49f617e67730d3e6b28edf4773
-  data.tar.gz: 2b147d1a8a95389cb7c6a12c4fefea577cdec04f8c0ca66315b4411e62f968b1255b4a82438c014300bfd8d67eb0b9a0bea6fcaf277f1eb2d7058a8feaf5375f
+  metadata.gz: 0547b82e39eabef4f7205100733272e5bdb7b619721ea1a9b94259403c1be370a4ee34564825ccbca83ed16767e72634dd2a070f288ceed28627c3c58671d726
+  data.tar.gz: c27122956334571f9b1cc287e8ec6cf322f5f2931be69780539cc58a7f37cbf7f7c4c81800807fc81a79ca8213d1510c127552492ee942c21a1067eb09258a9e

data/app/controllers/foreman_tasks/tasks_controller.rb

@@ -6,11 +6,6 @@ module ForemanTasks
 
     before_action :find_dynflow_task, only: [:unlock, :force_unlock, :cancel, :abort, :cancel_step, :resume]
 
-    def show
-      @task = resource_base.find(params[:id])
-      render :layout => !request.xhr?
-    end
-
     def index
       params[:order] ||= 'started_at DESC'
       respond_with_tasks resource_base

data/config/routes.rb

@@ -12,7 +12,7 @@ Foreman::Application.routes.draw do
       end
     end
 
-    resources :tasks, :only => [:show] do
+    resources :tasks, :only => [] do
       collection do
         get 'auto_complete_search'
         get '/summary/:recent_timeframe', action: 'summary'
@@ -27,7 +27,7 @@ Foreman::Application.routes.draw do
         post :cancel_step
       end
     end
-    resources :tasks, :only => [:show], constraints: ->(req) { req.format == :csv } do
+    resources :tasks, :only => [], constraints: ->(req) { req.format == :csv } do
       member do
         get :sub_tasks
       end
@@ -35,6 +35,7 @@ Foreman::Application.routes.draw do
     resources :tasks, :only => [:index], constraints: ->(req) { req.format == :csv }
 
     match '/tasks', to: '/react#index', via: :get
+    match '/tasks/:id', to: '/react#index', via: :get, :as => :task
     match '/tasks/:id/sub_tasks', to: '/react#index', via: :get
 
     namespace :api do

data/lib/foreman_tasks/engine.rb

@@ -20,7 +20,7 @@ module ForemanTasks
       require 'foreman/cron'
 
       Foreman::Plugin.register :"foreman-tasks" do
-        requires_foreman '>= 3.19'
+        requires_foreman '>= 5.0'
         register_global_js_file 'global'
         divider :top_menu, :parent => :monitor_menu, :last => true, :caption => N_('Foreman Tasks')
         menu :top_menu, :tasks,
@@ -36,7 +36,7 @@ module ForemanTasks
              :last     => true
 
         security_block :foreman_tasks do |_map|
-          permission :view_foreman_tasks, { :'foreman_tasks/tasks' => [:auto_complete_search, :sub_tasks, :index, :summary, :summary_sub_tasks, :show],
+          permission :view_foreman_tasks, { :'foreman_tasks/tasks' => [:auto_complete_search, :sub_tasks, :index, :summary, :summary_sub_tasks],
                                             :'foreman_tasks/api/tasks' => [:bulk_search, :show, :index, :summary, :summary_sub_tasks, :details, :sub_tasks] }, :resource_type => 'ForemanTasks::Task'
           permission :edit_foreman_tasks, { :'foreman_tasks/tasks' => [:resume, :unlock, :force_unlock, :cancel_step, :cancel, :abort],
                                             :'foreman_tasks/api/tasks' => [:bulk_resume, :bulk_cancel, :bulk_stop] }, :resource_type => 'ForemanTasks::Task'

data/lib/foreman_tasks/version.rb

@@ -1,3 +1,3 @@
 module ForemanTasks
-  VERSION = '12.2.4'.freeze
+  VERSION = '13.0.0'.freeze
 end

data/test/controllers/tasks_controller_test.rb

@@ -82,15 +82,6 @@ module ForemanTasks
         assert_include response.body.lines[1], 'Some action'
       end
 
-      describe 'show' do
-        it 'does not allow user without permissions to see task details' do
-          setup_user('view', 'foreman_tasks', 'owner.id = current_user')
-          get :show, params: { id: FactoryBot.create(:some_task).id },
-                     session: set_session_user(User.current)
-          assert_response :not_found
-        end
-      end
-
       describe 'index' do
         it 'shows duration column' do
           task = ForemanTasks::Task.select_duration.find(FactoryBot.create(:some_task).id)

data/test/foreman_tasks_test_helper.rb

@@ -9,8 +9,8 @@ require_relative './support/history_tasks_builder'
 require 'dynflow/testing'
 require 'foreman_tasks/test_helpers'
 
-FactoryBot.definition_file_paths = ["#{ForemanTasks::Engine.root}/test/factories"]
-FactoryBot.find_definitions
+FactoryBot.definition_file_paths << "#{ForemanTasks::Engine.root}/test/factories"
+FactoryBot.reload
 
 ForemanTasks.dynflow.require!
 ForemanTasks.dynflow.config.disable_active_record_actions = true

data/test/integration/tasks_test.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+require_relative '../test_plugin_helper'
+require 'integration_test_helper'
+
+class TasksIntegrationTest < IntegrationTestWithJavascript
+  test 'does not allow user without permissions to see task details' do
+    setup_user('view', 'foreman_tasks', 'owner.id = current_user')
+    task = FactoryBot.create(:some_task)
+    set_request_user(User.current)
+
+    visit "/foreman_tasks/tasks/#{task.id}"
+
+    assert_selector 'h5', text: /Unable to load task/i
+    assert_no_selector '#task-details-tabs'
+  end
+end

data/test/test_plugin_helper.rb

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+# This calls the main test_helper in Foreman-core
+require 'test_helper'
+
+# Add plugin to FactoryBot's paths
+FactoryBot.definition_file_paths << File.join(File.dirname(__FILE__), 'factories')
+FactoryBot.reload

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

@@ -5,17 +5,12 @@ import {
   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';
 
+import { taskResultIconEl } from '../../common/taskResultIcon';
+
 const isDelayed = ({ startAt, startedAt }) => {
   if (
     startAt == null ||
@@ -35,41 +30,6 @@ const isDelayed = ({ startAt, startedAt }) => {
   return a.getTime() !== b.getTime();
 };
 
-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 progressVariantForResult = result => {
   switch (result) {
     case 'error':
@@ -117,7 +77,7 @@ const TaskInfo = props => {
         title: 'Result',
         value: (
           <span>
-            {resultIconEl(state, result)} {result}
+            {taskResultIconEl(state, result)} {result}
           </span>
         ),
       },
@@ -182,14 +142,9 @@ const TaskInfo = props => {
         </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 span={12}>
+        <span className="list-group-item-heading">{__('State')}: </span>
+        {state}
       </GridItem>
       <GridItem span={12}>
         <Progress

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,7 +1,6 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import { STATUS } from 'foremanReact/constants';
 
 import Task from '../Task';
 
@@ -29,7 +28,6 @@ describe('Task', () => {
         parentTask="parent-id"
         taskReload
         canEdit
-        status={STATUS.RESOLVED}
         taskProgressToggle={jest.fn()}
         taskReloadStart={jest.fn()}
       />

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

@@ -1,7 +1,6 @@
 import React from 'react';
 import { render, screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import { STATUS } from 'foremanReact/constants';
 import { TaskButtons } from '../TaskButtons';
 
 const setUnlockModalOpen = jest.fn();
@@ -169,7 +168,6 @@ describe('TaskButtons', () => {
       resumeTaskRequest,
       taskProgressToggle,
       taskReloadStart,
-      status: STATUS.RESOLVED,
       canEdit: true,
       resumable: true,
       cancellable: true,

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

@@ -1,15 +1,17 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { Tabs, Tab, TabTitleText } from '@patternfly/react-core';
-import { translate as __, sprintf } from 'foremanReact/common/I18n';
+import { translate as __ } from 'foremanReact/common/I18n';
 import { STATUS } from 'foremanReact/constants';
-import MessageBox from 'foremanReact/components/common/MessageBox';
+import { usePermissions } from 'foremanReact/common/hooks/Permissions/permissionHooks';
+import { ResourceLoadFailedEmptyState } from 'foremanReact/components/common/EmptyState';
 import Task from './Components/Task';
 import RunningSteps from './Components/RunningSteps';
 import Errors from './Components/Errors';
 import Locks from './Components/Locks';
 import Raw from './Components/Raw';
 import Dependencies from './Components/Dependencies';
+import { TASKS_PATH, VIEW_FOREMAN_TASKS } from './TaskDetailsConstants';
 import { getTaskID } from './TasksDetailsHelper';
 import { TaskSkeleton } from './Components/TaskSkeleton';
 
@@ -26,12 +28,15 @@ const TaskDetails = ({
   cancelStep,
   taskReloadStart,
   taskReloadStop,
-  APIerror,
+  apiStatus,
+  apiErrorMessage,
+  apiErrorCode,
   ...props
 }) => {
   const id = getTaskID();
-  const { taskReload, status, isLoading, result } = props;
+  const { taskReload, isLoading, result } = props;
   const [activeTabKey, setActiveTabKey] = useState(1);
+  const hasViewPermission = usePermissions([VIEW_FOREMAN_TASKS]);
 
   useEffect(() => {
     taskReloadStart(id);
@@ -48,15 +53,25 @@ const TaskDetails = ({
     }
   };
 
-  if (status === STATUS.ERROR) {
+  if (apiStatus === STATUS.ERROR || !hasViewPermission) {
     return (
-      <MessageBox
-        key="task-details-error"
-        icontype="error-circle-o"
-        msg={sprintf(__('Could not receive data: %s'), APIerror?.message)}
+      <ResourceLoadFailedEmptyState
+        resourceLabel={__('task')}
+        resourceId={id}
+        httpStatus={apiErrorCode}
+        errorMessage={apiErrorMessage}
+        viewPermissions={['view_foreman_tasks']}
+        requiredPermissions={['view_foreman_tasks']}
+        ouiaIdPrefix="task-details-empty-state"
+        primaryAction={{
+          label: __('Back to tasks'),
+          url: TASKS_PATH,
+          ouiaId: 'task-details-empty-state-tasks-list',
+        }}
       />
     );
   }
+
   const resumable = executionPlan ? executionPlan.state === 'paused' : false;
   const cancellable = executionPlan ? executionPlan.cancellable : false;
   const lockRecords = locks.concat(links);
@@ -66,13 +81,12 @@ const TaskDetails = ({
     cancellable,
     resumable,
     id,
-    status,
     taskProgressToggle,
     taskReloadStart,
   };
 
   return (
-    <div className="task-details-react well">
+    <div className="task-details-react">
       <Tabs
         id="task-details-tabs"
         ouiaId="task-details-tabs"
@@ -159,8 +173,9 @@ TaskDetails.propTypes = {
   runningSteps: PropTypes.array,
   cancelStep: PropTypes.func.isRequired,
   taskReload: PropTypes.bool.isRequired,
-  status: PropTypes.oneOf(Object.keys(STATUS)),
-  APIerror: PropTypes.object,
+  apiStatus: PropTypes.oneOf(Object.keys(STATUS)),
+  apiErrorMessage: PropTypes.string,
+  apiErrorCode: PropTypes.number,
   taskReloadStop: PropTypes.func.isRequired,
   taskReloadStart: PropTypes.func.isRequired,
   links: PropTypes.array,
@@ -175,8 +190,7 @@ TaskDetails.propTypes = {
 TaskDetails.defaultProps = {
   label: '',
   runningSteps: [],
-  APIerror: null,
-  status: STATUS.PENDING,
+  apiErrorMessage: '',
   links: [],
   dependsOn: [],
   blocks: [],

data/webpack/ForemanTasks/Components/TaskDetails/TaskDetails.scss

@@ -1,10 +1,6 @@
 .task-details-react {
-  .progress-label-top-right {
-    font-size: 11px;
-    text-align: right;
-  }
   a,
-  button {
+  #pf-tab-section-1-task-details-tabs > button {
     margin-right: 3px;
   }
   .container {

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

@@ -1,4 +1,5 @@
 export const FOREMAN_TASK_DETAILS = 'FOREMAN_TASK_DETAILS';
 export const FOREMAN_TASK_DETAILS_SUCCESS = 'FOREMAN_TASK_DETAILS_SUCCESS';
-
+export const TASKS_PATH = '/foreman_tasks/tasks';
 export const TASK_STEP_CANCEL = 'TASK_STEP_CANCEL';
+export const VIEW_FOREMAN_TASKS = 'view_foreman_tasks';

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

@@ -1,7 +1,8 @@
 /* eslint-disable camelcase */
 import {
   selectAPIResponse,
-  selectAPIByKey,
+  selectAPIStatus as selectAPIStatusByKey,
+  selectAPIError as selectAPIErrorByKey,
 } from 'foremanReact/redux/API/APISelectors';
 import { selectDoesIntervalExist } from 'foremanReact/redux/middlewares/IntervalMiddleware/IntervalSelectors';
 import { STATUS } from 'foremanReact/constants';
@@ -101,14 +102,28 @@ export const selectDynflowEnableConsole = state =>
 export const selectCanEdit = state =>
   selectTaskDetailsResponse(state).can_edit || false;
 
-export const selectStatus = state => selectTaskDetailsResponse(state).status;
+export const selectAPIStatus = state =>
+  selectAPIStatusByKey(state, FOREMAN_TASK_DETAILS);
 
 export const selectAPIError = state =>
-  selectTaskDetailsResponse(state)?.APIerror;
+  selectAPIErrorByKey(state, FOREMAN_TASK_DETAILS);
+
+export const selectAPIErrorMessage = state => {
+  const apiError = selectAPIError(state);
+
+  if (apiError?.response?.data?.error) {
+    return apiError.response.data.error.message;
+  }
+
+  return apiError?.message;
+};
+
+export const selectAPIErrorCode = state =>
+  selectAPIError(state)?.response?.status;
 
 export const selectIsLoading = state =>
-  !!selectAPIByKey(state, FOREMAN_TASK_DETAILS).response &&
-  selectStatus(state) === STATUS.PENDING;
+  !Object.keys(selectTaskDetailsResponse(state) ?? {}).length &&
+  selectAPIStatus(state) === STATUS.PENDING;
 
 export const selectDependsOn = state =>
   selectTaskDetailsResponse(state).depends_on || [];

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

@@ -4,5 +4,5 @@ export const minProps = {
   taskReloadStop: jest.fn(),
   taskReloadStart: jest.fn(),
   taskProgressToggle: jest.fn(),
-  status: 'RESOLVED',
+  apiStatus: 'RESOLVED',
 };

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

@@ -1,38 +1,125 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
+import { configureStore } from '@reduxjs/toolkit';
+import { Provider } from 'react-redux';
+import { createMemoryHistory } from 'history';
+import { Router } from 'react-router-dom';
 
 import TaskDetails from '../TaskDetails';
 import { minProps } from './TaskDetails.fixtures';
+import { VIEW_FOREMAN_TASKS } from '../TaskDetailsConstants';
+
+const mockUseForemanPermissions = jest.fn(
+  () => new Set(['view_foreman_tasks'])
+);
+
+jest.mock('foremanReact/Root/Context/ForemanContext', () => ({
+  ...jest.requireActual('foremanReact/Root/Context/ForemanContext'),
+  useForemanPermissions: (...args) => mockUseForemanPermissions(...args),
+}));
 
 delete window.location;
 window.location = new URL(
   'https://foreman.com/foreman_tasks/tasks/a15dd820-32f1-4ced-9ab7-c0fab8234c47/'
 );
 
+const store = configureStore({ reducer: state => state || {} });
+
+function renderTaskDetails(props = {}) {
+  const history = createMemoryHistory();
+
+  return render(
+    <Router history={history}>
+      <Provider store={store}>
+        <TaskDetails {...minProps} {...props} />
+      </Provider>
+    </Router>
+  );
+}
+
 describe('TaskDetails', () => {
-  it('shows error message when status is ERROR', () => {
-    render(
-      <TaskDetails
-        {...minProps}
-        status="ERROR"
-        APIerror={{ message: 'some-error' }}
-      />
+  beforeEach(() => {
+    mockUseForemanPermissions.mockImplementation(
+      () => new Set(['view_foreman_tasks'])
     );
+  });
+
+  it(`shows ResourceLoadFailedEmptyState when ${VIEW_FOREMAN_TASKS} is absent`, () => {
+    mockUseForemanPermissions.mockImplementation(() => new Set());
+
+    renderTaskDetails();
+
+    expect(
+      screen.getByRole('heading', { name: /permission denied/i })
+    ).toBeInTheDocument();
+    expect(screen.getByText(VIEW_FOREMAN_TASKS)).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: /back to tasks/i })
+    ).toBeInTheDocument();
+    expect(screen.queryByRole('tab', { name: /^task$/i })).not.toBeInTheDocument();
+  });
+
+  it('shows ResourceLoadFailedEmptyState when apiStatus is ERROR', () => {
+    renderTaskDetails({
+      apiStatus: 'ERROR',
+      apiErrorMessage: 'some-error',
+    });
+
+    expect(
+      screen.getByRole('heading', { name: /unable to load task/i })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText('Server returned: some-error')
+    ).toBeInTheDocument();
+    expect(screen.queryByRole('tab', { name: /^task$/i })).not.toBeInTheDocument();
+  });
+
+  it('shows permission denied when apiErrorCode is 403', () => {
+    renderTaskDetails({
+      apiStatus: 'ERROR',
+      apiErrorCode: 403,
+      apiErrorMessage: 'Forbidden',
+    });
+
+    expect(
+      screen.getByRole('heading', { name: /permission denied/i })
+    ).toBeInTheDocument();
+    expect(screen.getByText('view_foreman_tasks')).toBeInTheDocument();
+    expect(
+      screen.getByText('Server returned: Forbidden')
+    ).toBeInTheDocument();
+    expect(screen.queryByRole('tab', { name: /^task$/i })).not.toBeInTheDocument();
+  });
+
+  it('shows not found messaging when apiErrorCode is 404', () => {
+    renderTaskDetails({
+      apiStatus: 'ERROR',
+      apiErrorCode: 404,
+      apiErrorMessage: 'Task missing',
+    });
+
+    expect(
+      screen.getByRole('heading', { name: /unable to load task/i })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText(/could not be found/i)
+    ).toBeInTheDocument();
     expect(
-      screen.getByText(/could not receive data: some-error/i)
+      screen.getByText('Server returned: Task missing')
     ).toBeInTheDocument();
+    expect(screen.queryByRole('tab', { name: /^task$/i })).not.toBeInTheDocument();
   });
 
   it('shows skeleton while loading on the Task tab', () => {
-    const { container } = render(<TaskDetails {...minProps} isLoading />);
+    const { container } = renderTaskDetails({ isLoading: true });
     expect(
       container.querySelector('.react-loading-skeleton')
     ).toBeInTheDocument();
   });
 
   it('renders six tabs with expected labels', () => {
-    render(<TaskDetails {...minProps} />);
+    renderTaskDetails();
     expect(document.getElementById('task-details-tabs')).toBeInTheDocument();
     expect(screen.getByRole('tab', { name: /^task$/i })).toBeInTheDocument();
     expect(

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

@@ -0,0 +1,81 @@
+import { STATUS } from 'foremanReact/constants';
+
+import { FOREMAN_TASK_DETAILS } from '../TaskDetailsConstants';
+import {
+  selectAPIError,
+  selectAPIErrorCode,
+  selectAPIErrorMessage,
+} from '../TaskDetailsSelectors';
+
+const axiosErrorWithApiBody = {
+  message: 'Request failed with status code 404',
+  response: {
+    status: 404,
+    data: {
+      error: {
+        message: 'Task not found',
+      },
+    },
+  },
+};
+
+const plainError = {
+  message: 'Network Error',
+};
+
+const forbiddenError = {
+  message: 'Request failed with status code 403',
+  response: {
+    status: 403,
+    data: {
+      error: {
+        message: 'Forbidden',
+      },
+    },
+  },
+};
+
+const buildState = (response, status = STATUS.ERROR) => ({
+  API: {
+    [FOREMAN_TASK_DETAILS]: {
+      payload: {},
+      response,
+      status,
+    },
+  },
+});
+
+describe('TaskDetailsSelectors - API error selectors', () => {
+  it('selectAPIError returns null when API status is not ERROR', () => {
+    expect(selectAPIError(buildState({}, STATUS.RESOLVED))).toBeNull();
+  });
+
+  it('selectAPIError returns the stored response when API status is ERROR', () => {
+    expect(selectAPIError(buildState(plainError))).toEqual(plainError);
+  });
+
+  it('selectAPIErrorMessage prefers the API error body message', () => {
+    expect(
+      selectAPIErrorMessage(buildState(axiosErrorWithApiBody))
+    ).toBe('Task not found');
+  });
+
+  it('selectAPIErrorMessage falls back to the top-level error message', () => {
+    expect(selectAPIErrorMessage(buildState(plainError))).toBe('Network Error');
+  });
+
+  it('selectAPIErrorMessage returns undefined when there is no API error', () => {
+    expect(
+      selectAPIErrorMessage(buildState({}, STATUS.RESOLVED))
+    ).toBeUndefined();
+  });
+
+  it('selectAPIErrorCode returns the HTTP status from the error response', () => {
+    expect(selectAPIErrorCode(buildState(axiosErrorWithApiBody))).toBe(404);
+    expect(selectAPIErrorCode(buildState(forbiddenError))).toBe(403);
+  });
+
+  it('selectAPIErrorCode returns undefined when the error response has no status', () => {
+    expect(selectAPIErrorCode(buildState(plainError))).toBeUndefined();
+  });
+});

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

@@ -33,8 +33,9 @@ import {
   selectExternalId,
   selectDynflowEnableConsole,
   selectCanEdit,
-  selectStatus,
-  selectAPIError,
+  selectAPIStatus,
+  selectAPIErrorMessage,
+  selectAPIErrorCode,
   selectIsLoading,
   selectDependsOn,
   selectBlocks,
@@ -70,8 +71,9 @@ const mapStateToProps = state => ({
   externalId: selectExternalId(state),
   dynflowEnableConsole: selectDynflowEnableConsole(state),
   canEdit: selectCanEdit(state),
-  status: selectStatus(state),
-  APIerror: selectAPIError(state),
+  apiStatus: selectAPIStatus(state),
+  apiErrorMessage: selectAPIErrorMessage(state),
+  apiErrorCode: selectAPIErrorCode(state),
   isLoading: selectIsLoading(state),
   dependsOn: selectDependsOn(state),
   blocks: selectBlocks(state),

data/webpack/ForemanTasks/Components/common/taskResultIcon.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import { Icon } from '@patternfly/react-core';
+import {
+  CheckCircleIcon,
+  ExclamationCircleIcon,
+  ExclamationTriangleIcon,
+  QuestionCircleIcon,
+} from '@patternfly/react-icons';
+import { translate as __ } from 'foremanReact/common/I18n';
+
+/**
+ * Icon reflecting task state/result (aligned with TaskInfo / tasks table).
+ *
+ * @param {string} state Dynflow task state (e.g. stopped, running).
+ * @param {string} [result] Result when stopped (success, error, warning, …).
+ * @returns {React.ReactElement}
+ */
+export const taskResultIconEl = (state, result) => {
+  if (state && state !== 'stopped') {
+    return (
+      <Icon title={__('Running')}>
+        <QuestionCircleIcon />
+      </Icon>
+    );
+  }
+
+  switch (result) {
+    case 'success':
+      return (
+        <Icon status="success" title={__('Success')}>
+          <CheckCircleIcon />
+        </Icon>
+      );
+    case 'error':
+      return (
+        <Icon status="danger" title={__('Error')}>
+          <ExclamationCircleIcon />
+        </Icon>
+      );
+    case 'warning':
+      return (
+        <Icon status="warning" title={__('Warning')}>
+          <ExclamationTriangleIcon />
+        </Icon>
+      );
+    default:
+      return (
+        <Icon title={__('Unknown')}>
+          <QuestionCircleIcon />
+        </Icon>
+      );
+  }
+};

data/webpack/ForemanTasks/Routes/ShowTaskDetails/TaskDetailsPage.js

@@ -0,0 +1,74 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useSelector } from 'react-redux';
+import { Flex, FlexItem, TextContent, Text } from '@patternfly/react-core';
+import PageLayout from 'foremanReact/routes/common/PageLayout/PageLayout';
+import { translate as __, sprintf } from 'foremanReact/common/I18n';
+import TaskDetails from '../../Components/TaskDetails';
+import {
+  selectAction,
+  selectResult,
+  selectState,
+} from '../../Components/TaskDetails/TaskDetailsSelectors';
+import { taskResultIconEl } from '../../Components/common/taskResultIcon';
+
+const TaskDetailsPage = props => {
+  const { id } = props.match.params;
+  const action = useSelector(selectAction);
+  const taskState = useSelector(selectState);
+  const taskResult = useSelector(selectResult);
+  const headerText = action
+    ? sprintf(__('Details of %s task'), action)
+    : __('Task Details');
+
+  const header = (
+    <Flex
+      component="span"
+      data-ouia-component-id="foreman-tasks-task-details-title-row"
+      display={{ default: 'inlineFlex' }}
+      alignItems={{ default: 'alignItemsCenter' }}
+      gap={{ default: 'gapSm' }}
+    >
+      <TextContent>
+        <Text ouiaId="breadcrumb_title" component="h1">
+          {headerText}
+        </Text>
+      </TextContent>
+      <FlexItem component="span">
+        {taskResultIconEl(taskState, taskResult)}
+      </FlexItem>
+    </Flex>
+  );
+
+  return (
+    <PageLayout
+      customHeader={header}
+      header={headerText}
+      searchable={false}
+      breadcrumbOptions={{
+        breadcrumbItems: [
+          { caption: __('Tasks'), url: '/foreman_tasks/tasks' },
+          { caption: action || id },
+        ],
+        isSwitchable: true,
+        resource: {
+          nameField: 'action',
+          resourceUrl: '/foreman_tasks/api/tasks',
+          switcherItemUrl: '/foreman_tasks/tasks/:id',
+        },
+      }}
+    >
+      <TaskDetails {...props} />
+    </PageLayout>
+  );
+};
+
+TaskDetailsPage.propTypes = {
+  match: PropTypes.shape({
+    params: PropTypes.shape({
+      id: PropTypes.string.isRequired,
+    }).isRequired,
+  }).isRequired,
+};
+
+export default TaskDetailsPage;

data/webpack/ForemanTasks/Routes/ShowTaskDetails/__tests__/TaskDetailsPage.test.js

@@ -0,0 +1,265 @@
+import React from 'react';
+import { render, screen, within } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { combineReducers, configureStore } from '@reduxjs/toolkit';
+import { createMemoryHistory } from 'history';
+import { Router } from 'react-router-dom';
+import { IntlProvider } from 'react-intl';
+import { Provider } from 'react-redux';
+
+import breadcrumbBarReducer from 'foremanReact/components/BreadcrumbBar/BreadcrumbBarReducer';
+import { STATUS } from 'foremanReact/constants';
+import intervalsReducer from 'foremanReact/redux/middlewares/IntervalMiddleware/IntervalReducer';
+
+import { FOREMAN_TASK_DETAILS, VIEW_FOREMAN_TASKS } from '../../../Components/TaskDetails/TaskDetailsConstants';
+import TaskDetailsPage from '../TaskDetailsPage';
+
+const mockUseForemanPermissions = jest.fn(
+  () => new Set(['view_foreman_tasks'])
+);
+
+jest.mock('foremanReact/Root/Context/ForemanContext', () => ({
+  ...jest.requireActual('foremanReact/Root/Context/ForemanContext'),
+  useForemanPermissions: (...args) => mockUseForemanPermissions(...args),
+}));
+
+const TASK_DETAILS_TITLE_ROW_OUIA_ID = 'foreman-tasks-task-details-title-row';
+
+const routerPropsBase = {
+  history: { push: jest.fn(), replace: jest.fn(), go: jest.fn() },
+  location: {
+    pathname: '/foreman_tasks/tasks/task-route-id',
+    search: '',
+    hash: '',
+    state: undefined,
+  },
+};
+
+const matchDefault = {
+  params: { id: 'task-route-id' },
+  path: '/foreman_tasks/tasks/:id',
+  url: '/foreman_tasks/tasks/task-route-id',
+  isExact: true,
+};
+
+const baseTaskPayload = {
+  action: '',
+  input: [],
+  output: {},
+  locks: [],
+  links: [],
+  depends_on: [],
+  blocks: [],
+  failed_steps: [],
+  running_steps: [],
+  execution_plan: {},
+  state: 'running',
+  result: '',
+};
+
+const createStoreForTaskPayload = overrides => ({
+  API: {
+    [FOREMAN_TASK_DETAILS]: {
+      response: { ...baseTaskPayload, ...overrides },
+      status: STATUS.RESOLVED,
+      payload: {},
+    },
+  },
+});
+
+const rootReducer = combineReducers({
+  API: (state = {}, action) => state,
+  intervals: intervalsReducer,
+  breadcrumbBar: breadcrumbBarReducer,
+  foremanTasks: (state = {}, action) => state,
+});
+
+const renderPage = (apiPayloadOverrides = {}, propsOverrides = {}) => {
+  const history = createMemoryHistory({
+    initialEntries: [`/foreman_tasks/tasks/${matchDefault.params.id}`],
+  });
+  const store = configureStore({
+    reducer: rootReducer,
+    preloadedState: createStoreForTaskPayload(apiPayloadOverrides),
+    middleware: getDefaultMiddleware =>
+      getDefaultMiddleware({
+        immutableCheck: false,
+        serializableCheck: false,
+      }),
+  });
+
+  window.history.pushState(
+    {},
+    '',
+    `/foreman_tasks/tasks/${matchDefault.params.id}`
+  );
+
+  return render(
+    <Router history={history}>
+      <Provider store={store}>
+        <IntlProvider locale="en">
+          <TaskDetailsPage
+            {...routerPropsBase}
+            history={history}
+            match={matchDefault}
+            {...propsOverrides}
+          />
+        </IntlProvider>
+      </Provider>
+    </Router>
+  );
+};
+
+const breadcrumbTitleHeadings = () =>
+  screen.getAllByRole('heading', { level: 1 }).filter(
+    heading => heading.getAttribute('data-ouia-component-id') === 'breadcrumb_title'
+  );
+
+/**
+ * Title row (`customHeader` root `Flex`): same OUIA pattern as `Locks.test.js`.
+ */
+const taskDetailsTitleRegion = container => {
+  const el = container.querySelector(
+    `[data-ouia-component-id="${TASK_DETAILS_TITLE_ROW_OUIA_ID}"]`
+  );
+
+  expect(el).toBeTruthy();
+
+  return el;
+};
+
+describe('TaskDetailsPage', () => {
+  beforeEach(() => {
+    mockUseForemanPermissions.mockImplementation(() => new Set(['view_foreman_tasks']));
+  });
+
+  describe('permissions', () => {
+    it(`renders the task details chrome when ${VIEW_FOREMAN_TASKS} is present`, () => {
+      mockUseForemanPermissions.mockImplementation(
+        () => new Set(['edit_foreman_tasks', VIEW_FOREMAN_TASKS])
+      );
+
+      renderPage({ action: 'Run job' });
+
+      expect(
+        screen.getByRole('navigation', { name: 'Breadcrumb' })
+      ).toBeInTheDocument();
+      expect(
+        screen.getByRole('heading', {
+          level: 1,
+          name: /Details of Run job task/,
+        })
+      ).toBeInTheDocument();
+      expect(screen.queryByRole('heading', { name: /Permission denied/i })).not.toBeInTheDocument();
+      expect(mockUseForemanPermissions).toHaveBeenCalled();
+    });
+
+    it(`shows ResourceLoadFailedEmptyState and lists ${VIEW_FOREMAN_TASKS} when it is absent`, () => {
+      mockUseForemanPermissions.mockImplementation(() => new Set());
+
+      renderPage({ action: 'Hidden task' });
+
+      expect(
+        screen.getByRole('heading', { name: /Permission denied/i })
+      ).toBeInTheDocument();
+      expect(
+        screen.getByText(
+          /You do not have permission to view the task with id task-route-id/
+        )
+      ).toBeInTheDocument();
+      expect(screen.getByText(VIEW_FOREMAN_TASKS)).toBeInTheDocument();
+      expect(
+        screen.getByRole('button', { name: /Back to tasks/i })
+      ).toBeInTheDocument();
+      expect(
+        screen.getByRole('navigation', { name: 'Breadcrumb' })
+      ).toBeInTheDocument();
+      expect(screen.queryByRole('tab', { name: /^task$/i })).not.toBeInTheDocument();
+    });
+
+    it('denies access when user only has edit_foreman_tasks without view', () => {
+      mockUseForemanPermissions.mockImplementation(
+        () => new Set(['edit_foreman_tasks'])
+      );
+
+      renderPage({});
+
+      expect(
+        screen.getByRole('heading', { name: /Permission denied/i })
+      ).toBeInTheDocument();
+      expect(screen.getByText(VIEW_FOREMAN_TASKS)).toBeInTheDocument();
+      expect(
+        screen.getByRole('navigation', { name: 'Breadcrumb' })
+      ).toBeInTheDocument();
+      expect(screen.queryByRole('tab', { name: /^task$/i })).not.toBeInTheDocument();
+    });
+  });
+
+
+  const expectToolbarHeadingText = substring => {
+    const headings = breadcrumbTitleHeadings();
+
+    expect(headings.length).toBeGreaterThan(0);
+
+    headings.forEach(heading => {
+      expect(heading).toHaveTextContent(substring);
+    });
+  };
+
+  it('shows generic title and breadcrumb from route id when action is unset', () => {
+    const page = renderPage({});
+    expectToolbarHeadingText('Task Details');
+
+    expect(screen.getByRole('navigation', { name: 'Breadcrumb' })).toHaveTextContent(
+      'Tasks'
+    );
+    expect(
+      within(screen.getByRole('navigation', { name: 'Breadcrumb' })).getByText(
+        /task-route-id/
+      )
+    ).toBeInTheDocument();
+
+    const titleRegion = taskDetailsTitleRegion(page.container);
+
+    expect(
+      within(titleRegion).getAllByRole('img', { hidden: true }).length
+    ).toBeGreaterThan(0);
+    expect(titleRegion.querySelector('[class*="danger"]')).toBeNull();
+  });
+
+  it('uses task action for title and breadcrumb when loaded', () => {
+    renderPage({ action: 'Refresh hosts' });
+
+    expectToolbarHeadingText('Details of Refresh hosts task');
+
+    expect(screen.getByRole('link', { name: /^Tasks$/ })).toHaveAttribute(
+      'href',
+      '/foreman_tasks/tasks'
+    );
+    expect(
+      within(screen.getByRole('navigation', { name: 'Breadcrumb' })).getByText(
+        'Refresh hosts'
+      )
+    ).toBeInTheDocument();
+  });
+
+  it('shows error status styling in the heading when task is stopped with error result', () => {
+    const page = renderPage({
+      action: 'Some action',
+      state: 'stopped',
+      result: 'error',
+    });
+
+    expectToolbarHeadingText('Details of Some action task');
+
+    expect(
+      taskDetailsTitleRegion(page.container).querySelector('[class*="danger"]')
+    ).toBeTruthy();
+
+    expect(
+      within(screen.getByRole('navigation', { name: 'Breadcrumb' })).getByText(
+        'Some action'
+      )
+    ).toBeInTheDocument();
+  });
+});

data/webpack/Routes/routes.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import TasksTableIndexPage from '../ForemanTasks/Components/TasksTable/TasksIndexPage';
+import TaskDetailsPage from '../ForemanTasks/Routes/ShowTaskDetails/TaskDetailsPage';
 
 const ForemanTasksRoutes = [
   {
@@ -7,6 +8,11 @@ const ForemanTasksRoutes = [
     exact: true,
     render: props => <TasksTableIndexPage {...props} />,
   },
+  {
+    path: '/foreman_tasks/tasks/:id',
+    exact: true,
+    render: props => <TaskDetailsPage {...props} />,
+  },
   {
     path: '/foreman_tasks/tasks/:id/sub_tasks',
     exact: true,

data/webpack/Routes/routes.test.js

@@ -12,6 +12,14 @@ jest.mock(
     }
 );
 
+jest.mock(
+  '../ForemanTasks/Routes/ShowTaskDetails/TaskDetailsPage',
+  () =>
+    function TaskDetailsPageStub() {
+      return <div data-testid="task-details-page-stub" />;
+    }
+);
+
 const routerProps = {
   history: { push: jest.fn(), replace: jest.fn(), go: jest.fn() },
   location: {
@@ -34,6 +42,7 @@ describe('ForemanTasks routes', () => {
       ForemanTasksRoutes.map(({ path, exact }) => ({ path, exact }))
     ).toEqual([
       { path: '/foreman_tasks/tasks', exact: true },
+      { path: '/foreman_tasks/tasks/:id', exact: true },
       { path: '/foreman_tasks/tasks/:id/sub_tasks', exact: true },
     ]);
   });
@@ -53,9 +62,9 @@ describe('ForemanTasks routes', () => {
         ...routerProps,
         match: {
           ...routerProps.match,
-          params: { id: '7' },
-          path: '/foreman_tasks/tasks/:id/sub_tasks',
-          url: '/foreman_tasks/tasks/7/sub_tasks',
+          params: { id: '99' },
+          path: '/foreman_tasks/tasks/:id',
+          url: '/foreman_tasks/tasks/99',
         },
       },
     ];
@@ -63,8 +72,10 @@ describe('ForemanTasks routes', () => {
     ForemanTasksRoutes.forEach((route, index) => {
       const { unmount } = render(route.render(propsByIndex[index]));
 
-      if (index === 2) {
-        expect(screen.getByTestId('show-task-stub')).toBeInTheDocument();
+      if (index === 1) {
+        expect(
+          screen.getByTestId('task-details-page-stub')
+        ).toBeInTheDocument();
       } else {
         expect(
           screen.getByTestId('tasks-table-index-stub')

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: foreman-tasks
 version: !ruby/object:Gem::Version
-  version: 12.2.4
+  version: 13.0.0
 platform: ruby
 authors:
 - Ivan Nečas
@@ -219,7 +219,6 @@ files:
 - app/views/foreman_tasks/tasks/_lock_card.html.erb
 - app/views/foreman_tasks/tasks/dashboard/_latest_tasks_in_error_warning.html.erb
 - app/views/foreman_tasks/tasks/dashboard/_tasks_status.html.erb
-- app/views/foreman_tasks/tasks/show.html.erb
 - app/views/tasks_mailer/long_tasks.html.erb
 - app/views/tasks_mailer/long_tasks.text.erb
 - babel.config.js
@@ -331,6 +330,7 @@ files:
 - test/graphql/queries/tasks_query_test.rb
 - test/helpers/foreman_tasks/foreman_tasks_helper_test.rb
 - test/helpers/foreman_tasks/tasks_helper_test.rb
+- test/integration/tasks_test.rb
 - test/lib/actions/middleware/keep_current_request_id_test.rb
 - test/lib/actions/middleware/keep_current_taxonomies_test.rb
 - test/lib/actions/middleware/keep_current_timezone_test.rb
@@ -343,6 +343,7 @@ files:
 - test/support/dummy_task_group.rb
 - test/support/history_tasks_builder.rb
 - test/tasks/generate_task_actions_test.rb
+- test/test_plugin_helper.rb
 - test/unit/actions/action_with_sub_plans_test.rb
 - test/unit/actions/bulk_action_test.rb
 - test/unit/actions/proxy_action_test.rb
@@ -398,6 +399,7 @@ files:
 - webpack/ForemanTasks/Components/TaskDetails/__tests__/TaskDetails.fixtures.js
 - webpack/ForemanTasks/Components/TaskDetails/__tests__/TaskDetails.test.js
 - webpack/ForemanTasks/Components/TaskDetails/__tests__/TaskDetailsActions.test.js
+- webpack/ForemanTasks/Components/TaskDetails/__tests__/TaskDetailsSelectors.test.js
 - webpack/ForemanTasks/Components/TaskDetails/index.js
 - webpack/ForemanTasks/Components/TasksDashboard/Components/TasksCardsGrid/Components/PausedTasksCard/PausedTasksCard.js
 - webpack/ForemanTasks/Components/TasksDashboard/Components/TasksCardsGrid/Components/PausedTasksCard/PausedTasksCard.test.js
@@ -471,9 +473,12 @@ files:
 - webpack/ForemanTasks/Components/common/ClickConfirmation/index.js
 - webpack/ForemanTasks/Components/common/ToastsHelpers/ToastTypesConstants.js
 - webpack/ForemanTasks/Components/common/ToastsHelpers/index.js
+- webpack/ForemanTasks/Components/common/taskResultIcon.js
 - webpack/ForemanTasks/Components/common/urlHelpers.js
 - webpack/ForemanTasks/ForemanTasksReducers.js
 - webpack/ForemanTasks/ForemanTasksSelectors.js
+- webpack/ForemanTasks/Routes/ShowTaskDetails/TaskDetailsPage.js
+- webpack/ForemanTasks/Routes/ShowTaskDetails/__tests__/TaskDetailsPage.test.js
 - webpack/Routes/routes.js
 - webpack/Routes/routes.test.js
 - webpack/global_index.js
@@ -519,6 +524,7 @@ test_files:
 - test/graphql/queries/tasks_query_test.rb
 - test/helpers/foreman_tasks/foreman_tasks_helper_test.rb
 - test/helpers/foreman_tasks/tasks_helper_test.rb
+- test/integration/tasks_test.rb
 - test/lib/actions/middleware/keep_current_request_id_test.rb
 - test/lib/actions/middleware/keep_current_taxonomies_test.rb
 - test/lib/actions/middleware/keep_current_timezone_test.rb
@@ -531,6 +537,7 @@ test_files:
 - test/support/dummy_task_group.rb
 - test/support/history_tasks_builder.rb
 - test/tasks/generate_task_actions_test.rb
+- test/test_plugin_helper.rb
 - test/unit/actions/action_with_sub_plans_test.rb
 - test/unit/actions/bulk_action_test.rb
 - test/unit/actions/proxy_action_test.rb

data/app/views/foreman_tasks/tasks/show.html.erb

@@ -1,18 +0,0 @@
-<% stylesheet 'foreman_tasks/foreman_tasks' %>
-<% content_for(:javascripts) do %>
-  <%= webpacked_plugins_js_for :'foreman-tasks' %>
-<% end %>
-<% content_for(:stylesheets) do %>
-  <%= webpacked_plugins_css_for :'foreman-tasks' %>
-<% end %>
-
-<% title _("Details of %s task") % @task.to_s %>
-
-<%= breadcrumbs(
-  items: breadcrumb_items,
-  name_field: 'action',
-  resource_url: foreman_tasks_api_tasks_path,
-  switcher_item_url: foreman_tasks_task_path(:id => ':id')
-) %>
-
-<%= react_component('TaskDetails')  %>