🌱 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 <[email protected]> Co-authored-by: Ian Bolton <[email protected]>
konveyor · Mar 11, 2024 · 333cc04 · 333cc04
1 parent 6b805b5
commit 333cc04
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 33 deletions.
diff --git a/...plication-detail-drawer/review-fields.tsx → ...omponents/detail-drawer/review-fields.tsx b/...plication-detail-drawer/review-fields.tsx → ...omponents/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/...pplication-detail-drawer/review-label.tsx → ...components/detail-drawer/review-label.tsx b/...pplication-detail-drawer/review-label.tsx → ...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
@@ -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/...app/pages/applications/components/application-detail-drawer/application-detail-drawer.tsx b/...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,41 +36,39 @@ 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<IPageDrawerContentProps, "onCloseClick"> {
   application: Application | null;
   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={<TabTitleText>{t("terms.review")}</TabTitleText>}
           >
-            <ReviewFields application={application} reviews={reviews} />
+            <ReviewFields application={application} />
           </Tab>
         </Tabs>
       </div>

diff --git 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;