🌱 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 <sdickers@redhat.com>
Co-authored-by: Ian Bolton <ibolton@redhat.com>

client/src/app/pages/applications/components/application-detail-drawer/review-fields.tsx → 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);
 

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}

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,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>

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;