From acc23acbd2fc2688aaeafb34aa740dd2985d6359 Mon Sep 17 00:00:00 2001 From: Scott Dickerson Date: Tue, 23 Jul 2024 12:33:11 -0400 Subject: [PATCH] :bug: Archetype table, applications column is now a link (#2024) When an archetype matches at least 1 application, render a link in the application columns that will navigate the user to the application table with a filter applied to show all of the applications matched to the archetype. The `Link` component is now shared between the archetype table and the archetype detail drawer. Resolves: https://issues.redhat.com/browse/MTA-1390 Signed-off-by: Scott J Dickerson --- .../app/pages/archetypes/archetypes-page.tsx | 4 +- .../archetype-applications-column.tsx | 25 ---------- .../components/archetype-detail-drawer.tsx | 39 +++------------- .../link-to-archetype-applications.tsx | 46 +++++++++++++++++++ 4 files changed, 55 insertions(+), 59 deletions(-) delete mode 100644 client/src/app/pages/archetypes/components/archetype-applications-column.tsx create mode 100644 client/src/app/pages/archetypes/components/link-to-archetype-applications.tsx diff --git a/client/src/app/pages/archetypes/archetypes-page.tsx b/client/src/app/pages/archetypes/archetypes-page.tsx index 29fea0940..7b337e3fd 100644 --- a/client/src/app/pages/archetypes/archetypes-page.tsx +++ b/client/src/app/pages/archetypes/archetypes-page.tsx @@ -49,7 +49,7 @@ import { useFetchArchetypes, } from "@app/queries/archetypes"; -import ArchetypeApplicationsColumn from "./components/archetype-applications-column"; +import LinkToArchetypeApplications from "./components/link-to-archetype-applications"; import ArchetypeDescriptionColumn from "./components/archetype-description-column"; import ArchetypeDetailDrawer from "./components/archetype-detail-drawer"; import ArchetypeForm from "./components/archetype-form"; @@ -446,7 +446,7 @@ const Archetypes: React.FC = () => { - + 0 render a link to navigate to the application inventory assessment page -// with filters set to show the applications for the archetype? -const ArchetypeApplicationsColumn: React.FC<{ archetype: Archetype }> = ({ - archetype, -}) => { - const { t } = useTranslation(); - - return (archetype?.applications?.length ?? 0) > 0 ? ( - - {t("message.archetypeApplicationCount", { - count: archetype.applications?.length ?? 0, - })} - - ) : ( - {t("message.archetypeNoApplications")} - ); -}; - -export default ArchetypeApplicationsColumn; 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 0965f74ec..d7a8572f9 100644 --- a/client/src/app/pages/archetypes/components/archetype-detail-drawer.tsx +++ b/client/src/app/pages/archetypes/components/archetype-detail-drawer.tsx @@ -1,7 +1,6 @@ import "./archetype-detail-drawer.css"; import React, { useMemo } from "react"; import { useTranslation } from "react-i18next"; -import { Link } from "react-router-dom"; import { TextContent, @@ -19,8 +18,6 @@ import { } 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"; @@ -29,6 +26,7 @@ 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 LinkToArchetypeApplications from "./link-to-archetype-applications"; export interface IArchetypeDetailDrawerProps { onCloseClick: () => void; @@ -107,22 +105,12 @@ const ArchetypeDetailDrawer: React.FC = ({ {t("terms.applications")} - {archetype?.applications?.length ? ( - <> - - {archetype.applications.length}{" "} - {t("terms.application", { - count: archetype.applications.length, - context: - archetype.applications.length > 1 - ? "plural" - : "singular", - }).toLocaleLowerCase()}{" "} - - - ) : ( - - )} + + } + /> @@ -249,16 +237,3 @@ const StakeholderGroupsLabels: React.FC<{ archetype: Archetype }> = ({ }) => ; export default ArchetypeDetailDrawer; - -const getApplicationsUrl = (archetypeName: string) => { - const filterValues = { - archetypes: [archetypeName], - }; - - const serializedParams = serializeFilterUrlParams(filterValues); - - const queryString = serializedParams.filters - ? `filters=${serializedParams.filters}` - : ""; - return `${Paths.applications}?${queryString}`; -}; diff --git a/client/src/app/pages/archetypes/components/link-to-archetype-applications.tsx b/client/src/app/pages/archetypes/components/link-to-archetype-applications.tsx new file mode 100644 index 000000000..174dbc7c6 --- /dev/null +++ b/client/src/app/pages/archetypes/components/link-to-archetype-applications.tsx @@ -0,0 +1,46 @@ +import React from "react"; +import { useTranslation } from "react-i18next"; +import { Link } from "react-router-dom"; +import { Text } from "@patternfly/react-core"; + +import type { Archetype } from "@app/api/models"; +import { serializeFilterUrlParams } from "@app/hooks/table-controls"; +import { Paths } from "@app/Paths"; + +const getApplicationsUrl = (archetypeName?: string) => { + if (!archetypeName) return ""; + + const filterValues = { + archetypes: [archetypeName], + }; + + const serializedParams = serializeFilterUrlParams(filterValues); + + const queryString = serializedParams.filters + ? `filters=${serializedParams.filters}` + : ""; + return `${Paths.applications}?${queryString}`; +}; + +const LinkToArchetypeApplications: React.FC<{ + archetype: Archetype | null | undefined; + noApplicationsMessage?: React.ReactNode; +}> = ({ archetype, noApplicationsMessage }) => { + const { t } = useTranslation(); + + const hasApplications = (archetype?.applications?.length ?? 0) > 0; + + return !hasApplications && noApplicationsMessage ? ( + <>{noApplicationsMessage} + ) : !hasApplications && !noApplicationsMessage ? ( + {t("message.archetypeNoApplications")} + ) : ( + + {t("message.archetypeApplicationCount", { + count: archetype?.applications?.length ?? 0, + })} + + ); +}; + +export default LinkToArchetypeApplications;