✨ Add tooltip for auto-answered assessment questions (#1380)

Resolves #1367

![Screenshot 2023-09-20 at 2 05 25
PM](https://github.com/konveyor/tackle2-ui/assets/811963/79c79259-1ecb-4c0d-8bfe-8336eb079ad2)

---------

Signed-off-by: Mike Turley <[email protected]>

Author: mturley

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's tags include {{tags}}",
+    "selectedBecauseAppOrArchetypeTags": "Selected because the application or archetype's tags include {{tags}}",
     "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.",

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 {

client/src/app/pages/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,30 @@ 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",
+                          {
+                            tags: option.autoAnswerFor
+                              .map((t) => `"${t.tag}"`)
+                              .join(", "),
+                          }
+                        )}
+                      >
+                        <Icon status="info">
+                          <InfoCircleIcon />
+                        </Icon>
+                      </Tooltip>
+                    ) : null}{" "}
+                    {option.text}
+                  </>
+                }
                 value={option.text}
               />
             )}