Merge branch 'main' into refactor_withuiid

.github/workflows/ci-actions.yml

@@ -53,3 +53,27 @@ jobs:
         with:
           flags: server
           directory: ./*/coverage
+
+  build-and-upload-for-global-ci:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: save tackle2-ui image
+        run: |
+          docker build . -t quay.io/konveyor/tackle2-ui:latest
+          docker save -o /tmp/tackle2-ui.tar quay.io/konveyor/tackle2-ui:latest
+
+      - name: Upload tackle2-ui image as artifact
+        uses: actions/upload-artifact@v3
+        with:
+          name: tackle2-ui
+          path: /tmp/tackle2-ui.tar
+          retention-days: 1
+
+  test-integration:
+    needs: build-and-upload-for-global-ci
+    uses: konveyor/ci/.github/workflows/global-ci.yml@main
+    with:
+      component_name: tackle2-ui
+      run_api_tests: false

client/src/app/components/ConfirmDeleteDialog/ConfirmDeleteDialog.tsx

@@ -9,6 +9,7 @@ import {
   Text,
   TextInput,
 } from "@patternfly/react-core";
+import { collapseSpacesAndCompare } from "@app/utils/utils";
 
 import "./ConfirmDeleteDialog.css";
 
@@ -39,7 +40,12 @@ const ConfirmDeleteDialog: FC<ConfirmDeleteDialogProps> = ({
 
   const [nameToDeleteInput, setNameToDeleteInput] = useState<string>("");
 
-  const isDisabled = nameToDeleteInput !== nameToDelete;
+  /*
+    Enable the delete button once the input name matches the `nameToDelete`, BUT
+    collapse spaces since that is the way the name is rendered
+   */
+  const isDisabled =
+    collapseSpacesAndCompare(nameToDeleteInput, nameToDelete) !== 0;
 
   const handleClose = () => {
     setNameToDeleteInput("");

client/src/app/pages/migration-waves/components/ticket-issue.tsx

@@ -1,25 +1,36 @@
 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 {
   ticket?: Ticket;
 }
 
 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 : "";
 };

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>

client/src/app/utils/utils.test.ts

@@ -8,6 +8,7 @@ import {
   standardURLRegex,
   formatPath,
   extractFirstSha,
+  collapseSpacesAndCompare,
 } from "./utils";
 import { Paths } from "@app/Paths";
 
@@ -219,3 +220,36 @@ describe("SHA extraction", () => {
     expect(first).toBe("9c04cd6372077e9b11f70ca111c9807dc7137e4b");
   });
 });
+
+describe("space collapse string compare (using en-US compares)", () => {
+  it("both undefined matches", () => {
+    const result = collapseSpacesAndCompare(undefined, undefined, "en-US");
+    expect(result).toBe(0);
+  });
+
+  it("left undefined goes before right defined", () => {
+    const result = collapseSpacesAndCompare(undefined, "anything", "en-US");
+    expect(result).toBe(-1);
+  });
+
+  it("left defined goes after right undefined", () => {
+    const result = collapseSpacesAndCompare("anything", undefined, "en-US");
+    expect(result).toBe(1);
+  });
+
+  it.each([
+    ["alpha", "alpha", 0],
+    ["alpha", "bravo", -1],
+    ["bravo", "alpha", 1],
+    ["   alpha", "alpha     ", 0],
+    ["alpha bravo", "alpha       bravo", 0],
+    ["bravo    alpha", "bravo           bravo", -1],
+    ["The    quick brown    fox   ", "The quick brown fox", 0],
+  ])(
+    "mismatching spaces work as if spaces are collapsed (%s) to (%s) = %i",
+    (a, b, expected) => {
+      const result = collapseSpacesAndCompare(a, b, "en-US");
+      expect(result).toBe(expected);
+    }
+  );
+});

client/src/app/utils/utils.ts

@@ -168,3 +168,24 @@ export const extractFirstSha = (str: string): string | undefined => {
   const match = str.match(SHA_REGEX);
   return match && match[0] ? match[0] : undefined;
 };
+
+export const collapseSpacesAndCompare = (
+  str1: string | undefined,
+  str2: string | undefined,
+  locale?: string
+): number => {
+  if (!str1 && !str2) {
+    return 0;
+  }
+  if (str1 && !str2) {
+    return 1;
+  }
+  if (!str1 && str2) {
+    return -1;
+  }
+
+  const a = str1?.trim().replace(/\s+/g, " ") ?? "";
+  const b = str2?.trim().replace(/\s+/g, " ") ?? "";
+
+  return a.localeCompare(b, locale);
+};