From 333cc04991c98c186491ebbee2307577a00ce9bd Mon Sep 17 00:00:00 2001 From: Scott Dickerson Date: Mon, 11 Mar 2024 16:46:21 -0400 Subject: [PATCH] :seedling: Refactor `ReviewFields` (#1752) Refactor the `ReviewFields` component in advance of #1745: - The component is used on the Review tab of application and archetype details drawer - The input prop `reviews` was not used in any current containing component. Push the `useFetchReviews()` hook down to the component itself. This keeps the data fetch as close as possible to where it is used. - Move the component to `@app/components/detail-drawer` folder since it is used in more than one page grouping Signed-off-by: Scott J Dickerson Co-authored-by: Ian Bolton --- .../detail-drawer}/review-fields.tsx | 8 +++- .../detail-drawer}/review-label.tsx | 0 .../applications-table/applications-table.tsx | 4 +- .../application-detail-drawer.tsx | 41 ++++++++++--------- .../components/archetype-detail-drawer.tsx | 15 ++++--- 5 files changed, 35 insertions(+), 33 deletions(-) rename client/src/app/{pages/applications/components/application-detail-drawer => components/detail-drawer}/review-fields.tsx (97%) rename client/src/app/{pages/applications/components/application-detail-drawer => components/detail-drawer}/review-label.tsx (100%) diff --git a/client/src/app/pages/applications/components/application-detail-drawer/review-fields.tsx b/client/src/app/components/detail-drawer/review-fields.tsx similarity index 97% rename from client/src/app/pages/applications/components/application-detail-drawer/review-fields.tsx rename to client/src/app/components/detail-drawer/review-fields.tsx index c14d13e74c..07580febd9 100644 --- a/client/src/app/pages/applications/components/application-detail-drawer/review-fields.tsx +++ b/client/src/app/components/detail-drawer/review-fields.tsx @@ -5,13 +5,16 @@ import { DescriptionListTerm, DescriptionListDescription, } from "@patternfly/react-core"; +import spacing from "@patternfly/react-styles/css/utilities/Spacing/spacing"; + import { Application, Archetype, Review } from "@app/api/models"; import { useFetchReviewById } from "@app/queries/reviews"; import { useFetchArchetypes } from "@app/queries/archetypes"; +import { useFetchReviews } from "@app/queries/reviews"; + import { EmptyTextMessage } from "@app/components/EmptyTextMessage"; import { PROPOSED_ACTION_LIST, EFFORT_ESTIMATE_LIST } from "@app/Constants"; import { ReviewLabel } from "./review-label"; -import spacing from "@patternfly/react-styles/css/utilities/Spacing/spacing"; export type ReviewDrawerLabelItem = { review?: Review | null; @@ -23,10 +26,11 @@ export const ReviewFields: React.FC<{ application?: Application | null; archetype?: Archetype | null; reviews?: Review[]; -}> = ({ application, archetype, reviews }) => { +}> = ({ application, archetype }) => { const { archetypes } = useFetchArchetypes(); const { t } = useTranslation(); + const { reviews } = useFetchReviews(); const { review: appReview } = useFetchReviewById(application?.review?.id); const { review: archetypeReview } = useFetchReviewById(archetype?.review?.id); diff --git a/client/src/app/pages/applications/components/application-detail-drawer/review-label.tsx b/client/src/app/components/detail-drawer/review-label.tsx similarity index 100% rename from client/src/app/pages/applications/components/application-detail-drawer/review-label.tsx rename to client/src/app/components/detail-drawer/review-label.tsx diff --git a/client/src/app/pages/applications/applications-table/applications-table.tsx b/client/src/app/pages/applications/applications-table/applications-table.tsx index 70a85bf7e5..40024f3a50 100644 --- a/client/src/app/pages/applications/applications-table/applications-table.tsx +++ b/client/src/app/pages/applications/applications-table/applications-table.tsx @@ -84,7 +84,7 @@ import { useDeleteAssessmentMutation, useFetchAssessments, } from "@app/queries/assessments"; -import { useDeleteReviewMutation, useFetchReviews } from "@app/queries/reviews"; +import { useDeleteReviewMutation } from "@app/queries/reviews"; import { useFetchIdentities } from "@app/queries/identities"; import { useFetchTagsWithTagItems } from "@app/queries/tags"; @@ -117,7 +117,6 @@ export const ApplicationsTable: React.FC = () => { const { pushNotification } = React.useContext(NotificationsContext); const { identities } = useFetchIdentities(); - const { reviews, isFetching: isFetchingReviews } = useFetchReviews(); const [saveApplicationModalState, setSaveApplicationModalState] = React.useState<"create" | Application | null>(null); @@ -1080,7 +1079,6 @@ export const ApplicationsTable: React.FC = () => { applications={applications} assessments={assessments} archetypes={archetypes} - reviews={reviews} onCloseClick={clearActiveItem} onEditClick={() => setSaveApplicationModalState(activeItem)} task={activeItem ? getTask(activeItem) : null} 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 d32f14fad8..5634ad0854 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 @@ -1,6 +1,7 @@ import * as React from "react"; import { Link } from "react-router-dom"; import { useTranslation } from "react-i18next"; + import { TextContent, Text, @@ -24,6 +25,9 @@ import { LabelGroup, } from "@patternfly/react-core"; import spacing from "@patternfly/react-styles/css/utilities/Spacing/spacing"; +import CheckCircleIcon from "@patternfly/react-icons/dist/esm/icons/check-circle-icon"; +import ExclamationCircleIcon from "@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon"; + import { Application, Identity, @@ -32,33 +36,32 @@ import { Ref, Archetype, AssessmentWithSectionOrder, - Review, } from "@app/api/models"; -import { - IPageDrawerContentProps, - PageDrawerContent, -} from "@app/components/PageDrawerContext"; +import { COLOR_HEX_VALUES_BY_NAME } from "@app/Constants"; +import { useFetchFacts } from "@app/queries/facts"; +import { useFetchIdentities } from "@app/queries/identities"; +import { useSetting } from "@app/queries/settings"; +import { getKindIdByRef } from "@app/utils/model-utils"; + import { getDependenciesUrlFilteredByAppName, getIssuesSingleAppSelectedLocation, } from "@app/pages/issues/helpers"; -import { ApplicationTags } from "../application-tags"; -import { COLOR_HEX_VALUES_BY_NAME } from "@app/Constants"; +import { + IPageDrawerContentProps, + PageDrawerContent, +} from "@app/components/PageDrawerContext"; import { EmptyTextMessage } from "@app/components/EmptyTextMessage"; import { SimpleDocumentViewerModal } from "@app/components/SimpleDocumentViewer"; -import { useFetchFacts } from "@app/queries/facts"; -import { useFetchIdentities } from "@app/queries/identities"; -import { useSetting } from "@app/queries/settings"; -import { getKindIdByRef } from "@app/utils/model-utils"; -import DownloadButton from "./components/download-button"; -import CheckCircleIcon from "@patternfly/react-icons/dist/esm/icons/check-circle-icon"; -import ExclamationCircleIcon from "@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon"; -import { ApplicationFacts } from "./application-facts"; -import { ReviewFields } from "./review-fields"; import { LabelsFromItems } from "@app/components/labels/labels-from-items/labels-from-items"; import { RiskLabel } from "@app/components/RiskLabel"; -import { ApplicationDetailFields } from "./application-detail-fields"; +import { ReviewFields } from "@app/components/detail-drawer/review-fields"; + +import { ApplicationTags } from "../application-tags"; import { AssessedArchetypes } from "./components/assessed-archetypes"; +import DownloadButton from "./components/download-button"; +import { ApplicationDetailFields } from "./application-detail-fields"; +import { ApplicationFacts } from "./application-facts"; export interface IApplicationDetailDrawerProps extends Pick { @@ -66,7 +69,6 @@ export interface IApplicationDetailDrawerProps task: Task | undefined | null; applications?: Application[]; assessments?: AssessmentWithSectionOrder[]; - reviews?: Review[]; archetypes?: Archetype[]; onEditClick: () => void; } @@ -85,7 +87,6 @@ export const ApplicationDetailDrawer: React.FC< onCloseClick, application, assessments, - reviews, archetypes, task, onEditClick, @@ -455,7 +456,7 @@ export const ApplicationDetailDrawer: React.FC< eventKey={TabKey.Reviews} title={{t("terms.review")}} > - + diff --git a/client/src/app/pages/archetypes/components/archetype-detail-drawer.tsx b/client/src/app/pages/archetypes/components/archetype-detail-drawer.tsx index d6f2f80832..0965f74ec2 100644 --- a/client/src/app/pages/archetypes/components/archetype-detail-drawer.tsx +++ b/client/src/app/pages/archetypes/components/archetype-detail-drawer.tsx @@ -1,6 +1,7 @@ import "./archetype-detail-drawer.css"; import React, { useMemo } from "react"; import { useTranslation } from "react-i18next"; +import { Link } from "react-router-dom"; import { TextContent, @@ -17,19 +18,17 @@ import { TabTitleText, } from "@patternfly/react-core"; import spacing from "@patternfly/react-styles/css/utilities/Spacing/spacing"; - +import { dedupeArrayOfObjects } from "@app/utils/utils"; +import { Paths } from "@app/Paths"; +import { serializeFilterUrlParams } from "@app/hooks/table-controls"; import { Archetype, Ref, Review, Tag, TagRef } from "@app/api/models"; + import { EmptyTextMessage } from "@app/components/EmptyTextMessage"; import { PageDrawerContent } from "@app/components/PageDrawerContext"; - -import { dedupeArrayOfObjects } from "@app/utils/utils"; -import { LabelsFromItems } from "@app/components/labels/labels-from-items/labels-from-items"; -import { ReviewFields } from "@app/pages/applications/components/application-detail-drawer/review-fields"; +import { ReviewFields } from "@app/components/detail-drawer/review-fields"; import { RiskLabel } from "@app/components/RiskLabel"; +import { LabelsFromItems } from "@app/components/labels/labels-from-items/labels-from-items"; import { LabelsFromTags } from "@app/components/labels/labels-from-tags/labels-from-tags"; -import { serializeFilterUrlParams } from "@app/hooks/table-controls"; -import { Paths } from "@app/Paths"; -import { Link } from "react-router-dom"; export interface IArchetypeDetailDrawerProps { onCloseClick: () => void;