Merge branch 'konveyor:main' into main

.eslintrc.cjs

@@ -33,6 +33,7 @@ module.exports = {
     "@typescript-eslint",
     "react",
     "react-hooks",
+    "@tanstack/query",
   ],
 
   // NOTE: Tweak the rules as needed when bulk fixes get merged
@@ -55,6 +56,9 @@ module.exports = {
 
     // Allow the "cy-data" property for tackle-ui-test (but should really be "data-cy" w/o this rule)
     "react/no-unknown-property": ["error", { ignore: ["cy-data"] }],
+
+    "@tanstack/query/exhaustive-deps": "error",
+    "@tanstack/query/prefer-query-object-syntax": "error",
   },
 
   settings: {

client/public/locales/en/translation.json

@@ -214,16 +214,21 @@
   "terms": {
     "accepted": "Accepted",
     "acceptedAppsAndDeps": "Accepted applications and dependencies",
+    "associatedApplications": "Associated applications",
+    "associatedArchetypes": "Associated archetypes",
+    "archetypesReviewed": "Archetypes reviewed",
     "add": "Add",
     "additionalNotesOrComments": "Additional notes or comments",
-    "adoptionCandidateDistribution": "Adoption candidate distribution",
+    "adoptionCandidateDistribution": "Assessment confidence and risk",
     "affectedApplications": "Affected applications",
     "analysis": "Analysis",
     "answer": "Answer",
     "application": "Application",
+    "applicationReview": "Application review",
     "application(s)": "Application(s)",
     "applicationImports": "Application imports",
     "applicationName": "Application name",
+    "archetypeName": "Archetype name",
     "applications": "Applications",
     "archetype": "Archetype",
     "archetypes": "Archetypes",

client/src/app/api/models.ts

@@ -3,6 +3,7 @@ export enum MimeType {
   YAML = "yaml",
 }
 
+/** Mark an object as "New" therefore does not have an `id` field. */
 export type New<T extends { id: number }> = Omit<T, "id">;
 
 export interface HubFilter {
@@ -712,6 +713,7 @@ export interface Assessment
   description: string;
   status: AssessmentStatus;
   risk: Risk;
+  confidence?: number;
   stakeholders?: Ref[];
   stakeholderGroups?: Ref[];
 }

client/src/app/components/ConfirmDeleteDialog/ConfirmDeleteDialog.css

@@ -1,8 +1,3 @@
 .confirm-deletion {
   margin-top: var(--pf-v5-global--spacer--xl);
 }
-
-.confirm-deletion-input {
-  margin-top: var(--pf-v5-global--spacer--sm);
-  margin-bottom: var(--pf-v5-global--spacer--sm);
-}

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

@@ -46,14 +46,21 @@ const ConfirmDeleteDialog: FC<ConfirmDeleteDialogProps> = ({
     onClose();
   };
 
+  const handleOnConfirmDelete = () => {
+    if (!isDisabled) {
+      setNameToDeleteInput("");
+      onConfirmDelete();
+    }
+  };
+
   const confirmBtn = (
     <Button
       id="confirm-delete-dialog-button"
       key="confirm"
       aria-label="confirm"
       variant={ButtonVariant.danger}
       isDisabled={isDisabled}
-      onClick={isDisabled ? undefined : onConfirmDelete}
+      onClick={handleOnConfirmDelete}
     >
       {deleteBtnLabel ?? t("actions.delete")}
     </Button>
@@ -70,6 +77,7 @@ const ConfirmDeleteDialog: FC<ConfirmDeleteDialogProps> = ({
       {cancelBtnLabel ?? t("actions.cancel")}
     </Button>
   );
+
   return (
     <Modal
       id="confirm-delete-dialog"
@@ -91,7 +99,7 @@ const ConfirmDeleteDialog: FC<ConfirmDeleteDialogProps> = ({
         </Trans>
       </Text>
       <TextInput
-        className="confirm-deletion-input"
+        id="confirm-deletion-input"
         value={nameToDeleteInput}
         onChange={(_, value) => setNameToDeleteInput(value)}
       />

client/src/app/layout/HeaderApp/HeaderApp.tsx

@@ -86,23 +86,21 @@ export const HeaderApp: React.FC = () => {
           <BarsIcon />
         </PageToggleButton>
       </MastheadToggle>
-      {APP_BRAND === BrandType.Konveyor ? (
-        <MastheadMain>
-          <MastheadBrand>
+      <MastheadMain>
+        <MastheadBrand>
+          {APP_BRAND === BrandType.Konveyor ? (
             <Brand
               src={konveyorBrandImage}
               alt="brand"
               heights={{ default: "60px" }}
             />
-          </MastheadBrand>
-        </MastheadMain>
-      ) : (
-        <MastheadContent>
-          <Title className="logo-pointer" headingLevel="h1" size="2xl">
-            Migration Toolkit for Applications
-          </Title>
-        </MastheadContent>
-      )}
+          ) : (
+            <Title className="logo-pointer" headingLevel="h1" size="2xl">
+              Migration Toolkit for Applications
+            </Title>
+          )}
+        </MastheadBrand>
+      </MastheadMain>
       <MastheadContent>{toolbar}</MastheadContent>
     </Masthead>
   );

client/src/app/layout/SidebarApp/SidebarApp.tsx

@@ -124,14 +124,14 @@ export const SidebarApp: React.FC = () => {
                   {t("sidebar.archetypes")}
                 </NavLink>
               </NavItem>
-              <NavItem>
+              {/* <NavItem>
                 <NavLink
                   to={Paths.reports + search}
                   activeClassName="pf-m-current"
                 >
                   {t("sidebar.reports")}
                 </NavLink>
-              </NavItem>
+              </NavItem> */}
               <NavItem>
                 <NavLink to={Paths.controls} activeClassName="pf-m-current">
                   {t("sidebar.controls")}

client/src/app/pages/applications/analysis-wizard/analysis-wizard.tsx

@@ -386,6 +386,7 @@ export const AnalysisWizard: React.FC<IAnalysisWizard> = ({
       name={t("wizard.terms.review")}
       id={StepId.Review}
       isDisabled={!isStepEnabled(StepId.Review)}
+      footer={{ nextButtonText: "Run" }}
     >
       <Review applications={applications} mode={mode} />
     </WizardStep>,

client/src/app/pages/applications/analysis-wizard/components/upload-binary.tsx

@@ -46,8 +46,6 @@ export const UploadBinary: React.FC = () => {
       title: "Uploaded binary file.",
       variant: "success",
     });
-    setFileUploadStatus("success");
-    setFileUploadProgress(100);
   };
 
   const failedUpload = (error: AxiosError) => {
@@ -66,9 +64,6 @@ export const UploadBinary: React.FC = () => {
       title: "Removed binary file.",
       variant: "success",
     });
-    setFileUploadStatus(undefined);
-    setFileUploadProgress(undefined);
-    setValue("artifact", null);
   };
 
   const failedRemove = (error: AxiosError) => {
@@ -135,7 +130,19 @@ export const UploadBinary: React.FC = () => {
             file: droppedFiles[0],
           });
       }
-      setValue("artifact", droppedFiles[0]);
+      readFile(droppedFiles[0])
+        .then((data) => {
+          if (data) {
+            setFileUploadProgress(100);
+            setFileUploadStatus("success");
+            setValue("artifact", droppedFiles[0]);
+          }
+        })
+        .catch((error) => {
+          setValue("artifact", undefined);
+          setFileUploadProgress(0);
+          setFileUploadStatus("danger");
+        });
     }
   };
 
@@ -206,12 +213,14 @@ export const UploadBinary: React.FC = () => {
             key={artifact.name}
             customFileHandler={handleFile}
             onClearClick={() => {
+              setFileUploadStatus(undefined);
+              setFileUploadProgress(undefined);
+              setValue("artifact", null);
               taskGroup?.id &&
                 removeFile({
                   id: taskGroup?.id,
                   path: `binary/${artifact}`,
                 });
-              setValue("artifact", null);
             }}
             progressAriaLabel={"text"}
             progressValue={fileUploadProgress}

client/src/app/pages/applications/applications-table-assessment/applications-table-assessment.tsx

@@ -655,7 +655,7 @@ export const ApplicationsTable: React.FC = () => {
                         {...getTdProps({ columnKey: "assessment" })}
                       >
                         <ApplicationAssessmentStatus
-                          assessments={application.assessments}
+                          application={application}
                         />
                       </Td>
                       <Td

client/src/app/pages/applications/components/application-assessment-status/application-assessment-status.tsx

@@ -1,49 +1,45 @@
 import React from "react";
-import { AxiosError } from "axios";
 import { useTranslation } from "react-i18next";
 import { Spinner } from "@patternfly/react-core";
 
 import { EmptyTextMessage } from "@app/components/EmptyTextMessage";
-import { Assessment, Ref } from "@app/api/models";
-import { IconedStatus, IconedStatusPreset } from "@app/components/IconedStatus";
-import { useFetchAssessmentById } from "@app/queries/assessments";
+import { Application } from "@app/api/models";
+import { IconedStatus } from "@app/components/IconedStatus";
+import { useFetchAssessmentsByItemId } from "@app/queries/assessments";
 
 export interface ApplicationAssessmentStatusProps {
-  assessments?: Ref[];
+  application: Application;
   isLoading?: boolean;
-  fetchError?: AxiosError;
 }
 
-const getStatusIconFrom = (assessment: Assessment): IconedStatusPreset => {
-  switch (assessment.status) {
-    case "empty":
-      return "NotStarted";
-    case "started":
-      return "InProgress";
-    case "complete":
-      return "Completed";
-    default:
-      return "NotStarted";
-  }
-};
-
 export const ApplicationAssessmentStatus: React.FC<
   ApplicationAssessmentStatusProps
-> = ({ assessments, isLoading = false, fetchError = null }) => {
+> = ({ application, isLoading = false }) => {
   const { t } = useTranslation();
-  //TODO: remove this once we have a proper assessment status
-  const { assessment } = useFetchAssessmentById(assessments?.[0]?.id);
+
+  const {
+    assessments,
+    isFetching: isFetchingAssessmentsById,
+    fetchError,
+  } = useFetchAssessmentsByItemId(false, application.id);
+
+  if (application?.assessed) {
+    return <IconedStatus preset="Completed" />;
+  }
 
   if (fetchError) {
     return <EmptyTextMessage message={t("terms.notAvailable")} />;
   }
-  if (isLoading) {
+
+  if (isLoading || isFetchingAssessmentsById) {
     return <Spinner size="md" />;
   }
 
-  return assessment ? (
-    <IconedStatus preset={getStatusIconFrom(assessment)} />
-  ) : (
-    <IconedStatus preset="NotStarted" />
-  );
+  if (
+    assessments?.some((a) => a.status === "started" || a.status === "complete")
+  ) {
+    return <IconedStatus preset="InProgress" />;
+  }
+
+  return <IconedStatus preset="NotStarted" />;
 };