Skip to content

Commit a79ccb4

Browse files
ibolton336ibolton336
committed
update answer tooltips in admin view
Signed-off-by: ibolton336 <[email protected]>
1 parent 4964b78 commit a79ccb4

File tree

2 files changed

+71
-56
lines changed

2 files changed

+71
-56
lines changed

‎client/public/locales/en/translation.json

+3
Original file line numberDiff line numberDiff line change
@@ -165,8 +165,11 @@
165165
"archetypeNoApplications": "No applications currently match the criteria tags.",
166166
"archetypeAlreadyAssessed": "An assessment for one or more of the archetypes this application is associated with exists.",
167167
"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).",
168+
"autoSelectTagsLabel": "Automatically select tags based on the answers to the questionnaire. ",
168169
"appNotAssesedTitle": "Assessment has not been completed",
169170
"appNotAssessedBody": "In order to review an application it must be assessed first. Assess the application and try again.",
171+
"autoSelectTooltip": "Automatically select this answer based on tags associated with the application(s) or archetype.",
172+
"autoTagTooltip": "Automatically tag this application or archetype with these tags based on this answer to the questionnaire.",
170173
"assessmentStakeholderHeader": "Select the stakeholder(s) or stakeholder group(s) associated with this assessment.",
171174
"binaryPackaging": "Packaging will default to JAR if left empty.",
172175
"blockedDeleteTracker": "Cannot delete {{what}} because it is associated with a tracker.",

‎client/src/app/components/answer-table/answer-table.tsx

+68-56
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,14 @@ import {
1010
} from "@app/components/TableControls";
1111
import { NoDataEmptyState } from "@app/components/NoDataEmptyState";
1212
import { Answer } from "@app/api/models";
13-
import { Label, Text } from "@patternfly/react-core";
13+
import { Label, Text, Tooltip } from "@patternfly/react-core";
1414
import spacing from "@patternfly/react-styles/css/utilities/Spacing/spacing";
1515
import { IconedStatus } from "@app/components/IconedStatus";
1616
import { TimesCircleIcon } from "@patternfly/react-icons";
1717
import { WarningTriangleIcon } from "@patternfly/react-icons";
1818
import { List, ListItem } from "@patternfly/react-core";
1919
import RiskIcon from "../risk-icon/risk-icon";
20+
import { InfoCircleIcon } from "@patternfly/react-icons";
2021

2122
export interface IAnswerTableProps {
2223
answers: Answer[];
@@ -101,63 +102,74 @@ const AnswerTable: React.FC<IAnswerTableProps> = ({
101102
}
102103
>
103104
<Tbody>
104-
{currentPageItems?.map((answer, rowIndex) => {
105-
return (
106-
<React.Fragment key={rowIndex}>
107-
<Tr key={answer.text} {...getTrProps({ item: answer })}>
108-
<TableRowContentWithControls
109-
{...tableControls}
110-
item={answer}
111-
rowIndex={rowIndex}
112-
>
113-
<Td width={40} {...getTdProps({ columnKey: "choice" })}>
114-
{answer.text}
115-
</Td>
116-
<Td width={20} {...getTdProps({ columnKey: "choice" })}>
117-
<RiskIcon risk={answer.risk} />
118-
</Td>
119-
</TableRowContentWithControls>
120-
</Tr>
121-
<Tr>
122-
{!!answer?.autoAnswerFor?.length && (
123-
<>
124-
<div style={{ display: "flex" }}>
125-
<Text
126-
className={spacing.mrSm}
127-
style={{ flex: "0 0 5em" }}
128-
>
129-
Auto answer if the following tags are present:
130-
</Text>
131-
{answer?.autoAnswerFor?.map((tag, index) => {
132-
return (
133-
<div key={index} style={{ flex: "0 0 6em" }}>
134-
<Label color="grey">{tag.tag}</Label>
105+
{currentPageItems?.map((answer, rowIndex) => (
106+
<React.Fragment key={rowIndex}>
107+
<Tr {...getTrProps({ item: answer })}>
108+
<TableRowContentWithControls
109+
{...tableControls}
110+
item={answer}
111+
rowIndex={rowIndex}
112+
>
113+
<Td width={40} {...getTdProps({ columnKey: "choice" })}>
114+
<div style={{ display: "flex", alignItems: "center" }}>
115+
<span>{answer.text}</span>
116+
{(!!answer?.autoAnswerFor?.length ||
117+
!!answer?.applyTags?.length) && (
118+
<Tooltip
119+
content={
120+
<div
121+
className="pf-v5-c-tooltip__content pf-m-text-align-left"
122+
id="conditional-tooltip-content"
123+
>
124+
{!!answer?.autoAnswerFor?.length && (
125+
<>
126+
<Text>
127+
{t("message.autoSelectTooltip")}
128+
</Text>
129+
<List isPlain>
130+
{answer.autoAnswerFor.map(
131+
(tag, index) => (
132+
<ListItem key={index}>
133+
<Label color="blue">
134+
{tag.tag}
135+
</Label>
136+
</ListItem>
137+
)
138+
)}
139+
</List>
140+
</>
141+
)}
142+
{!!answer?.applyTags?.length && (
143+
<>
144+
<Text>{t("message.autoTagTooltip")}</Text>
145+
<List isPlain>
146+
{answer.applyTags.map((tag, index) => (
147+
<ListItem key={index}>
148+
<Label color="blue">{tag.tag}</Label>
149+
</ListItem>
150+
))}
151+
</List>
152+
</>
153+
)}
135154
</div>
136-
);
137-
})}
138-
</div>
139-
</>
140-
)}
141-
</Tr>
142-
<Tr>
143-
{!!answer?.applyTags?.length && (
144-
<div style={{ display: "flex" }}>
145-
<Text className={spacing.mrSm}>
146-
Apply Tags for this answer choice:
147-
</Text>
148-
{answer?.applyTags?.map((tag, index) => {
149-
return (
150-
<div key={index} style={{ flex: "0 0 6em" }}>
151-
<Label color="grey">{tag.tag}</Label>
152-
</div>
153-
);
154-
})}
155+
}
156+
>
157+
<span className={spacing.mlXs}>
158+
<InfoCircleIcon />
159+
</span>
160+
</Tooltip>
161+
)}
155162
</div>
156-
)}
157-
</Tr>
158-
</React.Fragment>
159-
);
160-
})}
163+
</Td>
164+
165+
<Td width={20} {...getTdProps({ columnKey: "weight" })}>
166+
<RiskIcon risk={answer.risk} />
167+
</Td>
168+
</TableRowContentWithControls>
169+
</Tr>
170+
{/* ... other rows ... */}
171+
</React.Fragment>
172+
))}
161173
</Tbody>
162174
</ConditionalTableBody>
163175
</Table>

0 commit comments

Comments
 (0)