✨ Revert inherited status (#1642)

<img width="465" alt="Screenshot 2023-12-19 at 12 15 03 PM" src="https://github.com/konveyor/tackle2-ui/assets/11218376/2ea752c3-eb65-4a89-8286-6d9f98f9cf0e"> Signed-off-by: ibolton336 <[email protected]>
konveyor · Dec 19, 2023 · 6722056 · 6722056
1 parent fc62ad6
commit 6722056
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 23 deletions.
diff --git a/client/src/app/components/IconedStatus.tsx b/client/src/app/components/IconedStatus.tsx
@@ -6,7 +6,7 @@ import TimesCircleIcon from "@patternfly/react-icons/dist/esm/icons/times-circle
 import InProgressIcon from "@patternfly/react-icons/dist/esm/icons/in-progress-icon";
 import ExclamationCircleIcon from "@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon";
 import UnknownIcon from "@patternfly/react-icons/dist/esm/icons/unknown-icon";
-import QuestionCircleIcon from "@patternfly/react-icons/dist/esm/icons/question-circle-icon";
+import TopologyIcon from "@patternfly/react-icons/dist/esm/icons/topology-icon";
 
 export type IconedStatusPreset =
   | "InheritedReviews"
@@ -53,17 +53,17 @@ export const IconedStatus: React.FC<IIconedStatusProps> = ({
   const { t } = useTranslation();
   const presets: IconedStatusPresetType = {
     InheritedReviews: {
-      icon: <QuestionCircleIcon />,
-      status: "info",
-      label: t("terms.inherited"),
+      icon: <CheckCircleIcon />,
+      status: "success",
+      label: t("terms.completed"),
       tooltipMessage: t("message.inheritedReviewTooltip", {
         count: tooltipCount,
       }),
     },
     InheritedAssessments: {
-      icon: <QuestionCircleIcon />,
-      status: "info",
-      label: t("terms.inherited"),
+      icon: <CheckCircleIcon />,
+      status: "success",
+      label: t("terms.completed"),
       tooltipMessage: t("message.inheritedAssessmentTooltip", {
         count: tooltipCount,
       }),
@@ -120,6 +120,22 @@ export const IconedStatus: React.FC<IIconedStatusProps> = ({
       <>{children}</>
     );
 
+  const getTooltipContent = () => {
+    switch (preset) {
+      case "InheritedReviews":
+        return t("message.inheritedReviewTooltip", {
+          count: tooltipCount,
+        });
+
+      case "InheritedAssessments":
+        return t("message.inheritedAssessmentTooltip", {
+          count: tooltipCount,
+        });
+      default:
+        return "";
+    }
+  };
+
   return (
     <Flex
       flexWrap={{ default: "nowrap" }}
@@ -133,6 +149,13 @@ export const IconedStatus: React.FC<IIconedStatusProps> = ({
         </IconWithOptionalTooltip>
       </FlexItem>
       <FlexItem>{label || presetProps?.label}</FlexItem>
+      {(preset === "InheritedReviews" || preset === "InheritedAssessments") && (
+        <FlexItem>
+          <Tooltip content={getTooltipContent()}>
+            <TopologyIcon />
+          </Tooltip>
+        </FlexItem>
+      )}
     </Flex>
   );
 };
diff --git a/client/src/app/components/questions-table/questions-table.tsx b/client/src/app/components/questions-table/questions-table.tsx
@@ -17,7 +17,7 @@ import { useTranslation } from "react-i18next";
 import spacing from "@patternfly/react-styles/css/utilities/Spacing/spacing";
 import { Assessment, Question, Questionnaire } from "@app/api/models";
 import { useLocalTableControls } from "@app/hooks/table-controls";
-import { Label, Tooltip } from "@patternfly/react-core";
+import { Label, List, ListItem, Tooltip } from "@patternfly/react-core";
 import { NoDataEmptyState } from "@app/components/NoDataEmptyState";
 import AnswerTable from "@app/components/answer-table/answer-table";
 import { AxiosError } from "axios";
@@ -101,28 +101,39 @@ const QuestionsTable: React.FC<{
               )?.name || "";
 
             const getConditionalTooltipContent = (question: Question) => {
-              const includeTags = question?.includeFor
-                ?.map((tag) => tag.tag)
-                .join(", ");
-              const excludeTags = question?.excludeFor
-                ?.map((tag) => tag.tag)
-                .join(", ");
-
               return (
                 <div
                   className="pf-v5-c-tooltip__content pf-m-text-align-left"
                   id="conditional-tooltip-content"
                 >
                   <div>{t("message.dependentQuestionTooltip")}</div>
-                  {includeTags && (
-                    <div>
-                      {t("terms.include")}: {includeTags}
-                    </div>
+                  {!!question.includeFor?.length && (
+                    <>
+                      <div>{t("terms.include")}:</div>
+                      <List isPlain>
+                        {question.includeFor.map((tag, index) => (
+                          <ListItem key={index}>
+                            <Label color="blue">
+                              {tag.category} / {tag.tag}
+                            </Label>
+                          </ListItem>
+                        ))}
+                      </List>
+                    </>
                   )}
-                  {excludeTags && (
-                    <div>
-                      {t("terms.exclude")}: {excludeTags}
-                    </div>
+                  {!!question.excludeFor?.length && (
+                    <>
+                      <div>{t("terms.exclude")}:</div>
+                      <List isPlain>
+                        {question.excludeFor.map((tag, index) => (
+                          <ListItem key={index}>
+                            <Label color="blue">
+                              {tag.category} / {tag.tag}
+                            </Label>
+                          </ListItem>
+                        ))}
+                      </List>
+                    </>
                   )}
                 </div>
               );