Add risk column to table with icon

Signed-off-by: ibolton336 <ibolton@redhat.com>

client/src/app/components/answer-table/answer-table.tsx

@@ -16,6 +16,7 @@ import { IconedStatus } from "@app/components/IconedStatus";
 import { TimesCircleIcon } from "@patternfly/react-icons";
 import { WarningTriangleIcon } from "@patternfly/react-icons";
 import { List, ListItem } from "@patternfly/react-core";
+import RiskIcon from "../risk-icon/risk-icon";
 
 export interface IAnswerTableProps {
   answers: Answer[];
@@ -45,19 +46,6 @@ const AnswerTable: React.FC<IAnswerTableProps> = ({
     propHelpers: { tableProps, getThProps, getTrProps, getTdProps },
   } = tableControls;
 
-  const getIconByRisk = (risk: string): React.ReactElement => {
-    switch (risk) {
-      case "green":
-        return <IconedStatus preset="Ok" />;
-      case "red":
-        return <IconedStatus icon={<TimesCircleIcon />} status="danger" />;
-      case "yellow":
-        return <IconedStatus icon={<WarningTriangleIcon />} status="warning" />;
-      default:
-        return <IconedStatus preset="Unknown" />;
-    }
-  };
-
   return (
     <>
       <Table {...tableProps} aria-label={`Answer table for question`}>
@@ -126,7 +114,7 @@ const AnswerTable: React.FC<IAnswerTableProps> = ({
                         {answer.text}
                       </Td>
                       <Td width={20} {...getTdProps({ columnKey: "choice" })}>
-                        {getIconByRisk(answer.risk)}
+                        <RiskIcon risk={answer.risk} />
                       </Td>
                     </TableRowContentWithControls>
                   </Tr>

client/src/app/components/risk-icon/risk-icon.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { TimesCircleIcon, WarningTriangleIcon } from "@patternfly/react-icons";
+import { IconedStatus } from "@app/components/IconedStatus";
+
+interface RiskIconProps {
+  risk: string;
+}
+
+const RiskIcon: React.FC<RiskIconProps> = ({ risk }) => {
+  switch (risk) {
+    case "green":
+      return <IconedStatus preset="Ok" />;
+    case "red":
+      return <IconedStatus icon={<TimesCircleIcon />} status="danger" />;
+    case "yellow":
+      return <IconedStatus icon={<WarningTriangleIcon />} status="warning" />;
+    default:
+      return <IconedStatus preset="Unknown" />;
+  }
+};
+
+export default RiskIcon;

client/src/app/pages/reports/components/identified-risks-table/identified-risks-table.tsx

@@ -25,6 +25,7 @@ import {
 import { Link } from "react-router-dom";
 import { Paths } from "@app/Paths";
 import spacing from "@patternfly/react-styles/css/utilities/Spacing/spacing";
+import RiskIcon from "@app/components/risk-icon/risk-icon";
 
 export interface IIdentifiedRisksTableProps {}
 
@@ -116,6 +117,7 @@ export const IdentifiedRisksTable: React.FC<
       section: "Section",
       question: "Question",
       answer: "Answer",
+      risk: "Risk",
       applications: "Applications",
     },
     variant: "compact",
@@ -177,6 +179,7 @@ export const IdentifiedRisksTable: React.FC<
               <Th {...getThProps({ columnKey: "section" })}>Section</Th>
               <Th {...getThProps({ columnKey: "question" })}>Question</Th>
               <Th {...getThProps({ columnKey: "answer" })}>Answer</Th>
+              <Th {...getThProps({ columnKey: "risk" })}>Risk</Th>
               <Th {...getThProps({ columnKey: "applications" })}>
                 Application
               </Th>
@@ -214,6 +217,9 @@ export const IdentifiedRisksTable: React.FC<
                       <Td {...getTdProps({ columnKey: "answer" })}>
                         {item.answer.text ?? "N/A"}
                       </Td>
+                      <Td {...getTdProps({ columnKey: "risk" })}>
+                        <RiskIcon risk={item.answer.risk} />
+                      </Td>
                       <Td {...getTdProps({ columnKey: "applications" })}>
                         {item?.applications.length ? (
                           <Link to={getApplicationsUrl(item?.applications)}>