diff --git a/client/src/app/pages/archetypes/archetypes-page.tsx b/client/src/app/pages/archetypes/archetypes-page.tsx
index 29fea0940f..7b337e3fd3 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 0965f74ec2..d7a8572f94 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 0000000000..174dbc7c65
--- /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;
|