From f96c45bd951ec06f49494d42175b80b70484af48 Mon Sep 17 00:00:00 2001 From: ibolton336 Date: Fri, 27 Oct 2023 12:33:54 -0400 Subject: [PATCH 1/5] :ghost: inherit review data from multiple archetypes Signed-off-by: ibolton336 --- client/public/locales/en/translation.json | 2 + client/src/app/api/rest.ts | 2 +- .../applications-table-assessment.tsx | 26 ++- .../application-assessment-status.tsx | 9 +- .../application-detail-drawer-assessment.tsx | 72 +------- .../review-fields.tsx | 174 ++++++++++++++++++ 6 files changed, 214 insertions(+), 71 deletions(-) create mode 100644 client/src/app/pages/applications/components/application-detail-drawer/review-fields.tsx diff --git a/client/public/locales/en/translation.json b/client/public/locales/en/translation.json index 43852f0859..70d62c08a4 100644 --- a/client/public/locales/en/translation.json +++ b/client/public/locales/en/translation.json @@ -259,6 +259,7 @@ "category": "Category", "color": "Color", "comments": "Comments", + "commentsFromApplication": "Application comments", "completed": "Completed", "confidence": "Confidence", "connected": "Connected", @@ -356,6 +357,7 @@ "review": "Review", "reviewComments": "Review comments", "risk": "Risk", + "riskFromApplication": "Application risk", "scheduled": "Scheduled", "select": "Select", "settingsAllowApps": "Allow reviewing applications without running an assessment first", diff --git a/client/src/app/api/rest.ts b/client/src/app/api/rest.ts index c794a73294..4d004e9149 100644 --- a/client/src/app/api/rest.ts +++ b/client/src/app/api/rest.ts @@ -160,7 +160,7 @@ export const deleteApplicationDependency = ( // Reviews export const getReviews = (): Promise => { - return axios.get(`${REVIEWS}`); + return axios.get(`${REVIEWS}`).then((response) => response.data); }; export const getReviewById = (id: number | string): Promise => { diff --git a/client/src/app/pages/applications/applications-table-assessment/applications-table-assessment.tsx b/client/src/app/pages/applications/applications-table-assessment/applications-table-assessment.tsx index e3f3896f52..a4d25aa8ff 100644 --- a/client/src/app/pages/applications/applications-table-assessment/applications-table-assessment.tsx +++ b/client/src/app/pages/applications/applications-table-assessment/applications-table-assessment.tsx @@ -88,6 +88,7 @@ import { NoDataEmptyState } from "@app/components/NoDataEmptyState"; import { ConditionalTooltip } from "@app/components/ConditionalTooltip"; import { getAssessmentsByItemId } from "@app/api/rest"; import { ApplicationDependenciesForm } from "@app/components/ApplicationDependenciesFormContainer/ApplicationDependenciesForm"; +import { useFetchArchetypes } from "@app/queries/archetypes"; export const ApplicationsTable: React.FC = () => { const { t } = useTranslation(); @@ -147,6 +148,13 @@ export const ApplicationsTable: React.FC = () => { refetch: fetchApplications, } = useFetchApplications(); + const { + archetypes, + isFetching: isFetchingArchetypes, + error: archetypesFetchError, + refetch: fetchArchetypes, + } = useFetchArchetypes(); + const onDeleteApplicationSuccess = (appIDCount: number) => { pushNotification({ title: t("toastr.success.applicationDeleted", { @@ -515,7 +523,6 @@ export const ApplicationsTable: React.FC = () => { ); } }; - return ( { > {currentPageItems?.map((application, rowIndex) => { + const isAppReviewed = !!application.review; + const reviewedArchetypes = application.archetypes?.map( + (archetypeRef) => { + return archetypes.find( + (archetype) => archetype.id === archetypeRef.id + ); + } + ); + + const hasReviewedArchetype = reviewedArchetypes?.some( + (archetype) => !!archetype?.review + ); + return ( { > diff --git a/client/src/app/pages/applications/components/application-assessment-status/application-assessment-status.tsx b/client/src/app/pages/applications/components/application-assessment-status/application-assessment-status.tsx index 0de37aa747..8313abbbb4 100644 --- a/client/src/app/pages/applications/components/application-assessment-status/application-assessment-status.tsx +++ b/client/src/app/pages/applications/components/application-assessment-status/application-assessment-status.tsx @@ -6,6 +6,7 @@ import { EmptyTextMessage } from "@app/components/EmptyTextMessage"; import { Application } from "@app/api/models"; import { IconedStatus } from "@app/components/IconedStatus"; import { useFetchAssessmentsByItemId } from "@app/queries/assessments"; +import { useFetchQuestionnaires } from "@app/queries/questionnaires"; export interface ApplicationAssessmentStatusProps { application: Application; @@ -22,8 +23,12 @@ export const ApplicationAssessmentStatus: React.FC< isFetching: isFetchingAssessmentsById, fetchError, } = useFetchAssessmentsByItemId(false, application.id); - - if (application?.assessed) { + const { questionnaires } = useFetchQuestionnaires(); + const requiredQuestionnaireExists = questionnaires?.some( + (q) => q.required === true + ); + //NOTE: Application.assessed is true if an app is assigned to an archetype and no required questionnaires exist + if (application?.assessed && requiredQuestionnaireExists) { return ; } diff --git a/client/src/app/pages/applications/components/application-detail-drawer/application-detail-drawer-assessment.tsx b/client/src/app/pages/applications/components/application-detail-drawer/application-detail-drawer-assessment.tsx index 5188bfd400..bc79ab04ff 100644 --- a/client/src/app/pages/applications/components/application-detail-drawer/application-detail-drawer-assessment.tsx +++ b/client/src/app/pages/applications/components/application-detail-drawer/application-detail-drawer-assessment.tsx @@ -14,14 +14,13 @@ import { import spacing from "@patternfly/react-styles/css/utilities/Spacing/spacing"; import { EmptyTextMessage } from "@app/components/EmptyTextMessage"; -import { EFFORT_ESTIMATE_LIST, PROPOSED_ACTION_LIST } from "@app/Constants"; import { Ref, Task } from "@app/api/models"; import { ApplicationDetailDrawer, IApplicationDetailDrawerProps, } from "./application-detail-drawer"; -import { useFetchReviewById } from "@app/queries/reviews"; import { ReviewedArchetypeItem } from "./reviewed-archetype-item"; +import { ReviewFields } from "./review-fields"; import { RiskLabel } from "@app/components/RiskLabel"; export interface IApplicationDetailDrawerAssessmentProps @@ -34,11 +33,6 @@ export const ApplicationDetailDrawerAssessment: React.FC< > = ({ application, onCloseClick, task }) => { const { t } = useTranslation(); - const { review: appReview } = useFetchReviewById(application?.review?.id); - const notYetReviewed = ( - - ); - return ( - - - {t("terms.applicationReview")} - - - - - {t("terms.proposedAction")} - - - {appReview ? ( - - ) : ( - notYetReviewed - )} - - - - - {t("terms.effortEstimate")} - - - {appReview - ? EFFORT_ESTIMATE_LIST[appReview.effortEstimate] - ? t(EFFORT_ESTIMATE_LIST[appReview.effortEstimate].i18Key) - : appReview.effortEstimate - : notYetReviewed} - - - - - {t("terms.businessCriticality")} - - - {appReview?.businessCriticality || notYetReviewed} - - - - - {t("terms.workPriority")} - - - {appReview?.workPriority || notYetReviewed} - - - - {t("terms.risk")} - - - - + - {t("terms.reviewComments")} + {t("terms.riskFromApplication")} - - {appReview?.comments || notYetReviewed} + + - {t("terms.comments")} + {t("terms.commentsFromApplication")} {application?.comments || ( diff --git a/client/src/app/pages/applications/components/application-detail-drawer/review-fields.tsx b/client/src/app/pages/applications/components/application-detail-drawer/review-fields.tsx new file mode 100644 index 0000000000..f51364c54a --- /dev/null +++ b/client/src/app/pages/applications/components/application-detail-drawer/review-fields.tsx @@ -0,0 +1,174 @@ +import React from "react"; +import { useTranslation } from "react-i18next"; +import { + DescriptionListGroup, + DescriptionListTerm, + DescriptionListDescription, + Label, + Title, + TextContent, +} from "@patternfly/react-core"; +import { Application, Review } from "@app/api/models"; +import spacing from "@patternfly/react-styles/css/utilities/Spacing/spacing"; +import { useFetchReviewById, useFetchReviews } from "@app/queries/reviews"; +import { useFetchArchetypes } from "@app/queries/archetypes"; +import { EmptyTextMessage } from "@app/components/EmptyTextMessage"; +import { PROPOSED_ACTION_LIST, EFFORT_ESTIMATE_LIST } from "@app/Constants"; + +export const ReviewFields: React.FC<{ application: Application | null }> = ({ + application, +}) => { + const { archetypes } = useFetchArchetypes(); + const { reviews } = useFetchReviews(); + const { t } = useTranslation(); + + const { review: appReview } = useFetchReviewById(application?.review?.id); + + const notYetReviewed = ( + + ); + + const reviewedArchetypes = application?.archetypes + ?.map((archetypeRef) => { + return archetypes.find((archetype) => archetype.id === archetypeRef.id); + }) + .filter(Boolean); + + const hasReviewedArchetype = reviewedArchetypes?.some( + (archetype) => !!archetype?.review + ); + + const matchedArchetypeReviews: Review[] = (reviewedArchetypes || []) + .map((reviewedArchetype) => { + return reviews.find( + (review) => review.id === reviewedArchetype?.review?.id + ); + }) + .filter(Boolean); + + const groupedReviewList = [ + { + review: appReview, + name: appReview?.application?.name, + type: "App", + }, + ...matchedArchetypeReviews.map((archetypeReview) => ({ + review: archetypeReview, + name: archetypeReview?.archetype?.name, + type: "Archetype", + })), + ].filter((item) => item.review?.proposedAction); + + return ( + <> + + + {t("terms.review")} + + + + {t("terms.proposedAction")} + + {groupedReviewList.length > 0 + ? groupedReviewList.map((item, index) => ( + + )) + : notYetReviewed} + + + + {t("terms.effortEstimate")} + + {groupedReviewList.length > 0 + ? groupedReviewList.map((item, index) => ( + + )) + : notYetReviewed} + + + + + {t("terms.businessCriticality")} + + + {groupedReviewList.length > 0 + ? groupedReviewList.map((item, index) => ( + + )) + : notYetReviewed} + + + + {t("terms.workPriority")} + + {groupedReviewList.length > 0 + ? groupedReviewList.map((item, index) => ( + + )) + : notYetReviewed} + + + + {t("terms.comments")} + + {groupedReviewList.length > 0 + ? groupedReviewList.map((item, index) => ( + <> + {item?.review?.comments ? ( + + ) : ( + "-" + )} + + )) + : notYetReviewed} + + + + ); +}; From 3d22e6a37085a669749037bf24769733ef2d4163 Mon Sep 17 00:00:00 2001 From: ibolton336 Date: Fri, 27 Oct 2023 13:00:55 -0400 Subject: [PATCH 2/5] Move to new tab Signed-off-by: ibolton336 --- client/public/locales/en/translation.json | 1 + .../application-detail-drawer-assessment.tsx | 2 +- .../application-detail-drawer.tsx | 11 +++++++++++ 3 files changed, 13 insertions(+), 1 deletion(-) diff --git a/client/public/locales/en/translation.json b/client/public/locales/en/translation.json index 70d62c08a4..6f35387789 100644 --- a/client/public/locales/en/translation.json +++ b/client/public/locales/en/translation.json @@ -355,6 +355,7 @@ "reports": "Reports", "repositoryType": "Repository type", "review": "Review", + "reviews": "Reviews", "reviewComments": "Review comments", "risk": "Risk", "riskFromApplication": "Application risk", diff --git a/client/src/app/pages/applications/components/application-detail-drawer/application-detail-drawer-assessment.tsx b/client/src/app/pages/applications/components/application-detail-drawer/application-detail-drawer-assessment.tsx index bc79ab04ff..53c09d92e4 100644 --- a/client/src/app/pages/applications/components/application-detail-drawer/application-detail-drawer-assessment.tsx +++ b/client/src/app/pages/applications/components/application-detail-drawer/application-detail-drawer-assessment.tsx @@ -82,7 +82,6 @@ export const ApplicationDetailDrawerAssessment: React.FC< )} - @@ -102,6 +101,7 @@ export const ApplicationDetailDrawerAssessment: React.FC< </TextContent> </> } + reviewsTabContent={<ReviewFields application={application} />} /> ); }; diff --git a/client/src/app/pages/applications/components/application-detail-drawer/application-detail-drawer.tsx b/client/src/app/pages/applications/components/application-detail-drawer/application-detail-drawer.tsx index eede2b30e1..7d6e3dd79e 100644 --- a/client/src/app/pages/applications/components/application-detail-drawer/application-detail-drawer.tsx +++ b/client/src/app/pages/applications/components/application-detail-drawer/application-detail-drawer.tsx @@ -35,6 +35,7 @@ export interface IApplicationDetailDrawerProps detailsTabMainContent: React.ReactNode; reportsTabContent?: React.ReactNode; factsTabContent?: React.ReactNode; + reviewsTabContent?: React.ReactNode; } enum TabKey { @@ -42,6 +43,7 @@ enum TabKey { Tags, Reports, Facts, + Reviews, } export const ApplicationDetailDrawer: React.FC< @@ -53,6 +55,7 @@ export const ApplicationDetailDrawer: React.FC< detailsTabMainContent, reportsTabContent = null, factsTabContent = null, + reviewsTabContent = null, }) => { const { t } = useTranslation(); const [activeTabKey, setActiveTabKey] = React.useState<TabKey>( @@ -169,6 +172,14 @@ export const ApplicationDetailDrawer: React.FC< {factsTabContent} </Tab> ) : null} + {reviewsTabContent ? ( + <Tab + eventKey={TabKey.Reviews} + title={<TabTitleText>{t("terms.reviews")}</TabTitleText>} + > + {reviewsTabContent} + </Tab> + ) : null} </Tabs> </PageDrawerContent> ); From c66352ee8fcba49d01856a175a630373b17852fe Mon Sep 17 00:00:00 2001 From: ibolton336 <ibolton@redhat.com> Date: Mon, 30 Oct 2023 12:00:39 -0400 Subject: [PATCH 3/5] Refinements from PR comments Signed-off-by: ibolton336 <ibolton@redhat.com> --- .../applications-table-assessment.tsx | 4 +- .../review-fields.tsx | 150 ++++++++---------- 2 files changed, 67 insertions(+), 87 deletions(-) diff --git a/client/src/app/pages/applications/applications-table-assessment/applications-table-assessment.tsx b/client/src/app/pages/applications/applications-table-assessment/applications-table-assessment.tsx index a4d25aa8ff..9602e1d191 100644 --- a/client/src/app/pages/applications/applications-table-assessment/applications-table-assessment.tsx +++ b/client/src/app/pages/applications/applications-table-assessment/applications-table-assessment.tsx @@ -626,7 +626,7 @@ export const ApplicationsTable: React.FC = () => { <Tbody> {currentPageItems?.map((application, rowIndex) => { const isAppReviewed = !!application.review; - const reviewedArchetypes = application.archetypes?.map( + const applicationArchetypes = application.archetypes?.map( (archetypeRef) => { return archetypes.find( (archetype) => archetype.id === archetypeRef.id @@ -634,7 +634,7 @@ export const ApplicationsTable: React.FC = () => { } ); - const hasReviewedArchetype = reviewedArchetypes?.some( + const hasReviewedArchetype = applicationArchetypes?.some( (archetype) => !!archetype?.review ); diff --git a/client/src/app/pages/applications/components/application-detail-drawer/review-fields.tsx b/client/src/app/pages/applications/components/application-detail-drawer/review-fields.tsx index f51364c54a..98a0061854 100644 --- a/client/src/app/pages/applications/components/application-detail-drawer/review-fields.tsx +++ b/client/src/app/pages/applications/components/application-detail-drawer/review-fields.tsx @@ -15,6 +15,12 @@ import { useFetchArchetypes } from "@app/queries/archetypes"; import { EmptyTextMessage } from "@app/components/EmptyTextMessage"; import { PROPOSED_ACTION_LIST, EFFORT_ESTIMATE_LIST } from "@app/Constants"; +type ReviewDrawerLabelItem = { + review?: Review | null; + name?: string | null; + isArchetype?: boolean; +}; + export const ReviewFields: React.FC<{ application: Application | null }> = ({ application, }) => { @@ -28,34 +34,28 @@ export const ReviewFields: React.FC<{ application: Application | null }> = ({ <EmptyTextMessage message={t("terms.notYetReviewed")} /> ); - const reviewedArchetypes = application?.archetypes + const applicationArchetypes = application?.archetypes ?.map((archetypeRef) => { return archetypes.find((archetype) => archetype.id === archetypeRef.id); }) .filter(Boolean); - const hasReviewedArchetype = reviewedArchetypes?.some( - (archetype) => !!archetype?.review - ); - - const matchedArchetypeReviews: Review[] = (reviewedArchetypes || []) - .map((reviewedArchetype) => { - return reviews.find( - (review) => review.id === reviewedArchetype?.review?.id - ); + const matchedArchetypeReviews: Review[] = (applicationArchetypes || []) + .map((archetype) => { + return reviews.find((review) => review.id === archetype?.review?.id); }) .filter(Boolean); - const groupedReviewList = [ + const groupedReviewList: ReviewDrawerLabelItem[] = [ { review: appReview, name: appReview?.application?.name, - type: "App", + isArchetype: false, }, ...matchedArchetypeReviews.map((archetypeReview) => ({ review: archetypeReview, name: archetypeReview?.archetype?.name, - type: "Archetype", + isArchetype: true, })), ].filter((item) => item.review?.proposedAction); @@ -69,43 +69,31 @@ export const ReviewFields: React.FC<{ application: Application | null }> = ({ <DescriptionListGroup> <DescriptionListTerm>{t("terms.proposedAction")}</DescriptionListTerm> <DescriptionListDescription cy-data="proposed-action"> - {groupedReviewList.length > 0 - ? groupedReviewList.map((item, index) => ( - <Label key={index} className={spacing.mbSm}> - {item.type === "App" - ? `App - ${item.name}` - : item.type === "Archetype" - ? `Archetype - ${item.name}` - : "Unknown"} - -{" "} - {item.review?.proposedAction && + {groupedReviewList.length === 0 + ? notYetReviewed + : groupedReviewList.map((item, index) => { + const labelText = + item.review?.proposedAction && PROPOSED_ACTION_LIST[item.review?.proposedAction] ? t(PROPOSED_ACTION_LIST[item.review.proposedAction].i18Key) - : "Unknown"} - </Label> - )) - : notYetReviewed} + : "Unknown"; + return generateReviewLabel(item, labelText); + })} </DescriptionListDescription> </DescriptionListGroup> <DescriptionListGroup> <DescriptionListTerm>{t("terms.effortEstimate")}</DescriptionListTerm> <DescriptionListDescription cy-data="effort-estimate"> - {groupedReviewList.length > 0 - ? groupedReviewList.map((item, index) => ( - <Label key={index} className={spacing.mbSm}> - {item.type === "App" - ? `App - ${item.name}` - : item.type === "Archetype" - ? `Archetype - ${item.name}` - : "Unknown"} - -{" "}{" "} - {item.review?.effortEstimate && + {groupedReviewList.length === 0 + ? notYetReviewed + : groupedReviewList.map((item, index) => { + const labelText = + item.review?.effortEstimate && EFFORT_ESTIMATE_LIST[item.review?.effortEstimate] ? t(EFFORT_ESTIMATE_LIST[item.review.effortEstimate].i18Key) - : "Unknown"} - </Label> - )) - : notYetReviewed} + : "Unknown"; + return generateReviewLabel(item, labelText); + })} </DescriptionListDescription> </DescriptionListGroup> <DescriptionListGroup> @@ -113,62 +101,54 @@ export const ReviewFields: React.FC<{ application: Application | null }> = ({ {t("terms.businessCriticality")} </DescriptionListTerm> <DescriptionListDescription cy-data="business-criticality"> - {groupedReviewList.length > 0 - ? groupedReviewList.map((item, index) => ( - <Label key={index} className={spacing.mbSm}> - {item.type === "App" - ? `App - ${item.name}` - : item.type === "Archetype" - ? `Archetype - ${item.name}` - : "Unknown"} - -{" "} {item?.review?.businessCriticality || notYetReviewed} - </Label> - )) - : notYetReviewed} + {groupedReviewList.length === 0 + ? notYetReviewed + : groupedReviewList.map((item, index) => { + const labelText = item?.review?.businessCriticality; + return generateReviewLabel(item, labelText); + })} </DescriptionListDescription> </DescriptionListGroup> <DescriptionListGroup> <DescriptionListTerm>{t("terms.workPriority")}</DescriptionListTerm> <DescriptionListDescription cy-data="work-priority"> - {groupedReviewList.length > 0 - ? groupedReviewList.map((item, index) => ( - <Label key={index} className={spacing.mbSm}> - {item.type === "App" - ? `App - ${item.name}` - : item.type === "Archetype" - ? `Archetype - ${item.name}` - : "Unknown"} - -{" "} - {item?.review?.workPriority || notYetReviewed} - </Label> - )) - : notYetReviewed} + {groupedReviewList.length === 0 + ? notYetReviewed + : groupedReviewList.map((item, index) => { + const labelText = item?.review?.workPriority; + return generateReviewLabel(item, labelText); + })} </DescriptionListDescription> </DescriptionListGroup> <DescriptionListGroup> <DescriptionListTerm>{t("terms.comments")}</DescriptionListTerm> <DescriptionListDescription cy-data="comments"> - {groupedReviewList.length > 0 - ? groupedReviewList.map((item, index) => ( - <> - {item?.review?.comments ? ( - <Label key={index} className={spacing.mbSm}> - {item.type === "App" - ? `App - ${item.name}` - : item.type === "Archetype" - ? `Archetype - ${item.name}` - : "Unknown"} - -{" "} - {item?.review?.comments || " - "} - </Label> - ) : ( - "-" - )} - </> - )) - : notYetReviewed} + {groupedReviewList.length === 0 + ? notYetReviewed + : groupedReviewList.map((item, index) => { + const labelText = item?.review?.comments; + return labelText && generateReviewLabel(item, labelText); + })} </DescriptionListDescription> </DescriptionListGroup> </> ); }; + +const generateReviewLabel = ( + item: ReviewDrawerLabelItem, + labelText?: string | number +) => { + console.log("generateReviewLabel", item, labelText); + return ( + <Label className={spacing.mbSm}> + <span> + {item.isArchetype + ? `Archetype - ${item.name}` + : `Application - ${item.name}` || "Unknown"} + </span> + <span className={spacing.mSm}>-</span> + {labelText && <span>{labelText}</span>} + </Label> + ); +}; From 483eb525cf4013c1a90a0fd2a2039a0e8b4d4245 Mon Sep 17 00:00:00 2001 From: ibolton336 <ibolton@redhat.com> Date: Mon, 30 Oct 2023 12:55:30 -0400 Subject: [PATCH 4/5] cleanup Signed-off-by: ibolton336 <ibolton@redhat.com> --- .../review-fields.tsx | 46 +++++++++---------- .../review-label.tsx | 25 ++++++++++ 2 files changed, 46 insertions(+), 25 deletions(-) create mode 100644 client/src/app/pages/applications/components/application-detail-drawer/review-label.tsx diff --git a/client/src/app/pages/applications/components/application-detail-drawer/review-fields.tsx b/client/src/app/pages/applications/components/application-detail-drawer/review-fields.tsx index 98a0061854..143fd1807c 100644 --- a/client/src/app/pages/applications/components/application-detail-drawer/review-fields.tsx +++ b/client/src/app/pages/applications/components/application-detail-drawer/review-fields.tsx @@ -4,7 +4,6 @@ import { DescriptionListGroup, DescriptionListTerm, DescriptionListDescription, - Label, Title, TextContent, } from "@patternfly/react-core"; @@ -14,8 +13,9 @@ import { useFetchReviewById, useFetchReviews } from "@app/queries/reviews"; import { useFetchArchetypes } from "@app/queries/archetypes"; import { EmptyTextMessage } from "@app/components/EmptyTextMessage"; import { PROPOSED_ACTION_LIST, EFFORT_ESTIMATE_LIST } from "@app/Constants"; +import { ReviewLabel } from "./review-label"; -type ReviewDrawerLabelItem = { +export type ReviewDrawerLabelItem = { review?: Review | null; name?: string | null; isArchetype?: boolean; @@ -77,7 +77,9 @@ export const ReviewFields: React.FC<{ application: Application | null }> = ({ PROPOSED_ACTION_LIST[item.review?.proposedAction] ? t(PROPOSED_ACTION_LIST[item.review.proposedAction].i18Key) : "Unknown"; - return generateReviewLabel(item, labelText); + return ( + <ReviewLabel key={index} item={item} labelText={labelText} /> + ); })} </DescriptionListDescription> </DescriptionListGroup> @@ -92,7 +94,9 @@ export const ReviewFields: React.FC<{ application: Application | null }> = ({ EFFORT_ESTIMATE_LIST[item.review?.effortEstimate] ? t(EFFORT_ESTIMATE_LIST[item.review.effortEstimate].i18Key) : "Unknown"; - return generateReviewLabel(item, labelText); + return ( + <ReviewLabel key={index} item={item} labelText={labelText} /> + ); })} </DescriptionListDescription> </DescriptionListGroup> @@ -105,7 +109,9 @@ export const ReviewFields: React.FC<{ application: Application | null }> = ({ ? notYetReviewed : groupedReviewList.map((item, index) => { const labelText = item?.review?.businessCriticality; - return generateReviewLabel(item, labelText); + return ( + <ReviewLabel key={index} item={item} labelText={labelText} /> + ); })} </DescriptionListDescription> </DescriptionListGroup> @@ -116,7 +122,9 @@ export const ReviewFields: React.FC<{ application: Application | null }> = ({ ? notYetReviewed : groupedReviewList.map((item, index) => { const labelText = item?.review?.workPriority; - return generateReviewLabel(item, labelText); + return ( + <ReviewLabel key={index} item={item} labelText={labelText} /> + ); })} </DescriptionListDescription> </DescriptionListGroup> @@ -127,28 +135,16 @@ export const ReviewFields: React.FC<{ application: Application | null }> = ({ ? notYetReviewed : groupedReviewList.map((item, index) => { const labelText = item?.review?.comments; - return labelText && generateReviewLabel(item, labelText); + return ( + <ReviewLabel + key={index} + item={item} + labelText={item.review?.comments} + /> + ); })} </DescriptionListDescription> </DescriptionListGroup> </> ); }; - -const generateReviewLabel = ( - item: ReviewDrawerLabelItem, - labelText?: string | number -) => { - console.log("generateReviewLabel", item, labelText); - return ( - <Label className={spacing.mbSm}> - <span> - {item.isArchetype - ? `Archetype - ${item.name}` - : `Application - ${item.name}` || "Unknown"} - </span> - <span className={spacing.mSm}>-</span> - {labelText && <span>{labelText}</span>} - </Label> - ); -}; diff --git a/client/src/app/pages/applications/components/application-detail-drawer/review-label.tsx b/client/src/app/pages/applications/components/application-detail-drawer/review-label.tsx new file mode 100644 index 0000000000..d14e0fd516 --- /dev/null +++ b/client/src/app/pages/applications/components/application-detail-drawer/review-label.tsx @@ -0,0 +1,25 @@ +import React from "react"; +import spacing from "@patternfly/react-styles/css/utilities/Spacing/spacing"; +import { Label } from "@patternfly/react-core"; +import { ReviewDrawerLabelItem } from "./review-fields"; + +interface ReviewLabelProps { + item: ReviewDrawerLabelItem; + labelText?: string | number; +} + +export const ReviewLabel = ({ item, labelText }: ReviewLabelProps) => { + console.log("generateReviewLabel", item, labelText); + + return ( + <Label className={spacing.mbSm}> + <span> + {item.isArchetype + ? `Archetype - ${item.name}` + : `Application - ${item.name}` || "Unknown"} + </span> + <span className={spacing.mSm}>-</span> + {labelText && <span>{labelText}</span>} + </Label> + ); +}; From b3b6b1565708c3747fb4c7f001ff5220043d1dc3 Mon Sep 17 00:00:00 2001 From: ibolton336 <ibolton@redhat.com> Date: Mon, 30 Oct 2023 13:30:30 -0400 Subject: [PATCH 5/5] rm console.log Signed-off-by: ibolton336 <ibolton@redhat.com> --- .../components/application-detail-drawer/review-label.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/client/src/app/pages/applications/components/application-detail-drawer/review-label.tsx b/client/src/app/pages/applications/components/application-detail-drawer/review-label.tsx index d14e0fd516..ded4557db1 100644 --- a/client/src/app/pages/applications/components/application-detail-drawer/review-label.tsx +++ b/client/src/app/pages/applications/components/application-detail-drawer/review-label.tsx @@ -9,8 +9,6 @@ interface ReviewLabelProps { } export const ReviewLabel = ({ item, labelText }: ReviewLabelProps) => { - console.log("generateReviewLabel", item, labelText); - return ( <Label className={spacing.mbSm}> <span>