From c7c6d7c54fa1bf516dee95d2392339d886afb61b Mon Sep 17 00:00:00 2001
From: Ian Bolton <ibolton@redhat.com>
Date: Mon, 27 Nov 2023 12:25:40 -0500
Subject: [PATCH] :bug: Add link to associated ticket (#1565)

Resolves https://issues.redhat.com/browse/MTA-701
Resolves https://issues.redhat.com/browse/MTA-1539

---------

Signed-off-by: ibolton336 <ibolton@redhat.com>
---
 .../components/ticket-issue.tsx               | 35 ++++---
 .../components/wave-status-table.tsx          | 96 +++++++++++--------
 2 files changed, 78 insertions(+), 53 deletions(-)

diff --git a/client/src/app/pages/migration-waves/components/ticket-issue.tsx b/client/src/app/pages/migration-waves/components/ticket-issue.tsx
index 3f70f0a55..a1004ffcb 100644
--- a/client/src/app/pages/migration-waves/components/ticket-issue.tsx
+++ b/client/src/app/pages/migration-waves/components/ticket-issue.tsx
@@ -1,7 +1,9 @@
 import React from "react";
-import { Text } from "@patternfly/react-core";
+import { Text, TextVariants } from "@patternfly/react-core";
 
 import { Ticket } from "@app/api/models";
+import { useTranslation } from "react-i18next";
+import ExternalLink from "@app/components/ExternalLink";
 import { useTrackerTypesByProjectId } from "@app/queries/trackers";
 
 export interface ITicketIssueProps {
@@ -9,17 +11,26 @@ export interface ITicketIssueProps {
 }
 
 export const TicketIssue: React.FC<ITicketIssueProps> = ({ ticket }) => {
-  const useTicketIssue = () => {
-    const types = useTrackerTypesByProjectId(
-      ticket?.tracker?.name,
-      ticket?.parent
-    );
-    const type = types.find((kind) => kind.id === ticket?.kind);
-    if (type) return type.name;
-    return "";
-  };
+  const { t } = useTranslation();
+  const ticketIssue = useTicketIssue(ticket);
 
-  const ticketIssue = useTicketIssue();
+  return (
+    <Text component={TextVariants.p}>
+      {ticket?.link ? (
+        <ExternalLink href={ticket.link}>{ticketIssue}</ExternalLink>
+      ) : (
+        t("terms.unassigned")
+      )}
+    </Text>
+  );
+};
+
+const useTicketIssue = (ticket?: Ticket) => {
+  const types = useTrackerTypesByProjectId(
+    ticket?.tracker?.name,
+    ticket?.parent
+  );
+  const type = types.find((kind) => kind.id === ticket?.kind);
 
-  return <Text>{ticketIssue}</Text>;
+  return type ? type.name : "";
 };
diff --git a/client/src/app/pages/migration-waves/components/wave-status-table.tsx b/client/src/app/pages/migration-waves/components/wave-status-table.tsx
index b59d98183..2be8d576f 100644
--- a/client/src/app/pages/migration-waves/components/wave-status-table.tsx
+++ b/client/src/app/pages/migration-waves/components/wave-status-table.tsx
@@ -27,6 +27,8 @@ import { useHistory } from "react-router-dom";
 import { useFetchTickets } from "@app/queries/tickets";
 import { Paths } from "@app/Paths";
 import { TicketIssue } from "./ticket-issue";
+import { useDeleteTicketMutation } from "@app/queries/migration-waves";
+import UnlinkIcon from "@patternfly/react-icons/dist/esm/icons/unlink-icon";
 
 export interface IWaveStatusTableProps {
   migrationWave: WaveWithStatus;
@@ -44,6 +46,7 @@ export const WaveStatusTable: React.FC<IWaveStatusTableProps> = ({
   const history = useHistory();
 
   const { tickets } = useFetchTickets();
+  const { mutate: deleteTicket } = useDeleteTicketMutation();
 
   const tableControls = useLocalTableControls({
     idProperty: "name",
@@ -130,52 +133,63 @@ export const WaveStatusTable: React.FC<IWaveStatusTableProps> = ({
           }
         >
           <Tbody>
-            {currentPageItems?.map((app, rowIndex) => (
-              <Tr key={app.name} {...getTrProps({ item: app })}>
-                <TableRowContentWithControls
-                  {...tableControls}
-                  item={app}
-                  rowIndex={rowIndex}
-                >
-                  <Td width={20} {...getTdProps({ columnKey: "appName" })}>
-                    {app.name}
-                  </Td>
-                  <Td width={20} {...getTdProps({ columnKey: "status" })}>
-                    {getTicketByApplication(tickets, app.id)?.error ? (
+            {currentPageItems?.map((app, rowIndex) => {
+              const ticket = getTicketByApplication(tickets, app.id);
+              return (
+                <Tr key={app.name} {...getTrProps({ item: app })}>
+                  <TableRowContentWithControls
+                    {...tableControls}
+                    item={app}
+                    rowIndex={rowIndex}
+                  >
+                    <Td width={20} {...getTdProps({ columnKey: "appName" })}>
+                      {app.name}
+                    </Td>
+                    <Td width={20} {...getTdProps({ columnKey: "status" })}>
+                      {getTicketByApplication(tickets, app.id)?.error ? (
+                        <Button
+                          type="button"
+                          variant="plain"
+                          onClick={() =>
+                            setCodeModalState(
+                              getTicketByApplication(tickets, app.id)
+                                ? getTicketByApplication(tickets, app.id)
+                                    ?.message
+                                : ""
+                            )
+                          }
+                        >
+                          Error
+                        </Button>
+                      ) : (
+                        getTicketByApplication(tickets, app?.id)?.status || ""
+                      )}
+                    </Td>
+                    <Td width={30} {...getTdProps({ columnKey: "issue" })}>
+                      <TicketIssue
+                        ticket={getTicketByApplication(tickets, app.id)}
+                      />
+                    </Td>
+                    <Td className={alignment.textAlignRight}>
+                      {ticket?.id && (
+                        <Button
+                          variant="link"
+                          icon={<UnlinkIcon />}
+                          onClick={() => deleteTicket(ticket.id)}
+                        />
+                      )}
                       <Button
                         type="button"
                         variant="plain"
-                        onClick={() =>
-                          setCodeModalState(
-                            getTicketByApplication(tickets, app.id)
-                              ? getTicketByApplication(tickets, app.id)?.message
-                              : ""
-                          )
-                        }
+                        onClick={() => removeApplication(migrationWave, app.id)}
                       >
-                        Error
+                        <TrashIcon />
                       </Button>
-                    ) : (
-                      getTicketByApplication(tickets, app?.id)?.status || ""
-                    )}
-                  </Td>
-                  <Td width={20} {...getTdProps({ columnKey: "issue" })}>
-                    <TicketIssue
-                      ticket={getTicketByApplication(tickets, app.id)}
-                    />
-                  </Td>
-                  <Td className={alignment.textAlignRight}>
-                    <Button
-                      type="button"
-                      variant="plain"
-                      onClick={() => removeApplication(migrationWave, app.id)}
-                    >
-                      <TrashIcon />
-                    </Button>
-                  </Td>
-                </TableRowContentWithControls>
-              </Tr>
-            ))}
+                    </Td>
+                  </TableRowContentWithControls>
+                </Tr>
+              );
+            })}
           </Tbody>
         </ConditionalTableBody>
       </Table>