Merge branch 'main' into debug-mode

ibolton336 · web-flow · commit a7f068ed53f9 · 2023-12-11T11:51:17.000-05:00
diff --git a/client/public/locales/en/translation.json b/client/public/locales/en/translation.json
@@ -383,6 +383,7 @@
     "rootPath": "Root path",
     "scheduled": "Scheduled",
     "select": "Select",
+    "section": "Section",
     "settingsAllowApps": "Allow reviewing applications without running an assessment first",
     "showLess": "Show less",
     "showMore": "Show more",
diff --git a/client/src/app/components/ExternalLink.tsx b/client/src/app/components/ExternalLink.tsx
@@ -1,26 +1,31 @@
 import * as React from "react";
-import { Flex, FlexItem, Icon, Text } from "@patternfly/react-core";
+import { Button, Icon } from "@patternfly/react-core";
 import ExternalLinkAltIcon from "@patternfly/react-icons/dist/esm/icons/external-link-alt-icon";
 
 /**
  * Render a link open an external href in another tab with appropriate styling.
  */
 export const ExternalLink: React.FC<{
   href: string;
+  isInline?: boolean;
   children: React.ReactNode;
-}> = ({ href, children }) => (
-  <Flex spaceItems={{ default: "spaceItemsSm" }}>
-    <FlexItem>
-      <Text component="a" href={href} target="_blank">
-        {children}
-      </Text>
-    </FlexItem>
-    <FlexItem>
+}> = ({ href, isInline = false, children }) => (
+  <Button
+    variant="link"
+    isInline={isInline}
+    component="a"
+    href={href}
+    target="_blank"
+    rel="noreferrer"
+    icon={
       <Icon size="sm" status="info">
         <ExternalLinkAltIcon />
       </Icon>
-    </FlexItem>
-  </Flex>
+    }
+    iconPosition="right"
+  >
+    {children}
+  </Button>
 );
 
 export default ExternalLink;
diff --git a/client/src/app/pages/assessment/components/assessment-actions/components/dynamic-assessment-actions-row.css b/client/src/app/pages/assessment/components/assessment-actions/components/dynamic-assessment-actions-row.css
@@ -7,3 +7,7 @@
   background-color: var(--pf-v5-global--warning-color--100) !important  ;
   margin-right: 10px;
 }
+
+.actions-col {
+  vertical-align: middle !important;
+}
diff --git a/client/src/app/pages/assessment/components/assessment-actions/components/dynamic-assessment-actions-row.tsx b/client/src/app/pages/assessment/components/assessment-actions/components/dynamic-assessment-actions-row.tsx
@@ -102,15 +102,21 @@ const DynamicAssessmentActionsRow: FunctionComponent<
     onDeleteError
   );
 
-  const determineAction = () => {
+  const determineAction = React.useCallback(() => {
     if (!assessment) {
       return AssessmentAction.Take;
     } else if (assessment.status === "started") {
       return AssessmentAction.Continue;
     } else {
       return AssessmentAction.Retake;
     }
-  };
+  }, [assessment]);
+
+  const [action, setAction] = React.useState(determineAction());
+
+  React.useEffect(() => {
+    setAction(determineAction());
+  }, [determineAction, assessment]);
 
   const determineButtonClassName = () => {
     const action = determineAction();
@@ -202,7 +208,7 @@ const DynamicAssessmentActionsRow: FunctionComponent<
 
   return (
     <>
-      <Td>
+      <Td className="actions-col">
         <div>
           {isReadonly ? null : !isDeleting && !isFetching && !isMutating ? (
             <Button
@@ -213,7 +219,7 @@ const DynamicAssessmentActionsRow: FunctionComponent<
                 onHandleAssessmentAction();
               }}
             >
-              {determineAction()}
+              {action}
             </Button>
           ) : (
             <Spinner role="status" size="md">
@@ -247,7 +253,7 @@ const DynamicAssessmentActionsRow: FunctionComponent<
         </div>
       </Td>
       {assessment ? (
-        <Td isActionCell>
+        <Td isActionCell className="actions-col">
           <Button
             type="button"
             variant="plain"
diff --git a/client/src/app/pages/assessment/components/assessment-actions/components/questionnaires-table.css b/client/src/app/pages/assessment/components/assessment-actions/components/questionnaires-table.css
@@ -0,0 +1,6 @@
+.actions-row {
+  min-height: 5vh;
+}
+.actions-col {
+  vertical-align: middle !important;
+}
diff --git a/client/src/app/pages/assessment/components/assessment-actions/components/questionnaires-table.tsx b/client/src/app/pages/assessment/components/assessment-actions/components/questionnaires-table.tsx
@@ -1,3 +1,4 @@
+import "./questionnaires-table.css";
 import React, { useState } from "react";
 import { Table, Tbody, Td, Th, Thead, Tr } from "@patternfly/react-table";
 
@@ -98,7 +99,7 @@ const QuestionnairesTable: React.FC<QuestionnairesTableProps> = ({
               );
 
               return (
-                <Tr key={questionnaire.name}>
+                <Tr key={questionnaire.name} className="actions-row">
                   <TableRowContentWithControls
                     {...tableControls}
                     item={questionnaire}
@@ -107,6 +108,7 @@ const QuestionnairesTable: React.FC<QuestionnairesTableProps> = ({
                     <Td
                       width={20}
                       {...getTdProps({ columnKey: "questionnaires" })}
+                      className="actions-col"
                     >
                       {questionnaire.name}
                     </Td>
diff --git a/client/src/app/pages/dependencies/dependency-apps-table.tsx b/client/src/app/pages/dependencies/dependency-apps-table.tsx
@@ -269,7 +269,9 @@ const DependencyVersionColumn = ({
   return (
     <TextContent>
       {mavenCentralLink ? (
-        <ExternalLink href={mavenCentralLink}>{version}</ExternalLink>
+        <ExternalLink isInline href={mavenCentralLink}>
+          {version}
+        </ExternalLink>
       ) : (
         <Text>{version}</Text>
       )}
diff --git a/client/src/app/pages/issues/components/issue-description-and-links.tsx b/client/src/app/pages/issues/components/issue-description-and-links.tsx
@@ -1,11 +1,11 @@
 import * as React from "react";
 import ReactMarkdown from "react-markdown";
-import { TextContent, List, ListItem, Button } from "@patternfly/react-core";
+import { TextContent, List, ListItem } from "@patternfly/react-core";
 import spacing from "@patternfly/react-styles/css/utilities/Spacing/spacing";
-import ExternalLinkSquareAltIcon from "@patternfly/react-icons/dist/esm/icons/external-link-square-alt-icon";
 
 import { AnalysisIssueLink } from "@app/api/models";
 import { markdownPFComponents } from "@app/components/markdownPFComponents";
+import ExternalLink from "@app/components/ExternalLink";
 
 export interface IIssueDescriptionAndLinksProps {
   description: string;
@@ -26,17 +26,7 @@ export const IssueDescriptionAndLinks: React.FC<
       <List isPlain>
         {links.map((link) => (
           <ListItem key={link.url}>
-            <Button
-              variant="link"
-              component="a"
-              icon={<ExternalLinkSquareAltIcon />}
-              iconPosition="right"
-              href={link.url}
-              target="_blank"
-              rel="noreferrer"
-            >
-              {link.title}
-            </Button>
+            <ExternalLink href={link.url}>{link.title}</ExternalLink>
           </ListItem>
         ))}
       </List>
diff --git a/client/src/app/pages/migration-waves/components/ticket-issue.tsx b/client/src/app/pages/migration-waves/components/ticket-issue.tsx
@@ -17,7 +17,9 @@ export const TicketIssue: React.FC<ITicketIssueProps> = ({ ticket }) => {
   return (
     <Text component={TextVariants.p}>
       {ticket?.link ? (
-        <ExternalLink href={ticket.link}>{ticketIssue}</ExternalLink>
+        <ExternalLink isInline href={ticket.link}>
+          {ticketIssue}
+        </ExternalLink>
       ) : (
         t("terms.unassigned")
       )}
diff --git a/client/src/app/pages/reports/components/application-landscape/application-landscape.tsx b/client/src/app/pages/reports/components/application-landscape/application-landscape.tsx
@@ -148,6 +148,7 @@ export const ApplicationLandscape: React.FC<IApplicationLandscapeProps> = ({
               riskLabel={
                 <Link to={getRisksUrl(["red"])}>{t("terms.highRisk")}</Link>
               }
+              riskTitle={t("terms.highRisk")}
               riskDescription={questionnaire?.riskMessages?.red ?? ""}
             />
           </FlexItem>
@@ -163,6 +164,7 @@ export const ApplicationLandscape: React.FC<IApplicationLandscapeProps> = ({
                   {t("terms.mediumRisk")}
                 </Link>
               }
+              riskTitle={t("terms.mediumRisk")}
               riskDescription={questionnaire?.riskMessages?.yellow ?? ""}
             />
           </FlexItem>
@@ -176,6 +178,7 @@ export const ApplicationLandscape: React.FC<IApplicationLandscapeProps> = ({
               riskLabel={
                 <Link to={getRisksUrl(["green"])}>{t("terms.lowRisk")}</Link>
               }
+              riskTitle={t("terms.lowRisk")}
               riskDescription={questionnaire?.riskMessages?.green ?? ""}
             />
           </FlexItem>
@@ -191,6 +194,7 @@ export const ApplicationLandscape: React.FC<IApplicationLandscapeProps> = ({
                   {`${t("terms.unassessed")}/${t("terms.unknown")}`}
                 </Link>
               }
+              riskTitle={t("terms.unassessed")}
             />
           </FlexItem>
         </Flex>
diff --git a/client/src/app/pages/reports/components/donut/donut.tsx b/client/src/app/pages/reports/components/donut/donut.tsx
@@ -18,7 +18,8 @@ export interface IDonutProps {
   total: number;
   color: string;
   riskLabel: string | React.ReactElement;
-  riskDescription?: string | React.ReactElement;
+  riskDescription?: string;
+  riskTitle: string;
   isAssessment: boolean;
 }
 
@@ -29,6 +30,7 @@ export const Donut: React.FC<IDonutProps> = ({
   color,
   riskLabel,
   isAssessment,
+  riskTitle,
 }) => {
   const { t } = useTranslation();
 
@@ -50,7 +52,7 @@ export const Donut: React.FC<IDonutProps> = ({
             }
             constrainToVisibleArea={true}
             data={[
-              { x: riskLabel, y: value },
+              { x: riskTitle, y: value },
               { x: t("terms.other"), y: total - value },
             ]}
             labels={({ datum }) => `${datum.x}: ${datum.y}`}
diff --git a/client/src/app/pages/reports/components/identified-risks-table/identified-risks-table.tsx b/client/src/app/pages/reports/components/identified-risks-table/identified-risks-table.tsx
@@ -32,6 +32,7 @@ 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";
+import { FilterToolbar, FilterType } from "@app/components/FilterToolbar";
 
 export interface IIdentifiedRisksTableProps {
   assessmentRefs?: IdRef[];
@@ -152,6 +153,7 @@ export const IdentifiedRisksTable: React.FC<IIdentifiedRisksTableProps> = ({
     },
     variant: "compact",
     isPaginationEnabled: true,
+    isFilterEnabled: true,
     isSortEnabled: true,
     hasActionsColumn: false,
     getSortValues: (item) => ({
@@ -173,6 +175,86 @@ export const IdentifiedRisksTable: React.FC<IIdentifiedRisksTableProps> = ({
     ],
     isExpansionEnabled: true,
     expandableVariant: "single",
+    filterCategories: [
+      {
+        key: "questionnaireName",
+        title: t("terms.questionnaire"),
+        type: FilterType.multiselect,
+        placeholderText:
+          t("actions.filterBy", {
+            what: t("terms.questionnaire").toLowerCase(),
+          }) + "...",
+        getItemValue: (item) => item.questionnaireName || "",
+        selectOptions: [
+          ...new Set(
+            tableData.map((item) => item.questionnaireName).filter(Boolean)
+          ),
+        ].map((name) => ({ key: name, value: name })),
+      },
+      {
+        key: "section",
+        title: t("terms.section"),
+        type: FilterType.multiselect,
+        placeholderText:
+          t("actions.filterBy", {
+            what: t("terms.section").toLowerCase(),
+          }) + "...",
+        getItemValue: (item) => item.section || "",
+        selectOptions: [
+          ...new Set(tableData.map((item) => item.section).filter(Boolean)),
+        ].map((name) => ({ key: name, value: name })),
+      },
+      {
+        key: "question",
+        title: t("terms.question"),
+        type: FilterType.multiselect,
+        placeholderText:
+          t("actions.filterBy", {
+            what: t("terms.question").toLowerCase(),
+          }) + "...",
+        getItemValue: (item) => item.question.text || "",
+        selectOptions: [
+          ...new Set(
+            tableData.map((item) => item.question.text).filter(Boolean)
+          ),
+        ].map((name) => ({ key: name, value: name })),
+      },
+      {
+        key: "answer",
+        title: t("terms.answer"),
+        type: FilterType.multiselect,
+        placeholderText:
+          t("actions.filterBy", {
+            what: t("terms.answer").toLowerCase(),
+          }) + "...",
+        getItemValue: (item) => item.answer.text || "",
+        selectOptions: [
+          ...new Set(tableData.map((item) => item.answer.text).filter(Boolean)),
+        ].map((name) => ({ key: name, value: name })),
+      },
+      {
+        key: "risk",
+        title: t("terms.risk"),
+        type: FilterType.multiselect,
+        placeholderText:
+          t("actions.filterBy", { what: t("terms.risk").toLowerCase() }) +
+          "...",
+        getItemValue: (item: ITableRowData) => {
+          const riskKey = item.answer.risk;
+          const riskValue =
+            riskLevelMapping[riskKey as keyof typeof riskLevelMapping];
+          return riskValue.toString();
+        },
+        selectOptions: [
+          { key: "3", value: "High" },
+          { key: "2", value: "Medium" },
+          { key: "1", value: "Low" },
+          { key: "0", value: "Unknown" },
+        ],
+      },
+    ],
+    initialItemsPerPage: 10,
+    isSelectionEnabled: false,
   });
 
   const {
@@ -181,6 +263,7 @@ export const IdentifiedRisksTable: React.FC<IIdentifiedRisksTableProps> = ({
     propHelpers: {
       toolbarProps,
       paginationToolbarItemProps,
+      filterToolbarProps,
       paginationProps,
       tableProps,
       getThProps,
@@ -196,6 +279,8 @@ export const IdentifiedRisksTable: React.FC<IIdentifiedRisksTableProps> = ({
     <>
       <Toolbar {...toolbarProps}>
         <ToolbarContent>
+          <FilterToolbar<ITableRowData, string> {...filterToolbarProps} />
+
           <ToolbarItem {...paginationToolbarItemProps}>
             <SimplePagination
               idPrefix={`${"identified-risks-table"}}`}
diff --git a/client/src/app/queries/assessments.ts b/client/src/app/queries/assessments.ts
@@ -182,7 +182,6 @@ export const useFetchAssessmentsByItemId = (
   };
   const assessmentsWithOrder: AssessmentWithSectionOrder[] =
     data?.map(addSectionOrderToQuestions) || [];
-
   return {
     assessments: assessmentsWithOrder,
     isFetching: isLoading,

Original file line number	Diff line number	Diff line change
`@@ -7,3 +7,7 @@`
`7`	`7`	`background-color: var(--pf-v5-global--warning-color--100) !important ;`
`8`	`8`	`margin-right: 10px;`
`9`	`9`	`}`
	`10`	`+`
	`11`	`+.actions-col {`
	`12`	`+ vertical-align: middle !important;`
	`13`	`+}`