Add comment suggestions

trento-project · Mar 14, 2023 · 802c193 · 802c193
1 parent f602cea
commit 802c193
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 31 deletions.
diff --git a/assets/js/components/ExecutionResults/ExecutionResults.jsx b/assets/js/components/ExecutionResults/ExecutionResults.jsx
@@ -28,28 +28,20 @@ const addHostnameToTargets = (targets, hostnames) =>
     };
   });
 
-function MarkdownContent({ children }) {
-  return (
-    <ReactMarkdown className="markdown" remarkPlugins={[remarkGfm]}>
-      {children}
-    </ReactMarkdown>
-  );
-}
-
 const resultsTableConfig = {
   usePadding: false,
   columns: [
     {
       title: 'Id',
       key: 'checkID',
-      render: (checkID, item) => (
+      render: (checkID, { onClick }) => (
         <div className="whitespace-nowrap text-jungle-green-500">
           <span
             className="inline-block"
             aria-hidden="true"
             onClick={(e) => {
               e.stopPropagation();
-              item.onClickRemediation();
+              onClick();
             }}
           >
             {checkID}
@@ -60,7 +52,11 @@ const resultsTableConfig = {
     {
       title: 'Description',
       key: 'description',
-      render: (description) => <MarkdownContent>{description}</MarkdownContent>,
+      render: (description) => (
+        <ReactMarkdown className="markdown" remarkPlugins={[remarkGfm]}>
+          {description}
+        </ReactMarkdown>
+      ),
     },
     {
       title: 'Result',
@@ -153,7 +149,7 @@ function ExecutionResults({
         description: getCheckDescription(catalog, checkID),
         expectationResults,
         agentsCheckResults: addHostnameToTargets(agentsCheckResults, hostnames),
-        onClickRemediation: () => {
+        onClick: () => {
           setModalOpen(true);
           setSelectedCheck(checkID);
         },
@@ -181,22 +177,21 @@ function ExecutionResults({
         hosts={hosts}
         onContentRefresh={onContentRefresh}
         onStartExecution={onStartExecution}
-        selectedCheck={selectedCheck}
       >
         <Table config={resultsTableConfig} data={tableData} />
       </ResultsContainer>
       <Modal
         open={modalOpen}
         title={
-          <MarkdownContent>
+          <ReactMarkdown className="markdown" remarkPlugins={[remarkGfm]}>
             {getCheckDescription(catalog, selectedCheck)}
-          </MarkdownContent>
+          </ReactMarkdown>
         }
         onClose={() => setModalOpen(false)}
       >
-        <MarkdownContent>
+        <ReactMarkdown className="markdown" remarkPlugins={[remarkGfm]}>
           {getCheckRemediation(catalog, selectedCheck)}
-        </MarkdownContent>
+        </ReactMarkdown>
       </Modal>
     </>
   );

diff --git a/assets/js/components/ExecutionResults/ExecutionResults.test.jsx b/assets/js/components/ExecutionResults/ExecutionResults.test.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import { screen, fireEvent } from '@testing-library/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';
 
@@ -411,7 +412,7 @@ describe('ExecutionResults', () => {
     ).toBeTruthy();
   });
 
-  it('should open remediation modal when clicking on checkID', async () => {
+  it('should open remediation modal when clicking on checkID and close it when clicking outside', async () => {
     const {
       clusterID,
       hostnames,
@@ -438,13 +439,12 @@ describe('ExecutionResults', () => {
     );
 
     const { id: checkID, remediation } = catalog[0];
-    const clickableID = screen.getByText(checkID);
-    expect(clickableID.textContent).toBe(checks[0]);
-    let remediationModalElement = screen.queryByText(remediation);
-    expect(remediationModalElement).not.toBeInTheDocument();
-    fireEvent.click(clickableID);
-    remediationModalElement = screen.getByText(remediation);
-    expect(remediationModalElement).toBeInTheDocument();
+    expect(screen.getByText(checkID).textContent).toBe(checks[0]);
+    expect(screen.queryByText(remediation)).not.toBeInTheDocument();
+    await userEvent.click(screen.getByText(checkID));
+    expect(screen.queryByText(remediation)).toBeInTheDocument();
+    await userEvent.click(document.body);
+    expect(screen.queryByText(remediation)).not.toBeInTheDocument();
   });
 
   it('should not open remediation modal when clicking on description', async () => {
@@ -474,10 +474,8 @@ describe('ExecutionResults', () => {
     );
 
     const { remediation, description } = catalog[0];
-    const checkDescriptionText = screen.getByText(description);
-    expect(description).toBe(checkDescriptionText.textContent);
-    fireEvent.click(checkDescriptionText);
-    const remediationModalElement = screen.queryByText(remediation);
-    expect(remediationModalElement).not.toBeInTheDocument();
+    expect(screen.getByText(description).textContent).toBe(description);
+    userEvent.click(screen.getByText(description));
+    expect(screen.queryByText(remediation)).not.toBeInTheDocument();
   });
 });