diff --git a/packages/components/src/components/Actions/Actions.jsx b/packages/components/src/components/Actions/Actions.jsx
index d1e447096..70b169e8e 100644
--- a/packages/components/src/components/Actions/Actions.jsx
+++ b/packages/components/src/components/Actions/Actions.jsx
@@ -11,8 +11,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { Component } from 'react';
-import { injectIntl } from 'react-intl';
+import { useState } from 'react';
+import { useIntl } from 'react-intl';
 import {
   Button,
   MenuButton,
@@ -24,38 +24,53 @@ import {
 
 import Modal from '../Modal';
 
-class Actions extends Component {
-  state = { showDialog: false };
+export default function Actions({ items, kind, resource }) {
+  const intl = useIntl();
 
-  handleModalAction = () => {
-    const { action } = this.state;
-    action();
-    this.handleClose();
-  };
+  const [state, setState] = useState({
+    action: undefined,
+    modal: {},
+    showDialog: false
+  });
 
-  handleClose = () => {
-    this.setState({ showDialog: false });
-  };
+  function handleClose() {
+    setState(prevState => ({ ...prevState, showDialog: false }));
+  }
+
+  function handleModalAction() {
+    state.action();
+    handleClose();
+  }
 
-  handleClick = (action, modalProperties) => {
+  function handleClick(itemAction, modalProperties) {
     if (modalProperties) {
-      this.setState({ action, modal: modalProperties, showDialog: true });
+      setState(prevState => ({
+        ...prevState,
+        action: itemAction,
+        modal: modalProperties,
+        showDialog: true
+      }));
     } else {
-      action();
+      itemAction();
     }
-  };
+  }
 
-  getButton() {
-    const { intl, items, kind, resource } = this.props;
+  function getButton() {
     const isButton = kind === 'button';
 
     if (isButton && items.length === 1) {
-      const { action, actionText, icon, modalProperties } = items[0];
+      const {
+        action: itemAction,
+        actionText,
+        danger,
+        icon,
+        modalProperties
+      } = items[0];
       return (
         <Button
-          kind="tertiary"
+          kind={danger ? 'danger' : 'tertiary'}
           onClick={() =>
-            this.handleClick(() => action(resource), modalProperties)
+            handleClick(() => itemAction(resource), modalProperties)
           }
           renderIcon={icon}
           size="md"
@@ -82,7 +97,7 @@ class Actions extends Component {
           {items.map(item => {
             const {
               actionText,
-              action,
+              action: itemAction,
               danger,
               disable,
               hasDivider,
@@ -98,7 +113,7 @@ class Actions extends Component {
                   kind={danger ? 'danger' : 'default'}
                   label={actionText}
                   onClick={() =>
-                    this.handleClick(() => action(resource), modalProperties)
+                    handleClick(() => itemAction(resource), modalProperties)
                   }
                 />
               </>
@@ -120,7 +135,7 @@ class Actions extends Component {
         {items.map(item => {
           const {
             actionText,
-            action,
+            action: itemAction,
             danger,
             disable,
             hasDivider,
@@ -135,7 +150,7 @@ class Actions extends Component {
               itemText={actionText}
               key={actionText}
               onClick={() =>
-                this.handleClick(() => action(resource), modalProperties)
+                handleClick(() => itemAction(resource), modalProperties)
               }
               requireTitle
             />
@@ -145,38 +160,31 @@ class Actions extends Component {
     );
   }
 
-  render() {
-    const { modal = {}, showDialog } = this.state;
-    const { intl, resource } = this.props;
+  const dialog = state.showDialog ? (
+    <Modal
+      open={state.showDialog}
+      modalHeading={state.modal.heading}
+      primaryButtonText={state.modal.primaryButtonText}
+      secondaryButtonText={
+        state.modal.secondaryButtonText ||
+        intl.formatMessage({
+          id: 'dashboard.modal.cancelButton',
+          defaultMessage: 'Cancel'
+        })
+      }
+      onRequestClose={handleClose}
+      onRequestSubmit={handleModalAction}
+      onSecondarySubmit={handleClose}
+      danger={state.modal.danger}
+    >
+      {state.modal.body && state.modal.body(resource)}
+    </Modal>
+  ) : null;
 
-    const dialog = showDialog ? (
-      <Modal
-        open={showDialog}
-        modalHeading={modal.heading}
-        primaryButtonText={modal.primaryButtonText}
-        secondaryButtonText={
-          modal.secondaryButtonText ||
-          intl.formatMessage({
-            id: 'dashboard.modal.cancelButton',
-            defaultMessage: 'Cancel'
-          })
-        }
-        onRequestClose={this.handleClose}
-        onRequestSubmit={this.handleModalAction}
-        onSecondarySubmit={this.handleClose}
-        danger={modal.danger}
-      >
-        {modal.body && modal.body(resource)}
-      </Modal>
-    ) : null;
-
-    return (
-      <>
-        {this.getButton()}
-        {dialog}
-      </>
-    );
-  }
+  return (
+    <>
+      {getButton()}
+      {dialog}
+    </>
+  );
 }
-
-export default injectIntl(Actions);
diff --git a/packages/components/src/components/Actions/Actions.stories.jsx b/packages/components/src/components/Actions/Actions.stories.jsx
index beca47806..76a013334 100644
--- a/packages/components/src/components/Actions/Actions.stories.jsx
+++ b/packages/components/src/components/Actions/Actions.stories.jsx
@@ -44,33 +44,29 @@ const deleteAction = {
   }
 };
 
-const props = {
-  items: [
-    { action: () => {}, actionText: 'Rerun' },
-    {
-      action: () => {},
-      actionText: 'disabled option',
-      disable: () => true,
-      modalProperties: {
-        body: () => 'modal body',
-        heading: 'Modal Heading',
-        primaryButtonText: 'primary text',
-        secondaryButtonText: 'secondary text'
-      }
-    },
-    deleteAction
-  ]
-};
-
 export const Default = {
   args: {
-    ...props
+    items: [
+      { action: () => {}, actionText: 'Rerun' },
+      {
+        action: () => {},
+        actionText: 'disabled option',
+        disable: () => true,
+        modalProperties: {
+          body: () => 'modal body',
+          heading: 'Modal Heading',
+          primaryButtonText: 'primary text',
+          secondaryButtonText: 'secondary text'
+        }
+      },
+      deleteAction
+    ]
   }
 };
 
 export const Button = {
   args: {
-    ...props,
+    ...Default.args,
     kind: 'button'
   }
 };
diff --git a/packages/components/src/components/DetailsHeader/DetailsHeader.jsx b/packages/components/src/components/DetailsHeader/DetailsHeader.jsx
index d994b1134..41727cfd1 100644
--- a/packages/components/src/components/DetailsHeader/DetailsHeader.jsx
+++ b/packages/components/src/components/DetailsHeader/DetailsHeader.jsx
@@ -11,17 +11,26 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { Component } from 'react';
 import { Pending as DefaultIcon } from '@carbon/react/icons';
-import { injectIntl } from 'react-intl';
+import { useIntl } from 'react-intl';
 import { getStatus } from '@tektoncd/dashboard-utils';
 
 import FormattedDuration from '../FormattedDuration';
 import StatusIcon from '../StatusIcon';
 
-class DetailsHeader extends Component {
-  getDuration() {
-    const { intl, stepStatus, taskRun } = this.props;
+export default function DetailsHeader({
+  displayName,
+  exitCode,
+  hasWarning,
+  reason,
+  stepStatus,
+  status,
+  taskRun = {},
+  type = 'step'
+}) {
+  const intl = useIntl();
+
+  function getDuration() {
     let { completionTime: endTime, startTime } = taskRun.status || {};
     if (stepStatus) {
       ({ finishedAt: endTime, startedAt: startTime } =
@@ -53,8 +62,7 @@ class DetailsHeader extends Component {
     );
   }
 
-  statusLabel() {
-    const { exitCode, hasWarning, intl, reason, status, taskRun } = this.props;
+  function getStatusLabel() {
     const { reason: taskReason, status: taskStatus } = getStatus(taskRun);
 
     if (
@@ -108,58 +116,45 @@ class DetailsHeader extends Component {
     });
   }
 
-  render() {
-    const {
-      displayName,
-      hasWarning,
-      intl,
-      taskRun,
-      type = 'step'
-    } = this.props;
-    let { reason, status } = this.props;
-    let statusLabel;
+  let statusLabel;
 
-    const duration = this.getDuration();
+  const duration = getDuration();
 
-    if (type === 'taskRun') {
-      ({ reason, status } = getStatus(taskRun));
-      statusLabel =
-        reason ||
-        intl.formatMessage({
-          id: 'dashboard.taskRun.status.pending',
-          defaultMessage: 'Pending'
-        });
-    } else {
-      statusLabel = this.statusLabel();
-    }
+  let reasonToUse = reason;
+  let statusToUse = status;
 
-    return (
-      <header
-        className="tkn--step-details-header"
-        data-status={status}
-        data-reason={reason}
-      >
-        <h2 className="tkn--details-header--heading">
-          <StatusIcon
-            DefaultIcon={props => <DefaultIcon size={24} {...props} />}
-            hasWarning={hasWarning}
-            reason={reason}
-            status={status}
-            {...(type === 'step' ? { type: 'inverse' } : null)}
-          />
-          <span className="tkn--run-details-name" title={displayName}>
-            {displayName}
-          </span>
-          <span className="tkn--status-label">{statusLabel}</span>
-        </h2>
-        {duration}
-      </header>
-    );
+  if (type === 'taskRun') {
+    ({ reason: reasonToUse, status: statusToUse } = getStatus(taskRun));
+    statusLabel =
+      reasonToUse ||
+      intl.formatMessage({
+        id: 'dashboard.taskRun.status.pending',
+        defaultMessage: 'Pending'
+      });
+  } else {
+    statusLabel = getStatusLabel();
   }
-}
 
-DetailsHeader.defaultProps = {
-  taskRun: {}
-};
-
-export default injectIntl(DetailsHeader);
+  return (
+    <header
+      className="tkn--step-details-header"
+      data-status={statusToUse}
+      data-reason={reasonToUse}
+    >
+      <h2 className="tkn--details-header--heading">
+        <StatusIcon
+          DefaultIcon={props => <DefaultIcon size={24} {...props} />}
+          hasWarning={hasWarning}
+          reason={reasonToUse}
+          status={statusToUse}
+          {...(type === 'step' ? { type: 'inverse' } : null)}
+        />
+        <span className="tkn--run-details-name" title={displayName}>
+          {displayName}
+        </span>
+        <span className="tkn--status-label">{statusLabel}</span>
+      </h2>
+      {duration}
+    </header>
+  );
+}
diff --git a/packages/components/src/components/PipelineRun/PipelineRun.jsx b/packages/components/src/components/PipelineRun/PipelineRun.jsx
index 94775ef2b..cb83b44bb 100644
--- a/packages/components/src/components/PipelineRun/PipelineRun.jsx
+++ b/packages/components/src/components/PipelineRun/PipelineRun.jsx
@@ -11,10 +11,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { Component, Fragment } from 'react';
-import PropTypes from 'prop-types';
+import { Fragment, useState } from 'react';
 import { InlineNotification, SkeletonText } from '@carbon/react';
-import { injectIntl } from 'react-intl';
+import { useIntl } from 'react-intl';
 import {
   getErrorMessage,
   getStatus,
@@ -41,14 +40,38 @@ function getPipelineTask({ pipeline, pipelineRun, selectedTaskId, taskRun }) {
   return pipelineTask;
 }
 
-export /* istanbul ignore next */ class PipelineRunContainer extends Component {
-  state = {
-    isLogsMaximized: false
-  };
-
-  getPipelineRunError = () => {
-    const { pipelineRun } = this.props;
-
+export default /* istanbul ignore next */ function PipelineRun({
+  customNotification,
+  enableLogAutoScroll,
+  enableLogScrollButtons,
+  error,
+  fetchLogs,
+  forceLogPolling,
+  getLogsToolbar,
+  handleTaskSelected = /* istanbul ignore next */ () => {},
+  icon,
+  loading,
+  maximizedLogsContainer,
+  onRetryChange,
+  onViewChange = /* istanbul ignore next */ () => {},
+  pipeline,
+  pipelineRun,
+  pod,
+  pollingInterval,
+  runActions,
+  selectedRetry,
+  selectedStepId = null,
+  selectedTaskId = null,
+  selectedTaskRunName,
+  taskRuns,
+  tasks,
+  triggerHeader,
+  view = null
+}) {
+  const intl = useIntl();
+  const [isLogsMaximized, setIsLogsMaximized] = useState(false);
+
+  function getPipelineRunError() {
     if (!pipelineRun.status?.taskRuns && !pipelineRun.status?.childReferences) {
       return null;
     }
@@ -63,24 +86,13 @@ export /* istanbul ignore next */ class PipelineRunContainer extends Component {
       !taskRunsStatus &&
       !childReferences && { message, reason }
     );
-  };
-
-  getLogContainer({ stepName, stepStatus, taskRun }) {
-    const {
-      enableLogAutoScroll,
-      enableLogScrollButtons,
-      fetchLogs,
-      forceLogPolling,
-      getLogsToolbar,
-      maximizedLogsContainer,
-      pollingInterval,
-      selectedRetry,
-      selectedStepId,
-      selectedTaskId
-    } = this.props;
+  }
 
-    const { isLogsMaximized } = this.state;
+  function toggleLogsMaximized() {
+    setIsLogsMaximized(prevIsLogsMaximized => !prevIsLogsMaximized);
+  }
 
+  function getLogContainer({ stepName, stepStatus, taskRun }) {
     if (!selectedStepId || !stepStatus) {
       return null;
     }
@@ -100,8 +112,7 @@ export /* istanbul ignore next */ class PipelineRunContainer extends Component {
               isMaximized: isLogsMaximized,
               stepStatus,
               taskRun,
-              toggleMaximized:
-                !!maximizedLogsContainer && this.toggleLogsMaximized
+              toggleMaximized: !!maximizedLogsContainer && toggleLogsMaximized
             })
           }
           fetchLogs={() => fetchLogs(stepName, stepStatus, taskRun)}
@@ -117,14 +128,7 @@ export /* istanbul ignore next */ class PipelineRunContainer extends Component {
     );
   }
 
-  toggleLogsMaximized = () => {
-    this.setState(({ isLogsMaximized }) => ({
-      isLogsMaximized: !isLogsMaximized
-    }));
-  };
-
-  loadTaskRuns = () => {
-    const { pipelineRun } = this.props;
+  function loadTaskRuns() {
     if (
       !pipelineRun?.status?.taskRuns &&
       !pipelineRun?.status?.childReferences
@@ -132,262 +136,218 @@ export /* istanbul ignore next */ class PipelineRunContainer extends Component {
       return [];
     }
 
-    const { taskRuns } = this.props;
     return taskRuns || [];
-  };
+  }
 
-  onTaskSelected = ({
+  function onTaskSelected({
     selectedRetry: retry,
-    selectedStepId,
-    selectedTaskId,
+    selectedStepId: stepId,
+    selectedTaskId: taskId,
     taskRunName
-  }) => {
-    const { handleTaskSelected, pipeline, pipelineRun } = this.props;
-    const taskRuns = this.loadTaskRuns();
+  }) {
+    const taskRunsToUse = loadTaskRuns();
     const taskRun =
-      taskRuns.find(
+      taskRunsToUse.find(
         ({ metadata }) =>
-          metadata.labels?.[labelConstants.PIPELINE_TASK] === selectedTaskId
+          metadata.labels?.[labelConstants.PIPELINE_TASK] === taskId
       ) || {};
 
     const pipelineTask = getPipelineTask({
       pipeline,
       pipelineRun,
-      selectedTaskId,
+      selectedTaskId: taskId,
       taskRun
     });
     handleTaskSelected({
       selectedRetry: retry,
-      selectedStepId,
-      selectedTaskId,
+      selectedStepId: stepId,
+      selectedTaskId: taskId,
       taskRunName: pipelineTask?.matrix ? taskRunName : undefined
     });
-  };
-
-  render() {
-    const {
-      customNotification,
-      error,
-      icon,
-      intl,
-      loading,
-      onRetryChange,
-      onViewChange,
-      pipeline,
-      pipelineRun,
-      pod,
-      runActions,
-      selectedRetry,
-      selectedStepId,
-      selectedTaskId,
-      selectedTaskRunName,
-      triggerHeader,
-      view
-    } = this.props;
-
-    if (loading) {
-      return <SkeletonText heading width="60%" />;
-    }
-
-    if (error) {
-      return (
-        <>
-          {customNotification}
-          <InlineNotification
-            kind="error"
-            hideCloseButton
-            lowContrast
-            title={intl.formatMessage({
-              id: 'dashboard.pipelineRun.error',
-              defaultMessage: 'Error loading PipelineRun'
-            })}
-            subtitle={getErrorMessage(error)}
-          />
-        </>
-      );
-    }
-
-    if (!this.props.pipelineRun) {
-      return (
-        <>
-          {customNotification}
-          <InlineNotification
-            kind="info"
-            hideCloseButton
-            lowContrast
-            title={intl.formatMessage({
-              id: 'dashboard.pipelineRun.failed',
-              defaultMessage: 'Cannot load PipelineRun'
-            })}
-            subtitle={intl.formatMessage({
-              id: 'dashboard.pipelineRun.notFound',
-              defaultMessage: 'PipelineRun not found'
-            })}
-          />
-        </>
-      );
-    }
-
-    const pipelineRunName =
-      pipelineRun.metadata.name || pipelineRun.metadata.generateName;
-    const pipelineRunError = this.getPipelineRunError();
-
-    const {
-      lastTransitionTime,
-      message: pipelineRunStatusMessage,
-      reason: pipelineRunReason,
-      status: pipelineRunStatus
-    } = getStatus(pipelineRun);
-
-    if (pipelineRunError) {
-      return (
-        <>
-          <RunHeader
-            icon={icon}
-            lastTransitionTime={lastTransitionTime}
-            loading={loading}
-            pipelineRun={pipelineRun}
-            runName={pipelineRun.pipelineRunName}
-            reason="Error"
-            status={pipelineRunStatus}
-            triggerHeader={triggerHeader}
-          />
-          {customNotification}
-          <InlineNotification
-            kind="error"
-            hideCloseButton
-            lowContrast
-            title={intl.formatMessage(
-              {
-                id: 'dashboard.pipelineRun.failedMessage',
-                defaultMessage: 'Unable to load PipelineRun: {reason}'
-              },
-              { reason: pipelineRunError.reason }
-            )}
-            subtitle={pipelineRunError.message}
-          />
-        </>
-      );
-    }
-
-    const taskRuns = this.loadTaskRuns();
-    let taskRun =
-      taskRuns.find(
-        ({ metadata }) =>
-          metadata.labels?.[labelConstants.PIPELINE_TASK] === selectedTaskId
-      ) || {};
-
-    const pipelineTask = getPipelineTask({
-      pipeline,
-      pipelineRun,
-      selectedTaskId,
-      taskRun
-    });
-    if (pipelineTask?.matrix && selectedTaskRunName) {
-      taskRun = taskRuns.find(
-        ({ metadata }) => metadata.name === selectedTaskRunName
-      );
-    }
+  }
 
-    if (taskRun.status?.retriesStatus && selectedRetry) {
-      taskRun = {
-        ...taskRun,
-        status: taskRun.status.retriesStatus[selectedRetry]
-      };
-    }
+  if (loading) {
+    return <SkeletonText heading width="60%" />;
+  }
 
-    const task =
-      (taskRun.spec?.taskRef?.name &&
-        this.props.tasks?.find(
-          t => t.metadata.name === taskRun.spec.taskRef.name
-        )) ||
-      {};
+  if (error) {
+    return (
+      <>
+        {customNotification}
+        <InlineNotification
+          kind="error"
+          hideCloseButton
+          lowContrast
+          title={intl.formatMessage({
+            id: 'dashboard.pipelineRun.error',
+            defaultMessage: 'Error loading PipelineRun'
+          })}
+          subtitle={getErrorMessage(error)}
+        />
+      </>
+    );
+  }
 
-    const definition = getStepDefinition({
-      selectedStepId,
-      task,
-      taskRun
-    });
+  if (!pipelineRun) {
+    return (
+      <>
+        {customNotification}
+        <InlineNotification
+          kind="info"
+          hideCloseButton
+          lowContrast
+          title={intl.formatMessage({
+            id: 'dashboard.pipelineRun.failed',
+            defaultMessage: 'Cannot load PipelineRun'
+          })}
+          subtitle={intl.formatMessage({
+            id: 'dashboard.pipelineRun.notFound',
+            defaultMessage: 'PipelineRun not found'
+          })}
+        />
+      </>
+    );
+  }
 
-    const stepStatus = getStepStatus({
-      selectedStepId,
-      taskRun
-    });
+  const pipelineRunName =
+    pipelineRun.metadata.name || pipelineRun.metadata.generateName;
+  const pipelineRunError = getPipelineRunError();
 
-    const logContainer = this.getLogContainer({
-      stepName: selectedStepId,
-      stepStatus,
-      taskRun
-    });
+  const {
+    lastTransitionTime,
+    message: pipelineRunStatusMessage,
+    reason: pipelineRunReason,
+    status: pipelineRunStatus
+  } = getStatus(pipelineRun);
 
+  if (pipelineRunError) {
     return (
       <>
         <RunHeader
           icon={icon}
           lastTransitionTime={lastTransitionTime}
           loading={loading}
-          message={pipelineRunStatusMessage}
-          runName={pipelineRunName}
-          reason={pipelineRunReason}
+          pipelineRun={pipelineRun}
+          runName={pipelineRun.pipelineRunName}
+          reason="Error"
           status={pipelineRunStatus}
           triggerHeader={triggerHeader}
-        >
-          {runActions}
-        </RunHeader>
+        />
         {customNotification}
-        {taskRuns.length > 0 && (
-          <div className="tkn--tasks">
-            <TaskTree
-              isSelectedTaskMatrix={!!pipelineTask?.matrix}
-              onRetryChange={onRetryChange}
-              onSelect={this.onTaskSelected}
-              selectedRetry={selectedRetry}
-              selectedStepId={selectedStepId}
-              selectedTaskId={selectedTaskId}
-              selectedTaskRunName={selectedTaskRunName}
-              taskRuns={taskRuns}
-            />
-            {(selectedStepId && (
-              <StepDetails
-                definition={definition}
-                logContainer={logContainer}
-                onViewChange={onViewChange}
-                stepName={selectedStepId}
-                stepStatus={stepStatus}
-                taskRun={taskRun}
-                view={view}
-              />
-            )) ||
-              (selectedTaskId && (
-                <TaskRunDetails
-                  onViewChange={onViewChange}
-                  pod={pod}
-                  task={task}
-                  taskRun={taskRun}
-                  view={view}
-                />
-              ))}
-          </div>
-        )}
+        <InlineNotification
+          kind="error"
+          hideCloseButton
+          lowContrast
+          title={intl.formatMessage(
+            {
+              id: 'dashboard.pipelineRun.failedMessage',
+              defaultMessage: 'Unable to load PipelineRun: {reason}'
+            },
+            { reason: pipelineRunError.reason }
+          )}
+          subtitle={pipelineRunError.message}
+        />
       </>
     );
   }
-}
 
-PipelineRunContainer.propTypes = {
-  handleTaskSelected: PropTypes.func,
-  onViewChange: PropTypes.func,
-  selectedStepId: PropTypes.string,
-  selectedTaskId: PropTypes.string,
-  view: PropTypes.string
-};
+  const taskRunsToUse = loadTaskRuns();
+  let taskRun =
+    taskRunsToUse.find(
+      ({ metadata }) =>
+        metadata.labels?.[labelConstants.PIPELINE_TASK] === selectedTaskId
+    ) || {};
 
-PipelineRunContainer.defaultProps = {
-  handleTaskSelected: /* istanbul ignore next */ () => {},
-  onViewChange: /* istanbul ignore next */ () => {},
-  selectedStepId: null,
-  selectedTaskId: null,
-  view: null
-};
+  const pipelineTask = getPipelineTask({
+    pipeline,
+    pipelineRun,
+    selectedTaskId,
+    taskRun
+  });
+  if (pipelineTask?.matrix && selectedTaskRunName) {
+    taskRun = taskRunsToUse.find(
+      ({ metadata }) => metadata.name === selectedTaskRunName
+    );
+  }
+
+  if (taskRun.status?.retriesStatus && selectedRetry) {
+    taskRun = {
+      ...taskRun,
+      status: taskRun.status.retriesStatus[selectedRetry]
+    };
+  }
 
-export default injectIntl(PipelineRunContainer);
+  const task =
+    (taskRun.spec?.taskRef?.name &&
+      tasks?.find(t => t.metadata.name === taskRun.spec.taskRef.name)) ||
+    {};
+
+  const definition = getStepDefinition({
+    selectedStepId,
+    task,
+    taskRun
+  });
+
+  const stepStatus = getStepStatus({
+    selectedStepId,
+    taskRun
+  });
+
+  const logContainer = getLogContainer({
+    stepName: selectedStepId,
+    stepStatus,
+    taskRun
+  });
+
+  return (
+    <>
+      <RunHeader
+        icon={icon}
+        lastTransitionTime={lastTransitionTime}
+        loading={loading}
+        message={pipelineRunStatusMessage}
+        runName={pipelineRunName}
+        reason={pipelineRunReason}
+        status={pipelineRunStatus}
+        triggerHeader={triggerHeader}
+      >
+        {runActions}
+      </RunHeader>
+      {customNotification}
+      {taskRunsToUse.length > 0 && (
+        <div className="tkn--tasks">
+          <TaskTree
+            isSelectedTaskMatrix={!!pipelineTask?.matrix}
+            onRetryChange={onRetryChange}
+            onSelect={onTaskSelected}
+            selectedRetry={selectedRetry}
+            selectedStepId={selectedStepId}
+            selectedTaskId={selectedTaskId}
+            selectedTaskRunName={selectedTaskRunName}
+            taskRuns={taskRunsToUse}
+          />
+          {(selectedStepId && (
+            <StepDetails
+              definition={definition}
+              logContainer={logContainer}
+              onViewChange={onViewChange}
+              stepName={selectedStepId}
+              stepStatus={stepStatus}
+              taskRun={taskRun}
+              view={view}
+            />
+          )) ||
+            (selectedTaskId && (
+              <TaskRunDetails
+                onViewChange={onViewChange}
+                pod={pod}
+                task={task}
+                taskRun={taskRun}
+                view={view}
+              />
+            ))}
+        </div>
+      )}
+    </>
+  );
+}
diff --git a/packages/components/src/components/RunHeader/RunHeader.jsx b/packages/components/src/components/RunHeader/RunHeader.jsx
index dcb115969..ba2852256 100644
--- a/packages/components/src/components/RunHeader/RunHeader.jsx
+++ b/packages/components/src/components/RunHeader/RunHeader.jsx
@@ -11,108 +11,99 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { Component } from 'react';
-import { injectIntl } from 'react-intl';
+import { useIntl } from 'react-intl';
 import { CopyButton, SkeletonPlaceholder } from '@carbon/react';
 import { copyToClipboard } from '@tektoncd/dashboard-utils';
 
 import FormattedDate from '../FormattedDate';
 
-class RunHeader extends Component {
-  /* istanbul ignore next */
-  copyStatusMessage = () => {
-    copyToClipboard(this.props.message);
-  };
+export default function RunHeader({
+  children,
+  icon,
+  lastTransitionTime,
+  loading,
+  message,
+  runName,
+  reason,
+  status,
+  triggerHeader
+}) {
+  const intl = useIntl();
 
-  render() {
-    const {
-      children,
-      icon,
-      intl,
-      lastTransitionTime,
-      loading,
-      message,
-      runName,
-      reason,
-      status,
-      triggerHeader
-    } = this.props;
+  /* istanbul ignore next */
+  function copyStatusMessage() {
+    copyToClipboard(message);
+  }
 
-    return (
-      <header
-        className="tkn--pipeline-run-header"
-        data-succeeded={status}
-        data-reason={reason}
-      >
-        {(() => {
-          if (loading) {
-            return (
-              <SkeletonPlaceholder
-                className="tkn--header-skeleton"
-                title={intl.formatMessage({
-                  id: 'dashboard.loading',
-                  defaultMessage: 'Loading…'
-                })}
-              />
-            );
-          }
+  return (
+    <header
+      className="tkn--pipeline-run-header"
+      data-succeeded={status}
+      data-reason={reason}
+    >
+      {(() => {
+        if (loading) {
           return (
-            runName && (
-              <>
-                <h1 className="tkn--run-header--heading">
-                  <div className="tkn--run-name" title={runName}>
-                    {runName}
-                  </div>
-                  {icon}
-                  <span className="tkn--time">
-                    {lastTransitionTime
-                      ? intl.formatMessage(
-                          {
-                            id: 'dashboard.lastUpdated',
-                            defaultMessage: 'Last updated {time}'
-                          },
-                          {
-                            time: (
-                              <FormattedDate
-                                date={lastTransitionTime}
-                                relative
-                              />
-                            )
-                          }
-                        )
-                      : null}
-                  </span>
-                  {children}
-                </h1>
-                <div className="tkn--status">
-                  <span className="tkn--status-label">{reason}</span>
-                  {message && (
-                    <>
-                      <span className="tkn--status-message" title={message}>
-                        {message}
-                      </span>
-                      <CopyButton
-                        feedback={intl.formatMessage({
-                          id: 'dashboard.clipboard.copied',
-                          defaultMessage: 'Copied!'
-                        })}
-                        iconDescription={intl.formatMessage({
-                          id: 'dashboard.clipboard.copyStatusMessage',
-                          defaultMessage: 'Copy status message to clipboard'
-                        })}
-                        onClick={this.copyStatusMessage}
-                      />
-                    </>
-                  )}
-                </div>
-                {triggerHeader}
-              </>
-            )
+            <SkeletonPlaceholder
+              className="tkn--header-skeleton"
+              title={intl.formatMessage({
+                id: 'dashboard.loading',
+                defaultMessage: 'Loading…'
+              })}
+            />
           );
-        })()}
-      </header>
-    );
-  }
+        }
+        return (
+          runName && (
+            <>
+              <h1 className="tkn--run-header--heading">
+                <div className="tkn--run-name" title={runName}>
+                  {runName}
+                </div>
+                {icon}
+                <span className="tkn--time">
+                  {lastTransitionTime
+                    ? intl.formatMessage(
+                        {
+                          id: 'dashboard.lastUpdated',
+                          defaultMessage: 'Last updated {time}'
+                        },
+                        {
+                          time: (
+                            <FormattedDate date={lastTransitionTime} relative />
+                          )
+                        }
+                      )
+                    : null}
+                </span>
+                {children}
+              </h1>
+              <div className="tkn--status">
+                <span className="tkn--status-label">{reason}</span>
+                {message && (
+                  <>
+                    <span className="tkn--status-message" title={message}>
+                      {message}
+                    </span>
+                    <CopyButton
+                      feedback={intl.formatMessage({
+                        id: 'dashboard.clipboard.copied',
+                        defaultMessage: 'Copied!'
+                      })}
+                      iconDescription={intl.formatMessage({
+                        id: 'dashboard.clipboard.copyStatusMessage',
+                        defaultMessage: 'Copy status message to clipboard'
+                      })}
+                      onClick={copyStatusMessage}
+                    />
+                  </>
+                )}
+              </div>
+              {triggerHeader}
+            </>
+          )
+        );
+      })()}
+    </header>
+  );
 }
-
-export default injectIntl(RunHeader);
diff --git a/packages/components/src/components/Step/Step.jsx b/packages/components/src/components/Step/Step.jsx
index fbc523dec..c3fa96a76 100644
--- a/packages/components/src/components/Step/Step.jsx
+++ b/packages/components/src/components/Step/Step.jsx
@@ -11,23 +11,28 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { Component } from 'react';
-import { injectIntl } from 'react-intl';
+import { useIntl } from 'react-intl';
 import { Pending as DefaultIcon } from '@carbon/react/icons';
 
 import StatusIcon from '../StatusIcon';
 
-class Step extends Component {
-  handleClick = event => {
-    event.preventDefault();
-
-    const { id } = this.props;
-    this.props.onSelect(id);
-  };
+export default function Step({
+  exitCode,
+  id,
+  onSelect,
+  reason,
+  selected,
+  status,
+  stepName = 'unknown'
+}) {
+  const intl = useIntl();
 
-  statusLabel() {
-    const { exitCode, intl, reason, status } = this.props;
+  function handleClick(event) {
+    event.preventDefault();
+    onSelect(id);
+  }
 
+  function getStatusLabel() {
     if (
       status === 'cancelled' ||
       (status === 'terminated' &&
@@ -80,43 +85,34 @@ class Step extends Component {
     });
   }
 
-  render() {
-    const { exitCode, reason, selected, status, stepName } = this.props;
-    const statusLabel = this.statusLabel();
+  const statusLabel = getStatusLabel();
 
-    return (
-      <li
-        className="tkn--step"
-        data-status={status}
-        data-reason={reason}
-        data-selected={selected || undefined}
+  return (
+    <li
+      className="tkn--step"
+      data-status={status}
+      data-reason={reason}
+      data-selected={selected || undefined}
+    >
+      <span // eslint-disable-line jsx-a11y/no-static-element-interactions
+        className="tkn--step-link"
+        tabIndex="0" // eslint-disable-line jsx-a11y/no-noninteractive-tabindex
+        onClick={handleClick}
+        onKeyUp={e => e.key === 'Enter' && handleClick(e)}
+        role="button"
       >
-        <span // eslint-disable-line jsx-a11y/no-static-element-interactions
-          className="tkn--step-link"
-          tabIndex="0" // eslint-disable-line jsx-a11y/no-noninteractive-tabindex
-          onClick={this.handleClick}
-          onKeyUp={e => e.key === 'Enter' && this.handleClick(e)}
-          role="button"
-        >
-          <StatusIcon
-            DefaultIcon={props => <DefaultIcon size={20} {...props} />}
-            hasWarning={exitCode !== 0}
-            reason={reason}
-            status={status}
-            title={statusLabel}
-            type="inverse"
-          />
-          <span className="tkn--step-name" title={stepName}>
-            {stepName}
-          </span>
+        <StatusIcon
+          DefaultIcon={props => <DefaultIcon size={20} {...props} />}
+          hasWarning={exitCode !== 0}
+          reason={reason}
+          status={status}
+          title={statusLabel}
+          type="inverse"
+        />
+        <span className="tkn--step-name" title={stepName}>
+          {stepName}
         </span>
-      </li>
-    );
-  }
+      </span>
+    </li>
+  );
 }
-
-Step.defaultProps = {
-  stepName: 'unknown'
-};
-
-export default injectIntl(Step);
diff --git a/packages/components/src/components/StepDefinition/StepDefinition.jsx b/packages/components/src/components/StepDefinition/StepDefinition.jsx
index 05ddc0ca4..f84e8da7d 100644
--- a/packages/components/src/components/StepDefinition/StepDefinition.jsx
+++ b/packages/components/src/components/StepDefinition/StepDefinition.jsx
@@ -11,29 +11,27 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { PureComponent } from 'react';
-import { injectIntl } from 'react-intl';
+import { memo } from 'react';
+import { useIntl } from 'react-intl';
 
 import ViewYAML from '../ViewYAML';
 
-class StepDefinition extends PureComponent {
-  render() {
-    const { definition, intl } = this.props;
+function StepDefinition({ definition }) {
+  const intl = useIntl();
 
-    return (
-      <ViewYAML
-        dark
-        enableSyntaxHighlighting
-        resource={
-          definition ||
-          intl.formatMessage({
-            id: 'dashboard.step.definitionNotAvailable',
-            defaultMessage: 'Step definition not available'
-          })
-        }
-      />
-    );
-  }
+  return (
+    <ViewYAML
+      dark
+      enableSyntaxHighlighting
+      resource={
+        definition ||
+        intl.formatMessage({
+          id: 'dashboard.step.definitionNotAvailable',
+          defaultMessage: 'Step definition not available'
+        })
+      }
+    />
+  );
 }
 
-export default injectIntl(StepDefinition);
+export default memo(StepDefinition);
diff --git a/packages/graph/src/components/legacy/ZoomablePipelineGraph.jsx b/packages/graph/src/components/legacy/ZoomablePipelineGraph.jsx
index d953bd322..7b5c954f3 100644
--- a/packages/graph/src/components/legacy/ZoomablePipelineGraph.jsx
+++ b/packages/graph/src/components/legacy/ZoomablePipelineGraph.jsx
@@ -12,9 +12,8 @@ limitations under the License.
 */
 /* istanbul ignore file */
 
-import { Component } from 'react';
-import { injectIntl } from 'react-intl';
-
+import { useRef, useState } from 'react';
+import { useIntl } from 'react-intl';
 import { Button } from '@carbon/react';
 import {
   Cursor_1 as Cursor20,
@@ -32,137 +31,126 @@ const height = 600;
 const minZoom = 0.1;
 const maxZoom = 10;
 
-class ZoomablePipelineGraph extends Component {
-  state = {
-    isPanningEnabled: false
-  };
+export default function ZoomablePipelineGraph(props) {
+  const intl = useIntl();
+  const svgRef = useRef();
+  const [isPanningEnabled, setIsPanningEnabled] = useState(false);
 
-  togglePanning = () => {
-    const { isPanningEnabled } = this.state;
-    this.setState({
-      isPanningEnabled: !isPanningEnabled
-    });
-  };
+  function togglePanning() {
+    setIsPanningEnabled(prevIsPanningEnabled => !prevIsPanningEnabled);
+  }
 
-  render() {
-    const { intl } = this.props;
-    const { isPanningEnabled } = this.state;
-    return (
-      <PanZoom
-        svg={() => this.svg}
-        minZoom={minZoom}
-        maxZoom={maxZoom}
-        width={width}
-        height={height}
-      >
-        {({
-          translate,
-          scale,
-          dragStart,
-          dragMove,
-          dragEnd,
-          zoomIn,
-          zoomOut,
-          zoomScroll,
-          setZoom,
-          center,
-          reset
-        }) => (
-          <div className="pipeline-graph-zoom-container">
-            <svg
-              width="100%"
-              height="100%"
-              ref={ref => {
-                this.svg = ref;
-              }}
-              onWheel={zoomScroll}
-              {...(isPanningEnabled
-                ? {
-                    onMouseDown: dragStart,
-                    onMouseUp: dragEnd,
-                    onMouseMove: dragMove
-                  }
-                : null)}
-              onDoubleClick={zoomIn}
+  return (
+    <PanZoom
+      svg={() => svgRef.current}
+      minZoom={minZoom}
+      maxZoom={maxZoom}
+      width={width}
+      height={height}
+    >
+      {({
+        translate,
+        scale,
+        dragStart,
+        dragMove,
+        dragEnd,
+        zoomIn,
+        zoomOut,
+        zoomScroll,
+        setZoom,
+        center,
+        reset
+      }) => (
+        <div className="pipeline-graph-zoom-container">
+          <svg
+            width="100%"
+            height="100%"
+            ref={svgRef}
+            onWheel={zoomScroll}
+            {...(isPanningEnabled
+              ? {
+                  onMouseDown: dragStart,
+                  onMouseUp: dragEnd,
+                  onMouseMove: dragMove
+                }
+              : null)}
+            onDoubleClick={zoomIn}
+          >
+            <g
+              draggable
+              transform={`translate(${translate.x},${translate.y}) scale(${scale},${scale})`}
             >
-              <g
-                draggable
-                transform={`translate(${translate.x},${translate.y}) scale(${scale},${scale})`}
-              >
-                <PipelineGraph {...this.props} />
-              </g>
-            </svg>
+              <PipelineGraph {...props} />
+            </g>
+          </svg>
 
-            <div className="toolbar">
-              <Button
-                disabled={!isPanningEnabled}
-                iconDescription={intl.formatMessage({
-                  id: 'dashboard.graph.select',
-                  defaultMessage: 'Select'
-                })}
-                kind="ghost"
-                onClick={this.togglePanning}
-                renderIcon={props => <Cursor20 size={20} {...props} />}
-              />
-              <Button
-                disabled={isPanningEnabled}
-                iconDescription={intl.formatMessage({
-                  id: 'dashboard.graph.pan',
-                  defaultMessage: 'Pan'
-                })}
-                kind="ghost"
-                onClick={this.togglePanning}
-                renderIcon={props => <Move size={20} {...props} />}
-              />
-              {/* expand / collapse all */}
-              {/* fit to window */}
-              {/* <Button kind="ghost" renderIcon={Minimize20} /> */}
-              <Button kind="ghost" onClick={reset}>
-                Reset
-              </Button>
-              <Button kind="ghost" onClick={center}>
-                Center
-              </Button>
-              <Button
-                disabled={false}
-                hasIconOnly
-                iconDescription={intl.formatMessage({
-                  id: 'dashboard.graph.zoomOut',
-                  defaultMessage: 'Zoom out'
-                })}
-                kind="ghost"
-                onClick={zoomOut}
-                renderIcon={props => <ZoomOut size={20} {...props} />}
-                tooltipPosition="top"
-                tooltipAlignment="end"
-              />
-              <input
-                type="range"
-                min={minZoom}
-                max={maxZoom}
-                value={scale}
-                step=".1"
-                onChange={e => setZoom(e.target.value)}
-              />
-              <Button
-                disabled={false}
-                hasIconOnly
-                iconDescription={intl.formatMessage({
-                  id: 'dashboard.graph.zoomIn',
-                  defaultMessage: 'Zoom in'
-                })}
-                kind="ghost"
-                onClick={zoomIn}
-                renderIcon={props => <ZoomIn size={20} {...props} />}
-                tooltipPosition="top"
-                tooltipAlignment="end"
-              />
-            </div>
+          <div className="toolbar">
+            <Button
+              disabled={!isPanningEnabled}
+              iconDescription={intl.formatMessage({
+                id: 'dashboard.graph.select',
+                defaultMessage: 'Select'
+              })}
+              kind="ghost"
+              onClick={togglePanning}
+              renderIcon={iconProps => <Cursor20 size={20} {...iconProps} />}
+            />
+            <Button
+              disabled={isPanningEnabled}
+              iconDescription={intl.formatMessage({
+                id: 'dashboard.graph.pan',
+                defaultMessage: 'Pan'
+              })}
+              kind="ghost"
+              onClick={togglePanning}
+              renderIcon={iconProps => <Move size={20} {...iconProps} />}
+            />
+            {/* expand / collapse all */}
+            {/* fit to window */}
+            {/* <Button kind="ghost" renderIcon={Minimize20} /> */}
+            <Button kind="ghost" onClick={reset}>
+              Reset
+            </Button>
+            <Button kind="ghost" onClick={center}>
+              Center
+            </Button>
+            <Button
+              disabled={false}
+              hasIconOnly
+              iconDescription={intl.formatMessage({
+                id: 'dashboard.graph.zoomOut',
+                defaultMessage: 'Zoom out'
+              })}
+              kind="ghost"
+              onClick={zoomOut}
+              renderIcon={iconProps => <ZoomOut size={20} {...iconProps} />}
+              tooltipPosition="top"
+              tooltipAlignment="end"
+            />
+            <input
+              type="range"
+              min={minZoom}
+              max={maxZoom}
+              value={scale}
+              step=".1"
+              onChange={e => setZoom(e.target.value)}
+            />
+            <Button
+              disabled={false}
+              hasIconOnly
+              iconDescription={intl.formatMessage({
+                id: 'dashboard.graph.zoomIn',
+                defaultMessage: 'Zoom in'
+              })}
+              kind="ghost"
+              onClick={zoomIn}
+              renderIcon={iconProps => <ZoomIn size={20} {...iconProps} />}
+              tooltipPosition="top"
+              tooltipAlignment="end"
+            />
           </div>
-        )}
-      </PanZoom>
-    );
-  }
+        </div>
+      )}
+    </PanZoom>
+  );
 }
-
-export default injectIntl(ZoomablePipelineGraph);