✨ Add tooltip for auto-answered assessment questions

Signed-off-by: Mike Turley <mike.turley@alum.cs.umass.edu>
konveyor · Sep 20, 2023 · af5ffc3 · af5ffc3
1 parent 734b8ac
commit af5ffc3
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 2 deletions.
diff --git a/client/public/locales/en/translation.json b/client/public/locales/en/translation.json
@@ -176,6 +176,8 @@
     "reasonForError": "The reported reason for the error:",
     "reviewInstructions": "Use this section to provide your assessment of the possible migration/modernization plan and effort estimation.",
     "savingSelection": "Saving selection",
+    "selectedBecauseArchetypeTags": "Selected because the archetype has the {{tagOrTags}} {{tagList}}",
+    "selectedBecauseAppOrArchetypeTags": "Selected because the application or archetype has the {{tagOrTags}} {{tagList}}",
     "selectOwnerFromStakeholdersList": "Select owner from list of stakeholders",
     "suggestedAdoptionPlanHelpText": "The suggested approach to migration based on effort, priority, and dependencies.",
     "taskInProgressForTags": "A new analysis is in-progress.  Tags may be updated upon completion.",

diff --git a/client/src/app/api/models.ts b/client/src/app/api/models.ts
@@ -682,6 +682,7 @@ export interface Answer {
   mitigation?: string;
   applyTags?: CategorizedTag[];
   autoAnswerFor?: CategorizedTag[];
+  autoAnswered?: boolean;
   selected?: boolean;
 }
 export interface Thresholds {

diff --git a/.../assessment/components/questionnaire-form/multi-input-selection/multi-input-selection.tsx b/.../assessment/components/questionnaire-form/multi-input-selection/multi-input-selection.tsx
@@ -1,11 +1,14 @@
 import React, { useMemo } from "react";
-import { Radio, Stack, StackItem } from "@patternfly/react-core";
+import { Icon, Radio, Stack, StackItem, Tooltip } from "@patternfly/react-core";
+import InfoCircleIcon from "@patternfly/react-icons/dist/esm/icons/info-circle-icon";
 
 import { Question } from "@app/api/models";
 import { HookFormPFGroupController } from "@app/components/HookFormPFFields";
 import { useFormContext } from "react-hook-form";
 import { getQuestionFieldName } from "../../../form-utils";
 import { AssessmentWizardValues } from "@app/pages/assessment/components/assessment-wizard/assessment-wizard";
+import useIsArchetype from "@app/hooks/useIsArchetype";
+import { useTranslation } from "react-i18next";
 
 export interface MultiInputSelectionProps {
   question: Question;
@@ -21,6 +24,10 @@ export const MultiInputSelection: React.FC<MultiInputSelectionProps> = ({
   }, [question]);
 
   const questionFieldName = getQuestionFieldName(question, true);
+
+  const isArchetype = useIsArchetype();
+  const { t } = useTranslation();
+
   return (
     <Stack>
       {sortedOptions.map((option, i) => (
@@ -37,7 +44,35 @@ export const MultiInputSelection: React.FC<MultiInputSelectionProps> = ({
                 onChange={(checked, e) => {
                   onChange(option.text);
                 }}
-                label={option.text}
+                aria-label={option.text}
+                label={
+                  <>
+                    {option.autoAnswered && option.autoAnswerFor?.length ? (
+                      <Tooltip
+                        content={t(
+                          isArchetype
+                            ? "message.selectedBecauseArchetypeTags"
+                            : "message.selectedBecauseAppOrArchetypeTags",
+                          {
+                            tagOrTags: t(
+                              option.autoAnswerFor.length === 1
+                                ? "terms.tag"
+                                : "terms.tags"
+                            ).toLowerCase(),
+                            tagList: option.autoAnswerFor
+                              .map((t) => `"${t.tag}"`)
+                              .join(", "),
+                          }
+                        )}
+                      >
+                        <Icon status="info">
+                          <InfoCircleIcon />
+                        </Icon>
+                      </Tooltip>
+                    ) : null}{" "}
+                    {option.text}
+                  </>
+                }
                 value={option.text}
               />
             )}