Update tooltip and fix style

Signed-off-by: ibolton336 <[email protected]>
konveyor · Nov 22, 2023 · 3138872 · 3138872
1 parent 752bc8e
commit 3138872
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 34 deletions.
diff --git a/client/public/locales/en/translation.json b/client/public/locales/en/translation.json
@@ -161,6 +161,8 @@
     "archetypeApplicationCount": "{{count}} application",
     "archetypeApplicationCount_plural": "{{count}} applications",
     "archetypeNoApplications": "No applications currently match the criteria tags.",
+    "archetypeAlreadyAssessed": "An assessment for one or more of the archetypes this application is associated with exists.",
+    "archetypeAlreadyReviewed": "A review for one or more of the archetypes this application is associated with exists. Open the details drawer to view the review(s).",
     "appNotAssesedTitle": "Assessment has not been completed",
     "appNotAssessedBody": "In order to review an application it must be assessed first. Assess the application and try again.",
     "assessmentStakeholderHeader": "Select the stakeholder(s) or stakeholder group(s) associated with this assessment.",

diff --git a/client/src/app/pages/applications/applications-table/applications-table.tsx b/client/src/app/pages/applications/applications-table/applications-table.tsx
@@ -17,9 +17,8 @@ import {
   MenuToggle,
   MenuToggleElement,
   Modal,
-  Tooltip,
-  Grid,
-  GridItem,
+  Flex,
+  FlexItem,
 } from "@patternfly/react-core";
 import { PencilAltIcon, TagIcon, EllipsisVIcon } from "@patternfly/react-icons";
 import {
@@ -844,7 +843,7 @@ export const ApplicationsTable: React.FC = () => {
                 const hasAssessedArchetype = applicationArchetypes?.some(
                   (archetype) => !!archetype?.assessments?.length
                 );
-
+                console.log("hasassessed", hasAssessedArchetype);
                 return (
                   <Tr
                     key={application.name}
@@ -874,54 +873,50 @@ export const ApplicationsTable: React.FC = () => {
                         )}
                       </Td>
                       <Td
-                        width={10}
+                        width={15}
                         modifier="truncate"
                         {...getTdProps({ columnKey: "assessment" })}
                       >
-                        <Grid>
-                          <GridItem span={10}>
+                        <Flex alignItems={{ default: "alignItemsCenter" }}>
+                          <FlexItem>
                             <ApplicationAssessmentStatus
                               application={application}
                             />
-                          </GridItem>
-                          <GridItem span={2}>
-                            {hasAssessedArchetype && (
-                              <Tooltip
-                                content={t("terms.assessedArchetype")}
-                                aria-label="assessment"
-                              >
-                                <QuestionCircleIcon />
-                              </Tooltip>
-                            )}
-                          </GridItem>
-                        </Grid>
+                          </FlexItem>
+                          <FlexItem>
+                            <ConditionalTooltip
+                              isTooltipEnabled={hasAssessedArchetype || false}
+                              content={t("message.archetypeAlreadyAssessed")}
+                            >
+                              <QuestionCircleIcon />
+                            </ConditionalTooltip>
+                          </FlexItem>
+                        </Flex>
                       </Td>
                       <Td
-                        width={10}
+                        width={15}
                         modifier="truncate"
                         {...getTdProps({ columnKey: "review" })}
                       >
-                        <Grid>
-                          <GridItem span={10}>
+                        <Flex alignItems={{ default: "alignItemsCenter" }}>
+                          <FlexItem>
                             <IconedStatus
                               preset={
                                 isAppReviewed || hasReviewedArchetype
                                   ? "Completed"
                                   : "NotStarted"
                               }
                             />
-                          </GridItem>
-                          <GridItem span={2}>
-                            {hasReviewedArchetype ? (
-                              <Tooltip
-                                content={t("terms.reviewedArchetype")}
-                                aria-label="review"
-                              >
-                                <QuestionCircleIcon />
-                              </Tooltip>
-                            ) : null}
-                          </GridItem>
-                        </Grid>
+                          </FlexItem>
+                          <FlexItem>
+                            <ConditionalTooltip
+                              isTooltipEnabled={hasReviewedArchetype || false}
+                              content={t("message.archetypeAlreadyReviewed")}
+                            >
+                              <QuestionCircleIcon />
+                            </ConditionalTooltip>
+                          </FlexItem>
+                        </Flex>
                       </Td>
                       <Td
                         width={10}