🐛 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 <[email protected]>
konveyor · Jul 23, 2024 · acc23ac · acc23ac
1 parent 727ee63
commit acc23ac
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 59 deletions.
diff --git 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 = () => {
                           <ArchetypeMaintainersColumn archetype={archetype} />
                         </Td>
                         <Td {...getTdProps({ columnKey: "applications" })}>
-                          <ArchetypeApplicationsColumn archetype={archetype} />
+                          <LinkToArchetypeApplications archetype={archetype} />
                         </Td>
                         <Td
                           width={15}

diff --git a/client/src/app/pages/archetypes/components/archetype-applications-column.tsx b/client/src/app/pages/archetypes/components/archetype-applications-column.tsx
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,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<IArchetypeDetailDrawerProps> = ({
                   {t("terms.applications")}
                 </DescriptionListTerm>
                 <DescriptionListDescription>
-                  {archetype?.applications?.length ? (
-                    <>
-                      <Link to={getApplicationsUrl(archetype?.name)}>
-                        {archetype.applications.length}{" "}
-                        {t("terms.application", {
-                          count: archetype.applications.length,
-                          context:
-                            archetype.applications.length > 1
-                              ? "plural"
-                              : "singular",
-                        }).toLocaleLowerCase()}{" "}
-                      </Link>
-                    </>
-                  ) : (
-                    <EmptyTextMessage message={t("terms.none")} />
-                  )}
+                  <LinkToArchetypeApplications
+                    archetype={archetype}
+                    noApplicationsMessage={
+                      <EmptyTextMessage message={t("terms.none")} />
+                    }
+                  />
                 </DescriptionListDescription>
               </DescriptionListGroup>
 
@@ -249,16 +237,3 @@ const StakeholderGroupsLabels: React.FC<{ archetype: Archetype }> = ({
 }) => <LabelsFromItems items={archetype.stakeholderGroups as Ref[]} />;
 
 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
@@ -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 ? (
+    <Text>{t("message.archetypeNoApplications")}</Text>
+  ) : (
+    <Link to={getApplicationsUrl(archetype?.name)}>
+      {t("message.archetypeApplicationCount", {
+        count: archetype?.applications?.length ?? 0,
+      })}
+    </Link>
+  );
+};
+
+export default LinkToArchetypeApplications;