🐛 [backport release-0.5] Add application risk filter of "Unassessed" (#…

…2032) (#2035)

Backport-of: #2032
Resolves: https://issues.redhat.com/browse/MTA-2816

Application risk options are one of:
  - High (red)
  - Medium (yellow)
  - Low (green)
  - Unknown (unknown)
  - Unassessed (unassessed)

Added the __Unassessed__ option to the risk filter list on the
application table to have a complete set of risk filters.

Note: To help test risk levels, the questionnaire
`hack/import-questionnaire/assign-risk.yaml` has been added. The single
question has a 1 to 1 mapping between answer and risk level. As long as
that questionnaire is the only one active on the system, it works well
to quickly assign risks to applications.

Signed-off-by: Scott J Dickerson <[email protected]>

client/public/locales/en/translation.json

@@ -246,7 +246,8 @@
     "high": "High",
     "low": "Low",
     "medium": "Medium",
-    "unknown": "Unknown"
+    "unknown": "Unknown",
+    "unassessed": "Unassessed"
   },
   "sidebar": {
     "administrator": "Administration",

client/src/app/Constants.ts

@@ -118,6 +118,12 @@ export const RISK_LIST: RiskListType = {
     labelColor: "grey",
     sortFactor: 4,
   },
+  unassessed: {
+    i18Key: "risks.unassessed",
+    hexColor: black.value,
+    labelColor: "grey",
+    sortFactor: 5,
+  },
 };
 
 // Proposed action

client/src/app/api/models.ts

@@ -781,7 +781,7 @@ export interface Thresholds {
 }
 
 export type AssessmentStatus = "empty" | "started" | "complete";
-export type Risk = "green" | "yellow" | "red" | "unknown";
+export type Risk = "green" | "yellow" | "red" | "unknown" | "unassessed";
 
 export interface InitialAssessment {
   application?: Ref;

client/src/app/components/RiskLabel.tsx

@@ -5,17 +5,19 @@ import { Label } from "@patternfly/react-core";
 
 import { RISK_LIST } from "@app/Constants";
 import { Risk } from "@app/api/models";
+import { normalizeRisk } from "@app/utils/type-utils";
 
 export interface IRiskLabelProps {
-  risk: Risk;
+  risk?: Risk | string;
 }
 
 export const RiskLabel: React.FC<IRiskLabelProps> = ({
   risk,
 }: IRiskLabelProps) => {
   const { t } = useTranslation();
 
-  const data = RISK_LIST[risk];
+  const asRisk = normalizeRisk(risk);
+  const data = !asRisk ? undefined : RISK_LIST[asRisk];
 
   return (
     <Label color={data ? data.labelColor : "grey"}>

client/src/app/components/application-assessment-donut-chart/application-assessment-donut-chart.tsx

@@ -32,14 +32,14 @@ export const getChartDataFromCategories = (
     .flatMap((f) => f.answers)
     .filter((f) => f.selected === true)
     .forEach((f) => {
-      switch (f.risk) {
-        case "GREEN":
+      switch (f.risk.toLowerCase()) {
+        case "green":
           green++;
           break;
         case "yellow":
           amber++;
           break;
-        case "RED":
+        case "red":
           red++;
           break;
         default:

client/src/app/components/tests/RiskLabel.test.tsx

@@ -24,7 +24,8 @@ describe("RiskLabel", () => {
     expect(screen.getByText("risks.unknown")).toBeInTheDocument();
   });
   it("Not defined risk", () => {
-    const { container } = render(<RiskLabel risk={"ANYTHING_ELSE" as any} />);
+    const { container } = render(<RiskLabel risk={"ANYTHING_ELSE"} />);
+    expect(container.firstChild).toHaveClass("pf-v5-c-label");
     expect(screen.getByText("ANYTHING_ELSE")).toBeInTheDocument();
   });
 });

client/src/app/pages/applications/applications-table/applications-table.tsx

@@ -17,7 +17,12 @@ import {
   Modal,
   Tooltip,
 } from "@patternfly/react-core";
-import { PencilAltIcon, TagIcon } from "@patternfly/react-icons";
+import {
+  PencilAltIcon,
+  TagIcon,
+  WarningTriangleIcon,
+} from "@patternfly/react-icons";
+
 import {
   Table,
   Thead,
@@ -59,8 +64,8 @@ import {
   tasksReadScopes,
   tasksWriteScopes,
 } from "@app/rbac";
+import { normalizeRisk } from "@app/utils/type-utils";
 import { checkAccess } from "@app/utils/rbac-utils";
-import WarningTriangleIcon from "@patternfly/react-icons/dist/esm/icons/warning-triangle-icon";
 
 // Hooks
 import {
@@ -495,12 +500,13 @@ export const ApplicationsTable: React.FC = () => {
             what: t("terms.risk").toLowerCase(),
           }) + "...",
         selectOptions: [
-          { value: "green", label: "Low" },
-          { value: "yellow", label: "Medium" },
-          { value: "red", label: "High" },
-          { value: "unknown", label: "Unknown" },
+          { value: "green", label: t("risks.low") },
+          { value: "yellow", label: t("risks.medium") },
+          { value: "red", label: t("risks.high") },
+          { value: "unknown", label: t("risks.unknown") },
+          { value: "unassessed", label: t("risks.unassessed") },
         ],
-        getItemValue: (item) => item.risk ?? "",
+        getItemValue: (item) => normalizeRisk(item.risk) ?? "",
       },
     ],
     initialItemsPerPage: 10,

client/src/app/pages/applications/components/application-detail-drawer/application-detail-drawer.tsx

@@ -294,7 +294,7 @@ const TabDetailsContent: React.FC<{
           {t("terms.riskFromApplication")}
         </Title>
         <Text component="small" cy-data="comments">
-          <RiskLabel risk={application?.risk || "unknown"} />
+          <RiskLabel risk={application?.risk} />
         </Text>
       </TextContent>
 

client/src/app/pages/archetypes/components/archetype-detail-drawer.tsx

@@ -207,7 +207,7 @@ const ArchetypeDetailDrawer: React.FC<IArchetypeDetailDrawerProps> = ({
                 {t("terms.riskFromArchetype")}
               </Title>
               <Text component="small" cy-data="comments">
-                <RiskLabel risk={archetype?.risk || "unknown"} />
+                <RiskLabel risk={archetype?.risk} />
               </Text>
             </TextContent>
           </Tab>

client/src/app/pages/reports/components/adoption-candidate-table/adoption-candidate-table.tsx

@@ -126,7 +126,7 @@ const AdoptionCandidateTable: React.FC<AdoptionCandidateTableProps> = () => {
                     {item?.review?.effortEstimate ?? "N/A"}
                   </Td>
                   <Td {...getTdProps({ columnKey: "risk" })}>
-                    <RiskLabel risk={item.application.risk || "unknown"} />
+                    <RiskLabel risk={item.application.risk} />
                   </Td>
                 </TableRowContentWithControls>
               </Tr>

client/src/app/utils/type-utils.ts

@@ -1,3 +1,5 @@
+import { Risk } from "@app/api/models";
+
 export type KeyWithValueType<T, V> = {
   [Key in keyof T]-?: T[Key] extends V ? Key : never;
 }[keyof T];
@@ -10,3 +12,38 @@ export type DisallowCharacters<
 export type DiscriminatedArgs<TBoolDiscriminatorKey extends string, TArgs> =
   | ({ [key in TBoolDiscriminatorKey]: true } & TArgs)
   | { [key in TBoolDiscriminatorKey]?: false };
+
+/**
+ * Normalize an optional `Risk` or `string` input and return either the matching
+ * `Risk` or the `defaultValue` (which defaults to `undefined`).
+ */
+export function normalizeRisk(
+  risk?: Risk | string,
+  defaultValue?: Risk
+): Risk | undefined {
+  let normal: Risk | undefined = defaultValue;
+
+  switch (risk) {
+    case "green":
+      normal = "green";
+      break;
+
+    case "yellow":
+      normal = "yellow";
+      break;
+
+    case "red":
+      normal = "red";
+      break;
+
+    case "unassessed":
+      normal = "unassessed";
+      break;
+
+    case "unknown":
+      normal = "unknown";
+      break;
+  }
+
+  return normal;
+}

hack/import-questionnaire/assign-risk.yaml

@@ -0,0 +1,34 @@
+name: Assign Risk
+description: |
+  Questionnaire that allows the use to select a risk level directly
+
+sections:
+  - order: 1
+    name: Assign The RISK
+    questions:
+      - order: 1
+        text: What should be the Risk level of the application?
+        answers:
+          - order: 1
+            text: Unknown
+            risk: unknown
+          - order: 2
+            text: Green / Low
+            risk: green
+          - order: 3
+            text: Yellow / Medium
+            risk: yellow
+          - order: 4
+            text: Red / High
+            risk: red
+
+thresholds:
+  red: 1
+  yellow: 30
+  unknown: 15
+
+riskMessages:
+  red: Application requires deep changes in architecture or lifecycle
+  yellow: Application is Cloud friendly but requires some minor changes
+  green: Application is Cloud Native
+  unknown: More information about the application is required