Merge branch 'main' into assessment-wizard

konveyor · Apr 25, 2024 · ea5aa4c · ea5aa4c
2 parents c0ed821 + a6e9afb
commit ea5aa4c
Show file tree

Hide file tree

Showing 38 changed files with 813 additions and 1,084 deletions.
diff --git a/client/package.json b/client/package.json
@@ -34,7 +34,7 @@
     "@react-keycloak/web": "^3.4.0",
     "@tanstack/react-query": "^4.22.0",
     "@tanstack/react-query-devtools": "^4.22.0",
-    "axios": "^0.21.2",
+    "axios": "^1.6.8",
     "dayjs": "^1.11.7",
     "ejs": "^3.1.7",
     "fast-xml-parser": "^4.0.3",
@@ -71,7 +71,6 @@
     "@types/react-measure": "^2.0.12",
     "@types/react-router-dom": "^5.1.7",
     "@types/tinycolor2": "^1.4.6",
-    "axios-mock-adapter": "^1.19.0",
     "browserslist": "^4.19.1",
     "case-sensitive-paths-webpack-plugin": "^2.4.0",
     "copy-webpack-plugin": "^12.0.2",

diff --git a/client/public/locales/en/translation.json b/client/public/locales/en/translation.json
@@ -450,6 +450,7 @@
     "teamMember": "team member",
     "ticket": "Ticket",
     "trivialButMigratable": "Trivial but migratable",
+    "type": "Type",
     "unassessedOrUnknown": "Unassessed or unknown",
     "unassessed": "Unassessed",
     "unassigned": "Not yet assigned",

diff --git a/client/src/app/api/rest.ts b/client/src/app/api/rest.ts
@@ -1,6 +1,4 @@
-// hub OpenAPI definition: https://github.com/konveyor/tackle2-hub/blob/main/docs/openapi3.json
-
-import axios, { AxiosPromise } from "axios";
+import axios, { AxiosPromise, RawAxiosRequestHeaders } from "axios";
 
 import {
   AnalysisDependency,
@@ -107,14 +105,18 @@ export const QUESTIONNAIRES = HUB + "/questionnaires";
 
 export const ARCHETYPES = HUB + "/archetypes";
 
-// PATHFINDER
-export const PATHFINDER = "/hub/pathfinder";
 export const ASSESSMENTS = HUB + "/assessments";
 
-const jsonHeaders = { headers: { Accept: "application/json" } };
-const formHeaders = { headers: { Accept: "multipart/form-data" } };
-const fileHeaders = { headers: { Accept: "application/json" } };
-const yamlHeaders = { headers: { Accept: "application/x-yaml" } };
+const jsonHeaders: RawAxiosRequestHeaders = {
+  Accept: "application/json",
+};
+const formHeaders: RawAxiosRequestHeaders = {
+  Accept: "multipart/form-data",
+};
+const fileHeaders: RawAxiosRequestHeaders = { Accept: "application/json" };
+const yamlHeaders: RawAxiosRequestHeaders = {
+  Accept: "application/x-yaml",
+};
 
 type Direction = "asc" | "desc";
 
@@ -137,7 +139,7 @@ export const getApplicationDependencies = (
   return axios
     .get(`${APPLICATION_DEPENDENCY}`, {
       params,
-      headers: jsonHeaders.headers,
+      headers: jsonHeaders,
     })
     .then((response) => response.data);
 };
@@ -243,7 +245,7 @@ export const deleteAssessment = (id: number) => {
 };
 
 export const getIdentities = () => {
-  return axios.get<Identity[]>(`${IDENTITIES}`, jsonHeaders);
+  return axios.get<Identity[]>(`${IDENTITIES}`, { headers: jsonHeaders });
 };
 
 export const createIdentity = (obj: New<Identity>) => {
@@ -322,8 +324,7 @@ export function getTaskById(
   format: string,
   merged: boolean = false
 ): Promise<Task | string> {
-  const headers =
-    format === "yaml" ? { ...yamlHeaders.headers } : { ...jsonHeaders.headers };
+  const headers = format === "yaml" ? { ...yamlHeaders } : { ...jsonHeaders };
   const responseType = format === "yaml" ? "text" : "json";
 
   let url = `${TASKS}/${id}`;
@@ -371,11 +372,9 @@ export const uploadFileTaskgroup = ({
   formData: any;
   file: any;
 }) => {
-  return axios.post<Taskgroup>(
-    `${TASKGROUPS}/${id}/bucket/${path}`,
-    formData,
-    formHeaders
-  );
+  return axios.post<Taskgroup>(`${TASKGROUPS}/${id}/bucket/${path}`, formData, {
+    headers: formHeaders,
+  });
 };
 
 export const removeFileTaskgroup = ({
@@ -430,7 +429,9 @@ export const createFile = ({
   file: IReadFile;
 }) =>
   axios
-    .post<HubFile>(`${FILES}/${file.fileName}`, formData, fileHeaders)
+    .post<HubFile>(`${FILES}/${file.fileName}`, formData, {
+      headers: fileHeaders,
+    })
     .then((response) => {
       return response.data;
     });

diff --git a/client/src/app/components/AppTableActionButtons.tsx b/client/src/app/components/AppTableActionButtons.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { Button } from "@patternfly/react-core";
+import { Button, Flex, FlexItem } from "@patternfly/react-core";
 import { applicationsWriteScopes, RBAC, RBAC_TYPE } from "@app/rbac";
 import { ConditionalTooltip } from "./ConditionalTooltip";
 import { Td } from "@patternfly/react-table";
@@ -26,30 +26,39 @@ export const AppTableActionButtons: React.FC<AppTableActionButtonsProps> = ({
       rbacType={RBAC_TYPE.Scope}
     >
       <Td isActionCell>
-        <Button
-          id="edit-button"
-          aria-label="edit"
-          variant="secondary"
-          onClick={onEdit}
+        <Flex
+          direction={{ default: "row" }}
+          flexWrap={{ default: "nowrap" }}
+          style={{ minWidth: "100%" }}
         >
-          {t("actions.edit")}
-        </Button>
-      </Td>
-      <Td isActionCell>
-        <ConditionalTooltip
-          isTooltipEnabled={isDeleteEnabled}
-          content={tooltipMessage}
-        >
-          <Button
-            id="delete-button"
-            aria-label="delete"
-            variant="link"
-            onClick={onDelete}
-            isAriaDisabled={isDeleteEnabled}
-          >
-            {t("actions.delete")}
-          </Button>
-        </ConditionalTooltip>
+          <FlexItem spacer={{ default: "spacerSm" }} />
+          <FlexItem spacer={{ default: "spacerSm" }}>
+            <Button
+              id="edit-button"
+              aria-label="edit"
+              variant="secondary"
+              onClick={onEdit}
+            >
+              {t("actions.edit")}
+            </Button>
+          </FlexItem>
+          <FlexItem spacer={{ default: "spacerSm" }}>
+            <ConditionalTooltip
+              isTooltipEnabled={isDeleteEnabled}
+              content={tooltipMessage}
+            >
+              <Button
+                id="delete-button"
+                aria-label="delete"
+                variant="link"
+                onClick={onDelete}
+                isAriaDisabled={isDeleteEnabled}
+              >
+                {t("actions.delete")}
+              </Button>
+            </ConditionalTooltip>
+          </FlexItem>
+        </Flex>
       </Td>
     </RBAC>
   );

diff --git a/client/src/app/components/AppTableWithControls.tsx b/client/src/app/components/AppTableWithControls.tsx
diff --git a/client/src/app/components/Icons/IconWithLabel.tsx b/client/src/app/components/Icons/IconWithLabel.tsx
@@ -0,0 +1,36 @@
+import React, { FC, ReactElement, ReactNode } from "react";
+import { Flex, FlexItem } from "@patternfly/react-core";
+import { OptionalTooltip } from "./OptionalTooltip";
+
+export const IconWithLabel: FC<{
+  iconTooltipMessage?: string;
+  icon: ReactElement;
+  label: ReactNode;
+  trailingItem?: ReactElement;
+  trailingItemTooltipMessage?: string;
+}> = ({
+  iconTooltipMessage,
+  icon,
+  label,
+  trailingItem,
+  trailingItemTooltipMessage,
+}) => (
+  <Flex
+    flexWrap={{ default: "nowrap" }}
+    spaceItems={{ default: "spaceItemsSm" }}
+  >
+    <FlexItem>
+      <OptionalTooltip tooltipMessage={iconTooltipMessage}>
+        {icon}
+      </OptionalTooltip>
+    </FlexItem>
+    <FlexItem>{label}</FlexItem>
+    {!!trailingItem && (
+      <FlexItem>
+        <OptionalTooltip tooltipMessage={trailingItemTooltipMessage}>
+          {trailingItem}
+        </OptionalTooltip>
+      </FlexItem>
+    )}
+  </Flex>
+);