Add remediation content

assets/js/components/ChecksResults/checksUtils.js

@@ -109,3 +109,11 @@ export const getCheckDescription = (catalog, checkID) => {
   }
   return null;
 };
+
+export const getCheckRemediation = (catalog, checkID) => {
+  const check = findCheck(catalog, checkID);
+  if (check) {
+    return check.remediation;
+  }
+  return null;
+};

assets/js/components/ChecksResults/checksUtils.test.js

@@ -14,6 +14,7 @@ import {
 
 import {
   getCheckDescription,
+  getCheckRemediation,
   getCheckResults,
   getChecks,
   getCheckHealthByAgent,
@@ -71,6 +72,14 @@ describe('checksUtils', () => {
     expect(getCheckDescription(catalog, id)).toBe(description);
   });
 
+  it('getCheckRemediation should return a check remediation', () => {
+    const catalog = catalogCheckFactory.buildList(2);
+    const [{ id, remediation }] = catalog;
+
+    expect(getCheckRemediation(catalog, id)).toBe(remediation);
+    expect(getCheckRemediation(catalog, 'wont-be-found')).toBe(null);
+  });
+
   describe('getCheckHealthByAgent', () => {
     it('should return an empty map when check results are empty', () => {
       expect(

assets/js/components/ChecksResults/index.js

@@ -8,6 +8,7 @@ import {
   getCheckHealthByAgent,
   getCheckResults,
   getCheckDescription,
+  getCheckRemediation,
 } from './checksUtils';
 
 export {
@@ -19,6 +20,7 @@ export {
   getCheckHealthByAgent,
   getCheckResults,
   getCheckDescription,
+  getCheckRemediation,
 };
 
 export default ChecksResults;

assets/js/components/ExecutionResults/ExecutionResults.jsx

@@ -16,6 +16,7 @@ import {
   getCheckHealthByAgent,
   getCheckResults,
   getCheckDescription,
+  getCheckRemediation,
 } from '@components/ChecksResults';
 import ChecksResultFilters from '@components/ChecksResults/ChecksResultFilters';
 import { UNKNOWN_PROVIDER } from '@components/ClusterDetails/ClusterSettings';
@@ -41,6 +42,14 @@ const getLabel = (status, health, error, expectations, failedExpectations) => {
   return `${failedExpectations}/${expectations} expectations failed`;
 };
 
+function asMarkdownContent(content) {
+  return (
+    <ReactMarkdown className="markdown" remarkPlugins={[remarkGfm]}>
+      {content}
+    </ReactMarkdown>
+  );
+}
+
 function ExecutionResults({
   clusterID,
   clusterName,
@@ -90,13 +99,11 @@ function ExecutionResults({
   return (
     <div>
       <Modal
-        title={getCheckDescription(catalog, selectedCheck)}
+        title={asMarkdownContent(getCheckDescription(catalog, selectedCheck))}
         open={modalOpen}
         onClose={() => setModalOpen(false)}
       >
-        <ReactMarkdown className="markdown" remarkPlugins={[remarkGfm]}>
-          {getCheckDescription(catalog, selectedCheck)}
-        </ReactMarkdown>
+        {asMarkdownContent(getCheckRemediation(catalog, selectedCheck))}
       </Modal>
       <BackButton url={`/clusters_new/${clusterID}`}>
         Back to Cluster Details

assets/js/components/ExecutionResults/ExecutionResults.test.jsx

@@ -1,11 +1,14 @@
 import React from 'react';
 import { screen } from '@testing-library/react';
 
+import userEvent from '@testing-library/user-event';
+
 import { faker } from '@faker-js/faker';
 import { renderWithRouter } from '@lib/test-utils';
 
 import {
   catalogFactory,
+  catalogCheckFactory,
   hostnameFactory,
   addCriticalExpectation,
   addPassingExpectation,
@@ -69,8 +72,8 @@ const prepareStateData = (checkExecutionStatus) => {
   const { loading, catalog, error } = catalogFactory.build({
     loading: false,
     catalog: [
-      catalogFactory.build({ id: checkID1 }),
-      catalogFactory.build({ id: checkID2 }),
+      catalogCheckFactory.build({ id: checkID1 }),
+      catalogCheckFactory.build({ id: checkID2 }),
     ],
     error: null,
   });
@@ -108,6 +111,13 @@ const prepareStateData = (checkExecutionStatus) => {
 
 describe('ExecutionResults', () => {
   it('should render ExecutionResults with successfully fetched results', async () => {
+    window.IntersectionObserver = jest.fn().mockImplementation(() => ({
+      observe: () => null,
+      disconnect: () => null,
+    }));
+
+    const user = userEvent.setup();
+
     const {
       clusterID,
       hostnames,
@@ -145,6 +155,11 @@ describe('ExecutionResults', () => {
     expect(screen.getAllByText(checkID2)).toHaveLength(2);
     expect(screen.getAllByText('2/2 expectations passed')).toBeTruthy();
     expect(screen.getAllByText('1/2 expectations failed')).toBeTruthy();
+
+    const [{ remediation }] = catalog;
+    expect(screen.queryByText(remediation)).not.toBeInTheDocument();
+    await user.click(screen.getAllByText(checkID1)[0]);
+    expect(screen.getByText(remediation)).toBeVisible();
   });
 
   it('should render ExecutionResults with running state', async () => {

assets/js/components/Modal/Modal.jsx

@@ -1,15 +1,18 @@
-import React, { Fragment } from 'react';
+import React, { Fragment, useRef } from 'react';
 import { Dialog, Transition } from '@headlessui/react';
 
 function Modal({ children, open, onClose, title }) {
+  const refContent = useRef(null);
+
   return (
     <Transition appear show={open} as={Fragment}>
       <Dialog
+        initialFocus={refContent}
         as="div"
         className="fixed inset-0 z-50 overflow-y-auto"
         onClose={onClose}
       >
-        <div className="min-h-screen px-4 text-center">
+        <div ref={refContent} className="min-h-screen px-4 text-center">
           <Transition.Child
             as={Fragment}
             enter="ease-out duration-300"