Skip to content

Commit

Permalink
🐛 UX improvements for app assessment/review discard (#1525)
Browse files Browse the repository at this point in the history 
- Resolves https://issues.redhat.com/browse/MTA-1611
- Add tooltip to indicate review completed for ARCHETYPE.
- Break up delete for reviews /assessments into two separate options for
applications table actions column.
- Invalidate assessments by AppId when fetching apps to fix stale
assessment status post-assessmentDelete from the app table.
- Add discard assessment & discard review options for archetype page.

---------

Signed-off-by: ibolton336 <[email protected]>
  • Loading branch information
@ibolton336
ibolton336 authored Nov 10, 2023
1 parent 2af8077 commit 7185f58
Show file tree
Hide file tree
Showing 5 changed files with 261 additions and 31 deletions.
5 changes: 4 additions & 1 deletion client/public/locales/en/translation.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,9 @@
"createTags": "Create tags",
"cancelAnalysis": "Cancel analysis",
"delete": "Delete",
"discardAssessment": "Discard assessment/review",
"discardAssessment": "Discard assessment(s)",
"discardReview": "Discard review",

"downloadCsvTemplate": "Download CSV template",
"download": "Download {{what}}",
"duplicate": "Duplicate",
Expand Down Expand Up @@ -360,6 +362,7 @@
"reports": "Reports",
"repositoryType": "Repository type",
"review": "Review",
"reviewedArchetype": "Archetype reviewed",
"reviews": "Reviews",
"reviewComments": "Review comments",
"risk": "Risk",
Expand Down
120 changes: 92 additions & 28 deletions client/src/app/pages/applications/applications-table/applications-table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,9 @@ import {
MenuToggle,
MenuToggleElement,
Modal,
Tooltip,
Grid,
GridItem,
} from "@patternfly/react-core";
import { PencilAltIcon, TagIcon, EllipsisVIcon } from "@patternfly/react-icons";
import {
Expand All @@ -28,6 +31,7 @@ import {
ActionsColumn,
Tbody,
} from "@patternfly/react-table";
import { QuestionCircleIcon } from "@patternfly/react-icons/dist/esm/icons/question-circle-icon";

// @app components and utilities
import { AppPlaceholder } from "@app/components/AppPlaceholder";
Expand Down Expand Up @@ -184,7 +188,10 @@ export const ApplicationsTable: React.FC = () => {
Application[]
>([]);

const [assessmentOrReviewToDiscard, setAssessmentOrReviewToDiscard] =
const [assessmentToDiscard, setAssessmentToDiscard] =
React.useState<Application | null>(null);

const [reviewToDiscard, setReviewToDiscard] =
React.useState<Application | null>(null);

const {
Expand Down Expand Up @@ -257,15 +264,8 @@ export const ApplicationsTable: React.FC = () => {
onDeleteError
);

const discardAssessmentAndReview = async (application: Application) => {
const discardAssessment = async (application: Application) => {
try {
if (application.review?.id) {
await deleteReview({
id: application.review.id,
name: application.name,
});
}

if (application.assessments) {
await Promise.all(
application.assessments.map(async (assessment) => {
Expand All @@ -277,7 +277,20 @@ export const ApplicationsTable: React.FC = () => {
);
}
} catch (error) {
console.error("Error while deleting assessments and/or reviews:", error);
console.error("Error while deleting assessments:", error);
}
};

const discardReview = async (application: Application) => {
try {
if (application.review?.id) {
await deleteReview({
id: application.review.id,
name: application.name,
});
}
} catch (error) {
console.error("Error while deleting review:", error);
}
};

Expand Down Expand Up @@ -827,13 +840,27 @@ export const ApplicationsTable: React.FC = () => {
modifier="truncate"
{...getTdProps({ columnKey: "review" })}
>
<IconedStatus
preset={
isAppReviewed || hasReviewedArchetype
? "Completed"
: "NotStarted"
}
/>
<Grid>
<GridItem span={10}>
<IconedStatus
preset={
isAppReviewed || hasReviewedArchetype
? "Completed"
: "NotStarted"
}
/>
</GridItem>
<GridItem span={2}>
{hasReviewedArchetype ? (
<Tooltip
content={t("terms.reviewedArchetype")}
aria-label="review"
>
<QuestionCircleIcon />
</Tooltip>
) : null}
</GridItem>
</Grid>
</Td>
<Td
width={10}
Expand Down Expand Up @@ -879,14 +906,21 @@ export const ApplicationsTable: React.FC = () => {
title: t("actions.review"),
onClick: () => reviewSelectedApp(application),
},
...(application?.review
...(application?.assessments?.length
? [
{
title: t("actions.discardAssessment"),
onClick: () =>
setAssessmentOrReviewToDiscard(
application
),
setAssessmentToDiscard(application),
},
]
: []),
...(application?.review
? [
{
title: t("actions.discardReview"),
onClick: () =>
setReviewToDiscard(application),
},
]
: []),
Expand Down Expand Up @@ -1071,16 +1105,46 @@ export const ApplicationsTable: React.FC = () => {
what: t("terms.assessment").toLowerCase(),
})}
titleIconVariant={"warning"}
isOpen={assessmentOrReviewToDiscard !== null}
isOpen={assessmentToDiscard !== null}
message={
<span>
<Trans
i18nKey="dialog.message.discardAssessment"
values={{
applicationName: assessmentOrReviewToDiscard?.name,
applicationName: assessmentToDiscard?.name,
}}
>
The assessment(s) for{" "}
<strong>{assessmentToDiscard?.name}</strong> will be discarded.
Do you wish to continue?
</Trans>
</span>
}
confirmBtnVariant={ButtonVariant.primary}
confirmBtnLabel={t("actions.continue")}
cancelBtnLabel={t("actions.cancel")}
onCancel={() => setAssessmentToDiscard(null)}
onClose={() => setAssessmentToDiscard(null)}
onConfirm={() => {
discardAssessment(assessmentToDiscard!);
setAssessmentToDiscard(null);
}}
/>
<ConfirmDialog
title={t("dialog.title.discard", {
what: t("terms.review").toLowerCase(),
})}
titleIconVariant={"warning"}
isOpen={reviewToDiscard !== null}
message={
<span>
<Trans
i18nKey="dialog.message.discardReview"
values={{
applicationName: reviewToDiscard?.name,
}}
>
The assessment for <strong>applicationName</strong> will be
The review for <strong>{reviewToDiscard?.name}</strong> will be
discarded, as well as the review result. Do you wish to
continue?
</Trans>
Expand All @@ -1089,11 +1153,11 @@ export const ApplicationsTable: React.FC = () => {
confirmBtnVariant={ButtonVariant.primary}
confirmBtnLabel={t("actions.continue")}
cancelBtnLabel={t("actions.cancel")}
onCancel={() => setAssessmentOrReviewToDiscard(null)}
onClose={() => setAssessmentOrReviewToDiscard(null)}
onCancel={() => setReviewToDiscard(null)}
onClose={() => setReviewToDiscard(null)}
onConfirm={() => {
discardAssessmentAndReview(assessmentOrReviewToDiscard!);
setAssessmentOrReviewToDiscard(null);
discardReview(reviewToDiscard!);
setReviewToDiscard(null);
}}
/>
<ConfirmDialog
Expand Down
Loading

0 comments on commit 7185f58

Please sign in to comment.